Como vimos no artigo anterior sobre HTML, todas as páginas web se baseiam em arquivos editados dentro desta linguagem. Porém, se tudo se baseia em arquivos de texto, como as imagens e outros elementos de mídia são inclusos?
É isto que vamos aprender neste texto de hoje. Anteriormente já explicamos o que é Html. Agora vamos falar mais um pouco sobre como personalizar seu site. Afinal, de nada adianta contratar uma excelente hospedagem de sites e trabalhar com um site de design pobre ou antiquado, sem conseguir utilizar imagens corretamente.
Ao fim desse texto, esperamos torna-lo capaz de adicionar imagens em seus documentos HTML, otimiza-las e entender um pouco mais sobre a dinâmica de como se cria páginas para web.
Aprenda como resolver o erro 502 bad gateway.
Como colocar imagem em uma página HTML
Se hoje é possível encontrar sites bonitos e agradáveis aos olhos, com belas designs e utilizando imagens de forma criativa, há alguns anos não era bem assim.
No início tudo não passava de texto. Porém, rapidamente a evolução da internet e das tecnologias que se relacionavam com ela, permitiram a criação de sites com o uso de imagens e é isto que pretendemos ensinar hoje.
É claro que além das imagens, existem outros tipos de conteúdo multimídia que podem ser inclusos em seu site, como áudios ou vídeos. Mas, vamos começar falando sobre o elemento <img>.
Este é o elemento que utilizaremos sempre criarmos uma página em HTML para indicar uma imagem na mesma. Então, você deve se perguntar: se tudo em um documento HTML é texto, como convertemos a imagem para este formato?
Acontece que, não iremos “converter” a imagem em texto.
Antes de ensinar na prática o que faremos, vamos dar uma breve explicação do funcionamento lógico por trás dos comandos.
Em um documento HTML, quando inserirmos o elemento <img> poderemos então indicar o endereço de uma imagem salva dentro da sua hospedagem de sites, e o que o navegador fará, será buscar essa imagem com base no endereço inserido e renderiza-la no monitor do visitante, junto com todo o código da página.
Parece confuso agora, mas assim que começar a parte prática você entenderá claramente do que estamos falando.
Passo a passo para inserir imagens em uma página
Para inserirmos uma imagem iremos utilizar o elemento <img>, como dito acima. Este é um elemento sem conteúdo ou tag de fechamento, mas que depende de um atributo para que possa funcionar corretamente. Estamos falando do atributo -src-.
Chamamos este atributo de source. E como o nome indica, sua função é indicar uma fonte de pesquisa para o navegador buscar as informações lidas momento de renderizar a página.
Vamos por partes aqui. Para entender a aplicação, vamos imaginar a que você deseje criar uma página e inserir nesta uma imagem. A imagem em questão foi nomeada de “logo.webp”.
Então, devemos inserir primeiro elemento <img> junto ao atributo -src- e indicar no atributo o nome da imagem. Da seguinte forma: <img src=”logo.webp”>
Aqui, neste exemplo, supomos que a imagem está em um diretório diretamente acessível e sem necessidade de indicar o caminho. Mas em geral, sabemos que as imagens ficam em seus próprios diretórios.
Então, com isso em mente, devemos nos atentar ao fato de que sempre é preciso indicar todo o caminho até a imagem. Por exemplo, se a imagem em questão estiver dentro de uma pasta chamada “imagens” e esta pasta está dentro de outra chamada “documentos”, o nosso código ficaria assim: <img src=documentos/imagens/logo.webp>
Vamos ver nas imagens de demonstração:
.webp)
Um aviso importante ao utilizar imagens na criação de suas páginas HTML é sempre se atentar aos direitos autorais, utilizar imagens das quais você seja dono ou tenha permissão de uso. E claro, jamais em hipótese alguma utilize o atributo source para indicar imagens no site de outra pessoa.
Texto alternativo da imagem
Agora vamos falar do elemento -alt-. Este elemento, que também pode ser inserido junto as tags de imagem, ganha uma importância extra.
Em suma, sua função é descrever em texto o conteúdo da imagem. Este texto poderá ser exibido caso aconteça algum erro que impossibilite a imagem de carregar, o texto será exibido.
Mas não só isso. O real motivo do alt text ter ganhado importância nos últimos anos é pela sua capacidade de otimizar as páginas de HTML para mecanismos de busca, ou seja, SEO.
Hoje, o alt text é uma das coisas que mais mandam na otimização de textos.
Largura e altura
Ainda é possível ajustar a altura e largura da sua imagem se assim desejar, com os atributos com os atributos -width- e -height-.
Entretanto, esta é uma prática não recomenda, uma vez que a alteração na altura e largura da imagem pode gerar imagens deformadas ou granuladas na sua página.
O que são elementos <iframe>
Para finalizar, vamos falar dos elementos <iframe>. Estes são responsáveis por adicionar ao seu site o conteúdo de terceiros, como por exemplo vídeos de sites como YouTube, seções de comentários como o Disqus (como utilizamos aqui no blog mesmo), mapas online, etc.
Entretanto, ao utilizar este atributo é necessário atenção a alguns aspectos de segurança, uma vez que iframes podem ser portas de entrada para ataques de hackers em seu site. Por isso esse recurso deve ser utilizado com parcimônia e atenção.
Por isso, sempre utilizar iframes em suas páginas, este devem possuir suas permissões restritas à sua função, de modo que não possam afetar outros aspectos do seu site. A isso, damos o nome de atributo sandbox.
Se acreditar que é preciso, ainda é possível adicionar diversas permissões dentro deste atributo, controlando exatamente o que cada iframe pode ou não alterar no seu documento HTML.
Conclusão
Hoje nós vimos como incluir imagens nas suas páginas web, e aprendemos um macete extra para otimizar o SEO do seu site. É importante lembrar também, que é ideal que todas as imagens que você deseje utilizar em seu site estejam salvas em seu servidor, para evitar possíveis indisponibilidades e mesmo manter sua hospedagem de sites mais segura.
E agora que você já aprendeu como inserir imagens na sua página HTML e o que são iframes, compartilhe esse texto com aquele seu amigo que está aprendendo HTML!
Gostou de nosso post? Compartilhe:
