Actividad 8vo 7 - 29 de Setiembre

-

 

Paso 1: Empezando en CodePen (5 min)

  1. Entra a la web: Abre tu navegador y ve a CodePen.io.

  2. Crea un nuevo "Pen": Haz clic en el botón "Start Coding" o busca la opción para crear un nuevo "Pen".

  3. Conoce la interfaz: Verás tres cajas grandes: HTML, CSS y JS. Por ahora, solo vamos a escribir en la caja de la izquierda, la de HTML. Puedes arrastrar las otras ventanas para hacer la de HTML más grande. A la derecha, verás un panel blanco: ¡ahí aparecerá tu página web en tiempo real!

  4. Busca una imagen en línea: En otra pestaña del navegador, busca una imagen sobre tu tema. Cuando la encuentres, haz clic derecho sobre ella y selecciona "Copiar dirección de la imagen" o "Copy Image Address". Guarda ese enlace, ¡lo usaremos en un momento!

Paso 2: Añade tu Contenido Principal (10 min)

En CodePen no necesitas escribir la estructura <html> o <body>. ¡La herramienta lo hace por ti! Simplemente escribe las etiquetas de tu contenido directamente en la caja de HTML.

  1. Escribe tu Título y Párrafo: Haz clic en la caja de HTML y escribe un título principal (<h1>) y un párrafo (<p>).

    HTML
    <h1>Mi Videojuego Favorito: Minecraft</h1>

<p>Minecraft es un juego de tipo sandbox donde puedes construir casi cualquier cosa que imagines. Es mi favorito por su creatividad y libertad.</p>

  2. ¡Personalízalo! Cambia el texto del ejemplo por el de tu propio tema.

  3. Mira la Magia: Fíjate cómo el resultado aparece al instante en el panel de la derecha. ¡Ya tienes el inicio de tu página!

Paso 3: Hazla Visual y Organizada (10 min)

Vamos a agregar la imagen que buscaste, una lista y un enlace para que tu página quede genial. Sigue escribiendo en la caja de HTML, debajo de lo que ya tienes.

  1. Inserta tu Imagen: Usa la etiqueta <img>. En el atributo src="", pega el enlace de la imagen que copiaste antes.

    HTML
    <img src="PEGA_AQUI_LA_DIRECCION_DE_LA_IMAGEN" alt="Una imagen de mi tema" width="400">

  2. Crea una Lista: Añade un subtítulo (<h2>) y una lista desordenada (<ul>) para destacar las mejores cosas de tu tema.

    HTML
    <h2>Cosas que me gustan:</h2>
<ul>
  <li>Construir estructuras increíbles.</li>
  <li>Explorar el mundo.</li>
  <li>Jugar con amigos.</li>
</ul>

  3. Añade un Enlace: Por último, agrega un enlace (<a>) para que la gente pueda saber más.

    HTML
    <p>Si quieres saber más, visita la <a href="https://www.minecraft.net">página oficial</a>.</p>

Paso 4: ¡Revisa y Comparte tu Creación! (5 min)

¡Ya está! No necesitas guardar ni abrir ningún archivo. Tu página web está viva en el panel de vista previa de CodePen.

  • Revisa que todo se vea como querías. Si ves un error, solo tienes que corregir el código en la caja de HTML y se actualizará solo.

  • Si quieres, puedes hacer clic en el botón "Save" (necesitarás una cuenta gratuita) para guardar tu trabajo y obtener un enlace para compartirlo con quien quieras.

¡Felicidades, has creado una página web con HTML en CodePen! 🎉

Entradas populares de este blog