Elementos HTML 23
Pré-visualização7 páginas
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