Ejercicio audio, video e imagen con HTML

Crea un nuevo documento HTML con las siguientes caracteristicas:

Dentro de la seccion, incluir 3 articulos (articles), segun lo siguiente:

    1. Titulo H2 indicando Video

        Incluyendo un video de Youtube 

    2. Titulo H2 indicando Imagen

        Incluyendo una imagen referenciada por URL

    3. Titulo H2 indicando Audio

        Busca audio en internet y enlazalo desde su etiqueta correspondiente

15 Web adaptativa

Con unos pequeños cambios en el "head" de nuestra web y en el archivo css podremos hacer que nuestra web se adapte a diferentes tamaños de pantalla, lo que se suele llamar web adaptativa o responsive.
Para ello modificaremos el codigo del proyecto anterior.
Podras ver todo esto en el siguiente video:

09 Audio Video

 Para insertar audio video en nuestro documento HTML, lo primero que debemos tener en cuenta es si el archivo se cargara via web para lo cual deberemos tener la dirección url completa o si será cargado internamente con lo que pondremos la dirección relativa al archivo.

Una vez tenemos claro desde donde cargaremos el archivo, pondremos la etiqueta “video”, añadiendo la propiedad “controls” para que aparezcan los controles (volumen, play…), también podemos indicar el alto / ancho, puedes ver como queda en el siguiente ejemplo:

<video src="src/penalti.mp4" controls width="220px" height="240px">Tu navegador no soporta este video </video>

Entre las etiquetas he puesto un comentario que indicara al usuario que su navegador no soporta este video, en caso de que el navegador sea antiguo.

Para el audio, es bastante parecido, cambia la etiqueta a “audio”, quedando el código de la siguiente manera:

<audio src="src/TheGoldenPresentJesseGallagher.mp3" controls></audio>

09 Html Css. Video y Audio

Insertar video y audio en nuestra web.

<!DOCTYPE html><html><head><title>Video Audio</title><meta charset="utf-8"></head><body><!--Cabecera--><header>
</header> <!--Barra navegacion--><nav>
</nav><!--Contenido principal--><section><article><!--Video--><video src="http://techslides.com/demos/sample-videos/small.ogv" width="240" height"360" controls>Tu navegador no soporta la etiqueta <code>Video</code></video><!--Audio--><audio src="sonido.ogg" controls>Tu navegador no soporta la etiqueta <code>Audio</code></audio></article></section><!--Complemento lateral--><aside>
</aside><!--Pie de pagina--><footer>
</footer></body></html>