Embed Size (px)
DESCRIPTION
Algumas tags HTML Formatação de Texto e Listas
Citation preview
Formatação de Texto
Componentes:
Rafael, Romário
Tags para Formatação de Fonte e Texto
• Itálico: <i>texto</i>
• Sublinhado: <u>texto</u>
• Negrito: <b>texto</b>
• Texto Riscado: <s>texto</s>
• Novo Parágrafo: <p>texto</p>
• Quebra de linha: <br>
• <MARQUEE > Texto </MARQUEE>
Tags para Formatação de Fonte e Texto
• Centralizar:
<center>texto</center>
• Alinhar à esquerda:
<p align="left">texto</p>
• Alinhar à direita:
<p align="right">texto</p>
Tags para Formatação de Fonte e Texto
• Mudar cor do texto:
<font color="red">texto</font>
– Pode também ser utilizado os códigos hexadecimais para definir as
mais variadas cores.
• 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
Tags para Formatação de Fonte e Texto
Tabela de cores e alguns códigos :
Tags para Formatação de Fonte e Texto
• Mudar a fonte:
<font face="FreeMono">texto</font>• Mudar o tamanho da fonte:
<font size="2">texto</font>
Tags para Formatação de Fonte e Texto
• 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 Cor de Fundo
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">
• 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.
Aniversário da Joana
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
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>
<dd>O item 2 é sobre algo que você...</dd>
<dt>Item 3</dt>
<dd>O item 3 é sobre algo que você...</dd>
</dl>
Caracteres Especiais
á á Á Á ã ã Ã Ã â â Â Â
à à À À é é É É ê ê Ê Ê
í í Í Í ó ó Ó Ó õ õ Õ Õ
ô ô Ô Ô ú ú Ú Ú ç ç Ç Ç
Referências Bibliográficas
• http://erikasarti.net/html/acentuacao-caracteres-especiais/
• 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/
