Login  |Hazte alumno gratis

Creación de la Primera Página Web

Publicada el por networknomad

Unidad 2: HTML Básico – Estructura de una Página Web

Introducción al Desarrollo Web con HTML y CSS

¡Llegó el momento de crear tu primera página web desde cero! En esta sesión, aprenderás cómo construir una página básica en HTML, entenderás su estructura y aprenderás a agregar texto y otros elementos para que puedas dar los primeros pasos en el mundo del desarrollo web. También aprenderás a guardar y abrir tu archivo HTML en un navegador para ver el resultado de tu trabajo.

1. Crear un archivo HTML y entender su estructura básica

¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje que usamos para construir la estructura de una página web. Piensa en HTML como el esqueleto de un sitio web. Nos ayuda a organizar el contenido y a indicar qué tipo de información estamos mostrando, ya sean títulos, párrafos, imágenes, enlaces, etc.

Estructura básica de un documento HTML:

Cada archivo HTML sigue una estructura básica para que los navegadores entiendan cómo mostrarlo. A continuación, te explico las partes más importantes de un documento HTML:

  1. <!DOCTYPE html>: Le dice al navegador que estamos usando HTML.
  2. <html>: Marca el inicio y el fin del documento HTML.
  3. <head>: Contiene información sobre la página (como el título, enlaces a archivos CSS, y más) que no se ve en la página.
  4. <body>: Es donde se coloca todo el contenido que queremos mostrar en la página, como texto, imágenes, y enlaces.

Vamos a crear tu primer archivo HTML:

  1. Abre Visual Studio Code.
  2. Haz clic derecho en la carpeta de tu proyecto y selecciona “Nuevo archivo”.
  3. Nombra el archivo como index.html y presiona Enter.
  4. Copia y pega el siguiente código básico en index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primera Página Web</title>
</head>
<body>
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera página web creada con HTML.</p>
</body>
</html>

2. Agregar títulos, párrafos y otros elementos de texto

Añadir Títulos (<h1> – <h6>):
Los títulos ayudan a organizar el contenido de una página. Se escriben con etiquetas de <h1> a <h6>, siendo <h1> el título más grande e importante y <h6> el más pequeño.

  • En el ejemplo anterior, ya tienes un título grande con <h1>¡Hola, Mundo!</h1>. Puedes agregar más títulos en tu documento para probar diferentes tamaños.

Añadir Párrafos (<p>):
Los párrafos son secciones de texto que se agrupan en bloques, y se escriben dentro de la etiqueta <p>. Puedes añadir varios párrafos para organizar mejor la información.

  • Por ejemplo, puedes añadir otro párrafo debajo del primero así:
    <p>Estoy aprendiendo a crear páginas web con HTML. ¡Es muy emocionante!</p>

Otros elementos de texto:
También puedes dar formato al texto con etiquetas especiales, como <strong> para poner texto en negrita o <em> para ponerlo en cursiva.

  • Ejemplo:
    <p>Esto es <strong>muy importante</strong> y esto es <em>muy interesante</em>.</p>

3. Guardar y abrir la página en un navegador para visualizarla

Guardar tu trabajo:
Cada vez que realices un cambio en el archivo HTML, asegúrate de guardar el archivo antes de visualizar los resultados. En VS Code, puedes guardar usando Ctrl + S (Windows) o Cmd + S (Mac).

Abrir tu página en un navegador:

  1. Ve a la carpeta de tu proyecto y busca el archivo index.html.
  2. Haz doble clic en el archivo para abrirlo en tu navegador preferido.
  3. Verás el contenido de tu página tal como lo has escrito en el código HTML.

Ejercicio Guiado: Crear una Página de Presentación Personal

Para practicar, vamos a crear una página de presentación en la que podrás contar un poco sobre ti y practicar los elementos básicos de HTML.

Abre index.html en VS Code y modifica el contenido de la etiqueta <body> para que se parezca a lo siguiente:

<body>
    <h1>¡Hola! Soy [Tu Nombre]</h1>
    <p>Soy un estudiante aprendiendo desarrollo web con HTML y CSS. Me gusta aprender cosas nuevas y crear proyectos interesantes.</p>
    
    <h2>Mis Hobbies</h2>
    <p>Algunos de mis hobbies favoritos son:</p>
    <ul>
        <li>Leer libros de aventuras</li>
        <li>Jugar videojuegos</li>
        <li>Hacer deporte</li>
        <li>Dibujar</li>
    </ul>

    <h2>¿Qué quiero lograr?</h2>
    <p>Quiero aprender a crear páginas web increíbles y divertirme en el proceso.</p>
</body>

Guarda el archivo y ábrelo en el navegador para ver cómo se ve tu página.

    ¡Felicitaciones!
    Has creado tu primera página web con HTML. Ya tienes los conocimientos básicos sobre la estructura HTML y cómo agregar títulos, párrafos y listas a tu página. En la próxima sesión, comenzaremos a explorar cómo darle estilo a tu página usando CSS para que sea aún más atractiva. ¡Sigue adelante, estás en camino de convertirte en un desarrollador web!

    ← Anterior Siguiente →