Inserindo e manipulando imagens em uma página HTML

Para começar precisamos ter uma imagem. Eu irei utilizar a imagem acima que criei no Fireworks.
Primeiramente, devemos saber alguns dados importantes sobre a imagem, tais como, tamanho em píxeis (altura e largura), nome e extensão (JPG, GIF, PNG).
Veja os dados da imagem acima:
Tamanho: 300px X 300px
Nome: minha_imagem
Extensão: .png

Inserindo imagens:

A tag utilizada para se inserir imagens é a tag <img />, que pode ser aberta e fechada no mesmo bloco da tag. Também precisamos informar o endereço da imagem ao navegador então para isso utilizaremos o comando src.
Exemplo:
<img src="link_da_imagem"/>
É importante observarmos que o link da imagem deve sempre terminar com o nome da imagem, ponto (.) a extensão do tipo da imagem. E se a imagem está em uma pasta no mesmo diretório do documento HTML, devemos colocar o nome da pasta seguido de barra (/), antes do nome da imagem.
Exemplo:
<img src="minha_pasta/minha_imagem.png"/>

Manipulando imagens:

Para manipular imagens a nossa preferência, dispomos de diversos comandos, os quais explicarei logo abaixo.
1- Comandos de redimensionamento
Os comandos de redimensionamento de imagem servem para controlar o tamanho da imagem. São eles: width (largura), height (altura).
Os valores mais usados para estes comandos são valores em píxel, que já expliquei em postagens anteriores.
Devemos tomar muito cuidado na hora de usar estes comandos, pois se aplicarmos um tamanho muito distante ao tamanho real da imagem, teremos uma enorme perda de qualidade da mesma.
Exemplo:
<img width="300px" height="300px" src="imagens/minha_imagem.png"/>
2- Comando de alinhamento
O comando para alinhamento é o align, que tem como seus principais valores:
left - alinha a imagem a esquerda; right - alinha a imagem a direita; top - alinha a imagem com o topo do elemento mais alto de sua linha; bottom - alinha a imagem com a base mais baixa dos outros elementos de sua linha;
Exemplo:
<img align="right" src="imagens/minha_imagem.png"/>
Além do comando align podemos utilizar a tag <center> para alinhar uma imagem. A utilização desta tag eu já havia explicado em postagens anteriores.
3- Comandos de ajuste de margens
vspace - define o tamanho da margem nas bordas superior e inferior da imagem.
hspace - define o tamanho da margem nas bordas esquerda e direita da imagem.
Estes dois comandos acima trabalham com valores em píxel.
Exemplo:
<img vspace="35px" hspace="15px" src="imagens/minha_imagem.png"/>
4- Outros comandos
alt - insere um texto alternativo. Caso ocorra uma falha no carregamento desta imagem, o texto definido nesta tag será exibido. Isso é muito útil para imagens que são linkadas, cuja as mesmas explicarei em outra postagem.
Exemplo:
<img alt="Texto alternativo aqui!" src="imagens/minha_imagem.png"/>
title - insere um texto que será exibido somente se o usuário mantiver o mouse alguns segundos sobre a imagem.
Exemplo:
<img title="Está é minha imagem!" src="imagens/minha_imagem.png"/> 
border - insere uma borda a imagem. Este comando trabalha também com valores em píxel.
Exemplo:
<img border="15px" src="imagens/minha_imagem.png"/>

Veja abaixo como ficou o nosso código de exemplo:

<!DOCTYPE html>
<html>
           <head>
                      <title>Inserindo e manipulando imagens em uma página HTML</title>
           </head>
           <body>
                      <img src="imagens/minha_imagem.png" alt="Minha imagem!" title="Imagem que aprendi a inserir em um documento HTML" vspace="10px" hspace="15px" border="10px" align="right"/>
           </body>
</html>



Postagens relacionadas:

56 comentários:

Anônimo disse...

Ajudou muito!! Obrigado!
Queria saber como posso criar um album de fotos ou pode ser uma pasta para colocar as fotos dentro. Tenho um trabalho do Técnico que é montar um site de fotografia.
Meu e-mail é:
quel_jakeline1@hotmail.com
desde já agradeco!!
Bjs Bjs

Anônimo disse...

Gostei do post!
queria saber como crio um album de fotos? Pode ser tambem uma pasta onde eu possa colocar as fotos. tenho um trabalho do tecnico que é criar um site de fotografia...
meu e-mail é : quel_jakeline1_jakeline@hotmail.com
desde já agradeco..
bjs bjs

Maik Basso disse...

Você pode começar usando o exemplo citado acima depois basta implementar as ações com javascript. Te adicionei no MSN, ficarei muito feliz em te ajudar!

Anônimo disse...

Muito bom, aprendi rápido. Muito obrigado!

Unknown disse...

Imagem com link, como faço p montar o codigo a direita? nao estou conseguindo..

Maik Basso disse...

Basta você ter um codigo de um link, depois substituir o texto do link pelo código de uma imagem, e para formular um estilo da imagem em sua página use CSS.

Unknown disse...

Sua página é perfeita...gostei demais...eu só queria uma dica se puder me ajudar..queria um formulário, que manda-se o comentario direto para minha página e com uma imagem incluida e definida por mim...tipo aqueles form que tem vela virtual...
Pode me ajudar
merinamagia@gmail.com

Maik Basso disse...

Olá Marina, fico feliz por ter gostado de minha página. Mas vamos a sua dúvida, primeiramente leia meu artigo "Construindo formulários em HTML", após isso você estará apta a desenvolver tal formulário, mas ainda assim terá que estudar uma linguagem de programação como PHP para desenvolver seu script de envio, além de dispor de um servidor de hospedagem.

