Baixado 29 vezes
Carregado porRomario Moreira
Tags HTML
O documento fornece instruções sobre marcação HTML para formatar texto, inserir imagens, hiperlinks, listas e caracteres especiais. Ele explica tags para formatação de fonte, cores, alinhamento, inserção de imagens e atributos como largura, altura e borda. Também cobre listas ordenadas, não ordenadas e de definição.
Mais conteúdo relacionado
Tags HTML
- 1.
- 2. Tags para Formataçãode 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>
- 3. Tags para Formataçãode Fonte e Texto • Centralizar: <center>texto</center> • Alinhar à esquerda: <p align="left">texto</p> • Alinhar à direita: <p align="right">texto</p>
- 4. Tags para Formataçãode Fonte e Texto • Mudar cor do texto: <font color="red">texto</font> – Pode também ser utilizado hexadecimais para definir as mais variadas cores. os códigos
- 5. Tags para Formataçãode Fonte e Texto • 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
- 6. Tags para Formataçãode Fonte e Texto Tabela de cores e alguns códigos :
- 7. Tags para Formataçãode Fonte e Texto • Mudar a fonte: <font face="FreeMono">texto</font> • Mudar o tamanho da fonte: <font size="2">texto</font>
- 8. Inserindo Cor deFundo • 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.
- 9. Inserindo Cor deFundo • 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.
- 10. Inserindo Imagem deFundo • Se você quiser definir uma imagem de fundo para sua página use o seguinte código: <body background="fotos/imagem.jpg">
- 11. Inserir Imagem noSite • A tag para se inserir imagens é: <img src="imagem.jpg">
- 12. Texto Descritivo deImagem (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.
- 13. 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”>
- 14. Definindo Altura eLargura • 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%">
- 15. Definindo Contorno na Imagem •Para definir um contorno numa imagem usa-se o atributo "border"; Exemplo: <img src="imagem.jpg" border="5">
- 16. 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">
- 17. Inserindo Hyperlinks • Atag 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>
- 18. Inserir Hyperlinks emImagens • 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>
- 19. Abrir Links emNova 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>
- 20.
- 21. 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>
- 22. Listas ordenadas • Umalista 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>
- 23. 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>
- 24.
- 25. 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/