Guía Práctica: Crea y Personaliza tu Primera Página Web

¡Bienvenido/a! En esta actividad vas a aprender a crear tu propio archivo HTML en tu computadora, editarlo con el Bloc de notas y ver los cambios en tiempo real desde tu navegador.

1. Las 2 herramientas clave que vas a usar

No necesitas descargar nada raro. Solo utilizaremos dos programas que ya vienen instalados en tu computadora de Windows:

• Bloc de notas: Es el programa que sirve para EDITAR y escribir el código fuente.
• Navegador Web (Chrome o Edge): Es el programa que sirve para VER la pantalla final de tu página.

2. Pasos para crear tu archivo en Windows

1. Copiar: Selecciona y copia el código base que vimos en la pantalla del salón.
2. Abrir el editor: Abre la aplicación Bloc de notas en tu computadora y pega el código dentro.
3. Guardar como HTML (¡Paso Clave!): Ve al menú Archivo ➔ Guardar como..., selecciona el Escritorio, cambia la casilla Tipo a "Todos los archivos (*.*)" y nombra tu archivo como mi_pagina.html.
4. Visualizar: Busca en tu Escritorio el archivo mi_pagina.html que acabas de crear y hazle doble clic para abrirlo en el navegador.

3. ¿Cómo trabajar mientras editas? (Ciclo de trabajo)

Mantén las dos ventanas abiertas en tu pantalla (Bloc de notas de un lado y Navegador del otro). Cada vez que quieras ver un cambio:

• En el Bloc de notas: Presiona Control + G para guardar los cambios.
• En el Navegador: Presiona la tecla F5 para actualizar la pantalla.

4. Tu Misión: Modifica y personaliza el código

Abre tu archivo mi_pagina.html en el Bloc de notas e intervén el texto para transformarlo en tu perfil personal:

• Cambia el título principal (<h1>) por un saludo con tu nombre.
• Modifica el subtítulo (<h2>) con una frase corta sobre ti o tu pasatiempo principal.
• Dentro de los párrafos (<p>), aplica <strong> para poner palabras clave en negrita y <em> para cursiva.
• Reemplaza los ítems de la lista (<ul> y <li>) con 3 cosas favoritas tuyas (música, juegos, deportes, etc.).
• Modifica el enlace (<a>) cambiando la dirección web en el atributo href por la de tu sitio web favorito.
• Cambia el texto dentro del botón (<button>) por una frase divertida.
• Entregar el archivo HTML intervenido por Classroom.

Regla de oro: Casi todas las etiquetas que se abren (ejemplo: <p>) se deben cerrar obligatoriamente con una barra diagonal (ejemplo: </p>).