Tudo o que se sabe sobre este homem é
que ele não estava na prisão, mas não se sabe por que não estava na prisão.
Mark Twain.

Esta é uma lição sobre como inserir uma imagem em HTML, como projetá-lo, como envolver o texto em uma imagem, etc. Afinal, sabe-se que as imagens tornam um site mais atrativo e diferenciado de outros recursos, por isso a possibilidade de utilizar uma tag e seus atributos é muito útil na Internet moderna. Mas o principal aqui é o senso de proporção!

O excesso de gráficos tornará a página html mais pesada e, conseqüentemente, aumentará seu tempo de carregamento. Além disso, a presença de um grande número de imagens distrairá os visitantes do conteúdo principal do site (a menos, é claro, que os gráficos sejam o conteúdo principal do site). Portanto, mantenha-o com moderação e use-o somente onde for necessário. E você ficará feliz!

Na lição sobre, já falei sobre como você pode usar imagens como plano de fundo de um documento HTML. Agora vamos falar sobre como os gráficos são usados ​​na “camada superior” de uma página HTML.

§ 1. Como inserir uma imagem

Para inserir imagens em HTML, use a tag imagem Com obrigatório atributo SRC. Este atributo informa ao navegador o caminho para o arquivo de imagem. Aqueles. para inserir uma imagem com o nome logo.jpg para um determinado local da página (desde que a página e a imagem estejam localizadas em uma pasta(diretório)) você precisa inserir o seguinte código html neste local:

src="logotipo.jpg">

Se a imagem e a página estiverem localizadas em diferente diretórios (pastas), então você precisa especificar o caminho para a imagem relativamente Páginas. Por exemplo, se uma página html estiver localizada no diretório (pasta) site, no mesmo diretório (pasta) existe um subdiretório (pasta) images, no qual está localizada nossa imagem logo.jpg, então para inseri-la você precisa escreva assim:

imagens/logotipo.jpg">

Ou você não precisa se preocupar e apontar endereço completo da foto. Por exemplo, assim:

http://www..png">

Neste último caso, o navegador exibirá o código assim:

Observação. Se a imagem estiver localizada no seu computador, mas você deseja inseri-lo para a página da Internet, então nada resultará disso. Para fazer isso, você deve primeiro mover a imagem para algum lugar na internet(Por exemplo, ). E indique o endereço completo no código da página até este ponto com uma foto.

Além do atributo obrigatório SRC na etiqueta imagem Existem mais alguns atributos opcionais. Vamos dar uma olhada neles.

§ 2. Especificando o tamanho da imagem

Vamos começar com os atributos que permitem definir dimensões da imagem(mais precisamente, demarque espaço para essas dimensões nas páginas). Aqui estão eles:

• largura- largura da imagem em pixels ou porcentagem;


• altura- a altura da imagem em pixels ou porcentagens.

Se esses atributos forem utilizados, ele primeiro alocará espaço para os gráficos, preparará o layout do documento, exibirá o texto e só depois carregará a imagem. Ao mesmo tempo, colocará a imagem em um retângulo do tamanho selecionado, mesmo que a largura e a altura reais da imagem sejam maiores (comprimir) ou menores (alongar). Caso esses atributos não sejam utilizados, o navegador carregará a imagem imediatamente, e a exibição do texto e demais elementos seguintes será atrasada.

A largura e a altura das imagens podem ser especificadas tanto em pixels (o tamanho da imagem será constante independente da resolução da tela) quanto em porcentagem (o tamanho da imagem dependerá da resolução da tela do usuário). Por exemplo:

largura="50" altura="20">

largura="10%" altura="5%">

§ 3. Texto alternativo

Se o usuário tiver desabilitado a exibição de imagens nas configurações do navegador, então, em vez da imagem, poderá ser exibido um texto alternativo que explicaria que tipo de gráfico deveria estar ali. Isto é conseguido usando o atributo Alt.:

Neste caso, o navegador reservará espaço na página para a imagem, mas ao invés da própria imagem mostrará o texto que você escreve no valor do atributo Alt.:

Repito, isso acontecerá se o usuário tiver desabilitado a exibição de gráficos. Caso contrário, a imagem ocultará o texto alternativo.

§ 4. Alinhando a imagem

