HTML y CSS: Guía completa con ejemplos reales para crear tu primera web

🧠 HTML y CSS: Guía completa con ejemplos reales para crear tu primera web

Cuando comienzas en desarrollo web, no necesitas saber todo.
Lo que realmente necesitas es entender cómo se usan las cosas en conjunto.

Este artículo está pensado para eso:
👉 Que puedas leerlo y salir con la capacidad de armar una página funcional.

📄 1. Estructura base (con atributos reales)

<!DOCTYPE html>
<html lang="es"> <!-- lang ayuda a SEO y accesibilidad --><head>
  <meta charset="UTF-8"> <!-- Permite acentos y caracteres -->
  
  <!-- Hace que la web sea responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Mi primera página</title>  <!-- Conectamos CSS -->
  <link rel="stylesheet" href="style.css">
</head><body>
  <h1>Hola mundo</h1>
</body></html>

🔍 Aquí ya hay atributos importantes:

  • lang="es" → idioma
  • charset="UTF-8" → caracteres
  • name="viewport" → responsive
  • href → ruta de archivo

🧩 2. Estructura semántica (con ejemplo real)

<header>
  <h1>Mi sitio web</h1>  <nav>
    <a href="#inicio">Inicio</a>
    <a href="#servicios">Servicios</a>
    <a href="#contacto">Contacto</a>
  </nav>
</header><main>  <section id="inicio">
    <h2>Bienvenido</h2>
    <p>Esta es mi página web.</p>
  </section>  <section id="servicios">
    <article>
      <h3>Diseño web</h3>
      <p>Creación de páginas modernas.</p>
    </article>
  </section>  <aside>
    <p>Publicidad o información adicional</p>
  </aside></main><footer>
  <p>© 2026 Mi sitio</p>
</footer>

📌 Atributos importantes aquí:

  • id="inicio" → permite navegación interna
  • href="#inicio" → enlace interno

🔤 3. Texto (con uso correcto)

<h1>Título principal</h1>
<h2>Subtítulo</h2><p>Este es un párrafo con <strong>importancia</strong> y <em>énfasis</em>.</p><p>También puedes usar <span style="color:red;">span para estilos</span></p><p>Línea 1<br>Línea 2</p><hr>

✔ Diferencia clave:

  • <strong> → importancia real (SEO)
  • <em> → énfasis
  • <span> → solo estilo

🔗 4. Enlaces e imágenes (con atributos completos)

<a href="https://google.com" target="_blank" title="Ir a Google">
  Ir a Google
</a><img 
  src="imagen.jpg" 
  alt="Persona usando computadora" 
  width="300"
  height="200"
>

📌 Atributos importantes:

  • href → destino
  • target="_blank" → nueva pestaña
  • title → tooltip
  • alt → accesibilidad + SEO
  • width / height → tamaño

📦 5. Contenedores (uso real)

<div class="card">
  <h3>Servicio</h3>
  <p>Descripción del servicio</p>
</div>
.card {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
}

📌 Atributos clave:

  • class="card" → reutilizable
  • id="algo" → único

📋 6. Listas

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul><ol>
  <li>Paso 1</li>
  <li>Paso 2</li>
</ol>

🧾 7. Formularios (completos y reales)

<form action="procesar.php" method="POST">  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" placeholder="Tu nombre">  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje"></textarea>  <button type="submit">Enviar</button></form>

📌 Atributos importantes:

  • action → a dónde se envía
  • method="POST" → tipo de envío
  • name → clave en backend
  • placeholder → texto guía
  • for + id → conexión label-input

🎨 8. CSS básico (con ejemplos reales)

body {
  background-color: #111;
  color: white;
  font-family: Arial, sans-serif;
}

📏 Tamaño y espacio

.box {
  width: 300px;
  height: 150px;  margin: 20px;   /* espacio exterior */
  padding: 15px;  /* espacio interior */
}

🎨 Colores

.texto {
  color: red;
}.fondo {
  background-color: black;
}

🔠 Texto

p {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

📦 Modelo de caja

.card {
  border: 2px solid green;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

📐 Posicionamiento

.box {
  position: absolute;
  top: 50px;
  right: 20px;
}

📌 Tipos:

  • static → normal
  • relative → base
  • absolute → respecto al padre
  • fixed → fijo en pantalla

🔄 Flexbox (clave)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

📱 9. Responsive (bien explicado)

Primero esto en HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Luego en CSS:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

👉 Esto cambia el diseño SOLO en celular.

🧲 10. Propiedades útiles

.box {
  overflow: hidden;     /* oculta contenido extra */
  z-index: 10;          /* capas */
  cursor: pointer;      /* cursor tipo mano */
  transition: 0.3s;     /* animación */
}

🎯 11. Ejemplo completo (mini página funcional)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo</title><style>body {
  margin: 0;
  font-family: Arial;
}header {
  background: black;
  color: white;
  padding: 10px;
}nav {
  display: flex;
  gap: 10px;
}nav a {
  color: white;
  text-decoration: none;
}.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}.card {
  border: 1px solid #ccc;
  padding: 20px;
  flex: 1;
}@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}</style>
</head><body><header>
  <h1>Mi sitio</h1>
  <nav>
    <a href="#">Inicio</a>
    <a href="#">Servicios</a>
  </nav>
</header><main class="container">  <div class="card">
    <h2>Servicio 1</h2>
    <p>Descripción</p>
  </div>  <div class="card">
    <h2>Servicio 2</h2>
    <p>Descripción</p>
  </div></main></body>
</html>

🧠 Conclusión (la parte que de verdad importa)

No se trata de memorizar etiquetas.

Se trata de entender esto:

  • HTML = estructura (qué es cada cosa)
  • CSS = apariencia (cómo se ve)
  • Atributos = comportamiento (cómo funciona)

Si entiendes eso, ya puedes:

✔ Crear páginas completas
✔ Hacer diseños modernos
✔ Adaptar a móvil
✔ Construir proyectos reales

Entradas relacionadas

Deja un comentario