O tutorial a seguir foi retirado do guia especial da revista Informática Exame, hoje conhecida como Info Exame. É uma condensação do livro Iniciando em HTML, de José Antonio Ramalho, publicado pela Editora Makron Books.
Espero que ele seja tão útil a você, quanto foi para mim na construção desta HP.
Se você quiser, faça o download deste tutorial: Tutorial.zip (13Kb)

Lembre-se: Para informações mais técnicas e detalhadas, eu sugiro que você compre o livro acima citado ou um outro de sua preferência. Pois este "help" oferece uma base, na minha opinião bastante sólida, à construção de sua Home Page.

Conceito
A Linguagem de formatação das páginas Web

A criação de uma home page na Internet é prática cada vez mais freqüente entre empresas que precisam divulgar sua imagem e seus produtos e entre pessoas que desejam compartilhar seus interesses com outras. Elaborar uma página é uma tarefa bem simples do que se imagina. Não é preciso ser programador, nem técnico. Este guia mostra os passos e os comandos da linguagem HTML necessários para criar uma página completa, com imagens, tabelas e links para outras páginas da rede.

Como criar uma página Web

Uma página da Web é composta de textos e comandos especiais (tags) de uma linguagem de programação chamada HTML, abreviação de Hiper Text Markup Language. Ela é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas, gerando documentos com o conceito de hipertexto.
Assim como em qualquer outra linguagem, o programador deve escrever o código-fonte seguindo as regras de sintaxe. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou as tags para formatar e acessar recursos da Web. O código-fonte pode ser escrito usando o mais simples dos editores de texto. Até o programa Bloco de Notas (Notepad) do Windows pode ser usado (que é o meu caso: todo o código foi feito no Notepad e depois para transformá-lo em HTML usei o IE 4.0). Contudo, a forma mais prática e produtiva para escrever uma página Web é usar um editor HTML.

O que é HTML tag

Quando um browser exibe uma página Web, ele lê o texto da página e procura símbolos especiais denominados tags, que dizem como o texto ou a informação devem ser exibidos. Por exemplo: uma tag pode dizer que um texto deve ser mostrado em negrito, em itálico, com certo tipo de fonte etc. Além do aspecto físico do texto, uma tag pode indicar que um determinado trecho representa, na verdade, o endereço de outras páginas, que devem ser acessadas no caso de o texto ser clicado.
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. Contudo, exibem várias tags individuais.
As tags são identificadas por ser envolvidas pelos sinais "<>" ou "</>".Entre os sinais "<>" são especificados os comandos propriamente ditos.
No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando a barra de divisão "/", indicando que a tag está finalizando a marcação de um texto.
O formato genérico de uma tag é: <Nome da tag>texto</Nome da tag>.
Veja, a seguir, alguns comandos e o efeito que eles causam no browser:

Código:
<b>Este texto está em negrito</b> enquanto esta <i>palavra</i> está em itálico.
<h3>Este comando gera um título de tamanho 3</h3>
Para quebrar uma linha, é necessário um comando especial <br>, caso contrário, as linhas serão exibidas continuamente.

Resultado:
Este texto está em negrito enquanto esta palavra está em itálico.

Este comando gera um título de tamanho 3

Para quebrar uma linha, é necessário um comando especial,
caso contrário, as linhas são exibidas continuamente.

As tags, daqui para a frente, serão chamadas de comandos.

A estrutura de uma página HTML

Assim como em outras linguagens, existem algumas estruturas básicas que identificam partes de um programa HTML.O próximo bloco mostra os comandos básicos de uma página:

<html>
<head>
<title>Título da página</title>
</head>
<body>
*********************************************
*****
***** Área para os comandos da linguagem
*****
*********************************************
</body>
</html>

O comando <html> é usado em par com o comando </html>. Ele delimita a área dos comandos da linguagem HTML. O par de comandos <head></head> é usado para especificar algumas tags da linguagem. A mais importante delas serve para criar uma expressão que aparece na linha de título da janela do browser. O par de comandos <body></body> deve ser usado para envolver todos os comandos de formatação da página.

Os principais elementos de uma página HTML

