criando site em html

Lição 4: Criando seu primeiro website

Com o que você aprendeu nas lições anteriores está a alguns minutos de criar seu primeiro website.

Como?

Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um editor de texto similar). Uma vez que você esta lendo esta página, provavelmente está com seu navegador aberto. Agora abra outra janela do seu navegador de modo que você tenha duas janelas na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir.

Abra também o Notepad ( Iniciar » Programas » Acessórios):

O caminho para o Notepad

Agora, estamos prontos para começar!

O que posso fazer?

Vamos começar com algo simples. Que tal uma página que diga: "Hurrah! Esta é a minha primeira página web." Continue e você verá como isto é simples de fazer.

HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer.

A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag <html> (nenhuma novidade nisto). Então, antes de mais nada digite "<html>" na primeira linha do documento, no Notepad.

Como sabemos das lições anteriores, <html> é uma tag de abertura e deve ser fechada com a tag de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando"</html>" localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <html> e </html>.

A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento. Como HTML não seria nada se não fosse lógico, a "cabeça" (<head> e </head>) fica em cima do "corpo" (<body> e </body>).

Seu documento agora está como mostrado abaixo:

 <html> <head> </head> <body> </body> </html>

Notar como estruturamos o código em linhas diferentes (usar a tecla Enter para pular para próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar). A príncipio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação) seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, é altamente recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e indentação (recuos), como mostrado no exemplo acima.

Se o seu documento está como o mostrado acima, você construiu sua primeira página web - uma página particularmente chata e provalvelmente nada parecido com o que você sonhou fazer quando começou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que você fez será um template base para seus futuros documentos HTML.

Até aqui tudo bem, mas como colocar conteúdo no meu website?

Como você já aprendeu, seu documento HTML é composto de duas partes: um head e um body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página.

Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acresentar um título é <title>:

 <title>Minha primeira página web</title>

Notar que o título não aparece na página propriamente dita. Tudo que você quer que apareça na página é conteúdo e deverá ser colocado entre as tags "body".

Conforme combinamos, queremos uma página dizendo, "Hurrah! Esta é a minha primeira página web." Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte:

 <p>Hurrah! Esta é a minha primeira página web.</p>

A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto parágrafo.

Seu documento HTML agora está como mostrado a seguir:

 <html> <head> <title>Minha primeira página web</title> </head> <body> <p>Hurrah! Esta é a minha primeira página web.</p> </body> </html>

Pronto! Você acaba de construir seu primeiro website!

Agora basta que você salve seu trabalho no HD e depois visualize no navegador:

No Notepad vá ao menu "Arquivo" no topo da janela e escolha a opção "Salvar como...".
Escolha "Todos os arquivos" no box "Salvar como tipo". Isto é muito importante - caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
Salve seu documento com o nome "page1.htm" (a extensão ".htm" indica que se trata de um documento HTML. A extensão ".html" dá o mesmo resultado. Eu sempre uso ".htm", mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com facilidade.

Salvando o documento

Agora vá ao seu navegador:

No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir" (CTRL+O).
Clique em "Procurar" no box que aparece.
Localize o seu documento HTML e clique em "Abrir".

Abrindo o documento

Você deverá ver no seu navegador: "Hurrah! Esta é a minha primeira página web." Parabéns!

Se você quer que o mundo todo veja sua página, vá direto para a Lição 14 e aprenda como fazer upload da sua página para a Internet. Se não, tenha paciência e continue lendo. A brincadeira apenas começou.

Lição 13: Uploading páginas

Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrá-las para o mundo todo.

O mundo está preparado para ver suas páginas?

O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho na Internet, você precisa somente de espaço em um servidor e um programa FTP gratuito.

Se você costuma acessar a Internet já deve ter visto que existem vários serviços gratutitos de hospedagem de sites. Seu endereço no servidor será alguma coisa parecida com https://home.servidor.com/~nomedousuario. Você tem que ativar o serviço. Informe-se como fazer isto na documentação fornecida pelo serviço de hospedagem.

Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é igual a registrar uma conta de e-mail (como por exemplo, obter um endereço de e-mail do hotmail) você pode registrar-se gratuitamente para obter um espaço em um servidor na Internet. Existem várias companhias que oferecem este serviço gratuito - entre elas a Angelfire (clique em "Sign Up" e escolha membro gratuito - ou faça uma busca no Google para encontrar um serviço gratuito com registro em português) - isto é um processo bem rápido.

Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (Por exemplo, ftp.angelfire.com) e ter um nome de usuário e senha.

Isto é tudo que eu preciso?

Para acessar o servidor e publicar as páginas você precisa de um programa FTP. Você não deve ter um programa destes ainda, mas existem vários deles na Internet para download e são gratuitos.

Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . Você pode obter o FileZilla em filezilla.sourceforge.net.

Como eu faço o upload das páginas?

Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angelfire e o programa FileZilla. Este procedimento é mais ou menos igual para qualquer programa FTP.

Conecte-se à Internet e abra o programa FTP. Insira "Host Name" ("ftp.angelfire.com" no "Address"), nome do usuário (em "User") e senha (em "Password") clique "Connect". Você agora tem acesso ao servidor. Em um lado da janela do programa você verá os diretórios e arquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site"):

FileZilla

Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo poderá ver seu site! (Por exemplo, no endereço https://www.angelfire.com/folk/htmlnet/pagina1.htm).

Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente a página de entrada no site, ou seja, basta digitar https://www.angelfire.com/folk/htmlnet (sem qualquer nome de arquivo) e abrirá https://www.angelfire.com/folk/htmlnet/index.htm.

Para mais adiante será uma boa idéia comprar um domínio (espaço no servidor) só para você (www.seu-nome.com) e assim ter um nome do site bem mais curto e fácil de guardar que aqueles fornecidos por um serviço gratuito da Internet. Você pode encontrar na Internet várias firmas que vendem domínio. Faça uma busca do Google.