Onde guardar as imagens do seu site? Crie uma pasta chamada imagens.
Conforme o site for crescendo, você irá agradecer por ter feito isso. Se o site for muito grande você pode adicionar subpastas dentro da pasta imagens.
Adicionando imagens
Para adicionar imagens usamos o elemento <img> que não tem tag de fechamento.
<img src=”imagens/esquilo.jpg” alt=”um esquilo fofo” title=”o esquilo fofo”/>Atributo src
Deve sempre conter os atributos src que diz ao navegador onde encontrar a imagem. O que geralmente é uma URL relativa apontando para dentro do seu site.
Atributo alt
Da uma descrição em texto da imagem caso a pessoa não possa vê-la. Deve trazer uma descrição precisa da imagem para que os softwares de leitura de tela possam encontrá-lá. Caso seja uma imagem apenas para deixar a página mais atraente (e não tenha significado algum) o atributo alt deve ser colocado mas sem conteúdo entre as aspas.
Atributo title
Da informação adicional sobre a imagem. Muitos navegadores mostram esse texto quando o usuário passa o mouse por cima da imagem.
Altura e largura das imagens
<img src=”imagens/esquilo.jpg” alt=”um esquilo fofo” title=”o esquilo fofo” width=”600” height=”450” />Width = largura
Height = altura
Ambos em pixels. Quando especificamos o tamanho da imagem o navegador sabe o espaço que deve deixar para renderizar a imagem após o restante do código HTML. Já que as imagens demoram mais para carregar. Isso pode ser feito usando CSS.
Como posicionar as imagens
Dependendo de onde posicionar a imagem isso afetara a forma como é mostrada.
<img src=”imagens/bird.jpg” alt=”passaro” width=”100” height=”100”/>
<p> Pellentesque sed scelerisque ante. Donec malesuada congue nunc, consequat imperdiet lectus. Maecenas non egestas ex. Etiam id posuere mauris, quis lobortis mi. Aliquam volutpat justo quis accumsan ultricies. Aenean ullamcorper vestibulum dictum. Integer aliquet nibh ex, et iaculis dolor pulvinar id. Nullam vel nunc est. Curabitur vitae arcu non quam lobortis dignissim. Cras dapibus tortor elit, nec rhoncus erat pharetra sed. Suspendisse sed vehicula urna.</p>
<hr />
<p> <img src=”imagens/bird.jpg” alt=”passaro” width=”100” height=”100”/> Pellentesque sed scelerisque ante. Donec malesuada congue nunc, consequat imperdiet lectus. Maecenas non egestas ex. Etiam id posuere mauris, quis lobortis mi. Aliquam volutpat justo quis accumsan ultricies. Aenean ullamcorper vestibulum dictum. Integer aliquet nibh ex, et iaculis dolor pulvinar id. Nullam vel nunc est. Curabitur vitae arcu non quam lobortis dignissim. Cras dapibus tortor elit, nec rhoncus erat pharetra sed. Suspendisse sed vehicula urna.</p>
<hr />
<p> Pellentesque sed scelerisque ante. Donec malesuada congue nunc, consequat imperdiet lectus. Maecenas non egestas ex. Etiam id posuere mauris, quis lobortis mi. Aliquam volutpat justo quis accumsan ultricies. <img src=”imagens/bird.jpg” alt=”passaro” width=”100” height=”100”/> Aenean ullamcorper vestibulum dictum. Integer aliquet nibh ex, et iaculis dolor pulvinar id. Nullam vel nunc est. Curabitur vitae arcu non quam lobortis dignissim. Cras dapibus tortor elit, nec rhoncus erat pharetra sed. Suspendisse sed vehicula urna.</p>
<hr />A forma como posicionamos a imagem é importante porque o HTML mostra os elemementos em forma de bloco ou em linha. Elementos em bloco sempre aparecem numa nova linha, como os elementos <h1> e <p>.
Se o <img> é seguido de um elemento em forma de bloco, esse elemento é posicionado em uma nova linha após a imagem aparecer.
Elementos em linha são posicionados dentro de um elemento bloco e não começam em uma nova linha. Por exemplo os elementos <b>, <em> e <img>.
Se um elemento <img> é posicionado dentro de um elemento em bloco, qualquer texto ou outro elementos em linha serão posicionados ao redor da imagem. O que acontece no segundo e terceiro exemplo.
Veja mais sobre elementos em bloco e em linha.
Alinhamento horizontal
O alinhamento era um atributo muito utilizado para indiciar como as outras partes da página deveriam flutuar ao redor da imagem. Foi removido do HTML5 e novos sites devem usar CSS para controlar o alinhamento da imagem. Se olhar para código antigo por aí você provavelmente encontrará esse atributo. Pode assumir dois valores: left, right.
<p> <img src=”imagens/bird.jpg” alt=”passaro” width=”100” height=”100” align=”left”/> Pellentesque sed scelerisque ante. Donec malesuada congue nunc, consequat imperdiet lectus. Maecenas non egestas ex. Etiam id posuere mauris, quis lobortis mi. Aliquam volutpat justo quis accumsan ultricies. Aenean ullamcorper vestibulum dictum. Integer aliquet nibh ex, et iaculis dolor pulvinar id. Nullam vel nunc est. Curabitur vitae arcu non quam lobortis dignissim. Cras dapibus tortor elit, nec rhoncus erat pharetra sed. Suspendisse sed vehicula urna.</p>
<hr />Alinhamento vertical
O mesmo que ocorreu com o alinhamento vertical. Foi removido do HTML5 agora devemos usar CSS para conseguir esse efeito. Pode assumir três valores: top, middle e bottom. Quando posicionado dentro de um elemento bloco.
<p> <img src=”imagens/bird.jpg” alt=”passaro” width=”100” height=”100” align=”top”/> Pellentesque sed scelerisque ante. Donec malesuada congue nunc, consequat imperdiet lectus. Maecenas non egestas ex. Etiam id posuere mauris, quis lobortis mi. Aliquam volutpat justo quis accumsan ultricies. Aenean ullamcorper vestibulum dictum. Integer aliquet nibh ex, et iaculis dolor pulvinar id. Nullam vel nunc est. Curabitur vitae arcu non quam lobortis dignissim. Cras dapibus tortor elit, nec rhoncus erat pharetra sed. Suspendisse sed vehicula urna.</p>
<hr />As tags Figure e figure caption
O elemento <figure> foi introduzido no HTML5 para assosiar imagens a suas legendas. Você pode ter várias imagens dentro de um elemento <figure> desde que tenham a mesma legenda que é especificada pelo elemento <figcaption>.
<figure>
<img src=”imagens/animais.jpg” alt=”fotografia de um coiote” />
<br />
<figcaption> Coiotes geralmente caçam sozinhos e vivem em ambientes áridos. </figcaption
</figure>Referências:
Duckett, J. (2011). “HTML and CSS: Design and Build Websites.” Hoboken, NJ: Wiley.
VISUAL QUICKSTART GUIDE HTML 5 and CSS3 Seventh Edition, Elizabeth Castro, Bruce Hyslop
Was this helpful?
0 / 0