INSTITUTO POLITECNICO NACIONAL

CECyT Nº 8 “NARCISO BASSOLS”

PRÁCTICAS DE LABORATORIO

Asignatura: Creación de Portales Web Turno Vespertino

Semestre: V Periodo: 1° Competencia
Especialidad o área: Computación Duración: 1 a 2 horas

PRÁCTICA 4: ENLACES, MENÚS, IMÁGENES, SONIDO Y VIDEOS.

INSTRUCCIONES GENERALES:
Con la finalidad de mantener un funcionamiento correcto de su sitio web, es
importante que respete todos los nombres tanto de carpetas como de archivos con
sus respectivas extensiones que le indique su práctica. Como regla general de buena
práctica, los nombres de archivos y sus extensiones van con MINÚSCULAS Y SIN
CARACTERES ESPECIALES SALVO GUIONES, los nombres de carpetas pueden llevar
mayúsculas, pero de igual forma no deben llevar espacios ni caracteres especiales
salvo guiones.

DESARROLLO.

1. Cree en el escritorio una carpeta nueva llamada Practica4 para almacenar su sitio web, abra
Sublime Text e importe dicha carpeta arrastrándola al editor de textos.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
1
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

2. Desde el menú File→Save As guarde su archivo dentro de la carpeta Practica3 con el

nombre de index.html

3. Con ayuda del IntelliSense codifique el esqueleto de la página web.

4. Coloque dentro de la etiqueta <title> el título de la página Práctica 4 y con ayuda de la

etiqueta <meta> codifique el set de caracteres UTF-8 para que nuestra página identifique
los caracteres especiales del alfabeto en español.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
2
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

5. Dentro de su carpeta de proyecto copie las carpetas images, videos y sounds que se
encuentran en sus materiales para la práctica.

6. Regrese a su editor Sublime Text y ahora procederemos a colocar dentro de la etiqueta

<header> una imagen con la etiqueta <img> como se muestra en pantalla.

7. Construiremos ahora la barra de navegación con la etiqueta estructural <nav> con un

selector de ID llamado barra que debe codificarse justo debajo de la etiqueta <header>
como se muestra en pantalla.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
3
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

8. Dentro de la etiqueta estructural <nav> codificaremos unas listas no ordenadas con las
etiquetas <ul> y <li> las cuáles serán las opciones de nuestra barra de navegación. La
etiqueta <ul> tendrá un selector de ID llamado menú. Con la etiqueta <a> crearemos
hipervínculos en las opciones de la lista.

El primer enlace tendrá un selector de ID llamado pagina_activa, los 3 primeros enlaces

redirigirán con el parámetro href a las páginas index.html, galeria.html y videos.html, los
2 últimos tendrán el símbolo de numeral o almohadilla (#) para indicar que no tienen vínculo.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
4
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

9. Dentro de la etiqueta <li> de nuestro Menú 1 y Menú 2, colocaremos un submenú con 3

opciones más con las etiquetas <ul>, <li> y <a>, de igual manera tendrán en su parámetro
href el símbolo de numeral o almohadilla (#) para indicar que no tienen vínculo. Cada
etiqueta <ul> tendrá un selector de clase llamado submenu.

10. Debajo de la etiqueta <nav> coloque la etiqueta <section> como se muestra en pantalla.

11. Dentro de la etiqueta <section> coloque una etiqueta <article> y dentro de ella inserte la
imagen icono_mujer.png o bien icono_hombre.png con la etiqueta <img>.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
5
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

12. Debajo de su imagen coloque el encabezado, la línea divisora y el texto que se muestra en
pantalla.

13. Codifique otro <article> dentro de su <section> con el encabezado, la línea divisora y el
texto que se muestra en pantalla.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
6
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

14. Codifique otro <article> dentro de su <section> con el encabezado, la línea divisora y el
texto que se muestra en pantalla.

15. Codifique otro <article> dentro de su <section> con el encabezado, la línea divisora y el
texto que se muestra en pantalla.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
7
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

16. Debajo de la etiqueta de cierre </section> codifique el siguiente pie de página con la etiqueta
<footer>, dentro de él coloque un párrafo con sus créditos y una inserción de audio con las
etiquetas <audio> y <source>, los parámetros controls y autoplay permiten visualizar el
reproductor y que la música inicie automáticamente respectivamente.

17. Para codificar los estilos CSS debemos de crear una carpeta que contenga dichos archivos,
en Sublime Text haga clic con el botón derecho del mouse sobre la carpeta Practica4 y elija
la opción New Folder para crear dentro una carpeta que se llame css, verá que aparece
tanto en la columna de FOLDERS de Sublime Text como en su explorador.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
8
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

18. En Sublime Text cree un nuevo archivo desde el menú New→File que se llamará
principal.css y lo guardará en la carpeta css que creó previamente.

19. Con la etiqueta <link> enlace su archivo css para que nuestra página reconozca los estilos
CSS.

20. Ahora abra el archivo principal.css en Sublime Text haciendo doble clic en él y ahí
codificamos la primera línea del estilo, que cumple la misma función que la que codificamos
en la etiqueta <meta>.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
9
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

21. Colocaremos el primer estilo a la etiqueta body.

22. Debajo del estilo de body colocaremos el estilo de la etiqueta header.

23. Debajo del estilo de header coloque el estilo la etiqueta img que se encuentra dentro de la
etiqueta header (Selector Descendente).

24. Debajo del estilo de header img coloque el estilo del selector de ID #barra.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
10
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

25. Debajo del estilo del selector de ID #barra coloque el estilo la etiqueta ul que se encuentra
dentro del selector de ID #barra (Selector Descendente).

26. Debajo del estilo de #barra ul coloque el estilo la etiqueta li cuyo padre directo sea el
selector de ID #menu, este tipo de selector descendente utiliza el signo > para garantizar
que el estilo solo se aplique a los hijos y no a los descendientes del árbol del documento.

27. Debajo del estilo de #menu > li coloque el estilo la etiqueta a cuyo padre directo sea li y
cuyo ancestro sea #menu, de la misma forma se utiliza el signo > para garantizar que el
estilo solo se aplique a los hijos y descendientes de esa rama específica del árbol del
documento.

28. Debajo del estilo de #menu > li > a coloque el estilo de #menu li a:hover el cuál se aplicará
cuando el ratón se encuentre encima del elemento. La opción transition permite una
transición de todos los elementos de 0.3 seg. de la opacidad hacia el color original.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
11
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

29. Debajo del estilo de #menu li a:hover coloque el estilo del selector de clase .submenu, la
opción transition permite una transición de 1.5 seg. de la opacidad hacia el color original y
la opción visibility:hidden y opacity: 0 permiten esconder el submenú.

30. Debajo del estilo de .submenu coloque el estilo de .submenu li a.

31. Debajo del estilo de .submenu li a coloque el estilo de #menu li:hover .submenu, la opción
visibility:visible y opacity: 1 permiten mostrar el submenú cuando el ratón se encuentre
encima del elemento.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
12
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

32. Debajo del estilo de #menu li:hover .submenu coloque el estilo de #pagina_activa.

33. Debajo del estilo de #pagina_activa coloque el estilo de h1.

34. Debajo del estilo de h1 coloque el estilo de section.

35. Debajo del estilo de section coloque el estilo de #icono.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
13
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

36. Debajo del estilo de #icono coloque el estilo de article.

37. Debajo del estilo de article coloque el estilo de footer.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
14
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

38. Guarde los cambios y visualice su página. Nota: Para que el audio se reproduzca
asegúrese de que el navegador no lo tenga bloqueado.

39. Haga una copia de su página index.html y renómbrela como galería.html.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
15
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

NOTA: El funcionamiento de esta galería se ha adaptado del tutorial del

YouTuber J&G Proyectos Web si desea ver la explicación del código visite su
video cuyo enlace es: https://youtu.be/mWKmDV94uPI

40. Cambie el título de su documento y agregue un nuevo estilo llamado galería.css que
crearemos más adelante.

41. En su barra de navegación cambie el selector de ID pagina_activa al enlace de la página

galería.html.

42. Borre todo el contenido de su etiqueta <section>.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
16
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

43. Y coloque el siguiente código dentro de la etiqueta <section>.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
17
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

44. Dentro de su carpeta css cree el archivo galería.css.

45. Y codifique los estilos de la galería.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
18
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

46. También codifique los estilos del lightbox de imágenes.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
19
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

47. De igual forma codifique los estilos de las imágenes.

48. Y finalmente el estilo del botón cerrar de la galería.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
20
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

49. Guarde los cambios y visualice su página.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
21
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

50. Como lo hizo en el punto 39, haga una copia de su página index.html y renómbrela como
videos.html.

51. Cambie el título de su documento y agregue un nuevo estilo llamado videos.css que
crearemos más adelante.

52. En su barra de navegación cambie el selector de ID pagina_activa al enlace de la página

videos.html.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
22
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

53. Borre todo el contenido de su etiqueta <section> y el audio de la etiqueta <footer>.

54. Y coloque el siguiente código dentro de la etiqueta <section>.

55. Dentro de su carpeta css cree el archivo galería.css.

56. Y codifique el único estilo de su video.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
23
 INSTITUTO POLITECNICO NACIONAL
CECyT Nº 8 “NARCISO BASSOLS”
PRÁCTICAS DE LABORATORIO

57. Guarde los cambios y visualice su página.

58. Suba la práctica a su servidor en neocities.org y haga la entrega correspondiente en la

actividad de Google Classroom. Si tiene dudas de como subir la práctica consulte el archivo
PDF de ayuda que le dio la profesora. NOTA: Para esta práctica no cree en su servidor
la carpeta de sounds ni videos ni suba sus archivos ya que para los tipos de audio y
video solo se pueden subir si la cuenta de neocities es premium, sin embargo el
archivo comprimido que se entrega junto al enlace en la actividad de Google
Classroom si debe de contener las carpetas y archivos de sonido y video.

Elaborada por:
Ing. Ericka Nayelhi Zavala Romero
24