HTML ilustrado

Hans Liesenberg
Instituto de Computação/Unicamp
http://www.ic.unicamp.br/~hans




Sobre este documento

O propósito do documento é relacionar e ilustrar o uso dos marcadores (tags) padronizados da linguagem HTML (Hypertext Mark-up Language) mais freqüentemente empregados.

HTML é uma linguagem de editoração de páginas WWW (World-Wide Web). Ela permite, por exemplo, identificar em uma página WWW, através de marcadores, os títulos de seções, parágrafos e itens de listas ou tabelas.

A linguagem HTML encontra-se em franca evolução. Por este motivo os paginadores (browsers) não estão, via de regra, totalmente conformes com a última versão da linguagem HTML. Aqui são comentados os recursos mais utilizados da linguagem que funcionam normalmente nos paginadores de maior uso. A descrição "ilustrada", portanto, não pretende ser exaustiva.

Existem extensões da linguagem HTML criadas por empresas como a Netscape. O uso de extensões, contudo, não é recomendado, pois elas não funcionam em paginadores produzidos por outras empresas. Algumas extensões são ilustradas aqui, mas nestes casos é, sempre, feita a ressalva de que não fazem parte do padrão definido para a linguagem HTML.



Relação de marcadores

Aqui encontram-se relacionados os marcadores ilustrados da linguagem HTML. A seleção de um deles leva diretamente à seção do documento onde o particular marcador é apresentado. Muitos marcadores são utilizados para delimitar um trecho em descrições de documentos feitos em HTML. O marcador utilizado no início de um trecho é também utilizado no final, mas no segundo o nome do marcador é precedido por uma barra (/). Exemplo: 

   <title>Exemplo de esqueleto</title>

   

<a>    <b>    <big>    <blockquote>    <body>    <br>    <dd>    <dl>    <dt>    <em>    <font>    <h1>    <h2>    <h3>    <h4>    <h5>    <h6>    <head>    <hr>    <html>    <i>    <img>    <li>    <meta>    <ol>    <p>    <pre>    <s>    <small>    <strong>    <sub>    <sup>    <table>    <td>    <th>    <title>    <tr>    <tt>    <ul>   

   





Anatomia de uma página WWW

A anatomia mínima desejável de uma página é ilustrada através de um exemplo: 

   <html>
   <head>
   <title>Exemplo de esqueleto</title>
   </head>
   <body>
   <h1>Exemplo de esqueleto</h1>
   bla bla bla
   </body>
   </html>
Os marcadores <html> e </html> delimitam a descrição da página que é dividida em duas partes: o preâmbulo e o corpo da página.

O preâmbulo é delimitidado pelos marcadores <head> e </head>. O preâmbulo pode conter, entre outros, o título do documento que vai ser apresentado no topo da janela do paginador e meta-informações (isto é, informações que descrevem de alguma forma o documento como palavras chave, resumo, etc.).

O preâmbulo da página utilizada como exemplo para ilustrar a anatomia de página WWW contém apenas um título. Tal título é delimitado pelos marcadores <title> e </title>.

O corpo de uma página é delimitado pelos marcadores <body> e </body> e contém as informações a serem apresentadas na área de visualização do paginador.

No corpo do exemplo temos um título em nível 1 (existem 6 níveis sendo o nível 1 o mais alto) delimitado pelos marcadores <h1> e </h1> e um texto qualquer.



Formatação de páginas

Títulos

Existem seis níveis de títulos:

   
<h1>...</h1>

Título de nível 1

<h2>...</h2>

Título de nível 2

<h3>...</h3>

Título de nível 3

<h4>...</h4>

Título de nível 4

<h5>...</h5>
Título de nível 5
<h6>...</h6>
Título de nível 6

Um marcador de título pode ter um atributo de alinhamento denominado align que pode assumir os seguintes valores:

leftalinhamento pela margem esquerda (valor padrão do atributo align)
centercentralização do título
rightalinhamento pela margem direita

Por exemplo, o texto 

   <h2>Uso normal</h2>
   <h2 align=left>Alinhar pela esquerda</h2>
   <h2 align=center>Centralizar</h2> 
   <h2 align=right>Alinhar pela direita</h2>
é apresentado como

Uso normal

Alinhar pela esquerda

Centralizar

Alinhar pela direita

<p> - separador de parágrafos

Parágrafos são separados em HTML pelo marcador <p>. Por exemplo, o texto 

   Os livros encontram-se na gaveta de baixo. Escolha um e anote a sua
   retirada na lista que se encontra na mesma gaveta. Apage as luzes
   e tranque a porta ao sair da sala.
   <p>
   O livro deve ser retornado ao seu lugar no horizonte de uma semana.
   O retorno do livro emprestado deve ser registrado na lista de retiradas.
é apresentado como

Os livros encontram-se na gaveta de baixo. Escolha um e anote a sua retirada na lista que se encontra na mesma gaveta. Apage as luzes e tranque a porta ao sair da sala.

O livro deve ser retornado ao seu lugar no horizonte de uma semana. O retorno do livro emprestado deve ser registrado na lista de retiradas.

O uso de mais de um marcador <p> em sucessão (como <p><p><p>) tem efeito de apenas um.

<pre> - texto pré-formatado

