Gerenciador de imagens - tag img

Índice:

Gerenciador de imagens - tag img
Gerenciador de imagens - tag img
Anonim

A imagem não é apenas inserida diretamente no texto. O navegador recebe seu nome e é instruído sobre onde e como posicioná-lo na tela. Para fazer isso, use uma única tag img HTML. Especifica a localização do objeto gráfico na página da web.

Se muitos atributos são opcionais para tags, então a tag img deve ter pelo menos um parâmetro - o endereço da imagem. Este atributo é chamado src:

  • - isso exibirá o arquivo goat-j.webp" />
  • - com este parâmetro da tag img, o navegador carregará a imagem postada na Internet no site megasellmag.ru.

Atributos de alinhamento

Para posicionar imagens em uma página usando HTML, utiliza-se a tag img, cujos atributos são responsáveis por colocar a imagem na página e pela natureza do seu texto.

tag img
tag img

Por padrão, o navegador coloca a imagem no centro da tela e o texto não a envolve. A tag img permitirá que você expresse sua discordância com o navegador usando o atributo align (alignment).

- a imagem será posicionada na borda esquerda da página, e o texto a contornará à direita.

O comportamento do texto será semelhante se a imagem for colocada à direita (align=right), no meio (align=middle), top (align=top), bottom(alinhar=inferior) e centralizar (centro).

Configurações e tamanhos

Para evitar que o texto entre nas imagens, a tag img adquiriu atributos especiais -hspace (margens horizontais/horizontais) e vspace (margens verticais/verticais), que determinam a quantidade de recuo do texto das bordas das imagens em pixels.

atributos da tag img
atributos da tag img

A imagem não apenas se afastará obedientemente do texto na quantidade especificada, mas também se afastará da borda da página, portanto, é melhor evitar recuos grandes.

As dimensões geométricas das imagens são muito importantes, que não são apenas desejáveis, mas às vezes simplesmente necessárias para especificar para a exibição correta da imagem. Para isso, são utilizados os atributos largura (largura) e altura (altura), cujo valor é definido em pixels ou porcentagens.

Se você especificar apenas a largura, a altura será selecionada automaticamente com as proporções originais. Os tamanhos percentuais permitem que você coloque a imagem na parte direita da página, independentemente do tamanho da janela do navegador, e essa necessidade surge com frequência.

Outras opções

O atributo border envolve a imagem em um quadro de espessura especificada, o que o navegador não faz por padrão.

A borda também pode ter uma largura zero aparentemente sem sentido (border='0'), mas isso é até que a imagem se torne um link, quando o navegador automaticamente a circunda com uma borda azul sem esperar por instruções.

Alguns usuários impacientes, furiosos com a baixa velocidade da internet, simplesmente desativam a exibição de fotos. Para esses casos, é fornecido o parâmetro alt, que permite inserirtexto alternativo que o usuário verá na caixa onde a imagem está com pressa para carregar.

Se você não gostar das possibilidades do parâmetro alt, a tag img pode oferecer um atributo longdesc, cujo valor é a URL de um documento com uma descrição mais detalhada.

Os atributos usemap e ismap informam ao navegador que a imagem será uma imagem em que os hiperlinks são áreas separadas (mapa de links), apenas o parâmetro usemap determina o mapa de navegação no servidor, e ismap - o mapa em o lado do cliente.

Descrição do link 1 na figura abaixo:

html img tag
html img tag

Itens Exóticos

O atributo lowsrc instrui o navegador a primeiro baixar uma cópia (ou outra alternativa) da imagem original com qualidade inferior e, portanto, "mais leve". Este truque é fornecido em caso de baixa velocidade da Internet para o usuário. A imagem original, quando carregada, substitui a "falsa".

O atributo galleryimg menos usado da tag img invoca o painel de controle da imagem (quando passa o mouse sobre ele), permitindo que você abra a pasta padrão Minhas Imagens e imprima, salve ou envie a imagem por e-mail. Você pode desabilitar o painel configurando o parâmetro galleryimg como no/false e habilitá-lo configurando yes/true.

Na nova especificação HTML5, várias tags têm alguns parâmetros obsoletos. Por exemplo, os atributos lowsrc, border, longdesc e name de img foram retirados.

Recomendado: