sesión 1 de 3

html:
lo que dice
qué es cada cosa

Tres horas. Al final de hoy tienes dos páginas tuyas, enlazadas, con tu contenido de verdad — y publicadas en internet.

taller de web autogestionada · la escocesa · meowrhino.studio

3 horasel plan de hoy

Las láminas amarillas son práctica: las haces tú en el ordenador. Las blancas son teoría: se explican proyectadas.

práctica · lo hacéis vosotras 00:00 · 20 minutos

puesta a punto

Antes de escribir nada: el programa instalado, la carpeta abierta y la cuenta creada. Nadie sigue hasta que lo tenga todo el mundo.

00:00tres cosas y ya

lo que hay que tener

1 · Visual Studio Code

El programa donde se escribe. Es un editor de texto, como un Word pero para código. Gratis, en code.visualstudio.com.

Descarga, abre el archivo, arrastra a Aplicaciones. Nada más.

2 · La carpeta de partida

Copiadla del pendrive o descargadla de la web del taller. Ponla donde guardes tus cosas importantes, no en Descargas.

3 · Una cuenta de GitHub

Gratis, sin tarjeta, en github.com. Hace falta al final de hoy para publicar.

Apunta la contraseña en un papel. Cada edición hay alguien que no puede entrar.

si el correo de verificación no llega

Mira en spam, y si no está, sigue sin cuenta: la creas en la pausa. No te quedes parada esperando.

00:00hacedlo todas ahora

abrir la carpeta, no el archivo

En VS Code

Archivo → Abrir carpeta, y eliges la carpeta entera. Nunca un archivo suelto.

Así ves toda tu web en la columna de la izquierda y puedes saltar entre archivos.

En el navegador

Doble clic en index.html. Arriba no pone https:// sino una ruta de tu ordenador: todavía es una web privada, solo tuya.

VS Code
   ↓  guardas
Navegador
   ↓  recargas
Ves el cambio

Coloca las dos ventanas lado a lado. Este bucle es el 90% del trabajo, hoy y siempre.

no seguimos hasta que

Todo el mundo haya cambiado una palabra del h1, guardado, recargado y visto el cambio. Una vez. Levanta la mano quien lo tenga.

00:00apunte

vs code y github, separados a propósito

VS Code tiene un botón para conectarse a GitHub y subir cambios sin salir del programa. Hoy no lo usamos, y es una decisión.

Se aprende primero el camino largo —editar aquí, subir por la web— porque es el que deja ver qué está pasando: una carpeta tuya, y una copia en un servidor.

Cuando ese camino te aburra, que te aburrirá, el atajo está en el panel Control de código fuente de VS Code. Es un botón, no una terminal.

Pero para entonces ya sabrás qué hace, y si se rompe sabrás por qué.

teoría · lo explico yo 00:20 · 10 minutos

webs hechas a mano

Miramos webs de artistas por dentro, con el inspector abierto. Y nos presentamos.

00:20

una web es una carpeta

No hay nada más. Ni servidores misteriosos, ni una empresa detrás, ni una suscripción. Archivos de texto dentro de una carpeta.

mi-web/
├── index.html      ← la portada
├── proyectos.html
├── cv.html
├── estilo.css      ← el aspecto
└── img/
    ├── obra-1.jpg
    └── retrato.jpg

En cualquier web que te guste: botón derecho → Inspeccionar. Eso que sale es todo lo que hay.

Si mueves la carpeta entera, la web sigue funcionando. Si sacas un archivo de dentro, se rompe.

teoría · lo explico yo 00:30 · 15 minutos

qué es el html

Antes de escribir una sola etiqueta: qué es esto y qué hace exactamente.

00:30el mapa

huesos, maquillaje y cerebro

Una web se hace con tres lenguajes, y siempre sale la misma pregunta: ¿por qué tres y no uno? Porque hacen tres trabajos distintos, y van en este orden.

HTML · los huesos

Dan la forma y van debajo. No se ven, pero sin ellos no hay nada que sostener.

Hoy.

CSS · el maquillaje

Va encima. Cambia el aspecto por completo y no toca la estructura de debajo.

Sesión 2.

JavaScript · el cerebro

Decide y reacciona. No hace falta para tener una web publicada y buena.

Ni hoy ni el día 2. Está en el muestrario.

esto lo vas a usar todo el taller