Usando um atributo que você já conhece alinhar você pode controlar o alinhamento das imagens em relação a outros elementos da página HTML. No atributo alinhar Existem vários significados, mas neste momento estamos mais interessados ​​em dois:

• esquerda- a imagem está localizada na borda esquerda da página e o texto flui ao redor da imagem à direita;


• certo- a imagem está localizada na borda direita da página e o texto e outros elementos fluem ao redor da imagem à esquerda.

Por exemplo, código HTML

o navegador irá mostrar assim

E este código HTML:

ficará assim:

Para impedir que o texto envolva uma imagem, você pode usar a tag BR(familiar para nós na seção anterior sobre). Na etiqueta BR existe um atributo claro, que pode assumir três valores:

• esquerda- parar a quebra de texto em imagens alinhadas à esquerda;


• certo- parar a quebra de texto em imagens alinhadas à direita;


• todos- pare a quebra de texto em torno de imagens alinhadas à esquerda e à direita.

Tag HTML responsável por exibir a imagem

• Imagem HTML Pode ser qualquer imagem nos formatos PNG, JPEG e GIF.
• Código HTML para a imagem definido por etiqueta .
• Imagem HTML pode ser o plano de fundo de uma página da web.
• Imagem HTML pode ser definido como um hiperlink.

Na pasta D\My_first_site\ ou qualquer outra pasta onde você tenha o arquivo index.html, coloque uma imagem com uma extensão, digamos, .jpg, nomeie-a como quiser, por exemplo, xxx.

Inserindo uma imagem no código HTML de uma página:

Marcação - desemparelhado. Preste atenção na forma como está fechado.

Atributos e valores

• - obrigatório, indica a origem da imagem.
• alt="" - define um texto alternativo, um comentário que é lido por um robô de busca ao analisar o conteúdo de uma página web. Ele também precisa ser designado.
• width="" - especifica a largura da imagem em pixels.
• height="" - especifica a altura da imagem em pixels.

Indique as dimensões reais - desta forma você manterá a qualidade da imagem original.

Para desenvolvimento web, são aplicáveis ​​imagens de três formatos: PNG (.png), JPEG (.jpg) e GIF (.gif). Adobe Photoshop é uma ferramenta especializada na criação de gráficos para sites. Ele pode ser usado para converter um formato de imagem para outro.

Imagem HTML | Margens horizontais e verticais

ou a distância horizontal e vertical entre imagem e texto

Resultado:

Atributos e valores

• hspace="" - define distância horizontal entre imagem e texto.
• vspace="" - define distância vertical entre imagem e texto.

Imagem de fundo HTML

ou plano de fundo da página definido por uma imagem

Temos a seguinte imagem:

Vamos escrever o código para uma página separada:

Os atributos background e background-image são discutidos em .

Inserindo uma imagem e sua ordem → ../images/primer-img.jpg → veja.

Imagem HTML - link

Código de exemplo:

border="0" - cancela a borda do link gráfico.

ou todas as formas possíveis de centralizar imagens

Código de exemplo:

No que você precisa prestar atenção aqui? → Em primeiro lugar, o facto de as dimensões estarem indicadas - agiliza o carregamento da imagem. Em segundo lugar, os atributos alt="" são especificados, o que também é altamente desejável mesmo se não houver texto alternativo. No primeiro caso, a centralização foi determinada HTML parâmetro, e no segundo - usando a inclusão linear de folhas de estilo em cascata.

A parte visual é um dos aspectos mais importantes quando se trabalha com sites. É claro que é inferior em funcionalidade, mas não se deve desconsiderá-lo antes do tempo. Hoje falaremos sobre como instalar uma imagem HTML no seu site. Existe apenas uma possibilidade para isso ou várias? Como posso inserir uma imagem HTML no meu site para que outros usuários possam vê-la? O que é melhor usar para esse fim – um servidor ou um computador? O que é HTML? Esta abreviatura pode ser decifrada da seguinte forma: linguagem de marcação de documentos de hipertexto.

Usando esta linguagem, é formada a base do futuro site. Aqui também é trabalhada a colocação de todos os principais elementos do site. Em seguida, os arquivos php responsáveis ​​pela transferência de dados e folhas de estilo em cascata são configurados aqui. A base de qualquer página da web é HTML. Você também pode fazer ajustes de imagem usando esta linguagem. Você pode realizar esta operação de outras formas, mas se precisar garantir o carregamento inicial de algum objeto simples, é melhor utilizá-lo. Vamos começar a explorar o problema relacionado à inserção de uma imagem HTML.

Como usar a tag img?

Vamos passar para a questão do uso de gráficos. Como você pode inserir uma imagem em um documento HTML? Em primeiro lugar, esta operação significa inserir um arquivo como um objeto de página separado. A tag img é usada para esta adição. Esta tag refere-se a elementos embutidos que contêm conteúdo substituível. Inclui apenas quatro partes da linguagem de marcação de hipertexto. Um deles é src, altura, largura. Falaremos sobre eles mais adiante. Outras partes são objeto, incorporação, iframe. A tag funciona como se tivesse um elemento inline. A diferença é que conteúdo externo estranho é usado e exibido. Neste caso, deve haver um arquivo de terceiros que será carregado. Se você tiver dúvidas sobre como restaurar uma imagem de fundo em HTML, é melhor descartá-las imediatamente. Ele só será exibido quando o computador no qual a imagem está localizada estiver em execução.

Usando o atributo src

Estamos trabalhando na questão da inserção de uma imagem gráfica em um documento HTML. Para especificar o caminho para a imagem que será carregada, use src. O esquema geral é o seguinte: você precisa usar este atributo, o sinal de igual e inserir o endereço. Quando o navegador atingir a tag durante a análise do HTML, ele criará uma área na qual o elemento inline será exibido. O arquivo externo será carregado nele no futuro. Este caminho não deve conter erros, pois é para lá que o programa irá. Caso este programa não encontre o arquivo, será exibido um ícone de erro, o que não parece muito esteticamente agradável.
Para inserir uma imagem em uma tabela de um documento HTML, é necessário escrever todo o código necessário na célula desejada.

Configurações de imagem

Agora você sabe inserir uma imagem em HTML. Vamos descobrir como isso pode ser configurado. Quando o download do arquivo for iniciado no computador do usuário, o tamanho da imagem será determinado automaticamente. Se os parâmetros iniciais do arquivo não corresponderem aos desejados, então os parâmetros de largura e altura, que são especificados em pixels, podem ajudar neste caso. O código neste caso será escrito da seguinte forma: src e depois o endereço do arquivo. Uma instrução semelhante também especifica a largura e define a largura que deveria ser. O último parâmetro é altura e altura. Muitas vezes, os webmasters cometem o seguinte erro: carregam um arquivo grande no servidor, cujo tamanho chega a vários MB. Em seguida, o caminho é escrito e a imagem ajustada no tamanho desejado. Assim, o usuário pode ver como uma imagem pequena carrega muito lentamente. Do lado de fora não parece muito atraente.

Recomendações para trabalho

Para evitar aspectos negativos em seu trabalho, tente reduzir antecipadamente o tamanho da imagem. Claro, se você não tiver certeza absoluta de quais parâmetros usar para obter uma aparência atraente, basta criar uma cópia e tentar experimentá-la. Você também precisa ter cuidado extra ao otimizar o peso da imagem. É necessário reduzir o peso dos arquivos gráficos sem perda de qualidade, convertendo os arquivos para outras extensões, utilizando programas especiais e serviços online. Isso será apreciado não apenas pelos usuários do site, mas também pelo webmaster. Esses arquivos ocuparão menos espaço na sua hospedagem e carregarão mais rapidamente.

Exemplo de recursos de gravação

Vamos considerar como você pode especificar o caminho para a imagem.

1.Defina apenas o nome do arquivo;
2. Especifique o endereço da imagem localizada no computador local (servidor);
3. Caminho detalhado para o local do arquivo, localizado em outro host.

Se você usar o exemplo do primeiro ponto, a imagem deverá estar no mesmo diretório. No segundo caso, o local é uma subpasta relativa à página atual. O terceiro exemplo especifica o caminho absoluto onde a imagem pesquisada pode ser encontrada. Neste último caso, vale atentar para o seguinte ponto: a imagem pode estar em qualquer servidor, desde que tal uso não seja proibido no arquivo htaccess, mas se for deletado de lá, a imagem desaparecerá do seu site. A peculiaridade da linguagem HTML é que apenas um documento de marcação é necessário. Todos os outros componentes podem ser baixados de servidores de terceiros. Esses métodos são frequentemente usados ​​para aumentar a velocidade de download. Aqui você precisa saber como usar esta ferramenta.

