Introdução - HTML

Lucas Leite

Os arquivos em HTML – (HyperText Markup Language) - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo .doc (formato Word) para HTML.

A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.

Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria e seguem algumas regras:

-> As TAGs aparecem sempre entre os sinais de “menor que” ();
-> Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).

A maioria das etiquetas tem a sua correspondente de fechamento:
.............................................

De um modo geral, as tags aparecem em pares, por exemplo:

Cabecalho

Onde:
-> A tag

indica o início na instrução; -> O texto Cabeçalho indica o texto que será formatado; -> E a tag

Lucas Leite

O símbolo que termina uma determinada etiqueta é igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente.
As etiquetas são necessárias, pois servem para definir a formatação de um bloco de texto, e assim marcamos onde começa e termina o texto com a formatação específica por ela.

PrimeCursos do Brasil

Há excessões para a utilização dos pares de etiquetas. Por exemplo, a que indica um final de um parágrafo:

não necessita de uma correspondente

Lucas Leite

Criando Documentos HTML

Lucas Leite

Lucas Leite

Todo documento HTML precisa conter certas tags padronizadas, no mínimo , , e , 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).

Curso de WebDesign

Este é o primeiro nível de cabeçalho.

Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.

Este é o segundo paragráfo
A tag contém, entre outras coisas, o (título), e a tag 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 é . 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 e .

O texto contido ente as TAG e 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 define o título da página. Observe a figura 1.1 o topo do navegador, está informado Curso de WebDesign.

A tag informa ao navegador o que deverá ser exibido graficamente. O corpo da página “BODY” é constituido pelo conteúdo que está entre as tags e .

Lucas Leite

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: e .

Este é o título

E este o cabeçalho de nível 2

Lucas Leite

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

.
 
COMANDO:
Texto do Cabeçalho
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.
COMANDO:

Cabeçalho nível 1

Cabeçalho nível 2

Cabeçalho nível 3

Cabeçalho nível 4

Cabeçalho nível 5

Cabeçalho nível 5

Lucas Leite

2.1.3 PARÁGRAFO
A tag

é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag

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.

Alinhamento de parágrafos

Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet  (esquerdo).

Este parágrafo utiliza o alinhamento centralizado

Este parágrado utiliza o alinhamento à direita.

Lucas Leite

2.1.4 QUEBRA DE LINHA
A tag
é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag
, 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

e da tag
:
MODELO I

Utilizando a tag p

Para verificar a diferença.

Lucas Leite

MODELO II

Utilizando a tag br

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:
<!-- Comentário da página -->

Lucas Leite