Te enviei um exemplo de código de um formulário por email, espero que sirva de exemplo para a criação de seu formulário.

Anônimo disse...

Se a imagem estiver em uma pasta anterior a do css por exemplo como se faz

Unknown disse...

Muito bom, está tudo muito bem explicado pois era o que eu estava mesmo procurando. Obrigado!

Maik Basso disse...

Utilize os dois pontos para subir uma pasta.

Exemplo:
src="../minha_imagem.png"

Anônimo disse...

Muito bom, explicações de fácil entendimento e com exemplos.
Estou começando a aprender a linguagem e site me auxiliou muito bem.

Anônimo disse...

MINHA IMAGEM NÃO APARECE , PORQUE ?

Maik Basso disse...

Verifique o se a imagem se encontra no endereço informado como parâmetro no comando “src”.

Bia disse...

Obg !! Me ajudou MUITO

UHUUUU !

Anônimo disse...

obg!

Anônimo disse...

Me ajudee, eu não entendi nada minhas amigas são burras estou na aula de informática e elas não correm atrás, e agr '-'

Anônimo disse...

estou tentando entender mais não estou conseguindo...

Unknown disse...

Colocar a imagem dentro do HTML é facil, nao sei é como colocar a imagem com um link de redirecionamento para outro lugar

Maik Basso disse...

Leia o artigo "Links em HTML" lá eu explico como fazer isso.

Anônimo disse...

ok

Anônimo disse...

Boa tarde,

gostaria de algumas informações. Estou montando um site (desses gratuitos) e vejo que várias pessoas conseguem postar imagens onde o meu não tem onde enviá-las do computador, somente por códigos. Gostaria de mais informações de como fazer. Muito Obrigada! Bruna

Maik Basso disse...

Boa tarde, as únicas plataformas gratuitas que eu já usei foram o Blogger e o Wordpress, e essas plataformas oferecem suporte a upload de imagem através dos seus editores de texto das postagens.

Drakowisky disse...

Teria como criar tipo um catalogo de imagens, que possa selecionar as imagens desejadas e enviar um formulario especificando quais???

Maik Basso disse...

Sim teria, para isso seria necessário usar linguagens como PHP, HTML, CSS e javascript.

Unknown disse...

Valeu, depois desta, dei um pulo de alegria!

Anônimo disse...

Cara, Excelente pôster, ficou muito feliz com pessoas como você, que dedicam um pouco do seu tempo para ensinar coisas valiosas as pessoas. Aprendi muito com esse pôster. Obrigado.

Anônimo disse...

Boa tarde galera, estou com a mesma duvida, não consigo colocar imagem no html.
olha a linha de comando
img src="imagens/pietro.png
Minha imagem esta na pasta minhas imagens.

Maik Basso disse...

Se a imagem está na pasta "minhas imagens" e você está setando o caminho dela para a pasta "imagens", ai está o problema com seu código, leia todo o postagem e baixe o conteúdo complementar e vera exemplos funcionando.

Unknown disse...

Ola, estou montando uma pagina de vendas em html com um vídeo, e gostaria que me ajudasse, como faço para o botão "comprar agora" fique transparente e apareça em um determinado tempo depois que a pagina for carregada?

se puder mim ajudar agradeço..

Maik Basso disse...

Faça isso com javascript, é fácil, basta no css você deixar o elemento como display:none e depois que o onload da pagina acontece você chama uma função que apos determinado tempo muda a propriedade do elemento de none para block.

Elisabeth Guimarães disse...

Olá! Quero criar um selo para publicar em meu blog e deixar disponível para as pessoas incorporarem a imagem em outros blogs ou sites. Você tem algum tutorial sobre isso? Agradecida

Maik Basso disse...

Leia meu artigo sobre links em HTML. Obrigado.

Matuzalém Guimarães disse...

Valeu! ótimas dicas!

Dr Miguel Lopes disse...

Fantástico trabalho os meus parabéns!Também sou web designer podem conhecer o meu trabalho em www.imagingsitesworldwide.com

Unknown disse...

Maravilha, Muito obrigada!!!!!!!!!!!

Anônimo disse...

Muito bom!!! Obrigada! Ajudou demais =)

Unknown disse...

Vlw, otimas dicas, ajudou muito no meu site.
http://www.contabilidadeolimpia.com.br

Portal WebDesigner disse...

Muito legal o artigo, me ajudou com os parametros de ajuste de imagem.

Anônimo disse...

Obrigadão =)

Unknown disse...

Bom dia. Eu consigo pegar imagem de um outro site que já tenho pronto? como faço isso?

Anônimo disse...

Muito bom e bem explicado. Parabens

BabuchoMusik disse...

* muito bom

Anônimo disse...

show

Costureira Reforma de Roupa disse...

Muito obrigada estamos em 2018 e vc me ajudou muito

Anônimo disse...

perfeito muito explicado muito bom parabens

Unknown disse...

Muito obrigado a explicação foi muito boa obrigado mesmo.

Anônimo disse...

Posso inserir "Class" no codigo?

Maik Basso disse...

Sim pode com certeza!

João Paulo Da Silva Lopes disse...

Post muito bom, deu para aprender muita coisa de uma forma simples e descomplicada.Muito bom mesmo parabenizo pessoas assim que tem um tempo para ensinar ....

Ismael disse...

Gostei muito

Unknown disse...

muito bom!

Polli Jenny disse...

Obrigada pelo artigo, gostaria de saber como faço pra colocar um texto dentro da imagem.

Anônimo disse...

Salvou em, obrigado!!!

Anônimo disse...

como colocar um video player usando o html

Anônimo disse...

obrigado

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.