Um trecho de texto pode ser declarado como pré-formatado e ele é apresentado com letras de tamanho fixo onde são respeitados todos os espaçamentos definidos em termos de caracteres em branco e linhas em branco. Marcadores de ênfase a nível de caracteres podem ser utilizados para realçar trechos do texto pré-formatado. Por exemplo, o texto 

   <pre>
       Era uma

          vez

   3 porquinhos: <strong>P1</strong>,




        P2                e    P3.
   </pre>
é apresentado como 


    Era uma

       vez

3 porquinhos: P1,




     P2                e    P3.

<br> - quebra de linha

A quebra de linha é indicado pelo marcador <br>. Todo marcador deste tipo tem efeito, mesmo quando mais de um é utilizado em sucessão. Por exemplo, o texto 

   3 laranjas
   <br>
   5 bananas
   <br><br><br>
   1 goiaba
   <br>
   <br>
   4 ameixas
é apresentado como

3 laranjas
5 bananas


1 goiaba

4 ameixas

<blockquote> - citação

Para destacar citações em uma página pode ser utilizado o marcador <blockquote>. O destaque se dá com um aumento tanto da margem esquerda como da margem direita. A descrição 

   <blockquote>
   Quo usque tandem abutere, Catilina, patientia nostra?  quam diu 
   etiam furor iste tuus nos eludet?  quem ad finem sese effrenata
   iactabit audacia?  Nihilne te nocturnum praesidium Palati, nihil
   urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium,
   nihil hic munitissimus habendi senatus locus, nihil horum ora
   voltusque moverunt?  Patere tua consilia non sentis, constrictam
   iam horum omnium scientia teneri coniurationem tuam non vides?
   Quid proxima, quid superiore nocte egeris, ubi fueris, quos
   convocaveris, quid consilii ceperis, quem nostrum ignorare
   arbitraris?  O tempora, o mores!
   <p align=right>
   <em>Oratio in Catilinam Prima<br>
   Marcus Tullius Cicero</em>
   </blockquote>
é apresentada como

Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt? Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? O tempora, o mores!

Oratio in Catilinam Prima
Marcus Tullius Cicero

Comentários

Comentários podem ser adicionados a uma descrição de um documento em HTML. Um comentário é ignorado pelo servidor WWW na hora de apresentar o documento, mas ele é útil para pessoas que eventualmente queiram fazer a manutenção da descrição. Um comentário é delimitado por <! e > como no exemplo abaixo 

   <! Obs: Neste ponto do documento ... >



Marcadores de ênfase a nível de caracteres

A linguagem HTML tem um vasto repertório de marcadores para enfatizar texto a nível de caractere. Eles podem ser divididos em duas categorias: uns são relacionados diretamente com a aparência dos caracteres enquanto outros são ditos "informativos". Os marcadores "informativos" indicam um propósito do texto marcado e fica a cargo de cada paginador de apresentar os trechos marcados de forma conveniente. A recomendação é que sejam utilizados preferencialmente os marcadores "informativos", pois eles podem ser melhor tratados por paginadores especializados como paginadores para deficientes visuais, onde o texto não é apenas apresentado na tela mas também reproduzido de forma sonora.

Os marcadores mais comuns relacionados com a aparência apenas são os marcadores <b> (negrito) e <i> (itálico). Os equivalentes, mas com maior carga emocional, são os marcadores "informativos" <strong> (forte) e <em> (emfático). Abaixo é apresentada uma lista de tais marcadores.

<b> - negrito


   <b>negrito</b>
negrito

<i> - itálico


   <i>it&aacute;lico</i>
itálico

<strong> - forte


   <strong>Socorro!!!!</strong>
Socorro!!!!

<em> - enfático


   Neste momento <em>solene</em>, queremos homenagear ...
Neste momento solene, queremos homenagear ...

<big> - grande


   Letra <big>G</big>rande
Letra Grande

<small> - pequeno


   Ele falou <small>baixo</small> no ouvido dela.
Ele falou baixo no ouvido dela.

<s> - riscado


   <s>proposta recusada</s>
proposta recusada

<sub> - subscrito


   log<sub>10</sub>(h)
log10(h)

<sup> - sobrescrito


   ax<sup>2</sup>+bx+c=0
ax2+bx+c=0

<tt> - fonte de tamanho fixo


   "ttttttrrrrrriiiiiimmmmmm" em tt: "<tt>ttttttrrrrrriiiiiimmmmmm</tt>"
"ttttttrrrrrriiiiiimmmmmm" em tt: "ttttttrrrrrriiiiiimmmmmm"




Listas

Em HTML é possível especificar três tipos de listas: listas não ordenadas, listas ordenadas e lista de definições.

Lista não ordenada

A descrição de uma lista não ordenada é delimitada pelos marcadores <ul> e </ul>. Entre este par de marcadores são colocados os itens da lista precedidos pelo marcador <li>. A descrição de lista 

   <ul>
     <li>3 laranjas
     <li>5 bananas
     <li>1 goiaba
     <li>4 ameixas
   </ul>
é apresentada como

  • 3 laranjas
  • 5 bananas
  • 1 goiaba
  • 4 ameixas

Uma lista pode ter um título identificado pelo marcador <lh>. A lista 

   <ul>
     <lh><b>Salada de Frutas</b>
     <li>3 laranjas
     <li>5 bananas
     <li>1 goiaba
     <li>4 ameixas
   </ul>
