Vamos ver nessa aula as possibilidades de inserir imagens e vídeos no HTML: As principais tags e maneiras de inserir mídias no site.

Ao abrir essa página para aprender um pouco de HTML percebemos que o primeiro elemento visível é a marca do site.

Imagem no HTML

Volta e meia precisamos inserir imagens em nossa página web, seja para a marca ou nos conteúdos. E o HTML nos fornece uma maneira bem tranquila de usar imagens através da tag <img>. ex.:

<img src=”https://frontend.com.br/wp-content/uploads/2020/05/irvan-smith-ymn_TY_MBn8-unsplash.jpg” alt=”Imagem de programador”>

Elemento vazio

Para entender o elemento acima, que insere no seu HTML uma imagem, primeiro é preciso entender que o elemento imagem é um elemento vazio, pois não precisa de tag de fechamento.

O primeiro atributo (src) é o mais importante pois ele de fato informa onde está a imagem e traz para a página. No atributo src informamos o endereço da imagem que estamos inserindo.

O segundo atributo, o alt é responsável por informar um texto alternativo referente a imagem. Imagine por exemplo uma pessoa com deficiência visual acessando seu site com essa imagem. Ela vai utilizar algum recurso que transcreva o conteúdo de seu site através de uma voz.

Ao chegar na parte do site que tem uma imagem, esse recurso vai ler para a pessoa o que estiver dentro do atributo “alt” para descrever sobre o que se trata a imagem.

Width e height

No elemento img podemos também utilizar o atributo width e height, o primeiro informando a largura da imagem e o height informando a altura, como visto abaixo:

<img src=”https://frontend.com.br/wp-content/uploads/2020/05/irvan-smith-ymn_TY_MBn8-unsplash.jpg” alt=”Imagem de programador” width=”300px” height=”300px”>

Ao utilizar por exemplo somente o “width” o navegador vai automaticamente dar uma altura proporcional ao valor de width que você informou, a mesma coisa ocorre quando você informa apenas o “height”, o navegador usa uma largura proporcional a altura informada.

O recomendado na verdade é modificar altura e largura da imagem direto pelo CSS (vamos ver futuramente) ao invés de usar esses atributos.

Vídeo no HTML

Uma das maneiras de adicionar vídeos ao seu HTML é através da tag <iframe>. Existe a tag <video> do próprio HTML no qual você pode adicionar os vídeos. Porém, vamos ver a forma que nos possibilita inserir vídeos que já estejam no Youtube ou Vimeo.

A tag iframe nos possibilita abrirmos uma espécie de “janela” dentro do nosso site puxando pra dentro dessa janela um conteúdo de outro site.

O Youtube por exemplo nos fornece o código já pronto para incorporarmos através de iframe um vídeo em nossa página HTML:

No iframe acima semelhante a imagem, temos o atributo src que é responsável por informar o endereço do vídeo (no Youtube). Além dele temos o atributo width que informa a largura da janela em nossa página e height que informa a altura.

Agora que já sabemos como inserir imagens e vídeos no HTML, vamos continuar avançando na próxima aula.