Elementos HTML 23
27 pág.

Elementos HTML 23


DisciplinaAnálise Textual9.502 materiais293.882 seguidores
Pré-visualização7 páginas
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 
\uf0b7 <html> 
</html> 
Abertura e fechamento do 
documento HTML. 
 
\uf0b7 <head> 
</head> 
Abertura e fechamento do 
cabeçalho do documento 
 
\uf0b7 <title> 
</title> 
Abertura e fechamento do 
título do documento 
 
\uf0b7 <body> 
</body> 
Abertura e fechamento do 
corpo do documento 
\uf0b7 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 background=nomearquivo 
\uf0b7 text=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 link=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 vlink=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 alink=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 <!-- 
--> 
Abertura e fechamento de 
comentários 
 
2 - TEXTO 
Abertura Fechamento Finalidade Atributos 
\uf0b7 <h1>...<h6> 
</h1>...</h6> 
Abertura e fechamento de 
um cabeçalho. São 6 níveis: 
h1 (o maior) até h6 (o 
menor). 
\uf0b7 align=left | center | right 
\uf0b7 <p> </p> 
Dispensável 
Inicia um parágrafo 
pulando uma linha. 
\uf0b7 align=left | center | right | 
justifiy 
\uf0b7 <br> 
Não há 
Vai para outra linha sem 
pular nenhuma. 
\uf0b7 clear=left | right | all 
\uf0b7 <b> 
</b> Coloca o texto em negrito 
\uf0b7 <i> 
</i> Coloca o texto em itálico 
\uf0b7 <tt> 
</tt> 
Coloca o texto em fonte 
monoespaçada 
 
\uf0b7 <sup> 
</sup> Coloca o texto sobrescrito 
\uf0b7 <sub> 
</sub> Coloca o texto subscrito 
\uf0b7 <font> 
</font> 
Estabelece o tipo de fonte, 
o tamanho e a cor. 
\uf0b7 face=&quot;nomefonte, 
nomefonte&quot; 
\uf0b7 size=+x | -x | x 
\uf0b7 color=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 <hr> 
Não há 
Cria uma linha divisória 
horizontal. 
\uf0b7 align=left | center | right 
\uf0b7 size=x 
\uf0b7 width=x | x% 
\uf0b7 noshade 
\uf0b7 <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. 
\uf0b7 align=left | center | right 
3 - LISTAS 
Abertura Fechamento Finalidade Atributos 
\uf0b7 <ol> 
</ol> 
Abertura e fechamento de 
uma lista ordenada. 
\uf0b7 type=1 | A | a | I | i 
\uf0b7 start=x 
\uf0b7 <ul> 
</ul> 
Abertura e fechamento de 
uma lista não ordenada. 
\uf0b7 type=disc | circle | square 
\uf0b7 <li> </li> 
Dispensável 
Inicia um item de lista 
ordenada ou não ordenada. 
\uf0b7 type=1 | A | a | I | i | disc | 
circle | square 
\uf0b7 <dl> 
</dl> 
Abertura e fechamento de 
uma lista de definições. 
 
\uf0b7 <dt> </dt> 
Dispensável 
Inicia o termo a ser 
definido. 
 
\uf0b7 <dd> <dd> 
Dispensável 
Inicia a definição do termo. 
4 - LINKS 
Abertura Fechamento Finalidade Atributos 
\uf0b7 <a> 
</a> 
Estabelece um texto ou 
imagem como link. 
\uf0b7 href=arquivodestino 
\uf0b7 name=nomealvo 
\uf0b7 target=_blank | _self | _parent 
| _top 
5 - IMAGENS 
Abertura Fechamento Finalidade Atributos 
\uf0b7 <img> 
Não há Inserção de imagem 
\uf0b7 src=nomearquivo 
\uf0b7 lowsrc=nomearquivo 
\uf0b7 align=bottom | left | right | top 
| middle 
\uf0b7 width=x 
\uf0b7 height=x 
\uf0b7 alt=texto 
\uf0b7 border=x 
\uf0b7 hspace=x 
\uf0b7 vspace=x 
\uf0b7 usemap=nomemapa 
6 - MAPAS DE IMAGENS 
Abertura Fechamento Finalidade Atributos 
\uf0b7 <map> 
</map> 
Abertura e fechamento de 
um mapa de imagens 
processado no cliente. 
\uf0b7 name=nomemapa 
\uf0b7 <area> 
Não há 
Define uma área clicável 
que funcionará como link 
dentro do mapa de imagens. 
\uf0b7 shape=rect | circle | poly 
\uf0b7 coords=x,y,x,y 
\uf0b7 href=arquivodestino 
\uf0b7 alt=texto 
7 - TABELAS 
Abertura Fechamento Finalidade Atributos 
\uf0b7 <table> 
</table> 
Abertura e fechamento de 
uma tabela. 
\uf0b7 width=x 
\uf0b7 height=x 
\uf0b7 align=left | center | right 
\uf0b7 cellspacing=x 
\uf0b7 cellpadding=x 
\uf0b7 border=x 
\uf0b7 bordercolor=nomecor | 
#rrggbb | rgb(x,x,x) 
\uf0b7 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 background=nomearquivo 
\uf0b7 <tr> 
</tr> 
Abertura e fechamento de 
uma linha da tabela. 
\uf0b7 align=left | center | right 
\uf0b7 valign=top | middle | bottom 
\uf0b7 height=x 
\uf0b7 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 <td> 
</td> 
Abertura e fechamento de 
uma célula dentro de uma 
linha da tabela. 
\uf0b7 align=left | center | right 
\uf0b7 valign=top | middle | bottom 
\uf0b7 width=x 
\uf0b7 height=x 
\uf0b7 colspan=x 
\uf0b7 rowspan=x 
\uf0b7 bgcolor=nomecor | #rrggbb | 
rgb(x,x,x) 
\uf0b7 <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=&quot;blue&quot;> 
<body bgcolor=&quot;#0000FF&quot;> 
<body bgcolor=&quot;rgb(0,0,255)&quot;> 
<body bgcolor=&quot;rgb(0%,0%,100%)&quot;> 
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=&quot;yellow&quot;> 
<table bgcolor=&quot;FF9900&quot;> 
<tr bgcolor=&quot;#008000&quot;> 
<tr bgcolor=&quot;rgb(204,102,0)&quot;> 
<td bgcolor=&quot;#CD5C5C&quot;> 
<td bgcolor=&quot;rgb(80%,20%,60%)&quot;> 
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 &quot;imagem.gif&quot; no mesmo diretório onde se encontra a página, 
podemos fazer o seguinte: <body background=&quot;imagem.gif&quot;>. 
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