Uma página HTML é composta básicamente de títulos, textos, parágrafos, imagens e links - este últimos responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos na linguagem.

Acentuação

Se você usa o Windows com as configurações de idiomas e de teclado adequadas para o português, a visualização será normal.
Contudo, a linguagem HTML possui códigos especiais para que uma letra acentuada seja visualizada em qualquer plataforma. Como esses códigos dificultam muito a visualização do texto, optamos por usar a acentuação direta em favor da didática.

Formatação
Defina o layout do texto

A primeira etapa para fazer o layout do texto é definir os cabeçalhos.
São linhas do documento que aparecem com um tamanho de letra diferenciado do restando do texto com a finalidade de identificar o início de uma seção ou de um tópico. Existem seis tamanhos ou modelos de cabeçalho. O comando H tem a seguinte sintaxe:

<Hn>Texto do cabeçalho</Hn>

No caso, "n" deve ser substituído por um número de 1 a 6.
O maior cabeçalho é especificado com o comando H1 e o menor, com o comando H6.
Observe o exemplo:

Código:
<h1>Cabeçalho de nível 1</h1>
<h2>Cabeçalho de nível 2</h2>
<h3>Cabeçalho de nível 3</h3>
<h4>Cabeçalho de nível 4</h4>
<h5>Cabeçalho de nível 5</h5>
<h6>Cabeçalho de nível 6</h6>

Resultado:

Cabeçalho de nível 1

Cabeçalho de nível 2

Cabeçalho de nível 3

Cabeçalho de nível 4

Cabeçalho de nível 5

Cabeçalho de nível 6

Exitem outras formas de criar linhas de texto com tamanho e tipo de letra diferentes.
Contudo, os comandos de cabeçalho são a forma mais rápida de conseguir este efeito.

Parágrafos e quebras de linha

De nada adianta você ter cabeçalhos se não tiver um conteúdo que os siga. Nas páginas HTML, você pode digitar o texto exatamente no lugar onde deseja que ele apareça na tela, da mesma forma que faz com um editor de texto comum.

O comando <P>

A diferença principal entre a página HTML e o editor tradicional é que a página não reconhece o fim de um parágrafo quando se pressiona a tecla Enter. Você precisa forçar o fim do parágrafo e a quebra de linha usando comandos especiais. O comando responsável pela quebra de parágrafo é o <P>
Sua sintaxe é: <p>

Veja o código-fonte mostrado a seguir:
<h1>Exemplo de parágrafo e quebra de linha</h1>
A linguagem HTML ignora o pressionamento da tecla enter no final da linha.
Durante a digitação deste texto, pressionei Enter depois da palavra "linha" da frase anterior.<p>
Quando o browser exibir esta página, as duas primeiras frases estarão em um único parágrafo.
Para criar um parágrafo você deve inserir o comando <p>
<p>
<p>
<p>
<p>
Para inserir linhas em branco você não deve usar um destes comandos para cada linha que quiser deixar em branco. Veja que apesar de terem sido especificados 4 destes comandos antes deste parágrafo apenas uma linha foi deixada em branco. Se você quiser separar visualmente uma seção de página, pode usar o comando <hr>. Ele insere uma linha horizontal no seu local.
<hr>
Viu só. A linha anterior contém o comando HR.

Resultado:

Exemplo de parágrafo e quebra de linha

A linguagem HTML ignora o pressionamento da tecla enter no final da linha.Durante a digitação deste texto, pressionei Enter depois da palavra "linha" da frase anterior.

Quando o browser exibir esta página, as duas primeiras frases estarão em um único parágrafo. Para criar um parágrafo você deve inserir o comando <p>

Para inserir linhas em branco você não deve usar um destes comandos para cada linha que quiser deixar em branco. Veja que apesar de terem sido especificados 4 destes comandos antes deste parágrafo apenas uma linha foi deixada em branco. Se você quiser separar visualmente uma seção de página, pode usar o comando <hr>. Ele insere uma linha horizontal no seu local.

Viu só. A linha anterior contém o comando HR.

Além do comando <P>, que avança o texto para a próxima linha, você pode criar uma separação de blocos de texto usando o comando <HR> (Horizontal Rule), que insere uma linha divisória no local onde é especificado.
Note que o comando <P> é obedecido e executado, independentemente do redimensionamento da janela.

O comando <BR>

O comando <P> insere uma linha em branco imediatamente após sua especificação. Em muitas situações, você precisa quebrar a linha e continuar o texto na linha seguinte. Nessa situação, o comando que deve ser utilizado é <BR>
Sintaxe: <BR>
Note a diferença causada pelos dois comandos no texto.

Código:
<h1>Mais parágrafo e quebra de linha</h1>

Como dissemos anteriormente
de nada adianta pressionar a tecla ENTER no final
de uma linha.<p>
O browser não a reconhece.<p>
<hr>
No entanto isso pode ser obtido<br>
através do comando BR que significa Break e quebra a linha sem<br>
inserir uma linha em branco na sua sequência.<br>
Desta forma pode-se criar linhas e parágrafos desalinhados.<p>
A escolha é sua.

Resultado:

Mais parágrafo e quebra de linha

Como dissemos anteriormente de nada adianta pressionar a tecla ENTER no final de uma linha.

O browser não a reconhece.

No entanto isso pode ser obtido
através do comando BR que significa Break e quebra a linha sem
inserir uma linha em branco na sua sequência.
Desta forma pode-se criar linhas e parágrafos desalinhados.

A escolha é sua.

Muito bem, você agora já sabe como criar títulos e inserir texto na página HTML.
Com isso, já poderia escrever documentos da mesma forma que faz com o seu editor de texto. Vejamos, agora, como melhorar a aparência do texto.

Formatação do texto

Assim como no editor de texto, você pode criar uma série de efeitos no documento, modificando o tamanho ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o início e o fim do trecho que sofrerá formatação.
Os principais comandos de estilo de texto são:

Comando	Sintaxe	Função
Negrito	<b>texto</b>	Aplica o estilo negrito
Itálico	<i>texto</i>	Aplica o estilo itálico
Sublinhado	<u>texto</u>	Aplica um sublinhado
Strong	<strong>texto</strong>	Similar ao negrito
Typerwriter	<tt>texto</tt>	Deixa o texto com espaçamento regular
Big	<big>texto</big>	Aumenta a fonte e aplica negrito
Small	<small>texto</small>	Reduz e altera a fonte
Sobrescrito	<sup>texto</sup>	Eleva o texto e deminui seu corpo
Subscrito	<sub>texto</sub>	Rebaixa o texto e diminui seu corpo
Pulsante	<blink>texto</blink>	Faz com que o texto pisque

Veja o código-fonte mostrado a seguir:
Este texto está em <b>Negrito</b>.
Este texto está em <i>Itálico</i>.
Este texto está em <b>Negrito</b> e <i>Itálico</i>.
Este texto está <u>sublinhado</u> mas pode não aparecer no seu browser.
Este texto recebeu o estilo <strong>chamado Strong que é parecido</strong> com negrito.
Este texto recebeu o estilo <tt>Typerwriter</tt>.
Este texto recebeu o formato de fonte <big>big</big> que cria letras grandes.
Este texto recebeu o formato de fonte <small>small</small> que cria letras pequenas.
Este é um exemplo de texto <sup>sobrescrito</sup> pelo comando SUP.
Este é um exemplo de texto onde foi usado o efeito <sub>subescrito</sub> do comando SUB.
Para chamar a <blink>Atenção</blink> use o comando Blink.

Resultado:
Este texto está em Negrito.
Este texto está em Itálico.
Este texto está em Negrito e Itálico.
Este texto está sublinhado mas pode não aparecer no seu browser.
Este texto recebeu o estilo chamado Strong que é parecido com negrito.
Este texto recebeu o estilo Typerwriter.
Este texto recebeu o formato de fonte big que cria letras grandes.
Este texto recebeu o formato de fonte small que cria letras pequenas.
Este é um exemplo de texto ^sobrescrito pelo comando SUP.
Este é um exemplo de texto onde foi usado o efeito _subescrito do comando SUB.
Para chamar a Atenção use o comando Blink.

