HTML Avançada | Adicionando um toque de estilo

  Iniciando com HTML

Dave Raggett, revisado em 24 Mai 2005.

Esta é uma breve introdução à codificação com HTML. O que é HTML? É uma espécie de documento de texto que é usado pelos browsers da Web para apresentar texto e figuras. O texto inclui marcações (markup tags) tais como <p> para indicar o início de um parágrafo, e </p> para indicar seu final. Documentos HTML são freqüentemente referidos como "páginas da Web". O browser obtém as páginas da Web de servidores Web que, graças à Internet, podem estar em muitos lugares do Mundo.

Muitas pessoas ainda escrevem HTML manualmente utilizando ferramentas como o Bloco de Notas do Windows, ou o TextEdit no Mac. Este guia irá deixá-lo pronto para isso. Ainda que você não pretenda editar HTML diretamente e ao invés disso planeje usar um editor HTML como o Netscape Composer ou o W3C Amaya, este guia irá permitir que você entenda o bastante para fazer melhor uso das ferramentas e como tornar seus documentos HTML acessíveis a uma ampla variedade de browsers. Uma vez que você esteja confortável com o básico da autoria em HTML, poderá querer aprender como dar um toque de estilo usando CSS e então partir para tentar usar recursos que mostro em minha página sobre HTML avançada.

p.s. uma boa maneira de aprender é ver como outras pessoas codificaram suas páginas HTML. Para fazer isso, clique no menu "Exibir" e então em "Código Fonte". Em alguns browsers, você precisa ao invés disso clicar no menu "Arquivo" e depois em "Exibir código fonte". Tente isso com esta página e veja que eu apliquei as idéias que exponho a seguir. Você desenvolverá um senso crítico com a visualização de mais códigos fonte de outras páginas!

Para usuários do Mac, antes de salvar o arquivo com a extensão ".html", você precisa ter certeza de que o documento está em formato de texto puro (plain text). No TextEdit você pode ajustar isso com a opção "Make Plain Text" do menu "Format".

Esta página irá ensiná-lo como:

• iniciar com um título
• adicionar cabeçalhos e parágrafos
• adicionar ênfase no seu texto
• adicionar imagens
• adicionar links para outras páginas
• usar vários tipos de listas

Se você está procurando por algo mais, tente a página sobre HTML avançada.

Iniciando com um título

Cada documento HTML necessita de um título. Aqui está o que você precisa digitar:

<title>Meu primeiro documento HTML</title>

Mude o texto de "Meu primeiro documento HTML" de acordo com sua necessidade. O texto do título é precedido da tag <title> e finalizado com a tag de fechamento correspondente </title>. O título deve ser colocado no início do seu documento.

Para testar isso, digite o texto acima em um editor de texto e grave o arquivo como "teste.html". Então abra esse arquivo em um browser. Se a extensão do arquivo for ".html" ou ".htm" então o browser irá reconhecê-lo como HTML. Muitos browsers mostram o título na barra de título da janela. Mas somente com o título, o browser irá mostrar uma página vazia. Não se preocupe. A próxima seção irá mostrar como adicionar conteúdo que pode ser exibido.

Acrescentando cabeçalhos e parágrafos

Se você já usou o Microsoft Word está familiarizado com os estilos prontos para cabeçalhos de diferentes níveis de importância. Na HTML há seis níveis de cabeçalhos. H1 é o mais importante, H2 um pouco menos importante e assim por diante até H6, o menos importante.

Aqui está como adicionar um cabeçalho importante:

<h1>Um cabeçalho importante</h1>

e aqui está um cabeçalho um pouco menos importante:

<h2>Um cabeçalho pouco menos importante</h2>

Cada parágrafo que você escreve deve começar com uma tag <p>. A tag de fechamento </p> é opcional, diferente das tags de fechamento para elementos como cabeçalhos. Por exemplo:

<p>Este é o primeiro parágrafo.</p>

<p>Este é o segundo parágrafo.</p>

Acrescentando um pouco de ênfase

Você pode enfatizar uma ou mais palavras com a tag <em>, como no exemplo:

Isso é <em>realmente</em> um assunto interessante!

Acrescentando interesse às suas páginas com imagens

