Introdução ao HTML

Dando Vida às Páginas com Imagens, Vídeos e Áudios 🌈🎬🎶

Agora vamos ver como tornar suas páginas web muito mais atrativas e interativas com imagens, vídeos e áudios. Isso mesmo! Vamos deixar de lado aquele mundo apenas de textos e dar um salto para o mundo multimídia! 🚀

Imagens 🖼️

Vamos começar com as imagens, algo que você provavelmente já viu em quase todas as páginas da web que você já visitou.

Tag de Imagem:

A tag para inserir imagens é <img>. Fácil, né?

<img src="imagem.jpg" alt="Descrição da imagem" src="imagem.jpeg" />

Atributos importantes:

1. src: Aqui é onde você coloca o caminho da imagem que você quer mostrar. Pode ser um link ou um arquivo no mesmo diretório do seu HTML.
   Por que usar?: Sem isso, como o navegador saberia qual imagem mostrar? 🤷‍♀️
2. alt: Este é o texto alternativo da imagem. Ele é exibido se a imagem não pode ser carregada.
   Por que usar?: É bom para acessibilidade e SEO. 🦮🔍

Vídeos 🎬

Pronto para dar um passo além? Vamos falar sobre vídeos!

Tag de Vídeo:

A tag é <video>, e dentro dela você pode colocar a tag <source> para especificar o arquivo de vídeo.

<video controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Atributos importantes:

1. controls: Colocar esse atributo faz com que controles de play, pause e volume apareçam no vídeo.
   Por que usar?: A menos que você queira irritar seus usuários, é uma boa permitir que eles controlem o vídeo. 🎮

Ah, eu quase me esqueci! 🙈 Além do atributo controls, você também pode usar os atributos height e width para controlar o tamanho do vídeo na sua página. Vamos dar uma olhada?

Atributos adicionais:

1. height: Este atributo define a altura do vídeo na página, em pixels.
   Por que usar?: Para garantir que o vídeo se encaixe perfeitamente no layout da sua página. 📏
2. width: Este é para a largura do vídeo, também em pixels.
   Por que usar?: Mesma razão do height, para fazer tudo encaixar direitinho! 🖼️

Exemplo com height e width:

<video controls height="300" width="500">
  <source src="video.mp4" type="video/mp4" />
</video>

Aqui, o vídeo terá uma altura de 300 pixels e uma largura de 500 pixels. Legal, né? Agora você tem controle total sobre como o vídeo é exibido! 🎞️👌

Nota esses atributos servem tanto para video quanto para image

Áudios 🎵

Agora, que tal adicionar um pouco de música ou efeitos sonoros à sua página?

Tag de Áudio:

A tag para áudio é <audio>. Como o vídeo, ela também usa a tag <source>.

<audio controls>
  <source src="audio.mp3" type="audio/mp3" />
</audio>

Atributos importantes:

1. controls: Similar ao vídeo, adiciona controles básicos de áudio.
   Por que usar?: Para que as pessoas possam controlar o áudio, claro! 🎵🔊

Exercício Final 🎉👩‍💻

Hora do teste final, pessoal! Agora que você já sabe como dar vida à sua página com imagens, vídeos e áudios, é hora de colocar isso em prática! 😎🚀

Seu Desafio 🎯

1️⃣ Imagem: Adicione uma imagem com uma altura de 200px e uma largura de 300px.

1. Link para a imagem que você pode usar: https://menthor.io/_ipx/s_310x56/brand/menthor-logo-dark.svg)

Lembre-se de usar: <img src="SeuLinkDeImagemAqui" alt="Sua descrição" height="valor" width="valor">

2️⃣ Vídeo: Coloque um vídeo com controles e ajuste sua altura para 300px e largura para 500px.

1. Link para o vídeo que você pode usar: https://www.w3schools.com/html/mov_bbb.mp4

Lembre-se de usar:

<video controls height="valor" width="valor">
  <source src="SeuLinkDeVideoAqui" type="video/mp4" />
</video>

3️⃣ Áudio: Por último, mas não menos importante, adicione um áudio com controles.

1. Link para o áudio que você pode usar: https://www.w3schools.com/html/horse.ogg

Lembre-se de usar:

<audio controls>
  <source src="SeuLinkDeAudioAqui" type="audio/mp3" />
</audio>

Calma aí, precisamos do seu feedback

Esse curso aqui demorou quase um mês para ser escrito, então gostaria muito de receber o feedback de vocês.

Para isso, vá no nosso discord, abra o canal #feedback e tente falar 3 pontos que gostou e 3 pontos que não gostou fazendo nossas aulas, permitindo que melhoraremos cada vez mais para os próximos cursos.

Por fim, eu gostaria de agradecê-lo por chegar até aqui. O nosso objetivo é fornecer um conteúdo de altíssima qualidade para os desenvolvedores brasileiros de forma gratuita. Só assim conseguiremos ser referência ainda mais no mundo todo.

Obrigado! ☕