Que tal aprender como adicionar imagem no HTML para o site do seu negócio? Essa funcionalidade de linguagem de programação é fundamental para dar vida, dinâmica e até mais navegabilidade para o endereço eletrônico da sua marca!
Você já parou para pensar que, nos primórdios da internet, todo o conteúdo disponível online era constituído basicamente de textos? Não havia imagens, GIFs, vídeos e outros recursos gráficos que, hoje, estão presentes em todo lugar para enriquecer a experiência de navegação dos usuários.
Com o surgimento e aperfeiçoamento das linguagens de programação, tornou-se possível inserir imagens e outros recursos gráficos em conteúdos da web e, na atualidade, praticamente não conseguimos viver sem eles.
Em especial para o marketing digital, as imagens e os desenhos gráficos são vitais para dar autenticidade e exclusividade para as marcas no ambiente digital. Além disso, são essenciais para uma comunicação própria com seu público em prol de uma interação mais marcante e personalizada.
Dentre as linguagens de programação que tornam esse processo possível, podemos destacar o HTML e o CSS.
Na verdade, o nível de usabilidade e popularidade deles pode ser refletido em estatísticas: 52,97% de todos os programadores utilizam essas linguagem para desenvolver, principalmente, páginas de sites na web, segundo dados colhidos pelo Statista.
Mas, afinal, como adicionar imagem no HTML para páginas de sites? Quais são as principais tags utilizadas e como o CSS pode ajudar a estilizar essas imagens?
Confira o conteúdo até o fim para entender tudo sobre o tema!
Como adicionar imagem no HTML?
O HTML (HyperText Markup Language) é uma linguagem de marcação que dá estrutura às páginas da web, organizando os conteúdos pela página e determinando a função para cada um deles.
Um desses conteúdos que essa linguagem manipula para fazer parte de um site é a imagem. Isto é, as imagens que o desenvolvedor web deseja inserir em uma página passam pela construção de algumas linhas de código HTML.
Se você quer saber como adicionar uma imagem no HTML, tenha em mente que existe uma tag nessa linguagem de programação que é crucial para o processo: <img>.
Quando ela é inserida em uma linha de código, quer dizer que uma imagem será introduzida na composição da página.
Abaixo, você pode ver um exemplo de código genérico para inserir essa imagem por meio da linguagem HTML:
<img src="desktop/imagem.jpg" alt="Texto alternativo da imagem">
Vamos explicar cada um desses termos que estão disponíveis neste código:
- src: ele indica o endereço do diretório em que a imagem está armazenada no dispositivo. No exemplo em que mostramos, ela está na desktop do computador;
- alt: este é o famoso texto alternativo. Ele é essencial para situações em que a imagem não é carregada no site, pois ela mostra um texto que explica o conteúdo da imagem para o usuário. Essa parte é muito importante também para acessibilidade de pessoas que não conseguem visualizar a imagem e também conta pontos nos mecanismos de busca de SEO (search engine optimization).
Saiba mais sobre a linguagem de programação HTML com esse vídeo exclusivo do canal da GoDaddy no YouTube:
Como adicionar imagem de fundo no HTML?
Viu como adicionar imagem no HTML é fácil? Porém, como escolher a localização de uma imagem na página de um site? Isso pode ser feito com uma série de comandos da linguagem de programação CSS.
O CSS (Cascade Style Sheets) é um linguagem de estilo que, como o próprio nome diz, dá estilo e efeitos decorativos ao conteúdo do site. Ele funciona, portanto, de forma complementar ao HTML.
Dentre as propriedades dela, tem algumas que se destacam para alinhar a imagem na esquerda, na direita, mais acima e mais abaixo.
Uma delas é o “float”, que permite que o texto flutue ao redor da esquerda ou direita da imagem. Outras delas é o “margin”, que permite a definição de margens, e o “position”, que possibilita coordenar a posição da imagem de acordo com o fluxo do cursor do mouse no documento.
E, no caso, como adicionar imagem de fundo no HTML? Sabe quando o texto se sobrepõe à imagem de uma forma harmoniosa sem que esta atrapalhe a leitura daquele?
Isso também é possível com o CSS e com a propriedade “background-image”. Veja abaixo um exemplo de código HTML + CSS com esse objetivo:
<html>
<head>
<title>Site com Imagem de Fundo</title>
<style>
body {
background-image: url('caminho/para/sua-imagem.jpg');
background-size: cover;
}
</style>
</head>
<body>
<h1>Meu Site com Imagem de Fundo</h1>
<p>Conteúdo do site vai aqui.</p>
</body>
</html>
O termo “cover”, por sua vez, é inserido como comando para a imagem cobrir toda a área do corpo do documento.
Aprenda mais sobre Border CSS com o vídeo abaixo do canal da GoDaddy:
Como adicionar imagem de URL externa no meu site HTML?
Esse processo é muito similar às linhas de códigos que já mostramos sobre como adicionar imagem no HTML. Se, naquele exemplo, falamos da propriedade “scr”, que corresponde ao caminho para o diretório, aqui você vai inserir a URL externa onde a imagem se encontra.
Veja o exemplo abaixo:
<img src="URL_da_imagem" alt="Texto alternativo da imagem">
Como adicionar imagem no site com a GoDaddy?
Você sabia que é possível desenvolver um site profissional do zero e sem conhecimento técnico de linguagem de programação? Basta escolher a ferramenta certa para isso!
Conheça o Criador de Sites da GoDaddy e entenda como pode ser simples personalizar templates exclusivos de acordo com a identidade visual da marca.
Você ainda conta com um vasto banco de imagens para adicionar os elementos gráficos na posição que faz mais sentido para você!
Experimente gratuitamente e eleve o patamar da página da sua marca no mundo digital!
Veja como criar um site do ZERO com esse passo a passo no canal do YouTube da GoDaddy Brasil:
Gostou do conteúdo e aprendeu como adicionar imagem no HTML? Pois continue acompanhando o conteúdo do nosso blog para ver mais dicas para seu empreendimento online!
Até a próxima!