(* Eu não sei no browser de vocês, mas no meu IE 4.0 não aconteceu nada com o comando blink. O que vale é a intenção. :))

Listas

Como organizar o texto em seqüências de itens

Assim como os cabeçalhos, outra forma de estruturar um documento HTML é a utilização de listas. Estas podem funcionar como sumário, menu ou resumo do conteúdo e são excelentes como ponto de partida para acessar outras partes de um documento. Existem basicamente dois tipos de lista: as não-ordenadas, que encadeiam uma série de itens sem numerá-los; e as ordenadas, que atribuem um número a cada elemento.

O comando <UL>

Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada (Unordered List) é <UL>, que deve envolver o primeiro e o último item da lista. Cada item deve ser especificado precedido pelo comando <LI> (Line Item).

<ul>
<li>texto do item
</li>texto do iten n...
</ul>

O comando <OL>

Para criar uma lista ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista ordenada (Ordered List) é <OL>, que deve envolver o primeiro e o último item da lista. Cada item, nesse caso, também dever ser precedido do comando <LI> (Line Item).

<ol>
<li>texto do item
</li>texto do iten n...
</ol>

Veja o código-fonte a seguir:
<h2><b>Exemplo de lista não ordenada</b></h2>
<ul>
<li> Primeiro item da lista
<li> Segundo item da lista
<li> Terceiro item da lista
<li> Quarto item da lista
</ul>
<hr>
<h2><b>Exemplo de lista ordenada</b></h2>
<ol>
<li> Primeiro item da lista
<li> Segundo item da lista
<li> Terceiro item da lista
<li> Quarto item da lista
</ol>

Resultado:

Exemplo de lista não ordenada

Primeiro item da lista
Segundo item da lista
Terceiro item da lista
Quarto item da lista

Exemplo de lista ordenada

Primeiro item da lista
Segundo item da lista
Terceiro item da lista
Quarto item da lista

Listas aninhadas

Você pode aninhar diversas listas para criar estruturas hierárquicas.
Também é possível misturar listas ordenadas e não ordenadas.
Primeiramente, você vai ver como funciona o aninhamento de listas não ordenadas.

Listas não ordenadas aninhadas

Note que, para cada nível de lista, o browser mostra um marcador (símbolo) diferente para facilitar a visualização das páginas. Você deve prestar atenção ao casar todos os comandos. Ou seja, todo comando <OL> aberto dever ser fechado por um comando </OL>.
Se você esquecer um deles, a estrutura das listas ficará incorreta.

Veja o código-fonte a seguir:
<b>Listas não ordenadas aninhadas</b>
<ul>
<li>Este é o primeiro item da lista principal
<li>Este é o segundo item da lista principal
<ul>
<li>Este é o primeiro sub item do segundo item da lista principal
<li>Este é o segundo sub item do segundo item da lista principal
<ul>
<li>E este é o terceiro nível, ou seja um sub item de um sub item
<li>Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível?
</ul>
<li>Não se perca, este é o terceiro sub item do segundo item da lista principal
<li>Não se perca, este é o quarto sub item do segundo item da lista principal
</ul>
<li>Este é o terceiro item da lista principal e vamos parar por aqui.
</ul>

Resultado:
Listas não ordenadas aninhadas

Este é o primeiro item da lista principal
Este é o segundo item da lista principal
- Este é o primeiro sub item do segundo item da lista principal
- Este é o segundo sub item do segundo item da lista principal
  - E este é o terceiro nível, ou seja um sub item de um sub item
  - Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível?
- Não se perca, este é o terceiro sub item do segundo item da lista principal
- Não se perca, este é o quarto sub item do segundo item da lista principal
Este é o terceiro item da lista principal e vamos parar por aqui.

Listas ordenadas aninhadas

Veja o código-fonte a seguir:
<b>Listas ordenadas aninhadas</b>
<ol>
<li>Este é o primeiro item da lista principal
<li>Este é o segundo item da lista principal
<ol>
<li>Este é o primeiro sub item do segundo item da lista principal
<li>Este é o segundo sub item do segundo item da lista principal
<ol>
<li>E este é o terceiro nível, ou seja um sub item de um sub item
<li>Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível?
</ol>
<li>Não se perca, este é o terceiro sub item do segundo item da lista principal
<li>Não se perca, este é o quarto sub item do segundo item da lista principal
</ol>
<li>Este é o terceiro item da lista principal e vamos parar por aqui.
</ol>

