Tomás Vásquez - Blog

Como funcionam as páginas da Internet. Uma introdução ao HTML - Parte 1

por Marshall Brain - traduzido por HowStuffWorks Brasil

Introdução

Alguma vez você já se perguntou como uma página de Internet funciona? Você já pensou em criar sua própria página, com título, texto, gráficos e imagens? Alguma vez já se perguntou o que significa HTML?

Neste artigo falaremos sobre a arte e a ciência de criar páginas de Internet e faremos experiências que você poderá testar hoje mesmo no seu computador. Nós até criamos uma ferramenta para você testar códigos HTML e visualizá-los na hora. No final das contas, criar páginas de Internet é facílimo e muito divertido, e algo que está totalmente ao seu alcance. Quando você chegar ao final deste artigo, estará pronto para começar a criar suas próprias páginas.

Preparando o terreno

E como você está na frente do computador, tem um navegador e quer aprender, você já tem tudo de que precisa para começar. Você pode aprender HTML e experimentar no seu navegador para descobrir como criar qualquer tipo de página que você imaginar.

Para falarmos de páginas de Internet e de como elas funcionam, você precisa entender quatro termos simples (e se por acaso parecer muito técnico na primeira vez em que você ler, não se preocupe):

• Página Web, ou de Internet - uma página de Internet é um arquivo de texto simples que contém não só texto, como também um conjunto de tags HTML. As tags são instruções simples, que dizem ao navegador como a página está formatada para que ele possa exibi-la. As tags pedem ao navegador para fazer coisas como mudar a cor e o tamanho da fonte ou organizar as coisas em colunas. O navegador interpreta estas tags para decidir como formatar o texto na tela.
• HTML - HTML é a sigla para Hyper Text Markup Language, ou Linguagem de Marcação de Hipertexto. Uma “linguagem de marcação” é uma linguagem de programação que descreve como uma página deve ser formatada. Se você quiser exibir somente um texto, preto e branco, sem formatação, não é necessário usar o HTML. Mas se você quiser alterar fontes, adicionar cores, criar títulos e colocar imagens na sua página, o HTML é a linguagem que você deve usar.
• Navegador - um navegador, como o Netscape Navigator ou o Microsoft Internet Explorer, é um programa de computador (também conhecido como aplicativo) que faz duas coisas:
  • O navegador sabe como ir até um servidor na Internet, pedir uma página e trazê-la pela rede até sua máquina.
  • O navegador sabe interpretar o conjunto de tags HTML dentro da página para exibir a imagem na sua tela como o criador da página quer que ela seja exibida.
• Servidor de Internet - um servidor de Internet é um programa que responde ao pedido de uma página feito pelo navegador e entrega-lhe a página pela Internet. Imagine um servidor como um prédio de apartamentos, em que cada apartamento hospeda a página de Internet de alguém. Para armazenar sua página no prédio, você precisa pagar aluguel pelo espaço. As páginas que vivem neste prédio podem ser exibidas para e visualizadas por qualquer pessoa no planeta. O proprietário dos apartamentos é chamado de host (ou aquele que hospeda) e o aluguel geralmente é chamado de taxa de hospedagem. Todos os dias, milhares de servidores de Internet levam páginas aos navegadores de dezenas de milhões de pessoas através da rede que chamamos de Internet. Leia Como funcionam os servidores web para mais detalhes sobre este processo.

É muito fácil testar as páginas sem usar um servidor. Seu navegador consegue ler as páginas que você cria a partir da sua própria máquina. Quando você entender como criar suas próprias páginas, é provável que queira colocá-las em um servidor para que as pessoas do mundo todo possam vê-las. Ensinaremos como fazer isto no final deste artigo.

Visualizando o código-fonte

Vamos dar uma olhada “dentro” de uma página. Ali estão o texto original e as tags HTML digitadas pelo autor e interpretadas pelo navegador para produzir a página que você VÊ de verdade na Internet. Clique com o botão direito do mouse em qualquer parte branca desta página e, no menu, escolha “Exibir código fonte” (ou “View Source”, se neu navegador estiver em inglês). Uma nova janela aparecerá, cheia de palavras e caracteres, e alguns deles podem parecer bem técnicos e estranhos. Estas palavras e caracteres são, em conjunto, o código de programação HTML que você vai aprender aqui. Cada elemento dentro deste código é conhecido como uma tag HTML. Não se intimide pela aparência complexa - você vai ficar surpreso com a simplicidade da coisa. Quando você terminar de ver o código-fonte, feche a janela para voltar a este artigo.

