Inserindo e manipulando imagens em uma página HTML

Marcadores: 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>

GCM DE ITUPEVA ADQUIRI NOVAS ARMAS

Comandante consegue emenda e GCM adquire novas armas Na tarde deste sábado (18) autoridades se reuniram na sede da GCM – Guarda Civil Municipal, ocasião em que a cidade de Itupeva recebeu a visita do Deputado Federal Paulinho da Força, Alexandre Pereira Superintendente do INCRA e Antônio Carlos Mangini, Presidente da Câmara de Cabreúva. Também esteve presente o Prefeito Marcão Marchi, o Vice prefeito Alexandre Mustafa, o presidente do Solidariedade de Itupeva Robson Oliveira, o Diretor Legislativo Claudiorley P De Souza, o representante da SERT-Secretaria Estadual do Emprego e Relações do Trabalho Ivan Junior e a Vereadora Tatiana Salles. A compra de novas armas só foi possível graças ao emprenho do Gcm Cruz que luta há um ano e meio para conseguir a emenda, sendo atendido pelo Deputado Federal Paulinho da Força (SD) que fez questão de vir à Itupeva fazer oficialmente a entrega destas armas que serão uma importante ferramenta na promoção da segurança para nossa populaçã...

Jornal de Itupeva

Pesquisar este blog