Estructura obligatoria de la página
Tu página debe tener las siguientes secciones:
1. Encabezado (HEADER)
Debe incluir:
- Nombre del estudiante
- Un eslogan o frase
2. Menú de navegación (NAV)
Debe tener mínimo 3 opciones:
- Inicio
- Sobre mí
- Contacto
3. Sección “Sobre mí”
Debe incluir:
- Un párrafo describiéndote
- Una lista de al menos 3 gustos o habilidades
4. Imagen
Debes agregar una imagen personal o de internet
5. Sección de contacto
Debe incluir:
- Correo (real o inventado)
- Un enlace (por ejemplo a WhatsApp o Instagram)
6. Pie de página (FOOTER)
Debe incluir:
- Tu nombre
- Año (ej: 2026)
Requisitos de diseño (CSS)
Debes agregar estilos dentro de <style>:
✅ Cambiar color de fondo
✅ Cambiar tipo de letra
✅ Crear un menú horizontal
✅ Agregar colores al encabezado y footer
✅ Usar márgenes o espacios (padding)
✅ Crear al menos un contenedor tipo “card”
Requisitos técnicos obligatorios
✔ Debe tener <!DOCTYPE html>
✔ Debe usar <html>, <head> y <body>
✔ Código ordenado (indentado)
✔ Debe abrir correctamente en el navegador
Observación importante
El trabajo debe ser realizado de forma individual y original.
Se utilizarán herramientas de detección de contenido generado por inteligencia artificial.
En caso de que el identificador arroje un 60% o más de uso de IA, la calificación final del trabajo será de:
1.0
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Página personal</title>
<style>
body {
margin: 0;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #eef2f7;
color: #333;
}
header {
background-color: #1f4e79;
color: white;
text-align: center;
padding: 30px;
}
nav {
background-color: #16324f;
padding: 12px 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #f1c40f;
}
.contenedor {
width: 80%;
margin: 30px auto;
}
.card {
background-color: white;
padding: 20px;
margin-bottom: 25px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
img {
display: block;
margin: 20px auto;
width: 250px;
border-radius: 10px;
}
footer {
background-color: #1f4e79;
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<header>
<h1>Juan Pablo Grajales</h1>
<p>Docente de sistemas apasionado por la tecnología y la educación</p>
</header>
<nav>
<ul>
<li><a href=”#inicio”>Inicio</a></li>
<li><a href=”#sobre-mi”>Sobre mí</a></li>
<li><a href=”#contacto”>Contacto</a></li>
</ul>
</nav>
<div class=”contenedor”>
<section id=”inicio” class=”card”>
<h2>Inicio</h2>
<p>Bienvenido a mi página personal. Este espacio está dedicado a compartir información sobre mi perfil profesional, intereses y medios de contacto.</p>
</section>
<section id=”sobre-mi” class=”card”>
<h2>Sobre mí</h2>
<p>
Soy Juan Pablo Grajales, docente de sistemas comprometido con la formación de estudiantes en el área tecnológica.
Me enfoco en el aprendizaje práctico, el desarrollo de habilidades digitales y el uso responsable de la tecnología.
</p>
<h3>Gustos y habilidades</h3>
<ul>
<li>Enseñanza de informática y programación</li>
<li>Desarrollo de páginas web</li>
<li>Uso de herramientas tecnológicas educativas</li>
</ul>
</section>
<section class=”card”>
<h2>Imagen</h2>
<img src=”https://picsum.photos/250/250″ alt=”Imagen de perfil de ejemplo”>
</section>
<section id=”contacto” class=”card”>
<h2>Contacto</h2>
<p>Correo: juanpablo.grajales@email.com</p>
<p>
WhatsApp:
<a href=”https://wa.me/573000000000″ target=”_blank”>Enviar mensaje</a>
</p>
</section>
</div>
<footer>
<p>Juan Pablo Grajales – 2026</p>
</footer>
</body>
</html>