Scribd
Cargar
11 vistas3 páginas

Evalñuación HTML y Css

Cargado por

elguasonyutuber
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas3 páginas

Evalñuación HTML y Css

Cargado por

elguasonyutuber
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Proyecto: Sitio Web para Unidad Educativa

1. Estructura del Proyecto

1. Crea una carpeta del proyecto: Nómbrala, por ejemplo, UnidadEducativa.


2. Dentro de la carpeta, crea archivos y carpetas básicos:
o index.html: El archivo principal donde estará la estructura HTML.
o css/styles.css: Una carpeta css que contenga el archivo styles.css
para los estilos CSS.
o js/script.js: Una carpeta js que contenga script.js para el código
JavaScript.
o img/: Una carpeta para almacenar imágenes, como fotos de la unidad
educativa, logotipos, etc.

2. Diseño del Documento HTML (index.html)

1. Estructura básica del HTML5:


o Abre index.html.
o Añade una estructura básica con <!DOCTYPE html>, <html>, <head>, y
<body>.
o En <head>, coloca la etiqueta <title> para el título de la página, el
enlace al archivo CSS (styles.css), y configura la etiqueta <meta
charset="UTF-8"> para la codificación de caracteres.
o Enlaza el archivo script.js en la parte inferior del <body> para que el
JavaScript cargue después de la estructura HTML.
2. Encabezado y navegación (<header> y <nav>):
o Dentro del <header>, agrega un título principal con el nombre de la
unidad educativa.
o Incluye un <nav> dentro del <header> con enlaces a secciones clave de
la página como "Inicio", "Académica", "Galería" y "Contacto".
o Añade identificadores (id) o clases a los enlaces para que puedas
personalizarlos en el CSS y enlazarlos desde el menú a las secciones
específicas de la página.
3. Secciones principales:
o <main>: Dentro de <body>, usa <main> como contenedor principal.
▪ Inicio: Añade una sección de bienvenida usando <section>, y
utiliza encabezados <h2> para el título de la sección y párrafos
<p> para el contenido.
▪ Información Académica: Crea una sección separada donde
puedas listar cursos, grados y una breve descripción.
▪ Galería: Agrega otra sección <section> para fotos de eventos o
actividades de la unidad educativa.
▪ Contacto: Usa un <form> dentro de <section> para un
formulario de contacto simple, donde los visitantes puedan enviar
preguntas o comentarios.
o <footer>: En el pie de página, incluye información como derechos de
autor o enlaces a redes sociales.
3. Estilización con CSS (styles.css)

1. Estilo general:
o En styles.css, aplica font-family para definir la fuente global de tu
sitio.
o Define un color de fondo background-color para el sitio y el color del
texto color.
2. Estiliza el <header> y la navegación (<nav>):
o Usa un color de fondo específico para el <header> y aplica padding
para darle espacio.
o En el <nav>, utiliza display: flex para organizar los enlaces
horizontalmente.
o Agrega margin o padding a los enlaces dentro de <nav> para separarlos
y hacerlos más fáciles de leer.
3. Estiliza las secciones (<section>):
o Aplica margin y padding para crear espacios alrededor de cada
<section>.
o Usa box-shadow para agregar un sombreado sutil en los contenedores de
sección, creando un efecto de profundidad.
o En la sección de la galería, puedes definir el ancho de las imágenes y
organizarlas en un diseño de grid o flex para que estén alineadas
uniformemente.
4. Estilo para el formulario de contacto:
o Define el estilo de los input y textarea con padding y border-radius
para que se vean consistentes y bien diseñados.
o Agrega margin entre los campos del formulario para que no queden
demasiado pegados.
5. Responsive Design:
o Usa media queries (@media) para ajustar los estilos según el tamaño de
pantalla, haciendo que el sitio sea amigable para móviles.
o Por ejemplo, cambia el diseño de flex a block en el <nav> cuando el
ancho de la pantalla es menor a 600px para que los elementos se apilen.
4. Interactividad con JavaScript (script.js)

1. Validación del formulario de contacto:


o En script.js, utiliza document.getElementById o querySelector
para obtener los elementos del formulario (nombre, email, mensaje).
o Agrega un addEventListener en el botón de enviar para interceptar el
evento de envío.
o Usa if para verificar que los campos estén completos. Si falta algún
campo, muestra un mensaje de alerta; si está completo, muestra un
mensaje de éxito y limpia el formulario con .reset().
2. Efectos en la galería de imágenes:
o Usa un evento mouseover o click en cada imagen de la galería.
o Puedes aplicar classList.toggle para alternar una clase que cambie el
tamaño o el borde de la imagen cuando el usuario pasa el cursor.
3. Navegación a secciones internas:
o Agrega un evento click en cada enlace de navegación para desplazar
suavemente hacia las secciones correspondientes en la página.
o Usa scrollIntoView() en JavaScript para hacer una transición suave.

También podría gustarte