Transferir como PDF, PPTX
Carregado porAndré Constantino da Silva
Aula 4 – Linguagem HTML - Imagens e links
O documento descreve recursos em HTML como imagens e links. Inclui explicações sobre as tags <img> e <a> para inserir imagens e criar hiperlinks, respectivamente. Detalha atributos como src, href, alt e align. Demonstra como vincular páginas internas usando caminhos relativos para evitar quebras caso a URL do servidor mude.
Mais conteúdo relacionado
Semelhante a Aula 4 – Linguagem HTML - Imagens e links
Mais de André Constantino da Silva
Aula 4 – Linguagem HTML - Imagens e links
- 1. Linguagem HTML: Imagens e Links Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 12 de março de 2012
- 2. Aula de Hoje •Recursos – Imagens – links entre páginas da Internet
- 3. Recursos • Tudo oque 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. 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.
- 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. 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. 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. 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. Atributos • A ordemdos 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. O atributo align •Várias tags também possuem o atributo align – <img> – <p> – <h1> – <h2> – <h3> – Entre outras
- 12. O atributo align Testarcom 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. 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. 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. 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. A Tag <a> •E se eu quiser uma imagem clicável que vai para uma outra página?
- 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. Linkando Páginas deMesmo 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. Linkando Páginas deMesmo Servidor • Considere a seguinte estrutura de diretório no servidor:
- 20. Index.html <html> <title>Índice</title> <body> <h1>Index</h1> <a href=“___________">O Autor</a> </body> </html>
- 21. Index.html <html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> </body> </html>
- 22. Linkando Páginas deMesmo Servidor • Considere a seguinte estrutura de diretório no servidor:
- 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. 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. 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. 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. Próxima Aula • Criaçãode Formulários