Aula 4 – Linguagem HTML - Imagens e links

7,143 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,143
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
101
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 4 – Linguagem HTML - Imagens e links

  1. 1. Linguagem HTML: Imagens e Links Prof. André Constantino da SilvaProf. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 12 de março de 2012
  2. 2. Aula de Hoje• Recursos – Imagens – links entre páginas da Internet
  3. 3. Recursos• Tudo o que está publicado na Internet é considerado um recurso – Exemplo: imagens, vídeos, outras páginas• Cada recurso possui uma URL – Uniform Resource Location (localizador padrão de recursos) – Também conhecido como endereço eletrônico
  4. 4. A Tag <img>• Criar o seguinte arquivo HTML: <html> <body> <title>Manipulando Recursos na Internet</title> </body> <h1>Recursos na Internet</h1> Um objeto disponibilizado em uma rede é chamado de recurso. Portanto, recurso pode ser uma página HTML, uma imagem, uma impressora e são identificados por uma URL. <h2>URL</h2> URL é a sigla de Uniform Resource Locator, em português Localizador- Padrão de Recursos, é o endereço de um recurso disponível em uma rede. <p>Exemplo de imagem: <img src="http://bit.ly/GAvd3D"/> </body> </html>
  5. 5. A Tag <img>
  6. 6. A Tag <img>• Utilizada para inserir imagem na página• Atributos: – src: indica a URL (endereço) da imagem que deve ser mostrada
  7. 7. Atributos de Tags• São utilizados para fornecer informações adicionais a tag – Exemplo: cores, alinhamento de texto, tamanho de imagem, destino do link, etc• Notação: – <tag atributo=“conteudo”></tag>• Deve-se usar aspas duplas para limitar o conteúdo do atributo – Exceção: números e links sem espaços (mas é recomendável colocar)
  8. 8. A Tag <img>• Modificar seu arquivo HTML para: <html> ... <h2>URL</h2> URL é a sigla de Uniform Resource Locator, em português Localizador-Padrão de Recursos, é o endereço de um recurso disponível em uma rede. <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” alt=“exemplo de imagem” height=“150” width=“120”/> </body> </html>
  9. 9. A Tag <img>• Modificar seu arquivo HTML para: <html> ... <h2>URL</h2> URL é a sigla de Uniform Resource Locator, em português Localizador-Padrão de Recursos, é o endereço de um recurso disponível em uma rede. <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” align=“right” alt=“exemplo de imagem” height=“150” width=“120”/> </body> </html>
  10. 10. Atributos• A ordem dos atributos não influencia: – Exemplo 1: <img src=“http://bit.ly/GAvd3D” align=“center” alt=“exemplo de imagem” height=“150” width=“120”/> – Exemplo 2: <img src=“http://bit.ly/GAvd3D” align=“center” height=“150” width=“120” alt=“exemplo de imagem” /> – Exemplo 3: <img src=“http://bit.ly/GAvd3D” height=“150” align=“center” alt=“exemplo de imagem” width=“120”/>
  11. 11. O atributo align• Várias tags também possuem o atributo align – <img> – <p> – <h1> – <h2> – <h3> – Entre outras
  12. 12. O atributo alignTestar com as tags <h1>, <h2> e <p>:• center:• left:• right:• justify:• Observação: para testar, diminua o tamanho da janela do navegador usando o botão Restaurar e movimente as bordas da janela do navegador para ver o que acontece.
  13. 13. O atributo align• center: centraliza o objeto entre as margens.• left: desliza o objeto para a margem a esquerda. O texto subsequente ficará do lado direito.• right: desliza o objeto para a margem a direita. O texto subsequente ficará do lado esquerdo.• justify: o texto é justificado entre as margens, caso necessite, o navegador inclui espaços em branco.
  14. 14. A Tag <a>• Utilizada para criar links entre as páginas• Atributos: – href: URL que será exibida caso o link seja clicado• Formato:<a href=“link_destino”>conteúdo para clicar</a>
  15. 15. A Tag <a>• Modificar seu arquivo HTML para: <html> ... <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” align=“center” alt=“exemplo de imagem” height=“150” width=“120”/> <p><a href="http://www.google.com">Link para o Google</a> </body> </html>
  16. 16. A Tag <a>• E se eu quiser uma imagem clicável que vai para uma outra página?
  17. 17. A Tag <a><html>... <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” align=“center” alt=“exemplo de imagem” height=“150” width=“120”/> <p>Exemplo de imagem com link: <a href=“http://www.google.com”> <img src=“http://bit.ly/GArEwq” alt=“Ir para o Google” height=“100” width=“140”/> </a> </body></html>
  18. 18. Linkando Páginas de Mesmo Servidor• Quando linkamos páginas do mesmo servidor não é bom colocarmos a URL completa no atributo href – Quando mudamos o endereço do servidor, temos que mudar todas as páginas! – Solução: caminho relativo
  19. 19. Linkando Páginas de Mesmo Servidor• Considere a seguinte estrutura de diretório no servidor:
  20. 20. Index.html<html> <title>Índice</title> <body> <h1>Index</h1> <a href=“___________">O Autor</a> </body></html>
  21. 21. Index.html<html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> </body></html>
  22. 22. Linkando Páginas de Mesmo Servidor• Considere a seguinte estrutura de diretório no servidor:
  23. 23. Index.html<html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> <p><a href=“_____________">IAM</a> </body></html>
  24. 24. Index.html<html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> <p><a href="IAM/ocurso.html">IAM</a> </body></html>
  25. 25. IAM/ocurso.html<html> <title>Descrição do Curso de IAM</title> <body> <h1>O Curso de IAM</h1> <a href=“___________">Voltar</a> </body></html>
  26. 26. IAM/ocurso.html<html> <title>Descrição do Curso de IAM</title> <body> <h1>O Curso de IAM</h1> <a href=“../index.html">Voltar</a> </body></html>
  27. 27. Próxima Aula• Criação de Formulários

×