"Tejiendo la Red: Menú de Navegación"

"Tejiendo la Red: Menú de Navegación"

Objetivo: Crear un sistema de navegación funcional entre tres archivos HTML distintos utilizando rutas relativas.

1. Preparación del Proyecto (La Regla de Oro)

Antes de escribir una sola línea de código en Bluefish, todos los archivos deben estar en la misma carpeta.

Reto Inicial: Crear una carpeta en el escritorio llamada Proyecto_Turismo.

2. Creación de los 3 Archivos Base

En Bluefish creen tres archivos rápidos (solo con estructura básica y un título <h1> para identificarlos):

  1. index.html (Será el Inicio: Información general de San José de Pare).

  2. lugares.html (Atractivos turísticos: El Salto de la Chorrera, las moliendas).

  3. cultura.html (Tradiciones: Ferias, fiestas y la panela).

3. Ejemplo de Código: El Menú de Navegación

Este bloque de código debe ser idéntico en los tres archivos para que el usuario pueda ir y volver.

Código del Menú (Para copiar y adaptar):

HTML
<!-- Menú de Navegación -->
<table border="0" width="100%" bgcolor="#2E7D32" cellpadding="10">
    <tr>
        <td align="center">
            <a href="index.html"><font color="white" face="Arial"><b>INICIO</b></font></a>
        </td>
        <td align="center">
            <a href="lugares.html"><font color="white" face="Arial"><b>SITIOS TURÍSTICOS</b></font></a>
        </td>
        <td align="center">
            <a href="cultura.html"><font color="white" face="Arial"><b>CULTURA Y PANELA</b></font></a>
        </td>
    </tr>
</table>
<hr>

4. ¿Cómo hacerlo en Bluefish eficientemente? 

  1. Uso del diálogo de Enlace: En la barra de herramientas de Bluefish, pídales que busquen el icono de la cadena (Enlace).

  2. Explorador de archivos: Bluefish permite seleccionar el archivo destino buscando en la carpeta. (ej. escribir Indice.html en lugar de index.html).

  3. Vistas previas:  probar si al hacer clic en "SITIOS TURÍSTICOS" realmente cambia de página.

5. Ejercicio Práctico Sugerido

Instrucciones para el estudiante:

  • En index.html: Escribe una bienvenida a San José de Pare. Inserta el menú arriba.

  • En lugares.html: Pon una lista de 3 lugares del pueblo. Inserta el mismo menú arriba.

  • En cultura.html: Explica por qué San José es la capital panelera. Inserta el mismo menú arriba.


6. Tarea de Verificación (Checklist)

Al final de las 2 horas, el estudiante debe demostrarte:

  1. Que los 3 archivos están guardados en la carpeta correcta.

  2. Que puede navegar en círculo (Inicio -> Lugares -> Cultura -> Inicio) sin que aparezca el error "Archivo no encontrado".

  3. Que los nombres de los archivos en el código coinciden exactamente con los nombres de los archivos guardados (importante: todo en minúsculas y sin espacios).

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