HTML y CSS Básicos: Construyendo Tu Primera Página Web

Imagen de una pantalla de computadora mostrando código HTML y CSS, con un diseño web simple en el fondo

En este tutorial paso a paso, aprenderás cómo crear una página web simple utilizando HTML y CSS, con ejemplos prácticos relevantes para el mercado español.

1. Configuración del Entorno

Para comenzar, necesitarás un editor de texto. Recomendamos Visual Studio Code, que es gratuito y muy popular en España. Descárgalo e instálalo desde visualstudio.com.

2. Estructura Básica HTML

Crea un nuevo archivo llamado index.html y copia el siguiente código:


<!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>Bienvenido a Mi Sitio Web</h1>
    <p>Esta es mi primera página web creada con HTML.</p>
</body>
</html>

3. Añadiendo Estilos con CSS

Crea un nuevo archivo llamado estilos.css en la misma carpeta y añade el siguiente código:


body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

Ahora, enlaza el archivo CSS a tu HTML añadiendo esta línea dentro de la etiqueta <head>:

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

4. Creando un Diseño Responsivo

Para hacer tu página responsiva, añade estas reglas a tu CSS:


@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    h1 {
        font-size: 24px;
    }
}

5. Ejemplo Práctico: Página de Contacto para una Tienda en Línea Española

Vamos a crear una página de contacto simple para una tienda en línea española. Añade este código a tu HTML:


<h2>Contacta con Nuestra Tienda</h2>
<form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" required></textarea>
    
    <button type="submit">Enviar</button>
</form>

Y añade estos estilos a tu CSS:


form {
    max-width: 400px;
    margin: 20px auto;
}

label, input, textarea {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

Conclusión

¡Felicidades! Has creado tu primera página web con HTML y CSS, incluyendo un formulario de contacto relevante para el mercado español. Este es solo el comienzo de tu viaje en el diseño web. Continúa practicando y explorando más conceptos avanzados para mejorar tus habilidades.