Lio 4: Criando seu primeiro websiteCom o que voc aprendeu nas lies anteriores est a alguns minutos de criar seu primeiro website.

Como?Na lio 1 vimos o que necessrio para construir um website: um navegador e o Notepad (ou um editor detexto similar). Uma vez que voc esta lendo esta pgina, 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 estetutorial e outra para visualizar o website que voc vai construir.

Abra tambm o Notepad ( Iniciar Programas Acessrios):

Agora, estamos prontos para comear!

O que posso fazer?Vamos comear com algo simples. Que tal uma pgina que diga: "Hurrah! Esta a minha primeira pginaweb." Continue e voc ver como isto simples de fazer.

HTML simples e lgico. O navegador l HTML de modo idntico ao que voc l um texto qualquer, decima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve sera primeira coisa aparecer na pgina 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 feitocom a tag (nenhuma novidade nisto). Ento, antes de mais nada digite "" na primeira linha do

Lio 4: Criando seu primeiro website - HTML.net http://pt-br.html.net/tutorials/html/lesson4.php

1 de 4 04/02/2014 16:35

documento, no Notepad.

Como sabemos das lies anteriores, uma tag de abertura e deve ser fechada com a tag defechamento quando voc acabar de digitar seu documento HTML. Para termos certeza que no iremosesquecer de fechar a tag HTML, faa isso agora mesmo, digitando "" localizada a algumas linhasabaixo, assim voc ir escrever seu documento entre as tags digitadas e .

A prxima coisa que o documento precisa um "head" (cabea), que fornece informaes sobre odocumento e um "body" (corpo), que abriga o contedo do documento. Como HTML no seria nada se nofosse lgico, a "cabea" ( e ) fica em cima do "corpo" ( e ).Seu documento agora est como mostrado abaixo:

Notar como estruturamos o cdigo em linhas diferentes (usar a tecla Enter para pular para prxima linha)e tambm a indentao (recuos) do cdigo (usar a tecla Tab para indentar). A prncipio no faz qualquerdiferena a maneira como voc estrutura (linhas e recuos na digitao) seu documento HTML. Mas umcdigo bem estruturado mais fcil de ler e entender, altamente recomendado que voc adote umaestrutura clara e ntida para seu HTML, usando linhas e indentao (recuos), como mostrado noexemplo acima.

Se o seu documento est como o mostrado acima, voc construiu sua primeira pgina web - uma pginaparticularmente chata e provalvelmente nada parecido com o que voc sonhou fazer quando comeou a lereste tutorial, mas de qualquer forma um tipo de website. Isto que voc fez ser um template base para seusfuturos documentos HTML.

At aqui tudo bem, mas como colocar contedo no meuwebsite?Como voc j aprendeu, seu documento HTML composto de duas partes: um head e um body. Na seohead voc escreve informaes sobre a pgina e na seo body voc coloca as informaes queconstituem a pgina.

Por exemplo, para dar um ttulo ao documento, ttulo este que aparea no topo da barra do navegador vocdever usar a seo"head". A tag para acresentar um ttulo :

Minha primeira pgina web

Notar que o ttulo no aparece na pgina propriamente dita. Tudo que voc quer que aparea na pgina contedo e dever ser colocado entre as tags "body".

Conforme combinamos, queremos uma pgina dizendo, "Hurrah! Esta a minha primeira pgina web." Este o texto que queremos comunicar e ele dever ser colocado na seo body. Ento digite na seo body oseguinte:

Lio 4: Criando seu primeiro website - HTML.net http://pt-br.html.net/tutorials/html/lesson4.php

2 de 4 04/02/2014 16:35

Hurrah! Esta a minha primeira pgina web.

A letra p na tag a abreviatura para "paragraph" (pargrafo) que exatamente o que o texto - umtexto pargrafo.

Seu documento HTML agora est como mostrado a seguir:

Minha primeira pgina web

Hurrah! Esta a minha primeira pgina web.

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 opo "Salvar como...".Escolha "Todos os arquivos" no box "Salvar como tipo". Isto muito importante - caso voc no faaisto, o arquivo ser salvo como texto e no como documento HTML.Salve seu documento com o nome "page1.htm" (a extenso ".htm" indica que se trata de umdocumento HTML. A extenso ".html" d o mesmo resultado. Eu sempre uso ".htm", mas voc podeescolher a que voc preferir .htm ou .html). Voc pode salvar o documento onde voc quiser no seuHD - esteja certo de salvar em um lugar que depois voc possa achar com facilidade.

Agora v ao seu navegador:

Lio 4: Criando seu primeiro website - HTML.net http://pt-br.html.net/tutorials/html/lesson4.php

3 de 4 04/02/2014 16:35

>

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

Voc dever ver no seu navegador: "Hurrah! Esta a minha primeira pgina web." Parabns!

Se voc quer que o mundo todo veja sua pgina, v direto para a Lio 14 e aprenda como fazer upload dasua pgina para a Internet. Se no, tenha pacincia e continue lendo. A brincadeira apenas comeou.

Lio 4: Criando seu primeiro website - HTML.net http://pt-br.html.net/tutorials/html/lesson4.php

4 de 4 04/02/2014 16:35