A maior rede de estudos do Brasil

Grátis
27 pág.
Elementos HTML 23

Pré-visualização | Página 1 de 7

Elementos HTML - Guia de Referência 
 
Este Guia de Referência apresenta em primeiro plano uma tabela onde estão 
relacionadas as tags HTML e seus respectivos atributos. 
Nas duas primeiras colunas da tabela, aparecem as tags de abertura e de 
fechamento e, a terceira, a descrição da finalidade de cada uma. Na última coluna 
aparecem os atributos com seus possíveis valores. 
E eis o que é mais importante: um clique no atributo leva você a um 
esclarecimento a respeito dele com riqueza de detalhes. 
As tags e atributos estão sinalizados com vermelho ou verde. O sinal vermelho 
indica desaprovação pelo W3C e o verde indica que não há desaprovação. 
 
1 - DOCUMENTO 
Abertura Fechamento Finalidade Atributos 
 <html> 
</html> 
Abertura e fechamento do 
documento HTML. 
 
 <head> 
</head> 
Abertura e fechamento do 
cabeçalho do documento 
 
 <title> 
</title> 
Abertura e fechamento do 
título do documento 
 
 <body> 
</body> 
Abertura e fechamento do 
corpo do documento 
 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
 background=nomearquivo 
 text=nomecor | #rrggbb | 
rgb(x,x,x) 
 link=nomecor | #rrggbb | 
rgb(x,x,x) 
 vlink=nomecor | #rrggbb | 
rgb(x,x,x) 
 alink=nomecor | #rrggbb | 
rgb(x,x,x) 
 <!-- 
--> 
Abertura e fechamento de 
comentários 
 
2 - TEXTO 
Abertura Fechamento Finalidade Atributos 
 <h1>...<h6> 
</h1>...</h6> 
Abertura e fechamento de 
um cabeçalho. São 6 níveis: 
h1 (o maior) até h6 (o 
menor). 
 align=left | center | right 
 <p> </p> 
Dispensável 
Inicia um parágrafo 
pulando uma linha. 
 align=left | center | right | 
justifiy 
 <br> 
Não há 
Vai para outra linha sem 
pular nenhuma. 
 clear=left | right | all 
 <b> 
</b> Coloca o texto em negrito 
 <i> 
</i> Coloca o texto em itálico 
 <tt> 
</tt> 
Coloca o texto em fonte 
monoespaçada 
 
 <sup> 
</sup> Coloca o texto sobrescrito 
 <sub> 
</sub> Coloca o texto subscrito 
 <font> 
</font> 
Estabelece o tipo de fonte, 
o tamanho e a cor. 
 face="nomefonte, 
nomefonte" 
 size=+x | -x | x 
 color=nomecor | #rrggbb | 
rgb(x,x,x) 
 <hr> 
Não há 
Cria uma linha divisória 
horizontal. 
 align=left | center | right 
 size=x 
 width=x | x% 
 noshade 
 <div> 
</div> 
Abertura e fechamento de 
uma divisão de página 
cujos elementos que estão 
dentro dela obedecerão às 
mesmas definições. 
 align=left | center | right 
3 - LISTAS 
Abertura Fechamento Finalidade Atributos 
 <ol> 
</ol> 
Abertura e fechamento de 
uma lista ordenada. 
 type=1 | A | a | I | i 
 start=x 
 <ul> 
</ul> 
Abertura e fechamento de 
uma lista não ordenada. 
 type=disc | circle | square 
 <li> </li> 
Dispensável 
Inicia um item de lista 
ordenada ou não ordenada. 
 type=1 | A | a | I | i | disc | 
circle | square 
 <dl> 
</dl> 
Abertura e fechamento de 
uma lista de definições. 
 
 <dt> </dt> 
Dispensável 
Inicia o termo a ser 
definido. 
 
 <dd> <dd> 
Dispensável 
Inicia a definição do termo. 
4 - LINKS 
Abertura Fechamento Finalidade Atributos 
 <a> 
</a> 
Estabelece um texto ou 
imagem como link. 
 href=arquivodestino 
 name=nomealvo 
 target=_blank | _self | _parent 
| _top 
5 - IMAGENS 
Abertura Fechamento Finalidade Atributos 
 <img> 
Não há Inserção de imagem 
 src=nomearquivo 
 lowsrc=nomearquivo 
 align=bottom | left | right | top 
