Robótica Trinitaria 202X

martes, 25 de marzo de 2025

COMPLETANDO LA PAGINA CON FOOTER Y LOGO

COMPLETANDO LA PAGINA CON FOOTER Y LOGO

Atienda las isntrucciones del profesor:

1. colcoando el footer

</div>

</footer>

aplicando estilo al footer

footer {

background-color: #4069de;

color: white;

padding: 10px 0;

text-align: center;

}

.footer-content {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

2. colocando logotipo

<nav>

<a href="#"> <img src="logo.png" alt="Logo"> Crónica deportiva </a>

</div>

<li><a href="menu2.html">Inicio</a></li>

<li><a href="actualidad.html">Actualidad</a></li>

<li><a href="internacional.html">Internacional</a></li>

<li><a href="contactenos.html">Contacto</a></li>

</ul>

</div>

</nav>

aplicando estilo al logo

.logo img {

width: 100px; /* Ancho del logo */

height: auto; /* Alto del logo */

margin-right: 5px; /* Espacio entre el logo y el texto */

border-radius: 5px; /* Para hacerlo un poco redondo */

}

4. Preparando el menú para las demas paginas

5. copiando pagina para siguiente link en el menú

Una vez que la pagina del menú esté funcionando, copiela con otro nombre, el nombre debe ser de acuerdo a la opción de su menu que quiera implementar (el que ha indicado en el paso anterior), la idea es tener una copia de su pagina principal, modifique los titulos de esta nueva pagina para que adquiera el aspecto de la nueva opcion de menú.

Este paso debe repetirlo para las demas paginas de opciones del menu principal

viernes, 14 de marzo de 2025

EL NAVBAR Y SUS USOS VARIOS

¿Qué es un Navbar?

Un navbar es una sección destacada en la parte superior (o a veces lateral) de un sitio web que contiene enlaces importantes para la navegación. Normalmente incluye:

El logo o nombre del sitio web.

Enlaces a las secciones principales del sitio (Inicio, Acerca de, Servicios, Contacto, etc.).

Un buscador (opcional).

Enlaces a perfiles de usuario (login, registro, etc.) si el sitio lo requiere.

Un menú desplegable (hamburguesa) para dispositivos móviles.

Estructura HTML Básica

La estructura HTML básica de un navbar suele incluir los siguientes elementos:

<nav>
  <div class="navbar">
    <div class="logo">
      <a href="#">Mi Sitio</a>
    </div>
    <ul class="menu">
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Acerca De</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </div>
</nav>

Explicación:

<nav>: El elemento HTML5 que define la sección de navegación. Es semánticamente correcto y ayuda a los motores de búsqueda y lectores de pantalla a entender la estructura de tu página.

<div> class="navbar": Un contenedor principal para la barra de navegación. Es útil para aplicar estilos y controlar el diseño general. El nombre de la clase es solo una convención, puedes usar otro si prefieres.

<div> class="logo": Contiene el logo (imagen o texto) de tu sitio web. Normalmente, se enlaza a la página principal.

<ul class="menu">: Una lista no ordenada que contiene los enlaces de navegación. Usar una lista <ul> es una práctica común porque representa una lista de elementos relacionados.

<li>: Cada elemento de la lista representa un enlace.

<a href="#">: El elemento de enlace. El atributo href especifica la URL a la que se dirige el enlace. Usa # como marcador de posición y reemplázalo con la URL real de cada página.

Ejemplo con Estilos CSS (Básico)

Aquí tienes un ejemplo con CSS básico para darle estilo al navbar:

CREAR EN EL BLOC DE NOTAS EL SIGUIENTE ARCHIVO .HTML (menu.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Ejemplo</title>
  <style>
    body {
      margin: 0; /* Elimina el margen predeterminado del body */
      font-family: sans-serif;
    }

    nav {
      background-color: #333;
      color: white;
      padding: 10px 0; /* Espacio arriba y abajo */
    }

    .navbar {
      display: flex;          /* Usa flexbox para alinear los elementos */
      justify-content: space-between; /* Espacia logo y menú */
      align-items: center;     /* Centra verticalmente */
      max-width: 1200px;       /* Ancho máximo para el contenido */
      margin: 0 auto;         /* Centra horizontalmente */
      padding: 0 20px;         /* Espacio a los lados */
    }

    .logo a {
      color: white;
      text-decoration: none; /* Quita el subrayado */
      font-size: 1.5em;       /* Tamaño de la fuente */
      font-weight: bold;      /* Texto en negrita */
    }

    .menu {
      list-style: none;       /* Quita los puntos de la lista */
      margin: 0;
      padding: 0;
      display: flex;          /* Usa flexbox para alinear los elementos */
    }

    .menu li {
      margin: 0 15px;        /* Espacio entre los elementos del menú */
    }

    .menu li a {
      color: white;
      text-decoration: none;
    }

    .menu li a:hover {
      text-decoration: underline; /* Subraya al pasar el ratón */
    }

  </style>
</head>
<body>

  <nav>
    <div class="navbar">
      <div class="logo">
        <a href="#">Mi Sitio</a>
      </div>
      <ul class="menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Acerca De</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </div>
  </nav>

  <main>
    <p>Contenido principal del sitio web.</p>
  </main>

</body>
</html>

domingo, 9 de marzo de 2025

GALERIA DE IMAGENES

GALERIA DE IMAGENES

Creación de la Estructura HTML

Instrucciones:

"Abran su editor de texto y creen un nuevo archivo llamado index.html."
"Vamos a escribir la estructura básica de HTML:"

Guía Paso a Paso HTML:

Paso 1: Escribe la estructura básica:

<!DOCTYPE html>

<head>

<title>Mi Galería</title>

</head>

<body>

</body>

</html>

Paso 2: Crea el header:

<h1>Galería de Imágenes</h1>

</header>

Paso 3: Crea la sección gallery con las imágenes.

</section>

Paso 4: Crea el footer:

</footer>

Guía Paso a Paso APLICAR CSS:

· "Ahora vamos a darle estilo a nuestra galería con CSS.

· Agregaremos un bloque <style> dentro de la etiqueta <head>."

Paso 5: Agrega el bloque <style>:

<head>

<title>Mi Galería</title>

<style>

/*Aquí vienen las reglas css */

</style>

</head>

Paso 6: Estilo básico del body: dentro de las etiquetas <style> y </style> escribimos (copiar y pegar)…

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f9f9f9;

color: #333;

}

Paso 7: Estilo del header:

header {

background-color: #4CAF50;

color: white;

text-align: center;

padding: 20px 0;

}

header h1 {

margin: 0;

font-size: 2em;

}

Paso 8: Estilo de la gallery:

.gallery {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 15px;

padding: 20px;

max-width: 1200px;

margin: 0 auto;

}

.gallery img {

width: 100%;

height: auto;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.gallery img:hover {

transform: scale(1.05);

box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);

}

Paso 9: Estilo del footer:

footer {

text-align: center;

padding: 10px 0;

background-color: #4CAF50;

color: white;

position: relative;

bottom: 0;

width: 100%;

}

Paso 10: Guarde como html y ejecute la pagina

domingo, 2 de marzo de 2025

RECETAS - EJERCICIO EN CLASE EN GRUPO / INDIVIDUAL

PROYECTO: PÁGINA DE "RECETAS FAVORITAS"

CLIC AQUÍ PARA VER EJEMPLO

ACTIVIDAD EN CLASE

Descripción:

Los estudiantes crearán una página web simple que muestre una lista de sus recetas favoritas (o recetas inventadas). Podrán agregar y eliminar etiquetas HTML según sea necesario, pero se limitarán a las etiquetas ya vistas en el proyecto anterior y no podrán usar nuevas propiedades CSS y obviamente no se puede usar la AI, debe apoyarse en lo visto en el proyecto del examen.

Instrucciones

Estructura Básica (obligatoria):

· La página debe tener un encabezado principal (<h1>) con el título "Mis Recetas Favoritas" (o un título similar).

· Debe haber al menos tres recetas.

· Cada receta debe tener:

· Un título (usando <h1>, <h2>, o <h3> - pueden elegir el nivel de encabezado que consideren apropiado).

· Una imagen de la comida (pueden usar URLs de imágenes de internet). Deben usar la etiqueta <img>.

· Una breve descripción de la receta (usando uno o más párrafos <p>).

· Una lista de ingredientes dentro de un <div> contenedor.

· Libertad de Estructura:

· Pueden usar tantos <div> como necesiten para organizar el contenido.

· Pueden anidar <div> dentro de otros <div>.

· Pueden repetir las etiquetas <h1> - <h6>, <img>, <p>, <a> tantas veces como sea necesario.

· Pueden elegir el orden de los elementos dentro de cada receta (imagen primero, luego título, etc., o cualquier otra combinación).

· Estilo (CSS - Restricciones Importantes):

· Solo pueden usar las propiedades CSS vistas en el proyecto anterior. Esto incluye:

§ font-family (solo 'Poppins' y 'Open Sans')

§ font-size

§ color

§ background-color

§ margin

§ padding

§ text-align

§ border

§ border-radius

§ width

§ height

§ display (solo los valores usados previamente, como inline-block)

§ max-width

§ text-decoration (solo para quitar el subrayado de los "enlaces" de ingredientes)

§ :hover (solo para los "enlaces" si lo desean).

· Deben reutilizar y adaptar las clases CSS del proyecto anterior. Pueden cambiar los nombres de las clases, pero no pueden crear nuevas propiedades CSS. Por ejemplo, pueden renombrar .social-links a .ingredients-list, y .social-links a a .ingredient, pero deben usar las propiedades existentes dentro de esas clases.

· Deben aplicar un background-color al body.

· Deben justificar el contenido de las recetas que aparezcan centrados los ingredientes de cada receta

· Contenido:

· Las recetas no tienen que ser reales, pueden ser inventadas. Lo importante es la estructura y el estilo.

· Las imágenes pueden ser de cualquier sitio web, siempre y cuando usen URLs directas.

Objetivos del Proyecto:

· Flexibilidad Estructural: Practicar la creación de una estructura HTML más compleja usando un conjunto limitado de etiquetas.

· Reutilización de CSS: Reforzar la habilidad de adaptar estilos CSS existentes a diferentes contextos.

· Organización del Contenido: Aprender a estructurar información de manera lógica y visualmente atractiva.

· Consolidación de Conceptos: Reforzar todos los conceptos de HTML y CSS del proyecto anterior en un nuevo contexto.

· Creatividad Controlada: Fomentar la creatividad dentro de un marco de restricciones, lo que simula desafíos reales de desarrollo web.

Robótica Trinitaria 202X

martes, 25 de marzo de 2025

COMPLETANDO LA PAGINA CON FOOTER Y LOGO

viernes, 14 de marzo de 2025

EL NAVBAR Y SUS USOS VARIOS

domingo, 9 de marzo de 2025

GALERIA DE IMAGENES

domingo, 2 de marzo de 2025

RECETAS - EJERCICIO EN CLASE EN GRUPO / INDIVIDUAL

COMPLETANDO LA PAGINA CON FOOTER Y LOGO

Denunciar abuso

Etiquetas