Desenvolvimento - HTML

Guia Prático de HTML - Parte 2

Aprenda HTML através deste guia. O HTML é uma Linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hipertexto.

por Tiago Daniel de Souza



6. MODIFICANDO O CORPO DO DOCUMENTO

Como dito anteriormente, o elemento body engloba o corpo do seu documento HTML. Ele possui muitos atributos que possibilitam modificar a aparência da sua página, como cor de fundo ou das letras. Esses atributos também podem ser utilizados junto com o atributo td. Aqui mostraremos apenas os atributos que interferem nas cores da sua página:

  • bgcolor: define a cor de fundo de um documento
  • text: a cor do texto
  • link: a cor dos links
  • alink: a cor dos links ativos atualmente (a página que você está visitando)
  • vlink: cor dos links já visitados

Os argumentos são o nome ou o número de uma cor, exatamente como no caso do atributo color usado no elemento font. Por exemplo:

<html>

<head> <title>Isso é uma confusão!</title></head>

<body bgcolor="black" text="gray" link="red" alink="white">

Isso é uma página em html.

</body>

</html>

Essa é uma página HTML onde o fundo será preto, com letras cinzas, links em vermelho e links ativos em branco. Essas são as definições globais de cor para seu documento, e a qualquer instante você pode mudar as cores com o elemento font.

7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML

7.1 - Cabeçalhos

Os cabeçalhos (também chamados de Headings) servem para criar títulos diferenciar as seções da sua página. Eles possuem seis valores diferentes, sendo que a de valor 1 é a que possui a maior fonte e a de valor 6 possui a menor fonte.

Por exemplo, usando o seguinte código:

<h1> Título 1 </h1>

<h2> Título 2 </h2>

<h3> Título 3 </h3>

<h4> Título 4 </h4>

<h5> Título 5 </h5>

<h6> Título 6 </h6>

No código acima, o HTML automaticamente solta uma linha em branco entre um título e outro.

7.2 - Parágrafos

Os parágrafos são definidos com a tag <p>

<p>Este é um parágrafo</p>

<p>Este é um outro parágrafo</p>

No código acima, o HTML automaticamente acrescenta uma linha em branco antes e depois de um parágrafo.

7.2.1 - Alinhamentos de parágrafo

Você já deve ter visto que em certos documentos o texto aparece ora alinhado à direita, ora à esquerda, no centro ou então ocupando uniformemente o espaço da página (texto justificado). Isso pode ser obtido facilmente em HTML. Veja a tabela abaixo:

ELEMENTO

DESCRIÇÃO

<p align=”left”>

Alinha o texto à esquerda

<p align=”right”>

Alinha o texto à direita

<p align=”center”>

Alinha o texto centralizado

<p align=”justify”>

Alinha o texto justificado

Note que entre os delimitadores < e > não encontra-se apenas o elemento <p>. Além dele, existe o texto align="alinhamento". Dizemos que align é um atributo do elemento p e alinhamento é o valor desse atributo. No caso de <p align="justify">, o valor do atributo align (que significa alinhamento em inglês) é justify (justificado).

Os atributos, as palavras que seguem o elemento, informam o navegador a respeito das propriedades que os elementos podem assumir. Confuso?! Pode parecer um pouco confuso, mas não é. Como disse a Toya, "Um disco de banda punk pode ter diversas propriedades ou "atributos" - a cor do disco, tamanho, velocidade, etc, tudo isso são atributos." E eu digo mais: se você coloca o disco num toca-discos, você pode ouvi-lo em duas ou no máximo três velocidades. Às vezes dá pra ouvir ao contrário. Mas se você arremessar seus discos do Fofão, garanto que eles poderão girar em muitas outras velocidades. Assim é o HTML, com muitas opções para você exibir seu texto.

No HTML, os valores dos atributos podem ser definidos da forma atributo=valor ou atributos="valor" (como em align="justify"), que é mais recomendada.

Como você viu, nem todos os códigos em HTML necessitam de atributos, em especial os comandos de modificação de texto como negrito, itálico, sublinhado, etc.

