2 Estudando - Webdesigner - Criando Documentos HTML

05/01/2015
Estudando:WebdesignerCursosOnlineGrtis|PrimeCursos
ESTUDANDO: WEBDESIGNER
CriandoDocumentosHTML
Todo documento HTML precisa conter certas tags padronizadas, no mnimo <HEAD>, </HEAD>, <BODY> e
</BODY>,poiselasconstituemasduaspartesbsicasdeumdocumentoHTMLqueso:oHEAD(cabealho)eo
BODY(corpododocumento).
<HTML>
<HEAD>
<TITLE>CursodeWebDesign</TITLE>
</HEAD>
<BODY>
<H1>Esteoprimeironveldecabealho.</H1><p>
BemvindoaomundodoHTML.Esteoprimeiropargrafo.<p>
Esteosegundoparagrfo
</BODY>
</HTML>
A tag <HEAD> contm, entre outras coisas, o <TITLE> (ttulo), e a tag <BODY> armazena todo o contedo do
documento,normalmentecompostodepargrafos,listas,tabelas,etc.
ParainterpretarcorretamenteocontedododocumentoHTML,osbrowsersesperaminformaesemacordocom
asespecificaesHTML.
Abra o bloco de notas, e digite o cdigo acima e salveo como primeiro.html. Em seguida, abra arquivo
primeiro.htmlnonavegador(InternetExplorer,ououtro).
Explicao:
AprimeiraTAGqueencontramosnodocumento<HTML>.ElaoelementoraizdeumdocumentoHTML,pois
dentro dela est todo o contedo da pgina. Esta tag diz ao navegador para iniciar um novo documento HTML,
ondeocontedoquedeverserexibidoestaentreastags<HTML>e<HTML>.
http://www.primecursos.com.br/openlesson/9933/100333/
1/6
05/01/2015
O texto contido ente as TAG <HEAD> e <HEAD> define o cabealho do documento. Estas informaes so
importantespoisindicamaonavegadoraformaqueapginadeveserapresentadagraficamente.
A tag <TITLE> define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informado Curso de
WebDesign.
A tag <BODY> informa ao navegador o que dever ser exibido graficamente. O corpo da pgina BODY
constituidopelocontedoqueestentreastags<BODY>e</BODY>.
2.1ELEMENTOSBSICOS
2.1.1TTULOS
TododocumentoemHTMLdevepossuirumttulo.Ottuloexibidoemlocalseparadodapgina,eutilizadopara
identificar o documento em outros contextos, de modo que o ttulo deve indicar claramente o contedo do
documento.
Astagutilizadasparattulosso:<TITLE>e</TITLE>.
<html>
<title>Esteottulo</title>
<body>
<h2>Eesteocabealhodenvel2</h2>
Aquientraotextododocumento...
</body>
</html>
2.1.2CABEALHO
Os cabealhos normalmente so usados para ttulos e subttulos de uma texto da pgina. A linguagem HTML
possuiseisnveisdecabealhos,numeradosde1a6quantomenoronvel,maiorserodestaque.
2/6
05/01/2015
Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca
antesedepoisdocabealhos.Oprimeirocabealhodeumapginadevesermarcadacomo<H1>.
COMANDO:
<Hy>TextodoCabealho</Hy>
Ondeoyumnmeroquepoderserespecificadoentre1a6,definindoonveldocabealho.
COMANDO:
<H1>Cabealhonvel1</H1>
2.1.3PARGRAFO
Atag<p>utilizadaparadefinironiciodeumpargrafo,criandoumalinhaembrancoentrecadapargrafo.Otag
<p>tambmresponsvelpeloalinhamentodospargrafos.
Oalinhamentopodeser:
>LEFT:Pargrafoalinhadoaesquerda.
>CENTER:Pargrafoalinhadoaocentro.
>RIGHT:Pargradoalinhadoadireita.
>JUSTIFY:Pargrafojustificado.
<html>
<head>
<title>Alinhamentodepargrafos</title>
</head>
<body>
3/6
05/01/2015
<p>EstepargrafoutilizaoalinhamentopadrodosnavegadoresdeInternet(esquerdo).
<palign="center">Estepargrafoutilizaoalinhamentocentralizado
<palign="right">Estepargradoutilizaoalinhamentodireita.
</body>
</html>
2.1.4QUEBRADELINHA
Atag<br>usadaparaterminarumalinhaseminiciarumnovopargrafo.Estatag<br>,oulinebreak,provoca
umamudanadelinhasemacrescentarespaoextraentreaslinhas.
Vejaadiferenaentreousodatag<p>edatag<br>:
MODELOI
<html>
<body>
<h1>Utilizandoatagp</h1>
Vamossepararestalinhacomamarcaodeparagrfo.<p>
Paraverificaradiferena.
</body>
</html>
MODELOII
<html>
<body>
<h1>Utilizandoatagbr</h1>
Diferenaquandoseparamosduaslinhasutilizando<br>
amarcaodequebradelinha<br>
Diferenaquandoseparamosduaslinhasutilizando<br>
amarcaodequebradelinha<br>
Verificouadiferena?
</body>
</html>
4/6
05/01/2015
2.1.5COMENTRIOS
Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que no devem ser
apresentadosgraficamentenapgina.
Oscomentriossoutilizadosparaexplicarocdigofonteparaquemaistardesejapossvelcompreenderoquefoi
feito.
COMANDO:
<!Comentriodapgina>
2.1.6LISTADEELEMENTOSBSICOS
5/6
05/01/2015
2.1.7DICAS
> Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser apresentadas de
formadiferenteemcadanavegadores(browsers)ouemconmputadoresdiferentes.OASPECTOGRFICOPODE
DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre no s pela diferena entre os
sistemas,mastambmpelofatodequeosusuriospossuemmonitoresdiferentesepodemredimensionarajanela
donavegadorparaotamanhoqueprefirirem.
>Asdiferenasnostamanhosdasjanelasdosnavegadoresfazemcomqueonmerodelinhasvariemuito.Por
esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as
mudanasdelinhas.
>Semprequequiserinserirlinhasembrancouse<br>.
>Jobservoualgumavezumapginadainternet,eseperguntou:Quaisasinstruesqueforamutilizadas?.Se
estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at o menu Exibir e escolha a opo
CdigoFonte,oucliquecomobotodireitodomouseeselecioneaopoExibirCdigoFonte.
>Nodesanimeseoaspectodocdigofontelheaparecerassustador.Seesseforocaso,podetercertezaquea
pginaqueestvisualizandofoifeitaporumprogramaespecfico.Aolongodocurso,serpossvelverificarqueo
cdigoHTMLbemescritoamomuitofcildeler,masmuitaspessoascomplicamocdigoparaconfundir.
6/6

2 Estudando - Webdesigner - Criando Documentos HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

2 Estudando - Webdesigner - Criando Documentos HTML

Cargado por

Copyright:

Formatos disponibles

05/01/2015

También podría gustarte