O dragãozinho traz textos de cultura pop, abordando temas como livro, filmes, séries e quadrinhos, além de alguns posts de assuntos diversos.

[HTML] Trabalhando com imagens


Dicas de HTML - trabalhando com imagens

Dando continuidade aos posts com dicas de HTML, este falará um pouco sobre como trabalhar com imagens. Como inserir, redimensionar, posicionar, colocar link ou pôr como imagem de fundo.

Veja também como criar um “sobre mim” em HTML sem a necessidade de plugins.

Inserindo imagens

Começando pelo básico. Para inserir a imagem, você dever usar a tag <img> com o atributo src, onde colocará a url da imagem.

<img src=”http://i.imgur.com/v53MVFI.png”/>

Exemplo de imagem com link quebrado

Além do src, as imagens também aceitam o atributo alt, onde você deve inserir um breve título para a imagem. Esse elemento é utilizado por deficientes visuais que dependam de leitores de tela e pelo scanner do Google, considerando que ele não “entende” imagens. Além disso, esse texto aparecerá caso a imagem não carregue ou o link esteja quebrado.

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados”/>

Existem também atributos para altura (height) e largura (width) da imagem. O recomendado é utilizar o elemento width e deixar o height vazio. Assim, a altura é adequada automaticamente de acordo com a largura da imagem, não alterando a proporção, para que a imagem não fique achatada ou esticada. O valor dessa medida é em pixel.

 

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados” width=”200″ />

 

Estilizando

Para alterar o estilo da imagem, acrescentamos o atributo style e dentro dele os estilos que desejamos modificar.

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados”
width=”200″ style=””/>

Alguns exemplos são:

 

Float

Para alterar a posição da imagem em relação ao texto, podemos definir o valor do float como left ou right, assim ele ficará a esquerda ou direita do texto.

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados” width=”200″
style=”float: left;“/>

Imagem com float left

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados” width=”200″
style=”float: right;“/>

Imagem com float right

 

Margin

Para deixar um espaço entre a imagem e o texto ou borda, utilize o margin. Isso evita que a imagem e o texto apareçam colados, como nos dois exemplos acima.

Podemos colocar margem em qualquer lado da imagem, assim como acima e abaixo. Existem algumas opções para fazer isso. É possível alterar cada lado individualmente utilizando margin-top, margin-bottom, margin-left e margin-right ou colocando todos os valores juntos no elemento margin, sendo a ordem top, right, bottom, left.

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados” width=”200″
style=”float:right; margin-left: 50px;“/>

<img src=”http://i.imgur.com/v53MVFI.png” alt=”Logo do Dragões Encaixotados” width=”200″ style=”float:right; margin: 10px 3px 40px 50px;“/>

Imagem com margem

 

Arredondando as bordas

Para arredondar as bordas, utilizamos o border-radius. Esse elemento receberá o valor em pixel para definir o quanto as bordas devem ser arredondadas.

<img src=”http://i.imgur.com/4y72959.png” alt=”Logo do Dragões Encaixotados” width=”200″
style=”float: right; margin-left: 50px; border-radius: 20px;“/>

Imagem com border-radius em 20px

O valor máximo é 100px, que deixará as bordas completamente arredondadas e a imagem em forma de círculo.

<img src=”http://i.imgur.com/4y72959.png” alt=”Logo do Dragões Encaixotados” width=”200″
style=”float: right; margin-left: 50px; border-radius: 100px;”/>

Imagem com border-radius em 100px

 

Inserindo links

Para adicionar um link à imagem, basta colocar ela dentro de uma tag <a>, assim:

<a href=”http://dragoesencaixotados.com.br”><img src=”http://i.imgur.com/4y72959.png”/></a>

Agora, quando clicar na imagem, ela redirecionará para a página inicial do Dragões Encaixotados. Note que a tag <a> precisa ser fechada com o </a> onde você desejar que acabe o link. Se não fechar, tudo que estiver abaixo ficará como link também. Além disso, ela recebe o atributo href, onde ficará a url para a qual a imagem deve ser redirecionada.

 

Background

Inserindo a imagem

