Introdução Ao HTML

Introdução ao HTML
Todo documento HTML é composto de Tags. Este é o nome dados aos

comandos HTML. Você deve começar sua página com a tag <HTML>, na
primeira linha do código, e terminar com </HTML> na última linha do
documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este
fechamento é necessário para que ela possa ser interpretada pelo
navegador. A estrutura das tags é formada por:
<xxx>: Este é o inicio da tag;*

</xxx>: Este é o fechamento da tag para que ela possa funcionar.**
* xxx é apenas uma representação de uma tag, não é uma tag HTML.
** Algumas tags não necessitam do fechamento. Neste caso você será
avisado.
Entre o início da tag e o seu fechamento ficam os textos, parâmetros,

atributos e até outras tags que vão formando a sua página. Se você não
fechar corretamente as tags, a página não irá ser mostrada direito ou
nem mesmo irá aparecer.
Após iniciar o documento com a tag <HTML> você deve incluir o

cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um
título usando o par <TITLE> ... </TITLE>. Geralmente, o título não é
mostrado na página, porém os navegadores o utilizam para entitular a
janela de visualização. Coloque um título bem claro e explicativo para
seus documentos.
- A tag <BODY>
O "corpo" do documento deve ser demarcado pelo par <BODY> ...

</BODY>. Nesta parte do documento serão colocados todos os
comandos para apresentação de uma página HTML. Entre as tags
<BODY> e </BODY> é que você vai colocar todos os códigos para sua
página.
Um documento simples seria digitado da seguinte maneira:
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
Aqui você coloca os comandos em HTML.
</BODY>
</HTML>
Os espaços em branco são ignorados quando o navegador "lê" o código.

Assim o código acima poderia ser escrito da seguinte forma:
<HTML><HEAD><TITLE> Meu documento HTML
</TITLE></HEAD><BODY>Aqui você coloca os comandos em
HTML.</BODY></HTML>
A vantagem é que isto economiza espaço em disco, mas é uma maneira

muito confusa e relaxada de programar. Acostume-se a organizar seus
programas para poder entendê-los posteriormente.
- Atributos do <BODY>
Através de atributos de <BODY>, podemos definir cores para os textos,

links e para o fundo das páginas, bem como uma imagem de fundo
(papel de parede da página):
<BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor"

VLINK="cor" BACKGROUND="imagem que vai aparecer">
Onde:
- BGCOLOR
Cor de fundo (padrão: cinza ou branco)
- TEXT
Cor dos textos da página (padrão: preto)
- LINK
Cor dos links (padrão: azul)
- ALINK
Cor dos links, quando acionados (padrão: vermelho)
- VLINK
Cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- BACKGROUND
Imagem de fundo. Saiba como colocar uma imagem de fundo clicando
aqui.
Em "cor", você pode colocar os valores de cores em inglês como:
Preto = black
Branco = white
Azul = blue
Amarelo = yellow
Vermelho = red
Você também pode usar o valor hexadecimal de cores ou "RRGGBB",

que é a forma mais comum de definir cores usadas na Internet.. Com
isso você pode colocar em sua página outras cores diferentes, como um
azul-claro. Para isso você deve ter o código das cores, e no lugar de
escrever o nome da cor em inglês, você coloca o valor da cor
Algumas cores disponíveis RRGGBB (hexadecimal):
Cor - Código HTML
PRETO - #000000
BRANCO - #FFFFFF
VERMELHO - #FF0000
VERDE - #00FF00
AZUL - #0000FF
ROSA - #FF00FF
AMARELO - #FFFF00
Agora que você já aprendeu como é o arquivo HTML básico , pode

começar a ver tags. Elas ficam após o comando <BODY> , no meio do
seu texto. Após <BODY> você já pode começar a escrever o que quiser.
Há duas formas de formatar o seu texto:
- Tags de título <H> - "Headings"
Com elas você pode apenas definir o tamanho das letras, mas não o tipo
de fontes. Veja agora como ficam as tags "headings" para cabeçalhos
que vão do tamanho 1 até 6.
<H1> Este é o primeiro nível </H1>

<H2> Este é o segundo nível </H2>
<H3> Este é o terceiro nível </H3>
<H4> Este é o quarto nível </H4>
<H5> Este é o quinto nível </H5>
<H6> Este é o sexto nível </H6>
Este é o primeiro nível

Este é o segundo nível
Este é o terceiro nível
Este é o quarto nível
Este é o quinto nível
Este é o sexto nível
- Tag <FONT>
- Você pode também usar as tags de fonte no lugar das tags de

"headings". Este tipo de tag é a mais usada, pois você pode definir mais
facilmente o tamanho do texto e fonte que você deseja, e personalizar
ainda mais a sua página. A tag é <FONT>, e dentro dela você pode
definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora
como usar as tags de fontes:
- Atributo FACE
- FACE:
Uma evolução que permite a escolha da fonte (tipo de letra) para os
textos, a tag é feita assim:
<FONT FACE=fonte_da_letra>Texto</FONT>
Exemplo:
<FONT FACE=Times>Fonte Times New Roman </FONT>

Fonte Times New Roman
<FONT FACE=Arial>Fonte Arial </FONT>

Fonte Arial
<FONT FACE=Courier>Fonte Courier New </FONT>

Fonte Courier New
- Atributo COLOR e SIZE
- COLOR e SIZE:
Atributos cor e tamanho:
<font size="3"> A palavra terá o tamanho 3</font>

A palavra terá o tamanho 3
<font color="red"> A palavra terá a cor vermelha </font>

A palavra terá a cor vermelha.
Podemos também combinar as tags acima:
<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em

vermelho </font>
O resultado final será:

Palavra com tamanho 3 e em vermelho
Formatando textos
Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado

e centralizado. Assim:
- Tags <B> , <U> , <I> e <CENTER>

<B> Texto </B> - Texto fica em Negrito.
<U> Texto </U> - Texto Sublinhado.
<I> Texto </I> - Texto em Itálico.
<CENTER> Texto </CENTER> Texto centralizado.
Os códigos também podem ser escritos uns sobre os outros, acumulando

seus efeitos, como por exemplo:
<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>
O resultado é:
Teste 1 e Teste 2
Parágrafos
- Tag <P> - Parágrafos:
Em HTML são necessários comandos para definir parágrafos. Não basta

você simplesmente pressionar "ENTER" para que a linha vá para baixo,
como em editores de texto comuns. Você terá que colocar uma tag para
um parágrafo ou para uma linha nova.
Para fazer um parágrafo novo, basta colocar a tag <P>. Por exemplo,
escreva no editor o seguinte, deste jeito:
Parágrafo 1<P>Parágrafo 2.
O resultado será este:
Parágrafo 1
Parágrafo 2
- Tag <BR> - Linhas
Como você pode ver, o navegador mesmo faz um parágrafo novo cada
vez que você coloca esta tag. Caso você queira simplesmente mudar de
linha, ao invés de mudar de parágrafo, coloque a tag <BR>. Por
exemplo, escreva:
Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.

O resultado será este:
Parágrafo 1
Linha 1
Parágrafo 2
Linha 2

Introdução Ao HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introdução Ao HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Introdução ao HTML

Todo documento HTML é composto de Tags. Este é o nome dados aos

<xxx>: Este é o inicio da tag;*

Entre o início da tag e o seu fechamento ficam os textos, parâmetros,

Após iniciar o documento com a tag <HTML> você deve incluir o

O "corpo" do documento deve ser demarcado pelo par <BODY> ...

Um documento simples seria digitado da seguinte maneira:

Os espaços em branco são ignorados quando o navegador "lê" o código.

A vantagem é que isto economiza espaço em disco, mas é uma maneira

Através de atributos de <BODY>, podemos definir cores para os textos,

<BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor"

Em "cor", você pode colocar os valores de cores em inglês como:

Você também pode usar o valor hexadecimal de cores ou "RRGGBB",

Algumas cores disponíveis RRGGBB (hexadecimal):

Cor - Código HTML

Agora que você já aprendeu como é o arquivo HTML básico , pode

- Tags de título <H> - "Headings"

<H1> Este é o primeiro nível </H1>

Este é o primeiro nível

Este é o quarto nível

Este é o quinto nível

Este é o sexto nível

- Você pode também usar as tags de fonte no lugar das tags de

<FONT FACE=Times>Fonte Times New Roman </FONT>

<FONT FACE=Arial>Fonte Arial </FONT>

<FONT FACE=Courier>Fonte Courier New </FONT>

- Atributo COLOR e SIZE

<font size="3"> A palavra terá o tamanho 3</font>

<font color="red"> A palavra terá a cor vermelha </font>

Podemos também combinar as tags acima:

<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em

O resultado final será:

Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado

- Tags <B> , <U> , <I> e <CENTER>

<U> Texto </U> - Texto Sublinhado.

<I> Texto </I> - Texto em Itálico.

<CENTER> Texto </CENTER> Texto centralizado.

Os códigos também podem ser escritos uns sobre os outros, acumulando

<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>

- Tag <P> - Parágrafos:

Em HTML são necessários comandos para definir parágrafos. Não basta

O resultado será este:

- Tag <BR> - Linhas

Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.

Você também pode gostar