Este parágrafo é verde, porque essa cor foi estabelecida como atributo de body.

Estas palavras são azuis, mas estas voltam a ser verdes.

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:

. Como atributo de

...

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:

. Como atributo de

---

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:

---

Como atributo de

Outra aplicação desse atributo é na divisão de página criada pela tag

. 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

. Mas é melhor colocar tudo entre as tags

e

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

, você pode ainda alinhar parágrafos específicos de forma diferente, abrindo exceções dentro do bloco. Mas depois que for novamente aplicada a tag

sem esse alinhamento particular, volta a funcionar o que foi estabelecido em

. Veja como funciona:

Este parágrafo está alinhado à direita por causa da definição em div

Este também.

Este está à esquerda.

Volta a definição feita em div

align Como atributo de 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 . 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: 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: 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: 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: 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: texto. O alinhamento de uma imagem dentro da página pode ser feito também utilizando o atributo align na tag

ou

, mas a definição em , 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

ou

, sendo que o padrão é left. Podemos esclarecer isso melhor através de alguns exemplos, onde fizemos a combinação do alinhamento definido em

com o alinhamento definido em .

pouco texto

pouco texto

pouco texto

pouco texto

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
. face Como atributo de 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: 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 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 , 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 e entre

. width Como atributo de

---

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:

---

- A linha terá 200 pixels de extensão.

---

- A linha terá uma extensão igual à metade da largura da página. width e height Como atributos de 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: 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

---

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:

---

clear Como atributo de
Utilizado para interromper o fluxo de texto ao lado de uma imagem ou tabela. Quando ou

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,
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: texto
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

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:
Como atributo de
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:
Como atributo de
• Quando utilizamos o atributo type em
  ou
  , 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
  • . Se o item pertencer a uma lista ordenada, use os mesmos valores que são usados em
    e, se pertencer a uma lista não ordenada, use os mesmos valores que são usados em
    . Eis os exemplos:
    • start Como atributo de
      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:
      . 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:
      - Os itens da lista serão numerados a partir de 3. Não precisa de type porque o padrão é adotado.
      - O primeiro item será iii.
      - O primeiro item será C. href Como atributo de 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: acessa uma página no mesmo site e no mesmo diretório. acessa uma página no mesmo site mas noutro diretorio. acessa um arquivo em outro site. acessa um alvo localizado no interior da mesma página. 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 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: textoalvo 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: Capítulo 3 [corpo do texto intitulado capítulo 3] Agora você pode acessar o capítulo 3 de seu documento assim: Capítulo 3. Note que é necessário usar o símbolo # no atributo href. target Como atributo de 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: Site ABC. src Como atributo de Especifica o arquivo de imagem ou o caminho completo (path). Observe que src vem de source (fonte). Exemplos: acessa um arquivo de imagem no mesmo mesmo diretório. acessa um arquivo de imagem noutro diretório. lowsrc Como atributo de 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: alt Como atributo de 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: É 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 O atributo alt na tag 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: Note que o texto não aparecerá também num retângulo de contorno, como ocorre com . order Como atributo de 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: coloca a imagem dentro de um retângulo. a imagem é exibida sem borda. border Como atributo de

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 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: 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

Em define a largura da tabela e em 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: 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 célula 1 da linha 1 célula 2 da linha 1 célula 1 da linha 2 célula 2 da linha 2 , e Em define a altura da tabela, em define a altura de todas as células pertencentes à linha, e em 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 , como em ou em . 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 nao possui width. align Como atributo de , 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 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 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 . 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: ...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: ...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: 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 através dos valores bottom, middle e top, não há para eles correspondentes em . 2) O alinhamento de uma tabela também pode ser definido no parágrafo que a contém, mas a definição em prevalece sobre a feita em . align Como atributo de e , todas as células pertencentes à linha terão o alinhamento definido e, quando atribuído a e , todas as células pertencentes à linha terão o alinhamento definido e, quando atribuído a Define o alinhamento horizontal do conteúdo das células. Quando é atribuído a , 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: valign Como atributo de Define o alinhamento vertical do conteúdo das células. Quando é atribuído a , 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: colspan Como atributo de 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: célula expandida célula 1/linha 2 célula 2/linha 2 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 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: célula 1(expandida) célula 2/linha 1 célula 2/linha 2 célula 2/linha 3 célula 2/linha 1 célula 1(expandida) 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 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: 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: 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: 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 Define o destino de um link de uma área clicável de um mapa de imagens processado no cliente. O atributo href em funciona exatamente como em .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: href define o acesso a uma página no mesmo site e no mesmo diretório. href define o acesso a uma página no mesmo site mas noutro diretório. href define o acesso a um arquivo em outro site. href define o acesso a um alvo localizado no interior da mesma página. 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 #. name Como atributo de