Uso de imagens e links com HTML

608 visualizações

Publicada em

Slide utilizado na disciplina de linguagens de programação para a web do curso técnico de informática do IFPE. Nesta aula é apresentado como é feito o uso de imagens e links em HTML

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Uso de imagens e links com HTML

  1. 1. Campus Garanhuns
  2. 2. LINKS• Âncoras para acessar outras partes de um site• Tag <a>
  3. 3. 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
  4. 4. EXEMPLO DE USO DA TAG A• Exemplo: <a href=‘index.html’ target=‘_parent’>Texto do link</a>
  5. 5. IMAGENS• Exibe uma imagem na página HTML• Tag <img>
  6. 6. 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
  7. 7. EXEMPLO DO USO DA TAG IMG<img src=‘audi.jpg’ alt=‘Versão…’height=‘200px’ width=‘100px’>
  8. 8. LINKS E IMAGENS• É possível associar imagens a links
  9. 9. EXERCÍCIO1. Incluir uma imagem em uma página HTML2. Associar um link a esta imagem
  10. 10. LISTA DE ITENS NÃO ORDENADA• Este é um exemplo de lista não ordenada• Tag <ul> e vários <li>
  11. 11. LISTA DE ITENS NÃO ORDENADA• Exemplo:<ul> <li>Item 1.</li> <li>Item 2.</li> <li>Item 3.</li></ul>
  12. 12. LISTA DE ITENS ORDENADA• Este é um exemplo de lista ordenada• Tag <ol> e vários <li>
  13. 13. LISTA DE ITENS ORDENADA• Exemplo:<ol> <li>Item 1.</li> <li>Item 2.</li> <li>Item 3.</li></ol>
  14. 14. EXERCÍCIO• Criem lista ordenadas e não ordenadas em vários itens• Façam o uso de ambas as listas

×