Você está na página 1de 6

04/12/13 Estudando: Webdesigner - Cursos Online Grtis | Prime Cursos

https://www.primecursos.com.br/openlesson/9933/100333/ 1/6
Estudando: Webdesigner
Criando Documentos HTML
Todo documento HTML precisa conter certas tags padronizadas, no mnimo <HEAD>, </HEAD>, <BODY> e
</BODY>, pois elas constituem as duas partes bsicas de um documento HTML que so: o HEAD (cabealho) e o
BODY (corpo do documento).
<HTML>
<HEAD>
<TITLE>Curso de WebDesign</TITLE>
</HEAD>
<BODY>
<H1>Este o primeiro nvel de cabealho.</H1><p>
Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.<p>
Este o segundo paragrfo
</BODY>
</HTML>
A tag <HEAD> contm, entre outras coisas, o <TITLE> (ttulo), e a tag <BODY> armazena todo o contedo do
documento, normalmente composto de pargrafos, listas, tabelas, etc.
Para interpretar corretamente o contedo do documento HTML, os browsers esperam informaes em acordo com
as especificaes HTML.
Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html
no navegador (Internet Explorer, ou outro).
Explicao:
A primeira TAG que encontramos no documento <HTML>. Ela o elemento raiz de um documento HTML, pois
dentro dela est todo o contedo da pgina. Esta tag diz ao navegador para iniciar um novo documento HTML, onde
o contedo que dever ser exibido esta entre as tags <HTML> e <HTML>.
04/12/13 Estudando: Webdesigner - Cursos Online Grtis | Prime Cursos
https://www.primecursos.com.br/openlesson/9933/100333/ 2/6
O texto contido ente as TAG <HEAD> e <HEAD> define o cabealho do documento. Estas informaes so
importantes pois indicam ao navegador a forma que a pgina deve ser apresentada graficamente.
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
constituido pelo contedo que est entre as tags <BODY> e </BODY>.

2.1 ELEMENTOS BSICOS
2.1.1 TTULOS
Todo documento em HTML deve possuir um ttulo. O ttulo exibido em local separado da pgina, e utilizado para
identificar o documento em outros contextos, de modo que o ttulo deve indicar claramente o contedo do
documento.
As tag utilizadas para ttulos so: <TITLE> e </TITLE>.
<html>
<title>Este o ttulo</title>
<body>
<h2>E este o cabealho de nvel 2</h2>
Aqui entra o texto do documento ...
</body>
</html>

2.1.2 CABEALHO
Os cabealhos normalmente so usados para ttulos e sub-ttulos de uma texto da pgina. A linguagem HTML possui
seis nveis de cabealhos, numerados de 1 a 6; quanto menor o nvel, maior ser o destaque.
04/12/13 Estudando: Webdesigner - Cursos Online Grtis | Prime Cursos
https://www.primecursos.com.br/openlesson/9933/100333/ 3/6
Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes
e depois do cabealhos. O primeiro cabealho de uma pgina deve ser marcada como <H1>.

COMANDO:
<Hy> Texto do Cabealho </Hy>
Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel do cabealho.
COMANDO:
<H1> Cabealho nvel 1 </H1>
<H2> Cabealho nvel 2 </H2>
<H3> Cabealho nvel 3 </H3>
<H4> Cabealho nvel 4 </H4>
<H5> Cabealho nvel 5 </H5>
<H6> Cabealho nvel 5 </H6>
2.1.3 PARGRAFO
A tag <p> utilizada para definir o nicio de um pargrafo, criando uma linha em branco entre cada pargrafo. O tag
<p> tambm responsvel pelo alinhamento dos pargrafos.
O alinhamento pode ser:
-> LEFT : Pargrafo alinhado a esquerda.
-> CENTER: Pargrafo alinhado ao centro.
-> RIGHT: Pargrado alinhado a direita.
-> JUSTIFY : Pargrafo justificado.
<html>
<head>
<title>Alinhamento de pargrafos</title>
</head>
<body>
04/12/13 Estudando: Webdesigner - Cursos Online Grtis | Prime Cursos
https://www.primecursos.com.br/openlesson/9933/100333/ 4/6
<p>Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo).
<p align="center">Este pargrafo utiliza o alinhamento centralizado
<p align="right">Este pargrado utiliza o alinhamento direita.
</body>
</html>
2.1.4 QUEBRA DE LINHA
A tag <br> usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag <br>, ou line break, provoca
uma mudana de linha sem acrescentar espao extra entre as linhas.
Veja a diferena entre o uso da tag <p> e da tag <br>:
MODELO I
<html>
<body>
<h1>Utilizando a tag p </h1>
Vamos separar esta linha com a marcao de paragrfo.<p>
Para verificar a diferena.
</body>
</html>
MODELO II
<html>
<body>
<h1>Utilizando a tag br</h1>
Diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha<br>
Diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha <br>
Verificou a diferena?
</body>
</html>
04/12/13 Estudando: Webdesigner - Cursos Online Grtis | Prime Cursos
https://www.primecursos.com.br/openlesson/9933/100333/ 5/6

2.1.5 COMENTRIOS
Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que no devem ser
apresentados graficamente na pgina.
Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvel compreender o que foi
feito.
COMANDO:
<!-- Comentrio da pgina -->

2.1.6 LISTA DE ELEMENTOS BSICOS
04/12/13 Estudando: Webdesigner - Cursos Online Grtis | Prime Cursos
https://www.primecursos.com.br/openlesson/9933/100333/ 6/6
2.1.7 DICAS
-> Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser apresentadas de
forma diferente em cada navegadores (browsers) ou em conmputadores diferentes. O ASPECTO GRFICO PODE
DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre no s pela diferena entre os
sistemas, mas tambm pelo fato de que os usurios possuem monitores diferentes e podem redimensionar a janela
do navegador para o tamanho que prefirirem.
-> As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero de linhas varie muito. Por
esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as
mudanas de linhas.
-> Sempre que quiser inserir linhas em branco use <br>.
-> J observou alguma vez uma pgina da internet, e se perguntou: Quais as instrues que foram utilizadas?. Se
estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at o menu Exibir e escolha a opo Cdigo
Fonte, ou clique com o boto direito do mouse e selecione a opo Exibir Cdigo Fonte.
-> No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o caso, pode ter certeza que a
pgina que est visualizando foi feita por um programa especfico. Ao longo do curso, ser possvel verificar que o
cdigo HTML bem escrito a mo muito fcil de ler, mas muitas pessoas complicam o cdigo para confundir.