Resultado:
Listas ordenadas aninhadas

Este é o primeiro item da lista principal
Este é o segundo item da lista principal
1. Este é o primeiro sub item do segundo item da lista principal
2. Este é o segundo sub item do segundo item da lista principal
  1. E este é o terceiro nível, ou seja um sub item de um sub item
  2. Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível?
3. Não se perca, este é o terceiro sub item do segundo item da lista principal
4. Não se perca, este é o quarto sub item do segundo item da lista principal
Este é o terceiro item da lista principal e vamos parar por aqui.

A combinação dos dois tipos de lista é fácil.

Veja o código-fonte a seguir:
<b>Listas ordenadas aninhadas</b>
<ol>
<li>Este é o primeiro item da lista principal
<li>Este é o segundo item da lista principal
<ul>
<li>Este é o primeiro sub item do segundo item da lista principal
<li>Este é o segundo sub item do segundo item da lista principal
<ol>
<li>E este é o terceiro nível, ou seja um sub item de um sub item
<li>Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível?
</ol>
<li>Não se perca, este é o terceiro sub item do segundo item da lista principal
<li>Não se perca, este é o quarto sub item do segundo item da lista principal
</ul>
<li>Este é o terceiro item da lista principal e vamos parar por aqui.
</ol>

Resultado:
Listas ordenadas aninhadas

Este é o primeiro item da lista principal
Este é o segundo item da lista principal
- Este é o primeiro sub item do segundo item da lista principal
- Este é o segundo sub item do segundo item da lista principal
  1. E este é o terceiro nível, ou seja um sub item de um sub item
  2. Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível?
- Não se perca, este é o terceiro sub item do segundo item da lista principal
- Não se perca, este é o quarto sub item do segundo item da lista principal
Este é o terceiro item da lista principal e vamos parar por aqui.

Link

Uma das principais atrações da Internet é a apresentação de documentos com o conceito de hipertexto - ou seja, uma página que se liga a outras por meio de conexões especiais chamadas hiperlinks. Com esse conceito, você pode criar documentos que façam referência a outros e permitam ao usuário acessar essas referências, não importando se estão em outra página da Web, no seu micro ou em qualquer servidor da rede.
O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados mediante os links. (É o caso desse tutorial. Não o fiz deste modo por preguiça mesmo, pois teria que criar mais de um arquivo html e fazer isso no Notepad é um saco!) Imagine que você cria uma página sobre um determinado assunto no qual vários tópicos são abordados.
Assim como um livro, você cria todo o texto do documento e depois insere no início. Se quiser acessar diretamente o texto de um tópico, basta dar um clique no item do tópico no sumário e ele será imediatamente exibido.
O grande atrativo da Internet e da Web é a possibilidade de trazer o mundo para a sua mesa ao clique de um mouse. Imagine que você está criando uma página com informações sobre um pintor famoso. Você pode acrescentar imagens na página e também criar links para que o leitor possa acessar outras páginas da Web com informações sobre o pintor. Se, por exemplo, você estivesse criando uma página sobre o pintor Velásques, poderia definir um link para o site do Museo del Prado, que exibe várias obras desse mestre.
Para exemplificar o uso de hipertexto, vamos mostrar alguns modelos que começam com a criação de hiperlinks para diferentes partes de um documento, para outras páginas no diretório e micro do usuário e, finalmente, para qualquer lugar da Web.

Ligando seções de uma página

Para dominar o uso do hipertexto, o programador HTML deve conhecer bem o funcionamento de dois comandos da linguagem: A NAME e A HREF.

Saiba como usar uma âncora

Para interligar partes de uma página, você precisa criar uma âncora no início de cada seção.
Uma âncora é um ponto de referência ou endereço que será acessado por um link. É usada dentro de um documento para marcar o início de uma seção. A âncora recebe um nome que será mencionado pelo link que a acessará:
O comando usado para criar uma âncora é:
<a name="#nome da âncora">Texto para linkar</a>
Como exemplo, poderíamos ter a linha mostrada a seguir:
<a name="#parte1">Atenção</a>