é apresentada como

    Salada de Frutas
  • 3 laranjas
  • 5 bananas
  • 1 goiaba
  • 4 ameixas

Alternativamente, uma lista com imagens como destaque de item pode ser simulada como 

   <b>Salada de Frutas</b>
   <br><img src="purple.gif" width=14 height=14>
   3 laranjas
   <br><img src="purple.gif" width=14 height=14>
   5 bananas
   <br><img src="purple.gif" width=14 height=14>
   1 goiaba
   <br><img src="purple.gif" width=14 height=14>
   4 ameixas
onde não são utilizados os marcadores específicos de listas e ela é apresentado como

Salada de Frutas
3 laranjas
5 bananas
1 goiaba
4 ameixas

Lista ordenada

Uma lista ordenada é uma lista que tem seus itens enumerados. Os itens de uma lista ordenada são delimitados pelos marcadores <ol> e </ol> e os seus itens são precedidos pelo marcador <li>. A descrição 

   <ol>
     <li>abra a gaveta;
     <li>localize o livro;
     <li>feche a gaveta;
     <li>anote a retirada.
   </ol>
é apresentada como

  1. abra a gaveta;
  2. localize o livro;
  3. feche a gaveta;
  4. anote a retirada.

Uma lista (de qualquer tipo) pode estar "encaixada" em outra lista (de qualquer tipo). A descrição 

   <ol>
     <li> item 1
     <li> item 2
     <li> item 3
       <ol>
         <li> subitem 1
         <li> subitem 2
       </ol>
     <li> item 4
   </ol>
é apresentada como

  1. item 1
  2. item 2
  3. item 3
    1. subitem 1
    2. subitem 2
  4. item 4

Lista de definições

Listas de definições são listas que têm como marcador para cada item um título. Uma lista de definições é delimitada pelos marcadores <dl> e </dl>.Para a descrição de um item são utilizados dois marcadores. O marcador <dt>precede o título do item e o marcador <dd> a descrição associada a tal título. A descrição 

<dl>
  <dt>HTML<dd>Hypertext Mark-up Language
  <dt>HTTP<dd>HyperText Transfer Protocol
  <dt>URL<dd>Universal Resource Locator
  <dt>WWW<dd>World-Wide Web
</dl>
é apresentada como

HTML
Hypertext Mark-up Language
HTTP
HyperText Transfer Protocol
URL
Universal Resource Locator
WWW
World-Wide Web




Ligações e âncoras

Um dos aspectos mais importantes de HTML é a facilidade de especificar ligações de hipertexto entre "páginas" WWW (isto é, documentos). Uma ligação de hipertexto é associado a uma âncora que pode ser um fragmento de texto ou uma imagem, por exemplo. Ao selecionar uma âncora via um "clique", o paginador estabelece uma conexão com o servidor WWW (computador ligado na Internet capaz de disponibilizar páginas WWW), onde se encontra a página referenciada pela ligação, solicita tal página e, após recebê-la, apresenta-a ao usuário que selecionou a âncora em questão.

Uma âncora é delimitada pelos marcadores <a> e </a>. O exemplo 

Um <a href="http://www.stars.com/WebRef/Help/Begin.html">texto</a> para
novatos em Internet referenciado em "<a href="http://www.stars.com/"><em>The
Web Developer's Virtual Library</em></a>"
é apresentado como

Um texto para novatos em Internet referenciado em "The Web Developer's Virtual Library"

A primeira âncora (texto) com os respectivos marcadores delimitadores tem o formato 

<a href="http://www.stars.com/WebRef/Help/Begin.html">texto</a>
O marcador <a> tem aqui um valor associado ao seu atributo de nome href. Na nomenclatura da linguagem HTML, o valor de tal atributo é chamado de URL (Universal Resource Locator - Localizador Universal de Recurso). Na sua forma mais geral, ao identificar uma referência a uma página de forma absoluta, um URL consiste de diversas partes:

  • um identificador de protocolo de transferência - no caso do WWW, o protocolo de transferência de páginas hipertextos é o http (HyperText Transfer Protocol);
  • o nome do computador hospedeiro do servidor WWW - no exemplo, www.stars.com;
  • um caminho no sistema de arquivos (path) no computador hospedeiro que leva da raiz de diretórios utilizado pelo servidor WWW até o diretório em que se encontra o arquivo com o recurso (página, imagem, ...) referenciado pelo URL - no exemplo, o subdiretório Help do diretório WebRef que se encontra no diretório raiz do servidor; e
  • o nome do arquivo em que se encontra o recurso referenciado - no exemplo, o arquivo Begin.html.

A quarta parte, isto é a do nome do arquivo, é opcional. Se não mencionada o servidor utiliza um nome padrão como welcome.html ou index.html.

As duas primeiras partes também podem ser omitidas. Se elas não constam de um URL, então o paginador assume o mesmo hospedeiro contactado para a solicitação da página corrente apresentada e o mesmo protocolo de transferência utilizado na transmissão de tal página.

