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