<video>
será adicionada e serão adicionados elementos dentro dela;src=""
indica a fonte, é o mais importante;controls
fará aparecer controles como pause, som, fullscreen...p
para direcionar o usuário para outra URL ou para fazer o download..<source>
;src=""
da tag<video>
para a tag<source>
;type=""
auxiliará o browser a entender o arquivo. No caso,type="video/mp4"
;width
para largura também pode ser adicionado;height
para altura;autoplay
(dependendo do browser, não será obedecido);preload
que 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;loop
vai tocar o vídeo novamente quando o mesmo acabar (depende do browser);muted
para o vídeo começar mutado (as vezes, acrescentar o muted faz o autoplay funcionar em determinados browsers);poster
permite por uma imagem de fundo antes dele começar.Pode não funcionar, dependendo do browser.
<video controls autoplay muted height="200px">
<source src="./assets-example/rocket.mp4" type="video/mp4">
</video>
<áudio>
será adicionada e serão adicionados elementos dentro dela;src=""
indica a fonte, é o mais importante;controls
fará aparecer controles como pause, volume...p
para direcionar o usuário para outra URL ou para fazer o download..<source>
;src=""
da tag<audio>
para a tag<source>
;type=""
auxiliará o browser a entender o arquivo. No caso,type="audio/mp3"
outype="audio/ogg"
;hidden
esconde os controls do áudio;autoplay
executará automaticamente (dependendo do browser, não será obedecido);preload
fará 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;loop
vai tocar o áudio novamente quando o mesmo acabar (depende do browser);muted
para 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.
<audio controls autoplay muted height="200px">
<source src="./assets-example/viper.mp3" type="audio/mp3">
<source src="./assets-example/viper.ogg" type="audio/ogg">
<p>Seu navegador não suporta áudio.</p>
</audio>
Um elemento que vai trazer conteúdo externo.
<iframe>
será adicionada e serão adicionados elementos dentro dela;src=""
indica a fonte, é o mais importante;frameborder
se haverá ou não uma borda no frame;width
dará a largura;height
dará a altura;title
para acessibilidade;allow
trará configurações específicas de onde vem o conteúdo, no caso, estará permitindo algumas políticas do Youtube;allowfullscreen
permitirá deixar o vídeo em tela cheia;
<iframe
width="576"
height="315"
src="exemplo"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<iframe
width="576"
height="315"
src="exemplo"
style="border:0;"
allowfullscreen=""
loading="lazy">
referrerpolicy="no-referrer-when-downgrade">
</iframe>
<img>
src=""
indica a fonte, é o mais importante;alt
é um texto alternativo que servirá como mensagem caso a imagem não carregue;width
para largura também pode ser adicionado;height
para altura;title
;<a>
possibilitará que a imagem tenha a função de um link;style="background-image: url()"
É um elemento que pode ir dentro de tags, como a tagp
.
<p style="background-image: url('./exemplo')">Imagem</p>
</a>
Imagem
Criar uma caixadiv
com 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 tagp
não estará relacionado à imagem.
Essa é a indicada e semântica, pois os elementos dentro da tag figure
estarão relacionados à imagem.
<svg>
É uma marcação estilo HTML, mas não é pra textos, e sim parafazer imagens.
Possuímos elementos para gerar formas.
- Imagemrasterizada x Imagemvetorizada
Imagem rasterizada (ou pixelada).
<img src="fonte" height="315" width="400">
Por ser formada por pixels, fica esticada.
Imagem vetorizada.
<svg height="300" width="400">
<circle cx="200" cy="150" r="140"
stroke="green" stroke-width="4"
fill="yellow">
</svg>
Por ser vetorizada, mantém a qualidade.
SVGs podem ser feitas por programas específicos e seus códigos podem ser transferidos.
Endereço:FigmaPara fotografias, ainda prefira usar imagens rasterizadas.
<svg>
É o momento de fazer testes. Basta alterar valores como, por exemplo, os números dentro dacx
que está na tagcircle
<svg style="background-color: green;" height="300" width="400">
<circle cx="200" cy="150" r="100"
stroke="yellow" stroke-width="60"
fill="blue">
</svg>
<svg height="200" width="400">
<rect width="4" height="200" fill="yellow">
</svg>
Também é possível adicionar um arquivo svg diretamente na tagimg
<img src="./assets-example/ball.svg">
Endereço: MDN | SVG