Ayuda ejercicios unidad 7: Vídeo y audio

Ejercicio 1: Practicar con vídeo

El archivo index.html de la carpeta ejercicios/cursos-aulaclic, deberá tener el siguiente código: con el enlace a la nueva página video_aulaclic.html

<!doctype html>
	  <html lang="es">
	  <head>
	  <meta charset="utf-8" />
	  <title>aulaClic. Cursos gratis</title>
	  <link rel="stylesheet" type="text/css" href="css/aulaclic.css" />
	  </head>
	  <body>
	  <a href="https://www.aulaclic.es">
	  <picture>
	  <source media="(orientation: portrait) and  (max-width: 500px)" srcset="graficos/logo_aulaclic_pequeno.png" >
	<img src="graficos/logo_aulaclic.png" alt="logo aulaClic">
	  </picture>
  </a>
  <p>La primera web en español sobre cursos de informática gratis on-line.</p>
  <ul>
  <li><h2>Cursos de aulaClic</h2></li>
  <ol>
  <li>Access 2016</li> 
  <li>Excel 2016</li>
  <li>Internet</li>
  <li>Windows</li>
  </ol>
  <li><h2>Cursos de colaboradores</h2></li>
  <ol start="5">
  <li>autoCAD 2015</li>
  <li>Estadística con Excel</li>
  <li>Joomla</li>
  </ol>
  </ul>
  <p>En este enlace puedes ver un ejemplo de los vídeos de aulaClic:<a href="video_aulaclic.html" target="_blank"><img src="graficos/camera.gif"</a></p>
  <hr>
  <p><a href="https://www.aulaclic.es/portada/politica_cookies.html" target="_blank"> <b>Politica de cookies</b></a> </p>
  </body>
  </html>

La nueva página video_aulaclic.html, tendrá este código:

<!doctype html>
<html lang="es">
<head>
	  <meta charset="utf-8" />
	  <title>Ejemplo vídeo de aulaClic. </title>
	  <link rel="stylesheet" type="text/css" href="css/aulaclic.css" />
</head>
<body>
	  <p>Vídeo ejemplo de aulaClic.</p>
	  <iframe width="560" height="315" src="https://www.youtube.com/embed/-oki6vrTzPs" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
	  <p><a href="index.html"> Volver</a></p>
</body>
</html>

Para obtener el código del iframe debes ir a la página de YouTube donde está el vídeo y pulsar el botón Compartir, y luego el botón Insertar, al pulsar en el botón Copiar se copia el código al portapapeles, y ya sólo queda pegarlo en la página web.

Puedes ver el resultado en este enlace: index.html

También puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies