Documento HTML

Documento

H.T.M.L.

versão 20020717

Sumário

1.0 - Introdução
1.1 - Programas necessários
1.2 - Extensões dos arquivos
1.3 - Estrutura do arquivo

2.0 - Comandos básicos
Ex.: 2.0.1, 2.0.2
2.1 - <BODY>
2.2 - Comandos mais importantes
Ex.: 2.2.1, 2.2.2
2.3 - Formatação do documento
Ex.: 2.3.1, 2.3.2
2.4 - Utilizando imagens
Ex.: 2.4.1, 2.4.2
2.5 - Texto pré-formatado
Ex.: 2.5.1

3.0 - Links
3.1 - Arquivos locais
Ex.: 3.1.1, 3.1.2
3.2 - URLs
Ex.: 3.2.1
3.3 - Seções no arquivo
Ex.: 3.3.1, 3.3.2
3.4 - E-mail
Ex.: 3.4.1
3.5 - Imagens
Ex.: 3.5.1

4.0 - Caracteres especiais
Ex.: 4.0.1
4.1 - Acentos e formatação
4.2 - Símbolos matemáticos
4.3 - Símbolos financeiros e autorais

5.0 - Cores hexadecimais

6.0 - Tabelas

6.1 - Colunas vs. Linhas
Ex.: 6.1.1
6.2 - Atributos
Ex.: 6.2.1

7.0 - Frames
Ex.: 7.0.1, 7.0.2

8.0 - Formulário
8.1 - Texto
Ex.: 8.1.1
8.2 - Senha
Ex.: 8.2.1
8.3 - Comentário
Ex.: 8.3.1
8.4 - Opção
Ex.: 8.4.1
8.5 - Checado
Ex.: 8.5.1
8.6 - Menu de Seleção
Ex.: 8.6.1
8.7 - Botões
Ex.: 8.7.1
8.8 - Informações complementares
Ex.: 8.8.1, 8.8.2

9.0 - Notas do autor

Sumário
1.0 - Introdução

O HTML é uma das linguagens mais utilizadas na internet, sendo usada, principalmente, na criação de home pages.
É bastante simples, com alguns comandos (tags), você criar uma página.
Existem outras linguagens que podem auxiliar o HTML (no qual, neste tutorial, não entraremos em detalhes) como: JavaScript, VBScript, XML etc.
Neste tutorial, você aprenderá desde como começar (mesmo que você não saiba absolutamente nada), até alguns comandos mais avançados.
Se você já tiver alguma noção do tema ou simplesmente quer tirar alguma dúvida, você pode "pular" algum tópico que achar desnecessário.
Para que você possa entender um tópico, faz-se extremamente necessário que você repita os exemplos em um novo arquivo em branco. Se por acaso você fizer alguma alteração num arquivo, obviamente, você tem que salvar e se ele ja estiver aberto pelo Navegador (Mozilla, Internet Explorer, Opera etc.), não se esqueça de dar um Reload, apertando no botão Reload/Atualizar ou abrindo novamente o arquivo.
É importante entender que este texto deverá servir somente como guia, que você não conseguirar assimilar os dados sem colocá-los em prática. Uma das melhores formas, é você salvar uma página qualquer na internet, e "espiar" os seu código, fazer as mudanças que quizer, para ficar mais "íntimo" do HTML.

Sumário
1.1 - Programas necessários

Para começar a contruir um arquivo HTML, serão necessários apenas dois programas, que normalmente são encontrados em qualquer computador.
O primeiro é o Notepad (Bloco de Notas), que é onde serão inseridos os comandos para a criação. Pode ser utilizado qualquer outro editor de texto (Word, StarOffice etc.), mas é recomendável que se use o Bloco de Notas pela sua simplicidade e facilidade de uso.
O segundo é qualquer navegador; pode ser o Internet Explorer, Netscape Navigator, Mosaic, Opera etc. Neste, será exibido o seu trabalho feito no editor de texto que você preferir.

Sumário
1.2 - Extensões dos arquivos

Em um arquivo com códigos HTML, as extenções utilizadas, normalmente são: "htm" e "html"; as duas fazem o mesmo efeito.
Existem outros tipos, como: "dhtml", "xml", "shtml", que não são exatamente a linguagem que estaremos abordando aqui.
Para salvar um arquivo criado no Notepad, vá no menu "Arquivo", "Salvar"; depois complete o campo "Nome do arquivo:" e na opção (logo abaixo do anterior) "Salvar com o tipo:", selecione "Todos os arquivos (*.*)".
Depois que for salvo, pode abrí-lo pelo Windows Explorer (se você estiver utilizando o Windows) ou diretamente no seu navegador, utilizando, normalmente, o menu "Arquivo" e "Abrir".

Sumário
1.3 - Estrutura do arquivo

Os comandos utilizados nesse tipo de programação são do seguinte formato: "<COMANDO>", ou seja, está entre os símbolos "menor que" e "maior que". Ex.: <HTML>, <TITLE>, <BR> etc.
Quando se escreve esse comando, não é levado em conta se você o faz em letras maiúsculas, minúsculas ou até mesmo misturadas entre maiúsculas ou minúsculas. Ex.: <BODY>, <body>, <BoDy>, <bOdY>. Isso quem determinará é você.
A grande maioria dos comandos é "fechada" com o mesmo comando, segundo que esse tem uma barra logo após o sinal de "menor que". Ex.: </PRE>, </FONT>, </TABLE> etc. Com algumas exceções.
Em alguns tipos de tags, podem haver atributos (detalhes) que são inseridos ao lado do sinal de "maior que (>)" acompanhados da igualdade (=) e, preferencialmente com aspas. Ex.: <FONT FACE="Arial" SIZE="2">, <A HREF="arquivo.html">. Entraremos em detalhes mais tarde.

Sumário
2.0 - Comandos básicos

Inicialmente é usado o comando "<HTML>" para "começar" um arquivo e para terminá-lo, é usado o </HTML>.
O "<HEAD>", que é fechado por "</HEAD>", é usado normalmente para inserir tags mais avançadas, e ele não é necessariamente "indispensável", ou seja, você nem sempre precisa utilizá-lo.
Para colocar o título do site (onde fica o nome do navegador), utiliza-se "<TITLE>" e "</TITLE>".
E por último, mas não menos importante, o "<BODY>" ("</BODY>"), que é onde realmente se inserem quase todos os tipos de comandos.
Vamos a alguns exemplos; nestes, você pode copiar (entre as linhas "---") e colar em um arquivo separado para vê-lo funcionar (lembrando dos passos iniciais para criar um arquivo, salvá-lo, etc.).

Sumário
Ex. 2.0.1:

<HTML>
<TITLE>Meu site em HTML</TITLE>
<BODY>
Aqui é inserido o texto e os comandos do seu site.
</BODY>
</HTML>

Sumário
Ex. 2.0.2:

<HTML>
<HEAD>
</HEAD>
<TITLE>Meu site em HTML</TITLE>
<BODY>
Aqui são inseridos os textos e comandos do site.
</BODY>
</HTML>

Você pôde notar que, na prática, não houve diferença entre o primeiro e o segundo exemplo. Isso aconteceu porque, como foi dito, a tag "<HEAD>" é utilizada para inserir comandos mais avançados, e como, nesse caso, não foi inserido nenhum, ele ficou "inútil".

Sumário
2.1 - <BODY>

Entre os tags <BODY> e </BODY> é onde será colocado todos os comandos do documento. Este comando é o que define as cores padrão do arquivo e outros detalhes com alguns atributos:
BACKGROUND define uma imagem de fundo que você queira colocar. Deve ser um arquivo ".gif" ou ".jpg";
BGCOLOR a cor hexadecimal (explicada mais adiante, tópico 3.0) de fundo;
TEXT é a cor padrão do texto;
LINK define a cor do link (texto), também em hexadecimal. Um link é uma imagem ou um texto que leva a outro arquivo ou documento;
ALINK é a cor do link enquando estiver sendo pressionado;
VLINK é a cor do link visitado.
TOPMARGIN determina o espaço em branco no topo do arquivo, tendo valores a partir de zero, com números inteiros, ex.: 0, 1, 2, 3 etc;
RIGHTMARGIN faz o mesmo efeito que o descrito acima, com a diferença de determinar a margem da direita;
LEFTMARGIN é a margem da esquerda.

Sumário
2.2 - Comandos mais importantes

Na formatação do documento, ou seja, alinhamento, quebra de linha, etc. São utilizados alguns comandos específicos, que veremos a seguir:
Quebra de linha, ou seja, mudança de uma linha para outra, é utilizado o comando "<BR>", que não é fechado, ou seja, não existe "</BR>". Ele é normalmente colocado no final da linha que você quer "quebrar" e, apesar de ser utilizado principalmente na formatação de texto, tem outras utilidades que serão abordadas mais adiante. O <P> é similar (fechado por "</P>").
Para alinhar um objeto ou texto para a esquerda, centro ou direita, são utilizados: "<DIV ALIGN="LEFT">" fechado por "</DIV>", "<DIV ALIGN="CENTER">" ou simplesmente "<CENTER>", fechado respectivamente por "</DIV>" ou "</CENTER>" e "<DIV ALIGN="RIGHT">, que, como os outros, é terminado por "</DIV>". O comando "<DIV>" pode ser substituído por "<P>", onde são utilizados os mesmos atributos. Também existe uma tag de alinhamento que é utilizada somente para textos, e será explicada mais adiante.
Existe também uma barra divisora, "<HR>" não tem comando para fechá-la, e é bem útil em alguns casos. Seus atributos são "COLOR", "SIZE" e "WIDTH"; que são respectivamente para mudar a cor, a espessura e a largura. A cor é codificada no formato hexadecimal iniciado por "#" (que será explicado com mais detalhes mais adiante); a espessura (SIZE) é determinada por números como: 1, 2, 3, 4, 5 etc. Obviamente, quanto maior o número, maior a espessura. E a largura pode ser determinada por pixels (pontos; mais recomendado) ou porcentagem. Ex.: <HR COLOR="#E10B0B" SIZE="3" WIDTH="300">, <HR WIDTH="70%">, <HR> etc.
Seguiremos com alguns exemplos, lembrando que para serem utilizados, devem ser colocados entre as tags <BODY> e </BODY>, como já foi explicado anteriormente.

Sumário
Ex. 2.2.1:

<BR><BR><BR><BR><BR>
<DIV ALIGN="LEFT">Este é o primeiro parágrafo. Está sendo alinhado para a esquerda.</DIV><BR><BR>
<HR SIZE="3" WIDTH="50%">
<DIV ALIGN="RIGHT">Este é o primeiro parágrafo. Está sendo alinhado para a direita.</DIV><BR><BR>
<P>Este é o terceiro parágrafo</P>

Sumário
Ex. 2.2.2:

<CENTER>Este texto está centralizado!</CENTER><BR><BR><BR><BR>
Quero colocar três barras, uma após a outra, em três cores diferentes:
<HR COLOR="#FF5555"><BR><BR>
<HR COLOR="#55FF55"><BR><BR>
<HR COLOR="#5555FF">

Sumário
2.3 - Formatação do documento

Para colocar a fonte, o tamanho e a cor que você quizer no texto, você utilizará principalmente dois comandos, que poderão ser associados aos do tópico anterior.
<Hn> é onde coloca-se o cabeçálho do seu documento, ou seja, os títulos. Nesse caso, o "n" deverá ser substituído por um número maior ou igual a 1 (um) e menor ou igual a 6 (seis). Ex.: <H1>Título grande</H1>, <H4>Título intermediário</H4>, <H6>Título pequeno</H6> etc.
Outro que poderá ser utilizado é o "<FONT>" (fechado por </FONT>) e é muito mais detalhado que o primeiro. Dentro deste, poderão ser utilizados alguns atributos, como "FACE"; neste determina-se as fontes que você gostaria de utilizar, ordenando-as pela preferência; caso não exista a primeira fonte no seu computador, a segunda será utilizada, e assim respectivamente. O "COLOR" (hexadecimal), "SIZE" (entre 1 e 6) e "STYLE", que é uma alternativa melhor para determinar o tamanho da fonte, onde, nesse caso, os números não serão utilizados de 1 a 6, mas sim, no formato que você já utiliza no seu editor de texto (Ex.: Word). Ex.: <FONT FACE="Arial, Verdana, Tahoma" COLOR="#693787" SIZE="3">Texto</FONT>, <FONT FACE="Times New Roman" STYLE="font size: 13px; color: #D70AIE>Texto</FONT>, <FONT FACE="Courier New, Courier" SIZE="2">Texto</FONT> etc.
Também é possível colocar o texto como negrito, itálico, sublinhado e em "máquina-de-escrever"; os comandos são respectivamente: "<B>", "<I>", "<U>" e "<TT>" e fechados por "</B>", "</I>", "</U>" e "<TT>". Ex.: <B>Negrito</B>, <I></U>Itálico e Sublinhado</U></I> etc.

Sumário
Ex. 2.3.1:

<CENTER><H1>Título</H1></CENTER>
<FONT FACE="Verdana, Tahoma, Arial" STYLE="FONT-SIZE: 10px">Assim, eu coloco o meu texto na fonte "Arial" e com o tamanho (STYLE) 10.</FONT><BR><BR>
Você prefere <B>negrito</B>, <I>itálico</I> ou <U>Sublinhado</U>?

Sumário
Ex. 2.3.2:

<DIV ALIGN="RIGHT"><H4>Título à direita</H4></DIV><BR><BR>
<FONT FACE="Courier New, Courier">
Pode-se usar também o texto com <I><U>Itálico e Sublinhado</U></I> ao mesmo tempo<BR><BR>
<TT>Aqui escreve-se como em uma máquina de escrever.</TT>
</FONT>

Sumário
2.4 - Utilizando imagens

Apenas um comando é necessário para colocar uma imagem no seu documento, obviamente, com uma série de atributos.
Os principais tipos de arquivos que poderão ser utilizados são ".gif" e ".jpg", e os primeiros podem ser animados. Lembrando que a imagem deve estar na mesma pasta do documento HTML.
O comando é <IMG SRC="arquivo.gif"> e não são fechados.
Os principais atributos são: WIDTH, largura da imagem; HEIGHT, altura da imagem; BORDER, a largura da borda da figura; BORDERCOLOR, cor em hexadecimal; e ALT, texto que aparecerá quando o mouse for "estacionado" em cima da imagem.
WIDTH e HEIGHT são medidos em pixels. Não são extremamente importantes, mas as vezes, é importante que se utilize.
BORDER é medido em números a partir de 1. BORDERCOLOR, como já foi explicado, com a cor em hexadecimal.
ALT com apenas o texto.

Sumário
Ex. 2.4.1:

Sumário
Ex. 2.4.2:

Sumário
2.5 - Texto pre-formatado

Os textos pre-formatados são de certa forma práticos, por que não é preciso adicionar algum comando na formatação do mesmo. Isso é feito através do comando <PRE>
Você digita quantos espaços e quebra quantas linhas quizer.

Sumário
Ex. 2.5.1:

<PRE>
Estados, siglas e capitais do Nordeste do Brasil:

Estado        Sigla  Capital
___________________  _____  ____________
Alagoas              SE     Maceió   
Bahia                BA     Salvador
Ceará                CE     Fortaleza
Maranhão             MA     São Luís
Paraíba              PB     João Pessoa
Pernambuco           PE     Recife
Piauí                PI     Teresina
Rio Grande do Norte  RN     Natal
Sergipe              SE     Aracaju
</PRE>

Sumário
3.0 - Links

Links são, como o nome já diz, atalhos, ou seja, é uma imagem ou frase/texto que você clica e este te leva para outro arquivo, que pode ser um HTML ou não.
O comando é o "<A>" fechado por "</A>", mas existe um atributo extremamente importante, que é o "HREF", onde você vai definir para qual arquivo o link irá.
Outro atributo importante é o "ALT", que da mesma forma que na imagem, mostrará uma descrição quando o mouse estiver estacionado sobre o link.
Você também poderá utilizar o "STYLE", que foi explicado no tópico 2.2.

Sumário
3.1 - Arquivos locais

Para "linkar" arquivos locais, o comando é o mais simples possível, apenas seguir as explicações anteriores.
Para arquivos em diretórios (pastas) anteriores, por exemplo, outros níveis de pastas. Se a pasta onde está o seu documento HTML está dentro de outra, como você faria para voltar ao primeiro diretório para fazer um link em um arquivo de outra pasta?
Respondendo a pergunta anterior; para voltar um diretório, adiciona-se dois pontos horizontais (..) e uma barra(/) à esquerda do nome do arquivo para voltar um nível, e para cada pasta adicional, adiciona-se um ponto.

Sumário
Ex. 3.1.1:

<A HREF="arquivo.html" ALT="Descrição do Link" SYLE="COLOR:#FF0000">Este link é simples, com arquivos na mesma pasta</a>

Sumário
Ex. 3.1.2:

Imaginando que o arquivo HTML esteja no diretório "raiz/eu/internet/sites", (caso o sistema operacional seja o Windows, esse diretório raiz pode ser "C:", "D:" e assim respectivamente) e também exista o "raiz/eu/figuras/". Como eu faria para criar um atalho para o suposto arquivo "eu_com_sete_anos.jpg" contido na segunda pasta citada?
Primeiro você tem quem voltar dois níveis, um para a pasta "internet" e outro para "eu", sendo assim, seria necessário adicionar três pontos horizontais (...); dois para o primeiro nível, e um para o segundo; e a barra. Depois de adicionados os pontos, seria colocado "figuras/" e depois o nome do arquivo "eu_com_sete_anos.jpg". Sendo assim, o comando ficaria: "<A HREF=".../figuras/eu_com_sete_anos.jpg">eu com sete anos</a>". Certo?

Sumário
3.2 - URLs

Uma URL é nada mais que um endereço para um arquivo ou um servidor.
Para se escrever uma URL, se utiliza o seguinte estilo: "tipo://dominio.do.servidor/pasta/arquivo.extenção". Na prática, vamos a um exemplo: "http://www.greenpeace.org.br/images/logo_gp.gif". Ele não precisa necessariamente ter todos os componentes, pode ser apenas o tipo e nome do servidor.
Alguns tipos de URL são: http (utilizado nos sites, www); ftp; gopher; news; telnet.

Sumário
Ex. 3.2.1:

Não podemos esquecer, de forma nenhuma, que para criar links para outros sites, deverá, sem exceção, ser adicionado o "http://" antes do "www".

Sumário
3.3 - Seções no arquivo

Em alguns momentos, precisamos colocar os links para partes da mesma página. Se você estiver num lugar, e quiser criar uma âncora (link) para um determinado lugar dez linhas abaixo de onde você está, por exemplo.
Nesses casos, você tem que determinar o nome do lugar que você quer que o usuário seja enviado caso clique no link, para fazer isso, você pode usar o atributo NAME no comando <A>. Depois disso, é só criar o comando normalmente para fazer o atalho, não esquecendo de adicionar o "#".

Sumário
Ex. 3.3.1:

Menu da pagina:<BR><BR><BR>
<A HREF="#secao1">Seção 1</A><BR><BR>
<A HREF="#secao2">Seção 2</A><BR><BR>
<A HREF="#secao3">Seção 3</A><BR><BR><BR><BR><BR><BR>
<A NAME="secao1">Seção 1<BR><BR>
<A NAME="secao2">Seção 2<BR><BR>
<A NAME="secao3">Seção 3

Se quizer ir direto a uma determinada seção em outro arquivo HTML, também é possível. Cria-se o link normalmente, e logo depois do nome do arquivo, adiciona-se o "#" e o nome da seção.

Sumário
Ex. 3.3.2:

<A HREF="arquivo2.html#secao3">Arquivo 2 - Seção 3</A>

Sumário
3.4 - E-mail

Para que alguem mande um e-mail para você apenas clicando no endereço indicado na página, você adiciona o "mailto:".

Sumário
Ex. 3.4.1:

<A HREF="mailto:voce@seuprovedor.com.br">mande um e-mail para voce@seuprovedor.com.br</A>

Sumário
3.5 - Imagens

