// Programación I · Para empezar
Qué es cada lenguaje, cómo se escribe y cómo se conectan
// para empezar
Dice qué es cada cosa: un título, un párrafo, una imagen, un enlace.
la estructura y el contenido
Dice cómo se ve: colores, tipografías, tamaños, espacios y colocación.
el aspecto
Más adelante llegará JavaScript, que se encarga de lo que hace la página al interactuar con ella.
El HTML es idéntico en los dos. Sin CSS, el navegador usa sus estilos por defecto.
// 1
La estructura
El contenido se marca con etiquetas. Casi todas van por parejas: una de apertura y otra de cierre, que lleva una barra /.
<a href="https://www.w3.org/">Visita el W3C</a>
etiqueta de aperturacontenidocierre
elemento
Un atributo es información extra sobre el elemento. Va en la etiqueta de apertura con la forma nombre="valor".
Algunos elementos no tienen contenido y, por tanto, no llevan etiqueta de cierre. Toda su información va en los atributos.
<img src="foto.jpg" alt="Atardecer en el Ebro"> <br> <meta charset="UTF-8">
Los elementos se pueden anidar. Lo último que se abre es lo primero que se cierra, como unas cajas dentro de otras.
✗ Mal: las etiquetas se cruzan
<p>Esto es <strong>muy importante</p></strong>
✓ Bien
<p>Esto es <strong>muy importante</strong></p>
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="…"> <title>Mi primera web</title> </head> <body> <h1>¡Hola, mundo!</h1> </body> </html>
<h1> … <h6>
<p>
<a>
<img>
<ul> <li>
<strong>
<header> <main> <footer>
<div>
De bloque: empiezan en una línea nueva y ocupan todo el ancho. <h1>, <p>, <div>…
En línea: van dentro del texto y sólo ocupan lo que mide su contenido. <a>, <strong>, <span>…
Sin sangría
<header> <h1>Mi web</h1> <p>Bienvenida</p> </header>
Con sangría
<header> <h1>Mi web</h1> <p>Bienvenida</p> </header>
// 2
El aspecto
Un archivo CSS es una lista de reglas. Cada regla dice «a estos elementos, aplícales estos estilos».
h1 { color: #546D78; font-size: 32px; }
{ }p { … }
Todos los elementos de ese tipo
.destacado { … }
Los que tienen class="destacado". Se puede repetir.
#cabecera { … }
El único con id="cabecera"
Para dar estilos, usa clases casi siempre: se pueden repetir y combinar.
<p style="color: red;"> Texto en rojo </p>
Sólo afecta a ese elemento
<head> <style> p { color: red; } </style> </head>
Sólo afecta a esa página
<head> <link rel="stylesheet" href="css/estilos.css"> </head>
Afecta a todas las páginas que lo enlazan · la forma recomendada
Si cambias el color de los títulos en estilos.css, cambia en toda la web a la vez. Además, el HTML queda limpio, sólo con contenido.
Notas en el código que el navegador ignora. Cada lenguaje los escribe a su manera.
<!-- Esto es un comentario -->/* Esto es un comentario */Cualquiera puede verlos en el código fuente, así que no guardes nada privado en ellos.
// y ahora
Todo esto, con más detalle y ejemplos, en los apuntes.