Criando o link para a âncora

Para criar um link para uma âncora, você deve usar o comando A HREF, especificando o nome da âncora que deseja acessar e um texto que será convertido em hipertexto, indicando que ele remete a algum objeto. O texto especificado mudará de cor e ficará sublinhado para se destacar.
Sintaxe: <a href="#xxxxx">Texto usado como hipertexto</a>
Em nosso caso, um exemplo poderia ser:
<a href="#parte1">Atenção</a>
O símbolo "#" avisa o browser para procurar o link no documento atual.
Quando você clica no hipertexto, ele exibe a parte do documento que contém a âncora, colocando-a, sempre que possível, no alto da tela.

No exemplo a seguir, ao clicar na palavra Atenção você irá para o começo desse tutorial onde terá a palavra Atenção.
Código-fonte:
Clique na palavra <a href="#parte1">atenção</a> para ver o resultado.
Depois disso você cria uma âncora NO LOCAL DESEJADO que você quer que o link acesse: <a name="#parte1">Atenção</a>.

Resultado:
Clique na palavra atenção para ver o resultado.

Interligando arquivos locais

Fazer a ligação de um texto com uma página local é uma tarefa bastante simples. Você precisa apenas especificar o nome completo do arquivo que será chamado, com o comando A HREF.
Você lembra de como chegou neste tutorial? Foi básicamente isso: na minha página principal havia várias opções. Você clicou na opção HTML. Esta opção nada mais é que um link entre arquivos locais. Moleza não é mesmo? Veja o exemplo a seguir.

Código-fonte:
Clicando na palavra <a href="piadas.html">piadas</a> você irá para o documento "piadas.html", onde haverá uma piada só para descontrair!

Resultado:
Clicando na palavra piadas você irá para o documento "piadas.html", onde haverá uma piada só para descontrair!

Conectando arquivos de outros servidores

Agora a coisa fica um pouco mais séria. É aqui que está toda a graça da Internet. Com o uso de um esquema de endereçamento URL, consegue-se acessar um arquivo localizado em qualquer servidor do planeta que esteja conectado adequadamente à Web.
URL é a abreviação de Uniform Resource Locator e serve para especificar a localização de páginas e arquivos em diretórios de servidores da Web. Esse esquema é parecido com aquele que você usa para acessar um programa armazenado num diretório de sua máquina, ou seja, você tem de especificar o caminho (path) do arquivo para que ele seja encontrado. Na Web, você indica a URL do arquivo. Veja dois exemplos:
Acessando um arquivo pelo DOS: C:\msoffice\word\winword.exe
Acessando uma página pela Web: http://www.xispita.com/demo.html
Uma URL é composta de duas partes principais. A primeira é o protocolo Internet do documento e a segunda é o endereço do servidor e da página. A sintaxe é:
protocolo://servidor.arquivo
Protocolo é o tipo de servidor que está sendo acessado, e servidor é o computador que contém a página.
Arquivo pressupõe o caminho completo do arquivo.
Por exemplo, para acessar a página do Ramalho (autor deste tutorial), a URL da página é:
http://www.ramalho.com.br/index.html
Este endereço pode ser escrito na linha de URL do browser, para acessar diretamente a página.
Pode, também, ser indicado dentro de um documento HTML mediante o comando A HREF, que cria uma ligação ou link para a URL especificada. Veja o exemplo a seguir.

Código-fonte:
Para ir para a página do Ramalho clique em <a href="http://www.ramalho.com.br/index.html">Home page do Ramalho</a>

Resultado:
Para ir para a página do Ramalho clique em Home page do Ramalho. (Não clique. Caso contrário, você deixará esta página e irá para a especificada no link.)

Imagens

Como trabalhar com fotos e ilustrações

