Índice
Há momentos em que nem tudo é para gerar um formulário dentro de nossos documentos HTML, muitas vezes devemos incluir outros elementos como imagens dentro de algumas tags para modelar nossa página, para isso veremos neste tutorial como fazê-lo e os diferentes recursos incluída nela mesma.Para exibir uma imagem em nosso documento HTML, devemos usar o elemento img que possui os seguintes atributos:
- src
- alt
- altura
- largura
- usemap
- ismap
Agora vamos nos concentrar nos dois primeiros atributos, src Y alt; src permite-nos indicar o caminho a partir do qual o navegador irá procurar a imagem, pode ser um caminho relativo ou mesmo um URL, o atributo alt nos permite colocar um texto, este texto será mostrado apenas quando a imagem não estiver disponível, esteja ela no caminho em que foi especificada no src ou mesmo o navegador não consegue interpretá-lo.
Vejamos um exemplo de como incluir uma imagem em nosso documento HTML:
Exemplo Esta é uma forma comum de representar as três atividades em um triatlo.O primeiro ícone representa natação, o segundo representa ciclismo e o terceiro representa corrida.
Neste exemplo, também vemos mais dois atributos, o largura e ele altura Estas, como os seus nomes indicam, têm como função regular a largura e altura da imagem, com isso podemos garantir que a imagem ficará dentro dos tamanhos por nós estabelecidos, mesmo que a imagem seja maior do que será redimensionada, sem No entanto, deve-se ter cuidado, pois a imagem terá o mesmo peso, por isso é aconselhável colocar a imagem já editada do tamanho desejado e que nossa página carregue mais rápido.
Outro uso bastante comum é usar uma imagem como link para outras páginas, seja colocando o ícone de uma equipe, uma próxima seta por exemplo, é claro, agora com os novos frameworks CSS isso poderia ser menos comum, porém vamos ver como isso é feito para ter essa opção em nosso portfólio de ferramentas HTML.
Para incorporar a imagem, vamos simplesmente colocar o elemento img dentro de um elemento que se refere a uma página, como:
Exemplo Esta é uma forma comum de representar as três atividades em um triatlo.O primeiro ícone representa natação, o segundo representa ciclismo e o terceiro representa corrida.
Com isso conseguimos que a imagem agora seja nosso link como veremos na próxima tela a imagem não muda da forma como é mostrada:
