Ir para conteúdo
Faça parte da equipe! (2024) ×

html Inserindo e manipulando imagens em uma página HTML


TheScription2016
 Compartilhar

Posts Recomendados

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.

 

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

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.

 

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.

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.

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.

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.

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.

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

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

"O verdadeiro hacker não se autodenomina com este título, ele é denominado."

UhkocKg.gif

Link para o comentário
Compartilhar em outros sites

Obrigado, não sabia disso -n

Virei estagiário só com 10k de posts, virei browser zone, depois games zone, fui convidado pra global, mas recusei e quitei da staff, sai do fórum pois não me alegrava mais e agora de vez em quando volto aqui para dar um oi.

Link para o comentário
Compartilhar em outros sites

Obrigado, não sabia disso -n

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

"O verdadeiro hacker não se autodenomina com este título, ele é denominado."

UhkocKg.gif

Link para o comentário
Compartilhar em outros sites

Este tópico está impedido de receber novos posts.
 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.