Buscar

Html propriedades

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 21 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 21 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 21 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

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>...<h
6> </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 
Os mesmos atributos de <td> 
como <td>, mas o texto que 
contém aparece em negrito 
e centralizado (uma 
espécie de cabeçalho ou 
título). 
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 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 imagem como fundo, devemos considerar a sua cor e 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, uma imagemde cor 
clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara 
3. Mesmo tendo colocado uma imagem de fundo, devemos também colocar uma cor de fundo 
igual ou semelhante à cor da imagem (com o atributo bgcolor). Dessa maneira, mesmo que o 
navegador não carregue a imagem por algum motivo, o contraste estabelecido para o texto 
estará preservado. Assim, para que tal problema não ocorra, podemos estabelecer o seguinte: 
<body bgcolor="black" background="imagem.gif">. Mas é claro que essa preocupação será 
desnecessária, caso o texto tenha uma cor que possa apresentar-se nítida num fundo branco. 
 
 
background 
Como atributo de <table> 
Define uma imagem como fundo de uma tabela. 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: <table 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 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 imagem como fundo, devemos considerar a sua cor e 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, uma imagem de cor 
clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara 
3. Mesmo tendo colocado uma imagem de fundo, devemos também colocar uma cor de fundo 
igual ou semelhante à cor da imagem (com o atributo bgcolor). Dessa maneira, mesmo que o 
navegador não carregue a imagem por algum motivo, o contraste estabelecido para o texto 
estará preservado. Assim, para que tal problema não ocorra, podemos estabelecer o seguinte: 
<table bgcolor="black" background="imagem.gif">. Mas é claro que essa preocupação será 
desnecessária, caso o texto tenha uma cor que possa apresentar-se nítida num fundo branco. 
 
 
text 
Como atributo de <body>. 
Define a cor do texto para todo o corpo da página, ou seja, para tudo que está entre as tags 
<body> e< /body>, sendo que o padrão é black (preto). 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 text="blue"> 
< body text="#00FF00"> 
< body text="rgb(0,0,102)"> 
< body text="rgb(0%,0%,50%)"> 
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. 
Se você quer que o texto da página, do início ao fim, tenha determinada cor, então defina esse 
atributo. Mas, no decorrer do texto você pode mudar a cor de segmentos da página, utilizando 
a tag <font> com o seu atributo color. Mas, depois que for aplicada a tag de fechamento 
</font>, o texto volta à cor estabelecida no atributo text de< body>. 
Veja o exemplo abaixo: 
<body text="green"> 
< p>Este parágrafo é verde, porque essa cor foi estabelecida como atributo de body.</p> 
< p><font color="blue">Estas palavras são azuis,</font> mas estas voltam a ser verdes.</p> 
< /body> 
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 definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, 
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. 
 
 
link, vlink e alink 
Atributos de <body>. 
São três atributos que definem as cores dos links, já que estes devem diferenciar-se do 
restante do texto, para que o visitante da página possa identificá-los com facilidade.Tais 
definições valem para todos os links que aparecem dentro do corpo da página, ou seja, entre 
as tags <body> e </body>. Veja o que é definido em cada um dos atributos: 
link - Define a cor dos links que não foram visitados. 
vlink - Define a cor dos links já visitados. 
alink - Define a cor dos links ativos. Um link está ativo no momento em que se dá um clique 
nele. 
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%. Existe uma cor padrão para cada um dos três casos, para quando não se faz a 
definição. 
Exemplos: 
< body link="blue" vlink="green" alink="yellow"> 
< body link="#0000FF" vlink="#FF00FF" alink="#00FF00"> 
< body link="rgb(0,0,255)" vlink="rgb(255,0,255)" alink="rgb(0,255,0)"> 
< body link="rgb(0%,0%,100%)" vlink="rgb(100%,0%,100%)" alink="rgb(0%,100%,0%)"> 
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 definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, 
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. 
 
 
align 
Como atributo de <p> 
Define o alinhamento do parágrafo dentro da página. O funcionamento é igual ao alinhamento 
que é feito num processador de textos, como o Word. Os valores que podem ser atribuídos são 
os seguintes: 
left - Alinhamento à esquerda (o padrão). 
right - Alinhamento à direita. 
center - Alinhamento ao centro 
justify - Faz com que as palavras sejam distribuídas dentro de cada linha do texto de forma a 
ocupar toda a largura da página, sendo que a última fica localizada na extremidade direita. 
Exemplo: <p align="right">. 
Como atributo de <h1>... <h6> 
Da mesma forma que você define o alinhamento de um parágrafo, você poderá definir o 
alinhamento de um cabeçalho. Os valores "center" e "right" são utilizados com muita 
freqüencia, além de "left" que é o padrão. Apesar de funcionar, provavelmente você não verá 
muito sentido em aplicar o valor "justify" a um cabeçalho. Exemplo: <h4 align="center">. 
Como atributo de <hr> 
Com esse atributo você pode também definir o alinhamento de uma linha horizontal. É claro 
que neste caso você deverá também definir uma extensão com o atributo size. Isso porque o 
padrão da extensão da linha é de 100% e, sendo assim, não surtirá nenhum efeito um 
alinhamento como right ou center, já que a largura da página estará integralmente ocupada. Eis 
um exemplo: <hr size="40%" align="center"> 
Como atributo de <div> 
Outra aplicação desse atributo é na divisão de página criada pela tag <div>. O objetivo dessa 
tag é o de estabelecer uma única formatação para todo o bloco englobado por ela. Você define 
o alinhamento de todos os elementos que estão dentro do bloco por atacado. Suponha que 
você queira dar o mesmo alinhamento para dez parágrafos. Uma das formas seria especificar o 
atributo align nas dez tags <p>. Mas é melhor colocar tudo entre as tags <div> e< /div> e fazer 
a definição uma vez só. Quanto aos valores atribuídos, eles são os mesmos que vimos para o 
alinhamento de parágrafo. Mesmo tendo sido definido um alinhamento dentro do bloco <div>, 
você pode ainda alinhar parágrafos específicos de forma diferente, abrindo exceções dentro do 
bloco. Mas depoisque for novamente aplicada a tag <p> sem esse alinhamento particular, 
volta a funcionar o que foi estabelecido em <div>. Veja como funciona: 
< div align="right"> 
< p>Este parágrafo está alinhado à direita por causa da definição em div 
< p>Este também. 
< p align="left">Este está à esquerda. 
< p>Volta a definição feita em div 
< /div> 
 
 
align 
Como atributo de <img> 
Define o alinhamento da imagem dentro da página e controla o fluxo do texto ao seu redor. Tal 
texto é o que é digitado imediatamente após a tag <img>. Descrevemos abaixo como isso 
funciona com cada um dos valores que podemos atribuir. 
bottom - A imagem coloca-se à esquerda do texto. O texto tem seu início na 
linha nivelada com o canto inferior direito da imagem. Este é o padrão, portanto não precisa ser 
especificado. 
Exemplo: <img src="imagem.gif">texto. 
left - A imagem coloca-se à esquerda da página. O texto tem seu início na linha 
nivelada com o canto superior direito da imagem, contornando-a. 
Exemplo: <img src="imagem.gif" align="left">texto. 
right - A imagem coloca-se à direita da página. O texto tem seu início na linha 
nivelada com o canto superior esquerdo da imagem, contornando-a. 
Exemplo: <img src="imagem.gif" align="right">texto. 
top - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha 
nivelada com o canto superior direito da imagem. Apenas uma linha fica ao lado da imagem, 
sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da página. É de 
se notar que esse tipo de alinhamento é mais útil com pouco texto. 
Exemplo: <img src="img.gif" align="top">texto. 
middle - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha 
nivelada com o ponto central da imagem (sentido vertical). Apenas uma linha fica ao lado da 
imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da 
página. Como em top, esse alinhamento também é mais útil com pouco texto. 
Exemplo: <img src="imagem.gif" align="middle">texto. 
O alinhamento de uma imagem dentro da página pode ser feito também utilizando o atributo 
align na tag <p> ou< div>, mas a definição em <img>, se for left ou right, irá prevalecer. 
Já os valores bottom, middle e top apenas controlam o fluxo do texto e, com eles, o 
alinhamento da imagem obedece ao que foi definido em <p> ou <div>, sendo que o padrão é 
left. Podemos esclarecer isso melhor através de alguns exemplos, onde fizemos a combinação 
do alinhamento definido em <p> com o alinhamento definido em< img>. 
 