Um URL ainda pode ter um sufixo que começa com o caractere # e termina com um nome. Uma página referenciada sem tal sufixo sempre será apresentada a partir do seu início, quando solicitada. Por outro lado, se tal sufixo tem sido definido, então a apresentação se dá a partir de um ponto interno do documento definido por uma âncora com atributo name com valor igual ao nome utilizado no sufixo após o caractere #. Exemplo: o URL 

   http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html#HD
aponta para a seção "HTML Documents" do documento "A Biginner's Guide to HTML -- Part 1" de URL igual a 

   http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html
onde o nome do título de tal seção é definido como <a name="HD">HTML Documents</a>.

Se apenas um sufixo de URL é utilizado, então o URL se refere a um particular ponto da página corrente. Exemplo: A seção "Sobre este documento" da página que você está lendo agora tem a seguinte âncora no título de tal seção: 

   <a name="sobre">Sobre este documento</a>
e ela pode ser referenciada internamente como 

   Em "<a href="#sobre">Sobre este documento</a>" encontra-se descrito ...
que é apresentado como

Em "Sobre este documento" encontra-se descrito ...

Uma imagem pode ser utilizada como âncora. O texto 

   <a href="http://www.unicamp.br/">
   <img src="http://www.ic.unicamp.br/~hans/lite/p-icon.gif"></a>
é apresentado como





Tabelas

O uso de tabelas permite distribuir informações em um trecho de um documento em linhas e colunas. Certas informações são mais compreensíveis se organizadas e apresentadas na forma de tabelas. Tabelas também são um meio útil para controlar melhor o posicionamento (layout) de informações já que podem ser utilizadas posições relativas (por exemplo, apresente tal parágrafo na segunda coluna da terceira linha de uma determinada tabela) para a alocação espacial de informações. Posições em uma tabela são denominadas células na nomenclatura HTML. Uma célula é delimitada pelo par de marcadores <td> e </td>. Uma linha de células, por outro lado, é delimitada pelo par de marcadores <tr> e </tr>. A descrição de tabela 

   <table>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
é apresentada como

9701226.5
9705289.3
9112357.4

Para adicionar bordas a uma tabela é preciso definir um valor para o atributo border (extensão da Netscape) Este valor indica o largura da borda. Se nada é dito a largura é zero, isto é, a tabela fica sem borda. A especificação border sem atribuição de valor é equivalente a border=1. As descrições 

   <table border>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
   <p>
   <table border=5>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
são apresentadas como

9701226.5
9705289.3
9112357.4

9701226.5
9705289.3
9112357.4

O atributo cellpadding (extensão da Netscape) é utilizado para especificar o espaço em torno do conteúdo de uma célula. A descrição 

   <table border cellpadding=8>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
é apresentada como

9701226.5
9705289.3
9112357.4

