Embed Size (px)
Citation preview
Linguagem HTML:Imagens e Links
Prof. André Constantino da SilvaProf. Rodolfo Francisco de Oliveira
IAM1 semestre de 2012
12 de março de 2012
Aula de Hoje
• Recursos
– Imagens
– links entre páginas da Internet
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
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>
A Tag <img>
A Tag <img>
• Utilizada para inserir imagem na página
• Atributos:
– src: indica a URL (endereço) da imagem que deve ser mostrada
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)
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>
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>
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”/>
O atributo align
• Várias tags também possuem o atributo align
– <img>
– <p>
– <h1>
– <h2>
– <h3>
– Entre outras
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.
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.
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>
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>
A Tag <a>
• E se eu quiser uma imagem clicável que vai para uma outra página?
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>
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
Linkando Páginas de Mesmo Servidor
• Considere a seguinte estrutura de diretório no servidor:
Index.html
<html>
<title>Índice</title>
<body>
<h1>Index</h1>
<a href=“___________">O Autor</a>
</body>
</html>
Index.html
<html>
<title>Índice</title>
<body>
<h1>Index</h1>
<a href="sobreAutor.html">O Autor</a>
</body>
</html>
Linkando Páginas de Mesmo Servidor
• Considere a seguinte estrutura de diretório no servidor:
Index.html
<html>
<title>Índice</title>
<body>
<h1>Index</h1>
<a href="sobreAutor.html">O Autor</a>
<p><a href=“_____________">IAM</a>
</body>
</html>
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>
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>
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>
Próxima Aula
• Criação de Formulários