Aqui começa a ficar um pouco diferente. Para colocarmos as imagens no fundo, não utilizamos a tag <img>, mas colocamos um background-image no style do elemento onde a imagem deve aparecer. Olhe o exemplo:

<p style=”background-image: url(http://i.imgur.com/v53MVFI.png); background-size: 200px;“>DRAGOES <br/> ENCAIXOTADOS</p>

A tag <p> nada mais é que um parágrafo, que nesse caso contém o texto “Dragões Encaixotados”. O resultado desse código seria esse:

Alguns pontos devem ser observados aqui:

  • A imagem está cortada porque a altura do elemento é apenas a do texto, e não a da imagem;
  • Por padrão, a imagem aparecerá diversas vezes para preencher todo o corpo do elemento.

Já vamos ver como arrumar isso, mas antes precisamos analisar como o código acima funciona. O background-image ficará dentro do style do elemento. Você deve obrigatoriamente colocar url() com o link dentro dos parênteses.

Além disso, também já defini o background-size, porque a imagem utilizada era muito grande. Assim, ela ficará no tamanho desejado. O valor utilizado no exemplo foi em pixel, mas podem ser utilizados valores em porcentagem também.

Se você quiser que a imagem ocupe todo o espaço, coloque background-size: 100% e a largura da imagem será redimensionada de acordo com a largura do elemento.

 

Mostrando a imagem completa

Para que a imagem inserida apareça por completo e não fique cortada, precisamos aumentar o tamanho do elemento, e para isso utilizamos o padding.

<p style=”background-image: url(http://i.imgur.com/v53MVFI.png); background-size: 200px; padding-bottom: 150px“>DRAGOES <br/> ENCAIXOTADOS</p>

padding segue a mesma lógica do margin, você pode utilizar padding-top, padding-left, padding-right ou padding-bottom para definir o tamanho de apenas um dos lados ou apenas padding para definir o valor de todos, sendo a ordem dos valores top, right, bottom e left.

 

Desativando a repetição

Para que a imagem apareça apenas uma vez, defina o background-repeat como no-repeat.

<p style=”background-image:url(http://i.imgur.com/v53MVFI.png); background-size: 200px; padding-bottom: 150px; background-repeat: no-repeat;“>DRAGOES <br/> ENCAIXOTADOS</p>

 

Alterando a posição

É possível alterar a posição da imagem utilizando o background-position. Ele receberá dois valores, sendo o primeiro o valor da posição horizontal, que representará a distância que a imagem deve ficar da borda esquerda e o segundo o da posição vertical, com a distância que a imagem deve ficar da margem superior.

<p style=”background-image:url(http://i.imgur.com/v53MVFI.png); background-size: 200px; padding-bottom: 150px; background-repeat:no-repeat; background-position: 50px 5px“>DRAGOES <br/> ENCAIXOTADOS</p>


Se ficou com alguma dúvida em relação ao post, pode deixar um comentários ou chamar no facebook para solucionarmos o problema. E não esqueça de conferir o post sobre como fazer um “sobre mim” com HTML sem a necessidade de plugins clicando aqui.

Relacionados

Have any Question or Comment?

6 comments on “[HTML] Trabalhando com imagens

Como é bom encontrar dicas assim.
ajuda e muito quem está entrando na blogosfera agora..
Eu lembro que estudava muito HTML alguns anos atrás <3

Adorei

Reply

Esse é um daqueles posts de utlidade pública, hahah. Já salvei nos meus favoritos, quando tiver com alguma dúvida sobre imagens corro pra cá.
Arrasou, Simone.

http://www.3dimensoes.com

Reply
Simone Pinheiro

Que bom que gostou! Espero que possa ser útil para você <3

Reply

Guria, amei esse post com essas dicas, tô querendo aprender mais de html e que maravilhoso esse teu tutorial <3
Vou salvar nos favoritos pra ir pondo em prática!

PS: já quero mais posts desse, aguardando <3
Beijos,
pinguimtagarela.blogspot.com.br

Reply
Simone Pinheiro

Que bom que gostou! Estou com planos para ir fazendo outros nesse mesmo estilo <3

Reply

Salvando aqui na minha pastinha de links úteis! Maravilhoso esse post, quero mais 🙂

Reply

Deixe uma resposta