<\/a><\/p>\n Logo no inicio da web, as p\u00e1ginas continham apenas conte\u00fados de textos e links. Isso tornava os conte\u00fados um tanto quanto limitados e mon\u00f3tonos. N\u00e3o demorou muito para serem criados<\/a> recursos de inclus\u00e3o de imagens nas p\u00e1ginas. No HTML, a tag<\/a> respons\u00e1vel pela inser\u00e7\u00e3o de imagens \u00e9 a tag <img><\/strong>. Por\u00e9m, o HTML tecnicamente n\u00e3o faz a inclus\u00e3o da imagem em si, o que ele faz \u00e9 linkar a imagem para a p\u00e1gina, de forma que ela seja aberta como se estivesse inserida na mesma, parecido com o processo da tag link<\/a> <a><\/strong>. Dessa forma, podemos adicionar imagens tanto localmente quanto de forma global, ou seja, atrav\u00e9s de uma URL externa ao dom\u00ednio principal. Al\u00e9m disso, tamb\u00e9m \u00e9 importante refor\u00e7ar que a tag <img><\/strong> n\u00e3o possui uma tag de fechamento e traz consigo o padr\u00e3o de display inline-block do CSS al\u00e9m de ajuste de largura e altura no padr\u00e3o autom\u00e1tico. Para inserir uma imagem<\/a> no HTML basta utilizar a tag <img>\u00a0<\/strong>com o atributo src<\/strong>. Ou seja: o atributo src<\/strong>, ou source, vai conter a url da imagem que ser\u00e1 inserida.<\/p>\n Diante disso, a sintaxe final ser\u00e1:<\/p>\n Para inserir uma imagem local, podemos apenas incluir o nome da imagem com sua extens\u00e3o, como no exemplo abaixo:<\/p>\n Se ela estiver contida dentro de uma pasta local, n\u00f3s devemos referenciar a pasta tamb\u00e9m. Por exemplo, se minha p\u00e1gina principal est\u00e1 contida na pasta public_html e dentro dela temos uma pasta chamada imagens, onde est\u00e1 a nossa imagem, utilizaremos a seguinte url:<\/p>\n Agora digamos que temos uma pasta public_html onde dentro dela temos as pastas imagens e pages, onde a nossa p\u00e1gina esta dentro da pasta pages e a imagem est\u00e1 dentro da pasta imagens. Dessa forma, utilizamos ..\/ para poder voltar uma pasta e assim entrar na pasta que queremos.<\/p>\n Por outro lado, podemos ainda incluir a url completa da nossa imagem. Digamos que nosso dom\u00ednio \u00e9 https:\/\/meudominio.com e utilizando o exemplo anterior. Dessa forma, utilizaremos o seguinte c\u00f3digo:<\/p>\n Com isso, j\u00e1 estamos prontos para incluir qualquer imagem localmente a nossa p\u00e1gina, utilizando o recurso HTML<\/a> img. Agora que j\u00e1 aprendemos a sintaxe b\u00e1sica do HTML<\/a> img e como inserir imagens locais, vamos estudar como inserir uma imagem global, ou seja, que se encontra fora do nosso servidor, fora do nosso dom\u00ednio. Para isso, basta adicionarmos a URL absoluta da imagem no atributo src<\/strong>.<\/p>\n Digamos que voc\u00ea queira uma imagem que se encontra na URL absoluta https:\/\/www.outrodominio.com\/galeria_de_fotos\/foto_01.png . Dessa forma, basta utilizar o seguinte c\u00f3digo:<\/p>\n Por\u00e9m, encontramos um problema ao utilizar imagens externas: ficamos dependendo que o outro dom\u00ednio<\/a> esteja sempre funcionando, pois se em algum momento ele ficar fora do ar, a imagem n\u00e3o ser\u00e1 carregada. Para evitarmos problemas com a sua HTML img, recomendamos que evite o uso de imagens externas. Al\u00e9m disso, outro grande problema pode ser a utiliza\u00e7\u00e3o de imagens que cont\u00eam direitos autorais. Portanto, esteja sempre atento a essas quest\u00f5es e, quando necess\u00e1rio, lembre-se de referenci\u00e1-las devidamente. Al\u00e9m do atributo src<\/strong>, a tag <img><\/strong> possui outros atributos que complementam a sua estrutura: podemos, por exemplo, incluir um atributo de t\u00edtulo para a imagem. Esse t\u00edtulo ser\u00e1 mostrado apenas quando o usu\u00e1rio passar o mouse sobre a imagem.\u00a0 Portanto, para incluir o t\u00edtulo a imagem, basta chamar pelo atributo title=”…”<\/strong>. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n Com isso, teremos o seguinte resultado:<\/p>\n Da mesma forma, tamb\u00e9m podemos incluir a nossa imagem, um texto alternativo. Esse texto ser\u00e1 mostrado no local da imagem caso a URL da imagem esteja errada, a imagem n\u00e3o esteja em um formato suportado ou at\u00e9 que a imagem seja baixada. Para incluir o texto alternativo basta chamar pelo atributo alt=”…”<\/strong>. Tamb\u00e9m \u00e9 uma pr\u00e1tica muito bem vista pelos mecanismos de buscas, portanto muito utilizado para otimiza\u00e7\u00e3o de SEO<\/a>. Vejamos abaixo um exemplo de como utilizar o texto alternativo na HTML<\/a> img:<\/p>\n <\/a><\/p>\n A tag <img><\/strong> traz consigo o padr\u00e3o de altura e largura autom\u00e1tica, de forma que ela ir\u00e1 incluir o tamanho original da imagem, sem distor\u00e7\u00f5es, ou ir\u00e1 ajustar dentro do container a qual ela for inserido. Por\u00e9m, podemos manipular esse tamanho diretamente atrav\u00e9s do CSS<\/strong> ou ainda atrav\u00e9s do atributos height<\/strong> (altura) e width<\/strong> (largura). Se utilizarmos apenas um deles, o outro ir\u00e1 se ajustar automaticamente, proporcionalmente, sem distorcer a imagem. Utilizando os dois, ele ir\u00e1 conter exatamente a altura e a largura definidas, portanto poder\u00e1 distorcer a imagem. Al\u00e9m disso, se voc\u00ea utilizar imagens com baixa resolu\u00e7\u00e3o em tamanhos acima da original, muito provavelmente a mesma tamb\u00e9m ficar\u00e1 distorcida, por isso \u00e9 muito importante usar imagens com uma resolu\u00e7\u00e3o adequada para suas p\u00e1ginas. Vamos utilizar no exemplo abaixo o logo da Home Host<\/a>:<\/p>\n Inicialmente, iremos definir apenas uma largura de 100px para a logo.<\/p>\n Dessa forma, o resultado da nossa imagem ser\u00e1:<\/p>\n Perceba ent\u00e3o que, com isso, a imagem se ajustou \u00e0 largura e \u00e0 altura de 200px, por\u00e9m ficou distorcida. Apesar da imagem trazer o display inline-block, muitas vezes queremos garantir que a mesma fique flutuante no texto, de forma que o texto consiga se adaptar \u00e0 sua posi\u00e7\u00e3o sem perder a formata\u00e7\u00e3o original. Portanto, para atingirmos esse objetivo, podemos utilizar o float<\/strong> na imagem atrav\u00e9s do CSS<\/strong>. Vejamos o exemplo abaixo aplicando o CSS<\/strong> no atributo style\u00a0<\/strong>e com um texto gerado atrav\u00e9s do gerador de Lorem Ipsum<\/a>:<\/p>\n Diante do exemplo acima, o resultado ser\u00e1:<\/p>\n Os principais formatos de imagens aceitas em todos navegadores s\u00e3o .jpeg<\/strong> ou .jpg<\/strong>, .png<\/strong> e ainda os .gif<\/strong>. Existem outros formatos que s\u00e3o aceitos, mas podem variar entre as diversas vers\u00f5es do navegador. Portanto, recomendamos utilizar as imagens nos formatos citados. Voc\u00ea tamb\u00e9m pode ler mais sobre formatos de imagens nesse artigo da Rock Content<\/a>.<\/p>\n Com esse tutorial, voc\u00ea j\u00e1 pode inserir qualquer imagem aos c\u00f3digos HTML<\/a> do seu site. Al\u00e9m disso, voc\u00ea pode\u00a0modificar os c\u00f3digos ensinados neste tutorial para se adequ\u00e1-los ao seu desejo. Recomendamos tamb\u00e9m a leitura da Documenta\u00e7\u00e3o Oficial da W3C sobre a tag <img><\/a>\u00a0ou ainda desse\u00a0outro artigo da W3C<\/a> que explica diversas formas de estilizar as imagens. Tamb\u00e9m recomendamos a leitura aqui no nosso blog\u00a0deste post sobre links HTML<\/a>, onde voc\u00ea poder\u00e1 aprender a incluir links a suas imagens.<\/p>\n","protected":false},"excerpt":{"rendered":" Neste tutorial, vamos aprender como utilizar o HTML img para inserir imagens e gifs em nossas p\u00e1ginas HTML. Portanto, voc\u00ea encontrar\u00e1 aqui os seguintes t\u00f3picos: A tag <img> do HTML Inserindo imagem localmente atrav\u00e9s do HTML img Inserindo imagem global atrav\u00e9s do HTML img T\u00edtulo e texto alternativo Largura e altura do HTML img Imagem […]<\/p>\n","protected":false},"author":18,"featured_media":3823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[161,3,4,213,229,6],"tags":[2624,2621,3071,3070,241],"class_list":["post-3813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-construtor-de-sites","category-criar-sites","category-desenvolvedores","category-frontpage","category-outros","category-tutoriais","tag-css","tag-html","tag-imagens","tag-img","tag-tutoriais"],"yoast_head":"\nA tag <img> do HTML<\/h2>\n
\n<\/a><\/p>\nInserindo imagem localmente atrav\u00e9s do HTML img<\/h3>\n
<<\/span>img src<\/span>=<\/span>\"url<\/span>\"<\/span><\/span>><\/span><\/span><\/code><\/pre>\n<img src=\"imagem.jpg\"><\/pre>\n
<img src=\"imagens\/imagem.jpg\"><\/pre>\n
<img src=\"..\/imagens\/imagem.jpg\"><\/pre>\n
<img src=\"https:\/\/meudominio.com\/public_html\/imagens\/imagem.jpg\"><\/pre>\n
\n<\/a><\/p>\nInserindo imagem global atrav\u00e9s do HTML img<\/h3>\n
<img src=\"https:\/\/www.outrodominio.com\/galeria_de_fotos\/foto_01.png\"><\/pre>\n
\n<\/a><\/p>\nT\u00edtulo e texto alternativo<\/h3>\n
<img src=\"\/logo.png\" title=\"Logo da HomeHost\"><\/pre>\n
![\"\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/logo_homehost.png\" "\\"Logo"){kind=logo}
<\/p>\n<img src=\"foto_01.png\" alt=\"Texto alternativo para descrever minha imagem\"><\/pre>\n
Largura e altura do HTML img<\/h3>\n
<\/p>\n<img src=\"\/logo.png\" width=\"100\"><\/pre>\n
\nObserve que mesmo com ajuste apenas da largura, a altura se ajustou automaticamente, sem distorcer a imagem.
\nVejamos agora com a aplica\u00e7\u00e3o tanto de uma largura quanto de uma altura, ambas de 200px, o que acontecer\u00e1:<\/p>\n![\"HTML](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/logo_homehost-Copia.png\" "\\"HTML"){kind=logo}
<\/p>\n
\n<\/a><\/p>\nImagem flutuante<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h2>Imagens Flutuantes<\/h2>\r\n<p><strong>Flutuando uma imagem para a direita<\/strong><\/p>\r\n\r\n<p>\r\n<img src=\"logo_homehost.png\" alt=\"logo da Home Host\" style=\"float:right;width:200px\">\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur vehicula erat. \r\nFusce vitae velit et risus imperdiet finibus quis a eros. \r\nDonec ut diam lobortis dui viverra tincidunt. \r\nNullam consequat lacinia lacus vel scelerisque. \r\nCurabitur maximus, mi a elementum malesuada, libero dolor suscipit turpis, \r\nvitae mollis augue mauris convallis ex. Sed feugiat neque in dolor lacinia,\r\n vitae eleifend ex consequat.Lorem ipsum dolor sit amet, \r\nconsectetur adipiscing elit. In efficitur vehicula erat. Fusce \r\nvitae velit et risus imperdiet finibus quis a eros. \r\nDonec ut diam lobortis dui viverra tincidunt. Nullam consequat\r\n lacinia lacus vel scelerisque. Curabitur maximus, mi a elementum malesuada, \r\nlibero dolor suscipit turpis, vitae mollis augue mauris convallis ex. \r\nSed feugiat neque in dolor lacinia, vitae eleifend ex consequat.\r\n<\/p>\r\n\r\n<p><strong>Flutuando uma imagem para a esquerda<\/strong><\/p>\r\n<p>\r\n<img src=\"logo_homehost.png\" alt=\"logo da Home Host\" style=\"float:left;width:200px\">\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur vehicula erat. \r\nFusce vitae velit et risus imperdiet finibus quis a eros. \r\nDonec ut diam lobortis dui viverra tincidunt. \r\nNullam consequat lacinia lacus vel scelerisque. \r\nCurabitur maximus, mi a elementum malesuada, libero dolor suscipit turpis, \r\nvitae mollis augue mauris convallis ex. Sed feugiat neque in dolor lacinia,\r\n vitae eleifend ex consequat.Lorem ipsum dolor sit amet, \r\nconsectetur adipiscing elit. In efficitur vehicula erat. Fusce \r\nvitae velit et risus imperdiet finibus quis a eros. \r\nDonec ut diam lobortis dui viverra tincidunt. Nullam consequat\r\n lacinia lacus vel scelerisque. Curabitur maximus, mi a elementum malesuada, \r\nlibero dolor suscipit turpis, vitae mollis augue mauris convallis ex. \r\nSed feugiat neque in dolor lacinia, vitae eleifend ex consequat.\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
![\"HTML](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Resultadofloat.jpg\" "\\"HTML")
\n<\/a><\/p>\nRecomenda\u00e7\u00f5es sobre HTML img<\/h2>\n