A Linguagem HTML

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>
</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>
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

Minhapagina3.html
<HTML>
<HEAD>
</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>
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:

Minhapagina4.html
<HTML>
<HEAD>
</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>
5. Formatar parágrafos
- Tag <P> - Parágrafos:

- Tag <BR> - Linhas

Minhapagina5.html
<HTML>
<HEAD>
</HEAD>
<BODY>
Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.
</BODY>
</HTML>
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)

Minhapagina6.html
<HTML>
<HEAD>
</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>
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.

Minhapagina7.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<img src="imagem01.jpg” alt="Aqui aparece o texto alternativo" border=1 width="100"
height="75">
</BODY>
</HTML>
8. Alinhando as imagens
Parâmetro ALIGN, com valores: top | middle | left | right

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

A Linguagem HTML

Enviado por

Dados do documento

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

A Linguagem HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Linguagem HTML

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

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

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

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

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

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

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

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

- Tag <P> - Parágrafos:

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

Alinhamento de textos com a tag <P>

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

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

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

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

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

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

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

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

Você também pode gostar