Nesta serie iremos criar uma home page hipotética. Na medida em que formos desenvolvendo a página, explicaremos os elementos utilizados e mostraremos o resultado parcial. Para um melhor aproveitamento, abra seu editor em outra janela do seu browser (se possível) e repita os exemplos apresentados ou faça a sua própria página.
 

Esta serie sobre HTML e baseada no tutorial HTML, cuja versão original foi desenvolvida por Helder L. S. da Rocha, como um trabalho voluntário, utilizando os recursos do LABCOM/DSC. Helder Rocha (helder@dsc.ufpb.br) Campina Grande, 27 de julho de 1995. Conforme licença cedia pelo autor eu o adaptei inserindo alguns novos recursos e informações atualizadas ao nosso contexto.
 

Então chega de papo e vamos ao que interessa.
 

Como Começar

Para tirar algum proveito deste tutorial, você deve saber o que é o WWW e uma homepage. Suponho também que você saiba usar algum browser (programa de navegação), como o IE ou Firefox (de outra forma como estaria lendo este artigo?), e um editor de texto.
 

Não é necessário um editor de texto avançado, o notepad esta de bom tamanho. Também não é necessário estar conectado à Internet. Para poder prever como vai ficar sua página, utilize o seu navegador padrão, este que esta utilizando para ler este artigo.
 

Embora você possa desenvolver sua homepage fora da Internet (ex: no seu micro, em casa), você deverá colocá-la depois em um provedor ligado à Internet para que outros possam acessá-la.

Há vários provedores que cedem espaço gratuito para publicar sua pagina basta procurar na net que com certeza ira encontrar. Sendo assim crie uma pasta em seu micro que servira como o diretório roto. Nela iramos colocar todos os arquivos necessários para desenvolvermos nossa Home Page. Este diretório poderá conter outras pastas, mas lembre-se para que seu site possa funcionar na web todo o conteúdo do diretório root devera ser enviado ao servidor web.
 

É possível desenvolver páginas HTML supersofisticadas usando um simples editor de texto, mas certamente não é a forma mais cômoda e produtiva. Existem vários tipos diferentes de editores e conversores para HTML que podem facilitar muito a criação ou transformação de informação para o WWW. Há basicamente três tipos de ferramentas:
 

- Editores HTML
- Macros para processadores de texto
- Conversores
 

Os editores HTML são as ferramentas que geralmente oferecem mais liberdade para a criação de páginas. Isto é importante, pois o HTML é um padrão em constante desenvolvimento e a cada dia surgem novos elementos. A maioria desses editores não oferece uma interface WYSIWYG e geralmente dependem de um browser para se ter uma idéia do resultado final.
 

As macros têm a vantagem de usar o ambiente de processamento de textos, que geralmente é familiar ao usuário. Permitem que se crie uma página HTML sem escrever uma linha sequer de HTML, e nem ver o código. Essa facilidade de uso tem o preço de não permitir o uso de recursos mais sofisticados da linguagem. Existem macros para diversos programas.
 

Finalmente, há os conversores, que permitem converter diversos formatos de texto para HTML como Word, RTF, etc. Em geral, são limitados. Quase sempre é necessário fazer alguma edição após a conversão, mas são extremamente úteis quando se tem muita informação em um formato diferente e deseja-se torná-la disponível rapidamente no WWW.
 

Fundamentos Básicos do HTML
 

HTML (HyperText Markup Language) é uma linguagem de marcação de texto utilizada para publicação na WEB. Consiste de rótulos que marcam trechos e blocos de texto que são utilizados por um visualizador HTML (ou browser) para formatar o documento e apresentá-lo na tela.
 

