html Inserindo e manipulando imagens em uma página HTML

[TheScription2016 46]

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:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

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

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

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:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

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:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

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

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

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:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

title - insere um texto que será exibido somente se o usuário mantiver o mouse alguns segundos sobre a imagem.

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

border - insere uma borda a imagem. Este comando trabalha também com valores em píxel.

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

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

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[' Business 83]

Obrigado, não sabia disso -n

[TheScription2016 46]

Obrigado, não sabia disso -n

Agora já esta sabendo HA HA! se precisar de mais alguma coisa só falar.