| middle 
 width=x 
 height=x 
 alt=texto 
 border=x 
 hspace=x 
 vspace=x 
 usemap=nomemapa 
6 - MAPAS DE IMAGENS 
Abertura Fechamento Finalidade Atributos 
 <map> 
</map> 
Abertura e fechamento de 
um mapa de imagens 
processado no cliente. 
 name=nomemapa 
 <area> 
Não há 
Define uma área clicável 
que funcionará como link 
dentro do mapa de imagens. 
 shape=rect | circle | poly 
 coords=x,y,x,y 
 href=arquivodestino 
 alt=texto 
7 - TABELAS 
Abertura Fechamento Finalidade Atributos 
 <table> 
</table> 
Abertura e fechamento de 
uma tabela. 
 width=x 
 height=x 
 align=left | center | right 
 cellspacing=x 
 cellpadding=x 
 border=x 
 bordercolor=nomecor | 
#rrggbb | rgb(x,x,x) 
 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
 background=nomearquivo 
 <tr> 
</tr> 
Abertura e fechamento de 
uma linha da tabela. 
 align=left | center | right 
 valign=top | middle | bottom 
 height=x 
 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
 <td> 
</td> 
Abertura e fechamento de 
uma célula dentro de uma 
linha da tabela. 
 align=left | center | right 
 valign=top | middle | bottom 
 width=x 
 height=x 
 colspan=x 
 rowspan=x 
 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
 <th> 
</th> 
Abertura e fechamento de 
uma célula dentro de uma 
linha da tabela. Funciona 
como <td>, mas o texto que 
contém aparece em negrito 
e centralizado (uma espécie 
de cabeçalho ou título). 
Os mesmos atributos de <td> 
Esclarecimentos detalhados sobre os atributos das tags 
 
bgcolor 
Como atributo de <body> 
Define uma cor de fundo para a página. Pode-se usar o nome da cor, o código 
hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste 
último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%. 
Exemplos: 
<body bgcolor="blue"> 
<body bgcolor="#0000FF"> 
<body bgcolor="rgb(0,0,255)"> 
<body bgcolor="rgb(0%,0%,100%)"> 
Note que o símbolo # no início do código hexadecimal é obrigatório. 
Disponibilizamos neste site uma tabela de cores que você poderá usar. 
Observações: 
1. Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um 
nome reconhecido pelo navegador. É recomendável que se utilize sempre o 
código hexadecimal. 
2. Ao escolhermos uma cor de fundo, devemos nos preocupar também com a 
definição de uma cor adequada para o texto, para que ocorra o devido contraste 
entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor 
clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor 
clara 
bgcolor 
Como atributo de <table>, <tr> , <td> ou <th> 
Define uma cor de fundo de uma tabela, linha ou célula. Pode-se usar o nome da cor, o 
código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). 
Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 
100%. 
Quando uma cor de fundo é definida para a página na tag <body>, a tabela também será 
abrangida, mas mesmo assim você poderá definir outra cor para a tabela, o que irá 
distingüi-la. Isso pode ser feito também para uma ou mais linhas e/ou células. 
Exemplos: 
<table bgcolor="yellow"> 
<table bgcolor="FF9900"> 
<tr bgcolor="#008000"> 
<tr bgcolor="rgb(204,102,0)"> 
<td bgcolor="#CD5C5C"> 
<td bgcolor="rgb(80%,20%,60%)"> 
Note que o símbolo # no início do código hexadecimal é obrigatório. 
Disponibilizamos neste site uma tabela de cores que você poderá usar. 
Observações: 
1. Muitas vezes você não poderá utilizar o nome das cores, poucas têm um nome 
reconhecido pelo navegador. É recomendável que se utilize sempre o código 
hexadecimal. 
2. Ao escolhermos uma cor de fundo, devemos nos preocupar também com a 
definição de uma cor adequada para o texto, para que ocorra o devido contraste 
entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor 
clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor 
clara 
background 
Como atributo de <body> 
Define uma imagem como fundo de uma página. Supondo a existência de um arquivo 
de imagem com o nome "imagem.gif" no mesmo diretório onde se encontra a página, 
podemos fazer o seguinte: <body background="imagem.gif">. 
Se o arquivo de imagem não estiver no mesmo diretório, será necessário especificar o 
caminho e, para fazer isso adequadamente, leia como especificar o caminho de acesso a 
arquivos (path). 
Observações: 
1. Muitas vezes você não poderá utilizar