Autobiografía Web con HTML: estructura básica de una página
En esta actividad crearás tu primera página web, al igual que en la clase pasada, utilizando HTML básico.
El objetivo es aprender a organizar información personal usando correctamente las etiquetas HTML.
En la siguiente clase nos encargaremos de agregar estilos con CSS para que la página sea más presentable.
De antemano, me disculpo por no asistir a la clase; no esperaba la salida del día de hoy.
Espero que las instrucciones y la descripción por escrito sean claras.
La página será tu autobiografía y funcionará como una presentación personal en formato web.
1. Estructura general del documento
Toda la página debe estar contenida dentro de la etiqueta <html>.
Dentro de <html> deben existir dos partes principales:
<head>: información general del documento<body>: contenido visible de la página
2. Título de la página
Dentro de <head> se debe usar la etiqueta <title>.
En <title> escribe el nombre de tu página, por ejemplo:
- Autobiografía de Juan Jose
- Mi historia personal
- Sobre mí
Este título se mostrará en la pestaña del navegador.
3. Encabezado principal
Dentro de <body>, al inicio del contenido, utiliza la etiqueta <header>.
El <header> debe contener:
<h1>con tu nombre completo<p>con una breve descripción personal
4. Sección: Sobre mí
Para organizar el contenido utiliza la etiqueta <section>.
Dentro de <section> incluye:
<h2>con el título “Sobre mí”<p>con tu presentación personal
Puedes mencionar:
- Edad
- Lugar de origen
- Intereses generales
5. Sección: Mi historia
Utiliza nuevamente la etiqueta <section>.
Dentro de esta sección incluye:
<h2>con el título “Mi historia”- Uno o dos
<p>contando tu historia personal o académica
6. Sección: Mis hobbies o intereses
Usa la etiqueta <section>.
Dentro de esta sección incluye:
<h2>como título<ul>para la lista<li>para cada hobby o interés
7. Sección: Metas o aspiraciones
Usa otra etiqueta <section>.
Dentro de ella incluye:
<h2>con el título<p>donde escribas tus metas académicas o profesionales
8. Imagen personal o representativa
Para agregar una imagen utiliza la etiqueta <img>.
La imagen debe incluir el atributo alt con una descripción breve de la imagen.
Opcionalmente puedes usar <figure> para organizar la imagen.
9. Pie de página
Al final del contenido utiliza la etiqueta <footer>.
Dentro de <footer> usa <p> para escribir:
- Nombre del alumno
- Grupo
- Materia
- Año
Reglas de la actividad
- Usar solo HTML básico
- No usar CSS
- No usar JavaScript
- Contenido original
- Guardar el archivo con extensión
.html
Entrega
Subir en Google Classroom.
- Un archivo
.html - Debe abrir correctamente en el navegador
- Debe incluir todas las secciones solicitadas