HTML y CSS: estructura y diseño web

HTML y CSS: estructura y diseño web

HTML (HyperText Markup Language)

Lenguaje que define la ESTRUCTURA de una página web.

<!DOCTYPE html>
<html>
<head>
  <title>Mi página</title>
</head>
<body>
  <h1>Título principal</h1>
  <p>Esto es un párrafo.</p>
  <img src="foto.jpg" alt="Descripción">
  <a href="https://edudesk.es">Enlace</a>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>
</body>
</html>

Etiquetas principales

• h1-h6: títulos (h1 más grande, h6 más pequeño).
• p: párrafo.
• img: imagen.
• a: enlace.
• ul/ol + li: listas.
• div: contenedor genérico.
• table, tr, td: tablas.

CSS (Cascading Style Sheets)

Lenguaje que define el DISEÑO visual de la página.

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
}
h1 {
  color: #3b82f6;
  text-align: center;
}
p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

Propiedades CSS clave

• color: color del texto.
• background-color: color de fondo.
• font-size: tamaño de texto.
• margin/padding: espacio exterior/interior.
• border: borde del elemento.
• width/height: ancho/alto.