TUTORIAL HTML

TUTORIAL BÁSICO HTML

O QUE É HTML?
O QUE É HIPERTEXTO?
USANDO UM EDITOR DE TEXTO
AS TAGS
O ESQUELETO DE UMA PÁGINA HTML
O CABEÇALHO DO DOCUMENTO
O TÍTULO DO DOCUMENTO
A DESCRIÇÃO DO DOCUMENTO
AS PALAVRAS CHAVES DO DOCUMENTO
INSERINDO COMENTÁRIOS NO DOCUMENTO
O CORPO DO DOCUMENTO
USANDO PADRÕES DE FUNDO
AS CORES DO TEXTO
USANDO OS LINKS
A NATUREZA DOS LINKS

LINKS RELATIVOS
LINKS ABSOLUTOS
AS CORES DOS LINKS
O SUBTÍTULO
A FORMATAÇÃO DO TEXTO
TEXTO PRÉ-FORMATADO
LISTAS NÃO NUMERADAS
LISTAS NUMERADAS
LISTAS DE DEFINIÇÃO
COMO INSERIR IMAGENS
COMO POSICIONAR IMAGENS
INFORMAÇÕES DE RODAPÉ
COMO INSERIR SEU EMAIL
COMO INSERIR BARRAS
TAGS ESPECIAIS

O QUE É HTML?

Um documento escrito em HTML (Hiper Textos Markup Language) é um texto comum no formato ASCII.

O QUE É HIPERTEXTO?

Hipertexto são aqueles itens marcados numa página WEB que, quando clicados, levam a imagens ou informações mais detalhadas sobre o assunto. O Hipertexto é um texto (ou uma imagem) grifado e destacado na página por uma cor diferente da cor do texto no qual está inserido. Quando se coloca o cursor sobre o hipertexto, o cursor muda seu formato para um ícone representado por uma mão.

Exemplo de Hipertexto: Clique aqui para...

CRIANDO UMA PÁGINA HTML USANDO UM EDITOR DE TEXTO

Uma página HTML pode ser criada em qualquer editor de texto (Bloco de Notas, WordPad, etc), desde que seja salvo no formato ASCII.

Por exemplo: Se você criar um documento usando Bloco de Notas, deve salvá-lo no formato .txt. Ao salvá-lo modifique a extensão .txt para .htm ou .html. Se seu documento, no formato .txt se chama Index.txt altere-o para Index.htm ou Index.html. Porém, lembre-se que o documento somente pode ser considerado HTML se nele houver o esqueleto da linguagem HTML.

AS TAGS

As marcas utilizadas para produzir o hipertexto são chamadas tags. Uma tag consiste dos sinais < (menor que) e > (maior que) e um texto dentro deles. A notação <title> por exemplo é uma tag para o título do documento.

As tags devem ser usadas em pares, devendo haver uma tag que inicia a marcação e uma tag que a finaliza. A tag de finalização deve ter uma barra "/" antes do texto. Por exemplo, a marcação completa para o título de um documento é:

<title>Título do Documento</title>

Algumas marcações, no entanto, como as tags de início de parágrafo , quebra de linha e inserção de barra <hr> não necessitam de seus pares.

Todo documento HTML deve iniciar com a tag <html> e finalizar com o seu par </html>.

Um documento HTML não faz diferença entre maiúsculas e minúsculas. Portanto tanto faz usar <TITLE> como <title>.

O ESQUELETO DE UMA PÁGINA HTML

Um documento HTML divide-se em 2 partes essenciais: cabeçalho e corpo. Veja o exemplo abaixo:

<html>	Tag de início do documento
<head> (cabeça do documento) <title>título do documento</title> </head> (final de cabeça do documento)	CABEÇALHO
<body> (tag de início do corpo) <h1>Primeiro nível de cabeçalho</h1> <h2>Segundo nível de cabeçalho</h2> </body> (tag de final do corpo)	CORPO
</html>	Tag de final do documento

CABEÇALHO DO DOCUMENTO

A cabeça do documento deve conter as informações mais essenciais da página.

Coloca-se no cabeçalho o Título do documento, a descrição, palavras chaves e comentários

O TÍTULO

Todo documento HTML deve ter um título que servirá para identificar o documento. O título do documento não é visualizado na página mas aparece na barra de título do browser de navegação. O título não é o mesmo que cabeçalho. O título é o nome do arquivo. É através do título que sua home page será procurada pelos catálogos de busca.

A tag de título é:

Por exemplo: minha página tem o título CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE. Então a tag para o título de minha página é:

<title> CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</title>

A DESCRIÇÃO

A cabeça do documento deve conter uma descrição da página. Sobre o que ela trata e o que tem a oferecer. A tag para a descrição é:

Por exemplo: minha página trata de HTML. A notação para minha página é a seguinte:

PALAVRAS CHAVES

As palavras chaves também servirão para a busca de sua home page. A tag de palavras chaves é:

A notação acima para minha página é:

COMENTÁRIOS

Você pode inserir comentários adicionais na cabeça do seu documento usando a marcação <!>

Portanto o cabeçalho de um documento HTML ficaria assim:

<head> (início da cabeça)

<title>Como Fazer uma Home Page</title>

de imagens gifs, download de editores HTML.">

programação">

<!Home Page criada por...usando o programa... >

</head> (final de cabeça)

O CORPO

O corpo do documento é a parte que aparece na Home Page. O texto de algumas tags colocadas nesta sessão do documento não são visualizados na tela, mas sim os seus efeitos. É o caso, por exemplo, das tags de padrão de fundo, cor de texto e cores de link, vlink e alink.

PADRÕES DE FUNDO

Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação para os dois padrões de fundo são:

(1)<body background="arquivo.gif"></body>

Esta notação indica fundos com textura. Se o arquivo gif estiver no mesmo servidor, mas em outro diretório, deve ser indicado o seu caminho path/name. Se estiver em outro servidor, sua URL deve ser indicada:

Tipo://host.domínio[:porta]/path/NomeDoArquivo.

Dica: Use <bgproperties="fixed"> para fixar o fundo da página na tela.

(2)<body bgcolor="#rrggbb"></body>

Esta notação indica fundos no padrão RGB. Usa-se um código no formato hexadecimal precedido pela tralha #. Clique em Tabela de Cores para ver as cores com seus respectivos códigos RGB.

CORES DO TEXTO

As cores do texto são indicadas, usando-se o mesmo código hexadecimal dos padrões de fundo RGB. A notação para indicar a cor do texto é:

OS LINKS

Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.

A NATUREZA DOS LINKS

(1) Pode-se ligar partes de um texto ou imagens no mesmo documento. Este tipo de link encaixa-se na categoria de link relativo.

(2) Pode-se ligar partes de um texto ou imagens de outros documentos localizados no mesmo diretório. Este tipo de link encaixa-se na categoria de link relativo.

(3) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em diretório diferente. Este tipo de link encaixa-se na categoria de link relativo.

(4) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em Provedor diferente. Este tipo de link encaixa-se na categoria de link absoluto.

A tag que faz a ligação hipertexto é <a>, que é chamada de âncora. A notação completa para um link é:

<a href="texto ou imagem vinculada"></a>

LINKS RELATIVOS

(1) Links no mesmo documento:
Para interligar parte de um texto a outro texto no mesmo documento, usa-se uma âncora de nome, para identificar o primeiro trecho do texto, e uma âncora interna para identificar a outra parte do texto.

A âncora de nome e a âncora interna devem possuir uma palavra chave, idêntica em ambas.

