Chuleta · HTML
Cara A · La Escocesa
Lo que hay que entender antes que nada
Una web es una carpeta con archivos de texto. El navegador
abre index.html, lee las etiquetas y dibuja lo que dicen.
Si mueves la carpeta entera, la web sigue funcionando. Si sacas un
archivo de dentro, se rompe.
Las etiquetas van en parejas: una abre y otra cierra.
<p>texto</p>. La de cerrar lleva una barra.
Estructura de la página
| <html> |
Todo el documento va dentro. |
| <head> |
Lo que no se ve: título de la pestaña, enlace al CSS. |
| <body> |
Lo que sí se ve. |
| <header> |
Cabecera: tu nombre y el menú. |
| <main> |
El contenido propio de cada página. |
| <footer> |
Pie: contacto, créditos. |
| <article> |
Una unidad suelta: un proyecto, una obra. |
Contenido
| <h1> … <h6> |
Títulos, de más a menos importante. Un solo h1 por página. |
| <p> |
Un párrafo. Uno por idea, no uno para todo el texto. |
| <br> |
Salto de línea suelto. No lleva cierre. Úsalo poco. |
| <em> <strong> |
Cursiva y negrita. |
| <ul> <li> |
Lista. ul es la lista entera, cada li una línea. |
| <hr> |
Línea de separación. |
| <!-- … --> |
Comentario: no se ve en el navegador. |
Enlaces e imágenes
| <a href="cv.html">CV</a> |
Enlace a otra página de tu web. |
| <a href="https://…"> |
Enlace a otra web. Necesita el https:// delante. |
| <a href="mailto:tu@correo"> |
Enlace que abre el programa de correo. |
| <img src="img/obra.jpg" alt="…"> |
Imagen. alt describe la imagen para quien no la ve. |
Nombres de archivo
Sin espacios, sin acentos, sin ñ, sin mayúsculas. Foto Taller.JPG
falla al publicar; foto-taller.jpg no. Y ojo: .jpg y
.JPG son archivos distintos para el servidor.
Taller de web autogestionada · Guarda esta hoja
Chuleta · CSS
Cara B · La Escocesa
Cómo se escribe una regla
selector { propiedad: valor; } — el selector dice a qué
afecta, la propiedad qué le cambias.
Punto y coma al final de cada línea.
Si te lo olvidas, esa línea y a veces la siguiente dejan de funcionar,
y no avisa nadie.
Selectores
| p { } |
Todos los párrafos. |
| header, main { } |
Los dos a la vez. La coma es "y también". |
| nav a { } |
Los enlaces que estén dentro de nav. |
| a:hover { } |
Cuando el ratón está encima. |
| article:last-child { } |
Solo el último de la serie. |
Texto
| color |
Color de la letra. #12233a, black. |
| background-color |
Color de fondo. |
| font-family |
Tipografía. Varias separadas por comas: usa la primera que encuentre. |
| font-size |
Tamaño. 18px. |
| font-weight |
normal, bold, o un número. |
| font-style |
italic para cursiva. |
| line-height |
Separación entre líneas. 1.5 o 1.6 para texto largo. |
| letter-spacing |
Separación entre letras. 0.08em. |
| text-align |
left, center, right. |
| text-transform |
uppercase pone en mayúsculas sin tocar el HTML. |
| text-decoration |
none quita el subrayado de los enlaces. |
La caja
Todo elemento es una caja: contenido, padding (relleno
por dentro), border (línea) y margin (aire por
fuera), en ese orden de dentro hacia fuera.
| padding: 24px; |
Los cuatro lados. |
| margin: 16px 0; |
Dos valores: arriba/abajo, luego lados. |
| margin: 0 0 16px 0; |
Cuatro valores: arriba, derecha, abajo, izquierda. |
| border-bottom: 1px solid #ccc; |
Grosor, tipo, color. |
| max-width: 640px; |
Ancho máximo. Evita líneas de texto larguísimas. |
| margin: 0 auto; |
Centra un bloque que tenga max-width. |
Poner cosas en fila
| display: flex; |
Los hijos se colocan en fila. |
| gap: 20px; |
Separación entre ellos. |
| flex-wrap: wrap; |
Que salten de línea si no caben. |
| justify-content: center; |
Alineación horizontal dentro de la fila. |
Móvil
@media (max-width: 600px) { … } — lo que va dentro solo se
aplica en pantallas de 600px o menos, y pisa lo de arriba.
Va siempre al final del archivo.
Si algo no cambia
1. ¿Has guardado? · 2. ¿Falta un punto y coma o una llave?
· 3. ¿El selector apunta de verdad a ese elemento? · 4. Recarga con
Cmd+Shift+R (Mac) o Ctrl+F5 (Windows) para saltarte la caché.
Taller de web autogestionada · Guarda esta hoja