Incluir uma imagem em sua página Web é tarefa bem fácil. Exige apenas que você tenha disponível a figura e que ela esteja num dos formatos aceitos pelo browser. O formatos de arquivos gráficos aceitos pela Web é o GIF e o JPEG (Joint Photographic Engineering Group), que reduz até dez vezes o tamanho de uma imagem. Os browsers Nestscape e Internet Explorer trabalham com esses dois tipos de arquivo. Atenção: imagens em BMP do Windows não servem. Elas precisam ser convertidas para os formatos acima. Existem diversos programas que transformam arquivos gráficos BMP e de vários outros formatos em GIF e JPEG. Entre eles estão o sharewarePaint Shop Pro, o Wingif e a maioria dos programas de edição de imagens, como Photoshop, Picture Publisher e Photostyle. Antes de inundar suas páginas de imagens, lembre-se de que, ao usar a rede, a velocidade de transmissão de ilustrações é muito reduzida.

O comando <IMG>

O comando HTML usado para inserir uma imagem na posição atual onde ele é especificado é:

<IMG SRC="NomeDoArquivo.gif"> ou
<IMG SRC="NomeDoArquivo.jpg">

Se você colocar uma imagem perto de um texto, poderá especificar seu alinhamento em relação ao texto que está a seu redor.
Como padrão, a imagem é alinhada colocando o seu fundo (parte inferior) na mesma linha do texto. Com a diretiva Align, você pode alinhar o texto pelo fundo (bottom), que é o padrão, pelo meio (middle) e por cima (top).

Veja o código-fonte a seguir:
<img align="top" src="boca.gif">Alinhando a imagem por cima

<img align="middle" src="boca.gif">Alinhando a imagem pelo meio

<img align="bottom" src="boca.gif">Alinhando a imagem por baixo.

Resultado:

Alinhando a imagem por cima

Alinhando a imagem pelo meio

Alinhando a imagem por baixo.

Imagens externas

Colocar figuras dentro da página (in-line, que é o caso do exemplo acima) é muito interessante.
Contudo, isso causa lentidão na carga da página, principalmente quando elas são muitas e de tamanho grande. Uma técnica muito útil é fazer um link para a página usando o comando A HREF. Dessa forma, o leitor que desejar ver uma determinada foto clica na sua referência e não é onerado com o tempo de carga automática das figuras, como ocorre quando apenas o comando IMG é usado. Veja o exemplo a seguir.

Código-fonte:
A <a href="boca.gif">boca</a>, um dos principais órgãos do sistema digestivo, faz parte do tubo digestivo e é onde encontramos os dentes.

Resultado:
A boca, um dos principais órgãos do sistema digestivo, faz parte do tubo digestivo e é onde encontramos os dentes.

Ao clicar na palavra boca, a imagem associada é exibida em seu tamanho natural numa janela do browser. Para voltar à janela anterior, clique no botão BACK ou VOLTAR (depende do seu browser). Note que esta não é uma página HTML, mas apenas a figura em si. É claro que você poderia criar uma página colocando esta figura e um texto explicativo sobre ela.

Tabelas

Como mostrar informações em linhas e colunas

O trabalho com tabelas parece difícil a princípio. Todavia, depois de conhecidos os comandos de formatação, a tarefa se torna bastante rápida e fácil.
As tabelas têm uma estrutura parecida com a de uma planilha eletrônica: compõem-se de linhas e de colunas cujas interseções formam o que se chama de células. Uma célula pode conter um texto simples, um hipertexto ou até mesmo uma imagem. A seguir, vamos ver os comandos relativos a tabelas.

<TABLE></TABLE>

Uma tabela é criada com o par de comandos <TABLE> e </TABLE>.
Entre eles, devem ser especificadas as tags responsáveis pela criação de linhas e células, títulos, bordas e alinhamento da tabela. Como padrão, uma tabela é criada sem borda, ou seja, não aparecem as linhas horizontais e as verticais que separam as células.

<TR></TR>

Abreviação de Table Row. Essas tags são usadas para criar uma linha da tabela. Se uma tabela tiver cinco linhas, deverão ser indicados cinco pares desses comandos.

<TD></TD>