Após as aspas da âncora interna e antes da palavra chave, usa-se a tralha (#).

No primeiro trecho, usa-se uma âncora de nome, cuja notação é:

No segundo trecho, usa-se uma âncora interna, cuja notação é:

(2) Links para outros documentos:
A notação utilizada para links em diretórios diferentes é igual a anterior, devendo, entretanto indicar-se o nome do arquivo na âncora interna. A notação é:

(3) Links para documentos em diretórios diferentes:
A notação é idêntica a do item (2), devendo, entretanto, indicar-se o nome do diretório.

Exemplo:

LINKS ABSOLUTOS

Quando se interliga textos ou imagens de provedores diferentes, usa-se links absolutos.

Os links absolutos devem ser indicado pelo uso da URL (Uniform Resource Locators). A notação para links absolutos é:

protocolo://servidor[:port]/path/filename

Por exemplo, para fazer um link absoluto em sua homepage com a página inicial deste documento, usa-se:

<a href="http//members.tripod.com/~shibolete/Index.html">CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</a>

CORES DOS LINKS

1 Links

Pode-se utilizar qualquer cor para o link, no entanto recomenda-se a cor padrão azul (blue) indicada pelo código rgb=#0000FF.

Isto porque quando se clica sobre um link sua cor é alterada para indicar ao usuário que aquele link já foi consultado.

Se não for indicada a cor do link, ele será automaticamente exibido na cor padrão configurada no seu browser, geralmente na cor azul.

2 Vlink

Indica a cor dos links já consultados.

3 Alink

Indica a cor do links ativados na página.

A notação para indicar as cores dos links, alinks e vlinks é:

A notação completa para as cores de textos e links é:

<body background="arquivo.gif" text="#rrggbb" link="#0000FF"

vlink="#rrggbb" alink="#rrggbb"></body>

<body bgcolor="#rrggbb" text="#rrggbb" link="#0000FF" vlink="#rrggbb"

alink="#rrggbb"></body>

O SUBTÍTULO

É o título que aparece na Home Page. Não deve ser confundido com o título do documento, que não é visualizado na página, mas aparece no alto da tela. O título é inserido na seção do cabeçalho <head><title></title></head> enquanto o subtítulo é colocado na seção do corpo documento HTML <body></body>

O subtítulo possui 6 níveis de tamanho, numerados de 1 a 6.

Usa-se a tag <hy>, onde "y" é um número entre 1 a 6.

Os níveis para subtítulo são em número de seis, conforme tabela abaixo:

<h1>nível 1</h1>	nível 1
<h2>nível 2</h2>	nível 2
<h3>nível 3</h3>	nível 3
<h4>nível 4</h4>	nível 4
<h5>nível 5</h5>	nível 5
<h6>nível 6</h6>	nível 6

FORMATAÇÃO DO TEXTO

O documento HTML não segue o padrão de formatação da maioria dos editores de texto. Ele não possui recursos para aumentar o espaço entre as palavras e entrelinhas nem para forçar a justificação do texto. Para obter esses recursos é preciso utilizar a tag apropriada.

A listagem a seguir mostra a função de cada tag:

Quebra de Linha

faz uma quebra de linha, mas não acrescenta espaço entre as linhas.

Exemplo:

O documento HTML não segue o padrão de formatação...

O texto acima é visualizado da seguinte forma:

O documento HTML não segue (quebra de linha)
o padrão de formatação...

Quebra de texto sem alinhamento

O alinhamento de imagens muitas vezes força o texto a acompanhar o alinhamento, tornando difícil o seu posicionamento. A tag ou libera o texto desse alinhamento. Para posicionar o texto em ambas as margens use

Parágrafo

inicia um novo parágrafo acrescentando espaço entre as linhas.

Exemplo:

O documento HTML não segue o padrão de formatação...

O texto acima aparece da seguinte forma:

O documento HTML não segue
(espaço entre linhas)
o padrão de formatação...

coloca o texto em negrito.

coloca o texto em itálico.

<center></center> centraliza o texto.

TEXTO PRÉ-FORMATADO

Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado. Usando-se a tag <pre></pre> serão mantidos os espaços e tabulações.

Exemplo:

<pre>
Existe um
recurso

para apresentar

o texto exatamente
na forma em que ele foi digitado </pre>

Este texto será mostrado na forma como foi digitado.

Existe um
recurso

para apresentar

o texto exatamente
na forma em que ele foi digitado

Para inserir espaço entre palavras usa-se   e   para espaços entre linhas.

LISTAS NÃO NUMERADAS

Para apresentar uma lista de opções não numeradas use as seguintes tags:

<ul> (tag de início de lista não numerada)
<li> item 1
<li> item 2
<li> item 3
</ul> (tag de fim de lista não numerada)

LISTAS NUMERADAS

Para apresentar uma lista de opções numeradas automaticamente, use as seguintes tags:

<ol> (tag de início de lista numerada)
<li> item 1
<li> item 2
<li> item 3
</ol> (tag de fim de lista numerada)

LISTAS DE DEFINIÇÕES

Apresenta uma série de definições, cada uma com um termo abreviado em destaque.

Exemplo:

<dl> (tag de início de lista de definições)
<dt> (tag de termo abreviado)
<dd> (defininão)
<dt> (tag de termo abreviado)
<dd> (defininão)
</dl> (tag de fim de lista de definição)

O exemplo acima poderia ser de uma lista de alimentos:

<dl>
<dt> Frutas
<dd> São alimentos comestíveis adocicados...
<dt> Legumes
<dd> São frutos secos... constituídos de um só carpelo.
</dl>

Então este exemplo é mostrado assim:

Frutas
São alimentos comestíveis adocicados...
Legumes
São frutos secos... constituídos de um só carpelo.

INSERINDO IMAGENS

Para inserir imagens use a seguinte notação:

(1) Arquivos de imagens que estão no mesmo diretório:

Ex. <img src="email.gif">

(2) Arquivos de imagens que estão em diretórios diferentes:

Ex. <img src="Imagens/email.gif">

(3) Arquivos de imagens externos:

Para inserir imagens use a seguinte notação:

(1) Arquivos de imagens que estão no mesmo diretório:

Exemplo: <img src="email.gif">

(2) Arquivos de imagens que estão em diretórios diferentes:

Exemplo: <img src="Imagens/email.gif">

(3) Arquivos de imagens externos:

Moldura em imagens

Use <img src="imagem.gif" vspace="30" para espaço vertical entre o texto e a imagem.

Use <img src="imagem.gif" hspace="30" para espaço horizontal entre o texto e a imagem.

Dica: Use <img src="imagem" Alt="descrição"> para uma descrição alternativa da imagem. Para usar uma imagem como link, sem borda, use < img src="imagem" border="0">

POSICIONANDO IMAGENS

Para definir a posição das imagens, usa-se 5 notações:

(1) Imagem à esquerda: posiciona a imagem à esquerda do texto: <img align="left" src="http://www... imagem.gif">	Texto com imagem alinhada à esquerda
(2) Imagem à direita: posiciona a imagem à direita do texto: <img align="right" src="http://www... imagem.gif">	Texto com imagem alinhada à direita
(3) Texto alinhado ao topo da imagem: <img align="top" src="http://www... imagem.gif">	Texto no topo da imagem
(4) Texto alinhado ao rodapé da imagem: <img align="bottom" src="http://www... imagem.gif">	Texto no rodapé da imagem
(5) Texto alinhado ao centro da imagem: <img align="middle" src="http://www... imagem.gif">	Texto no centro da imagem

INFORMAÇÕES DE RODAPÉ

Para inserir seu endereço na página, utilize a seguinte marcação:

Coloca-se no endereço o nome do autor do documento e o endereço para contato.

COMO INSERIR SEU EMAIL

Para inserir o endereço eletrônico usa-se a URL e a notação mailto.

A URL indica para onde deve ir a mensagem. A notação mailto abre o programa de correio configurado no seu navegador.

A sintaxe para o link de endereço eletrônico é:

Exemplo:

O meu endereço eletrônico é s2705933@yahoo.com

Para inserí-lo em minha página usei a seguinte notação:

<a href="mailto:s2705933@yahoo.com">Envie-me um email</a>

Para usar uma imagem como link para seu email, use a seguinte notação:

Não se esqueça de alterar o texto login@provedor.com pelo seu login e pelo nome do seu provedor de email, bem como alterar "imagem.gif pelo nome de sua imagem.

INSERINDO BARRAS

Para inserir barras horizontais basta utilizar a seguinte tag: <hr>. Esta tag é ímpar e não possui par.

Para exibir uma barra normal, use: <hr>

Grossura das Barras

Para exibir barras mais grossas, use o termo size (volume) em conjunto com a tag <hr>

Largura das Barras

Para controlar a largura das barras use a palavra width e a porcentagem com o sinal de igual. Exemplo:

Alinhando as Barras

Para alinhas as barras use as palavras Left, Right ou Center para alinhar à esquerda, à direita ou centralizar a barra. Exemplo:

Barras Animadas

Para inserir barras animadas (imagens gifs) use a sintaxe de inserção de imagens:

TAGS ESPECIAIS

As notações presentes em marcações, devem ser representadas com notações especiais para que possam ser exibidas na tela. Estas notações especiais sempre se iniciam por & (E comercial) e encerram-se com ; (ponto e vírgula).

Notação	Descrição	Aparência
<	Maior que	>
>	Menor que	<
&	E comercial	&
"	Aspas duplas	"
®	Marca registrada	®
&copy	Copyrights	©

É possível utilizar padrões de acentuação do Windows em documentos HTML, no entanto apenas poderá visualizar a acentuação o computador que reconhecer este padrão específico.

Para permitir a visualização de caracteres das marcações, por um grande número de máquinas, use o padrão ISO-Latin Alphabet, conforme tabela abaixo:

Caracter	Notação
Acento agudo	&xacute; onde x é uma letra qualquer, maiúscula ou minúscula
Acento grave	&xgrave; onde x é uma letra qualquer, maiúscula ou minúscula
Acento circunflexo	&xcirc; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com til	&xtilde; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com trema	&xuml; onde x é uma letra qualquer, maiúscula ou minúscula
Cedilha	Ç = Ç ou ç = ç
Letras unidas	&Aelig; = Æ ou æ = æ
Letra com argola	Å = Å ou å = å
N com til	Ñ = Ñ ou ñ = ñ
O cortado	Ø = Ø ou Ø = ø

nível 1

nível 2

nível 3

nível 4

nível 5

nível 6