HTML y CSS Básicos: Construyendo Tu Primer Sitio Web

Bienvenido a este tutorial paso a paso sobre cómo crear un sitio web simple utilizando HTML y CSS. Este curso es perfecto para estudiantes que comienzan su viaje en el diseño web en ruhuwee.com.

Imagen de un escritorio con una computadora mostrando código HTML y CSS, junto a un cuaderno con bocetos de diseño web

Paso 1: Configuración del Entorno

Antes de comenzar, necesitarás un editor de texto simple. Recomendamos Visual Studio Code o Sublime Text. Estos editores te ayudarán a escribir y organizar tu código de manera eficiente.

Paso 2: Estructura Básica HTML

Comienza creando un archivo llamado index.html. Este será el punto de entrada de tu sitio web. Aquí tienes una estructura básica para empezar:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primer Sitio Web</title>
</head>
<body>
    <h1>Bienvenido a Mi Sitio Web</h1>
    <p>Este es mi primer párrafo en HTML.</p>
</body>
</html>

Paso 3: Añadiendo Estilos con CSS

Ahora, vamos a añadir algo de estilo a nuestro HTML. Crea un archivo llamado styles.css en el mismo directorio y añade lo siguiente:

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

h1 {
    color: #8C6A45;
}

p {
    color: #333;
}

Luego, enlaza este archivo CSS a tu HTML añadiendo la siguiente línea dentro de la etiqueta <head>:

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

Paso 4: Añadiendo Más Contenido

Ahora que tienes la estructura básica, puedes comenzar a añadir más contenido a tu sitio web. Prueba añadiendo imágenes, listas y enlaces:

<img src="imagen.jpg" alt="Descripción de la imagen">

<ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
</ul>

<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>

Conclusión

¡Felicidades! Has creado tu primer sitio web básico con HTML y CSS. Este es solo el comienzo de tu viaje en el diseño web. A medida que avances en tu curso de diseño web en ruhuwee.com, aprenderás técnicas más avanzadas para crear sitios web más complejos y visualmente atractivos.

Recuerda, la práctica hace al maestro. Continúa experimentando con diferentes elementos HTML y propiedades CSS para mejorar tus habilidades y crear diseños web únicos y profesionales.