Exatamente da mesma forma que um comando normal, uma imagem com link é possível apenas ao invés de colocar o nome da âncora, coloca-se a tag da imagem que você quer colocar.

Sumário
Ex. 3.5.1:

Sumário
4.0 - Caracteres especiais

Em alguns navegadores e editores HTML mais antigos, não são suportados alguns caracteres que são bastantes comuns a nós, como alguns acentos (agudo, circunflexo, trema), simbolos matemáticos (maior e menor que, grau) e outros simbolos (libra, copyright, centavo).
Os "comandos" para criar caracteres especiais, são, sem exceção, começados por "&" e terminados por ";". O mais usual de todos é o espaço adicional, visto que, num documento HTML só é permitido um espaço, e com recursos normais, você não conseguiria adicionar um ou mais; para utilizar este recurso, você adiciona " ".
Obviamente que você não precisa aprender todos esses símbolos, seria interessante, mas não obrigatório que você aprendesse alguns dos símbolos que seriam utilizados freqüentemente por você, como o espaço e alguns acentos.
Existem dezenas de outros caracteres que poderiam ser citados aqui, porém, por serem esses os mais importantes, serão explicados apenas vinte e um.
Não faz-se necessária a criação de outros exemplos além do "3.0.1" nesse tópico, já que os outros seguem exatamente a mesma regra.

Sumário
Ex. 4.0.1:

Eu gostaria de separar mais as palavras.

Sumário
4.1 - Acentos e formatação

O formato padrão para esses "comandos" é &xy;, onde "x" é a letra que se pretende acentuar, e "y" é o complemento correspondente a cada tipo de acento.
&xacute; corresponde ao acento agudo;
&xgrave; adiciona um acento grave (ou crase);
&xcirc; é o acento circunflexo;
&xtilde; o til, que no português é adicionado nas letras "a" e "o", e no espanhol, também na letra "n";
&xcedil; a cedilha, nesse caso, no lugar do "x", obrigatoriamente é adicionada a letra "c", já que não existe outra letra com cedilha;
&xuml; é, como não poderíamos esquecer, o trema;
& é o "e" internacional, que corresponde à mesma letra na maioria das linguas;
§ corresponde à seção;
¬ como pode ser percebido, indica negação
¶ é o parágrafo;
· é o ponto no meio da linha.

Sumário
4.2 - Símbolos matemáticos

Assim como acentos, alguns simbolos matemáticos podem faltar em alguns programas.
° é correspondente ao grau;
< e > os simbolos de menor que e maior que, respectivamente;
± reproduz o "mais ou menos";
« e » são os "maior e menor que" duplos;
µ como o nome já diz, significa micro;

Sumário
4.3 - Símbolos financeiros e autorais

© é "Copyright";
® marca registrada;
¢ significa centavo;
£ á a famosa Libra Esterlina, ou pound (em inglês);
¥ uma moeda oriental, o Yen.

Sumário
5.0 - Cores hexadecimais

Como já foi dito, no HTML, utilizamos cores no formato hexadecimal. Tentarei explicar aqui como funciona, para facilitar o seu, alguns exemplos serão utilizados.
Assim como o próprio nome diz, é composto por seis (hexa) caracteres. Ex.: #000000, #FFFFFF. O código deve estar antecedido de um "#"; Os dois primeiros caracteres são referentes à cor vermelha, o terceiro e o quarto à cor verde, e o quinto e sexto ao azul. A combinação dessas cores, resulta em uma nova; são possíveis milhões de combinações.
Utilizando os caracteres "0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F" você pode compor a cor. O "0" escurece a cor e o "F" deixa a mesma mais clara.

Branco: #FFFFFF
Cinza: #777777
Preto: #000000
Vermelho: #FF0000
Verde: #00FF00
Azul: #0000FF

Como você pode ter notado, quando todos os números são iguais, a cor pode ser: branco, cinza ou preto; variando os tons de acordo com a mistura que você fizer.
Quando você retira coloca os tons de vermelho como "FF" e os outros como "0000", a cor fica sendo o vermelho, e isso serve para todas as outras.
Veja algumas das principais cores abaixo:

Azul Claro: #7D87D7
Azul Marinho: #235082
Azul Petróleo: #237D8C
Bege: #AFAF96
Lilás: #913C91
Marrom: #5F3750
Rosa: #D296AF
Rosa Choque: #D700D7
Roxo: #503C91
Salmão: #DC7873
Verde Claro: #A0D2A0
Verde Escuro: #375550

Enfim, para conseguir dominar a técnica, basta praticar. Crie novos tons; lembrando que as cores devem ter seis caracteres que devem variar de 0 a 9 e de A a F.

Sumário
6.0 - Tabelas

Na minha opinião, a tabela é o recurso mais importante do HTML. Você pode criar todo tipo de menus entre outra coisas; basta usar a criatividade.
O comando principal é o "<TABLE>", mas tem alguns outros que serão mostrados a seguir.

Sumário
6.1 - Colunas vs. Linhas

Como pode ser obviamente notado, a tabela é composta por colunas e linhas. As colunas são representadas pelo tag "<TR>" e as linhas pelo "<TD>". Veja no exemplo uma tabela com quatro colunas e duas linhas.

Sumário
Ex. 6.1.1:

