Cómo Crear tu Primera Página Web con HTML y CSS

Introducción

Crear una página web básica es una de las primeras metas para quienes se inician en el mundo del desarrollo web. Con HTML para estructurar el contenido y CSS para estilizarlo, podrás crear un sitio web funcional y atractivo. En este tutorial, aprenderás paso a paso cómo construir tu primera página web.

Requisitos Previos

Antes de comenzar, asegúrate de contar con lo siguiente:

Un editor de texto, como Visual Studio Code.
Un navegador web (Google Chrome, Firefox, etc.).
Conocimientos básicos de HTML y CSS (¡no te preocupes, explicaremos lo esencial!).

Paso 1: Crear el Archivo HTML

Abre tu editor de texto y crea un archivo llamado index.html.
Escribe el siguiente código básico.

<!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>
    <header>
        <h1>Bienvenido a Mi Página Web</h1>
    </header>
    <main>
        <p>Esta es una página sencilla creada con HTML y CSS.</p>
    </main>
    <footer>
        <p>© 2025 Mi Nombre</p>
    </footer>
</body>
</html>

3. Guarda el archivo.

Paso 2: Crear el Archivo CSS

Crea un archivo llamado style.css en el mismo directorio que index.html.
Escribe el siguiente código CSS para estilizar tu página:

/* Estilo general */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* Encabezado */
header {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    text-align: center;
}

/* Contenido principal */
main {
    padding: 20px;
    text-align: center;
}

/* Pie de página */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

3. Guarda el archivo.

Paso 3: Conectar el CSS con el HTML

Para aplicar los estilos CSS a tu página, necesitas enlazar el archivo CSS con tu archivo HTML. Agrega la siguiente línea en la sección <head> de tu archivo index.html:

<link rel="stylesheet" href="style.css">

Ahora tu archivo HTML debería verse así:

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Página Web</h1>
    </header>
    <main>
        <p>Esta es una página sencilla creada con HTML y CSS.</p>
    </main>
    <footer>
        <p>© 2025 Mi Nombre</p>
    </footer>
</body>
</html>

Paso 4: Visualizar tu Página Web

Abre el archivo index.html en un navegador web.
- En Visual Studio Code, haz clic derecho en index.html y selecciona “Abrir con Live Server” (si tienes instalada la extensión Live Server).
Verás tu página web con el texto y los estilos aplicados.

Paso 5: Personalizar tu Página

Ahora que tienes una página básica, prueba personalizarla:

Cambia los colores en style.css.
Agrega imágenes con la etiqueta <img>: <img src="ruta-de-tu-imagen.jpg" alt="Descripción de la imagen">
Agrega enlaces con la etiqueta <a>:html <a href="https://www.google.com" target="_blank">Visitar Google</a>

Conclusión

¡Felicidades! Has creado tu primera página web con HTML y CSS. Este es solo el comienzo; con práctica, podrás crear sitios web más complejos y funcionales. Continúa explorando el poder de HTML, CSS y JavaScript para mejorar tus habilidades en desarrollo web.