Estructura básica de una página web

El esqueleto de una página

Una página web es un archivo de texto que el navegador lee y convierte en lo que vos ves. El lenguaje en que se escribe es HTML. Está formado por etiquetas: marcas entre < y > que casi siempre se abren y se cierran.

<html>

  <head>

    <title>Mi liceo</title>

  </head>

  <body>

    <h1>Bienvenidos</h1>

    <p>Somos el grupo de 9.° grado.</p>

  </body>

</html>

Toda página tiene tres etiquetas básicas:

Dentro del <body> se usan etiquetas para dar sentido al texto:

HTML, CSS y JavaScript, tres roles

Una página se arma con tres lenguajes que se reparten el trabajo, como en una casa:

• HTML dice qué hay: un título, un párrafo, una lista.

• CSS dice cómo se ve: colores, tipo de letra, tamaños, márgenes.

• JS (el lenguaje JavaScript) dice qué hace: un botón que responde, un juego, un contador.

Una regla CSS tiene un selector (a qué etiquetas se aplica) y entre llaves las propiedades con sus valores:

h2 {

  color: blue;

  font-size: 24px;

}

Esta regla pinta de azul y con letra de 24 píxeles todos los <h2>. Fijate que en el código los nombres van en inglés y los números decimales con punto.

Hay dos formas de aplicar estilos:

• Archivo aparte, enlazado desde el <head> con <link rel="stylesheet" href="estilos.css">. Se escribe una vez y vale para toda la página (y para todas las páginas del sitio que lo enlacen).

• Dentro de cada etiqueta, por ejemplo <h2 style="color: blue;">. Hay que repetirlo en cada título y, si querés cambiar el color, lo tenés que editar uno por uno.

Imágenes y texto alternativo

Para mostrar una imagen se usa la etiqueta <img>, que no se cierra con otra etiqueta y lleva atributos:

<img src="rambla.jpg" alt="Atardecer en la Rambla de Montevideo con gente tomando mate">

• src es el archivo (o la dirección) de la imagen.

• alt es el texto alternativo: una descripción breve de lo que muestra.

El alt se usa cuando la imagen no carga (mala conexión) y, sobre todo, lo leen en voz alta los lectores de pantalla que usan personas ciegas o con baja visión. Sin alt, esa persona no sabe que hay una imagen ni qué muestra.

<body>

  <h1>Mi proyecto de Tecnología</h1>

  <p>Hicimos un termómetro con Arduino.</p>

  <img src="termometro.png">

</body>

Video y contenido embebido

A veces el contenido no está en tu sitio: un video de YouTube, un mapa, un formulario. Se muestra dentro de tu página con contenido embebido, que se inserta con la etiqueta <iframe> (una ventana a otra página).

<iframe src="https://www.youtube.com/embed/CODIGO" title="Llamadas de Montevideo"></iframe>

Para un video propio también existe <video src="clip.mp4" controls></video>. El atributo title del iframe cumple un papel parecido al alt: describe el contenido.

Ventajas de embeber: no ocupás espacio en tu sitio, el otro servicio se ocupa de reproducirlo bien en cada dispositivo y se mantiene actualizado.

Riesgos y límites: si el sitio original borra el video o se cae, en tu página queda un hueco; necesitás conexión; y el servicio externo puede registrar datos de quienes visitan tu página.

Accesibilidad

Una página es accesible cuando puede usarla la mayor cantidad posible de personas: con discapacidad visual, auditiva, motriz o cognitiva, o con un celular viejo y mala señal. La W3C-WAI y sus pautas WCAG reúnen recomendaciones para lograrlo. Las básicas:

Volvé al principio: Valentina ya sabe que cada símbolo es una etiqueta, que head y body tienen funciones distintas, y que con alt, buen contraste y subtítulos su página la puede usar todo el mundo.

Resumen

• Una página HTML tiene <html>, con <head> (información sobre la página) y <body> (lo que se ve).

• HTML da la estructura, CSS el aspecto y JavaScript el comportamiento.

• Una regla CSS tiene selector y propiedades; en un archivo enlazado vale para toda la página.

• <img src="..." alt="..."> inserta imágenes; el alt describe la imagen para quien no la ve.

• <iframe> embebe videos y mapas: ahorra espacio, pero depende de otro sitio.

• Una página accesible tiene buen contraste, alt, subtítulos y enlaces con texto claro (pautas WCAG).