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 possui 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:
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 Layout, 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:
Sites para ler mais sobre este assunto:
Gostar disto:
Be the first to like this artigo.
Margarete
Comentários recentes