<video>

▼

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Tipo de arquivos suportados

• MP4 = MPEG 4 files with H264 video codec and AAC audio codec
• WebM = WebM files with VP8 video codec and Vorbis audio codec
• Ogg = Ogg files with Theora video codec and Vorbis audio codec

<audio>

▼

<audio controls>
  <source src="bird.ogg" type="audio/ogg">
  <source src="bird.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Tipo de arquivos suportados

Imagens img

▼

Forma de escrita da img

<img src="url" alt="Texto alternativo"/>

<!-- Chamada uma imagem -->
<img src="boat.gif" alt="Big Boat" />

Marcação <figure>

Definições auto contidas de representações visuais (semântica)

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

Mapa de imagem

Vc pode criar áreas clicáveis em uma imagem

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Imagens <img> (continuação)

Formatos

Programa - editar

▼

image

Preparando as imagens para a Web

• Tipos (jpg, gif e png)
• Redimensionar e recortar
• Otimização

O programa

GIMP

E os plugins

Exemplo prático

Com este arquivo