Objetivo de alt e título

O que devo fazer se por algum motivo o arquivo gráfico não carregar com o documento HTML? Se estiver escrito incorretamente, você precisará usar o atributo alt. Este atributo executa a tarefa de uma representação alternativa da imagem. Digamos que os gráficos não carreguem, mas o navegador ainda criará uma área para a imagem. Isso também é necessário nos casos em que o usuário está aguardando o carregamento e é necessário mostrar a ele que o programa está se preparando para aceitar gráficos. Para mostrar o texto que o acompanha, você deve usar o atributo title. É essencialmente apenas uma dica de ferramenta e pode ser usada em praticamente qualquer elemento HTML visível. Isso é bom porque ajuda a esclarecer alguns aspectos específicos. A utilização dos dois atributos dados neste subtítulo é a seguinte: após a altura, acrescenta-se primeiro alt ao exemplo discutido anteriormente e depois o título.Esses atributos podem servir não apenas para garantir a comodidade do visitante. Eles também podem ter um impacto positivo na promoção do site. Por esse motivo, você deve usar palavras-chave constantemente neles. Isso melhorará a classificação do recurso nos serviços de imagem dos mecanismos de pesquisa e nas classificações do site. Porém, em tudo é preciso respeitar a racionalidade e a cautela.

Alinhando fotos

O atributo align foi introduzido para todos os quatro elementos da linguagem de marcação mencionados anteriormente. Usando este atributo, você pode alterar facilmente a localização da imagem. Ele está alinhado à parte inferior por padrão. bottom é responsável por isso. Como fazer o alinhamento superior? Para fazer isso você precisa usar top. Na prática, ficará assim: após o atributo src, onde o usuário especifica o endereço da imagem, são adicionados o atributo align e seu valor. Na linha em que a imagem está localizada, ela ficará alinhada com a borda superior. Como centralizar uma imagem em HTML? Existe outra opção para alinhar a imagem: meio. Usar esta função não mudará nada fundamentalmente.

Ao usar este código, a imagem ficará alinhada ao meio. Você pode fazer o texto fluir pela imagem. Os atributos esquerdo e direito são usados ​​para isso. Nesses casos, a imagem fica flutuante. Shift left parece igual a outras grafias. Usar o atributo right produz um resultado semelhante, mas com uma diferença: a imagem será colocada à direita. A utilização dessas estruturas possui características próprias. Por exemplo, um dos problemas importantes é o texto estar muito próximo da imagem. Como resultado, é criado um chamado efeito adesivo, que é muito desagradável para os olhos. Isso pode ser corrigido usando código HTML ou uma folha de estilo em cascata. Para tais alterações você deve usar os atributos hspace e vspace. O primeiro define as margens direita e esquerda, e o segundo define as margens inferior e superior.

Como definir o plano de fundo

Ao inserir uma imagem na página de um site HTML, o atributo background é muito útil. Este atributo faz parte do elemento body. O objetivo é definir o caminho para um arquivo gráfico que deve preencher uma célula, tabela ou página separada. O uso deste objeto na prática é assim: o endereço da imagem utilizada é escrito como o valor do parâmetro bodybackground. A imagem de fundo assim definida se repetirá ao longo dos eixos de abcissas e ordenadas, a partir do canto superior esquerdo.

Esperamos que este artigo seja útil para você. Leitura feliz!

As imagens nos permitem entender instantaneamente o quão interessante um determinado site ou artigo pode ser para nós, elas criam um clima e podem revelar um tópico de uma nova maneira. Às vezes uma foto vale mais que mil palavras.

Mas você não deve participar deles se não tiver Instagram ou loja online. É aconselhável que as imagens:

• foram informativos
• combine com o esquema de cores do seu site
• eram apropriados

Se você não tiver uma foto adequada, poderá usar a chamada banco de fotos (banco de fotos) - um local onde são armazenadas muitas fotografias, ilustrações e gráficos vetoriais. Existem muitos desses recursos, você pode até ter ouvido falar de um dos maiores - o Shutterstock, mas os downloads lá são pagos.

Para quem não gosta de pagar a mais, no final do artigo preparamos bônus- uma lista de vários bancos de fotos onde você pode baixar uma grande quantidade de belos materiais de alta qualidade de forma totalmente gratuita :)

Formatos de imagem

Existem basicamente 3 tipos de imagens usadas na World Wide Web:

gif(Formato de intercâmbio de gráficos - formato de troca de imagens)

Este é o primeiro formato que começou a ser utilizado na Internet. As vantagens deste formato são a disponibilidade animações e tamanho pequeno, a página carrega rapidamente. Além disso, apoia a transparência. Desvantagem - usado apenas 256 cores(na verdade é por isso que o tamanho é pequeno), ou seja, não pode ser usado para imagens coloridas.

JPEG, também conhecido como jpg(Grupo Conjunto de Especialistas em Fotografia - Grupo Conjunto de Especialistas em Fotografia - este é o nome da organização de desenvolvimento)

adequado para criar imagens coloridas e de alta qualidade, fotos. O tamanho dessas imagens é grande, então elas geralmente colocam uma grande carga no servidor. Se você precisar compactar um jpeg (para um peso de imagem menor), recomendamos usar o tamanho da imagem final múltiplo de oito , portanto a perda de qualidade será mínima.

png(Gráficos Portáteis de Rede - Gráficos Portáteis de Rede. Pronunciado da mesma forma que ping, ou seja, )

este formato foi originalmente desenvolvido para a web, ou seja, A imagem costuma pesar pouco e não deixa a página lenta no carregamento. Este formato foi criado para substituir o gif desatualizado, mas ao contrário dele, não suporta animação. PNG-8, assim como o GIF, usa apenas 256 cores. Formatar png-24 suporta 16 milhões de cores, embora já seja bastante pesado. PNG-32 contém o mesmo número de cores que png-24 e, além disso, permite obter uma imagem com fundo transparente e você pode ajustar o grau de transparência. Ao reduzir o tamanho do png não há perda na qualidade da cor.

Vamos resumir

gif- para animação

JPEG- para fotografias

png- para ícones, botões, planos de fundo, logotipos, capturas de tela, desenhos, textos, fotografias com fundo transparente

Inserindo uma imagem em um arquivo HTML

Para adicionar uma imagem à página, use marcação (da imagem em inglês - imagem, imagem). Esta é uma tag única e não precisa de uma tag de fechamento. Esta tag contém atributos internos.

Atributo fonte(do inglês source - source) indica o caminho para o arquivo (o local onde a imagem está localizada). Se a imagem estiver no seu computador (o site ainda está em desenvolvimento) ou no seu servidor, use um link relativo. Se a imagem for da rede, será necessário um link absoluto. Leia como fazer isso no artigo "Links".

Então, para conectar uma imagem à sua página web, você precisa escrever um código como este:

atributo alternativo(do inglês alternativo - alternativa) indica o texto que o usuário verá caso a imagem não carregue. O caminho está indicado incorretamente, a imagem foi excluída, Internet ruim - os motivos podem ser vários, e é desejável que a pessoa entenda o que está por trás desse ícone odiado.

Os motores de busca prestam muita atenção para garantir que este atributo seja preenchido. E o validador html (um recurso para verificar a exatidão do código) perceberá a ausência do atributo alt como um erro. Se todos os atributos será preenchido e também conterá palavras-chave, se possível - a visibilidade do seu site aumentará significativamente, ou seja, ele será mostrado com mais frequência nas pesquisas. Isso é da área de SEO, e nesta fase basta sabermos que tal atributo existe, e um site “ativo” deve tê-lo preenchido. Enquanto o site estiver em nosso disco, ele pode ficar vazio.

No exemplo abaixo, especificamos deliberadamente um caminho inexistente para a imagem para que você possa ver como o atributo alt funciona

Altura e largura das imagens

Você também pode definir a altura e a largura da imagem se a imagem original for, por exemplo, mais do que você precisa.

Em HTML5 é recomendado fazer isso usando CSS ou atributo de estilo , assim:

Neste exemplo, pegamos 30% da largura, não da imagem original, mas do tamanho da janela do navegador. Quando largura = 100%, a imagem abre em toda a largura do navegador. Lembre-se deste recurso por cento, como unidades de medida.

Aliás, se tivéssemos escrito apenas a largura o resultado teria sido o mesmo, tente:

< img src = "https://site/tutoriais/wp-content/uploads/2016/07/panda.jpg" alt= "panda na árvore" estilo = "largura:30%;" >

Você também pode definir a largura e a altura em píxeis. No caso do nosso panda, cujas dimensões originais são 1196 x 796 pixels, para que o animal não sofra ao ser comprimido, precisamos manter as proporções, e aqui não dá para ficar sem calculadora. Digamos que queremos reduzir o tamanho da imagem em 3 vezes, então precisamos definir as dimensões para 399 x 265 pixels.

Observe que se ampliarmos a imagem proporcionalmente, basta especificar apenas um parâmetro, por exemplo. largura. O próprio navegador inteligente calculará o tamanho total da imagem.

Tente executar este código e veja o resultado:

< img src = "https://site/tutoriais/wp-content/uploads/2016/07/panda.jpg" alt= "panda na árvore" estilo = "largura:399px;" >

Sempre defina as dimensões da imagem. Normalmente, as imagens demoram mais para carregar do que o restante do código HTML. Se o navegador souber quanto espaço reservar para imagens, ele poderá continuar carregando o site sem esperar o carregamento das imagens.

Um pouco de naftalina

Se acontecer de você mexer no código de um site criado em HTML-4 ou até anterior, você notará que os tamanhos das imagens são definidos usando recursos especiais atributos de largura E altura. Este é um método obsoleto, embora ainda seja válido em HTML5. No entanto, recomendamos usar estilo, porque Os atributos de largura e altura podem ser afetados por estilos internos ou externos que ficarão no navegador ou em seu arquivo CSS. Entraremos em mais detalhes sobre isso quando olharmos para CSS, mas por enquanto vejamos apenas um exemplo de como os estilos afetam os atributos de altura e largura.

Existem 3 abas nesta janela: na primeira você vê o código html, na 2ª o código CSS, e na última - como sempre, o resultado. Isso funciona como se a primeira guia fosse um arquivo index.html, a segunda um arquivo style.css e a terceira um navegador. Então, agora nosso CSS diz que todos os elementos com a tag img têm largura de 100%. Os tamanhos padrão dos atributos de largura e altura estão em pixels, portanto não há necessidade de adicionar unidades aqui.

A diferença nos resultados é óbvia :)

Também em versões mais antigas do html eram usados ​​os seguintes atributos:

alinhar, que foi usado para alinhar a imagem horizontalmente ou verticalmente.

hspace- recuo à esquerda e à direita da imagem em relação ao conteúdo circundante (por exemplo, texto ou imagem adjacente)

vespaço- recuo acima e abaixo da imagem em relação ao conteúdo ao seu redor.

fronteira- defina a espessura do quadro ao redor da imagem (por padrão é zero)

Hoje em dia toda essa manipulação (e muito mais) é feita usando CSS, então decidimos não incomodar vocês com isso aqui. Se você ainda tem interesse em como trabalhar com esses atributos, escreva nos comentários, adicionaremos este item :)

Colocando uma imagem no código

De onde colocamos nossa tag depende de como ele será exibido no navegador.

Exemplo nº 1 - antes do parágrafo:

Elementos como

E

referir-se elementos de bloco . Eles sempre começam em uma nova linha e ocupam toda a largura disponível da janela do navegador. Se você ficar em primeiro lugar , e depois dele um elemento de bloco, por exemplo um parágrafo, será movido para a próxima linha.

Exemplo nº 2 - no início do parágrafo

Este é um elemento inline, cabe dentro de um elemento de bloco e não inicia uma nova linha. No exemplo acima, o texto envolve a imagem porque o código registrado dentro

Legendas para ilustrações

Para marcar ou assinar uma foto em uma página, use marcação

(da figura inglesa - desenho). Esta tag indica que dentro dela serão colocados conteúdos como ilustrações, fotografias, diagramas, etc.

Marcação