Imagens
Utilizamos o elemento “img” para definir uma imagem em HTML; a tag “<img>” não possui uma tag de “fechamento”, ela é formada apenas pelos seus atributos. O principal atributo desta tag é o “src“, que informa onde a imagem pode ser localizada, outro atributo útil é o “alt“, que fornece uma descrição alternativa, para o usuário caso a imagem não possa ser carregada; seja por causa de uma conexão lenta, ou por um erro no endereço especificado na URL. O alvo indicado pelo atributo “src” deve ser uma URL válida, que pode apontar para uma imagem contida dentro do nosso site ou uma imagem de outro site da Internet.
Observem o código abaixo, nele temos uma seção e dentro desta há alguns elementos incluindo a nossa imagem.
<section class="exemplo">
<b>Exemplo 01</b>
<p>
<img src="../images/html5.gif" alt="HTML5 Icon">
</p>
</section>
O código acima gera o seguinte trecho de página
No exemplo anterior, o arquivo “html5.gif”, está armazenado na subpasta “images”; caso o endereço apontado pelo atributo “src” esteja errado, será apresentado o ícone de uma imagem quebrada e ao lado o conteúdo do atributo “alt“. Abaixo temos um exemplo onde o nome do arquivo está errado, logo a imagem não poderá ser carregada.
<section class="exemplo">
<b>Exemplo 02</b>
<p>
<img src="../images/html5a.gif" alt="HTML5 Icon">
</p>
</section>
Como temos um erro no nome do arquivo, nosso código, ao ser carregado em um navegador, gera uma saída semelhante à apresentada abaixo. Observem que o texto definido no atributo “alt” foi exibido no local da imagem, este comportamento se repete sempre que uma imagem não pode ser carregada, e na sua declaração foi utilizada um atributo mencionado.
Utilizando Hyperlinks
Podemos inserir links utilizando o elemento “a”, este elemento possui tanto a tag de abertura <a> quando a tag de fechamento </a>. Todo conteúdo que estiver entre estas duas tags representa a parte visual do Hyperlink, ou seja, aquilo que o usuário pode “clicar” para acionar o link. Geralmente utilizamos trechos de textos ou imagens como Hyperlinks. No exemplo de código a seguir, temos três links:
<p>
Clique
<a href="ajuda.html" target="_blank">aqui</a> para acessar a ajuda.
</p>
<p>
Acesse o
<a href="http://lrodrigo.sgs.lncc.br/wp">site</a>
para baixar o
<a href="http://lrodrigo.sgs.lncc.br/wp/prog_web/">material</a> do curso
</p>
Os hyperlinks, elementos “a” possuem vários atributos, os mais importantes são o “href” que indica o endereço, ou a URL, para o qual o hyperlink aponta; o outro atributo importante é o “target” que informa onde o hyperlink deve ser aberto. No primeiro exemplo atribuímos o valor “_blank” ao atributo “target”, desta forma, quando selecionarmos a palavra marcada como o texto do link, ou seja a palavra “aqui”, o navegador carregará a página “ajuda.html” em uma nova tela, ou aba, do nosso navegador. Caso não utilizemos o atributo “target” o endereço o hyperlink será carregado na mesma tela, ou aba, que a página atual.
Como podemos observar, na imagem abaixo, todos os links, especificados no exemplo anterior, foram estilizados na cor Azul, indicando que eles ainda não foram selecionados pelo usuário.
Utilizando uma imagem como um Hyperlink
Além de textos, também podemos utilizar imagens como Hyperlink. O processo consiste no mesmo dos Hyperlinks baseados em texto, mas neste caso o elemento “a” deverá envolver um elemento “img“, ou seja, uma imagem. Observem o exemplo abaixo, nele a imagem utilizada anteriormente passa a ser o elemento visual do nosso Hyperlink.
<section class="exemplo">
<b>Exemplo 03</b>
<p>
<a href="html5_tutorial.html">
<img src="../images/html5.gif" alt="HTML5 Icon">
</a>
</p>
</section>