Resumindo, os atributos definem características adicionais aos elementos. Nas seções seguintes veremos elementos com vários atributos. Por exemplo, não adianta dizer ao seu navegador pra por um link em alguma parte do seu texto, é preciso dizer ao navegador, por exemplo, pra que lugar esse link aponta. É isso o que um atributo faz.

7.3 - Criando uma divisão

Existem momentos em que queremos que vários parágrafos possuam um mesmo valor de atributo - centralizado, por exemplo. Ao invés de escrevermos align="justify" a cada abertura de novo parágrafo, podemos usar o elemento div, que cria uma "divisão" no documento na qual alguns atributos são preservados. Vejamos o exemplo:

<div align="center">

<p>

Parágrafo 1

Parágrafo 1

Parágrafo 1

</p>

<p>

Parágrafo 2

Parágrafo 2

Parágrafo 2

</p>

<p>

Parágrafo 3

Parágrafo 3

Parágrafo 3

</p>

</div>

Experimente mudar os atributos do alinhamento pra ver o que acontece!! Na parte de Folhas de Estilo mostrarei como utilizar o elemento div para criar seções lógicas em documentos.

7.4 – Quebras de Linha

A tag <br> é utilizada quando você quer terminar uma linha, mas não quer começar um novo parágrafo. Com este comando você faz com que ocorra uma quebra de linha, onde você posicionar a tag.

Note que para o elemento <br> não existe o comando </br>, isto é, a quebra de linha não age numa região de texto delimitada, mas sim num ponto do texto. Complicado?! Então vamos lá, mais uma vez explicando de uma outra forma: comandos como <b>, <i> e <u> agem sobre uma região do texto e precisam ser fechados com seus respectivos </b>, </i> e </u>, pois do contrário esses comandos agirão até o fim do documento. Já o comando de quebra de linha, </br>, e alguns outros atuam somente no ponto onde eles aparecem.

Veja o exemplo abaixo da utilização da tag <br>

<p>Este <br> é um pará<br>grafo com quebra de linha</p>

A tag <br> é uma etiqueta vazia, ela não possui tag final.

7.5 – Comentários

A tag de comentário é utilizada para inserir comentários no código fonte HTML. Todo tipo de comentário é ignorado pelo navegador, isto é, ele não será exibido na tela. Você pode utilizar esta tag para explicar seu código fonte ou parte dele, que poderá ajudá-lo quando você estiver editando seus códigos posteriormente.

<!-- Este é o comentário -->

Note que você precisa de um ponto de exclamação depois do parênteses de abertura, e não antes do parênteses final.

7.6 – Informações Úteis

1) Quando você escrever um texto em HTML, esteja ciente de que o texto que você está visualizando não será exibido igualmente em todos os navegadores. Algumas pessoas possuem computadores com resoluções maiores, outros menores, tudo isso influi na questão da exibição da página, o que pode acontecer são os textos e as janelas que podem ser redimensionados.

2) As diferenças nos tamanhos das janelas dos navegadores fazem com que o número de caracteres que cabem numa linha varie muito. Por esse motivo não seremos capazes de controlar nem o número de linhas nem os locais em que acontecem as mudanças de linha. Nunca tente formatar o texto inserindo espaços ou linhas vazias, porque os resultados não serão aqueles que você esperava.

3) O HTML quando encontra dois ou mais espaços seguidos, ele trata-os como se fosse um único espaço. Quando você escreve uma seqüência de espaços seguidos, o resultado é o mesmo de escrever um único espaço. Em HTML, as teclas Tab e Enter equivalem a um espaço.

4) Sempre que você quiser inserir linhas em branco, utilize a tag <br>. Existem pessoas que utilizam parágrafos vazios para obter o mesmo resultado, mas isso está errado. A tag <p> deve ser usada apenas para definir parágrafos, e o elemento <br> não deve ser usado, por exemplo, para criar listas, pois existem tags concebidas especificamente para isso. Sempre que você precisar de obter uma formatação especial, você deve usar o elemento que foi criado para esse efeito.

5) Em muitas páginas, os parágrafos estão escritos sem a etiqueta de fechamento (</p>) Apesar dos navegadores aceitarem esta omissão, tenha sempre atenção para fechar todos os elementos que requerem uma tag de fechamento. Se você tentar validar uma página que contenha estes erros, verá que ela não passará no teste de validação.

6) Os elementos <p> e <h1> ... <h6> o navegador adiciona automaticamente uma linha em branco antes do início e outra depois do fim.

7.7 – Lista de elementos básicos do HTML

TAG

DESCRIÇÃO

<html>

Define um documento HTML

<body>

Define o conteúdo principal, o corpo do documento

<h1> até <h6>

Define títulos, de 1 a 6

<p>

Define parágrafo

<br>

Insere linhas em branco, quebra de linha

<hr>

Insere uma linha horizontal

<!-->

Define um comentário

8. FORMATAÇÃO DE TEXTO

A linguagem HTML define vários elementos para se formatar um texto, como por exemplo, escrever em negrito, itálico, sublinhado, etc. O exemplo abaixo mostra alguns deles:

<html>

<body>

Este exemplo tem texto em <i>itálico</i>, <b>negrito</b>,

<em>enfatizado</em>, <u>sublinhado</u> e tipo

<code>código de computador</code>

</body>

</html>

8.1 – Elementos para formatação de texto

TAG

DESCRIÇÃO

<b>

Define seu texto em negrito

<big>

Define seu texto grande

<i>

Define seu texto em itálico

<small>

Define seu texto pequeno

<strong>

Define seu texto forte

<sub>

Define seu texto subscrito (ex: H2O)

<sup>

Define seu texto sobrescrito (ex: 152)

<ins>

Define texto inserido

<del>

Define texto apagado

<s>

Desuso. Utilize <del> ao invés

<strike>

Desuso. Utilize <del> ao invés

<u>

Desuso. Utilize <styles> ao invés

8.2 – Elementos para o "output de código de computador"

TAG

DESCRIÇÃO

<code>

Define códigos de texto

<kbd>

Define o texto com uma fonte especial determinada pelo navegador

<samp>

Define código de computador de amostra

<tt>

Define o texto utilizando uma fonte de tipo e largura definidas pelo navegador

<var>

Define variáveis

<pre>

Define o texto pré-formatado

<listing>

Desuso. Utilize <pre> ao invés

<plaintext>

Desuso. Utilize <pre> ao invés

<xmp>

Desuso. Utilize <pré> ao invés

8.3 – Elementos para citações e listas de definições

TAG

DESCRIÇÃO

<abbr>

Define uma abreviação

<acronym>

Define uma sigla

<address>

Define um elemento de endereço

<bdo>

Define a direção do texto

<blockquote>

Define uma longa citação

<q>

Define uma pequena citação

<cite>

Define a citação

<dfn>

Define um termo de citação

9. LIGAÇÕES DE HIPERTEXTO ("LINKS")

Essa é uma das seções mais importantes desta apostila, pois afinal estamos falando de hipertexto. Queremos que uma página HTML possa fazer referência a outras páginas html ou para qualquer outro tipo de arquivo que se encontre em outros lugares da web. No jargão da internet, você quer ligar (link) parte da sua página com outras.

Isso é feito de modo muito simples com o elemento a, como segue:

<a href="http://www.midiaindependente.org">CMI Brasil</a>

Como você deve ter percebido, o atribudo href (Hipertext Reference / Referência de Hipertexto) indica o endereço da página que você quer "linkar" (ligar) ao seu documento. No exemplo acima, o texto CMI Brasil aparece como uma referência para o link. Se você clicar sobre esse texto, seu navegador automaticamente tentará abrir a página http://www.midiaindependente.org

Os endereços são escritos na forma de URL (Uniform Resource Locators), que é uma maneira que inventaram para se especificar o caminho até se chegar num arquivo que esteja nalgum local da internet.

O formato da URL é:

protocolo://nome-do-computador/pastas/arquivo

O protocolo indica como o navegador irá buscar o arquivo. Nome do computador é aquele endereço do tipo www.ninguem.com.br e as pastas são os diretórios dentro desse computador onde estão os arquivos. Uma URL de um artigo do site da CMI Brasil é, por exemplo, http://www.midiaindependente.org/pt/blue/2004/09/290669.shtml, onde http:// é o protocolo, pt, blue, 2004 e 09 são pastas (uma fica dentro da outra) e 290669.shtml é o nome do arquivo.


    http://

     \--- www.midiaindependente.org

           
         \--- pt

           
            \-- blue

           
               \--- 2004

         
                   
    \--- 09

               
             \---
    290669.shtml

Lembre-se também que quando você acessa o endereço http://www.ninguem.com.br, por exemplo, está na verdade vendo o arquivo http://www.ninguem.com.br/index.html. Os arquivos do tipo index.html sempre são procurados pelo navegador quando você solicita apenas o nome do site ou uma pasta de um computador.

Em html, existem três formas possíveis de se fazer links: os links internos, os links locais (ou relativos) e os links externos.

9.1 - Links internos

Links internos são aqueles que ligam uma seção de uma página com uma outra seção da mesma página. Por exemplo, se eu quiser fazer uma referência para a seção Hipertexto dessa nossa apostila, basta que eu primeiro defina um nome para a seção Hipertexto e então adicione um link pra ela. Isso é feito da seguinte forma:

1 - Vou até o início da seção Hipertexto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção:

<a name="Hipertexto">Hipertexto</a>

2 - Adiciono o link pra essa seção com o seguinte código,

<a href="#Hipertexto">Vá para a seção hipertexto</a>

O atributo name serve apenas para dar um nome para uma posição de uma página html. O valor de name pode ser qualquer um (nesse caso eu coloquei "Hipertexto").

Quando você fizer uma referência a um link interno utilizando o atributo href, você precisa necessariamente adicionar o caractere # (jogo da velha) antes do nome da sua seção - no nosso caso, #Hipertexto - pois do contrário seu navegador tentará abri-lo como um link local.

9.2 - Links locais ou relativos

Links locais são aqueles que referenciam um arquivo que esteja no mesmo computador que a sua página. Links locais não contém o http:// no início do endereço. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo links.html que está na mesma pasta do meu documento, não preciso digital o endereço completo, mas apenas:

<a href="links.html">Acesse os links!</a>

Esse tipo de argumento para o href também é chamado de links relativos. Se você quiser linkar uma página que esteja do diretório (pasta) superior da sua página, use dois pontos e uma barra antes do nome do arquivo:

<a href="../links.html">Acesse os links!</a>

A vantagem de você usar links relativos é que você pode mover todo o seu site para um novo endereço na internet e não precisar reeditar todos os links que apontam para páginas do seu próprio site.

9.3 - Links externos

Links externos são aqueles que podem apontar para qualquer arquivo disponível na internet, como por exemplo:

<a href="http://pt.wikipedia.org">Acesse a Wikipedia!</a>

Os links externos precisam necessariamente conter o prefixo http:// e o endereço completo do arquivo.

9.4 - Alvo (target)

Um atributo interessante para o elemento <a href> é o target, que permite que o link seja aberto numa outra janela do seu navegador.

<a href="http://pt.wikipedia.org" target="_blank">Acesse a Wikipedia!</a>

O argumento do atributo target é o nome da janela do navegador que abrirá o link. Se você quiser que o link seja aberto numa nova janela, simplesmente escolha qualquer nome como argumento.

9.5 – Elementos para fazer ligações

ELEMENTO

DESCRIÇÃO

<a>

Define uma âncora ou uma ligação de hipertexto

10. LISTAS

A linguagem HTML contém elementos que permitem criar listas de definições, listas ordenadas e listas não ordenadas.

10.1 - Listas Não Ordenadas

Uma lista não ordenada contém vários itens marcados todos com o mesmo símbolo (normalmente um círculo pequeno ou um quadrado pequeno).

Para criar uma lista não ordenada, utilizamos o elemento <ul> ("unordered list"). Dentro desse elemento, os vários itens são criados com o elemento <li> ("list item").

O exemplo seguinte mostra uma lista simples:

<ul>

<li>Rum</li>

<li>Bagaço</li>

</ul>

Este é o aspecto de como vai ficar em seu navegador:

· Rum

· Bagaço

Dentro de uma lista não ordenada podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.

10.2 - Listas Ordenadas

Uma lista ordenada contém vários itens numerados e é criada com o elemento <ol> ("ordered list"). Os itens da lista definem-se com o elemento <li> ("list item").

<ol>

<li>Rum</li>

<li>Bagaço</li>

</ol>

Este é o aspecto de como vai ficar em seu navegador:

  1. Rum
  2. Bagaço

Dentro de uma lista ordenada podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.

10.3 – Listas de Definições

Uma lista de definições não é constituída por uma série de itens, mas sim por vários termos acompanhados de descrições de seus significados.

As listas de definições são criadas com o elemento <dl> ("definition list") O nome de cada termo fica dentro de um elemento <dt> ("definition term") e a sua descrição fica no elemento <dd> ("definition description")

<dl>

<dt>Rum</dt>

<dd>Bebida espirituosa muito apreciada pelos piratas do Caribe</dd>

<dt>Bagaço</dt>

<dd>Bebida com elevado teor alcoólico. A sabedoria popular

atribui-lhe fortes propriedades terapêuticas.</dd>

</dl>

Este é o aspecto de como vai ficar em seu navegador:

Rum

Bebida espirituosa muito apreciada pelos piratas do Caribe

Bagaço

Bebida com elevado teor alcoólico. A sabedoria popular reconhece-lhe fortes propriedades terapêuticas.

Dentro de um elemento <dd> podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.

10.4 – Elementos para Listas

ELEMENTO

DESCRIÇÃO

<ol>

Define uma lista ordenada

<ul>

Define uma lista não ordenada

<li>

Insere um item na lista

<dl>

Insere uma lista de definições

<dt>

Apresenta a definição de um termo

<dd>

Insere a definição de um termo

<dir>

Desuso. Utilize <ul>

<menu>

Desuso. Utilize <ul>

11. IMAGENS

Além de manipular texto, o html também serve para exibir imagens de uma maneira muito simples, usando para isso o elemento img:

<img src="emma.jpg" width="221" height="300">

O atributo src - source, fonte em inglês - dá o nome do arquivo da imagem e é o único atributo obrigatório para o elemento img. Os atributos para a largura (width) e a altura (height) não são necessários, mas serão muito úteis quando as pessoas estiverem navegando em seu site: quando seu navegador abre um arquivo html e encontra o elemento img, ele usará o respectivo atributo src como o endereço onde está o arquivo de imagem a ser exibido. Em outras palavras, o elemento img apenas passa uma referência do arquivo de imagem ao navegador, ou seja, você não está colocando esse arquivo de imagem dentro do seu arquivo html, você está apenas colocando em seu arquivo html uma referência a esse arquivo de imagem. O navegador, por sua vez, começa a baixar essa imagem a partir desse endereço atributo enquanto termina de exibir o documento.

Dependendo do tipo de arquivo de imagem, ela só será exibido pelo navegador quando terminar de ser baixada. Se isso ocorrer e você não utilizou os atributos width e height no seu documento, o navegador só reservará espaço na tela do seu computador para a exibição da imagem quando ela estiver sido baixada, e duranter esse intervalo a formatação do seu documento pode ficar diferente. Para evitar isso - somente por uma questão de estilo - recomendamos que você sempre use os atributos width e height, que informam ao navegador o tamanho da imagem, antes mesmo dele começar a baixá-la, e assim o espaço na tela do seu computador será apropriadamente reservado para ela.

11.1 - Tamanho de exibição da imagem

Os atributos width e height merecem um pouco mais de atenção. Como vimos, são os atributos que determinam o tamanho que a imagem será exibida. Existem duas formas de se fazer isso, utilizando o tamanho em pixels (tamanho absoluto) e em valores relativos ao tamanho disponível da tela do computador, isto é, em porcentagem.

Um pixel é a menor unidade luminosa da tela do seu computador que os programas podem manipular, e isso depende muito da resolução da tela do seu computador. Um pixel é um quadradinho luminoso. Atualmente as telas de computador tem uma resolução de 800 pixels de comprimento e 600 de altura, às vezes pode ser de 1024 de comprimento e 768 na altura ou resoluções até maiores, de tal modo que nossos olhos já não conseguem distinguir entre pixels contíguos.

O tamanho das imagens computadorizadas também pode ser medido em pixels, que é o tamanho que a imagem vai ocupar na tela do seu computador quando ela for exibida. Para que você descubra qual é o tamanho da sua imagem, você terá que usar algum programa de edição de imagens ou então abri-la diretamente no seu navegador. Experimente ir no menu Arquivo e depois em Abrir, no seu nagevador, ou então digitar a localização da imagem diretamente na barra de endereços. Quando a imagem for exibida, clique sobre ela com o botão direito do seu mouse e em seguida vá em Propriedades. Uma janela com as informações da imagens - inclusive seu tamanho - deverá aparecer. De posse desses valores, basta colocar-los dentro da do img. No exemplo anterior, onde usamos o código width="221" height="300", a imagem foi exibida com 221 pixels de largura e 300 de altura, coincidentemente sendo seu tamanho original. Poderíamos ter escrito:

<img src="emma.jpg" width="22" height="30">

Ou seja, a imagem foi mostrada com um tamanho menor do que o original. Também poderíamos usar tamanhos maiores que original... que tal você experimentar algo como width="2210" height="3000"?!

O segundo modo de determinar o tamanho de exibição das imagens no navegador consiste em utilizar porcentagem. Por exemplo:

<img src="emma.jpg" width="10%" height="10%">

Resultará numa imagem exibida com um décimo (10%) do espaço disponível da tela do computador.

Nos dois modos de determinar o tamanho - em pixels e em porcentagem - podemos escolher valores independentes para a altura e a largura, de tal forma que a imagem fique distorcida. Olha que engraçado:

<img src="emma.jpg" width="50" height="400">

11.2 - Texto alternativo

Existem ainda outros atributos interessantes para a exibição de imagens. Você pode incluir uma descrição da imagem para que se, por qualquer razão, alguém não consiga ver a imagem ela possa ler uma descrição no espaço vazio. Essa descrição também aparecerá quando você passar o mouse por sobre a imagem.

Você pode adicionar uma pequena descrição desta maneira:

<img src="emma.jpg" width="221" height="300" alt="Emma Goldman!">

O atributo alt (texto alternativo) é utilizado para dar a pequena descrição, neste caso "Emma Goldman!".

11.3 - Borda da imagem

Uma borda (contorno) da imagem pode ser adicionada com o atributo border:

<img src="emma.jpg" width="10%" height="10%" border="1">

<img src="emma.jpg" width="10%" height="10%" border="2">

<img src="emma.jpg" width="10%" height="10%" border="3">

O valor do atributo border indicará o tamanho dessa moldura.

11.4 - Alinhamento da imagem

É possível ainda colocar imagens e texto um do lado do outro, de diversas formas. Vamos supor a mais simples:

<img src="emma.jpg" width="3%" height="3%" border="1">

O texto aparece ao lado da imagem.

Esse código pode funcionar muito bem, mas às vezes acontece do texto aparecer abaixo da imagem. Para fazer o posicionamento da imagens e do texto corretamente, basta utilizar o atributo align, que funciona de modo análogo ao do alinhamento de paragráfos:

<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">

O texto vai aparecer à esquerda da imagem (o atributo right faz que a imagem fique à direita da tela), mesmo tendo escrito após o código sobre a imagem. Enquanto o texto puder ficar ao lado da imagem, ele ficará. Quando ele não mais couber nesse espaço, ele começará a ser exibido abaixo da imagem, como você pode ver aqui.

Utilizar o alinhamento de imagens é a melhor maneira de garantir que ela aparecerá no local desejado.

11.5 - Espaçamento da imagem

Notou como o texto do exemplo anterior saiu colado à imagem?! É possível definir um espaçamento entre a imagem e qualquer objeto (texto, imagem, tabelas) que esteja ao seu lado, acima ou abaixo, usando para isso os atributos vspace (espaçamento vertical) e hspace (espaçamento horizontal).