No se puede maquillar un cuerpo sin huesos: por eso hoy es HTML y el día 2 es CSS, y no al revés.

Y sirve de diagnóstico cada vez que algo se rompa: si se ve feo, es el maquillaje. Si no se ve, son los huesos. Antes de tocar nada, pregúntate cuál de los dos es.

00:30el concepto

html no dibuja: estructura

HTML son las siglas de HyperText Markup Language. Lo importante es la palabra del medio: markup, marcado. No es un lenguaje de programación — no calcula, no decide, no tiene memoria.

Lo único que hace es marcar un texto diciendo qué es cada parte.

Texto sin marcar

Rita Mestre
Trabajo con cerámica y sonido.
Cámaras sordas
2026 · Gres

El navegador no sabe qué es cada línea. Lo pinta todo seguido, igual.

El mismo texto, marcado

<h1>Rita Mestre</h1>
<p>Trabajo con cerámica y sonido.</p>
<h3>Cámaras sordas</h3>
<p>2026 · Gres</p>

Ahora sí. Y con esa información puede jerarquizarlo, y un lector de pantalla puede leerlo con sentido.

la frase de hoy

El HTML dice qué es cada cosa. El CSS dice cómo se ve. Hoy solo hacemos lo primero: va a quedar feo, y está bien que quede feo.

00:30

tres cosas que hay que creerse

  1. La carpeta es la web. Si la mueves entera, sigue funcionando. Si sacas un archivo de dentro, se rompe.
  2. index.html es la portada. Ese nombre exacto: es el que busca el servidor cuando alguien entra sin pedir ninguna página concreta.
  3. img/obra.jpg significa «dentro de mi carpeta». Una imagen que esté en tu escritorio se ve en tu ordenador y en ningún otro sitio del mundo.
nombres de archivo

Sin espacios, sin acentos, sin ñ, sin mayúsculas. Foto Taller.JPG falla al publicar; foto-taller.jpg no.

Para un servidor, .jpg y .JPG son archivos distintos. En tu Mac funciona y al publicar deja de funcionar. Es el fallo número uno del taller.

00:30por qué separar

por qué el contenido va aparte del aspecto

Porque el contenido dura y el aspecto cambia. Dentro de cinco años querrás otra tipografía y otros colores, pero tu bio y tus proyectos serán los mismos.

Si están separados, rediseñas la web entera tocando un solo archivo. Lo verás en la sesión 2: el mismo HTML, cuatro webs.

Y porque hay lectores que no son ojos: buscadores, lectores de pantalla, el modo lectura del móvil. Todos leen la estructura.

Un <h1> escrito como <h1> es un título para todo el mundo. Un texto puesto grande a mano solo lo es para quien lo ve.

teoría · lo explico yo 00:45 · 30 minutos

las etiquetas

Escribo en directo y me seguís. Despacio. Sin empezar todavía con vuestro contenido.

00:45

las etiquetas van en pareja

<p>Esto es un párrafo.</p>
 ↑ abre                ↑ cierra (lleva barra)

Lo que escribes entre medias es lo que se ve. Y lo que anides dentro, se cierra dentro:

<article>
  <h3>Cámaras sordas</h3>
  <p>2026 · Gres y grabaciones de campo</p>
</article>
00:45el esqueleto

la estructura de una página

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">                     acentos y ñ
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rita Mestre</title>                la pestaña
  <link rel="stylesheet" href="estilo.css"> el aspecto
</head>
<body>
  <header> tu nombre y el menú </header>
  <main>   el contenido de esta página </main>
  <footer> contacto, créditos </footer>
</body>
</html>

head es lo que no se ve. body es lo que sí.

00:45

títulos y párrafos

<h1>Rita Mestre</h1>          el título principal
<h2>Proyectos</h2>            un apartado
<h3>Cámaras sordas</h3>       algo dentro del apartado

<p>Un párrafo.</p>
<p>Otro párrafo, con otra idea.</p>
un solo h1 por página

h1 a h6 es jerarquía, no tamaño. El tamaño se decide luego, en el CSS. No uses un h4 porque quieras letra pequeña.

00:45

enlaces e imágenes

<a href="cv.html">CV</a>                      a otra página tuya
<a href="https://neocities.org">Neocities</a>  a otra web
<a href="mailto:rita@ejemplo.com">Escríbeme</a>  abre el correo

