Campus Garanhuns
LINKS
• Âncoras para acessar outras partes de um site
• Tag <a>
ATRIBUTOS DA TAG A
• Href
  • Descrição: usado para especificar a url que será
    carregada ao clicar no link
• Target
  • Descrição: usado para especificar onde o link será
    aberto
  • Valores: _blank, _self, _parent, _top
EXEMPLO DE USO DA TAG A
• Exemplo:



 <a href=‘index.html’ target=‘_parent’>Texto do link</a>
IMAGENS
• Exibe uma imagem na página HTML
• Tag <img>
ATRIBUTOS DA TAG IMG
• src
 • Descrição: especifica o caminho (pasta ou diretório) onde
   encontra-se a imagem
• width
 • Descrição: especifica a largura da imagem
• height
 • Descrição: especifica a altura da imagem
• alt
 • Descrição: especifica o texto que irá aparecer quando o mouse
   passar pela imagem
EXEMPLO DO USO DA TAG IMG




<img src=‘audi.jpg’ alt=‘Versão…’
height=‘200px’ width=‘100px’>
LINKS E IMAGENS
• É possível associar imagens a links
EXERCÍCIO
1. Incluir uma imagem em uma página HTML
2. Associar um link a esta imagem
LISTA DE ITENS NÃO ORDENADA
• Este é um exemplo de lista não ordenada
• Tag <ul> e vários <li>
LISTA DE ITENS NÃO ORDENADA
• Exemplo:

<ul>
  <li>Item 1.</li>
  <li>Item 2.</li>
  <li>Item 3.</li>
</ul>
LISTA DE ITENS ORDENADA
• Este é um exemplo de lista ordenada
• Tag <ol> e vários <li>
LISTA DE ITENS ORDENADA
• Exemplo:
<ol>
  <li>Item 1.</li>
  <li>Item 2.</li>
  <li>Item 3.</li>
</ol>
EXERCÍCIO
•   Criem lista ordenadas e não ordenadas em vários itens
•   Façam o uso de ambas as listas

Uso de imagens e links com HTML

  • 1.
  • 2.
    LINKS • Âncoras paraacessar outras partes de um site • Tag <a>
  • 3.
    ATRIBUTOS DA TAGA • Href • Descrição: usado para especificar a url que será carregada ao clicar no link • Target • Descrição: usado para especificar onde o link será aberto • Valores: _blank, _self, _parent, _top
  • 4.
    EXEMPLO DE USODA TAG A • Exemplo: <a href=‘index.html’ target=‘_parent’>Texto do link</a>
  • 5.
    IMAGENS • Exibe umaimagem na página HTML • Tag <img>
  • 6.
    ATRIBUTOS DA TAGIMG • src • Descrição: especifica o caminho (pasta ou diretório) onde encontra-se a imagem • width • Descrição: especifica a largura da imagem • height • Descrição: especifica a altura da imagem • alt • Descrição: especifica o texto que irá aparecer quando o mouse passar pela imagem
  • 7.
    EXEMPLO DO USODA TAG IMG <img src=‘audi.jpg’ alt=‘Versão…’ height=‘200px’ width=‘100px’>
  • 8.
    LINKS E IMAGENS •É possível associar imagens a links
  • 9.
    EXERCÍCIO 1. Incluir umaimagem em uma página HTML 2. Associar um link a esta imagem
  • 10.
    LISTA DE ITENSNÃO ORDENADA • Este é um exemplo de lista não ordenada • Tag <ul> e vários <li>
  • 11.
    LISTA DE ITENSNÃO ORDENADA • Exemplo: <ul> <li>Item 1.</li> <li>Item 2.</li> <li>Item 3.</li> </ul>
  • 12.
    LISTA DE ITENSORDENADA • Este é um exemplo de lista ordenada • Tag <ol> e vários <li>
  • 13.
    LISTA DE ITENSORDENADA • Exemplo: <ol> <li>Item 1.</li> <li>Item 2.</li> <li>Item 3.</li> </ol>
  • 14.
    EXERCÍCIO • Criem lista ordenadas e não ordenadas em vários itens • Façam o uso de ambas as listas