Tags HTML

Formatação de Texto

Componentes:
Rafael, Romário

Tags para Formatação de Fonte e Texto
• Itálico: texto
• Sublinhado: texto
• Negrito: texto

• Texto Riscado: <s>texto</s>
• Novo Parágrafo: texto

• Quebra de linha: 
• <MARQUEE > Texto </MARQUEE>

• Centralizar:
<center>texto</center>

• Alinhar à esquerda:
texto
• Alinhar à direita:
texto

• Mudar cor do texto:
texto
– Pode também ser utilizado
hexadecimais para definir as
mais variadas cores.

os

códigos

• A cor deverá ser escrito em inglês ou em código. Os
browsers disponibilizam até 256 cores para serem
usadas como cor de fundo, sendo que cada cor é
formada por um código RGB ( red / green / blue ) .
• O código é composto por três números:
•
•
•
•
•
•

2 intensidade do vermelho ( R );
2 intensidade do verde ( G
2 intensidade do azul ( B )
um valor que varia de 0 a 255.
R=000 ; G=000 ; B=000 == Preto
R=256; G=256 ; B=256 == Branco

Tabela de cores e alguns códigos :

• Mudar a fonte:
texto
• Mudar o tamanho da fonte:
texto

Inserindo Cor de Fundo
• Tag BODY parâmetro BGCOLOR: Esse TAG não
precisa de tag de fechamento , pois o próprio < BODY >
se encarregará disso. Sua função será a de colocar uma
cor de fundo para sua página. Sua sintaxe é :
<BODY BGCOLOR = "COR ">
• Onde : "COR " será a cor do fundo escolhido.

• Obs.: A tag BODY BGCOLOR pode ser colocado logo
após o tag BODY , ou até mesmo acoplado em um
mesmo tag.

Inserindo Cor de Fundo

• Para usar uma cor de fundo na sua página você
deve usar o seguinte código:
<body bgcolor="blue">
• Pode também utilizar os códigos hexadecimais para
definir as cores que combinem melhor.

Inserindo Imagem de Fundo
• Se você quiser definir uma imagem de fundo para sua
página use o seguinte código:
<body background="fotos/imagem.jpg">

Inserir Imagem no Site
• A tag para se inserir imagens é:
<img src="imagem.jpg">

Texto Descritivo de Imagem
(Quando a Exibição Estiver Desabilitada)
• O atributo "alt" para imagens é de uso obrigatório e
sua funcionalidade é que um texto descritivo de uma
imagem apareça sempre que a exibição das imagens
não estiver ativa no browser.
• Tag:
<img src="imagem.jpg" alt="Aniversário da Joana">

Aniversário da Joana

• Obs.: No Internet Explorer o “alt” erroneamente é utilizado por
muitos como “hint” de imgem. Em outros browsers como Opera,
Firefox, Safari, Epiphany e outros, o “alt” não funciona assim.

Título Para Imagens
• O atributo title quando utilizado em imagens tem a função
de mostrar o título que foi dado àquela imagem, quando o
usuário passar o mouse sobre ela.

• <img src=“imagem.jpg” alt=“ceu” title=“Um lindo Ceu Azul”>

Definindo Altura e Largura
• Para a largura usa-se o atributo "width“ e para altura o
"height". Podem-se definir os valores em pixels ou em
porcentagem:
<img src="imagem.jpg" width="200" height="100">
<img src="imagem.jpg" width=“25%" height=“30%">
<img src="imagem.jpg" width=“50%" >
<img src="imagem.jpg" height=“200%">

Definindo Contorno na
Imagem
• Para definir um contorno numa imagem usa-se o atributo
"border";
Exemplo:
<img src="imagem.jpg" border="5">

Usando Múltiplos Atributos
• Se quisermos definir as dimensões da imagem, um contorno
e um texto explicativo ("alt"), podemos definir a tag com
todos esses atributos. A ordem em que os colocamos não é
importante:
<img src="imagem.jpg" border="5" alt="Aniversário da
Joana" width="200" height="100">

Inserindo Hyperlinks
• A tag para se inserir hyperlinks é:
<a href=”http://www.uol.com.br”> Um rótulo para o link </a>

Exemplo:
<a href=”http://www.esj.eti.br”>O site mais bonito do
mundo!</a>

Inserir Hyperlinks em Imagens
• Para fazer com que os visitantes de um site possam ser
levados para outra página ao clicar numa imagem, basta
juntar a tag para imagem com a tag para link, exemplo:
<a href="http://www.outra_pagina.com"><img
src="fotos/imagem.jpg"></a>

Abrir Links em Nova Janela
• Se você não quer que as pessoas abandonem
completamente o seu site quando clicarem nos links, você
pode definir que os links sejam abertos numa nova janela.
Basta usar o atributo:
target='_blank'
<a href="http://www.pagina.com" target="_blank">Nome
do Link</a>

Listas Não Ordenadas
• Uma lista não ordenada é uma lista de itens. As listas de
itens são marcadas com bullets (tipicamente pequenos
círculos pretos).
• Uma lista não ordenada começa com a tag <ul>. Cada
item da lista começa com a tag <li>.
• Exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Listas ordenadas
• Uma lista ordenada é também uma lista de itens. As
listas de itens são marcadas com números.
• Uma lista ordenada começa com a tag <ol>. Cada
item da lista começa com a tag <li>.
• Exemplo:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Lista de Definições
• Uma lista de definições não é uma lista de itens. Esta é
uma lista de termos e explicações dos termos.
• Uma lista de definições começa com a tag <dl>. Cada
termo da lista de definições começa com a tag <dt>. Cada
definição da lista de definições começa com a tag <dd>.
• Exemplo:
<dl>
<dt>Item 1</dt>
<dd>O item 1 é sobre algo que você...</dd>
<dt>Item 2</dt>
<dt>Item 3</dt>
</dl>

Caracteres Especiais

á

á

Á

Á

ã

ã

Ã

Ã

â

â

Â

Â

à

à

À

À

é

é

É

É

ê

ê

Ê

Ê

í

í

Í

Í

ó

ó

Ó

Ó

õ

õ

Õ

Õ

ô

ô

Ô

Ô

ú

ú

Ú

Ú

ç

ç

Ç

Ç

Referências Bibliográficas
• http://erikasarti.net/html/acentuacao-caracteresespeciais/
• http://www.clem.ufba.br/tuts/html/c10.htm
• http://www.w3schools.com/html/html_lists.asp
• http://www.cultura.ufpa.br/dicas/htm/htm-outr.htm
• http://www.esj.eti.br/

Tags HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Tags HTML

Semelhante a Tags HTML (20)

Último

Último (20)

Tags HTML