En esta ocasión no me he limitado a hacer el ejercicio que se pedía y lo he hecho de forma más amplia, no obstante, por falta de tiempo no he añadido más páginas, aunque me hubiera gustado.
Mi idea ha sido crear una página como la del frame, algo modificada por supuesto dado la temática. Ésta sería la principal:
<!DOCTYPE html>
<html lang="es">
<header>
<meta name= Description" content="Prueba de menu musical">
<meta charset"utf-8" />
<title>Página de música</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</header>
<body link="blue" alink="blue" vlink="blue" background="C:\Users\ETC5\Pictures/musica.jpg">
<a name="arriba"></a>
<DIV ALIGN="center"><FONT FACE="verdana" SIZE=5 COLOR="#2E9AFE"></DIV>
<p></p>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/musicaaa.jpg" width="500px" height="300px" alt="blog"></a></div>
<h2>MENU</h2>
<ol>
<li><a href="C:\Users\ETC5\Desktop\melani/pagina musica 1.html" target="ventana1" title="música de Lordi">Lordi</a></li>
<li><a href="C:\Users\ETC5\Desktop\melani/pagina musica 3.html" target="ventana1" title="música y anime">Música y anime</a></li>
</ol>
<DIV ALIGN="center"><iframe src="http://www.mp3xd.com/" width="900" height="500" frameborder="1" name="ventana1"> </iframe></DIV> </ br>
<p></p>
<DIV ALIGN=center><img src="C:\Users\ETC5\Desktop\melani/adios.gif" width="600px" height="500px" alt="sandia"></div>
<DIV ALIGN=center><a href="javascript:history.go(-1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u ewwsefesetwtery- copia.png"width="54px" height="57px"></a></DIV>
<DIV ALIGN=center><a href="javascript:history.go(1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u.png" width="54px" height="57px"></a></DIV>
<div style="position:fixed;right:0;top:0;"><a href="#arriba"><img src="C:\Users\ETC5\Desktop\melani/clave.gif" width="200" height="145" /></div>
</body>
</html>
En este caso, he puesto un fondo diferente, con imagen y temática musical, creando en esencia una página de dicha temática.
Me encargué, además de crear yo misma la imagen que nos da la bienvenida a partir de la combinación de la imagen colorida de su fondo y las letras de bienvenida, aplicando la correspondiente transparencia, etc.
La clave de sol de la parte superior nos llevará a la parte superior de la página, acompañándonos constantemente.
Me encargué además de cambiar los colores de las letras y el menú en sí para que fuese más acorde y, en el menú aparecen los links correspondientes a las nuevas páginas que creé para complementar esta..
Para finalizar, puse una imagen animada como despedida así como las flechas para ir adelante o atrás en las páginas del frame.
Ésta es la primera página que asocié dentro del frame:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="Videos y canciones de Lordi">
<meta charset"utf-8" />
<title>Lordi</title>
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
<style type="text/css">
.vjs-default-skin { color: #ff0000; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #ff0000 }
.vjs-default-skin .vjs-control-bar { font-size: 89% }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body link="red" alink="red" vlink="red" background="C:\Users\ETC5\Desktop\melani/fondo oscuro.jpg">
<a name="arriba"></a>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/lordiweb.jpg" width="800px" height="400px" alt="blog"></a></div>
<p></p>
<p><font face="univers" size="6" color="red"> <b>BITE IT LIKE A BULLDOG</b></font></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/NiQ3i5MwWrg?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe></p>
<p><font face="univers" size="6" color="red"> <b>THIS IS HEAVY METAL</b></font></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/CB8FcRv5YJo?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe>
<p></p>
<p><font face="univers" size="6" color="red"> <b>THE RIFT</b></font></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jFwbrHAyuaw?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe>
<p></p>
<p><font face="univers" size="6" color="red"> <b>DEVIL IS A LOOSER</b></font></p>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
<source src="C:\Users\ETC5\Desktop\melani/Lordi Devil Is A Loser.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<div align=center><a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/lord.png"/></a></div>
</body>
</html>
Siguiendo la temática musical, la asocié a un grupo, con su respectivo logo e imagen. En su parte superior estaría la imagen del grupo, centrada gracias a un atributo de imagen para centrarla. Su fondo es completamente diferente al anterior,de nuevo por una imagen que he colocado. En su contenido, hay distintos vídeos adquiridos directamente de youtube, por lo tanto, se podrán ver incluso desde otro pc. Estos vídeos han sido colocados por iframes en cada uno.
Estos códigos se pueden obtener clicando en compartir, posteriormente en insertar, copiando el código que aparece pero,además, añadiéndole https: antes de las dos barras de su enlace, ya que sin ello, no es funcional.
Como últimos detalles, he adecuado el color de las letras al igual que antes a la estética de la página y, para finalizar, una imagen centrada con el logo del grupo y fondo transparente que, al clicar, lleva a la parte superior de la página. Los párrafos nuevos de la parte de head son los pertinentes al reproductor de música que he puesto en último lugar, ya que aquí estoy indicando su estilo, colores etc. El vídeo me lo he tenido que descargar para que pudiese funcionar, ya que directamente de youtube no servía.
El lugar donde pude adquirir este reproductor es http://www.videojs.com/
Éste sería el otro html relacionado con la primera página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="Videos y canciones de Lordi">
<meta charset"utf-8" />
<title>MUSICA Y ANIME</title>
</head>
<body link="brown" alink="brown" vlink="brown" background="C:\Users\ETC5\Desktop\melani/back.jpg">
<a name="arriba"></a>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/anime.jpg" width="800px" height="400px" alt="blog"></a></div>
<p></p>
<p><font face="univers" size="6" color="brown"> <b>NIGHTMARE</b></font></p>
<video src="C:\Users\ETC5\Desktop\melani/MDS HAPPY HALLOWEEN MEP.mp4" width="600" heigth="600" controls> </video>
<p><font face="univers" size="6" color="brown"> <b>ROCK AND ROLL</b></font></p>
<video src="C:\Users\ETC5\Desktop\melani/MDS Rock N Roll MEP.mp4" width="600" heigth="600" controls> </video>
<p></p>
<p><font face="univers" size="6" color="brown"> <b>TORADORA OPENING</b></font></p>
<audio src="C:\Users\ETC5\Desktop\melani/Toradora Opening.mp3" width="600" heigth="600" controls> </audio>
<p></p>
<div align=center><a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/chica guitarra.jpg"/></a></div>
</body>
</html>
Ésta, aún con distinta estética a la anterior, sigue la misma estructura, la diferencia es que los vídeos están subidos con la etiqueta de video, y no de frame.
<video src="C:\Users\ETC5\Desktop\melani/MDS HAPPY HALLOWEEN MEP.mp4" width="600" heigth="600" controls> </video>
el src indica la ubicación del archivo, así como su nombre y extensión, dado que, para que funcionase he tenido que descargarlo en el pc, el link de youtube aquí no es funcional, al menos con el código así. Posteriormente especifiqué sus medidas, añadí la palabra "controls", la cual especifica al navegador que muestre los controles propios del video y, posteriormente,cerré la etiqueta.
Coloqué dos vídeos y un audio, con este código:
<audio src="C:\Users\ETC5\Desktop\melani/Toradora Opening.mp3" width="600" heigth="600" controls> </audio>
Los atributos son exactamente iguales, salvo la etiqueta de audio. también tuve que descargar dicho archivo para poder establecer la ruta de la ubicación de su carpeta
No hay comentarios:
Publicar un comentario