Ir para conteúdo

Tutorial Html

Loost

Por Loost
em Programação Web

 Share

Posts Recomendados

Loost

Loost 0

Postado
Postado

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 <p>, quebra de linha <br> 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 é:

 

<title></title>

 

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 é:

 

<meta name="description" content="descrição">

 

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

 

<meta name="description" content="Tutorial sobre HTML, dicas para construir homepage">

 

PALAVRAS CHAVES

 

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

 

<meta name="keywords"content="palavras chaves">

 

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

 

<meta name="keywords"content="HTML, tutorial, gif, homepage">

 

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>

 

<meta name="description" content="dicas de linguagem HTML, endereços

 

de imagens gifs, download de editores HTML.">

 

<meta name="keywords"content="home page, html, barras, gifs,

 

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 é:

 

<body text="#rrggbb"></body>

 

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 é:

 

<a name="PalavraChave">

 

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

 

<a href="#PalavraChave">Nome do Link</a>

 

(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 é:

 

<a href="NomeDoArquivo#PalavraChave">

 

(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:

 

<a href="Diretório/NomeDoArquivo#PalavraChave">

 

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 é:

 

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

 

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

 

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

 

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

 

ou

 

<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

 

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

 

Exemplo:

 

O documento HTML não segue<br> 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 <br clear=right> ou <br clear=left> libera o texto desse alinhamento. Para posicionar o texto em ambas as margens use <br clear=all>

 

Parágrafo

 

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

 

Exemplo:

 

O documento HTML não segue<p> 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...

 

<b></b> coloca o texto em negrito.

 

<i></i> 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 <p>  </p> 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:

 

<img src="NomeDoArquivo">

 

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

 

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

 

<img src="Diretório/NomeDoArquivo">

 

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

 

(3) Arquivos de imagens externos:

 

<img src="protocolo://servidor[:port]/path/filename">

 

<img src="http://members.tripod.com/~shibolete/constru.gif">

 

Para inserir imagens use a seguinte notação:

 

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

 

<img src="NomeDoArquivo">

 

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

 

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

 

<img src="Diretório/NomeDoArquivo">

 

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

 

(3) Arquivos de imagens externos:

 

<img src="protocolo://servidor[:port]/path/filename">

 

<img src="http://members.tripod.com/~shibolete/constru.gif">

 

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:

 

<address></address>

 

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 é:

 

<a href="mailto:logon@servidor">Nome do Link</a>

 

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:

 

<a href="mailto:login@provedor.com"><img src="imagem.gif"></a>

 

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>

 

<hr size=5>

<hr size=10>

<hr size=15>

<hr size=20>

 

Largura das Barras

 

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

 

<hr align="Left" Width="50%">

 

Alinhando as Barras

 

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

 

<hr align="Left" Width="50%">

<hr align="Right" Width="50%">

<hr align="Center" Width="50%">

 

Barras Animadas

 

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

 

<img src="http://www... barra.gif">

 

 

 

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

®

 

©

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 Ø = ø

 

By: Loost ;D Bom pessoal é isso aew, esse tuto n é meu eu apenas repassei, é de um grande amigo meu ;D!

 

Creditos : Carlos Neto!

 

:XTibia_smile:

Link para o comentário
Compartilhar em outros sites
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...