Aula 4 – Linguagem HTML - Imagens e links

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

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>
• 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>
<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.
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>
<html>
...
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>
...
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>
<body>
<h1>Index</h1>
<a href="sobreAutor.html">O Autor</a>
</body>
</html>

Index.html
<html>
<body>
<h1>Index</h1>
<p><a href=“_____________">IAM</a>
</body>
</html>

Index.html
<html>
<body>
<h1>Index</h1>
<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

Aula 4 – Linguagem HTML - Imagens e links

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Aula 4 – Linguagem HTML - Imagens e links (20)

Mais de André Constantino da Silva (20)

Último (19)

Aula 4 – Linguagem HTML - Imagens e links