Como inserir uma imagem na sua pagina html passo a passo
Essa é uma dica para quem esta começando a escrever suas primeiras paginas, podemos colocar de um tudo no HTML e hoje vamos falar de imagens.
Se você é novato no HTML sugiro que leia o post anterior para não ficar boiando nesse post.
vamos lá!
como já sabemos para começar a escrever nosso site precisamos ensirir tags no nosso código, mas onde devo colocar? e que tag é essa para imagens?
lembrando do ultimo post vamos abrir nossa primeira pagina em html indo até a pasta que você salvou, clicando com o botão direito e abrindo com o bloco de notas, assim que você fizer isso você vai se depara com nosso primeiro código!
<html>
<head>
<title> oi mundo </title>
</head>
<body>
<h1> oi mundo </h1>
</body>
</html>
TA LEMBRADO?
então, para começar vou aprensentar a você a tag de imagens:
<img src="" /> essa é a tag de imagem muito simples e muito pequena, e como ela foi melhorada ao longo dos anos não precisamos escreve </img> para fecha-la, basta colocar a barra (/) no fim do código, do mesmo jeito que esta ai.
Quando eu escreve "< img " estou dizendo para o navegado, leia isso como uma imagem e mostre-a na tela, " src="" /> " olha sr.navegado esse é o lugar onde você vai encontrar a minha imagem.
então o que o navegador faz é ir até onde esta a imagem e mostra para você na tela, vamos testar?
no nosso código anterior entre body e barra body (<body> </body>) coloque a nossa nova tag, antes, vá até a pasta que salvamos nossa pagina e dentro dela crie uma nova pasta chamada "img", "imagem" como você preferir mas seja de forma simples.
dentro dessa pasta vamos salvar uma imagem qualquer, com um nome bem simples, aqui eu fiz assim
nome da pasta - img , nome da imagem em jpeg - bg
agora vamos na nossa tag
<img src="img/bg.jpg" />
mas o que é que você fez ai?
simples, estou falando assim para meu navegador, sr.navegado,por favor mostre como uma imagem na tela a imagem que eu salvei na pasta img, o nome da imagem é bg ela esta no formato jpeg (jpg).
exatamente assim que o navegador entende, src=" img/bg;jpg ".
caramba não consigo visualizar, continua tudo do mesmo jeito que estava!
acho que esquecemos de salvar o arquivo, um atalho para salvar que é muito utilizado é o ctrl + s
salva e vai em frente.
Complementos da tag img
tudo muito maneiro, tudo muito show, mas minha imagem ficou grande para o que eu quero fazer, se eu diminuir em um editor de imagem ela vai ficar feia, toda serrilhada com pixels e taus...
para isso vamos usar os complemento width="" height="" que traduzindo para o português querem dizer largura e altura, sim exatamente, você vai dizer ao navegador para mostrar a sua imagem com altura x e largura x, usando a medida em pixel.
por exemplo, vamos fazer essa nossa imagem ficar quadrada com 100 pixel de largura e de altura, vamos escrever assim <img src="img/bg.jpg" width="100" height="100" />
existem outros complemento para a imagem como title="" e alt=""
title="" é exatamente o que o nome diz, você da um titulo para a imagem, assim sempre que alguém passar o mouse por ela esse titulo vai aparecer.
alt="" essa foi uma ideia muito bacana para atender os deficientes visuais, a ideia era escrever textos nessa tag mas acabou ficando muito inviavel, pois teria que ser 2 textos uma para o conteudo da pagina e outro para a tag, então o que se adotou por padrão em alt="" seria uma descrição da imagem, por exemplo na imagem que estou usando é uma linda morena de vestido vermelho, então vamos escreve assim alt="na imagem uma linda morena de vestido vermelho" ou como achar melhor.
alt e title são duas tags importantes em questões de SEO, vamos falar sobre isso mais adiante aconselho a não procurar agora, tenha um pouco mais de paciência e estude, pratique.
então como fica a minha tag img completa?
<img src="img/br.jpg" alt="uma morena de vestido vermelho" title="linda morena" width="100" height="100" />
mais uma vez para fixa, estou dizendo para o navegado, mostre como imagem a minha imagem que esta na pasta img com o nome bg no formato jpeg, descreva ela como "uma morena de vestido vermelho" entitule como "linda morena", mostre com a largura de 100 pixels e com altura de 100 pixels.
código completo
<html>
<head>
<title> oi mundo </title>
</head>
<body>
<h1> oi mundo </h1>
<img src="img/br.jpg" alt="uma morena de vestido vermelho" title="linda morena" width="100" height="100" />
</body>
</html>
Extra:
imagens são muito utilizadas na internet, você vai precisar trabalhar com elas, exitem enumero formatos de imagem como bitmap, jpeg, gif, png e muitas outras, essas são as mais comuns.
para trabalhar com sites use sempre imagens leves, mescle qualidade e tamanho do documento sempre, os melhores formatoas para trabalha na web são JPEG, GIF e PNG.
caracteristcas das imagens
JPEG: as imagens jpeg são as melhores por serem leves e com uma qualidade boa, suas principais características: ela funciona assim, quando tiramos uma foto a câmera captura toda a luz de retorno do flash e em seguida elas digitaliza, no formato jpeg alguns pixels são deletados e entre os que sobraram é feito um degrade, isso mantém a qualidade da imagem e diminui o tamanho ocupado na memoria.
GIF: imagens animadas, essa imagens possuem apenas 256 cores porém são animadas, o conselho é trabalhar com elas mas em pequenas escalas, se pode fazer em outro formato faça!
PNG: imagens onde você pode selecionar uma parte visível, ou seja, eu quero retirar o fundo azul da imagem e deixar apenas meu rosto, se salvar em qualquer outro formato seu editor de imagem vai preencher o fundo como branco, por isso a imagem deve ser salva no formato PNG
Nenhum comentário:
Postar um comentário