| 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. |
| 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. |
| 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. |
| O TÍTULO |
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 |
<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 |
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 |
(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 |
<body text="#rrggbb"></body>
| OS LINKS |
| A NATUREZA DOS LINKS |
(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 |
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 |
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 |
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 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 |
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 |
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 |
<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 |
<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 |
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 |
(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 |
| (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É |
<address></address>
Coloca-se no endereço o nome do autor do documento e o endereço para contato.
| COMO INSERIR SEU EMAIL |
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 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
|
◯
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 Ø = ø
|
Nenhum comentário :
Postar um comentário