Posso ver e ouvir o HTML

1. A tag<video>será adicionada e serão adicionados elementos dentro dela;
2. O elementosrc=""indica a fonte, é o mais importante;
3. O elementocontrolsfará aparecer controles como pause, som, fullscreen...
4. Se não funcionar?
1. Posso adicionar uma tagp para direcionar o usuário para outra URL ou para fazer o download..
2. Posso adicionar a tag<source>;
• Ao fazer isso, transfere-se o elementosrc="" da tag<video> para a tag<source>;
• O elementotype=""auxiliará o browser a entender o arquivo. No caso,type="video/mp4";
3. Encontrar diversos formatos de Media type no MDN:
• MDN | Media type and format guide
5. O elementowidthpara largura também pode ser adicionado;
6. O elementoheightpara altura;
7. O elementoautoplay(dependendo do browser, não será obedecido);
8. O elementopreloadque fará a pré leitura do vídeo de maneira automatizada, ou carregará só o básico, ou não fará nada até que o usuário aperte algum botão;
9. O elementoloopvai tocar o vídeo novamente quando o mesmo acabar (depende do browser);
10. O elementomutedpara o vídeo começar mutado (as vezes, acrescentar o muted faz o autoplay funcionar em determinados browsers);
11. O elementoposterpermite por uma imagem de fundo antes dele começar.

Pode não funcionar, dependendo do browser.

1. A tag<áudio>será adicionada e serão adicionados elementos dentro dela;
2. O elementosrc=""indica a fonte, é o mais importante;
3. O elementocontrolsfará aparecer controles como pause, volume...
4. Se não funcionar?
1. Posso adicionar uma tagp para direcionar o usuário para outra URL ou para fazer o download..
2. Posso adicionar a tag<source>;
• Ao fazer isso, transfere-se o elementosrc="" da tag<audio> para a tag<source>;
• O elementotype=""auxiliará o browser a entender o arquivo. No caso,type="audio/mp3"outype="audio/ogg";
3. Encontrar diversos formatos de Media type no MDN:
• MDN | Media type and format guide
5. O elementohiddenesconde os controls do áudio;
6. O elementoautoplayexecutará automaticamente (dependendo do browser, não será obedecido);
7. O elementopreloadfará a pré leitura do áudio de maneira automatizada, ou carregará só o básico, ou não fará nada até que o usuário aperte algum botão;
8. O elementoloopvai tocar o áudio novamente quando o mesmo acabar (depende do browser);
9. O elementomutedpara o áudio começar mutado (para audios, acrescentar o muted faz o autoplay não funcionar em determinados browsers);

Pode não funcionar, dependendo do browser.

Um elemento que vai trazer conteúdo externo.

1. A tag<iframe>será adicionada e serão adicionados elementos dentro dela;
2. O elementosrc=""indica a fonte, é o mais importante;
3. O elementoframeborderse haverá ou não uma borda no frame;
4. O elementowidthdará a largura;
5. O elementoheightdará a altura;
6. O elementotitlepara acessibilidade;
7. O elementoallowtrará configurações específicas de onde vem o conteúdo, no caso, estará permitindo algumas políticas do Youtube;
8. O elementoallowfullscreenpermitirá deixar o vídeo em tela cheia;

1. O elementosrc=""indica a fonte, é o mais importante;
2. O elementoalté um texto alternativo que servirá como mensagem caso a imagem não carregue;
3. O elementowidthpara largura também pode ser adicionado;
4. O elementoheightpara altura;
5. O elementotitle;
6. Colocá-la dentro da tag<a>possibilitará que a imagem tenha a função de um link;

Pode não funcionar, dependendo do browser.

HTML

<a href="https://source.unsplash.com/random" target="_blank">
  <img src="https://source.unsplash.com/random"
alt="<img> de exemplo." width="400" height="315">
</a>


Resultado

É um elemento que pode ir dentro de tags, como a tagp.

Criar uma caixadivcom a classefigurepara inserir elementos de imagem e texto dentro dela.

Mas, esse modelo não é indicado. Além de não ser semântico, o texto da tagpnão estará relacionado à imagem.

HTML

<div class="figure">
  <a href="exemplo" target:_blank>
   <img src="exemplo" alt="Imagem de exemplo"
   title="Colocar um título na imagem" height="315"
   width="380">
  </a>
  <p>Colocar um título na imagem</p>
</div>


Resultado

Colocar um título na imagem

Essa é a indicada e semântica, pois os elementos dentro da tag figureestarão relacionados à imagem.

HTML

<a href="exemplo" target:_blank>
  <figure>
   <img src="exemplo" alt="Imagem de exemplo"
   title="Colocar um título na imagem" height="315"
   width="380">
   <figcaption>Colocar um título na imagem</figcaption>
  </figure>
</a>


Resultado

É uma marcação estilo HTML, mas não é pra textos, e sim parafazer imagens.

Possuímos elementos para gerar formas.

- Imagemrasterizada x Imagemvetorizada

• Mais leve;
• Mais detalhada;
• Maior acessibilidade e SEO;
• Pode ser editada via CSS ou atributos.

• Pode ser mais complicado de trabalhar;
• Quanto mais complexa a imagem, mais trabalho para o navegador;
• Navegadores mais antigos não possuem suporte para essa tag.

Imagem rasterizada (ou pixelada).

HTML

<img src="fonte" height="315" width="400">

Por ser formada por pixels, fica esticada.

Resultado

Imagem vetorizada.

SVGs podem ser feitas por programas específicos e seus códigos podem ser transferidos.

Para fotografias, ainda prefira usar imagens rasterizadas.

É o momento de fazer testes. Basta alterar valores como, por exemplo, os números dentro dacxque está na tagcircle

Também é possível adicionar um arquivo svg diretamente na tagimg

• Facilita o processo.

• Impossibilita a edição direta da imagem no arquivo HTML;
• O arquivo svg precisará conter propriedades adicionais para que funcione corretamente.

Endereço: MDN | SVG