Como foi mencionado antes, para escrever HTML, não é necessário mais que um editor de textos. Pode-se usar, além do conjunto de caracteres básico do teclado, os caracteres do alfabeto ISO 8859-1 (ISO Latin-1). Desta forma, é possível escrever normalmente em português com acentos e cedilha, desde que seu editor de textos ou terminal permitam. Pode-se também, se necessário, utilizar o conjunto básico (US ASCII 7bit) e representar acentos, caracteres especiais e símbolos do alfabeto ISO Latin-1 usando seqüências de escape.
 

Esta parte abrange os seguintes tópicos:
                Representação dos Elementos
                Estrutura Hierárquica

Representação dos Elementos
 

Os elementos HTML são representados no texto através de rótulos (ou tags). O visualizador interpreta como rótulos todos os elementos HTML válidos que estejam entre < e >. Por exemplo: <BR> é interpretado como uma quebra de linha. <NHAC>, é ignorado e não aparece na página, pois não existe. Apesar de não aparecerem, elementos inválidos não devem ser usados para texto escondido. Existe uma marcação especial para comentários.
 

A maioria dos elementos HTML possui um rótulo inicial e um rótulo final, envolvendo o texto que é marcado por eles. A sintaxe básica
<Elemento> Texto marcado por Elemento </Elemento>
 

Observe que o rótulo de fechamento tem o mesmo nome que o rótulo inicial, mas é precedido por uma barra ("/"). Alguns elementos podem ter um ou mais atributos, que definem alguma característica especial. Os atributos, quando presentes, aparecem no rótulo inicial separados por espaços, logo após o nome do elemento.
 

Exemplos de elementos HTML com atributos:
 

<BODY BACKGROUND="backgrounds/papel-de-parede.gif">... corpo do documento ... </BODY>
 

define uma imagem de fundo, disposta em mosaico, para a página.
<table border> ... conteúdo e rótulos de tabela ... </table>
define uma borda para a tabela.
<hr noshadow width=50% size=10 align=left>
define uma linha horizontal sem sombra, com largura de 50% da página, 10 pixels de espessura e alinhada pela esquerda.
 

Os caracteres "<" e ">", por definirem o início e final dos rótulos, só podem ser impressos na tela do visualizador HTML se forem referenciados através de uma seqüência de escape. Esta seqüência é indicada por um "&" seguido de uma abreviação e um ponto-e-vírgula, indicando o final da seqüência. As principais seqüências de escape, necessárias para produzir "<", ">", "&" e aspas (quando necessário) são:
 

Toda a formatação da página é realizada exclusivamente com base na marcação do texto pelos elementos HTML. Somente através de elementos HTML pode-se quebrar uma linha, criar uma endentação, iniciar um novo parágrafo, etc. Qualquer formatação previamente realizada (exceto para texto rotulado com <PRE>) é ignorada. Espaços extras, tabulações, retornos, novas-linhas, etc. não são considerados. O exemplo a seguir ilustra esta característica:
Os três parágrafos...
 

... serão formatados da mesma maneira pelo visualizador e ficarão assim:

Também não importa se são utilizadas letras maiúsculas ou minúsculas para definir o rótulo, ou seja, tanto faz <BODY>, <body>, <Body> ou <bOdY>. Esta regra não vale, porém, para as URLs que podem ser referenciadas (entre aspas, geralmente) por atributos dentro dos rótulos.

Estrutura Hierárquica
A estrutura básica (mínima) de uma página HTML é a seguinte:
<!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" -->
<HTML>
        <HEAD>
                <TITLE> Descrição do documento </TITLE>
                        [elementos opcionais]
        </HEAD>
        <BODY>
                [texto e elementos HTML]
        </BODY>
</HTML>

A primeira linha: <!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" --> é um rótulo SGML que informa ao visualizador que ele deve interpretar o documento de acordo com a definição de documento (DTD) tipo HTML genérico, aceitando os rótulos que ele conhece e ignorando os rótulos que ele não conhece. A maioria dos browsers atuais assume essa definição por default, na ausência da declaração acima.
 

