Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
2.4 Guía Instruccional
1. Objetivo
• Aprender y aplicar el uso de tablas, formularios, listas de definición y una
introducción a CSS embebido para organizar información.
• Utilizar etiquetas semánticas de HTML5, como <header>, <nav>, <main>, <aside> y
<footer>, para estructurar la página de forma lógica.
• Crear un sitio web compuesto por 8 páginas, dividido en tres secciones:
• Landing page(index.html)
• Guía Turística de la Ciudad: 4 páginas (por ejemplo, Inicio, Lugares de
Interés, Mapa y Contacto).
• Blog de Comentarios: 3 páginas (por ejemplo, Blog Principal, Entrada de Blog
y Formulario de Comentarios).
2. Instrucciones Generales
Estructura del Proyecto
• Carpeta del Proyecto:
Crear carpetas contengan todos los archivos clasificados en HTML, hojas de estilo
(CSS), imágenes y demás recursos.
• Archivos a Crear:
• Landig page (index.html) que muestre presentación y despierte interés del
contenido
• Sección Guía Turística (4 páginas):
1. inicio.html – Página de inicio de la guía turística.
2. lugares.html – Página que describe lugares de interés turístico (usar
tablas para listar datos como horarios, precios y direcciones).
3. mapa.html – Página que incluye un mapa (incrustado) y datos
relevantes (por ejemplo, direcciones y rutas).
4. contacto.html – Página de contacto con información adicional,
utilizando una lista de definición para detallar datos de contacto.
• Sección Blog de Comentarios (3 páginas):
1. blog.html – Página principal del blog con un listado de entradas (usar
listas de definición para resumir cada entrada).
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
2. entrada.html – Página para mostrar el contenido completo de una
entrada.
3. comentarios.html – Página con un formulario para dejar comentarios y
una lista de comentarios previos.
Uso de Etiquetas Semánticas
Cada página debe estar estructurada con:
• <header>: Contendrá el título del sitio o de la sección, y el logotipo si se desea.
• <nav>: Menú de navegación principal, que permita moverse entre la Guía Turística y el
Blog.
• <main>: Contenido principal de la página (puede incluir secciones como artículos,
listas, tablas y más).
• <aside>: Información complementaria o barras laterales (por ejemplo, enlaces
relacionados, datos de interés o publicidad).
• <footer>: Información de pie de página (copyright, contacto, enlaces legales).
Integración de Tablas y Listas de Definición
• Tablas: Utiliza <table>, <tr>, <th> y <td> para organizar información como datos de
horarios, precios, o características de lugares turísticos.
• Listas de Definición: Utiliza <dl>, <dt> y <dd> para describir definiciones o listar
términos con sus respectivas descripciones, ideal para datos de contacto o resúmenes
de entradas del blog.
3. Proceso a Seguir
Paso 1: Diseño y Planificación
• Esquema del Sitio: Crea un mapa de navegación (Balsamiq o Figma) que muestre la
relación entre las 8 páginas.
• Planificación del Contenido:
• Guía Turística: Define el contenido de cada página (introducción, descripción
de lugares, mapa, contacto).
• Blog: Esquematiza la estructura del blog (índice de entradas, contenido
completo y comentarios).
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
Paso 2: Desarrollo de Cada Página
A. Estructura Semántica Básica (Ejemplo para una Página)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Guía turística de [Ciudad]">
<meta name="keywords" content="Turismo, [Ciudad], Guía">
<title>Guía Turística - [Nombre de la Página]</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Guía Turística de [Ciudad]</h1>
</header>
<nav>
<a href="index.html">Inicio</a>
<a href="lugares.html">Lugares de Interés</a>
<a href="mapa.html">Mapa</a>
<a href="contacto.html">Contacto</a>
<a href="blog.html">Blog</a>
</nav>
<main>
<!-- Contenido principal específico de la página -->
</main>
<aside>
<!-- Información complementaria, como enlaces a redes sociales o datos curiosos -->
</aside>
<footer>
<p>© 2025 Guía Turística de [Ciudad]. Todos los derechos reservados.</p>
</footer>
</body>
</html>
B. Ejemplo de Uso de Tablas y Listas de Definición
• Tabla (en lugares.html):
<section>
<h2>Lugares de Interés</h2>
<table border="1" cellspacing="0" cellpadding="8">
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
<tr>
<th>Nombre</th>
<th>Horario</th>
<th>Precio</th>
</tr>
<tr>
<td>Museo de Arte</td>
<td>10:00 - 18:00</td>
<td>$5</td>
</tr>
<tr>
<td>Parque Central</td>
<td>Abierto 24 hrs</td>
<td>Gratis</td>
</tr>
</table>
</section>
• Lista de Definición (en contacto.html):
<section>
<h2>Datos de Contacto</h2>
<dl>
<dt>Teléfono:</dt>
<dd>+123 456 7890</dd>
<dt>Email:</dt>
<dd>[email protected]</dd>
<dt>Dirección:</dt>
<dd>Calle Principal #123, [Ciudad]</dd>
</dl>
</section>
Paso 3: Desarrollo del Blog (3 Páginas)
• Blog Principal (blog.html):
Lista de entradas del blog, donde cada entrada se resume mediante una lista de
definición.
<section>
<h2>Últimas Entradas del Blog</h2>
<dl>
<dt><a href="entrada.html?id=1">Entrada 1: Descubriendo [Ciudad]</a></dt>
<dd>Resumen breve de la experiencia turística en [Ciudad].</dd>
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
<dt><a href="entrada.html?id=2">Entrada 2: Rutas y Consejos</a></dt>
<dd>Consejos para recorrer los lugares más emblemáticos.</dd>
</dl>
</section>
• Entrada Completa (entrada.html):
Página que muestra el contenido completo de la entrada seleccionada.
• Comentarios (comentarios.html):
Página que incluye un formulario para dejar comentarios y una lista de comentarios
previos, organizada de forma estructurada.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Página de comentarios del Blog de la Guía
Turística.">
<meta name="keywords" content="comentarios, blog, guía turística, opiniones">
<title>Comentarios - Blog Guía Turística</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}
header, nav, main, aside, footer {
margin-bottom: 20px;
padding: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
header h1 {
margin: 0;
}
nav a {
margin-right: 15px;
text-decoration: none;
color: #2980B9;
}
main section {
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
margin-bottom: 30px;
}
form {
display: flex;
flex-direction: column;
}
form label {
margin-top: 10px;
}
form input, form textarea {
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
margin-top: 15px;
padding: 10px;
background: #2980B9;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.comentario {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 10px;
}
.comentario:last-child {
border-bottom: none;
}
aside {
background: #e8f4f8;
padding: 10px;
}
footer p {
text-align: center;
font-size: 0.9em;
color: #555;
}
</style>
</head>
<body>
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
<header>
<h1>Comentarios del Blog</h1>
</header>
<nav>
<a href="index.html">Inicio</a>
<a href="lugares.html">Lugares de Interés</a>
<a href="mapa.html">Mapa</a>
<a href="contacto.html">Contacto</a>
<a href="blog.html">Blog</a>
</nav>
<main>
<section>
<h2>Deja tu Comentario</h2>
<form action="procesar_comentario.php" method="POST">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="comentario">Comentario:</label>
<textarea id="comentario" name="comentario" rows="5" required></textarea>
<button type="submit">Enviar Comentario</button>
</form>
</section>
<section>
<h2>Comentarios Recientes</h2>
<div class="comentario">
<p><strong>Juan Pérez</strong> <em>01/03/2025</em></p>
<p>Excelente guía turística, muy informativa y práctica. Me encantó la sección de
lugares de interés.</p>
</div>
<div class="comentario">
<p><strong>María García</strong> <em>28/02/2025</em></p>
<p>Muy buen contenido, la información es muy útil para planificar mi próxima
visita a la ciudad.</p>
</div>
<!-- Se pueden agregar más comentarios aquí -->
</section>
</main>
<aside>
<h3>Información Adicional</h3>
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
<p>Para más detalles sobre la guía turística, visita nuestra página de <a
href="contacto.html">Contacto</a> o suscríbete al boletín.</p>
</aside>
<footer>
<p>© 2025 Guía Turística de [Ciudad]. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Paso 4: Pruebas y Validación
• Verifica que cada página muestre correctamente la estructura semántica y los
elementos multimedia.
• Utiliza herramientas de validación (como el W3C Validator) para asegurar que el HTML
cumple los estándares.
Paso 5: Documentación y Entrega
• Documenta brevemente la estructura del sitio y la función de cada elemento
semántico utilizado.
• Incluye el mapa de navegación (considera la gráfica siguiente) y entrega el proyecto
según las indicaciones durante la sesión de clase.
4. Etiquetas Semánticas y Elementos de Organización
Etiqueta/Elemento Descripción Ejemplo de Uso Notas
<header> Define la cabecera del <header><h1>Guía Turística de Primer bloque visible en la
documento, con el [Ciudad]</h1></header> página.
título y logotipo.
<nav> Sección destinada al <nav><a href="index.html">Inicio</a> Facilita el acceso a diferentes
menú de navegación. ...</nav> páginas.
<main> Contenedor del <main><!-- Contenido --></main> Elemento central, debe ser
contenido principal de único.
la página.
<aside> Sección de contenido <aside><p>Enlaces de Información adicional sin
complementario o interés</p></aside> interferir en el contenido
publicitario. principal.
<footer> Pie de página con <footer><p>© 2025 Guía Ubicado al final de la página.
información legal o de Turística de [Ciudad]</p></footer>
contacto.
<table> Organiza datos en <table>...</table> Utilizado para datos
forma de tabla. estructurados.
<dl>, <dt>, <dd> Lista de definición <dl><dt>Teléfono:</dt><dd>+123 456 Ideal para datos de contacto o
para asociar términos 7890</dd></dl> resúmenes.
y descripciones.
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
5. Croquis / Mapa de Navegación (Recurso Gráfico)
A modo de ejemplo, se puede representar el mapa de navegación del sitio de la siguiente
forma:
• Landing Page (Index):
Es la página de inicio que da la bienvenida y permite
elegir entre dos grandes secciones.
• Guía Turística:
Se compone de páginas que muestran la información
turística de la ciudad:
Inicio: Introducción y resumen de la guía.
Lugares de Interés: Detalle de los sitios
turísticos, con uso de tablas para horarios, precios y
direcciones.
Mapa: Página que incluye un mapa (por
ejemplo, Google Maps) para ubicar los lugares.
Contacto: Información adicional y datos de
contacto, organizada mediante listas de definición.
• Blog de Comentarios:
Se compone de páginas para compartir y comentar
experiencias:
Blog Principal: Índice de entradas del blog,
organizado con listas de definición.
Entrada: Página que muestra el contenido
completo de una entrada.
Comentarios: Página con formulario y
listado de comentarios.
6. Cuestionario de Repaso
1. ¿Cuál es el propósito de utilizar etiquetas semánticas en HTML?
A) Mejorar la legibilidad del código y facilitar el uso de CSS.
B) Incrementar la cantidad de código.
C) Asegurar que solo se pueda ver en ciertos navegadores.
D) Evitar el uso de imágenes.
2. La etiqueta <nav> se utiliza para:
A) Definir la cabecera de la página.
B) Organizar el contenido principal.
C) Agrupar enlaces de navegación.
D) Incluir comentarios.
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
3. ¿Qué elementos se utilizan para crear una lista de definición?
A) <ul> y <li>
B) <ol> y <li>
C) <dl>, <dt> y <dd>
D) <div> y <span>
4. ¿Cómo se organiza una tabla en HTML?
A) Con <div>, <p> y <span>
B) Con <table>, <tr>, <th> y <td>
C) Con <ul> y <li>
D) Con <section> y <article>
5. La estructura básica semántica de una página debe incluir, al menos, los
siguientes elementos:
A) <header>, <nav>, <main>, <aside> y <footer>
B) <header>, <section> y <div>
C) <body> y <html>
D) <ul>, <li> y <table>
6. ¿Qué ventaja tiene organizar el contenido con etiquetas semánticas antes de
aplicar CSS?
A) Facilita la identificación y el estilo del contenido mediante selectores semánticos.
B) Reduce el tamaño del archivo HTML.
C) Hace que el contenido sea invisible en algunos dispositivos.
D) Aumenta el tiempo de carga de la página.
7. En el contexto de este proyecto, ¿para qué se usarían las tablas?
A) Para mostrar datos estructurados, como horarios o precios de lugares turísticos.
B) Para organizar la navegación del sitio.
C) Para incluir imágenes de fondo.
D) Para enlazar a otras páginas.
8. ¿Cómo se define una lista de definición en HTML?
A) Usando <dl> para el contenedor, <dt> para el término y <dd> para la descripción.
B) Usando <ul> y <li>.
C) Usando <ol> y <li>.
D) Usando <div> y <span>.
Instituto Tecnológico de Orizaba
Departamento de Sistemas y Computación
PERÍODO: Enero – Junio 2025 Unidad 2
NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica HTML – multimedia, tablas
9. ¿Cuál es la función principal del <aside> en una página web?
A) Contener el contenido principal.
B) Proporcionar información complementaria sin interferir en el contenido principal.
C) Crear enlaces de navegación.
D) Definir la cabecera de la página.
10. El croquis de navegación del proyecto ayuda a:
A) Visualizar la estructura y flujo del sitio web antes de codificar.
B) Diseñar únicamente la parte visual del sitio.
C) Evitar el uso de etiquetas semánticas.
D) Incrementar la complejidad del código.