O valor desses atributos diz ao navegador qual será o espaço em pixels entre a imagem e qualquer objeto:

<img src="emma.jpg" width="3%" height="3%" border="1" align="left" hspace="5" border="1">

O texto vai aparecer à direita da imagem, a cinco pixels de distância dela. Deu pra notar a diferença?! Utilizando todos esses atributos para a exibição de imagens você obtém um texto bem diagramado e bonito de ser lido.

Nota: Ao utilizar imagens, lembre-se de que elas podem aumentar consideravelmente o tempo de carregamento para ver o conteúdo de suas páginas, por isso, use-as com cuidado.

11.6 – Elementos relacionados com imagens

ELEMENTO

DESCRIÇÃO

<img>

Insere uma imagem

<map>

Define um mapeamento sobre a imagem ("image map")

<área>

Define uma área clicável sobre um mapa de imagem

11.7 – Fundos de Página

Uma cor ou uma imagem de fundo bem escolhido podem melhorar o aspecto da página, mas uma má escolha é capaz de causar danos muito graves na legibilidade e no aspecto geral da página.

11.7.1 - O atributo bgcolor do elemento <body>

O elemento <body> possui atributos que nos permitem especificar as cores do texto e a cor de fundo. Também podemos usar uma imagem como padrão de fundo.

O atributo bgcolor nos permite escolher a cor de fundo da página. O quadro seguinte mostra três formas de indicar a cor de fundo da página usando um código de cor hexadecimal, um código RGB e um nome de cor (veja mais à frente o tópico sobre cores).

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

As linhas apresentadas mais acima usam formas diferentes (mas todas válidas) para dar a cor preta ao fundo da página.

Nota: a forma recomendada para formatar o texto e os fundos de página baseia-se em estilos CSS. A utilização do atributo bgcolor só se justifica se precisarmos de manter a compatibilidade com navegadores antigos que não suportam CSS (veremos sobre CSS no fim da apostila).

11.7.2 - O atributo background

O atributo background estabelece que o padrão de fundo da página será uma imagem. O valor deste atributo indica o local onde se encontra a imagem. Se as dimensões da imagem forem inferiores às dimensões da página, o navegador repetirá a imagem (como num chão de mosaicos ou em uma parede de azulejos), por forma a ocupar todo o fundo da página.

O exemplo abaixo mostra bem como se faz isso:

<body background="imagem.jpg">

<body background="http://www.tiagosouza.com/imagem.jpg">

O valor do atributo background é uma URL (site) que define o local onde se encontra a imagem. Na primeira linha mais acima, demos uma URL relativa e na segunda demos uma URL absoluta.

Nota: a forma recomendada para formatar o texto e os fundos de página baseia-se em estilos CSS. A utilização deste atributo só se justifica se precisarmos de manter a compatibilidade com navegadores antigos que não suportam CSS (veremos sobre CSS no fim da apostila).

11.8 – Dicas

Sempre que utilizar uma imagem de fundo na página, não se esqueça destes aspectos:

· Certifique-se de que o tamanho da imagem (em KBytes) não é muito grande, pois em caso afirmativo, o tempo para carregar a página aumentaria consideravelmente.

· Certifique-se de que a imagem de fundo combina bem com a cor do texto.

· Certifique-se de que o fundo combina bem com as outras imagens da página.

· Verifique se a repetição da imagem de fundo em mosaico resulta em um padrão perfeito. Se você perceber algumas falhas aparentes, utilize outra imagem de fundo ou faça uma edição nesta atual.

· Certifique-se de que a imagem não é incômoda e que não desvia a atenção do texto.

Os atributos bgcolor, background e text do elemento <body> foram reprovados nas recomendações mais recentes da W3C para a linguagem HTML (HTML 4 e XHTML). A forma recomendada para obter os mesmos resultados baseia-se na utilização de estilos CSS. A utilização destes atributos só se justifica se precisarmos de manter a compatibilidade com navegadores antigos que não suportam CSS.

São poucos os sites de qualidade que utilizam imagens de fundo, e aqueles que o fazem, usam fundos que não atrapalham a visualização do site.
Tiago Daniel de Souza

Tiago Daniel de Souza