Muito coisa mudou desde a criação da web e atualmente utiliza-se muito o DOCTYPE XHTML do tipo transational ou restric, mas isso renderia outros tantos artigos.
 

O elemento <HTML>...</HTML> marca o início e o final do documento HTML. Deve conter duas sub-estruturas distintas: o cabeçalho, delimitado por <HEAD> e </HEAD>, e o corpo do documento, entre os rótulos <BODY> e </BODY>.
 

O bloco do cabeçalho, marcado por <HEAD> e </HEAD> pode conter informações sobre o conteúdo do documento utilizada para fins de indexação e organização. Não contém informação que será exibida na página.
 

<TITLE> é o único elemento obrigatório do bloco do cabeçalho. Deve conter o título do documento que aparece geralmente, fora da página, na barra de título do browser. O título deve conter informações que descrevam o documento. Não deve ser excessivamente longo nem muito curto a ponto de não conter informação suficiente. O seguinte exemplo é um bom título:
<TITLE>Tutorial sobre HTML: Introducao</TITLE>
enquanto que os dois seguintes são títulos ruins:
<TITLE>Introdução</TITLE>
<TITLE>Introdução ao HTML abrangendo recursos de listas, tabelas, formulários e interface CGI, com exemplos de utilização e exercícios. Abrange HTML 8.0 e Extensões do IE 5.0.

Escrito por fulano de tal em 31 de fevereiro de 2155. Blá blá bla...</TITLE>
 

O bloco marcado por <BODY> e </BODY> contém a parte do documento onde será colocada a informação que efetivamente será mostrada e formatada na tela pelo browser. Neste tutorial, todos os elementos que apresentaremos nas páginas a seguir, estarão dentro da estrutura de <BODY> (com exceção de <TITLE>, descrito acima, que fica em <HEAD>).
 

Agora que já sabe como um pagina HTML e estruturada faça um teste. Abra o bloco de notas e crie a mesma estrutura abaixo:
 

<HTML>
        <HEAD>
            <TITLE> </TITLE>
   
        </HEAD>
        <BODY>
   
        </BODY>
</HTML>
 
Salve-o com o nome de index.html, por padrão os nomes dos documentos HTML são todos lowercase. Agora informe entre as tags TITLE um titulo para a sua pagina e entre as tag BODY digite um texto qualquer de preferência com varias quebras de linhas e parágrafos.
 

Abre o seu navegador padrão e através do menu Arquivo-Abrir localize o documento html que você acabou de criar e o carregue no navegador. Observe o resultado.
 
Conclusão
 

Até o momento apenas vimos de forma bem rápida como se cria um pagina html básica, acredito que você deve esta se perguntando se isso e realmente útil visto que temos hoje no mercado ótimos editores html que nos permitem criar paginas hmtl sem nem mesmo saber uma linha se quer de html. Bem pode acreditar e necessário sim, ou de outra forma você ficara restrito a ferramenta e não saberá o que acontece nos bastidores. Se sua intenção e criar aplicações com o Delphi for PHP e interessante sim saber como o html funciona, pois na série sobre Delphi for PHP você Vera que a maioria dos componentes que você utiliza na IDE são na verdade, e não poderia deixar de ser, HTML puro, nativo sem truques e se ao chegar lá você já souber o que cada tag daquelas faz ficara mais fácil dominar a IDE e seus componentes.
 

No próximo artigo trataremos das tag básicas para estruturar nossas paginas. Eu sou Rodrigo Carreiro e pela sua atenção muito obrigado.
 
Rodrigo Carreiro Mourão
Consultor da TDS Tecnologia – RJ atuando na área de desenvolvimento de projetos Orientados a Objetos, Design Patterns, MVC. BDS2006 Win32 Product Certified. Borland Instructor Certified. Instrutor de treinamentos oficiais CodeGaer DelphiWin32, Delphi for PHP, Delphi .Net. Palestrante da Borland Conference 2007.