Sesión Integrada: "Maquetación y Navegación del Sitio Turístico"

 Objetivo: Diseñar una interfaz web organizada (maquetación con tablas avanzadas) y crear un menú de navegación funcional entre tres archivos HTML distintos utilizando

1. El Reto del Día: Un Sitio Web Real

Explícales a los muchachos que hoy dejarán de hacer páginas planas y crearán un portal turístico de San José de Pare. Para que funcione, aplicaremos la Regla de Oro: Crear una carpeta en el escritorio llamada Portal_Turismo donde guardaremos todo.

2. El Esqueleto Estructurado (Código Base)

Para optimizar el tiempo en el bloque de 2 horas, los estudiantes crearán tres archivos en Bluefish: index.html, lugares.html y cultura.html.

En los tres archivos meterán esta misma estructura de tabla que incluye el menú de navegación integrado en el encabezado.

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Turismo San José de Pare</title>
</head>
<body bgcolor="#f0fdf4"> <!-- Fondo verde ecológico -->

    <!-- TABLA MAESTRA DE MAQUETACIÓN -->
    <table border="1" width="750" align="center" cellpadding="12" cellspacing="0" bgcolor="#ffffff">
        
        <!-- FILA 1: ENCABEZADO PRINCIPAL (Combinamos 2 columnas) -->
        <tr>
            <td colspan="2" align="center" bgcolor="#1b5e20">
                <font color="#ffffff" size="5" face="Arial">
                    <b>PORTAL TURÍSTICO SAN JOSÉ DE PARE</b>
                </font>
            </td>
        </tr>

        <!-- FILA 2: MENÚ DE NAVEGACIÓN (Usa los hipervínculos internos) -->
        <tr bgcolor="#2e7d32">
            <td colspan="2" align="center">
                <a href="index.html"><font color="white" face="Arial"><b>INICIO</b></font></a> &nbsp;|&nbsp;
                <a href="lugares.html"><font color="white" face="Arial"><b>SITIOS DE INTERÉS</b></font></a> &nbsp;|&nbsp;
                <a href="cultura.html"><font color="white" face="Arial"><b>CULTURA Y PANELA</b></font></a>
            </td>
        </tr>

        <!-- FILA 3: CUERPO DE LA PÁGINA (Dos celdas: Foto y Texto) -->
        <tr>
            <!-- Celda Izquierda: Multimedia -->
            <td width="250" align="center" bgcolor="#f9f9f9">
                <img src="imagen_pueblo.jpg" alt="San José de Pare" width="220">
                <br>
                <font size="2" face="Arial"><i>Riqueza de Boyacá</i></font>
            </td>
            
            <!-- Celda Derecha: Información Variable -->
            <td width="500" valign="top">
                <font face="Arial" size="4" color="#222222">
                    <h3>Bienvenidos a Nuestra Tierra</h3>
                    <p>Este es el espacio donde el estudiante cambiará el contenido según la página en la que se encuentre (Inicio, Sitios o Cultura).</p>
                </font>
            </td>
        </tr>

        <!-- FILA 4: PIE DE PÁGINA -->
        <tr>
            <td colspan="2" align="center" bgcolor="#333333">
                <font color="#ffffff" size="2" face="Arial">
                    Diseñado en la clase de Tecnología • Grado 9° • 2026
                </font>
            </td>
        </tr>

    </table>

</body>
</html> 

 

 

3. Dinámica  (Paso a Paso)

  1.  Muestra cómo el colspan="2" estira el título y el menú para cubrir el ancho de las dos celdas inferiores.

  2. Creación del molde en Bluefish: Los estudiantes digitan el código anterior y lo guardan como index.html. Prueban con F10 que la estructura se vea derecha.

  3. Clonación y Personalización:

    • Usando Guardar como... en Bluefish, guardan el mismo archivo con el nombre lugares.html y luego otra vez como cultura.html.

    • Ahora modifican el Cuerpo de la Página (Fila 3) de cada archivo. Por ejemplo: en lugares.html cambian el texto para hablar del Salto de la Chorrera y cambian el nombre de la imagen; en cultura.html editan el texto para hablar de las Moliendas y los trapiches.

  4. Prueba de Fuego: Abren el navegador y hacen clic en los botones del menú. Si todo se guardó en la misma carpeta y los nombres están en minúsculas, el sitio se moverá fluidamente entre las tres páginas.

 

 

 

Comentarios

Publicar un comentario

Entradas populares de este blog

GUÍA DE EVALUACIÓN – HTML

Imagen
  Prevención de riesgos y desastres Crear una página web en HTML que informe a la comunidad educativa sobre la prevención de riesgos y desastres en San José de Pare, aplicando listas, tablas y atributos de texto. Lectura inicial: San José de Pare es un municipio rural donde se pueden presentar riesgos como deslizamientos, incendios forestales y lluvias intensas.   La Institución Educativa Horizontes busca promover la cultura de prevención mediante el uso de la tecnología y la inform ación. Como estudiante de grado 9, debes crear una página web que oriente a la comunidad sobre estos riesgos y las acciones para prevenirlos. ACTIVIDAD PRÁCTICA 1. Crear el archivo Cree un archivo llamado: Nombre_Estudiante_riesgos_sanjosedepare.html Escribir la estructura básica Digite la estructura HTML completa (doctype, html, head, title y body). El título debe ser:   Prevención de riesgos y desastres – I.E. Horizontes 3. Encabezado con atributos de texto En la parte superior de la página ...
Leer más

Ejercicio 1 de operaciones Hoja de calculo grado 9 only office

  Actividad: “Planificación de un Viaje” Objetivo: usar fórmulas básicas de Excel para calcular costos y presupuestos. Instrucciones: Crear una tabla con los siguientes encabezados en las celdas A1 a E1: A1: Item B1: Cantidad C1: Costo Unitario D1: Costo Total E1: Comentarios Ingresar los siguientes datos en las filas 2 a 6: A2: Transporte, A3: Alojamiento, A4: Comida, A5: Entradas, A6: Souvenirs B2: 1, B3: 3, B4: 9, B5: 2, B6: 5 C2: 150, C3: 100, C4: 20, C5: 50, C6: 10 Calcular el costo total para cada item en la columna D usando la fórmula de multiplicación: D2: =B2*C2 D3: =B3*C3 D4: =B4*C4 D5: =B5*C5 D6: =B6*C6 Calcular el costo total del viaje en la celda D7 usando la fórmula de suma: D7: =SUMA(D2:D6) Agregar comentarios en la columna E para cada item, explicando por qué se eligió esa cantidad y costo. Reto Adicional: Descuento : Si el costo total del viaje (D7) es mayor a 500, aplicar un descuento del 10% y mostrar el nuevo total en la celda D8. D8: =S...
Leer más

Clase 4: Gráficos y Representación Visual de Datos

Clase 4: Gráficos y Representación Visual - Salario Mínimo Colombia Clase 4: Gráficos y Representación Visual de Datos Análisis del salario mínimo en Colombia Objetivos de aprendizaje Al finalizar esta clase, serás capaz de: Comprender los diferentes tipos de gráficos y sus usos Crear gráficos apropiados para representar datos Seleccionar y personalizar gráficos según las necesidades Analizar y presentar datos utilizando representaciones visuales 💡 Trabajo autónomo Como trabajarás de forma independiente, organiza tu tiempo y sigue las instrucciones paso a paso. Si tienes dudas, consulta los recursos proporcionados. ...
Leer más