Você não está conectado. Conecte-se ou registre-se

Básico de html.

Ir em baixo  Mensagem [Página 1 de 1]

1icon1 Básico de html. em Ter Ago 02, 2011 6:36 am

TecH

avatar
Administrador
Administrador
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 por exemplo é uma tag para o título do documento.<br /><br />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 é:<br /><br /><title>Título do Documento

Algumas marcações, no entanto, como as tags de início de parágrafo

, quebra de linha
e inserção de barra


não necessitam de seus pares.

Todo documento HTML deve iniciar com a tag e finalizar com o seu par .

Um documento HTML não faz diferença entre maiúsculas e minúsculas. Portanto tanto faz usar como <title>.<br /><br /> <br />O ESQUELETO DE UMA PÁGINA HTML<br />Um documento HTML divide-se em 2 partes essenciais: cabeçalho e corpo. Veja o exemplo abaixo:<br /><html> <br /><br />Tag de início do documento<br /><head> (cabeça do documento)<br /><title>título do documento
(final de cabeça do documento)

CABEÇALHO
(tag de início do corpo)

Primeiro nível de cabeçalho


Segundo nível de cabeçalho


(tag de final do corpo)

CORPO


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

CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE
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:

(início da cabeça)

Como Fazer uma Home Page







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

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:

[Você precisa estar registrado e conectado para ver este link.]

Dica: Use para fixar o fundo da página na tela.

(2)

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 é , que é chamada de âncora. A notação completa para um link é:

[Você precisa estar
registrado e conectado para ver este link.]
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 é:

[Você precisa estar
registrado e conectado para ver este link.]

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

[Você precisa estar
registrado e conectado para ver este link.]

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

[Você precisa estar registrado e conectado para ver este link.]


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


vlink="#rrggbb" alink="#rrggbb">

ou


alink="#rrggbb">


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 enquanto o subtítulo é colocado na seção do corpo documento HTML

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

Usa-se a tag , 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:

nível 1


nível 1

nível 2


nível 2

nível 3


nível 3

nível 4


nível 4
nível 5

nível 5
nível 6

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.

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
 serão mantidos os espaços e tabulações.

Exemplo:


Existe um
recurso

para apresentar

o texto exatamente
na forma em que ele foi digitado


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:

    (tag de início de lista não numerada)
  • item 1
  • item 2
  • item 3
(tag de fim de lista não numerada)
LISTAS NUMERADAS

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

    (tag de início de lista numerada)
  1. item 1
  2. item 2
  3. item 3
(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:

(tag de início de lista de definições)
(tag de termo abreviado)
(defininão)
(tag de termo abreviado)
(defininão)
(tag de fim de lista de definição)

O exemplo acima poderia ser de uma lista de alimentos:


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

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.

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



Ex.

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

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



Exemplo:

(3) Arquivos de imagens externos:





Moldura em imagens

Use
Use
Dica: Use 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:
BorboletaTexto com imagem
alinhada à esquerda
(2) Imagem à direita:
posiciona a imagem à direita do texto:


BorboletaTexto com imagem
alinhada à direita
(3) Texto alinhado ao topo da imagem:
BorboletaTexto no topo da imagem
(4) Texto alinhado ao rodapé da imagem:
BorboletaTexto no rodapé da imagem
(5) Texto alinhado ao centro da imagem:
BorboletaTexto 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 é:

[Você precisa estar registrado e conectado para ver este link.]

Exemplo:

O meu endereço eletrônico é [Você precisa estar registrado e conectado para ver este link.]

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

[Você precisa estar registrado e conectado para ver este link.]

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

[Você precisa estar registrado e conectado para ver este link.]

Não se esqueça de alterar o texto [Você precisa estar registrado e conectado para ver este link.] 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:
. Esta tag é ímpar e não possui par.

Para exibir uma barra normal, use:




Grossura das Barras

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











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


®

©


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



Fonte: [Você precisa estar registrado e conectado para ver este link.]

http://high-tech.livreforum.com

Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum