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.
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
HTML Imagens 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 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. 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>
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 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. O atributo align
• Várias tags também possuem o atributo align
– <img>
– <p>
– <h1>
– <h2>
– <h3>
– Entre outras
12. O atributo align
Testar 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. 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 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. Linkando Páginas de Mesmo Servidor
• Considere a seguinte estrutura de diretório no
servidor: