Elementos HTML 23

src="imagem2.gif"> 
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>. 
order 
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 mais larga 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