O atributo cellspacing (extensão da Netscape) define o espaço entre e em volta de células (isto é, ele define a espessura das "paredes" entre células. A tabela 

   <table border cellspacing=4>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
é apresentada como

9701226.5
9705289.3
9112357.4

O exemplo do uso conjunto de dos atributos border, cellpadding e cellspacing 

   <table border=5 cellpadding=8 cellspacing=4>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
é apresentada como

9701226.5
9705289.3
9112357.4

Para colocar um título em colunas é utilizado o marcador <th> de forma análoga como a colocação de uma informação em uma célula definida com o marcador <td>. A descrição 

   <table border>
     <tr><th><b>RA</b></th><th><b>P1</b></th></tr>
     <tr><td>970122</td><td>6.5</td></tr>
     <tr><td>970528</td><td>9.3</td></tr>
     <tr><td>911235</td><td>7.4</td></tr>
   </table>
é apresentada como

RAP1
9701226.5
9705289.3
9112357.4

A largura de uma tabela (mas não de um célula) pode ser definido com o atributo width. Um valor atribuído a tal atributo define a largura da tabela em termos de pixeis (picture element ou pixel é a menor área de uma tela que pode ser manipulada individualmente) ou, caso o valor é sucedido pelo caractere %, o percentual do espaço entre as margens esquerda e direita correntes.

As descrições de tabelas 

   <table border>
   <tr><td>um texto curto</td><td>um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo.</td></tr>
   </table>
   <p>
   <table border width=50>
   <tr><td>um texto curto</td><td>um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo.</td></tr>
   </table>
   <p>
   <table border width=50%>
   <tr><td>um texto curto</td><td<um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo.</td></tr>
   </table>
são apresentadas como

um texto curtoum texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo.

um texto curtoum texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo.

um texto curtoum texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo.

Uma quebra em um texto pode ser evitada com um "branco não quebrável" representado como &nbsp;. Para evitar um quebra no texto da primeira célula, a descrição da tabela deve ser 

   <table border>
   <tr><td>um&nbsp;texto&nbsp;curto</td><td>um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo.</td></tr>
   </table>
para que ela seja apresentada como

um texto curtoum texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo.

O conteúdo de uma célula de uma tabela pode ser alinhado horizontalmente através do atributo align nos marcadores de célula <td> e <th>. Os valores mais freqüentemente utilizados para o atributo align são:

leftalinhamento pelo lado esquerdo (alinhamento padrão para o marcador <td>)
centercentralização (alinhamento padrão para o marcador <th>)
rightalinhamento pelo lado direito

Por exemplo a descrição de tabela 

   <table border>
   <tr><td>um&nbsp;texto&nbsp;curto</td><td align=right>um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo.</td></tr>
   </table>
é apresentada como

um texto curtoum texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo.

O alinhamento vertical do conteúdo de uma célula pode ser controlada com o atributo valign. Os valores mais comuns que tal atributo pode assumir são

topalinhamento pelo lado superior
middlealinhamento em relação ao meio da célula (alinhamento padrão)
bottomalinhamento pelo lado inferior

Por exemplo, a descrição de tabela 

   <table border>
   <tr><td valign=top>um&nbsp;texto&nbsp;curto</td><td>um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo; um texto bem mais longo;
   um texto bem mais longo.</td></tr>
   </table>
é apresentada como

um texto curtoum texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo; um texto bem mais longo.

Uma célula não precisa só conter texto. Por exemplo, a descrição de tabela 

   <table border>
   <tr><td>
   <a href="http://www.unicamp.br/">
   <img src="http://www.ic.unicamp.br/~hans/lite/p-icon.gif"></a></td>
   <td>Universidade Estadual de Campinas</td></tr>
   </table>
é apresentada como

Universidade Estadual de Campinas




Adição de imagens

O marcador <img> é utilizado para adicionar imagens a uma página. Para incorporar uma imagem a uma página é preciso definir um valor para o atributo src do marcador <img>. O valor de tal atributo deve ser um URL, isto é, uma referência "universal" a um arquivo que contenha a imagem a ser incorporada. Exemplo: O trecho 

   O logotipo <img src="http://www.ic.unicamp.br/~hans/lite/p-icon.gif">
   utilizado como exemplo de imagem incorporada ao texto.
é apresentado como

O logotipo utilizado como exemplo de imagem incorporada ao texto.
ura O marcador <img> também tem um atributo denominado align que permite definir alternativas de alinhamento da imagem em relação ao texto no qual está inserida ou da imagem em relação às margens correntes da página. Possíveis valores para tal atributo são:

topalinhamento com o lado superior da imagem
middlealinhamento em relação ao meio da imagem
bottomalinhamento com o lado inferior da imagem (alinhamento padrão)
leftalinhamento da imagem com a margem esquerda corrente da página (alinhamento padrão)
rightalinhamento da imagem com a margem direita corrente da página

Os três primeiros valores indicam o alinhamento da imagem em relação ao texto em que está inserida e a as duas últimas da imagem em relação às margens correntes da página. Nos dois últimos casos o texto flui em torno da imagem enquanto que nos três primeiros casos a imagem é tratada como se fosse um caractere de uma linha de texto. O trecho 

   O logotipo <img src="abaco.gif" align=top>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   do texto "envolvente" pelo <strong>topo</strong> da imagem.
   <p>
   O logotipo <img src="abaco.gif" align=middle>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   do texto "envolvente" pelo <strong>meio</strong> da imagem.
   <p>
   O logotipo <img src="abaco.gif" align=bottom>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   do texto "envolvente" pela <strong>base</strong> da imagem.
   <p>
   O logotipo <img src="abaco.gif" align=left>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   da imagem pela <strong>margem esquerda</strong> corrente e texto
   fluindo em torno da imagem.
   <p>
   O logotipo <img src="abaco.gif" align=right>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   da imagem pela <strong>margem direita</strong> corrente e texto
   fluindo em torno da imagem.
é apresentado como

O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento do texto "envolvente" pelo topo da imagem.

O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento do texto "envolvente" pelo meio da imagem.

O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento do texto "envolvente" pela base da imagem.

O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento da imagem pela margem esquerda corrente e texto fluindo em torno da imagem.

O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento da imagem pela margem direita corrente e texto fluindo em torno da imagem.

Para cancelar a disposição de texto em volta de uma imagem e continuar o texto abaixo da imagem pode ser utilizado o atributo clear do marcador <br>. Tal atributo pode assumir os seguintes valores:

lefttexto que se segue não é mais alinhado pela imagem à esquerda
righttexto que se segue não é mais alinhado pela imagem à direita
alltexto que se segue não é mais alinhado por nenhuma imagem anterior.

O trecho 

   O logotipo <img src="abaco.gif" align=left>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   da imagem pela <strong>margem esquerda</strong> corrente e texto
   fluindo em torno da imagem.
   <br clear=all>
   O logotipo <img src="abaco.gif" align=right>
   utilizado como exemplo de imagem incorporada ao texto com alinhamento
   da imagem pela <strong>margem direita</strong> corrente e texto
   fluindo em torno da imagem.
é apresentado como

O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento da imagem pela margem esquerda corrente e texto fluindo em torno da imagem.
O logotipo utilizado como exemplo de imagem incorporada ao texto com alinhamento da imagem pela margem direita corrente e texto fluindo em torno da imagem.

Outros dois atributos importantes do marcador <img> são os atributos width e height que informam sobre a dimensão da imagem. Se houver um atraso na transmissão de imagens e as dimenensões são conhecidas para o paginador, então ele pode determinar a apresentação do texto deixando os espaços adequados para as imagens e adicionar as imagens a tais espaços reservados conforme elas vão sendo recebidas.

A imagem do ábaco tem 55 pixels de largura e 49 de altura. As informações sobre as dimensões da imagem do ábaco, portanto, podem ser passadas ao paginador como 

   <img src="abaco.gif" width=55 height=49>
Um atributo também muito importante é o atributo alt. Um usuário que usar um paginador sem capacidade gráfica, como o Lynx, ou que desabilitar a carga automática das imagens inseridas em um documento, não verá tais imagens (usuários com conexões muito lentas tendem a desabilitar a carga automática de imagens). A mensagem a ser transmitida pela página pode ser seriamente afetada se as imagens nela inseridas não são apresentadas. Para atenuar o impacto da falta de uma imagem, é possível associar um texto à imagem que será apresentado ao usuário, seja porque o seu paginador não tenha capacidade gráfica, seja por questões de preferências pessoais. A imagem do ábaco, portanto, poderia ser inserido em um texto como 

   <img src="abaco.gif" width=55 height=49 alt="abaco">
É possivel adicionar uma borda a uma imagem através da definição de um valor para o atributo border do marcador <img>. Uma borda de 4 pixels para a imagem do ábaco é definida como 

   <img src="abaco.gif" border=4 width=55 height=49 alt="abaco">
e é apresentada na forma

abaco


Cores para fundo e texto

É possível definir uma imagem a ser replicada no fundo de uma página como se fosse um azulejo. Para fazer isto é preciso definir um valor para o atributo background do marcador <body>. A página exemplo tem o seu marcador <body> definida como 

   <body background="marmore.jpg">
e a imagem "marmore.jpg" tem o seguinte aspecto:

Existe aí um problema de contraste. O fundo da página não constrasta bem com o texto e assim dificulta a sua leitura. Um melhor contraste pode ser obtido com a mudança da cor utilizada para a representação do texto. Tal mudança também é feita através de um atributo do marcador <body>. O nome do atributo é text. Um valor a ele atribuído é um código hexadecimal representando uma cor no formato RGB precedido pelo caractere #.

Uma cor no formato RGB é representada por três valores que indicam intesidades das cores primárias vermelho, verde e azul misturadas para produzir a cor desejada. O valor 0 para uma de uma cor primária significa que ela não participa da mistura e o valor máximo 255 que ela participa com intensidade máxima. Assim, se todas os valores forem zero (ausência de cor), então temos a cor preta e se todas participam com intensidade máxima (isto é, com valor 255) a cor branca.

Os valores entre 0 e 255 podem ser representados com dois dígitos hexadecimais. Um dígito hexadecimal é representado por um dos seguintes caracteres: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Os dígitos 0 a 9 têm os mesmos valores que eles tem no sistema decimal, a letra A vale dez, a letra B onze, a letra C doze, a letra D treze, a letra E quatorze e a letra F quinze. O número hexadecimal C6, por exemplo, equivale ao valor decimal 12 x 16 + 6 = 198, dado que o dígito hexadecimal mais significativo (C) tem valor doze e peso dezesseis e o menos significativo (6) tem valor seis e peso um.

Uma tabela de cores com seus respectivos códigos hexadecimais do formato RGB (Red-Green-Blue) pode ser encontrada em http://www.cee.odu.edu/html/rgb_cee2.gif. O código hexadecimal de uma cor em formato RGB é formado pela justaposição dos três valores de intensidade atribuídos para cada uma das três cores primárias.

A patir do exemplo com pouco contranste do texto em relação à imagem de fundo, podemos gerar uma alternativa que melhora um pouco tal constraste. Na alternativa é utilizada a cor "vermelho intenso" (FF0000 no código hexadecimal do formato RGB). Na alternativa, o marcador <body> é definido como 

   <body background="marmore.jpg" text="#FF0000">
O marcador <body> têm outros atributos para cada qual pode ser definido um código hexadecimal do formato RGB:

bgcolorao invés de uma imagem pode ser atribuída uma cor de fundo a uma página através deste atributo
linkdetermina a cor normal de uma âncora na forma de um fragmento de texto antes de ser visitada
vlinkdetermina a cor normal de uma âncora na forma de um fragmento de texto já visitada
alinkdetermina a cor normal de uma âncora na forma de um fragmento de texto ativa (isto é, uma âncora selecionada, mas para cujo recurso associado ainda se aguarda o início da recepção)

Na segunda alternativa para o exemplo de pouco contraste é definida o fundo de uma página em termos de uma cor e não como uma imagem. Em tal alternativa o marcador <body> foi definido como 

   <body bgcolor="#FFEBCD">
A Netscape adotou uma extensão que permite controlar o tamanho e as cores de letras com o marcador <font>. O atributo size define o tamanho das letras e o atributo color a cor das letras. O valor de uma cor é fornecida através do código hexadecimal do padrão RGB precedido pelo caractere #. O valor do tamanho das letras pode variar de 1 a 7, onde 1 representa o menor tamanho e 7 o maior. A descrição 

   bla <font color="#FF0000">bla</font> bla<br>
   bla <font size=7 color="#FF0020">bla</font> bla<br>
   bla <font size=6 color="#FF0040">bla</font> bla<br>
   bla <font size=5 color="#FF0060">bla</font> bla<br>
   bla <font size=4 color="#FF0080">bla</font> bla<br>
   bla <font size=3 color="#FF00A0">bla</font> bla<br>
   bla <font size=2 color="#FF00C0">bla</font> bla<br>
   bla <font size=1 color="#FF00F0">bla</font> bla<br>
é apresentada como

bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla



Linhas de separação

Linhas de separação, isto é, divisores horizontais de texto, são criadas com o marcador <hr> que pode ter valores atribuídos aos atributos:

sizedefine a espessura da linha de separação em termos de pixeis
widthdefine a o comprimento da linha de separação em termos absolutos (isto é, em termos de um número de pixeis) ou como um valor percentual da largura da texto correntes em que se encontra inserida tal linha. No segundo caso o valor associado ao atributo é seguido pelo caractere %.
aligndefine o alinhamento da linha de separação pela esquerda (left), centro (center) e direita (right) em relação às margens correntes
noshadeinibe o sombreamento da linha de separação usado para dar uma ilusão de três dimensões

A descrição 

   ................................................................
   <hr>
   ................................................................
   <hr size=4>
   ................................................................
   <hr width=50>
   ................................................................
   <hr width=50%>
   ................................................................
   <hr width=50% align=center>
   ................................................................
   <hr width=50% align=center noshade>
   ................................................................
   <hr width=50% size=5 align=center>
   ................................................................
   <hr width=50% size=5 align=right>
   ................................................................
   <hr width=50% size=5 align=left>
   ................................................................
é apresentado como

................................................................
................................................................
................................................................
................................................................
................................................................
................................................................
................................................................
................................................................
................................................................
................................................................

Um linha de separação também pode ser criada com uma imagem como na descrição 

   <img src="rule.gif" align=center>
que é apresentada como





Meta-informação

Meta-informação é informação adicional não colocada no corpo (trecho delimitado por <body> e </body>) de uma página. Meta-informação pode e, preferencialmente, deve ser adicionada no preâmbulo de uma página delimitado pelos marcadores <head> e </head>, já que ela pode ser utilizada por servidores para passar informações mais específicas a consultas sobre a página feitas via o protocolo HTTP ou pode ser usada como uma descrição mais precisa para efeitos de indexação por "máquinas" de busca como a da Altavista.

Meta-informação é definida através de dois atributos do marcador <meta>: o atributo name (ou alternativamente o atributo http-equiv) e o atributo content. O primeiro atributo define o tipo da meta-informação associada ao segundo. Se for utilizado o atributo http-equiv ao invés do atributo name, então a informação fica associada ao "cabeçalho de resposta" fornecido em função de uma solicitação 'GET' or 'HEAD' sobre o documento via o protocolo HTTP.

Uma lista não exaustiva de valores do atributo name (ou http-equiv) são:

valor correspondente de content
resource-typeno momento a única meta-informação possível deste tipo é "document"
descriptionuma frase ou parágrafo que descreva o documento. Esta informação juntamente com o título será apresentada por máquinas de busca quando uma consulta envolve a página em questão.
keywordsuma seqüência de palavras logicamente relacionadas com o documento
copyrightuma frase ou parágrafo que descreva informações relativas a direitos autorais
expiresuma data a partir da qual a informação do documento perde a sua validade
reply-too endereço de contato para envio de comentários sobre o documento

No documento HTML Survival Kit contém as seguintes meta-informações: 

   <META NAME="resource-type" CONTENT="document">
   <META NAME="description" CONTENT="Contains information 
        about HTML authoring guide, a.k.a., The HTML Survival Kit, 
        for the Department of Civil and Environmental Engineering Unix Users">
   <META NAME="copyright" CONTENT="This document copyright 1997 by Jae Yoon. 
        All graphics used are copyright materials 1997 by Jae Yoon.
        Use for non-profit and education purposes explicitly granted with
        proper credit and if no content of document is modified. 
        Without prior consent of author, any form of copying and  
        alteration is strictly prohibited.">
   <META HTTP-EQUIV="Keywords"  CONTENT="HTML Survival kit, Table of Contents">
   <META HTTP-EQUIV="Keywords"  CONTENT="ODU CEE Unix SIG">
   <META NAME="distribution" CONTENT="global">
O marcador <meta> também pode ser utilizado para redirecionar o usuário em caso de uma página ter sido movida para outro local, por exemplo. Para obter este efeito é preciso colocar na página que faz o papel de redirecionador algo como 

   <meta http-equiv="refresh" content="2;URL=exAnat.htm">
Uma página que contiver este marcador é apresentada por 2 segundos e a seguir busca e desvia o usuário para a página indicada (no exemplo, a página com URL igual a exAnat.htm).

O exemplo é definido como 

   <html>
   <head>
   <meta http-equiv="refresh" content="2;URL=exAnat.htm">
   <title>Redirecionamento</title>
   </head>
   <body>
   <h1>Redirecionamento</h1>
   Passados 2 segundos e nada aconteceu?
   <p>
   Seu paginador é incapaz de redireconar!
   </body>
   </html>




Acentuação e caracteres especiais

Caracteres especiais do HTML

&  &amp;
<  &lt;
>  &gt;
"  &quot;

Além destes ainda existe o caractere &nbsp; que representa um caractere "branco não quebrável". Caso ele ocorra entre dois caracteres (especias ou não) diferentes de branco, então a quebra de linha é inibida em tal ponto.

Alguns sinônimos de caracteres do conjunto ISO-8859 Latin-1

©  &copy;
®  &reg;
Æ  &AElig;
Á  &Aacute;
  &Acirc;
À  &Agrave;
Å  &Aring;
à &Atilde;
Ä  &Auml;
Ç  &Ccedil;
Р &ETH;
É  &Eacute;
Ê  &Ecirc;
È  &Egrave;
Ë  &Euml;
Í  &Iacute;
Π &Icirc;
Ì  &Igrave;
Ï  &Iuml;
Ñ  &Ntilde;
Ó  &Oacute;
Ô  &Ocirc;
       
Ò  &Ograve;
Ø  &Oslash;
Õ  &Otilde;
Ö  &Ouml;
Þ  &THORN;
Ú  &Uacute;
Û  &Ucirc;
Ù  &Ugrave;
Ü  &Uuml;
Ý  &Yacute;
á  &aacute;
â  &acirc;
æ  &aelig;
à  &agrave;
å  &aring;
ã  &atilde;
ä  &auml;
ç  &ccedil;
é  &eacute;
ê  &ecirc;
è  &egrave;
       
ð  &eth;
ë  &euml;
í  &iacute;
î  &icirc;
ì  &igrave;
ï  &iuml;
ñ  &ntilde;
ó  &oacute;
ô  &ocirc;
ò  &ograve;
ø  &oslash;
õ  &otilde;
ö  &ouml;
ß  &szlig;
þ  &thorn;
ú  &uacute;
û  &ucirc;
ù  &ugrave;
ü  &uuml;
ý  &yacute;
ÿ  &yuml;

Caracteres do conjunto ISO 8859 Latin-1

Do conjunto ISO 8859 Latin-1 os caracteres usados em HTML são:

tab  &#09;
LF  &#10;
CR  &#13;
   &#32;
!  &#33;
"  &#34;
#  &#35;
$  &#36;
%  &#37;
&  &#38;
'  &#39;
(  &#40;
)  &#41;
*  &#42;
+  &#43;
,  &#44;
-  &#45;
.  &#46;
/  &#47;
0  &#48;
1  &#49;
2  &#50;
3  &#51;
4  &#52;
5  &#53;
6  &#54;
7  &#55;
8  &#56;
9  &#57;
:  &#58;
;  &#59;
<  &#60;
=  &#61;
>  &#62;
?  &#63;
@  &#64;
A  &#65;
B  &#66;
C  &#67;
D  &#68;
E  &#69;
F  &#70;
G  &#71;
H  &#72;
I  &#73;
J  &#74;
K  &#75;
L  &#76;
M  &#77;
N  &#78;
O  &#79;
P  &#80;
Q  &#81;
R  &#82;
S  &#83;
T  &#84;
U  &#85;
V  &#86;
W  &#87;
X  &#88;
Y  &#89;
Z  &#90;
[  &#91;
\  &#92;
]  &#93;
       
^  &#94;
_  &#95;
`  &#96;
a  &#97;
b  &#98;
c  &#99;
d  &#100;
e  &#101;
f  &#102;
g  &#103;
h  &#104;
i  &#105;
j  &#106;
k  &#107;
l  &#108;
m  &#109;
n  &#110;
o  &#111;
p  &#112;
q  &#113;
r  &#114;
s  &#115;
t  &#116;
u  &#117;
v  &#118;
w  &#119;
x  &#120;
y  &#121;
z  &#122;
{  &#123;
|  &#124;
}  &#125;
~  &#126;
   &#160;
¡  &#161;
¢  &#162;
£  &#163;
¤  &#164;
¥  &#165;
¦  &#166;
§  &#167;
¨  &#168;
©  &#169;
ª  &#170;
«  &#171;
¬  &#172;
­  &#173;
®  &#174;
¯  &#175;
°  &#176;
±  &#177;
²  &#178;
³  &#179;
´  &#180;
µ  &#181;
  &#182;
·  &#183;
¸  &#184;
¹  &#185;
º  &#186;
»  &#187;
¼  &#188;
½  &#189;
¾  &#190;
¿  &#191;
       
À  &#192;
Á  &#193;
  &#194;
à &#195;
Ä  &#196;
Å  &#197;
Æ  &#198;
Ç  &#199;
È  &#200;
É  &#201;
Ê  &#202;
Ë  &#203;
Ì  &#204;
Í  &#205;
Π &#206;
Ï  &#207;
Р &#208;
Ñ  &#209;
Ò  &#210;
Ó  &#211;
Ô  &#212;
Õ  &#213;
Ö  &#214;
×  &#215;
Ø  &#216;
Ù  &#217;
Ú  &#218;
Û  &#219;
Ü  &#220;
Ý  &#221;
Þ  &#222;
ß  &#223;
à  &#224;
á  &#225;
â  &#226;
ã  &#227;
ä  &#228;
å  &#229;
æ  &#230;
ç  &#231;
è  &#232;
é  &#233;
ê  &#234;
ë  &#235;
ì  &#236;
í  &#237;
î  &#238;
ï  &#239;
ð  &#240;
ñ  &#241;
ò  &#242;
ó  &#243;
ô  &#244;
õ  &#245;
ö  &#246;
÷  &#247;
ø  &#248;
ù  &#249;
ú  &#250;
û  &#251;
ü  &#252;
ý  &#253;
þ  &#254;
ÿ  &#255;





http://www.ic.unicamp.br/~hans/lite/html.html