Tutorial basico de HTML 37
Pré-visualização4 páginas
foi feito a seção. Colocando Links nas Âncoras Agora que a ancora foi feita, falta linká-la, desse jeito: <a href="#seção1">Seção 1</a> <HTML> <HEAD> <TITLE> Minha Primeira Página</TITLE> <META NAME="author" content="WebMaster" <META NAME="description" CONTENT="Minha Primeira Página de HTML"> <META NAME="keywords" content="Página HTML"> <META HTTP-EQUIV="language" content="pt-br"> </HEAD> <BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN"> <h1><font face=Tahoma color=green>Este é o meu primeiro título </font></h1> <p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro parágrafo em HTML</font></p> <p align="justify"><font face=Verdana size=2 color=orange>Este é o meu segundo parágrafo<Br>E esta é minha primeira quebra de linha.</font></p> <a href="http://www.google.com"><font face="Tahoma" size=2> Google</font></a> Inserindo Imagens Para inserir imagens numa WebPage vamos utilizar a Tag IMG. Ex. <img src="http://www.univ- ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background .jpg"> Configurando a Imagem Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você pode utilizar para deixar a sua imagem ao seu gosto. Utilizamos as seguintes Tag\u2019s a partir de IMG SRC: <HTML> <HEAD> <TITLE> Minha Primeira Página</TITLE> <META NAME="author" content="WebMaster" <META NAME="description" CONTENT="Minha Primeira Página de HTML"> <META NAME="keywords" content="Página HTML"> <META HTTP-EQUIV="language" content="pt-br"> </HEAD> <BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN"> <h1><font face=Tahoma color=green>Este é o meu primeiro título </font></h1> <a name="1"><p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro parágrafo em HTML</font></p></a> <p align="justify"><font face=Verdana size=2 color=orange>Este é o meu segundo parágrafo<Br>E esta é minha primeira quebra de linha.</font></p> <a href="http://www.google.com"><font face="Tahoma" size=2> Google</font></a> <a href="#1">Voltar para o primeiro parágrafo</a> Width \u2013 A partir dela informamos a largura da imagem. Se não for configurada a imagem será inserida no seu tamanho original. Height \u2013 Com ela, informamos a altura. Quando não é informada mantém também sua altura original. Border \u2013 Cria e configura o tamanho da borda da figura. Align \u2013 Alinha a imagem em relação ao texto. Temos três tipos de alinhamento. Top \u2013 Alinha o texto paralelamente ao topo da Imagem. Middle \u2013 Alinha o texto no centro da Imagem. Bottom \u2013 Alinha o texto paralelamente à base da imagem. Alt \u2013 É uma tag em que você insere um texto alternativo, para que se no caso o browser não abrir a imagem o texto aparecerá no lugar. Exemplo: <img src="http://www.univ- ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background .jpg" width=120 height=160 align="top" border="3" alt="imagem principal"> <HTML> <HEAD> <TITLE> Minha Primeira Página</TITLE> <META NAME="author" content="WebMaster" <META NAME="description" CONTENT="Minha Primeira Página de HTML"> <META NAME="keywords" content="Página HTML"> <META HTTP-EQUIV="language" content="pt-br"> </HEAD> <BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN"> <h1><font face=Tahoma color=green>Este é o meu primeiro título </font></h1> <a name="1"><p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro parágrafo em HTML</font></p></a> Inserindo Imagens aos Links Para inserir uma imagem num link basta colocar no lugar do texto do link a tag que insere imagem. Ex. <a href="teste.html><img src="http://www.univ- ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background .jpg" width=120 height=160 align="middle" border="3" alt="fundo"></a> SOM Para inserir sons na sua pagina vamos utilizar as seguintes Tag\u2019s: EMBED SRC \u2013 Para colocar as músicas para reproduzir em uma espécie de mini-media player na pagina. Ex.<embed src="audio.mp3" loop="1"> BGSOUND SRC \u2013 Para colocar músicas em plano de fundo, para que apenas toque sem que ninguém consiga ver, apenas ouvi-la. Ex.<bgsound src="audio.mp3 loop="1"> LOOP \u2013 Utilizamos o loop para colocarmos quantas vezes queremos que a música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas vezes... Para colocarmos para que se repita inúmeras vezes, colocamos loop=infinite. <p align="justify"><font face=Verdana size=2 color=orange>Este é o meu segundo parágrafo<Br>E esta é minha primeira quebra de linha.</font></p> <img src="http://www.univ- ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg" width=120 height=160 align="middle" border="3" alt="fundo"> <a href="http://www.google.com"><font face="Tahoma" size=2> Google</font></a> <a href="#1">Voltar para o primeiro parágrafo</a> TABELAS As Tabelas servem para deixar mais organizados os dados disponíveis em sua pagina. Criando tabelas Para criar tabelas simples, vamos fazer da seguinte maneira: As tag\u2019s Table e /Table servem para indicar inicio e fim de tabela. TR define cada linha de cada tabela. TH Define o cabeçalho da Tabela. É uma célula da tabela. TD Define os dados da Tabela. Melhorando a Tabela Agora vamos melhorar a aparência da tabela inserindo Tag\u2019s BORDER: espessura da borda em pixels. BOREDERCOLOR: especifica a cor da borda da tabela WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou %; HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou %; CELLSPACING: especifica o espaço entre uma célula e outra, em pixels; CELLADDING: especifica o espaço entre os dados e a borda da tabela, em pixels; BGCOLOR: cor de fundo das células da tabela. <TABLE> <TR> <TH>Cabeçalho da Tabela</TH> <TD>Dados da Tabela</TD> </TR> </TABLE> Atributos Individuais Vamos agora configurar individualmente cada célula. ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right, left, center. BGCOLOR: define a cor de fundo das células da linha ou de uma célula individual; VALIGN: alinhamento vertical de uma célula ou de células de uma linha; Pode ser top, middle ou bottom. WIDTH: largura de uma célula em pixels ou %; NOWRAP: indica ao browser que o texto da célula não pode ser dividido em mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela célula; Células Mescladas Para mesclar as células vamos atribuir à Tag TD os seguintes atributos: COLSPAN: Será o numero de colunas que a célula ocupara. ROWSPAN: Será o numero de linhas que a célula ocupara. <table border="2" bordercolor="#003300" bgcolor="green" width="60%" height="40%" cellspacing="3" celladding="3"> <table border="2" bordercolor="#003300" bgcolor="green" width="60%" height="40%" cellspacing="3" celladding="3"> <tr align="left" valign="top" <Table Border="2" width="50%" cellpadintg="3" celladding="3"> <TR bgcolor="#FFFACD"> <TD colspan="2">Célula 1</TD> </TR> </TABLE>