| Um documento escrito em HTML (Hiper Textos Markup Language) é um texto comum no formato ASCII. |
| 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 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 |
| 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
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 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">
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">
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 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. |
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.
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 termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.
(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>
(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">
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>
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 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 |
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.
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.
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)
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)
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.
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"> 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 |
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.
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.
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>
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>
Para controlar a largura das barras use a palavra width e a porcentagem com o sinal de igual. Exemplo:
<hr align="Left" Width="50%">
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">
| 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:
| Carácter | 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 | ◯ 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 Ø = ø |
