Adicionando Áudio, Imagens, Vídeos

Quando tudo começou a web era formada principalmente por textos simples, mas essa não é mais a nossa realidade.

Hoje, podemos usar livremente imagens, áudio, vídeo e iframes sabendo que esse conteúdo, nossos navegadores modernos oferecem suporte a todas essas coisas muito bem.

<img src="./img/vainaweb.png" alt="logo do vai na web">

Adicionando imagens

Adicionando imagens

elemento

endereço da imagem

texto alternativo

<img src="./img/vainaweb.png" alt="logo do vai na web">

Adicionando áudio

<audio 
 src="link-do-audio">
</audio>

elemento

endereço do áudio

Adicionando áudio

<audio 
 src="link-do-audio"
 controls="controls">
</audio>

controles

Adicionando vídeo

<video 
	src="link-do-video">             
</video>

elemento

endereço do vídeo

Adicionando vídeo

<video 
    src="link-do-video"             
    type="video/mp4" 
    autoplay 
    loop
    width="426"
    height="240">
</video>

mais atributos!

Adicionando iframes

<iframe
    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14697.658900436527!2d-43.20125821534424!3d-22.9349486953094!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x21846ab8cd7b5338!2sVaiNaWeb%20Prazeres!5e0!3m2!1spt-BR!2sbr!4v1583262748287!5m2!1spt-BR!2sbr"
    width="100%"
    height="300"
    frameborder="0"
    style="border:0"
    allowfullscreen>
</iframe>

Figuras e legendas

<figure>
  <img
    src="link-da-imagem"
    alt="VaiNaWeb"
  >
</figure>

Figuras e legendas

<figure>
  <img
    src="link-da-imagem"
    alt="VaiNaWeb"
  >
  <figcaption>
    Logo do Programa VaiNaWeb.
  </figcaption>
</figure>

Logo do Programa do VaiNaWeb

Até a próxima!

Adicionando Áudio, Imagens, Vídeos

By Vai Na Web

Adicionando Áudio, Imagens, Vídeos

WIP

  • 825