Marcadores:
HTML
Editar postagem
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:
55 comentários:
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
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
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!
Muito bom, aprendi rápido. Muito obrigado!
Imagem com link, como faço p montar o codigo a direita? nao estou conseguindo..
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.
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
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.
Se a imagem estiver em uma pasta anterior a do css por exemplo como se faz
Muito bom, está tudo muito bem explicado pois era o que eu estava mesmo procurando. Obrigado!
Utilize os dois pontos para subir uma pasta.
Exemplo:
src="../minha_imagem.png"
Muito bom, explicações de fácil entendimento e com exemplos.
Estou começando a aprender a linguagem e site me auxiliou muito bem.
MINHA IMAGEM NÃO APARECE , PORQUE ?
Verifique o se a imagem se encontra no endereço informado como parâmetro no comando “src”.
Obg !! Me ajudou MUITO
UHUUUU !
obg!
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 '-'
estou tentando entender mais não estou conseguindo...
Leia o artigo "Links em HTML" lá eu explico como fazer isso.
ok
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
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.
Teria como criar tipo um catalogo de imagens, que possa selecionar as imagens desejadas e enviar um formulario especificando quais???
Sim teria, para isso seria necessário usar linguagens como PHP, HTML, CSS e javascript.
Valeu, depois desta, dei um pulo de alegria!
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.
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.
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.
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..
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.
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
Leia meu artigo sobre links em HTML. Obrigado.
Valeu! ótimas dicas!
Fantástico trabalho os meus parabéns!Também sou web designer podem conhecer o meu trabalho em www.imagingsitesworldwide.com
Maravilha, Muito obrigada!!!!!!!!!!!
Muito bom!!! Obrigada! Ajudou demais =)
Vlw, otimas dicas, ajudou muito no meu site.
http://www.contabilidadeolimpia.com.br
Muito legal o artigo, me ajudou com os parametros de ajuste de imagem.
Obrigadão =)
Bom dia. Eu consigo pegar imagem de um outro site que já tenho pronto? como faço isso?
Muito bom e bem explicado. Parabens
* muito bom
show
Muito obrigada estamos em 2018 e vc me ajudou muito
perfeito muito explicado muito bom parabens
Muito obrigado a explicação foi muito boa obrigado mesmo.
Posso inserir "Class" no codigo?
Sim pode com certeza!
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 ....
Gostei muito
muito bom!
Obrigada pelo artigo, gostaria de saber como faço pra colocar um texto dentro da imagem.
Salvou em, obrigado!!!
como colocar um video player usando o html
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.