<img src="img/obra-1.jpg" alt="Cinco piezas de gres">
  • href es a dónde va. Para una web de fuera hace falta el https:// delante.
  • src es dónde está el archivo. img/ significa dentro de tu carpeta.
  • img no lleva etiqueta de cierre. Es de las pocas.
el alt no es opcional

Lo lee en voz alta un lector de pantalla y aparece si la imagen no carga. Descríbela como se la describirías por teléfono a alguien.

práctica · lo hacéis vosotras 01:15 · 30 minutos

ejercicio 1 · tu portada

Ahora con vuestro contenido de verdad. Nada de texto de relleno. Yo doy vueltas por la sala.

ejercicio 130 min

tu portada

hay que
  • Tu nombre en el h1 y en el title
  • Tu bio en dos o tres p
  • Una imagen con su alt escrito
  • Tu correo en el pie con mailto:
  • Los comentarios de instrucciones borrados
puedes
  • Un enlace a otra web tuya o que admires
  • strong y em dentro de la bio
  • Una segunda imagen
  • Una lista con ul y li
  • Cambiar background-color en el CSS
podrías
  • figure con figcaption de pie de foto
  • Un favicon y una meta description
  • Un iframe de Vimeo o Bandcamp
  • loading="lazy" en las imágenes
si has pegado texto desde word

Mira las comillas y los guiones: vienen curvados y a veces rompen el código. Bórralos y reescríbelos a mano.

ejercicios 1 y 2lo que puedes usar hoy

caja de herramientas · html

Todo lo que sabes escribir a estas alturas del día. Lo de la derecha no hace falta hoy, pero está ahí para cuando quieras.

esenciales

  • <h1> … <h6>
  • <p>
  • <br>
  • <hr>
  • <strong>
  • <em>
  • <small>
  • <ul> <li>
  • <ol>
  • <a href="pagina.html">
  • <a href="https://…">
  • <a href="mailto:…">
  • <img src alt>
  • <header>
  • <nav>
  • <main>
  • <footer>
  • <article>
  • <title>
  • <!-- comentario -->
  • class="…"

avanzadas

  • <figure> <figcaption>
  • <details> <summary>
  • <iframe>
  • <video>
  • <audio>
  • <a download>
  • <a href="#ancla">
  • id="…"
  • loading="lazy"
  • width · height
  • <mark>
  • <blockquote>
  • favicon
  • meta description
  • target="_blank"

cada una explicada, con todas sus opciones, en el chuletón

01:45 · 15 minutos

pausa

Estirar las piernas. Quien no tenga cuenta de GitHub, este es el momento.

teoría · lo explico yo 02:00 · 10 minutos

la segunda página

Diez minutos de explicación y os suelto media hora.

02:00

duplicar, enlazar, repetir

<nav>
  <a href="index.html">Inicio</a>
  <a href="proyectos.html">Proyectos</a>
</nav>
el fallo típico

Añadir el enlace nuevo solo en una de las dos páginas. Desde la otra no se llega, y parece que el enlace está mal cuando lo que falta es repetirlo.

<article>
  <h3>Cámaras sordas</h3>
  <p>2026 · Gres · Barcelona</p>
  <img src="img/obra-1.jpg" alt="…">
  <p>Dos líneas sobre el proyecto.</p>
</article>

Para el siguiente proyecto: copias el bloque entero, lo pegas debajo y cambias el texto. Así de aburrido. Así de fiable.

práctica · lo hacéis vosotras 02:10 · 30 minutos

ejercicio 2 · dos páginas

Duplicar, conectar y montar la página de proyectos con vuestro material.

ejercicio 230 min

dos páginas conectadas

hay que
  • Duplicar index.html y renombrarla
  • Cambiar el title y vaciar el main
  • Un article por proyecto, con h3, img y p
  • El enlace nuevo en el menú de las dos
  • Ir y volver clicando, sin tocar la barra
puedes
  • Una tercera página (cv.html) con ul y li
  • La ficha técnica en su propio p class="ficha"
  • Un hr entre proyectos
  • Más de dos proyectos
podrías
  • figure y figcaption en cada obra
  • Un id y enlaces #ancla para saltar dentro
  • details para los textos largos
  • Un iframe con documentación en vídeo
práctica · lo hacéis vosotras 02:40 · 10 minutos

publicarla ya

Sí, hoy. Sin entender nada todavía. Para que salgáis por la puerta con una dirección de internet.