Abreviação de Table Data. As tags TD são usadas para especificar o conteúdo de uma célula. Esses comandos são usadas para especificar o conteúdo de uma célula. Esses comandos são usados em pares para cada célula da linha. Devem ser usados entre os comandos <TR></TR>. Ao contrário das planilhas, uma tabela não precisa ter todas as linhas com o mesmo número de células. A largura de uma coluna é definida pela larguda da maior célula que faz parte da coluna.
O conteúdo de uma célula é alinhado pela opção Align. Como padrão, o alinhamento horizontal do texto é feito à esquerda (Align=left) e o alinhamento vertical, no meio da célula (Valign=middle).

<TH></TH>

Abreviação de Table Header. Esse par de comandos é usado para criar células da mesma forma que os comandos <TD></TD>, só que o texto é exibido em negrito e centralizado.

<CAPTION></CAPTION>

Permite a criação de uma legenda para a tabela. A legenda é um texto externo que aparece antes ou depois da tabela. Esses comandos devem ser especificados após o comando Table, antes das tags TR. Uma legenda pode ser exibida no topo ou no pé da tabela, dependendo do valor atribuído à opção Align, que pode ser Top ou Bottom. O padrão é Top.
A legenda sempre é centralizada horizontalmente.

A seguir encontram-se as opções que podem ser usadas com os comandos descritos:

Border

Esta opção pertence ao comando Table. Se for especificado sem nenhum valor, uma linha fina é criada em volta de todas as células.
O valor 0 é equivalente a não ter borda. Quanto maior o valor especificado, mais grossa é a borda.
BORDER=<value>

Align

Esta opção aparece em diversos comandos HTML, não só os relativos a tabelas. Serve para centralizar o texto dentro da célula ou da linha.
Dentro do comando Caption, pode assumir os valores Top e Bottom.
Nos comandos TR, TH, ou TD, pode assumir os valores Left, Center e Right.

Valign

É equivalente ao comando Align só que funciona para alinhar o texto verticalmente na linha ou na célula.
Os valores possíveis são Top, Middle, Bottom e Baseline.
Middle é o padrão.

Nowrap

Esta opção pode aparecer em qualquer célula da tabela e indica que o texto da célula não pode ser quebrado para se ajustar ao seu tamanho.

Colspan

Esta opção pode aparecer em qualquer célula da tabela e especifica quantas colunas da tabela a célula deve ocupar. O valor padrão é 1.

Rowspan

Esta opção funciona como a anterior, só que especifica quantas linhas, para baixo, a célula deve ocupar. O valor padrão é 1.

Cellspacing

Esta opção é exclusiva do Netscape e define o espaçamento, em pixels, entre as células da tabela.

Cellpadding

Esta opção é exclusiva do Netscape e define o espaçamento, em pixels, entre as colunas e as linhas da tabela.

Agora que você tem uma idéia dos comandos usados para criar tabelas, vamos ver alguns exemplos práticos.

Criando uma tabela simples

A lógica de criação de uma tabela é a seguinte:
Use o comando <TABLE> para especificar que uma tabela está sendo criada.
Use os comandos <TR>....</TR> para criar uma linha da tabela.
Use os comandos <TD>....</TD> para criar uma célula de uma linha.
Use o comando </TABLE> para encerrar a tabela.
Use opções para mudar a aparência da tabela.

Veja o código-fonte a seguir:

<table border>
<tr>
<td>Linha 1 Coluna 1</td>
<td>Linha 1 Coluna 2</td>
<td>Linha 1 Coluna 3</td>
</tr>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
<td>Linha 2 Coluna 3</td>
</tr>
<tr>
<td>Linha 3 Coluna 1</td>
<td>Linha 3 Coluna 2</td>
<td>Linha 3 Coluna 3</td>
</tr>
</table>

Resultado:

Linha 1 Coluna 1	Linha 1 Coluna 2	Linha 1 Coluna 3
Linha 2 Coluna 1	Linha 2 Coluna 2	Linha 2 Coluna 3
Linha 3 Coluna 1	Linha 3 Coluna 2	Linha 3 Coluna 3

Note que no comando Table existe a opção Border. Ela cria a borda que envolve as células da tabela. Se você não a especificar, a tabela é montada normalmente, só que sem borda.

Bem, você já está apto a montar sua home page. Espero que este tutorial tenha sido útil a você!