Você está na página 1de 5

Linguagem HTML

Todo documento HTML é composto de Tags. Começa o documento com a tag <HTML> e
termina com </HTML>.
De seguida incluimos o cabeçalho que é feito com as tags <HEAD> </HEAD>. E
também um título usando as tags <TITLE> ... </TITLE>.
O "corpo" do documento deve ser demarcado pelas tags <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 colocamos todos os códigos para
página.

1. Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina1.html

<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
Aqui vamos colocar os comandos em HTML.
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

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


Com elas podemos apenas definir o tamanho das letras, para cabeçalhos que vão do
tamanho 1 até 6, por níveis.

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina2.html

<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

Página 1
Linguagem HTML

3. A Tag <FONT>

Tem vários atributos: cor, tamanho e tipo de letra.


- Atributo: FACE - tipo de letra | COLOR – cor | SIZE - tamanho

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


Preto = black | Branco = white | Azul = blue | Amarelo = yellow | Vermelho = red

Também podemos usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais
comum de definir cores usadas na Internet. Para podermos colocar na página outras
cores diferentes, como um azul-claro. Algumas cores disponíveis:
PRETO - #000000 | BRANCO - #FFFFFF | VERMELHO - #FF0000 | VERDE - #00FF00
AZUL - #0000FF | ROSA - #FF00FF | AMARELO - #FFFF00

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina3.html
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
<FONT FACE=Times>Fonte Times New Roman </FONT>
<FONT FACE=Arial>Fonte Arial </FONT>
<FONT FACE=Courier>Fonte Courier New </FONT>
<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 vermelho </font>
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

4. Formatar textos

Formatar texto em negrito, itálico, sublinhado e centralizado:


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

Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos,
como por exemplo:

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina4.html
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>

Página 2
Linguagem HTML

<BODY>
<B> Texto fica em Negrito. </B>
<U> Texto Sublinhado.</U>
<I> Texto em Itálico. </I>
<CENTER> Texto centralizado. </CENTER>
<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

5. Formatar parágrafos

- Tag <P> - Parágrafos:


- Tag <BR> - Linhas

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina5.html
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

6. Alinhamento de parágrafos

Alinhamento de textos com a tag <P>


Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas
incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são:
- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior)

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina6.html
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
<p align="left">Texto alinhado à esquerda</p>
<p align="right">Texto alinhado à direita</p>
<p align="center">Texto centralizado</p>

Página 3
Linguagem HTML

<p align="justify">Texto justificado</p>


</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

7. Incluir imagens

<img src="nome do arquivo de imagem que vai aparecer">


Atributos de Imagem:
- Width e Height - largura e altura da imagem (Width: Largura da imagem - Height:
Altura da imagem). Não é obrigatório incluir.
- Alt - Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto
esta ainda não apareceu.
- Border - Tamanho da borda da imagem.

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina7.html
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
<img src="imagem01.jpg” alt="Aqui aparece o texto alternativo" border=1 width="100"
height="75">
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

8. Alinhando as imagens

Parâmetro ALIGN, com valores: top | middle | left | right

Abre o bloco de notas, digita o seguinte código, guarda com o nome


Minhapagina8.html
<HTML>
<HEAD>
<TITLE> Meu documento HTML com alinhamento de imagens </TITLE>
</HEAD>
<BODY>
<img src="imagem01.jpg">Vê como o texto fica na imagem. Este é um exemplo de
alinhamento padrão; não precisamos incluir nenhuma tag.
<hr>
<img src=" imagem01.jpg" align="top">
Este é um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de
alinhamento, só incluímos o align="top" na tag de imagem.

Página 4
Linguagem HTML

<hr>
<img src=" imagem01.jpg" align="middle">
Este é um exemplo de alinhamento no meio da imagem. Para este efeito incluímos o
align="middle" na tag de imagem
<hr>
<img src=" imagem01.jpg" align="left">
Agora este texto tem um efeito onde o texto fica ao redor da imagem, igual ao texto em
jornais. Trata-se de uma óptima configuração para quando desejamos colocar um texto
ao lado de uma foto que destaque mais o assunto do texto. Para este efeito incluímos o
align=" left" na tag de imagem
<hr>
<img src="imagem01.jpg" align=" right">
Vemos agora que a imagem está alinhada do lado direito e o texto fica ao redor. É
exactamente o oposto do alinhamento à esquerda.
<hr>
<CENTER><img src=""imagem01.jpg"></CENTER>
Para se ter uma imagem centralizada
</BODY>
</HTML>
Abre o documento que acabaste de criar e verifica como aparece no browser

9. Criando links
Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento
da mesma página ou site na Internet. Podemos fazer links internos, para documentos no
mesmo servidor, links externos para qualquer lugar na Web, ou até mesmo links para um
mesmo ponto dentro de uma página. Ambos dependem da tag:

<a href="nome-do-lugar-a-ser-levado">descrição</a>

- "Nome-do-lugar-a-ser-levado" colocas o arquivo html que queres que seja visitado,


por exemplo dados.htm se estiver na mesma pasta da página que estamos, ou por um
URL como http://www.aepf.pt.
- "Descrição" é o que vai aparecer sublinhado na home page indicando que pode ser
clicado. Por exemplo, se a descrição fosse "Clique aqui para visitar a AEPF", o código
seria:
<a href="http://www.aepf.pt”>Clique aqui para visitar o site da AEPF</a>

Também existem os links para fazer com que as pessoas enviem um email. Se você quer
um lugar para os usuários deixarem um email, faça assim:

<a href="mailto:teu email">Envie um email para mim! </a>

http://www.linhadecodigo.com.br/Artigo.aspx?id=81&pag=3

Página 5