Imagens podem ser usadas para tornar suas páginas Web distintas e ajudam muito a transmitir sua mensagem. A maneira mais simples de adicionar uma imagem é usando a tag <img>. Vamos assumir que você tem uma imagem chamada "pedro.jpg" no mesmo diretório/pasta do arquivo HTML. Ela tem 200 pixels de largura por 150 pixels de altura.

<img src="pedro.jpg" width="200" height="150">

O atributo src nomeia o arquivo de imagem. A largura e a altura não são estritamente neccessárias mas ajudam a aumentar a velocidade da exibição da página Web. Mas alguma coisa ainda está faltando! Pessoas que não podem ver a imagem precisam de uma descrição que possam ler em sua ausência. Você pode acrescentar uma pequena descrição como segue:

<img src="pedro.jpg" width="200" height="150"
alt="Meu amigo Pedro">

O atributo alt é usado para fornecer uma descrição curta, no caso "Meu amigo Pedro". Para imagens complexas, você pode precisar de uma descrição maior. Assumindo que essa descrição tenha sido escrita no arquivo "pedro.html", você pode adicioná-la usando o atributo longdesc:

<img src="pedro.jpg" width="200" height="150"
alt="Meu amigo Pedro" longdesc="pedro.html">

Você pode criar imagens de várias formas, como por exemplo com uma câmera digital, digitalizando uma imagem com um scanner, ou criando-a com um programa de ilustração. Muitos browsers compreendem os formatos GIF e JPG e novos browsers também reconhecem o formato de imagem PNG. Para evitar longas esperas enquanto a imagem é transferida pela rede, você deve evitar usar arquivos de imagem muito grandes.

De forma geral, JPEG é melhor para fotografias e outros tipos de imagens com variações de tonalidades, enquanto que GIF e PNG são bons para figuras que envolvam áreas de cor, linhas e texto. Todos os três formatos suportam opções para renderização progressiva de forma que uma versão mais simples da imagem é enviada primeiro e progressivamente refinada.

Adicionando links para outras páginas

O que faz a Web tão eficiente é a habilidade de definir links de uma página para outra e de seguir esses links com o clique de um botão. Um simples clique pode levá-lo através do mundo!

Links são definidos com a tag <a>. Vamos definir um link para a página "pedro.html" localizada no mesmo diretório/pasta do arquivo HTML que você está editando:

Esse é um link para a <a href="pedro.html">página do Pedro</a>.

O texto entre as tags <a> e </a> é usado como uma legenda para o link. É comum que essa legenda fique como um texto azul sublinhado.

Se o arquivo para o qual você está criando um link está em uma pasta ou diretório-pai (de nível superior na estrutura de diretório) você precisa colocar "../" na frente dele, como por exemplo:

<a href="../maria.html">Página da Maria</a>

Se o arquivo para o qual você está criando um link está em um subdiretório você precisa colocar seu nome seguido de uma "/", como no exemplo:

<a href="amigos/sueli.html">Página da Sueli</a>

O uso de caminhos relativos permite criar um link para um arquivo navegando pela estrutura de diretório conforme necessário, como no exemplo:

<a href="../faculdade/amigos/joao.html">Página do João</a>

Que primeiro verifica no diretório-pai por outro diretório chamado "faculdade" e então em um subdiretório deste chamado "amigos" onde procura por um arquivo chamado "joao.html".

Para criar um link a uma página que está em outro Web site você precisa fornecer o endereço completo (comumente chamado de URL). Por exemplo, para criar um link para www.w3.org você precisa escrever:

Este é um link para o <a href="http://www.w3.org/">W3C</a>.

Você pode fazer de uma imagem um link de hipertexto. Por exemplo, o código a seguir lhe permitirá clicar no logotipo da companhia para acessar a homepage de seu site:

<a href="/"><img src="logo.gif" alt="homepage"></a>

Usa-se "/" para referir-se à raiz da estrutura de diretório, isto é, à página principal (homepage).

Três tipos de listas

HTML suporta três tipos de listas. O primeiro tipo é a lista com bullets, freqüentemente chamada de lista não-ordenada. Ela usa as tags <ul> e <li> como no exemplo:

<ul>
  <li>o primeiro ítem da lista</li>

  <li>o segundo ítem da lista</li>

  <li>o terceiro ítem da lista</li>
</ul>

Note que você sempre precisa finalizar a lista com a tag de fechamento </ul>, mas </li> é opcional e pode ser deixada de fora. O segundo tipo de lista é a lista numerada, freqüentemente chamada de lista ordenada. Ela usa as tags <ol> e <li>. Por exemplo:

<ol>
  <li>o primeiro ítem da lista</li>

  <li>o segundo ítem da lista</li>

  <li>o terceiro ítem da lista</li>
</ol>

Semelhante às listas não-ordenadas (com bullets), você sempre precisa finalizá-las com a tag de fechamento </ol>, mas a tag de fechamento </li> é opcional e pode ser deixada de fora.

O último e terceiro tipo de lista é a lista de definição. Ela permite listar termos e suas definições, como em um glossário. Esse tipo de lista começa com uma tag <dl> e termina com </dl>. Cada termo começa com a tag <dt> e cada definição com <dd>. Por exemplo:

<dl>
  <dt>o primeiro termo</dt>
  <dd>sua definição</dd>

  <dt>o segundo termo</dt>
  <dd>sua definição</dd>

  <dt>o terceiro termo</dt>
  <dd>sua definição</dd>
</dl>

As tags de fechamento </dt> e </dd> são opcionais e podem ser deixadas de fora. Note que essas listas podem ser aninhadas, uma dentro da outra. Por exemplo:

<ol>
  <li>o primeiro ítem da lista</li>

  <li>
    o segundo ítem da lista
    <ul>
      <li>primeiro ítem aninhado</li>
      <li>segundo ítem aninhado</li>
    </ul>
  </li>

  <li>o terceiro ítem da lista</li>
</ol>

Você também pode fazer uso de parágrafos e cabeçalhos etc para longas listas de itens.

HTML tem um cabeçalho e um corpo

Se você usar a função de visualização do código fonte de seu browser (veja nos menus Exibir ou Arquivo) você poderá ver a estrutura das páginas HTML. O documento geralmente começa com uma declaração de qual versão da HTML está sendo usada e isso é seguido por uma tag <html> seguida pela <head>, sendo que no final da página temos </html>. A tag <html> ... </html> age como um container para o documento. A tag <head> ... </head> contém o título e informações sobre folhas de estilo e scripts, enquanto que a tag <body> ... </body> contém a marcação com o conteúdo visível. Aqui está um modelo que você pode copiar e colar em seu editor de texto para criar suas próprias páginas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> troque pelo título de seu documento </title>
</head>
<body>

troque pelo conteúdo de seu documento

</body>
</html>

Limpando sua marcação

Uma maneira conveniente de corrigir automaticamente erros de marcação é usar HTML Tidy que também limpa a marcação tornando-a mais fácil de ser lida e de ser editada. Eu recomendo que você execute regularmente Tidy em qualquer marcação que esteja editando. Tidy é muito eficiente na limpeza da marcação criada por ferramentas de autoria com maus hábitos. Tidy está disponível para uma ampla variedade de sistemas operacionais no site TidyLib Sourceforge e também tem sido integrado junto a uma variedade de ferramentas de edição HTML.

Obtendo Mais Informações

Se você está pronto para aprender mais, eu preparei alguns materiais de apoio sobre HTML avançada e uso de estilos.

A Recomendação do W3C para HTML 4.0 é a especificação autorizada para HTML. Entretanto, é uma especificação técnica. Para uma fonte menos técnica de informação você pode querer adquirir um de muitos livros sobre HTML, como por exemplo "Raggett on HTML 4", publicado em 1998 pela Addison Wesley. XHTML 1.0 é agora uma Recomendação W3C.

Boa sorte e continue escrevendo!

Dave Raggett <dsr@w3.org>

Copyright © 1994-2003 W3C^® (MIT, ERCIM, Keio), Todos os Direitos Reservados. Todas as regras do W3C sobre confiabilidade, marcas, uso do documento e licenciamento de software são aplicáveis. Sua interação com este site está de acordo com nossas declarações de privacidade públicas and para Membros.