02:40a ciegas, ya lo entenderemos

seis clics

  1. En github.com, botón New repository.
  2. Nombre mi-web, marca Public, Create.
  3. uploading an existing file.
  4. Arrastra el contenido de tu carpeta, no la carpeta.
  5. Commit changes.
  6. Settings → Pages → Branch: main → Save.
por qué hoy y no en la sesión 3

Porque si faltas a la última sesión, no te quedas sin web. Y tener algo público que enseñar hace que los deberes se hagan.

el error clásico

Si arrastras la carpeta entera queda mi-web/index.html y da 404. Al abrir el repositorio tienes que ver index.html en la primera pantalla.

02:50 · 10 minutos

cierre y encargo

Cada una enseña su pantalla treinta segundos. Y os llevo deberes.

02:50lo que no vamos a hacer

lo que esto no hace

formulario de contactoNecesita un servidor. Pon tu correo con mailto: — es lo que hace casi todo el mundo y no se rompe nunca.
tiendaPagos, stock y seguridad son otro proyecto. Enlaza a Bandcamp o Big Cartel.
blog automáticoCada entrada es un archivo que creas a mano. Para tres o cuatro al año, perfecto.
comentariosNecesitan base de datos y moderación. No.
reservasEnlaza a una herramienta externa.

Lo que sí hace: existir para siempre, cargar rápido, no costar nada al mes y no depender de ninguna empresa.

ejercicio 31 hora · en casa

deberes: reunir el material

No hay que programar nada. Es preparar el contenido, que es lo que más tarda y no se puede improvisar en clase. Sin esto, la sesión 2 no cunde.

Textos

  • Tu bio, escrita y revisada.
  • La ficha de cada proyecto: título, año, técnica, lugar, dos o tres líneas.
  • Tu CV: exposiciones, formación, lo que quieras incluir.

Referencias

  • Dos o tres webs que te gusten. Apunta qué te gusta de cada una.

Imágenes

  • Entre 5 y 10, en una carpeta.
  • Reducidas a 1600 píxeles de ancho, con Vista Previa, Paint o squoosh.app.
  • Sin espacios, sin acentos, en minúsculas: obra-2024.jpg, no Obra 2024.JPG.
ojo con el peso

Una foto de cámara pesa 8 MB y tarda una eternidad. Reducida son 300 KB y se ve igual en pantalla.

para llevarse

chuleta de html

Todo lo de hoy en una hoja. Para dentro de tres meses, cuando estés sola delante del ordenador.

chuleta · html

Estructura

<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.

Enlaces e imágenes

<a href="cv.html">Enlace a otra página tuya.
<a href="https://…">A otra web. Necesita el https://.
<a href="mailto:…">Abre el programa de correo.
<img src alt>alt describe la imagen para quien no la ve.

Contenido

<h1> … <h6>Títulos. Un solo h1 por página.
<p>Un párrafo. Uno por idea.
<br>Salto de línea suelto. Úsalo poco.
<em> <strong>Cursiva y negrita.
<ul> <li>Lista y cada línea de la lista.
<hr>Línea de separación.
<!-- … -->Comentario: no se ve.

Si algo no funciona

  1. ¿Has guardado el archivo?
  2. ¿Has recargado? Forzada: Cmd+Shift+R o Ctrl+F5.
  3. ¿Falta cerrar una etiqueta o una comilla? VS Code lo marca en color.
  4. ¿Una imagen no sale? El nombre y el src tienen que coincidir exactamente.
muestrariopara mirar por dentro

hecho solo con html y un poco de css

Cada una es un único archivo, muy comentado. Ábrelas, mira el código con botón derecho → Ver código fuente, y róbalo.

la web que se explica Pasa el ratón y cada elemento te dice qué es. solo css cadáver exquisito Generador de frases al azar: listas y un botón mínimo. js mini archivador de textos Fichas giradas con filtros por etiqueta. js mini ver las 26 El muestrario entero, ordenado por tipo. índice

lo que te llevas hoy

  • Dos páginas tuyas, con tu contenido, enlazadas entre sí.
  • Una web publicada con dirección propia en internet.
  • La certeza de que esto son archivos de texto en una carpeta.
  • Los deberes del ejercicio 3, que son los que hacen que la próxima sesión cunda.
volverportada del taller siguiente sesión2 · css: cómo se ve extrael muestrario