Curso Web Designer [ 2 ~ 25 ] [ Criando Documentos HTML ]

2. CRIANDO DOCUMENTOS HTML

Todo documento HTML precisa conter certas tags padronizadas, no mínimo <HEAD>,
</HEAD>, <BODY> e </BODY>, pois elas constituem as duas partes básicas de um documento HTML que
são: o HEAD (cabeçalho) e o BODY (corpo do documento).
<HTML>
<HEAD>
<TITLE>Curso de WebDesign</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho.</H1><p>
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p>
Este é o segundo paragráfo
</BODY>
</HTML>
A tag <HEAD> contém, entre outras coisas, o <TITLE> (título), e a tag <BODY> armazena
todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, etc.
Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam
informações em acordo com as especificações HTML.
Abra o bloco de notas, e digite o código acima e salve-o como primeiro.html. Em seguida, abra
arquivo primeiro.html no navegador (Internet Explorer, ou outro).

Explicação:

A primeira TAG que encontramos no documento é <HTML>. Ela é o elemento raiz de um

documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar

um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags <HTML> e

<\HTML>.

O texto contido ente as TAG <HEAD> e <\HEAD> define o cabeçalho do documento. Estas

informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada

graficamente.

A tag <TITLE> define o título da página. 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

página “BODY” é constituido pelo conteúdo que está entre as tags <BODY> e </BODY>.

2.1 ELEMENTOS BÁSICOS
2.1.1 TÍTULOS
Todo documento em HTML deve possuir um título. O título é exibido em local separado da
página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar
claramente o conteúdo do documento.
As tag utilizadas para títulos são: <TITLE> e <\TITLE>.
<html>
<title>Este é o título</title>
<body>
<h2>E este o cabeçalho de nível 2</h2>
Aqui entra o texto do documento ...
</body>
</html>

2.1.2 CABEÇALHO

Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A

linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será

o destaque.

Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma

linha em branca antes e depois do cabeçalhos. O primeiro cabeçalho de uma página deve ser marcada

como <H1>.

COMANDO:
<Hy> Texto do Cabeçalho </Hy>
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do
cabeçalho.
COMANDO:
<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>

2.1.3 PARÁGRAFO

A tag <p> é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre

cada parágrafo. O tag <p> também é responsável pelo alinhamento dos parágrafos.

O alinhamento pode ser:

�� LEFT : Parágrafo alinhado a esquerda.

�� CENTER: Parágrafo alinhado ao centro.

�� RIGHT: Parágrado alinhado a direita.

�� JUSTIFY : Parágrafo justificado.

<html>

<head>

<title>Alinhamento de parágrafos</title>

</head>

<body>

<p>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet

(esquerdo).

<p align="center">Este parágrafo utiliza o alinhamento centralizado

<p align="right">Este parágrado utiliza o alinhamento à direita.

</body>

</html>

2.1.4 QUEBRA DE LINHA

A tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag <br>, ou
“line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.
Veja a diferença 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 marcação de paragráfo.<p>

Para verificar a diferença.

</body>

</html>

MODELO II

<html>

<body>

<h1>Utilizando a tag br</h1>

Diferença quando separamos duas linhas utilizando<br>

a marcação de quebra de linha<br>

Diferença quando separamos duas linhas utilizando<br>

a marcação de quebra de linha <br>

Verificou a diferença?

</body>

</html>

2.1.5 COMENTÁRIOS
Os comentários servem para dizer ao navegador que o conteúdo é apenas anotações e que
não devem ser apresentados graficamente na página.
Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível
compreender o que foi feito.
COMANDO:

2.1.6 LISTA DE ELEMENTOS BÁSICOS

ELEMENTOS | DESCRIÇÃO
<html> | Elemento que contém todas as instruções para página HTML
<title> | Elemento que define o título da página.
<body> | Elemento que contém o corpo “body” da página.
<h1> ... <h6> | Elemento que define cabeçalhos, desde de o nível 1 (maior destaque) até o nível 6
(menor destaque).
<p> | Elemento de definição de parágrafos.
<br> | Elemento que provoca quebra de linha no contéudo da página.
<!-- -- > | Elemento para inserção de comentários na página.

2.1.7 DICAS

Quando criamos páginas em HTML devemos ter sempre atenção ao fato
delas poderem ser apresentadas de forma diferente em cada navegadores
(browsers) ou em conmputadores diferentes. O ASPECTO GRÁFICO PODE
DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre
não só pela diferença ente os sistemas, mas também pelo fato de que os usuários
possuem monitores diferentes e podem redimensionar a janela do navegador para
o tamanho que prefirirem.
�� As diferenças nos tamanhos das janelas dos navegadores fazem com que
o número de linhas varie muito. Por esse motivo não seremos capazes de controlar
nem o número de linhas nem os locais em que acontecem as mudanças de linhas.
�� Sempre que quiser inserir linhas em branco use <br>.
�� Já observou alguma vez uma página da internet, e se perguntou: “Quais
as instruções que foram utilizadas?”. Se estiver utilizando o Internet Explorer e
quiser descobrir as instruções, vá até o menu Exibir e escolha a opção Código
Fonte, ou clique com o botão direito do mouse e selecione a opção Exibir Código
Fonte.
�� Não desanime se o aspecto do código fonte lhe aparecer assustador. Se
esse for o caso, pode ter certeza que a página que está visualizando foi feita por
um programa específico. Ao longo do curso, será possível verificar que o código
HTML bem escrito a mão é muito fácil de ler, mas muitas pessoas complicam o
código para confundir.

------------------------------
Creditos: Cursos Online Grátis
--------------------------------
Exercícios no Fórum Baixe7