<p align="right"><img src="imagem.gif" align="middle">pouco texto</p> 
<p align="right"><img src="imagem.gif" align="top">pouco texto</p> 
<p align="center"><img src="imagem.gif" align="middle">pouco texto</p> 
<p align="center"><img src="imagem.gif" align="top">pouco texto</p> 
Observação: 
Você pode interromper o fluxo do texto ao lado da imagem, fazendo-o passar para a parte de 
baixo antecipadamente, com a utilização do atributo clear na tag <br>. 
 
 
face 
Como atributo de <font> 
Define a fonte do texto, como arial, verdana, etc. O padrão costuma ser Times New Roman, 
dependendo do navegador. Você deve preocupar-se em colocar uma fonte mais comum, 
porque pode ser que o visitante não tenha a que você escolheu instalada em seu computador. 
Caso ocorra isso, o texto será exibido com a padrão. 
Exemplos: 
<font face="arial"> 
< font face="Comic Sans MS,arial,verdana"> 
Pelo segundo exemplo, você percebe que pode especificar mais de uma fonte, para que o 
navegador escolha a primeira, se encontrá-la, e se não encontrar, coloque a segunda e assim 
por diante. Neste caso você não pode deixar de colocar o valor do atributo entre aspas que em 
alguns casos são opcionais. Quando um atributo possui espaços em seu interior as aspas 
passam a ser necessárias. No caso exemplificado, não fossem colocadas as aspas, o 
navegador entenderia que o nome da primeira fonte é apenas Comic. Note que tem de ser 
apenas um par de aspas, englobando todos os nomes. 
Observação: 
Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto do 
documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento </font>, exceto 
o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte que você definiu, 
mas o texto dentro de suas células terá a fonte padrão. Então, é preciso definir a fonte dentro 
de cada célula, ou seja, utilizar as tags <font> e </font> entre <td> e </td>. 
 
 
size 
Como atributo de <font> 
Define o tamanho da fonte do texto. Existem 7 tamanhos numerados de 1 a 7 por ordem 
crescente. Portanto, se especificarmos size="1", teremos o menor tamanho e, se 
especificarmos size="7", teremos o maior. Você notará que esses números não coincidem com 
os números que identificam o tamanho da fonte em seu processador de textos, como o Word, 
onde encontramos, por exemplo, tamanhos 10, 12, etc. Aqui é uma escala de 1 a 7 que vigora. 
Exemplo: <font size="2">. 
Existe também outra maneira de especificar esse tamanho de fonte. Podemos modificar o 
tamanho definido anteriormente utilizando os sinais + e -. 
Eis um exemplo: 
<font size="=+1"> 
No caso deste último exemplo, se o tamanho anterior era 2, passa a ser três. Ou seja, você 
pode aumentar ou diminuir o tamanho, em vez de especificar outro. 
Observação: 
Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto do 
documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento </font>, exceto 
o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte que você definiu, 
mas o texto dentro de suas células terá a fonte padrão. Então, É preciso definir a fonte dentro 
de cada célula, ou seja, utilizar as tags <font> e </font> entre <td> e </td>. 
 
 
size 
Como atributo de <hr> 
Define a espessura da linha horizontal criada. Pode ser um número de 1 a 100. Especificando 
um número maior que 100, será entendido como 100. 
Exemplos: 
<hr size="5"> 
< hr size="10"> 
 
 
color 
Como atributo de <font> 
Define a cor da fonte do texto. 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: 
< font face="arial" size="2" color="green"> 
< font face="arial" size="2" color="#00FF00"> 
< font face="arial" size="2" color="rgb(0,255,0)"> 
< font face="arial" size="2" color="rgb(0%,100%,0%)"> 
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. Se a definição da cor não for feita em <font> (ou, se feita, mas depois fechada com </font>), o 
texto será apresentado na cor padrão que é o preto (black ou #000000) ou a definida no 
atributo text de <body>. 
3. Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, 
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. 
4. Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto do 
documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento </font>, exceto 
o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte que você definiu, 
mas o texto dentro de suas células terá a fonte padrão. Então, É preciso definir a fonte dentro 
de cada célula, ou seja, utilizar as tags <font> e </font> entre <td> e </td>.width 
Como atributo de <hr> 
Define a extensão da linha horizontal criada. O padrão é a linha atingir toda a largura da 
página. Deve ser especificado em quantidade de pixels ou em percentual. Veja os exemplos: 
< hr width="200"> - A linha terá 200 pixels de extensão. 
< hr width="50%"> - A linha terá uma extensão igual à metade da largura da página. 
 
 
width e height 
Como atributos de <img> 
Definem a largura e altura da imagem em pixels. Deve-se colocar exatamente as medidas que 
a imagem possui. Obtém-se esses valores através da utilização de um designer gráfico ou 
exibindo a imagem no próprio navegador e, com um clique com o botão direito do mouse sobre 
ela, lê-se suas propriedades. 
Exemplo: <img src="imagem.gif width="80" height="60"> 
Pode-se inserir uma imagem sem definir esses dois atributos, mas isso não é recomendável. 
Vejamos por que: fazendo tal definição, o navegador, durante o processamento, já reserva o 
espaço necessário para o carregamento da imagem. Assim o visitante poderá ler o texto que 
se apresenta, antes da imagem ser baixada. 
É possível reduzir ou aumentar o tamanho da imagem através desses atributos, mas isso 
também não é conveniente, porque a imagem apresenta-se distorcida, além de que, quando 
fazemos reduçao, estamos utilizando um arquivo de imagem maior do que o necessário. 
 
 
noshade 
Como atributo de <hr> 
A linha horizontal sem esse atributo é desenhada com uma sombra que lhe dá um efeito de 
três dimensões. Com esse atributo a linha fica sem essa sombra, ou seja, perde o efeito de três 
dimensões. Exemplo: <hr noshade> 
 
 
clear 
Como atributo de <br> 
Utilizado para interromper o fluxo de texto ao lado de uma imagem ou tabela. Quando <img> 
ou <table> contém o atributo align definido como left ou right, o texto inicia-se ao lado da 
imagem ou da tabela e vai contornando-a. Então, <br> com o atributo clear faz com que esse 
fluxo lateral seja interrompido.O texto é jogado para a próxima margem livre. 
São os seguintes os valores que podem ser atribuídos: 
left - pula e atinge a margem livre após a imagem ou tabela alinhada à esquerda. 
right - pula e atinge a margem livre após a imagem ou tabela alinhada à direita. 
all - pula e atinge as duas margens livres (esquerda e direita). 
Exemplo: <img src="imagem.gif" align="right">texto<br clear=all>texto 
Observação: 
Usa-se all com mais freqüencia porque há situações em que, com sua utilização, pode-se obter 
o mesmo que obteríamos com left ou right. Mas left e right têm especial importância quando 
temos uma imagem ou tabela à esquerda e outra à direita, e uma delas é menor na altura. 
Neste caso, você pode querer que o efeito seja interrompido apenas em relação à imagem 
menor, mas que continue em relação à maior. 
 
 
type 
Como atributo de <ol> 
As listas ordenadas têm, por padrão, os seus itens numerados com algarismos arábicos. Você 
poderá mudar o tipo de marcador para letras, minúsculas ou maiúsculas, ou para algarismos 
romanos, minúsculos ou maiúsculos. Para fazer isso basta definir o atributo type com um dos 
seguintes valores: 
1 - seqüência numérica (algarismos arábicos) - o padrão. 
a - letras minúsculas. 
A - letras maiúsculas. 
i - seqüência numérica (algarismos romanos minúsculos). 
I - seqüência numérica (algarismos romanos maiúsculos). 
Exemplo: <ol type="A"> 
Como atributo de <ul> 
As listas não ordenadas também possuem um tipo de marcador. O padrão é um pequeno 
círculo cheio. Para mudar o tipo de marcador nas listas não ordenadas, atribua um dos 
seguintes valores ao atributo type: 
disc - pequeno círculo cheio(o padrão); 
circle - pequeno círculo vazio; 
square - pequeno quadrado cheio. 
Exemplo: <ul type=circle> 
Como atributo de <li> 
Quando utilizamos o atributo type em <ol> ou <ul>, estamos definindo o tipo de marcador para 
toda a lista. Entretanto, você pode definir um tipo de marcador diferente para um item 
específico de uma lista, usando o mesmo atributo na tag <li>. Se o item pertencer a uma lista 
ordenada, use os mesmos valores que são usados em< ol> e, se pertencer a uma lista não 
ordenada, use os mesmos valores que são usados em <ul>. Eis os exemplos: 
< li type="A"> 
< li type="circle"> 
 
 
start 
Como atributo de <ol> 
Você pode querer definir um número a partir do qual os itens de sua lista ordenada comecem a 
ser contados (o padrão é 1). Por exemplo: <ol start="3">. Isso vale para qualquer tipo de 
ordem, seja em algarismos arábicos, em romanos (minúsculos ou maiúsculos), ou letras do 
alfabeto (minúsculas ou maiúsculas), mas o valor atribuído a start sempre será em algarismo 
arábico. Vejamos os exemplos: 
< ol start="3"> - Os itens da lista serão numerados a partir de 3. Não precisa de type porque o 
padrão é adotado. 
< ol type="i" start=3> - O primeiro item será iii. 
< ol type="A" start=3> - O primeiro item será C. 
 
 
href 
Como atributo de <a> 
Define o destino do link. O valor atribuído a href pode ser um nome de um arquivo, um caminho 
completo do arquivo (path), uma URL ou ainda um alvo localizado no interior de uma página. 
Exemplos: 
< a href="arq.htm"> acessa uma página no mesmo site e no mesmo diretório. 
< a href="artigos/arq.htm"> acessa uma página no mesmo site mas noutro diretorio. 
< a href="http://www.abc.com.br"> acessa um arquivo em outro site. 
< a href="#capitulo1"> acessa um alvo localizado no interior da mesma página. 
< a href="arq.htm#capitulo1"> acessa um alvo localizado no interior de outra página mas no 
mesmo site. 
Notar que, para acessar um ponto localizado no interior do arquivo, é necessário o símbolo #. 
Quando o arquivo não estiver no mesmo diretório, será necessário especificar o caminho 
completo e, para fazer isso adequadamente, leia como especificar o caminho de acesso a 
arquivos (path). 
 
 
name 
Como atributo de <a> 
Define o alvo a ser atingido no interior da página. Quando você estabelece um link, precisa de 
uma referência para o destino, ou seja, é necessário atribuir um valor ao atributo href. Quando 
se trata de acessar um site ou um arquivo, a referência já existe, porque você dispõe do 
endereço do site ou do nome do arquivo. Mas quando você precisa atingir um alvo no interior 
da página, é necessário criar tal referência. 
Para isso você utiliza o atributo name: <a name=nomealvo>textoalvo<a> 
onde nomealvo é um nome que você cria e textoalvo é o trecho de texto que você quer atingir 
dentro da página. 
Vejamos o exemplo abaixo: 
< a name="cap3">Capítulo 3</a> 
[corpo do texto intitulado capítulo 3] 
Agora você pode acessar o capítulo 3 de seu documento assim: 
<a href="#cap3">Capítulo 3</a>. 
Note que é necessário usar o símbolo # no atributo href. 
 
 
target 
Como atributo de <a> 
Define em qual janela (ou frame) que será exibido o resultado do link. Se não for especificado, 
a exibição será feita na própria janela onde está o link. 
Pode-se atribuir um dos seguintes valores: 
_blank - A exibição é feita em uma nova janela. 
_self - A exibição é feita na própria janela onde está o link(padrão). 
_parent - A exibição é feita na janela que contém o frame onde está o link. 
_top - A exibição é feita na janela que ocupa posição mais alta na hierarquia, quando há 
frames. 
Exemplo: 
< a href=http://www.abc.com.br target="_blank">Site ABC</a>. 
 
 
src 
Como atributo de <img> 
Especifica o arquivo de imagem ou o caminho completo (path). Observe que src vem de source 
(fonte). 
Exemplos: 
< img src="imagem.gif"> acessa um arquivo de imagem no mesmo mesmo diretório. 
< img src="imagens/imagem.jpg"> acessa um arquivo de imagem noutro diretório. 
Quando o arquivo 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).lowsrc 
Como atributo de <img> 
Define uma imagem provisória, de baixa resolução, para ser exibida antes de ser carregada a 
definitiva. É um truque para melhorar a performance da página, mas hoje em dia pouca gente o 
utiliza porque as máquinas agora têm mais recursos. 
Pode-se,por exemplo, carregar uma imagem em preto e branco antes da colorida. A 
especificação é feita da mesma forma que em src, ou seja, o nome do arquivo ou o caminho 
completo (path). 
Exemplo: 
< img lowsrc="imagem1.gif" src="imagem2.gif"> 
Quando o arquivo 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). 
 
 
alt 
Como atributo de <img> 
Especifica um texto que aparecerá dentro do retângulo da imagem até que ela seja baixada. 
Observe que alt vem de alternative (texto alternativo). Esse texto aparecerá também numa 
tarjeta quando o ponteiro do mouse for estacionado sobre a imagem. 
Essa definição é importante para que o visitante saiba de qual imagem se trata, antes de ela 
ser exibida, ou mesmo depois. 
Exemplo: 
< img src="imagem.jpg" alt="foto da igreja"> 
É imporante que você digite o texto entre aspas. Sabemos que em muitos casos as aspas são 
dispensáveis, mas aqui, se não fossem colocadas, o navegador iria ver só a primeira palavra. 
No caso, exibiria apenas a palavra foto. 
Como atributo de <area> 
O atributo alt na tag <area> especifica um texto que aparecerá numa tarjeta quando o ponteiro 
do mouse for estacionado sobre uma área clicável de um mapa de imagens. 
Exemplo: 
< area shape="rect" coords="270,123,179,32" href="arq.htm" alt="texto"> 
Note que o texto não aparecerá também num retângulo de contorno, como ocorre com <img>. 
 
 
border 
Como atributo de <img> 
Define que a imagem terá bordas, ou seja, será colocada dentro de um retângulo, e o valor 
atribuído em pixels estabelece a sua espessura. Se definida como zero não terá bordas. 
Exemplos: 
< img src="imagem.jpg" border="1"> coloca a imagem dentro de um retângulo. 
< img src="imagem.jpg" border="0"> a imagem é exibida sem borda. 
 
 
border 
Como atributo de <table> 
Define que a tabela terá bordas em seu contorno (bordas externas) e no contorno de suas 
células (bordas internas). O valor em pixels define a espessura das bordas externas. A 
espessura das bordas internas ficam inalteráveis. O valor zero define que a tabela não terá 
bordas nem externas nem internas. Se for especificado apenas border, sem atribuição de valor, 
tal especificação equivalerá à atribuição de 1 pixel. 
Vejamos alguns exemplos: 
<table border="1"> bordas externas e internas com a espessura de 1 pixel. 
< table border> bordas externas e internas com a espessura de 1 pixel. (equivalente à anterior.) 
< table border="2"> bordas externas com a espessura de 2 pixels e internas com 1 pixel. 
< table border="0"> sem bordas. 
< table> sem bordas (padrão). 
 
 
bordercolor 
Como atributo de <table> 
Define a cor das bordas da tabela (externa e interna). 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: 
<table border="1" bordercolor="blue"> 
< table border="1" bordercolor="#00FF00"> 
Muitas vezes você terá que recorrer ao código hexadecimal, porque apenas algumas cores 
podem ser identificadas pelo nome. 
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. 
 
 
hspace e vspace 
Como atributos de <img> 
Definem as margens da imagem, em pixels. O atributo hspace define as margens à esquerda e 
à direita (sentido horizontal) e o vspace acima e abaixo (sentido vertical). Muito úteis para 
distanciar o texto da extremidade da imagem. 
Exemplo: 
< img src="imagem.jpg" hspace="20" vspace="10"> 
Não é possível definir margem à esquerda diferente da margem à direita. Da mesma forma, 
não é possível definir margem de cima diferente da margem de baixo. 
 
 
cellspacing e cellpadding 
Como atributos de <table> 
Definem, em pixels, o espaço entre as células e a margem dentro das células, 
respectivamente. 
Com cellspacing você cria um distanciamento entre as extremidades das células, nos quatro 
lados, à direita, à esquerda, em cima e embaixo. 
Com cellpadding, você também cria um distanciamento, mas do conteúdo da célula em relação 
às suas extremidades e também nos quatro lados. 
Exemplo: 
< table cellspacing="3" cellpadding="5"> 
Para se ter uma idéia mais nítida da diferença entre os dois atributos, observe uma tabela com 
bordas, ou seja, com o atributo border igual ou maior que 1. Nela você percebe que 
cellspancing estabelece um distanciamento entre os contornos das células contíguas. Já 
cellpaddig, estabelece um distanciamento do conteúdo da célula em relação ao seu contorno. 
Outra forma de se observar o efeito causado por esses atributos é colocando uma cor de fundo 
em cada célula com bgcolor. Esses fundos criam para cada célula uma espécie de tarja e 
dentro da tarja fica o conteúdo da célula. Assim, com cellspacing, você cria um distanciamento 
entre as tarjas, à esquerda e à direita, bem como em cima e embaixo. E, com cellpadding, você 
cria distanciamentos do conteúdo em relação à extremidade da tarja. 
É bom esclarecer que o funcionamento de ambos os atributos não depende de que haja bordas 
ou fundos nas células. Entretanto, quando temos uma tabela que não possui bordas, e que 
para suas células não houve nenhuma definição de cor de fundo ou de imagem de fundo, na 
prática, pode ser indiferente utilizar cellspacing ou cellpadding para estabelecer espaços entre 
os conteúdos das células. Ou seja, neste caso, pode-se estabelecer o espaço desejado 
utilizando apenas um dos atributos. 
 
 
width 
Como atributo de <table> e <td> 
Em <table> define a largura da tabela e em <td> define a largura da célula. Os valores são 
atribuídos em pixels ou em percentagem. Não sendo definida as larguras da tabela e das 
células, cada uma das células terá uma largura suficiente para acomodar o seu conteúdo. E, se 
as larguras forem definidas de forma insuficiente para acomodar o conteúdo, haverá quebra de 
linhas, fazendo a altura crescer. Mas isso só vai ocorrer se o conteúdo for quebrável, como um 
texto, por exemplo. Suponha que o conteúdo seja uma imagem com 100 pixels de largura e 
que a célula tenha uma definição de 50 pixels, neste caso, prevalecerá a largura suficiente para 
acomodar a imagem. 
A soma dos valores das larguras das células de uma linha será igual à largura da tabela. É 
interessante definir as larguras em percentagem, porque em pixels, a visualização não será a 
mesma dependendo da resolução de vídeo. 
Eis um exemplo: 
<table width="100%"> 
< tr> 
< td width="50%"> célula 1 da linha 1</td> 
< td width="50%"> célula 2 da linha 1</td> 
< /tr> 
< tr> 
< td width="50%"> célula 1 da linha 2</td> 
< td width="50%"> célula 2 da linha 2</td> 
< /tr> 
Se você definir a largura da tabela em 100%, ela ocupará toda a largura da página que é 
possível ser vista sem a barra de rolagem horizontal. Isso com qualquer resolução de vídeo. 
Quando não há definição de largura para as células, a largura total da tabela é dividida 
igualmente entre elas e, quando apenas algumas estão definidas, o espaço restante é dividido 
igualmente entre as demais. 
A não ser nos casos em que se usa o atributo colspan, todas as células de uma mesma coluna 
terão a largura igual, prevalencendo sempre a maior largura. Portanto, é possível alterar a 
largura de uma coluna, definindo-a em uma única célula dentro de uma coluna. 
Se você quiser criar uma tabela mais estreita ou maislarga pode definir a sua largura em um 
percentual menor ou maior que 100%. E, ainda assim, a soma das larguras das células deve 
ser igual a 100%, porque essa soma deve corresponder à largura integral da tabela 
(integralidade=100%), embora ela possa ter um valor relativo diferente de 100%. Quando essa 
soma for menor ou maior que 100%, isso será ajustado e esse ajuste recairá sobre a última 
célula. 
 
 
height 
Como atributo de <table>, <tr> e <td> 
Em <table> define a altura da tabela, em <tr> define a altura de todas as células pertencentes à 
linha, e em <td> define a altura da célula. Os valores são atribuídos em pixels ou em 
percentagem. 
Na maioria das vezes deixamos de utilizar esse atributo tanto em <table>, como em <tr> ou em 
<td>, porque as células já crescem o suficiente para acomodar o conteúdo inserido. Inclusive, 
quando definimos a largura com o atributo width; se essa largura não for suficiente para a 
largura do texto, então haverá quebras de linha e a célula crescerá automaticamente na altura. 
Além disso, há de se considerar o fato de que esse atributo não é contemplado por todos os 
browsers. Mas há situações em que sua utilização pode ser interessante. 
Apesar de funcionar, não há muito sentido na utilização de height em <td> porque não há como 
fazer com que células pertencentes a uma mesma linha apresentem-se com alturas 
diferenciadas. O que ocorre é que a linha toda assume altura da célula de maior altura. Assim é 
preferível definir a altura em <tr>. Dá mais clareza ao código. 
O funcionamento de height é muito parecido com o de width, mas height, em vez de atuar na 
largura, atua na altura, obviamente. Então, para se ter uma idéia a respeito, você pode ler as 
considerações feitas em width. Observe, entretanto, que <tr> nao possui width. 
 
 
align 
Como atributo de <table> 
Define o alinhamento da tabela dentro da página e controla o fluxo do texto ao seu redor. Tal 
texto é o que é digitado imediatamente após a tag </table>. Descrevemos abaixo como isso 
funciona com cada um dos valores que podemos atribuir. 
left - A tabela coloca-se à esquerda da página. O texto tem seu início na linha 
nivelada com o canto superior direito da tabela, contornando-a. 
Exemplo: <table align="left">...</table>texto 
right - A tabela coloca-se à direita da página. O texto tem seu início na linha 
nivelada com o canto superior esquerdo da tabela, contornando-a. 
Exemplo: <table align="right">...</table>texto 
center - A tabela coloca-se no centro da página. O fluxo do texto não é afetado, ou seja, ele 
aparece normalmente abaixo da tabela. 
Exemplo: <table align="center"> 
Observações: 
1) Os efeitos obtidos com left e right numa tabela são os mesmos que se obtém com uma 
imagem, mas, quanto aos obtidos em <img> através dos valores bottom, middle e top, não há 
para eles correspondentes em <table>. 
2) O alinhamento de uma tabela também pode ser definido no parágrafo que a contém, mas a 
definição em <table> prevalece sobre a feita em <p>. 
 
 
align 
Como atributo de <tr> e <td> 
Define o alinhamento horizontal do conteúdo das células. Quando é atribuído a <tr>, todas as 
células pertencentes à linha terão o alinhamento definido e, quando atribuído a <td>, somente 
a célula que teve a definição. Mesmo tendo feito a definição para a linha, você poderá fazê-la 
também para uma ou mais células. Assim todas as células terão um alinhamento igual, exceto 
as que tiveram uma definição particular. 
São os seguintes os valores que podem ser atribuídos: 
left - alinhamento à esquerda (o padrão). 
center - alinhamento ao centro. 
right - alinhamento à direita. 
Exemplos: 
< tr align="center"> 
< td align="right"> 
 
 
valign 
Como atributo de <tr> e <td> 
Define o alinhamento vertical do conteúdo das células. Quando é atribuído a <tr>, todas as 
células pertencentes à linha terão o alinhamento definido e, quando atribuído a <td>, somente 
a célula que teve a definição. Mesmo tendo feito a definição para a linha, você poderá fazê-la 
também para uma ou mais células. Assim todas as células terão um alinhamento igual, exceto 
as que tiveram uma definição particular. 
São os seguintes os valores que podem ser atribuídos: 
top - alinhamento no topo da célula. 
middle - alinhamento no meio da célula (o padrão). 
bottom - alinhamento na parte de baixo da célula. 
Exemplos: 
< tr align="middle"> 
< td align="bottom"> 
 
 
colspan 
Como atributo de <td> 
Expande a largura de uma célula. O valor atribuído é um número inteiro que corresponde à 
quantidade de colunas que a célula expandida abrange. 
Veja o exemplo: 
<table border="1"> 
< tr><td colspan="2" align="center">célula expandida</td></tr> 
< tr> 
< td>célula 1/linha 2</td> 
< td>célula 2/linha 2</td> 
< /tr> 
< /table> 
célula expandida 
célula 1/linha 2 célula 2/linha 2 
Veja ao lado a tabela criada no código exemplificado. Possui duas linhas: na segunda linha 
colocamos duas células e na primeira linha apenas uma com colspan="2". Assim criamos na 
primeira linha uma célula expandida que tem a largura igual à soma das larguras das células 
da segunda linha. Apenas para melhorar a estética, acrescentamos align="center". 
 
 
rowspan 
Como atributo de <td> 
Expande a altura de uma célula. O valor atribuído é um número inteiro que corresponde à 
quantidade de linhas que a célula expandida abrange. 
Veja o exemplo: 
<table border="1"> 
< tr> 
< td rowspan="3">célula 1(expandida)</td><td>célula 2/linha 1</td> 
< /tr><tr> 
< td>célula 2/linha 2</td> 
< /tr><tr> 
< td>célula 2/linha 3</td> 
< /tr> 
< /table> 
célula 1(expandida) 
célula 2/linha 1 
célula 2/linha 2 
célula 2/linha 3 
Veja ao lado a tabela criada no código exemplificado. Note que a criamos com três linhas: na 
primeira linha colocamos célula 1 e célula 2, sendo que a primeira foi expandida na altura com 
rowspan="3". Nas linhas 2 e 3, colocamos apenas célula 2, porque a célula 1 da primeira linha 
ocupa o espaço no sentido vertical. 
 
 
shape e coords 
Como atributos de <area> 
O atributo shape 
define o formato de uma área clicável de um mapa de imagens processado no cliente e coords 
estabelece as coordenadas dessa área em pixels. Os valores de coords devem ser separados 
por vírgulas. Abaixo, vamos tecer comentários sobre cada um dos formatos e apresentar 
exemplos com base na figura ao lado. 
rect - Cria uma área retangular. Temos obrigatoriamente quatro valores para coords, sendo 
que os dois primeiros (x1,y1) correspondem às coordenadas do vértice de um dos ângulos e os 
outros dois (x2,y2) às coordenadas do vértice do ângulo oposto. 
Exemplos: 
<area shape="rect" coords="21,16,132,87" href="arq.htm"> 
< area shape="rect" coords="132,16,21,87" href="arq.htm"> 
< area shape="rect" coords="21,87,132,16" href="arq.htm"> 
< area shape="rect" coords="132,87,21,16" href="arq.htm"> 
Os quatro exemplos fazem exatamente a mesma coisa, portanto deve-se adotar apenas um 
deles. Para apresentação desses exemplos, indicamos na figura as coordenadas dos vértices 
dos quatro ângulos, mas isso é desnecessário, porque você precisa apenas das coordenadas 
dos vértices de dois ângulos opostos. Aqui quisemos apenas demonstrar todas as 
possibilidades. 
circle - Cria uma área circular. Temos obrigatoriamente três valores para coords (x,y,r). Onde x 
e y são as coordenadas do centro do círculo e r o comprimento do seu raio. 
Exemplo: 
<area shape="circle" coords="226,59,52" href="arq.htm"> 
poly - Cria uma área poligonal. Temos obrigatoriamente para coords tantos valores quantos 
forem os ângulos. A quantidade de valores é indeterminada, porque um polígono pode possuir 
qualquer quantidade de ângulos. Então, coords=x1,y1,x2,y2,x3,y3,...,xn,yn. Onde x1 e y2 
correspondem às coordenadas do vértice do primeiro ângulo,x2 e y2 às coordenadas do 
vértice do segundo ângulo e assim por diante. Isso tem de ser na ordem em que os pontos 
estão localizados no perímetro do polígono, percorrendo-o no sentido horário. Mas qual deve 
ser colocado primeiro não importa. Um triângulo tem três pontos, um losango quatro, um 
hexagono seis, etc. 
Exemplos: 
<area shape="poly" coords="327,16,424,41,413,106,341,77,363,44" href="arq.htm"> 
< area shape="poly" coords="424,41,413,106,341,77,363,44,327,16" href="arq.htm"> 
Os dois exemplos fazem a mesma coisa. No primeiro, iniciamos num ponto, no segundo 
noutro, mas seguimos a ordem de localização desses pontos no sentido horário. 
Observação: 
Você que conhece o sistema cartesiano pode se confundir ao estabelecer os pontos. No 
sistema cartesiano, a reta x cresce da esquerda para a direita e a y de baixo para cima. Já aqui 
a quantidade de pixels cresce a partir do topo da imagem em direção à parte de baixo e cresce 
a partir da extremidade esquerda em direção à extremidade direita. Note bem: é ao contrário só 
verticalmente. Com rect e circle não há que preocupar-se com isso, mas com poly sim. Utilize o 
Paint do Windows para observar isso: abra uma imagem e estacione o ponteiro do mouse 
sobre algum ponto. Na barra de status você lê as coordenadas desse ponto (localização no 
sentido horizontal e no vertical). Caminhe com o mouse para ver esses números aumentarem e 
diminuirem e confirme nossa afirmação. 
 
 
href 
Como atributo de <area> 
Define o destino de um link de uma área clicável de um mapa de imagens processado no 
cliente. O atributo href em< area> funciona exatamente como em <a>.O valor atribuído a href 
pode ser um nome de um arquivo, um caminho completo do arquivo (path), uma URL ou ainda 
um alvo localizado no interior de uma página. 
Exemplos: 
<area shape="rect" coords="21,16,132,87" href="arq.htm" alt="texto"> 
href define o acesso a uma página no mesmo site e no mesmo diretório. 
<area shape="rect" coords="21,16,132,87" href="artigos/arq.htm" alt="texto"> 
href define o acesso a uma página no mesmo site mas noutro diretório. 
<area shape="rect" coords="21,16,132,87" href="http://www.abc.com.br" alt="texto"> 
href define o acesso a um arquivo em outro site. 
<area shape="rect" coords="21,16,132,87" href="#capitulo 1" alt="texto"> 
href define o acesso a um alvo localizado no interior da mesma página. 
<area shape="rect" coords="21,16,132,87" href="arq.htm#capitulo 1" alt="texto"> 
href define o acesso a um alvo localizado no interior de outra página mas no mesmo site. 
Notar que, para acessar um ponto localizado no interior do arquivo, é necessário o símbolo #. 
Quando o arquivo 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). 
 
 
name 
Como atributo de <map> 
Define um nome para um mapa de imagens processado no cliente. 
Você cria um mapa de imagens em duas etapas: 
1. Entre as tags <map> e </map>, você delimita as áreas clicáveis da imagem que servirão de 
links, utilizando a tag <area>. Em <map>, você especifica um nome para o mapa através do 
atributo name. 
2. Com a tag <img> você insere a imagem e, no atributo usemape, especifica o mesmo valor 
atribuído a name. 
Não precisa ser nessa ordem dentro do código. Você pode primeiro inserir a imagem depois o 
mapa, e vice-versa. 
Veja um exemplo completo de criação de um mapa clicável: 
<map name="mapa1"> 
< area shape="rect" coords="21,16,132,87" href="arq.htm"> 
< area shape="circle" coords="226,59,52" href="arq.htm"> 
< area shape="poly" coords="327,16,424,41,413,106,341,77,363,44" href="arq.htm"> 
< /map> 
< img src="imagem.gif" width="380" height="72" usemap="#mapa1"> 
 
 
usemap 
Como atributo de <img> 
Especifica um nome de um mapa clicável processado no cliente. Este nome tem de ser o 
mesmo que foi definido no atributo name da tag <map>. 
Exemplo: 
<img src="imagem.gif" width="380" height="72" usemap="#mapa1"> 
Note que é obrigatória a colocação do símbolo # antes do nome.