<TABLE>
<TR><TD>Linha 1 e Coluna 1</TD><TD>Linha 1 e Coluna 2</TD><TD>Linha 1 e Coluna 3</TD><TD>Linha 1 e Coluna 4</TD></TR>
<TR><TD>Linha 2 e Coluna 1</TD><TD>Linha 2 e Coluna 2</TD><TD>Linha 2 e Coluna 3</TD><TD>Linha 2 e Coluna 4</TD></TR>
</TABLE>

Sumário
6.2 - Atributos

Existem alguns atributos nas tabelas para auxiliar a sua formatação, como o HEIGHT, WIDTH, BGCOLOR, BORDER etc.
HEIGHT, assim como nos outros comandos, determina a altura em pixels;
WIDTH é exatamente o contrário do anterior; determina a largura;
BGCOLOR é utilizado para modificar a cor de fundo de toda a tabela ou apenas de uma célula;
BORDER determina a espessura da linha da tabela; devem ser números inteiros maiores ou iguais a zero. Ex.: 0, 1, 2, 3 etc.
BORDERCOLOR é a cor da linha da tabela em código hexadecimal.
CELLSPACING é o espaço entre as células. Tambem definido por números inteiros maiores ou iguais a zero.
Veja o exemplo abaixo em uma tabela de células com cores variadas. Três linhas e três colunas.

Sumário
Ex. 6.2.1:

<TABLE BORDER="1" BORDERCOLOR="#5A3796" WIDTH="500" HEIGHT="200" CELLSPACING="5">
<TR><TD BGCOLOR="#737373">CÉLULA</TD><TD BGCOLOR="#937373">CÉLULA</TD><TD BGCOLOR="#B37373">CÉLULA</TD></TR>
<TR><TD BGCOLOR="#737373">CÉLULA</TD><TD BGCOLOR="#739373">CÉLULA</TD><TD BGCOLOR="#73B373">CÉLULA</TD></TR>
<TR><TD BGCOLOR="#737373">CÉLULA</TD><TD BGCOLOR="#737393">CÉLULA</TD><TD BGCOLOR="#7373B3">CÉLULA</TD></TR>
</TABLE>

Sumário
7.0 - Frames

Frames são como tabelas que dividem a tela em alguns HTMLs diferentes. Por exemplo; você cria um documento para o menu, e outro para a página principal. Você pode colocar o menu em cima (uma parte da tela) e o outro na parte de baixo.
Ele é muito útil para criar menus, já que você não precisa colocar as seções em cada arquivo, basta em um.
O comando principal do frame é o "<FRAMESET>", que é fechado por </FRAMESET>. Ele tem alguns atributos, por exemplo: você quer colocar um menu e a página principal do site, um em cima do outro (linha), você usa o "ROWS", se forem colunas, você usa o "COLS".
Você deve nomear as partes do frame para que ele funcione corretamente com o atributo "NAME". Para que o link que você clicou na parte "FRAME1" seja aberto na "FRAME2", no comando do link você deve adicionar o atributo 'NAME="FRAME2"'. Ex.: <A HREF="teste.html" NAME="FRAME2">Teste</a>.
Vamos ao exemplo para você conseguir visualizar melhor. Antes de mais nada, é importante lembrar que os comandos do frame são colocados num arquivo a parte e que você precisa de pelo menos mais dois (além desse) para que funcione, nesse caso, crie dois arquivos: "menu.html" e "principal.html". Cole o exemplo completo em um arquivo vazio para vê-lo funcionar.

Sumário
Ex. 7.0.1:

<HTML>
<TITLE>Frame</TITLE>
<FRAMESET COLS="30%,70%">
<FRAME SRC="menu.html" NAME="FRAME1">
<FRAME SRC="principal.html" NAME="FRAME2">
</FRAMESET>
</HTML>

Você ainda pode criar um frame dentro de outro.

Sumário
Ex. 7.0.2:

<HTML>
<TITLE>Frame</TITLE>
<FRAMESET ROWS="100,*">
<FRAMESET COLS="50%,*">
<FRAME SRC="menu1.html" name="MENU1">
<FRAME SRC="menu2.html" name="MENU2">
</FRAMESET>
<FRAME SRC="principal.html" name="PRINCIPAL">
</FRAMESET>
</HTML>

Nesse caso, faz-se necessário que você tenha os arquivos "menu1.html", "menu2.html" e "principal.html" prontos e no mesmo diretório do arquivo de frame que você está criando.
O tamanho do frame pode ser definido por porcentagem (quando tem o %) e por pixels (quando não tem o %). No caso, em "<FRAMESET ROWS>" está o tamanho da primeira e da segunda parte do frame respectivamente.
Se você usa um asterisco no lugar de um número ao definir o tamanho do frame, quer dizer que todo o espaço restante é para essa parte, ou seja, defina com um número uma coluna ou linha, e na outra, pode ser usado o asterisco. Isso pode ser visto no exemplo acima.

Sumário
8.0 - Formulários

Formulários (forms) são comandos utilizados em anexo a outras linguagens de programação como ASP e PHP, ou simplesmente para enviar um e-mail.
Com formulários você pode criar "campos" onde o usuário digita as informações necessárias para enviar uma mensagem, por exemplo, sem a necessidade de um programa de e-mail.
As tags "<FORM>" e "</FORM>" são usados para criar os "forms", mas, obviamente, com uma série de atributos e outros comandos.

Sumário
8.1 - Texto

Para criar um campo para texto de uma linha só, você usa o atributo "TEXT" junto com o comando <INPUT>, que não é fechado.
Os atributos utilizados para esse tipo de "form" são:
NAME identifica o nome do elemento, que será mostrado, por exemplo, quando um e-mail for enviado para você através do mesmo;
SIZE diz a largura do campo, que é definida em números inteiros maiores que zero;
MAXLENGTH especifica o número máximo de caracteres que o usuário poderá digitar;
VALUE inclui um texto (ou frase) no campo sem que usuário digite nada.

Sumário
Ex. 8.1.1:

<FORM>
Segundo o exemplo, o usuário poderia digitar seu e-mail aqui:<BR>
<INPUT TYPE="TEXT" NAME="SEU_EMAIL" SIZE="50" VALUE="seu.e-m@il.aqui"><BR><BR>
O usuário deveria digitar o nome aqui, para ser enviado no formulário:<BR>
<INPUT TYPE="TEXT" NAME="SEU_NOME" SIZE="50" VALUE="Digite seu nome aqui" MAXLENGTH="100"><BR><BR>
</FORM>

Sumário
8.2 - Senha

Em alguns casos, faz-se necessária a inserção de senhas em um formulário. Para não comprometer a privacidade do usuário, essa senha pode ser camuflada com asteriscos (*).
O atributo para este tipo específico de form é PASSWORD e ele se parece muito com o primeiro tipo. Veja o exemplo:

Sumário
Ex. 8.2.1:

<FORM>
O usuário poderia digitar a senha no espaço abaixo, e ficaria da seguinte forma:<BR><BR>
<INPUT TYPE="PASSWORD" NAME="SENHA" SIZE="15" MAXLENGHT="15" VALUE="SENHA_SECRETA">
</FORM>

Sumário
8.3 - Comentário

Com esse tipo de formulário, poderia ser inserido um comentário ao mesmo. É usado o comando "<TEXTAREA>", fechado por "</TEXTAREA>".
Os atributos "ROWS" e "COLS" significam respectivamente, linhas e colunas.

Sumário
Ex. 8.3.1:

<FORM>
<TEXTAREA NAME="COMENTARIO" ROWS="5" COLS="70" WRAP="VIRTUAL">
Aqui você digita o que você quizer.

Como se fosse um texto normal.
Não é necessário o uso de nenhum recurso HTML.
</TEXTAREA>
</FORM>

Sumário
8.4 - Opção
Nesse caso, poderão ser dadas algumas opções de resposta ao usuário, onde, no caso, ele escolheria uma para ser enviada.
O atributo utilizado é "RADIO" e existe também o "CHECKED", onde, se você quizer que uma opção já esteja marcada, você o adiciona.

Sumário
Ex. 8.4.1:

<FORM>
Você mora em que continente?<BR><BR>
<INPUT TYPE="RADIO" NAME="CONTINENTE" VALUE="AFRICA"> África<BR>
<INPUT TYPE="RADIO" NAME="CONTINENTE" VALUE="AMERICA"> América<BR>
<INPUT TYPE="RADIO" NAME="CONTINENTE" VALUE="ANTARTIDA" CHECKED> Antártida<BR>
<INPUT TYPE="RADIO" NAME="CONTINENTE" VALUE="ASIA"> Ásia<BR>
<INPUT TYPE="RADIO" NAME="CONTINENTE" VALUE="EUROPA"> Europa<BR>
<INPUT TYPE="RADIO" NAME="CONTINENTE" VALUE="OCEANIA"> Oceania
</FORM>

Sumário
8.5 - Checado

É apresentado para você uma afirmação, você deverá marcar caso isso for verdadeiro, ou não.
Esté muito parecido com o anterior, contém também o atributo "CHECKED" e é formado pelo "CHECKBOX".

Sumário
Ex. 8.5.1:

<FORM>
Quais desses idiomas você fala?<BR><BR>
<INPUT TYPE="CHECKBOX" NAME="IDIOMAS" VALUE="ESPANHOL"> Espanhol<BR>
<INPUT TYPE="CHECKBOX" NAME="IDIOMAS" VALUE="MANDARIM"> Mandarim<BR>
<INPUT TYPE="CHECKBOX" NAME="IDIOMAS" VALUE="PORTUGUES" CHECKED> Português<BR>
<INPUT TYPE="CHECKBOX" NAME="IDIOMAS" VALUE="RUSSO"> Russo<BR>
<INPUT TYPE="CHECKBOX" NAME="IDIOMAS" VALUE="TUPY_GUARANY" CHECKED> Tupy Guarany
</FORM>

Sumário
8.6 - Menu de seleção

É o tipo de menu onde aperta-se um "botão" e aparecerá uma lista de opções, no estilo Windows.
O comando principal é o "<SELECT>" e "</SELECT>", com o subcomando "<OPTION>" e "</OPTION>".
Outro atributo importante é o "SELECTED", que marca uma opção, assim como o "CHECKED" dos dois tópicos anteriores.

Sumário
Ex. 8.6.1:

<FORM>
Seu grau de escolaridade é:<BR><BR>
<SELECT NAME="ESCOLARIDADE">
<OPTION VALUE="FUNDAMENTAL_INC">Ensino Fundamental Incompleto<BR>
<OPTION VALUE="FUNDAMENTAL_COM">Ensino Fundamental Completo<BR>
<OPTION VALUE="MEDIO_INC">Ensino Médio Incompleto<BR>
<OPTION VALUE="MEDIO_COM" SELECTED>Ensino Médio Completo<BR>
<OPTION VALUE="SUPERIOR_INC">Ensino Superior Incompleto<BR>
<OPTION VALUE="SUPERIOR_COM">Ensino Superior Completo
</FORM>

Sumário
8.7 - Botões

Se não a mais importante, o botão é uma das ferramentas mais importantes de um formulário, já que, sem ele, ficaria impossível enviá-lo.
Existem dois tipos, o "RESET" e "SUBMIT". O primeiro serve apenas para reiniciar os dados do formulário, ou seja, apagar o que já foi preenchido; e o segundo, apenas para encaminhá-lo.
O comando utilizado também é o "<INPUT>".

Sumário
Ex. 8.7.1:

<FORM>
Dados pessoais:<BR><BR><BR>
Nome Completo: <INPUT TYPE="TEXT" NAME="NOME" SIZE="50" VALUE="Digite seu nome aqui"><BR><BR>
Sexo: <INPUT TYPE="RADIO" NAME="SEXO" VALUE="FEMININO" CHECKED> Feminino <INPUT TYPE="RADIO" NAME="SEXO" VALUE="MASCULINO"> Masculino<BR><BR>
Idade:
<SELECT NAME="IDADE">
<OPTION VALUE="-18">Menor que 18</OPTION>
<OPTION VALUE="18-30" CHECKED>Entre 18 e 30</OPTION>
<OPTION VALUE="30-50">Entre 30 e 50</OPTION>
<OPTION VALUE="50-70">Entre 50 e 70</OPTION>
<OPTION VALUE="+70">Maior que 70</OPTION>
</SELECT><BR><BR>
Você usa a internet em:
<INPUT TYPE="CHECKBOX" NAME="INTERNET" VALUE="CASA" CHECKED> Casa
<INPUT TYPE="CHECKBOX" NAME="INTERNET" VALUE="ESCOLA" CHECKED> Escola
<INPUT TYPE="CHECKBOX" NAME="INTERNET" VALUE="TRABALHO"> Trabalho<BR><BR>
Fale um pouco sobre você:<BR>
<TEXTAREA NAME="VOCE" ROWS="5" COLS="70" WRAP="VIRTUAL">
Fale aqui o que você acharia
interessante mencionar sobre você.
</TEXTAREA><BR><BR>
<INPUT TYPE="RESET" VALUE="Limpar"> <INPUT TYPE="RESET" VALUE="Enviar">
</FORM>

Sumário
8.8 - Informações complementares

Essas informações serão importantes caso você deseje enviar o formulário criado.
Para que o mesmo seja enviado para um e-mail ou até para um script, deverão ser adicionados os atributos "ACTION" e "METHOD". O primeiro deverá conter o endereço para onde ele será enviado, e o segundo, deverá conter o termo "POST".

Sumário
Ex. 8.8.1:

<FORM ACTION="algum@e-mail.qualquer.com.br" METHOD="POST">
Neste espaço seriam adicionados todos os campos que você necessitar.
</FORM>

Se você experimentou testar o exemplo anterior, você pode ter percebido que o e-mail chegou para você meio "embaralhado". Isso deve-se porque essa não é a melhor forma para utilizar um formulário (diretamente para o e-mail).
A melhor forma para fazê-lo é conseguindo um script de FORM MAIL, ou seja, você enviará o a mensagem para o formulário, e este, organizadamente, enviará para o e-mail solicitado.
Você pode conseguir mais informações sobre o FORM MAIL em "http://www.wmonline.com.br/".

Sumário
Ex. 8.8.2:

<FORM ACTION="http://www.servidor.com.br/scripts/algum_formmail_que_voce_conseguir.php" METHOD="POST">
Da mesma forma que no primeiro exemplo, aqui serão incluidos todos os elementos que você precisar.
</FORM>

Sumário
9.0 - Notas do autor

A primeira versão desse tutorial foi criada entre 8 de junho de 2002 e 7 de julho do mesmo ano, na cidade de Aracaju/SE - Brasil, por Tiago Passos (tj7@bigfoot.com - http://tiagopassos.cjb.net/).
O objetivo do Documento H.T.M.L. é mostrar ao webmaster (ou futuro webmaster) e webdesigner a linguagem aqui citada com o máximo de informações, desde o básico até o avançado gratuitamente para qualquer pessoa.
Procure a última versão deste, no site acima indicado.

Sites relacionados
http://www.mcli.dist.maricopa.edu/tut/
http://www.tela.bc.ca/tads/authoring/multimedia-tads-docs/latin2.htm