Inserir imagem em sites e blogues

Imagem de Free Photos por Pixabay

Inserir imagem em sites e blogues

Nível: Iniciante
Atualizado: 10/07/2022

Segundo o wikipédia, Imagem (do latim: imago) significa a representação visual de um objecto. Na web 2.0, a imagem contribui significativamente para a construção do layout, da aparência de sites e blogues e é um elemento muito usado por webdesigners and webmasters. Se você for um iniciante na arte de manipulação de imagens e códigos, dedique-se a leitura deste artigo que trará informações e códigos importantes para que você comece a tratar imagens.

As imagens são inserídas no código através da tag <img> e possuem atributos os quais definem o alinhamento, o tamanho, o posicionamento, o nome do arquivo, o endereço da página da internet cuja imagem está representando e outros.

Por exemplo:

<img src="https://i.imgur.com/BpfP199.png" alt="Imagem"/>

Agora vamos analisar os atributos da tag <img>:

SRC= especifica a URL ou caminho para o arquivo da imagem

alt= define um texto alternativo

align= especifica o alinhamento da imagem em relação à linha de texto

border= especifica a largura e o tipo de borda

height= informa a altura da imagem

width= informa a largura da imagem

hspace= define o espaço à direita e à esquerda

vspace= define o espaço acima e abaixo

lowsrc= carrega uma imagem em baixa resolução

usemap= define o nome do mapa de imagem

style= cria uma folha de estilo interna

O atributo align possui outros atributos:

absmiddle= alinha o meio da imagem com o meio da linha

absbottom= alinha o inferior da imagem com o inferior da linha

baseline= alinha o inferior da imagem com a base da linha

top= alinha a parte superior da imagem com o topo da linha

middle= alinha o meio da imagem com a parte inferior do texto

bottom= alinha o inferior da imagem com a parte inferior do texto

left= alinha à esquerda

right= alinha à direita

texttop= alinha o topo da imagem com o topo do texto

*Os valores dos atributos podem ser expressos em pixels (px) ou porcentagem (100%)

As imagens geralmente apresentam uma borda azul a qual pode ser retirada de três formas diferentes.

1. Código para retirar o sublinhado dos links e a borda das imagens:

Copie e cole o código abaixo dentro da TAG <HEAD></HEAD>:

<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:none} 
a img {border-width:0;}
</style>

2. Código para retirar a borda das imagens no Blogger:

Copie e cole o código abaixo dentro da TAG <IMG> do seu link:

border="0" style='border: 0px; padding: 1px;'

3. Código para retirar a borda das imagens no Blogger:

Procure este trecho no código HTML do seu blogue na aba Modelo, Editar HTML.

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor;
}

Substitua o "1" em "border:1px solid" pelo 0. Observe:

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border: 0px solid $borderColor;
}

Pronto! Salve as modificações e note que as bordas de todas as imagens dos artigos não existem mais.

Caso você não queira retirar a borda e sim customizá-la basta usar o elemento style.

Por exemplo:

style="border: medium dashed #FFOOOO"

>> medium é a largura (da mais fina a mais grossa, temos a thin, medium e thich)

>> dashed é o estilo (veja os valores permitidos abaixo)

>> #FFOOOO é a cor

Valores permitidos para border-style:

inherit= repete o valor do elemento superior (elemento-pai)

none= a borda não é renderizada em torno do elemento

dotted= a borda é formada por linhas pontilhadas

dashed= a borda é formada por uma série de tracinhos

solid= a borda é formada por uma linha contínua

inset= a borda está em 3D e dentro da superfície

outset= a borda está em 3D e saindo da superfície

double= a borda é desenhada por linhas duplas

Outros elementos igualmente importantes são o float (flutuação) que renderiza a imagem seguindo o fluxo do texto e position que define o posicionamento da imagem.

Valores permitidos para float: none (nenhum), left (à esquerda) e right (à direita)

Valores permitidos para position: static, relative, absolute, fixed

Dicas da autora:

Sites para hospedagem de imagens:

Inserir imagem em sites e blogues