Você pode dar uma espiada nos “bastidores” de praticamente qualquer página na Internet usando este caminho. Quando você estiver mais envolvido com design, provavelmente vai acabar abrindo os códigos de páginas complicadas para aprender os códigos que os autores, ou web designers, usaram para criar uma estrutura que você tenha achado interessante.

Agora vamos aprender o que significam algumas das tags e começar a criar uma página simples.

A tag HTML

Uma tag HTML é um elemento de código que diz ao navegador o que fazer com seu texto. Cada tag aparecerá na forma de letras ou palavras entre os sinais < (menor) e > (maior).

Exemplo: <center>, <body>

Para falar para o navegador “encerrar” o que você acabou de pedir, uma barra é usada na tag de fechamento:

Exemplo: </center>, </body>

A maioria das tags vem em pares com “começo” e “fim”, mas não é sempre.

Qualquer página que você criar terá as seguintes tags no início:

• <HTML>: diz ao navegador que este é o início de um documento HTML.
• <HEAD>: diz ao navegador que este é o cabeçalho da página (você vai aprender mais adiante o que vai entre as tags “HEAD”)
• <TITLE>: diz ao navegador que este é o título da página
• <BODY>: diz ao navegador que este é o início do conteúdo da página - tudo o que você quiser dizer e ver na sua página virá depois desta tag.

As tags necessárias para terminar qualquer página são:

• </BODY>
• </HTML>

Criando uma página simples

Há muitas maneiras de criar páginas de Internet. Centenas de empresas criaram ferramentas que auxiliam no processo. Porém nosso objetivo aqui é entender como funcionam as páginas de Internet, ao invés de deixar uma ferramenta esconder o processo. Portanto, usaremos as ferramentas mais simples possíveis - as que você já tem na sua máquina.

No seu computador você tem um programa, ou aplicativo, que cria arquivos de texto simples. No Windows, este aplicativo é chamado Bloco de Notas (Notepad). Em um Macintosh, o programa é chamado SimpleText. Se você não conseguir achar estes programas, também é possível usar um programa de processamento de texto, como o WordPerfect ou Microsoft Word.

Observação:

No Windows 95/98, clique no botão Iniciar,depois em Programas, em Acessórios e, por fim, em Bloco de Notas.

No Windows 3.1, clique em Acessórios (no gerenciador de programas) e depois em Bloco de Notas.

No Macintosh, clique em Macintosh HD, depois em Aplicativos e em SimpleText.

Quando tiver o programa aberto na tela, digite nele (ou copie e cole daqui) o seguinte texto HTML:

Olá! essa é minha primeira página

Não faz diferença se você colocar as tags e o texto lado a lado, em linhas, ou usando recuos; o texto será exibido da mesma forma no navegador . Também não faz diferença usar letras maiúsculas e minúsculas dentro das tags.

Agora você precisa salvar este arquivo em algum lugar que encontre fácil depois. Salve na área de trabalho (desktop) ou, melhor ainda, crie uma nova pasta para guardar todas as páginas que você vai fazer e salve o arquivo lá. Salve-o com o nome primeira.html.

Agora, abra a página no seu navegador. Todos os navegadores abrem um arquivo armazenado na máquina local. No Internet Explorer ou Netscape, selecione Abrir Arquivo (Open File) no menu Arquivo (File) no topo da janela. Abra o arquivo primeira.html. Ela vai abrir mais ou menos assim:

Três coisas aparecem na imagem:

• O título da página é “Minha Primeira Página”.
• O corpo da página contém as palavras “Oi! Esta é a minha primeira página!”
• O endereço exibido na barra de endereços é C:WINDOWSDESKTOPprimeira.html, apontando para o disco rígido local, ao invés do http://… que um endereço teria se estivéssemos abrindo a página de um servidor na Internet.

Ao observar o texto HTML que compõe sua primeira página, dá para ver exatamente como a página recebeu um título e um corpo.

Agora que você já criou e visualizou sua primeira página, está a caminho de se tornar um profissional em páginas web. O ponto-chave é aprender cada vez mais sobre as tags HTML que permitem a customização da página; assim você vai saber como uma página funciona. Você também deve procurar aprender sobre as ferramentas que ajudam na criação de tabelas, frames e gráficos para suas páginas. Este artigo vai guiar você e trazer toda a informação que você precisa para começar.

Recurso Grande lista de tags de HTML (em inglês) da HowStuffWorks - guia de referência para impressão que contém todas as tags de HTML mais comuns em uma única página.

Na próxima parte, continuaremos com as principais tags de formatação de texto e conteúdo.

Até a próxima!

Tomás Vásquez
http://www.tomasvasquez.com.br