Embedded Files
GUÍA PRÁCTICA DE DESARROLLO WEB
GUÍA PRÁCTICA DE DESARROLLO WEB
CREACIÓN DE SITIO WEB BÁSICO CON HTML5 Y CSS
CREACIÓN DE SITIO WEB BÁSICO CON HTML5 Y CSS
ASIGNATURA: Desarrollo de la Web
SECCIÓN: 4DA
🎯 OBJETIVO DE LA PRÁCTICA
Aplicar los conocimientos de HTML5 y CSS para crear un sitio web básico de una tienda de equipos informáticos, integrando estructura semántica, multimedia, listas, tablas y estilos externos.
📋 INSTRUCCIONES GENERALES
📋 INSTRUCCIONES GENERALES
Entrega: Código escrito a mano en hoja blanca (bolígrafo azul o negro)
Archivos: Debe mostrar la estructura de 2 archivos (index.html y style.css)
Investigación: Algunas etiquetas NO están indicadas explícitamente – debe recordarlas o investigarlas
Prueba: Verifique su código en https://www.w3schools.com/html/tryit.asp antes de entregar
Originalidad: El código debe ser escrito por usted, no copiado de compañeros o IA
🗂️ ESTRUCTURA DEL PROYECTO
🗂️ ESTRUCTURA DEL PROYECTO
Apellido_Nombre_TiendaWeb/
├── index.html
├── style.css
└── img/
└── header.jpg (opcional, puede usar URL externa)
📝 PASO A PASO PARA DESARROLLAR EL EJERCICIO
📝 PASO A PASO PARA DESARROLLAR EL EJERCICIO
PASO 1: ESTRUCTURA BASE DEL HTML
PASO 1: ESTRUCTURA BASE DEL HTML
En su archivo index.html, comience con la estructura fundamental de HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>_________________________</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Aquí irá todo el contenido de la página -->
</body>
</html>
Complete:
El título de la página en <title> (ej: "TechStore - Equipos Informáticos")
PASO 2: HEADER (ENCABEZADO)
PASO 2: HEADER (ENCABEZADO)
El header debe contener una imagen representativa y el nombre de la tienda.
<!-- HEADER -->
<header class="encabezado">
<img src="https://picsum.photos/1200/300?random=1" alt="_________________">
<h1>_________________________</h1>
<p class="slogan">_________________________</p>
</header>
Complete:
El atributo alt de la imagen (descripción accesible)
El nombre de la tienda en <h1>
Un slogan corto en <p> (ej: "Soluciones tecnológicas a tu alcance")
Investigue:
¿Qué atributo puede agregar a la imagen para limitar su ancho máximo SIN usar CSS?
PASO 3: SECCIÓN QUIÉNES SOMOS
PASO 3: SECCIÓN QUIÉNES SOMOS
Esta sección presenta información sobre la empresa.
<!-- QUIÉNES SOMOS -->
<section class="seccion">
<h2>_________________________</h2>
<p>Somos una empresa dedicada a la venta de _________________________</p>
<p>Contamos con _________________________ años de experiencia en el mercado</p>
<p>Nuestra misión es _________________________</p>
</section>
Complete:
El título de la sección
Al menos 3 párrafos con información coherente de una tienda de informática
Aplique:
Use <strong> para resaltar al menos una palabra importante en esta sección
PASO 4: SECCIÓN SERVICIOS (LISTA)
PASO 4: SECCIÓN SERVICIOS (LISTA)
Aquí debe crear una lista de servicios o productos que ofrece la tienda.
<!-- SERVICIOS -->
<section class="seccion">
<h2>Nuestros Servicios</h2>
<!-- Aquí va una lista NO ORDENADA con 5 servicios -->
<___ class="lista-servicios">
<___>Venta de computadoras</___>
<___>_________________________</___>
<___>_________________________</___>
<___>_________________________</___>
<___>_________________________</___>
</___>
</section>
Complete:
Las etiquetas de apertura y cierre de la lista (NO son <ol>)
Las etiquetas de cada ítem de la lista
4 servicios adicionales relacionados con informática
Investigue:
¿Qué etiqueta HTML se usa para listas con viñetas (puntos)?
¿Qué etiqueta HTML se usa para cada ítem de la lista?
PASO 5: SECCIÓN CONTÁCTAME (TABLA)
PASO 5: SECCIÓN CONTÁCTAME (TABLA)
Esta sección debe incluir una tabla con información de contacto de sucursales.
<!-- CONTÁCTAME -->
<section class="seccion">
<h2>Contáctame</h2>
<p>Visita nuestras sucursales:</p>
<!-- Aquí va una TABLA con 3 columnas y 3 filas de datos -->
<___ class="tabla-contacto">
<___>
<___>
<___>Sucursal</___>
<___>Dirección</___>
<___>Teléfono</___>
</___>
</___>
<___>
<___>
<___>Principal</___>
<___>Av. Bolívar, Centro</___>
<___>___________________</___>
</___>
<___>
<___>___________________</___>
<___>___________________</___>
<___>___________________</___>
</___>
<___>
<___>___________________</___>
<___>___________________</___>
<___>___________________</___>
</___>
</___>
</___>
</section>
Complete:
Todas las etiquetas de la tabla (investigue las etiquetas para tabla, fila, celda, encabezado)
Los datos de contacto (teléfonos y direcciones de 2 sucursales adicionales)
Investigue:
¿Qué etiqueta se usa para el encabezado de la tabla?
¿Qué etiqueta se usa para el cuerpo de la tabla?
¿Qué etiqueta se usa para cada fila?
¿Qué etiqueta se usa para celdas de encabezado vs celdas normales?
Aplique:
Agregue el atributo border="1" a la tabla para ver los bordes
Use <strong> en al menos una celda de datos
PASO 6: FOOTER (PIE DE PÁGINA)
PASO 6: FOOTER (PIE DE PÁGINA)
El footer muestra información de copyright y redes sociales.
<!-- FOOTER -->
<footer class="pie-pagina">
<p>© 2026 _________________________. Todos los derechos reservados.</p>
<p>Desarrollado por: _________________________</p>
<p>
<a href="https://www.w3schools.com" target="___">Visitar W3Schools</a> |
<a href="mailto:________________@gmail.com">Enviar Correo</a>
</p>
</footer>
Complete:
El nombre de la tienda en el copyright
Su nombre completo como desarrollador
El atributo target para que el enlace abra en nueva pestaña
Su correo electrónico en el enlace mailto:
Referencia: Esta sección está casi completa para que tenga como guía el formato correcto de enlaces.
🎨 ARCHIVO CSS (style.css)
🎨 ARCHIVO CSS (style.css)
En su archivo style.css, agregue los siguientes estilos PARCIALES. Debe completar algunos valores.
Parte 1: Estilos Generales
Parte 1: Estilos Generales
/* ESTILOS GENERALES */
body {
font-family: ________, sans-serif;
margin: 0;
padding: 0;
background-color: ________;
color: #333;
}
.seccion {
padding: 20px;
margin: 10px auto;
max-width: 1000px;
}
Complete:
Una fuente web común (ej: Arial, Verdana, Georgia)
Un color de fondo suave para el body (ej: #f4f4f4, #ffffff, #f9f9f9)
Parte 2: Estilos del Header
Parte 2: Estilos del Header
/* HEADER */
.encabezado {
background-color: ________;
color: white;
text-align: center;
padding: 20px;
}
.encabezado img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.encabezado h1 {
margin-top: 15px;
font-size: 2.5em;
}
.slogan {
font-style: italic;
color: ________;
}
Complete:
Un color de fondo oscuro para el header (ej: #2c3e50, #34495e, #1a252f)
Un color claro para el slogan que contraste con el fondo (ej: #bdc3c7, #ecf0f1)
Parte 3: Estilos de la Lista de Servicios
Parte 3: Estilos de la Lista de Servicios
/* LISTA DE SERVICIOS */
.lista-servicios {
list-style-type: ________;
padding-left: 20px;
}
.lista-servicios ___ {
margin: 10px 0;
padding: 10px;
background-color: ________;
border-left: 4px solid ________;
}
Complete:
El tipo de lista (disc, circle, square, o none)
El selector para los ítems de lista (investigue qué etiqueta va después del punto)
Un color de fondo claro para cada ítem
Un color de borde que contraste
Parte 4: Estilos de la Tabla
Parte 4: Estilos de la Tabla
/* TABLA */
.tabla-contacto {
width: 100%;
border-collapse: ________;
margin: 20px 0;
}
.tabla-contacto ___, .tabla-contacto ___ {
border: 1px solid ________;
padding: 12px;
text-align: ________;
}
.tabla-contacto ___ {
background-color: ________;
color: white;
font-weight: bold;
}
Complete:
La propiedad para colapsar bordes (collapse o separate)
Los selectores para celdas (th y td)
El color de los bordes
La alineación del texto (left, center, right)
El color de fondo para los encabezados de tabla
Parte 5: Estilos del Footer
Parte 5: Estilos del Footer
/* FOOTER */
.pie-pagina {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
}
.pie-pagina a {
color: ________;
text-decoration: ________;
}
.pie-pagina a:hover {
color: ________;
text-decoration: underline;
}
Complete:
El color de los enlaces (ej: #3498db, #5dade2)
La propiedad para quitar subrayado (none o underline)
El color al pasar el mouse por encima (hover)
📊 CRITERIOS DE EVALUACIÓN
📊 CRITERIOS DE EVALUACIÓN
Criterio | Excelente (100%) | Satisfactorio (70%) | En Proceso (40%)
----------------|--------------------------------------------------|-----------------------------------------------|---------------------------
Estructura HTML | Todas las etiquetas correctas y bien anidadas | Algunas etiquetas faltan o hay errores de anidación | Múltiples errores de estructura HTML
Listas y Tablas | Usa las etiquetas correctas sin ayuda de la guía | Necesitó investigar pero logró el resultado | Las etiquetas de lista/tabla son incorrectas
CSS Externo | Archivo CSS vinculado y aplicado correctamente | CSS vinculado pero algunos estilos no aplican | CSS no está vinculado o no funciona
Contenido | Información coherente y completa en todas las secciones | Falta contenido en 1-2 secciones | Contenido incompleto en 3+ secciones
Enlaces | Ambos enlaces funcionan con atributos correctos | Un enlace tiene errores | Los enlaces no tienen href o target correctos
💡 RECOMENDACIONES PARA EL ESTUDIANTE
💡 RECOMENDACIONES PARA EL ESTUDIANTE
Antes de Escribir:
Antes de Escribir:
✓ Repase las etiquetas vistas en clase (h1-h6, p, ul, ol, li, table, tr, td, th, a, img, header, footer, section)
✓ Tenga a mano la referencia de W3Schools: https://www.w3schools.com/html/
✓ Dibuje un boceto en papel de cómo quiere que se vea cada sección
Durante la Codificación:
Durante la Codificación:
✓ Escriba una etiqueta por línea para mayor claridad
✓ Use sangría (indentación) para visualizar la jerarquía
✓ Cierre siempre las etiquetas que lo requieran
✓ Verifique que los atributos tengan comillas: href="valor"
Para Probar:
Para Probar:
✓ En W3Schools: Pegue su HTML y CSS en el Tryit Editor
✓ En local: Guarde los archivos y abra index.html en su navegador
✓ Verifique que la imagen del header cargue correctamente
Errores Comunes a Evitar:
Errores Comunes a Evitar:
✗ Olvidar el <link> para conectar el CSS
✗ Usar comillas simples dentro de comillas simples
✗ No cerrar etiquetas como </p>, </li>, </td>
✗ Confundir <ul> con <ol> para listas con viñetas
📤 FORMATO DE ENTREGA
📤 FORMATO DE ENTREGA
Hoja blanca tamaño carta con el código escrito a mano
Portada con: Nombre, Cédula, Sección, Fecha
Código HTML en las primeras hojas
Código CSS en las hojas siguientes
Captura de pantalla impresa de cómo se ve la página en el navegador (opcional, +0.5 pts extra)
Nombre del archivo (si entrega digital): Apellido_Nombre_TiendaWeb_SemanaX.pdf
Fecha de Entrega: ___
🔗 RECURSOS DE APOYO
🔗 RECURSOS DE APOYO
Recurso | URL | Descripción
-----------------------|-----------------------------------------------------------|--------------------------------------------------------
W3Schools HTML | https://www.w3schools.com/html/ | Tutoriales y referencias de etiquetas HTML
W3Schools CSS | https://www.w3schools.com/css/ | Guía completa de propiedades y selectores CSS
W3Schools Tryit Editor | https://www.w3schools.com/html/tryit.asp | Editor interactivo para probar código HTML/CSS en vivo
Imágenes Gratis | https://picsum.photos/ | Generador de imágenes aleatorias para prototipos y pruebas
Colores HTML | https://www.w3schools.com/colors/colors_names.asp | Lista de nombres de colores con códigos hexadecimales
⚠️ NOTA SOBRE INTEGRIDAD ACADÉMICA
⚠️ NOTA SOBRE INTEGRIDAD ACADÉMICA
Esta evaluación está diseñada para medir su capacidad de recordar y aplicar los conocimientos adquiridos en clase. Copiar código de compañeros, IA o sitios web sin comprenderlo:
Dificultará su avance a unidades más complejas (CSS avanzado, Django)
Será verificado mediante explicación oral aleatoria en clase
"El código que escribes con tu mano, se graba en tu mente."
Page updated
Google Sites
Report abuse