Imagem dinâmica.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mídias adaptável</title>
    <style>
        body{
            background-color: azure;
        }
    </style>
</head>
<body>
    <h1>Imagem dinâmica</h1>
    <hr>
    <p> As imagens irão se adaptar de acordo com o dispositivo do usúario. </p>

    <picture>
        <source media="(max-width: 750px)" srcset="Imagens/foto-p.png" type="image/png">
        <source media="(max-width: 1050px)" srcset="Imagens/foto-m.png" type="image/png">
        <img src="Imagens/foto-g.png" alt="Mídia Flexivel">
    </picture>
    <h1>Reproduzindo áudio</h1>
    <p>Reproduzindo áudio em html</p>
    <audio preload="metadata" controls autoplay loop>
        <source src="Mídias/astraldark.mp3" type="audio/mpeg">
        <source src="Mídias/astraldark.mp3" type="audio/ogg">
        <source src="Mídias/astraldark.mp3" type="audio/wav">
        <p>Infelizmente seu navegador não consegue reproduzir áudio <a href="Mídias/astraldark.mp3">Clique aqui para baixar o arquivo MP3</a></p>
    </audio>
    <p>__</p>
    <p>Acesse<a href="Mídias Locais.html" rel="next"> Vídeos</a></p>
    <a href="Principal.html" rel="prev">Voltar</a>
</body>
</html>