HTML5, CSS3 y JavaScript: Caso Práctico Gimnasio Murcia

HTML5, CSS3 y JavaScript N. I
GUIÓN DE CONTENIDOS
UD1. HTML 5. Nivel I
Caso práctico
-1-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Ejercicio
En este ejercicio pretendemos practicar la estructura de elementos de una página
web en HTML5. No nos preocupa el formato, el color o el diseño, únicamente la
estructura.
Deseamos crear un sitio web llamado “Gimnasio Murcia”, con varias páginas web
llamadas
“index.html”,
“servicios.html”,
“galeria.html”,
“dietas.html”
y
“contacta.html”
Más abajo especificaremos las características de cada página y os mostraremos
una visión general de cómo ha de quedar cada una de ellas.
Se adjunta el material necesario en el vínculo "material caso práctico" donde os
facilitamos todas las imágenes necesarias en formato “.jpg” y un archivo de texto
con todo el texto empleado.
e
-2-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Ejercicio
Cada una de las páginas deben adaptarse a la estructura HTML5 lo mejor
posible:
-3-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Página index.html(1 de 4)
Página index.html, con estructura estándar HTML5
Se compone de:







Metas tipo “charset” y “name” (description y keyword)
Título de la página.
Sección Header con 2 textos en “H1” y “H2” y un objeto tipo “figure” con
referencia a la imagen “banner1.jpg”
Sección Nav con vínculos a “index.html”, “servicios.html”, “galería.html”,
“dietas.html” y “contacta.html”, todos ellos con propiedades “Alt” y “Title”.
Sección Section
o Con una sección article con un header que contiene:
 Título en “h1” y título en “h2”.
 Un texto en párrafo, un objeto tipo “figure” con la imagen
“foto1.jpg” y un título para la imagen
o Y otra sección de article con una sección de header que contiene:
 Un titular en “h1”
 Un texto en párrafo
 Una lista
 Un objeto tipo “figure” que contiene una imagen llamada
“foto2.jpg” y un titular para la imagen
Una sección de aside con dos párrafos
Una sección footer con un texto
-4-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Página index.html(2 de 4)
Página index.html (1 de 3) (Vista Previa)
-5-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Página index.html(3 de 4)
Página index.html (2 de 3) (Vista Previa)
-6-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Página index.html(4 de 4)
Página index.html (3 de 3) (Vista Previa)
-7-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página servicios.html(1 de 3)
Página Servicios.html, con estructura estándar HTML5
Se compone de:







Metas tipo “charset” y “name” (description y keyword)
Título de la página.
Sección Header con 2 textos en “H1” y “H2” y un objeto tipo “figure” con
referencia a la imagen “banner2.jpg”
Sección Nav con vínculos a “index.html”, “servicios.html”, “galería.html”,
“dietas.html” y “contacta.html”, todos ellos con propiedades “Alt” y “Title”.
Sección Section
o Con una sección article que contiene:
 Una tabla de 900 pixel de ancho, con un borde de 1 pixel, y dicha
tabla la componen 5 filas por 3 columnas
o Y otra sección de article que contiene:
 Dos párrafos dentro de dos secciones “DIV”
Una sección de aside vacia
Una sección footer con un texto
-8-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página servicios.html(2 de 3)
Página servicios.html (1 de 2) (Vista Previa)
-9-
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico
Página servicios.html(3 de 3)
Página servicios.html (2 de 2) (Vista Previa)
- 10 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página galeria.html( 1de 5)
Página Galería.html, con estructura estándar HTML5
Se compone de:






Metas tipo “charset” y “name” (description y keyword)
Título de la página.
Sección Header con 2 textos en “H1” y “H2” y un objeto tipo “figure” con
referencia a la imagen “banner3.jpg”
Sección Nav con vínculos a “index.html”, “servicios.html”, “galería.html”,
“dietas.html” y “contacta.html”, todos ellos con propiedades “Alt” y “Title”.
Sección Section
o Con ocho secciones tipo figure, cada una de ellas contiene una imagen
que van desde la “img1.jpg” hasta la “img8.jpg”
Una sección footer con un texto
- 11 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página galeria.html( 2de 5)
Página servicios.html (1 de 4) (Vista Previa)
- 12 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página galeria.html( 3 de 5)
Página servicios.html (2 de 4) (Vista Previa)
- 13 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página galeria.html( 4 de 5)
Página servicios.html (3 de 4) (Vista Previa)
- 14 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página galeria.html( 5 de 5)
Página servicios.html (4 de 4) (Vista Previa)
- 15 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página dietas.html( 1 de 2)
Página Dietas.html, con estructura estándar HTML5
Se compone de:







Metas tipo “charset” y “name” (description y keyword)
Título de la página.
Sección Header con 2 textos en “H1” y “H2” y un objeto tipo “figure” con
referencia a la imagen “banner4.jpg”
Sección Nav con vínculos a “index.html”, “servicios.html”, “galería.html”,
“dietas.html” y “contacta.html”, todos ellos con propiedades “Alt” y “Title”.
Sección Section
o Con una sección “article” vacia”
Sección Aside vacia
Una sección footer con un texto
- 16 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página dietas.html( 2 de 2)
Página servicios.html (Vista Previa)
- 17 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página contacta.html(1 de3)
Página contacta.html, con estructura estándar HTML5
Se compone de:






Metas tipo “charset” y “name” (description y keyword)
Título de la página.
Sección Header con 2 textos en “H1” y “H2” y un objeto tipo “figure” con
referencia a la imagen “banner5.jpg”
Sección Nav con vínculos a “index.html”, “servicios.html”, “galería.html”,
“dietas.html” y “contacta.html”, todos ellos con propiedades “Alt” y “Title”.
Sección Section
o Con una sección Article
 Sección header, con un título en “h1”.
 Iframe, que contiene un mapa de google (para conseguir el mapa
a añadir en la página, localiza una dirección en maps.google.com,
una vez localizada, pulsa compartir, y dentro de este en el menú
de insertar para, obtendrás el código)
o Con otra sección article
 Sección header, con un título en “h1”.
 Lista de elementos tipo UL
Una sección footer con un texto
- 18 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página contacta.html(2 de3)
Página contacta.html (1 de 2) (Vista Previa)
- 19 -
Caso práctico 1
HTML5, CSS3 y JavaScript N. I
Caso Práctico 1
Página contacta.html(3 de3)
Página contacta.html (2 de 2) (Vista Previa)
- 20 -
Caso práctico 1