Blog

HTML. Unidad 8. Vídeo y audio.

Introducción

Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos  <video> y <audio>; luego terminaremos viendo como agregar subtítulos a nuestros videos.

Vídeo y audio en Internet

Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como Flash (y después, Silverlight) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.

Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación HTML5 tenía tales características agregadas, con los elementos <video> y <audio>, y algo nuevo JavaScript APIs para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.

No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos archivos de audio y video de muestra con códigos de ejemplo disponibles en «https://fernandoruizrico.com/test-audio-and-video/» para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.

El elemento <video>

El elemento <video> nos permite incrustar video fácilmente. De la misma manera que para el elemento <img>, el atributo src (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera. Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen  epilepsia). Se debe utilizar el atributo controls para incluir la interfaz de control del browser, o construir la nuestra utilizando la JavaScript API apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen. Un ejemplo muy simple podría ser el siguiente:

<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls></video>

Podemos insertar un párrafo dentro de la etiqueta  <video> (denominado contenido de reserva) — y será mostrado si el navegador desde el que se está accediendo a la página no soporta el elemento <video>, permitiéndonos proveer un «fallback» para navegadores más antiguos. Se puede elegir cualquier contenido para dicho párrafo; en nuestro caso proporcionamos un enlace directo al archivo de vídeo, para que el usuario pueda al menos acceder de alguna manera, independientemente del navegador que esté usando.

<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

Atributos «width» y «height»

Podemos controlar el tamaño del vídeo con estos atributos o con CSS (esta es la opción más recomendable). En ambos casos, los vídeos mantienen su relación anchura – altura nativa. Si la relación de aspecto no se mantiene con los tamaños establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada. Por ejemplo, para establecer la anchura del vídeo a 720px y mantener la relación de aspecto, podemos utilizar un código similar al siguiente:

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Ejercicio propuesto: Película de animación «Caminandes»

Crea una página web con el ejemplo anterior y copia el código tres veces para mostrar el mismo vídeo tres veces en total. Cambia el ancho para establecer un valor diferente para cada vídeo (1080, 720 y 480) y cambia también el atributo src para que corresponda con el de cada vídeo. Finalmente, verifica los resultados en tu navegador (actualiza la página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar su código.

Vídeos:

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_480p.mp4

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

...

El atributo «poster»

Puedes especificar una URL para mostrar una imagen (atributo poster) hasta que el usuario reproduzca el vídeo. Si este atributo no se especifica, no se muestra nada hasta que el primer fotograma esté disponible, momento en el cual se mostrará esa imagen como póster.

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Ejercicio propuesto: Película de animación «Caminandes»

Modifica el código del ejercicio anterior, donde tienes el mismo vídeo con tres tamaños diferentes. Ahora tiene que usar el atributo poster para configurar tres imágenes diferentes (puede encontrar debajo los enlaces a los carteles, que están disponibles en https://fernandoruizrico.com/test-audio-and-video/, o puedes usar otras imágenes que te gusten). Cuando termines, verifica los resultados en tu navegador (actualiza tu página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar tu código.

Posters:

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

...

Compatibilidad con los navegadores

Normalmente se utilizan algunos códecs para comprimir vídeo y audio para conseguir que los archivos sean más manejables, ya que el audio y el vídeo sin procesar son excesivamente grandes. Cada navegador web admite una variedad de códecs, que se utilizan para convertir el audio y el vídeo comprimidos en datos binarios y viceversa. Cada códec ofrece sus propias características positivas y negativas que afectan a las decisiones sobre cuál utilizar. Para maximizar la probabilidad de que tu sitio web o aplicación funcione en el navegador de un usuario, es posible que debas proporcionar cada archivo multimedia en varios formatos. Si tu página web y el navegador del usuario no comparten un formato en común, los ficheros de audio o vídeo simplemente no se reproducirán.

Debemos tener en cuenta un aspecto adicional respecto a este tema: los navegadores móviles pueden admitir formatos adicionales no admitidos por sus equivalentes de escritorio, al igual que es posible que no admitan los mismos formatos que la versión de escritorio. Además de eso, tanto los navegadores de escritorio como los móviles pueden estar diseñados para gestionar la reproducción de medios (ya sea para todos los formatos o solo para tipos específicos que no pueden gestionar internamente). Esto significa que la compatibilidad con los ficheros depende en parte del software que haya instalado el usuario.

Entonces, ¿cómo gestionamos la compatibilidad de formatos? Echa un vistazo al código actualizado del ejemplo:

<video width="1080"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Aquí hemos quitado el atributo src del elemento <video> y en su lugar incluimos elementos separados <source> que apuntan a sus propias fuentes. En este caso el navegador irá a los elementos <source> y reproducirá el primero de los elementos que soporte. En primer lugar intentará reproducir el vídeo utilizando el formato WebM, y si no lo reconoce como válido, entonces intentará reproducir el formato MP4. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los navegadores actuales. Pero en cualquier caso, si el navegador no soporta ninguno de los formatos especificados, también hemos incluido el mensaje de aviso con el enlace correspondiente.

Cada elemento  <source>  también tiene un atributo type . Es opcional, pero se recomienda que se incluyan, ya que contienen MIME types (en-US) de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no soporten. Si no están incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y un consumo de recursos innecesario.

En este artículo sobre soporte de formatos multimedia puedes encontrar algunos de los MIME types (en-US) más comunes.

Ejercicio propuesto: Película de animación «CaminandeS»

Tienes que modificar el código del ejercicio anterior donde tienes tres vídeos que muestran la película animada «Caminandes», cada uno con un tamaño diferente y un póster diferente. Debes insertar ahora un par de elementos fuente para que los tres vídeos contengan enlaces para los códecs webm y mp4 (puedes encontrar los enlaces en el ejemplo que tienes a continuación y también en https://fernandoruizrico.com/test-audio-and -video/). Verifica los resultados en tu navegador y no olvides añadir todas las etiquetas HTML necesarias y validar tu código.

Fíjate que el ancho del vídeo se puede ajustar a través del atributo «width», y también vamos a utilizar el atributo «poster» para establecer la imagen que se mostrará antes de que se reproduzca cada vídeo:
<video width="1080"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Ejercicio propuesto: Película de animación «Sintel»

Crea una nueva página web con el siguiente código para mostrar la película animada «Sintel». Después de eso, duplica el código un par de veces para mostrar tres vídeos en total. Cambia el tamaño de los videos a 1080, 720 y 480 y configura los elementos <source> en consecuencia (elimina también el antiguo atributo src, de modo que obtengas un código similar al que se muestra en el siguiente ejemplo). Finalmente, cambia la imagen del póster para que cada vídeo muestre una imagen diferente cuando se acabe de cargar la página. Puedes encontrar los enlaces a los vídeos y carteles en https://fernandoruizrico.com/test-audio-and-video/, y también aquí:

Vídeos (1080 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv

Vídeos (720 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-720p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-720p.ogv

Vídeos (480 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-480p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-480p.ogv

Pósters:

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/poster.jpg

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/dragon.png

<video 
  width="1080" controls
  poster="https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4"
    type="video/mp4">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv"
    type="video/ogg">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Otras funcionalidades del elemento <video>

Hay varias características adicionales que puedes incluir en un vídeo HTML5. Echa un vistazo al ejemplo que aparece a continuación:

<video controls width="720"
       autoplay loop muted preload="auto" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

El atributo «autoplay»

Este atributo booleano le indica al navegador que el audio o el vídeo deben empezar a reproducirse de inmediato, mientras se carga el resto de la página. Conviene puntualizar que se desaconseja utilizar la reproducción automática ya que los usuarios pueden encontrarlo un poco molesto. Puedes consultar este enlace (autoplay guide) para obtener información adicional sobre cómo usar este atributo de manera adecuada.

El atributo «loop»

Si lo activamos, el vídeo (o audio) comenzará a reproducirse de nuevo cada vez que se acabe. Esta funcionalidad también puede resultar molesta en ocasiones, por lo que se recomienda utilizarlo solo si es realmente necesario.

El atributo «muted»

Este atributo booleano indica la configuración predeterminada del audio contenido en el vídeo. Si está activado, el audio se silenciará inicialmente. Su valor predeterminado es falso, lo que significa que el audio se reproducirá cuando se reproduzca el vídeo.

El atributo «preload»

El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el desarrollador que resultará en una mejor experiencia para el usuario . Puede tener uno de los siguientes valores:

  • «none»: sugiere bien que el desarrollador cree que el usuario no tendrá que consultar el vídeo, o que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que el vídeo no se debe almacenar en caché.
  • «metadata»: sugiere que aunque el autor piensa que el usuario no tendrá que consultar este vídeo, es razonable capturar los metadatos (p. ej. longitud).
  • «auto»: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el vídeo completo, incluso aunque el usuario no vaya a usarlo.
  • la cadena vacía: que es un sinónimo del valor «auto».

Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a «metadata».

Ejercicio propuesto: atributos adicionales

Siguiendo los ejemplos anteriores, crea una nueva página web con tres vídeos cualquiera y establece diferentes valores de los siguientes atributos: «loop», «muted» y «preload». También puedes probar el atributo de reproducción automática, aunque debes tener en cuenta que algunos navegadores pueden tener esta función desactivada. Finalmente verifica los resultados en tu navegador y valida el código.

<video controls width="720"
       loop muted
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

<video controls width="720"
       loop preload="metadata"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Ejercicio propuesto: Tus 10 vídeos preferidos

Crea una página web para mostrar los diez vídeos que más te gusten. Debes establecer al menos los atributos de «width» y «poster» y también el elemento de <source> para asegurarte de que todos se muestren de la manera correcta, como en los ejemplos anteriores.

Puedes encontrar vídeos de ejemplo en los siguientes enlaces: https://senkorasic.com/testmedia/, https://archive.org/details/BigBuckBunny_124, https://archive.org/download/ElephantsDream/, https://tools.woolyss.com/html5-audio-video-tester/, https://test-videos.co.uk/, http://losplayer.com/?page_id=1880, https://dafftube.org/video-links/, https://github.com/mediaelement/mediaelement-files, http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5, https://sample-videos.com/, http://samples.mplayerhq.hu/, https://www.clipcanvas.com/a/video-clip-formats-and-codec-samples, https://peach.blender.org/download/, https://download.blender.org/peach/bigbuckbunny_movies/, https://orange.blender.org/download/, https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content, etc.

El elemento <audio>

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:

<figure>
    <figcaption>Trance 2. Instrumental Background Music.</figcaption>
    <audio
        controls
        src="https://fernandoruizrico.com/examples/test-media/audio/Twisterium-Trance2.wav">
        <p>Your browser doesn't support HTML5 audio. Click <a href="https://fernandoruizrico.com/test-audio-and-video/">here</a>  para poder visualizarlo.</p>
    </audio>
</figure>

<figure>
    <figcaption>Space battle. Space Fantasy Spot Effect.</figcaption>
    <audio
        controls
        src="http://bbcsfx.acropolis.org.uk/assets/07042219.wav">
        <p>Your browser doesn't support HTML5 audio. Click <a href="http://bbcsfx.acropolis.org.uk">here</a> instead.</p>
    </audio>
</figure>

The above example shows simple usage of the <audio> element. In a similar manner to the <img> and <video> elements, we include a path to the media we want to embed inside the src attribute. We can include other attributes to specify information such as whether we want it to loop, whether we want to show the browser’s default audio controls, etc.

As with the <video> tag, the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don’t support the element.

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

  • The <audio> element doesn’t support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
  • It also doesn’t support the poster attribute — again, no visual component.

Ejercicio propuesto: ejemplos de audio

Following the previous example, create a web page to insert at least ten figures containing audio samples. Update the caption of each figure to show a brief description of each audio file, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

You can find thousands of audio samples at: http://bbcsfx.acropolis.org.uk/

El elemento <iframe>

By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we will like to take somewhat of a sideways step, looking at an element that allow you to embed a wide variety of content types into your webpages: the <iframe> element.

Incrustar un vídeo de YouTube

In this section we are going to jump straight into an active learning example to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with Youtube, but many people don’t know about some of the sharing facilities it has available. Let’s look at how Youtube allows us to embed a video in any page we like using an <iframe>:

  1. First, go to Youtube and find a video you like.
  2. Below the video, you’ll find a Share button — select this to display the sharing options.
  3. Select the Embed button and you’ll be given some <iframe> code — copy this.
<figure>
    <figcaption>Nyan Cat [original].</figcaption>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>

Ejercicio propuesto: Tus 10 vídeos de YouTube preferidos

Following the previous example, create a web page to insert at least ten figures containing videos from Youtube. Update the caption of each figure to show a brief description of each video, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

Incrustar un mapa de Google Maps

You will also find quite interesting embedding a Google Map. Let’s see how to do this with an example:

  1. Go to Google Maps and find a map you like.
  2. Click on the «Hamburger Menu» (three horizontal lines) in the top left of the user interface.
  3. Select the Share or embed map option.
  4. Select the Embed map option, which will give you some <iframe> code — copy this.
<figure>
    <figcaption>IES San Vicente.</figcaption>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3126.6024620057733!2d-0.5317505844743932!3d38.4044398796498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6233fea3991575%3A0xf28fcef8c48c1513!2sIES%20San%20Vicente!5e0!3m2!1ses!2ses!4v1601811180214!5m2!1ses!2ses" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</figure>

Ejercicio propuesto: Tus 10 ubicaciones preferidas

Following the previous example, create a web page to insert at least ten figures containing locations from Google Maps. Update the caption of each figure to show a brief description of each location, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

HTML. Unidad 6. Tablas.

Introducción

Esta unidad te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo en el futuro (utilizando CSS).

¿Qué es una tabla?

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un horario, o información sobre diversos países, como se muestra en este ejemplo:

Países Capitales Población Idioma
USA Washington, D.C. 309 millones Inglés
Suecia Estocolmo 9 millones Sueco

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

¿Cómo crear una tabla?

Veamos un ejemplo práctico y construyamos una tabla simple.

1. Hola, soy tu primera celda. 2. Soy tu segunda celda. 3. Soy tu tercera celda. 4. Soy tu cuarta celda.
5. Segunda fila, primera celda. 6. Segunda fila, segunda celda. 7. Segunda fila, tercera celda. 8. Segunda fila, cuarta celda.

Construyamos la tabla paso a paso:

  1. El contenido de cada tabla está delimitado por las etiquetas <table> ... </table>:
<table>
    1. Hola, soy tu primera celda.
    2. Soy tu segunda celda.
    3. Soy tu tercera celda.
    4. Soy tu cuarta celda.
    5. Segunda fila, primera celda.
    6. Segunda fila, segunda celda.
    7. Segunda fila, tercera celda.
    8. Segunda fila, cuarta celda.
</table>
  1. The smallest container inside a table is a table cell, which is created by a <td> element (‘td’ stands for ‘table data’). We will put the contents of each cell inside these tags:
<table>
    <td>1. Hola, soy tu primera celda.</td>
    <td>2. Soy tu segunda celda.</td>
    <td>3. Soy tu tercera celda.</td>
    <td>4. Soy tu cuarta celda.</td>
    <td>5. Segunda fila, primera celda.</td>
    <td>6. Segunda fila, segunda celda.</td>
    <td>7. Segunda fila, tercera celda.</td>
    <td>8. Segunda fila, cuarta celda.</td>
</table>
  1. As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row, and every cell we add makes the row grow longer. To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element (‘tr’ stands for ‘table row’). Let’s do this now (we will wrap each row in an additional <tr> element, with each cell contained in a <td>):
<table>
    <!-- Primera fila -->
    <tr>
        <td>1. Hola, soy tu primera celda.</td>
        <td>2. Soy tu segunda celda.</td>
        <td>3. Soy tu tercera celda.</td>
        <td>4. Soy tu cuarta celda.</td>
    </tr>

    <!-- Segunda fila -->
    <tr>
        <td>5. Segunda fila, primera celda.</td>
        <td>6. Segunda fila, segunda celda.</td>
        <td>7. Segunda fila, tercera celda.</td>
        <td>8. Segunda fila, cuarta celda.</td>
    </tr>
</table>

Importante: Bordes de la tabla

Por defecto, el navegador no mostrará los bordes de las tablas. Para conseguir que se muestren los bordes, usaremos un poco de código CSS. De momento insertaremos el siguiente código en la sección <head> de cada fichero html que creemos (aprenderemos el significado de este código en otra unidad):

<head>
    ...
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    ...
</body>

Ejercicio propuesto: Tablas simples

Crea una nueva página web, copia y pega un par de veces la tabla del ejemplo anterior y cambia el contenido para obtener el siguiente resultado:

Importante: no olvides utilizar el código CSS del encabezado del documento para mostrar los bordes de la tabla.
uno dos tres cuatro
cinco seis siete ocho
uno dos tres
cuatro cinco seis
siete ocho nueve

Tablas con imágenes

Puedes insertar cualquier contenido dentro de las celdas de una tabla. Por ejemplo, imágenes:

<table>
    <tr>
        <td><img src="https://picsum.photos/id/10/300/200" /></td>
        <td><img src="https://picsum.photos/id/1000/200/200" /></td>
    </tr>
    <tr>
        <td><img src="https://picsum.photos/id/1003/200/200" /></td>
        <td><img src="https://picsum.photos/id/1011/300/200" /></td>
    </tr>
</table>

Ejercicio propuesto: Imágenes de prueba

Crea una tabla de dos columnas y al menos diez filas, e inserta varias imágenes, como se muestra en el ejemplo anterior (con bordes). Copia la misma tabla en un archivo nuevo y añade el código CSS necesario para observar el resultados ahora sin bordes.

Puedes usar por ejemplo imágenes que aparecen en «https://picsum.photos/images» . Sólo necesitas escoger una imagen y utilizar el «id» y el «size» correspondiente. Por ejemplo, «https://picsum.photos/id/1/200/200» es la imagen #1 (width=200px and height=200px). O «https://picsum.photos/id/103/300/200» es la imagen #103 (width=300px and height=200px).

Añadiendo encabezados con elementos <th>

Ahora prestemos atención a los encabezados de las tablas. Son celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna. Para ilustrar por qué son útiles, primero echemos un vistazo a la siguiente tabla:

Table without headers
Dog name Breed Age Eating Habits
Knocky Jack Russell 12 Eats everyone’s leftovers
Poppy Poodle 9 Nibbles at food
Buddy Streetdog 10 Hearty eater
Bailey Cocker Spaniel 5 Will eat till he explodes

Como podemos observar, aunque se puede distinguir perfectamente el contenido de la tabla, no resulta tan fácil hacer referencias cruzadas. Si los encabezados de columna y fila destacaran de alguna manera, podríamos interpretar más fácilmente el contenido de las celdas.

Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> (‘th’ significa ‘table header’, encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Si cambiamos todos los elementos <td> de la tabla por elementos <th>, los datos que contienen se verán resaltados por defecto de alguna forma. Por ejemplo:

Table with headers
Dog name Breed Age Eating Habits
Knocky Jack Russell 12 Eats everyone’s leftovers
Poppy Poodle 9 Nibbles at food
Buddy Streetdog 10 Hearty eater
Bailey Cocker Spaniel 5 Will eat till he explodes

En el futuro cambiaremos los estilos de los elementos <td> y <th> utilizando CSS. Por ahora, concentrémonos en el código HTML:

<table>
    <tr>
        <th>Dog name</th>
        <th>Breed</th>
        <th>Age</th>
        <th>Eating Habits</th>
    </tr>
    <tr>
        <th>Knocky</th>
        <td>Jack Russell</td>
        <td>12</td>
        <td>Eats everyone's leftovers</td>
    </tr>
    <tr>
        <th>Poppy</th>
        <td>Poodle</td>
        <td>9</td>
        <td>Nibbles at food</td>
    </tr>
    <tr>
        <th>Buddy</th>
        <td>Street dog</td>
        <td>10</td>
        <td>Hearty eater</td>
    </tr>
    <tr>
        <th>Bailey</th>
        <td>Cocker Spaniel</td>
        <td>5</td>
        <td>Will eat till he explodes</td>
    </tr>        
</table>

Ejercicio propuesto: Paseador de perros

Crea una página web con una tabla similar a la del ejemplo anterior, para guardar la información de todos los clientes de un paseador de perros. Primero debe agregar tres columnas adicionales (para mantener el nombre de los propietarios, sus números de teléfono y las fotos de los perros). Después de eso, debes insertar varias filas para mostrar los datos de al menos diez perros.

En este caso puedes utilizar otro sitio web para obtener imágenes de prueba sobre perros: «https://placedog.net/images«. Accede a esta URL y sigue las instrucciones que aparecen en la parte superior de la página para insertar cada imagen. Por ejemplo:
Dog name Owner Phone number Breed Age Eating Habits Picture
Knocky Fernando Ruiz 111222333 Jack Russell 12 Eats everyone’s leftovers
Poppy John Doe 222333444 Poodle 9 Nibbles at food
Buddy Peter Stark 333444555 Street dog 10 Hearty eater
Bailey Steve Doe 666777888 Cocker Spaniel 5 Will eat till he explodes

Añadir un título a tu tabla con <caption>

Puedes dar un título a tu tabla colocándolo dentro de un elemento <caption> y anidándolo dentro del elemento <table>. Debes ponerlo justo debajo de la etiqueta de apertura <table>:

<table>
  <caption>Dinosaurios en el período Jurásico</caption>

  ...
</table>

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

Ejercicio propuesto: Tabla sencilla con título y encabezados

Crea una página web con una tabla similar a la siguiente e inserta algunas filas adicionales (al menos diez).

Utiliza un elemento <caption> para poner el texto «Tabla simple con encabezados», y utiliza el elemento <th> para los encabezados «Nombre» and «Apellidos» headers.
Tabla simple con encabezados
Nombre Apellidos
John Doe
Fernando Ruiz

Ejercicio propuesto: Lista de países

Crea una tabla con cinco columnas y al menos diez filas, e inserta los datos relacionados con varios países. Puedes enumerar, por ejemplo, los nombres de los países, sus capitales, su población, el idioma y varias imágenes, como hicimos en el ejemplo al principio de la unidad, pero añadiendo una nueva columna para mostrar una imagen. Tienes que usar encabezados de tabla (<th>) y un título (<caption>). Tu tabla se debería parecer a la que se muestra a continuación.

Puedes usar de nuevo la web «https://picsum.photos/images» para coger diversas imágenes que puedan resultar representativas de cada país.
Countries I like
Countries Capitals Population Language Images
USA Washington, D.C. 309 million English
Sweden Stockholm 9 million Swedish

Ampliar las filas y las columnas

Para proporcionar control adicional sobre cómo las celdas se ajustan o se expanden sobre las columnas, podemos usar el atributo colspan en los elementos <th> y <td>. Este atributo nos permitirá especificar cuántas columnas debe ocupar una celda (el valor por defecto es 1). De forma similar, podemos utilizar el atributo rowspan para especificar sobre cuántas filas se extiende una determinada celda.

El siguiente ejemplo muestra una tabla muy sencilla que enumera los nombres de las personas junto con información diversa sobre la membresía en un club. Hay solo cuatro filas (incluida una fila de encabezado), cada una con cuatro columnas (incluida una columna de encabezado):

Name ID Member Since Balance
Margaret Nguyen 427311 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 15.00
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

Añadamos ahora otra columna que muestre la fecha en que finalizó la membresía de un usuario, junto con un encabezado sobre las fechas de «afiliación» y «cancelada» llamada «Fechas de membresía». Esto implica agregar intervalos de filas y columnas a la tabla, de modo que las celdas de encabezado puedan terminar en los lugares correctos. Veamos primero cómo quedaría la tabla:

Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00

Observa que el área de encabezado aquí ocupa en realidad dos filas, una con los encabezados «Nombre», «ID», «Fechas de membresía» y «Saldo», y la otra con los encabezados «Afiliación» y «Cancelado», que son los subtítulos que aparecen debajo de «Fechas de membresía». Esto se logra mediante:

  • Having the first row’s «Name», «ID», and «Balance» heading cells span two rows using the rowspan attribute, making them each be two rows tall.
  • Having the first row’s «Membership Dates» heading cell span two columns using the colspan attribute, which causes this heading to actually be two columns wide.
  • Having a second row of <th> elements that contains only the «Joined» and «Canceled» headings. Because the other columns are already occupied by first-row cells that span into the second row, these wind up correctly positioned under the «Membership Dates» heading.

The HTML is similar to the previous example’s, except for the addition of the new column in each data row, and the changes to the header. Those changes make the HTML look like this:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td><time datetime="2017-04008">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of rowspan to make the «Name», «ID», and «Balance» headers occupy two rows instead of just one, and the use of colspan to make the «Membership Dates» header cell span across two columns.

Ejercicio propuesto: Tu horario

Create a web page to display your school timetable. You should create a table similar to the one below.

Notice that you have to use <th> elements for the headers, and colspan attribute for the BREAKS. You can also use the <strong> element to enhance the subject name in each cell.
Monday Tuesday Wednesday Thursday Friday
07:55h Computer Safety
Peter Williams
Computer Safety
Peter Williams
Computer Safety
Peter Williams
08:50h Network Services
Samuel Holland
Computer Safety
Peter Williams
Network Services
Samuel Holland
Computer Safety
Peter Williams
09:45h Network Operating Systems
Lucy Scott
Network Services
Samuel Holland
Web Applications
Fernando Ruiz
Network Services
Samuel Holland
Network Services
Samuel Holland
10:40h B R E A K
11:00h Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Business and Entrepreneurial Initiative
Rick Harris
Web Applications
Fernando Ruiz
Network Services
Samuel Holland
11:55h Business and Entrepreneurial Initiative
Rick Harris
Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Web Applications
Fernando Ruiz
Web Applications
Fernando Ruiz
12:50h B R E A K
13:10h Network Services
Samuel Holland
Business and Entrepreneurial Initiative
Rick Harris
Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Web Applications
Fernando Ruiz
14:05h Network Services
Samuel Holland
Web Applications
Fernando Ruiz
Network Operating Systems
Lucy Scott

Estructurar la tabla con <thead>, <tbody> and <tfoot>

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con <thead><tfoot> y <tbody>, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

The table header
First cell in the table body Second cell in the table body
<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First cell in the table body</td>
            <td>Second cell in the table body</td>
        </tr>
    </tbody>
</table>

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

Para utilizar todos estos elementos solo debes tener en cuenta las siguientes consideraciones:

  • El elemento <thead> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos <col>/<colgroup>, el encabezado de la tabla debe estar justo debajo.
  • El elemento <tfoot> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).
  • El elemento <tbody> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.

Los elementos <thead> +<tbody>

Añadamos por ejemplo los elementos <thead> y <tbody> a la tabla de los miembros del club:

Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</td>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</td>
      <td>533175</td>
      <td><time datetime="2011-01013">January 13, 2011</time></td>
      <td><time datetime="2017-04008">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</td>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Ejercicio propuesto: Miembros de un club

Crea una página web para mostrar una lista con los miembros de un club, tal como lo hemos hecho en el ejemplo anterior. Puede usar el mismo código fuente que se explicó anteriormente, pero debes añadir un par de columnas: una para escribir la dirección de correo electrónico de cada miembro y la otra para mostrar sus fotos. También debes añadir varias filas a la tabla para que contenga al menos diez miembros del club (puede usar nombres, fechas y saldos aleatorios).

Los elementos <thead> +<tbody> +<tfoot>

Let’s put all these new elements into action with another table, where we will use all possible sections (<thead>, <tbody> and <tfoot>). Have a look at the following example:

How I chose to spend my money
Purchase Location Date Evaluation Cost (€)
SUM 118
Haircut Hairdresser 12/20 Great idea 30
Lasagna Restaurant 12/20 Regrets 18
Shoes Shoeshop 13/20 Big regrets 65
Toothpaste Supermarket 13/20 Good 5

We must put the obvious headers row inside a <thead> element, the «SUM» row inside a <tfoot> element, and the rest of the content inside a <tbody> element. You’ll see that adding the <tfoot> element has caused the «SUM» row to go down to the bottom of the table. And finally we will add a colspan attribute to make the «SUM» cell span across the first four columns, so the actual number appears at the bottom of the «Cost» column:

<table>
    <caption>How I chose to spend my money</caption>
    <thead>
        <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">SUM</td>
            <td>118</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/20</td>
            <td>Great idea</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/20</td>
            <td>Regrets</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/20</td>
            <td>Big regrets</td>
            <td>65</td>
        </tr>
        <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/20</td>
            <td>Good</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

Ejercicio propuesto: Cómo gastar tu dinero

Crea una página web para especificar cómo gastarías tu dinero. Puedes usar el mismo código fuente que en el ejemplo anterior, pero debes realizar los siguientes cambios: agrega varias filas con cualquier cosa que te gustaría hacer (al menos diez filas), y finalmente en la columna «Ubicación» debes usar imágenes en lugar de texto.

Puedes acceder de nuevo a la página web «https://picsum.photos/images» para obtener imágenes de tus sitios preferidos.

Ejercicio propuesto: Títulos

Añade títulos a las tablas que has creado anteriormente y que aún no tienen ningún título. No olvides volver a validar tu código.

Ejercicio propuesto: Estructura de tabla

Añade secciones de encabezado, pie y cuerpo a todas las tablas que hayas creado en ejercicios anteriores y aún no tengan esas secciones. No olvides volver a validar tu código.

HTML. Unidad 10. Formularios avanzados.

Cómo estructurar un formulario HTML

Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario. La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas y completas en HTML, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y accesibilidad adecuadas.

El elemento <form>

Tal como explicamos en la unidad anterior, el elemento <form> se utiliza para definir un formulario y los atributos que determinan el comportamiento su comportamiento. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos <form> e implementar códigos de apoyo (hooks) especiales para que sean más fáciles de usar.

Es posible usar controles de formulario fuera de un elemento <form>. Si lo haces, por defecto ese control no tendrá nada que ver con ningún formulario específico, a menos que lo asocies a algún formulario con el atributo form. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.

A continuación vamos a exponer los elementos estructurales que puedes utilizar en un formulario.

Los elementos <fieldset> y <legend>

El elemento <fieldset> es una forma cómoda de crear grupos de controles de formulario (también denominados widgets) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento <fieldset> incluyendo un elemento <legend> justo debajo de la etiqueta de apertura <fieldset>. El contenido textual del elemento <legend> describe formalmente el propósito del elemento <fieldset> que está incluido dentro.

For maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list.  Each individual pair of <label>/<input> elements should be contained in its own list item (or similar). The associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>. See the examples in the previous unit for structural examples.

Muchas tecnologías de asistencia utilizarán el elemento <legend> como si fuera una parte de la etiqueta de cada control dentro del elemento <fieldset> correspondiente. Por ejemplo, algunos lectores de pantalla como Jaws y NVDA leerán el contenido de la leyenda antes de decir la etiqueta de cada control.

Here is a little example:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <label><input type="radio" name="size" value="small" />Small</label>
    </p>
    <p>
      <label><input type="radio" name="size" value="medium" />Medium</label>
    </p>
    <p>
      <label><input type="radio" name="size" value="large" />Large</label>
    </p>
  </fieldset>
</form>
Fruit juice size

Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.

El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento <fieldset>. Hay otros casos de uso y el elemento <fieldset> también se puede usar en general para seccionar un formulario. Idealmente, si un formulario se alarga mucho , colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.

Proposed exercise: Drink and hamburger

Using the code of the previous example, create a web page to choose the size of both a drink and a hamburger, each one inside a different <fieldset> with the corresponding <legend>. Also, as done before, the user should be able to choose among three different sizes: small, medium and large:

Drink

Hamburger

A form with sections

Beyond the structures specific to web forms, it’s good to remember that form markup is just HTML. This means that you can use all the power of HTML to structure a web form. As you can see in the examples, it’s common practice to wrap a label and its widget with a <p> element within. Lists are also recommended for structuring multiple checkboxes or radio buttons.

In addition to the <fieldset> element, it’s also common practice to use HTML titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure complex forms. Above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. Each separate section of functionality should be contained in a separate <section> element, with <fieldset> elements to contain radio buttons.

Let’s put these ideas into practice and build a slightly more involved form — a payment form. This form will contain more control types than the previous example. Read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

  1. First, we will create the form by adding the outer <form> element:
<form>
    ...
</form>
  1. Inside the <form> tags, we will add a heading and paragraph to inform users how required fields are marked:
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>
  ...
</form>
  1. We’ll also add a simple <button> of type submit, at the bottom of the form, for submitting the form data:
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>
  ...
  <p><button type="submit">Validate the payment</button></p>
</form>
  1. Next we’ll add a larger section of code into the form, below our previous entry. Here you’ll see that we are wrapping the contact information fields inside a distinct <section> element. Moreover, we have a set of three radio buttons, each of which we are putting in a new line. We also have two standard text <input> and their associated <label> elements, each contained inside a <p>, and a password input for entering a password:
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>

  <section><fieldset>
    <legend><h2>Contact information</h2></legend>

    <fieldset>
      <legend>Title</legend>
      <label><input type="radio" name="title" value="mr" />Mr</label><br />
      <label><input type="radio" name="title" value="mrs" />Mrs</label><br />
      <label><input type="radio" name="title" value="miss" />Miss</label><br />
    </fieldset>

    <p><label>Name: <input type="text" name="name" required /> *</label></p>
    <p><label>E-mail: <input type="email" name="email" required /> *</label></p>
    <p><label>Password: <input type="password" name="password" required /> *</label></p>
  </fieldset></section>

  ...

  <p><button type="submit">Validate the payment</button></p>
</form>
  1. The second <section> of our form is the payment information. We have three distinct controls along with their labels, each contained inside a <p>. The first is a drop-down menu (<select>) for selecting credit card type. The second is an <input> element of type tel, for entering a credit card number; while we could have used the number type, we don’t want the number’s spinner UI. The last one is an <input> element of type date, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers.
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>

  <section><fieldset>
    <legend><h2>Contact information</h2></legend>
    <fieldset>
      <legend>Title</legend>
      <label><input type="radio" name="title" value="mr" />Mr</label><br />
      <label><input type="radio" name="title" value="mrs" />Mrs</label><br />
      <label><input type="radio" name="title" value="miss" />Miss</label> <br />
    </fieldset>
    <p><label>Name: <input type="text" name="name" required /> *</label></p>
    <p><label>E-mail: <input type="email" name="email" required /> *</label></p>
    <p><label>Password: <input type="password" name="password" required /> *</label></p>
  </fieldset></section>

  <section><fieldset>
    <legend><h2>Payment information</h2></legend>

    <p><label>Card type:
      <select name="card_type">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </label></p>

    <p><label>Card number: <input type="tel" name="card_number" required /> *
    </label></p>

    <p><label>Expiration date: <input type="date" name="expiration" required /> *
    </label></p>
  </fieldset></section>

  <p><button type="submit">Validate the payment</button></p>
</form>

Ejercicio propuesto: Formulario de pago

Utilizando el código del ejemplo anterior, crea un formulario de pago más sofisticado. Dentro de la sección «Información de contacto», debes añadir un grupo de botones de opción para que el usuario pueda seleccionar su estado (ya sea «Estudiante», «Profesor» u «Otro») y un nuevo campo de texto para introducir el número de teléfono. Y dentro de la sección «Información de pago» tienes que añadir una nueva casilla de selección para que el usuario pueda elegir el tipo de pago preferido (ya sea «Tarjeta de crédito» o «Paypal») y un nuevo campo de correo electrónico para introducir la cuenta Paypal:

FORMULARIO DE PAGO (Los campos obligatorios se han marcado con *)

Información de contacto
Profesión


Tratamiento






Información de pago






A real example: search engine forms

Searching for text

Let’s now create a simple form which will provide all necessary data (a simple text) to be passed to some of the most known search engines:

<form action="https://google.com/search" method="GET">
  <label>Google: <input type="text" name="q" required /></label>
  <button type="submit">Search</button>
</form>
...
<form action="https://duckduckgo.com/" method="GET">
  <label>DuckDuckGo: <input type="text" name="q" required /></label>
  <button type="submit">Search</button>
</form>
...
<form action="https://bing.com/search" method="GET">
  <label>Bing: <input type="text" name="q" required /></label>
  <button type="submit">Search</button>
</form>

You will notice that when you press the submit button, the query (q parameter) is included in the url, and this way the search engine will know what to search. For example, if we are searching the word «dogs» on Google, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog.

Proposed exercise: Text search

Using the example of the form above to search information on Google, DuckDuckGo and Bing, develop a web page similar to the one below to search information on several search engines (at least five).

The only difference from one form to another is the value of the action attribute («https://google.com/search», «https://duckduckgo.com/», «https://bing.com/search», «https://www.ecosia.org/search», «https://search.givewater.com/serp», etc.). This address can be guessed by having a look at the url when you are using each particular search engine.

TEXT SEARCH

Searching for images

Now we will change the code a little bit so that the results provided by the search engines are images instead of text. In some cases we only need to change the action attribute, but sometimes we have to add some additional fields:

<form action="https://google.com/search" method="GET">
  <label>Gooogle: <input type="text" name="q" required /></label>
  <input type="hidden" name="tbm" value="isch" />
  <button type="submit">Search</button>
</form>
...
<form action="https://duckduckgo.com/" method="GET">
  <label>DuckDuckGo: <input type="text" name="q" required /></label>
  <input type="hidden" name="iax" value="images" />
  <input type="hidden" name="ia" value="images" />
  <button type="submit">Search</button>
</form>
...
<form action="https://search.givewater.com/serp" method="GET">
  <label>giveWater: <input type="text" name="q" required /></label>
  <input type="hidden" name="qc" value="images" />
  <button type="submit">Search</button>
</form>

You will notice that when you press the submit button, those hidden fields (which are not entered by the user) are included automatically in the url so that the search engine knows that has to show images instead of text. This way, in this example we are passing two parameters: q (the search string) and tbm (to search for images). For example, if we are searching for images about dogs on Google, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog&tbm=isch.

Proposed exercise: Image search

Using the code of the previous exercise, develop a new web page to search for images on several search engines (at least five).

To search for images using Bing and Ecosia, you only have to use the right value for the action attribute («https://bing.com/images/search», «https://www.ecosia.org/images»). You only have to use the hidden fields for Google (tbm), DuckDuckGo (iax, ia) and giveWater (qc), as done in the example above. Both the addresses and the hidden fields can be guessed by having a look at the url when you are using each particular search engine.

IMAGE SEARCH

Choosing between text and image search

Now let’s concentrate on Google’s search engine and let’s go one step forward to add a checkbox to give the user the option to choose between searching for text or images:

<form action="https://google.com/search">
  <label>Google: <input type="text" name="q" required /></label>
  <label>Search for images <input type="checkbox" name="tbm" value="isch" /></label>
  <button>Search</button>
</form>

Proposed exercise: Text or images

Develop a web page to search either text or images on Google and giveWater search engines. You have to provide the user with a checkbox so that can easily change from one type to another:

TEXT SEARCH

Filtering the results

Finally let’s concentrate again on Google’s search engine to add several controls so that the user can filter the results when searching for images. We will also add a reset button to set the default values:

<form action="https://google.com/search" method="GET">
  <p>Search: <input type="text" name="q" class="big" required /></p>

  <fieldset>
    <legend>Size</legend>
    <select name="tbs"> 
      <option selected disabled>Any size</option>
      <option value="isz:l">Large</option>
      <option value="isz:m">Medium</option>
      <option value="isz:i">Icon</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Color</legend>        
    <select name="tbs"> 
      <option selected disabled>Any color</option>
      <option value="ic:color">Color</option>
      <option value="ic:gray">Black and white</option>
      <option value="ic:trans">Transparent</option>
   </select>
  </fieldset> 
  <fieldset>       
    <legend>Type</legend>        
    <select name="tbs"> 
      <option selected disabled>Any type</option>
      <option value="itp:clipart">Clip art</option>
      <option value="itp:lineart">Line drawing</option>
      <option value="itp:animated">GIF</option>
    </select>
  </fieldset>  
  <fieldset>     
    <legend>Date</legend>        
    <select name="tbs"> 
      <option selected disabled>Any date</option>
      <option value="qdr:d">Past 24 hours</option>
      <option value="qdr:w">Past week</option>
    </select>
  </fieldset> 
  <fieldset>       
    <legend>License</legend>        
    <select name="tbs"> 
      <option selected disabled>Any license</option>
      <option value="il:cl">Creative commons</option>
      <option value="il:ol">Commercial and other</option>
    </select>
  </fieldset>

  <input type="hidden" name="tbm" value="isch" />

  <button type="reset">Reset</button>
  <button type="submit">Search</button>
</form>

As you will see, we have added many options to set different values for a parameter called «tbs» (we have guessed this parameter and all its possible values by looking at the url when searching for any information on Google). This way, in this example we are passing three parameters: q (the search string), tbm (to search for images) and tbs (to filter the results). For example, if we are searching for GIF images about dogs, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog&tbm=isch&tbs=itp:animated.

Also you will notice that inside each <select> element we are using a default option: <option selected disabled>...</option> so that by default, none of the available options are selected and the results are not filtered.

Proposed exercise: Filtering images with dropdown boxes

Using the code of the previous example, develop a web page to search for images on Google and filter the results using several dropdown boxes:

Search:

Size
Color
Type
Date
License

Proposed exercise: Filtering images with radio buttons

Create a new web page to search for images on Google and filter the results using radio buttons:

Search:

Size Large
Medium
Icon
Color Color
Black and white
Transparent
Type Clip art
Line drawing
GIF
Date Past 24 hours
Past week
License Creative commons
Commercial and other

HTML. Unidad 9. Formularios.

Introducción

Esta unidad proporciona instrucciones y ejemplos que te ayudarán a aprender los conceptos básicos de los formularios web, que son una de las principales herramientas para interactuar con los usuarios. Por lo general, se utilizan para recopilar datos o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. En las secciones que se enumeran a continuación, cubriremos todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, la validación de los datos del formulario y el envío de datos al servidor.

¿Qué son los formularios web?

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (puedes consultar Enviar los datos de un formulario para más detalles), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).

El código HTML de un formulario web está compuesto por uno o más controles de formulario (a veces llamados widgets), además de algunos elementos adicionales que ayudan a estructurar el formulario general (a menudo se los conoce como formularios HTML). Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento <input>, aunque hay algunos otros elementos que también hay que conocer.

Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.

Campos de un formulario

En las próximas secciones crearemos formularios web funcionales. Para ello presentaremos primero algunos controles de formulario y elementos estructurales comunes, y nos centramos también en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o widgets, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este sección en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.

El elemento <label>

El elemento <label> nos permite definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:

<label>
  Nombre: <input type="text" name="nombre" />
</label>

Existe otra forma de asociar un control de formulario con una etiqueta. Un elemento <label> también se pueden asociar correctamente con un elemento <input> por su atributo for (que contiene el atributo id del elemento <input>):

<label for="nombre">
  Nombre: <input type="text" name="nombre" id="nombre" />
</label>

El resultado en ambos casos será el mismo:

Nombre:

Con la etiqueta <label> asociada correctamente con <input> por su atributo for (que contiene el atributo id del elemento <input>), un lector de pantalla leerá algo como «Nombre, editar texto». Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.

¡También se puede hacer clic en las etiquetas!

Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.

Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación cereza:

<label>
  <input type="checkbox" name="cereza" value="cereza" />
  Me gustan las cerezas
</label><br />
<label>
  <input type="checkbox" name="platano" value="platano" />
  Me gustan los plátanos
</label><br />


Campos de entrada de texto

Los campos de texto <input> son los controles de formulario más básicos, y permiten al usuario introducir cualquier tipo de datos. Pueden tomar muchas formas diferentes según el valor de su atributo type. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, y también controles sin introducción de texto, como casillas de verificación, selectores de opción y selectores de color, e incluso botones.

Todos los controles de texto básicos comparten algunos comportamientos comunes:

  • Se pueden marcar como readonly (el usuario no puede modificar el valor de entrada, pero este se envía con el resto de los datos del formulario) o disabled (el valor de entrada no se puede modificar y nunca se envía con el resto de los datos del formulario).
  • Pueden tener un placeholder: se trata de un texto que aparece dentro de la caja de entrada de texto y que se usa para describir brevemente el propósito de la caja de texto.
  • Pueden presentar una limitación de tamaño (el tamaño físico de la caja de texto) y de la extensión máxima (el número máximo de caracteres que se pueden poner en la caja de texto).
  • Permiten corrección ortográfica (utilizando el atributo spellcheck), si el navegador la admite.

Debemos tener en cuenta que los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una edición enriquecida (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.

Campos de texto de una sola línea

Un campo de texto de una sola línea se crea utilizando un elemento <input> cuyo valor de atributo type se establece en text, u omitiendo por completo el atributo type (text es el valor predeterminado). El valor text de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo type (por ejemplo, si especificas type="color" y el navegador no está dotado en origen de un control de selección de colores).

Veamos este ejemplo en el que aparecen un par de campos de texto de una sola línea:

<label>
  Nombre (de 5 a 10 caracteres):
  <input type="text" name="nombre" required
         minlength="5" maxlength="10" size="15" 
         placeholder="Escriba aquí su nombre">
</label><br />
<label>
  Comentario:
  <input type="text" name="comentario" required
         placeholder="Escriba aquí su comentario">
</label><br />


HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo type que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos más adelante, y también puedes encontrar más información en el siguiente enlace: Los tipos de entrada en HTML5.

Campo de contraseña

Uno de los tipos de entrada originales era el tipo de campo de texto password:

<label>
  Contraseña: <input type="password" name="contrasena">
</label>

El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.

Ten en cuenta que esto sólo se aplica a nivel de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección https://), de modo que los datos se cifren antes de enviarse.

Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo Contraseñas inseguras.

Campos de texto de varias líneas

El elemento <textarea> representa un control de edición de texto de varias líneas, útil cuando deseas permitir que los usuarios introduzcan una cantidad considerable de texto, por ejemplo, un comentario de una revisión o en un formulario de contactar:</p>

<label>Cuéntanos tu historia:
  <textarea name="historia" rows="5">
    Era una noche oscura y tormentosa...
  </textarea>
</label>

Puede usar los atributos rows y cols para especificar el tamaño exacto para el campo <textarea>. Establecer estos a veces es una buena idea para mantener la coherencia, ya que los valores predeterminados del navegador pueden diferir. También estamos usando un contenido predeterminado (el que aparece entre las etiquetas de apertura y cierre), ya que <textarea> no admite el atributo value, tal como veremos en la próximo sección.

El elemento <textarea> también acepta algunos atributos comunes de los que también disponen los elementos <input>, tales como autocomplete, autofocus, disabled, placeholder, readonly, and required.

Valores por defecto en los cuadros de texto

A continuación vamos a exponer una de las rareas que presenta HTML respecto a la sintaxis de <input> en contraposición con la de <textarea></textarea>. La etiqueta <input> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. Sin embargo, el elemento <textarea> no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que se define el valor predeterminado. Para definir el valor por defecto de un elemento <input>, debemos usar el atributo value de esta manera:

<input type="text" value="por defecto este elemento se llena con este texto">

Por otro lado, si queremos definir un valor predeterminado para un elemento <textarea>, debemos colocarlo entre las etiquetas de apertura y cierre del elemento <textarea>, de esta forma:

<textarea>
Por defecto, este elemento contiene este texto
</textarea>

Casillas de verificación y botones de opción

Los elementos de selección (o checkable items, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o check boxes) y los botones de opción (o radio buttons). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.

Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.

Casillas de verificación

Las casillas de verificación se crean estableciendo el atributo type del elemento <input> con el valor checkbox. Los elementos de este tipo se suelen representar como casillas que se marcan al activarse, como las que se pueden ver en muchos formularios oficiales en papel. La apariencia exacta depende de la configuración del sistema operativo en el que se ejecuta el navegador. Generalmente se trata de un cuadrado, pero puede tener esquinas redondeadas. Una casilla de verificación permite seleccionar diversas opciones para enviarlas en un formulario.

Veamos y probemos un ejemplo muy simple:

<label>
  <input type="checkbox" name="zanahorias" value="zanahorias" checked />
  ¿Te gustan las zanahorias?
</label>

Al incluir el atributo checked, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.

Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un ejemplo (y también puedes observar el código fuente).

Botones de opción

Un botón de opción se crea estableciendo el atributo type del elemento <input> en el valor radio. Los elementos de este tipo se utilizan generalmente en grupos (colecciones de botones del mismo tipo que describen un conjunto de opciones relacionadas). Solo se puede seleccionar un botón de opción en un grupo determinado al mismo tiempo. Los botones de opción se representan normalmente como círculos pequeños, que se rellenan o resaltan cuando se seleccionan.

Veamos el código fuente de un ejemplo simple que contiene varios botones de opción y cómo lo representa un navegador:

¿Cuál es tu comida favorita?<br />
<label>
  <input type="radio" name="comida" value="sopa" checked="" />Sopa
</label><br />
<label>
  <input type="radio" name="comida" value="curry" />Curry
</label><br />
<label>
  <input type="radio" name="comida" value="pizza" />Pizza
</label><br />
¿Cuál es tu comida favorita?



Como hemos visto en este último ejemplo, es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo name, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.

El elemento <select>

El elemento select (<select>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos <option>, los cuales pueden ser agrupados por elementos <optgroup>. Además, una determinada opción puede estar preseleccionada al cargarse la página.

Veamos el siguiente ejemplo de código y cómo lo representa el navegador:

<label>Escoge la mascota que más te guste:
  <select name="mascota" id="mascota">
    <option value="">--Selecciona una opción--</option>
    <option value="perro">Perro</option>
    <option value="gato">Gato</option>
    <option value="hamster">Hamster</option>
    <option value="loro">Loro</option>
    <option value="arana">Araña</option>
    <option value="pez">Pez</option>
  </select>
</label>

El ejemplo anterior muestra el uso típico del elemento <select>. Lo asociamos con una etiqueta <label> con fines de accesibilidad y utilizamos el atributo name para representar el nombre del campo que se enviará al servidor. Cada opción de menú está definida por un elemento <option> anidado dentro del <select>.

Cada elemento <option> debe tener un atributo value que contenga el valor para enviar al servidor cuando se seleccione esa opción. Si no se incluye ningún atributo value, el valor predeterminado es el texto contenido dentro del elemento. Puedes incluir un atributo selected en un elemento <option> para que se seleccione de forma predeterminada cuando se carga la página por primera vez.

El elemento <select> tiene algunos atributos únicos que puedes usar para personalizarlo. Por ejemplo, con el atributo multiple especificas si se pueden seleccionar varias opciones y con el atributo size puedes especificar cuántas opciones deben mostrarse a la vez. También se aceptan muchos atributos genéricos tales como requireddisabledautofocus, etc.

Por último, conviene mencionar que se pueden anidar varios elementos <option> dentro de <optgroup> para crear grupos separados de opciones dentro del menú desplegable.

Selector de archivos

Hay un último tipo de <input>: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo Enviar los datos del formulario). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.

Para crear un control de selección de archivos, podemos utilizar el elemento <input> con su atributo type establecido en file. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo accept. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo multiple.

En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. En este caso, el usuario puede seleccionar múltiples archivos:

<input type="file" name="file" accept="image/*" multiple="" />

En algunos dispositivos móviles, el control de selección de archivos permite acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo. Para ello basta con añadir información de captura al atributo accept de la manera siguiente:

<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

Botones

El botón de opción no es realmente un botón, a pesar de su nombre. A continuación echaremos un vistazo a los controles de formulario que son botones propiamente. La etiqueta de HTML <button> representa un elemento de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón simple y estándar para iniciar una acción al pulsar sobre él. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, pero estos estilos se pueden cambiar fácilmente utilizando CSS.

El comportamiento por defecto de un botón se puede cambiar mediante el atributo type. Los posibles valores que podemos utilizar son:

  • submit: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si el atributo no se especifica para los botones asociados con el formulario o si el atributo contiene un valor vacío o no válido.
  • reset: El botón restablece todos los controles a sus valores iniciales. Debería usarse solo cuando sea necesario, ya que puede provocar que un usuario pierda los datos que acaba de introducir.
  • button: El botón no tiene un comportamiento predeterminado y no hace nada cuando se presiona de manera predeterminada. Utilizando código JavaScript podemos iniciar diversas acciones para responder a los eventos que genere este elemento.

Veamos algunos tipos de botones con un ejemplo sencillo:

<p>
  <label>Introduce un comentario: <input type="text" name="comentario" required="" /></label>
</p>
<p>
  <button type="submit">Este es un botón de tipo "submit"</button>
</p>
<p>
  <button type="reset">Este es un botón de tipo "reset"</button>
</p>
<p>
  <button type="button">Este es un botón de tipo "button"</button>
</p>

Como puedes ver en los ejemplos, los elementos <button> te permiten usar código HTML entre las etiquetas <button> de apertura y cierre. Los elementos <input>, por otro lado, son elementos vacíos; el contenido que muestran está limitado al atributo value y, por lo tanto, solo aceptan contenido de texto sin formato.

Ejercicio propuesto: Campos básicos

Crea una página web para mostrar ejemplos de los elementos de tipo «input» de esta unidad: texto de una sola línea y de varias líneas, contraseña, casillas de verificación y botones de radio, lista desplegable con opciones y selector de archivos. Debes incluir al menos un ejemplo de cada uno de ellos. Debes usar párrafos y etiquetas, y también el atributo «required» y otras posibles restricciones que se puedan aplicar a cada uno de ellos. Verifica el resultado en tu navegador y no olvides incluir todas las etiquetas HTML básicas y validar tu código. Por último, verifica el resultado en tu teléfono móvil.

Nota: Coloca todas las etiquetas dentro de un contenedor <form> y usa un botón de tipo «submit» para verificar que los campos estén validados correctamente. Puedes utilizar un código similar a este:
<form>
  <p><label>
    Nombre: <input type="text" name="nombre" required="" />
  </label></p>
  <p><label>
    Apellidos: <input type="text" name="apellidos" required="" />
  </label></p>
  <p><label>
    Contraseña: <input type="password" name="contrasena1" required="" />
  </label></p>
  <p><label>
    Repite la contraseña: <input type="password" name="contrasena2" required="" />
  </label></p>
  ...
  <p><button>Enviar</button></p>
</form>

Campos nuevos en HTML5

En la sección anterior vimos el elemento <input> y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de entrada nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos.

Campo de dirección de correo electrónico

Este tipo de campo se define utilizando el valor  email en el atributo type del elemento <input>:

<label>
  Introduce un correo electrónico válido: 
  <input type="email" name="correo" placeholder="[email protected]" required="" />
</label>

Cuando se utiliza este valor type, se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en el siguiente ejemplo:

Puedes utilizar también el atributo multiple en combinación con el tipo input email para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:

<label>
  Múltiples correos electrónicos: <input type="email" name="correos" multiple="" />
</label>

En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería desplegarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @.

Campo URL

Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo type:

<label>
  Introduce una URL:
  <input type="url" name="url" placeholder="https://..." required="" />
</label>

Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como http: o  https:), o si de algún modo la URL es claramente incorrecta. Debemos tener en cuenta que solo porque la URL tenga un formato correcto, no significa necesariamente que la dirección al que hace referencia exista. Puedes hacer pruebas con el siguiente ejemplo:

En dispositivos con teclados dinámicos a menudo se mostrarán por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.

Campo número de teléfono

Se puede crear un campo especial para introducir números de teléfono utilizando tel como valor del atributo type:

<label>
  Introduce un número de teléfono:
  <input type="tel" name="telefono" placeholder="123 456 789" />
</label>

Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type="tel", lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.

Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no establece ningún tipo de restricción sobre el valor introducido por el usuario (esto significa que permite incluir letras, etc…). Se puede utilizar el atributo pattern para establecer restricciones (puedes consultar más información sobre este atributo en Validación de formulario en el lado cliente).

Campo numérico

Se pueden crear controles para introducir números con el type number de <input>. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.

Con el tipo de input number  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos min y  max. También puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.

Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.

<input type="number" name="edad" min="1" max="10" step="2" value="1" />

El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01:

<input type="number" name="cambio" min="0" max="1" step="0.01" value="0" />

El tipo de input number tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido (por ejemplo los códigos postales de USA, cuyo rango va de 00001 a 99999), entonces sería una mejor opción utilizar el tipo tel: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.

Controles deslizantes

Otra forma de introducir un número es usando un slider. Habrás observado bastantes controles parecidos en webs donde por ejemplo se tiene que establecer un precio máximo para realizar una compra y se solicita realizar un filtro por dicho campo. Vamos a observar un ejemplo:

Escoge un precio máximo:

En cuanto al uso, los controles deslizantes son menos precisos que los campos de texto. Por lo tanto, se utilizan para elegir un número cuyo valor exacto no es necesariamente importante.

Un control deslizante o barra de desplazamiento se crea usando el <input> con el valor  range en el atributo type. El deslizador se puede mover con el ratón, también utilizando dispositivos táctiles, o con las flechas del teclado.

Es importante configurar correctamente este campo, y con ese propósito es muy recomendable utilizar los atributos minmaxstep, que establecen los valores mínimo, máximo y de incremento, respectivamente.

Veamos el código fuente correspondiente al ejemplo anterior, para que puedas ver cómo se consigue dicho resultado. En primer lugar, el código HTML básico:

<form>
  <p>Escoge un precio máximo:</p>
  <input type="range" name="barra"
         min="50000" max="500000" step="100" value="250000"
         oninput="numero.value = this.value" />
  <input type="number" name="numero"
         min="50000" max="500000" step="100" value="250000"
         oninput="barra.value = this.value" />
</form>

Este ejemplo crea un control deslizante cuyo valor puede oscilar entre 50000500000, que aumenta / disminuye de 100 en 100. En este caso hemos asignado el valor predeterminado de 250000, usando el atributo value.

Un inconveniente que presentan los controles deslizantes es que no ofrecen ningún tipo de retroalimentación visual sobre cuál es el valor actual. Por eso hemos incluido un elemento <input> para mostrar (o también cambiar) el valor actual. 

Selectores de fecha y hora

La recopilación de valores de fecha y hora ha sido desde siempre una pesadilla para los desarrolladores web. Para una buena experiencia de usuario, es importante proporcionar una interfaz que permita seleccionar directamente una fecha sobre un calendario, sin necesidad de cambiar de contexto a una aplicación de calendario nativa o a otra aplicación que utilice diferentes formatos que sean difíciles de analizar. Por ejemplo, el último minuto del milenio anterior se puede expresar de las siguientes formas diferentes, por ejemplo: 1999/12/31, 23:59 o 12/31/99T11:59PM.

Los controles de fecha HTML están disponibles para manejar este tipo específico de datos, proporcionando widgets de calendario y haciendo que los datos sean uniformes.

Para crear un campo de tipo fecha utilizamos el elemento <input> y un valor apropiado para el atributo type, dependiendo de si deseas recopilar fechas, horas o ambos. Aquí puedes observar un ejemplo (si el navegador no aceptara alguno de estos tipos, utilizaría un elemento alternativo que permita la introducción mediante texto):

<p><label>
  Fecha y hora local: <input type="datetime-local" name="fechayhora" />
</label></p>
<p><label>
  Mes: <input type="month" name="mes">
</label></p>
<p><label>
  Hora: <input type="time" name="hora">
</label></p>
<p><label>
  Semana: <input type="week" name="semana">
</label></p>




Todos los controles de fecha y hora se pueden restringir usando los atributos minmax, con una mayor restricción posible a través del atributo step (cuyo valor varía según el tipo de entrada):

<label>
  ¿Cuándo es tu cumpleaños?
  <input type="date" name="fecha" min="1975-01-01" max="2025-12-31" step="1" />
</label>

Selector de color

Los colores también suelen ser difíciles de manejar. Hay muchas formas de expresarlos: valores RGB (decimal o hexadecimal), valores HSL, palabras clave, etc.

Se puede crear un control de tipo color utilizando el elemento <input> con su atributo type con valor color:

<label>
  Selecciona una color: <input type="color" name="color" />
</label>

Si el navegador admite este tipo de campo, al hacer clic en él se utilizará la funcionalidad de elección de color predeterminada del sistema operativo. Puedes observar el resultado con el siguiente ejemplo:

Campo de búsqueda

Los campos de búsqueda se utilizan para crear cajas de búsqueda en páginas web y aplicaciones. Este tipo de campo se define utilizando el valor  search en su atributo type:

<input type="search" name="buscar" placeholder="Buscar" required="" />

La diferencia principal entre un campo text y un campo search, es el estilo que el navegador aplica a uno u otro. A menudo los campos search se muestran con bordes redondeados; y a veces también se muestra una «Ⓧ», para limpiar el campo de cualquier valor cuando se pulsa sobre él. Además, en dispositivos con teclado dinámico, la tecla enter del teclado suele mostrar un icono de lupa.

Otra característica que vale la pena señalar es que se pueden guardar los valores de un campo search automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.

Ejercicio propuesto: Campos HTML5

Crea una página web para mostrar todos los elementos de esta última sección: correo electrónico, url, número de teléfono, campo numérico, control deslizante, fecha y hora, selector de color y campo de búsqueda. Debes incluir al menos un ejemplo para cada uno de ellos. Debes usar párrafos y etiquetas, y también el atributo «required» y otras restricciones según el campo del que se trate. Comprueba el resultado en tu navegador y no olvides incluir todas las etiquetas HTML básicas y validar el código. Por último, comprueba el resultado también en tu teléfono móvil.

Coloca todas las etiquetas dentro de un contenedor <form> y usa un botón de tipo «submit» para comprobar que los campos se validan correctamente:
<form>
  <p><label>
    Correo principal: <input type="email" name="correo1" required="" />
  </label></p>
  <p><label>
     Otro correo: <input type="email" name="correo2" required="" />
  </label></p>
  <p><label>
     Tu página web: <input type="url" name="web1" required="" />
  </label></p>
  <p><label>
    Página web de tu instituto: <input type="url" name="web2" required="" />
  </label></p>
  ...
  <p><button>Enviar</button></p>
</form>

Atributos comunes

Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:

Nombre del atributoValor por defectoDescripción
autofocusfalseEste atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.
disabledfalseEste atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, <fieldset>. Si el elemento que lo contiene no tiene el atributo establecido en disabled, el elemento está habilitado.
formEl elemento <form> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo id de un elemento <form> del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.
nameEl nombre del campo que se envía con los datos del formulario.
valueEl valor inicial del campo.

Un primer formulario «real»

En esta sección crearemos un formulario web completo y funcional. Diseñaremos un formulario sencillo con los campos adecuados y otros elementos HTML, y explicaremos cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.

Diseñar el formulario

Antes de comenzar a escribir código, siempre es mejor tomarse el tiempo necesario para pensar cómo queremos que sea nuestro formulario. Diseñar una maqueta rápida nos ayudará a definir el conjunto de datos adecuado que debemos pedirle al usuario. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es un formulario, más te arriesgas a frustrar a las personas que lo usen. Un formulario tiene que ser simple y conciso, y por ello deberíamos solicitar solo los datos que necesitemos.

Diseñar formularios es un paso importante cuando creamos un sitio web o una aplicación. Va más allá del alcance de este sección exponer esto en detalle, pero si deseas profundizar en ese tema, puedes leer los siguientes artículos

En esta sección vamos a crear un formulario de contacto sencillo. Observemos un posible borrador:

Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.

Implementando nuestro formulario

Vamos a proceder ahora a escribir el código HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: <form>, <label>, <input>, <textarea> y <button>.

El elemento <form>

Todos los formularios comienzan con un elemento <form>, como este:

<form action="contactar.php" method="get">

</form>

Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento <section> o <footer>, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:

  • El atributo action define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
  • El atributo method define con qué método HTTP se envían los datos (generalmente get o post).

Veremos cómo funcionan esos atributos más adelante.

Los elementos <label>, <input> y <textarea>

Nuestro formulario de contacto no es complejo en absoluto: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento <label> correspondiente:

En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:

<form action="contactar.php" method="GET">
  <p>
    <label>Nombre: <input type="text" name="nombre" required="" /></label>
  </p>
  <p>
    <label>Correo: <input type="email" name="correo" required="" /></label>
  </p>
  <p>
    <label>Mensaje: <textarea name="mensaje" required=""></textarea></label>
  </p>
</form>

Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Puedes encontrar más detalles sobre las etiquetas de los formularios en Cómo estructurar un formulario web.

En el elemento <input>, el atributo más importante es type, ya que define la forma en que el elemento <input> aparece y se comporta. Puedes encontrar más información sobre esto en el artículo sobre Controles de formularios nativos básicos.

  • En nuestro ejemplo, usamos el valor <input/text> para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.
  • Para la segunda entrada, usamos el valor <input/email>, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Puedes encontrar más información sobre la validación de formularios en el artículo de Validación de formularios por parte del cliente.

El elemento <button>

El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento <button>; basta con añadir lo siguiente justo encima de la etiqueta de cierre </form>:

<button type="submit">Enviar mensaje</button>

Como hemos explicado anteriormente, el elemento <button> también acepta el atributo type, que a su vez acepta uno de estos tres valores: submitreset o button:

  • Un clic en un botón submit (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo action del elemento <form>.
  • Un clic en un botón reset restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.
  • Un clic en un botón button no hace… ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.

Enviando datos al servidor web

La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento <form> define dónde y cómo enviar los datos gracias a los atributos action y method.

Proporcionamos un nombre (name) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, permiten que el servidor acceda a cada dato utilizando su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.

Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo name en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos el código fuente de nuestro formulario:

<form action="contactar.php" method="GET">
  <p>
    <label>Nombre: <input type="text" name="nombre" required="" /></label>
  </p>
  <p>
    <label>Correo: <input type="email" name="correo" required="" /></label>
  </p>
  <p>
    <label>Mensaje: <textarea name="mensaje" required=""></textarea></label>
  </p>
  <p>
    <button type="submit">Enviar mensaje</button>
  </p>
</form>

En nuestro ejemplo, el formulario envía tres datos denominados «nombre», «correo» y «mensaje». Esos datos se envían a la URL «contactar.php» utilizando el método GET de HTTP.

En el lado del servidor, la secuencia de comandos de la URL «contactar.php» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos demasiado en esta sección, pero intentaremos completar nuestro ejercicio para que sea completamente funcional. También puedes consultar el artículo Enviar los datos de un formulario.

Validación de formulario en la parte del cliente

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario.

La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.

Si accedes a cualquier sitio web que incluya un formulario de registro observarás que se muestran comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:

  • «Este campo es obligatorio» (No se puede dejar este campo en blanco).
  • «Introduzca su número de teléfono en el formato xxx-xxx-xxx» (Se requiere un formato de datos específico para que se considere válido).
  • «Introduzca una dirección de correo electrónico válida» (los datos que introdujiste no están en el formato correcto).
  • «Su contraseña debe tener entre 8 y 30 caracteres y contener una letra mayúscula, un símbolo y un número». (Se requiere un formato de datos muy específico para tus datos).

Esto se llama validación de formulario. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor. En esta sección nos centraremos en la validación en el lado del cliente.

Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.

Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente, pero recapitulamos aquí:

  • required: Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.
  • minlength y maxlength: Especifican la longitud mínima y máxima de los datos de texto (cadenas).
  • min y max: Especifican los valores mínimo y máximo de los tipos de entrada numéricos.
  • type: Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico. 
  • pattern: Especifica una expresión regular que define un patrón que los datos que se introduzcan deben seguir.

Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.

Cuando un elemento es válido, se cumplen los aspectos siguientes:

  • El elemento coincide con la pseudoclase :valid de CSS, lo que te permite aplicar un estilo específico a los elementos válidos.
  • Si el usuario intenta enviar los datos, el navegador envía el formulario siempre que no haya nada más que lo impida (por ejemplo, JavaScript).

Cuando un elemento no es válido, se cumplen los aspectos siguientes:

  • El elemento coincide con la pseudoclase :invalid de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, :out-of-range– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.
  • Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.
A tener en cuenta…

Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:

  • Queremos obtener los datos correctos en el formato correcto. Nuestras aplicaciones no funcionarán correctamente si los datos de nuestros usuarios se almacenan en el formato incorrecto, son incorrectos o se omiten por completo.
  • Queremos proteger los datos de nuestros usuarios. Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.
  • Queremos protegernos a nosotros mismo. Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación (puedes consultar Seguridad del sitio web).

Por todo ello debemos tener en cuenta que la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva. Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidorasí como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor (puedes leer Seguridad en los sitios web para conocer más detalles).

Nosotros no entraremos en detalle ahora sobre cómo implementar la validación en el lado del servidor, ya que está fuera del alcance de esta unidad, pero debemos tenerlo en cuenta.

En el lado del servidor: Recuperando los datos

Sea cual sea el método HTTP que elijamos, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave/valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que utilicemos y de las estructuras específicas que utilicemos.

PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que hayamos utilizado el método GET, el ejemplo que utilizaremos en las secciones siguientes cogerá los datos y los guardará en un fichero. Por supuesto, lo que se hace con los datos depende de nosotros. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

Por motivos de sencillez y posibilidad de realizar pruebas en muchos entornos, utilizaremos PHP para completar nuestros ejemplos y conseguir que sean funcionales.

El método GET

El método GET es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: «Hey servidor, quiero conseguir este recurso.» En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.

Echando un vistazo a nuestro formulario de contacto, y teniendo en cuenta que hemos utilizado el método GET, cuando enviemos el formulario, veremos que los datos aparecen en la URL (en la barra de direcciones del navegador). Por ejemplo, si introducimos «Fernando» como nombre de usuario, «[email protected]» como dirección de correo electrónico y «Hola» como mensaje, y pulsamos el botón «Enviar», deberíamos ver algo como esto en la barra de direcciones: «contactar.php?nombre=Fernando&[email protected]&message=Hola«.

Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( ?) seguido de los pares de nombre / valor, cada uno separado por un signo ( &). En nuestro caso estamos enviando los siguientes datos al servidor:

  • nombre, que tiene el valor «Fernando»
  • correo, que tiene el valor «[email protected]»
  • mensaje, que tiene el valor «Hola»
Ejercicio propuesto: Formulario de contactar

Crea una nueva página web con un formulario de contactar, utilizando el código del ejemplo anterior. Debería obtener algo similar al formulario que tienes a continuación. Comprueba el resultado en tu navegador y valida el código. También intente enviar los datos pulsando el botón y verifica la URL que aparece en la barra de direcciones. Finalmente, ajusta la longitud mínima y máxima de los campos de texto utilizando los valores que consideres adecuados para asegurarte de que los datos del formulario sean correctos antes de enviarlos al servidor.

Ten en cuenta que si pulsas el botón enviar, irás a la página «contactar.php», que aún no está implementada. En este punto obtendrás un error, pero podrás ver toda la información en la URL, ya que estamos usando el método GET.

Ejercicio propuesto: Guardar datos de contacto

Continuemos con nuestro ejemplo PHP para guardar nuestros datos del formulario de contacto. Crea un archivo «contactar.php» con el siguiente código. Sube el formulario y el código PHP a tu servidor y prueba el ejemplo completo del formulario de contacto para verificar que los mensajes se van guardando en el servidor. Diles también a tus compañeros que prueben la página web y verifiquen que los datos que han introducido también están guardados.

<?php
  // La variable global $_GET nos permite acceder a los datos enviados con el método GET
  $nombre = $_GET['nombre'];
  $correo = $_GET['correo'];
  $mensaje = $_GET['mensaje'];

  // Colocamos todos los datos en el archivo "mensajes.csv" en una nueva línea cada vez
  file_put_contents("mensajes.csv", "$nombre,$correo,$mensaje\n", FILE_APPEND);

  // Mostramos un enlace a la página anterior y también al archivo para comprobar el resultado
  echo "<p>Datos guardados</p>";
  echo "<p>Haz click <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para ir a la página anterior</p>";
  echo "<p>Haz click <a href='mensajes.csv' target='_blank'>aquí</a> para ver todos los mensajes</p>";
?>
Ejercicio propuesto: Formulario para saludar

Crea una nueva página web con un formulario similar al siguiente, comprobando el resultado en el navegador y validando el código. Pulsa el botón enviar y eche un vistazo a la barra de direcciones del navegador. Después de eso, introduce otros datos diferentes a los valores predeterminados, presione el botón Enviar de nuevo y verifique que la nueva URL contenga la información correcta. Finalmente, cambia el valor predeterminado de ambos campos de texto («Hola» y «Mamá») para usar otros valores y comprueba el resultado nuevamente.

Ten en cuenta que si presionas el botón enviar, irá a la página «saludos.php», que aún no está implementada. En este punto obtendrás un error, pero verás toda la información en la URL, ya que estamos usando el método GET.
<form action="saludos.php" method="GET">
  <p>
    <label>
      ¿Qué quieres decir para saludar?: <input name="saludo" value="Hola" required="" />
    </label>
  </p>
  <p>
    <label>
      ¿A quién se lo quieres decir?: <textarea name="persona" required="">Mamá</textarea>
    </label>
  </p>
  <p>
    <button>Enviar el saludo</button>
  </p>
</form>
Ejercicio propuesto: Guardar texto genérico

Continuemos con nuestro código PHP para guardar nuestros datos del formulario para saludar. Crea un archivo «saludar.php» con el código que aparece a continuación. Graba el formulario y el código PHP en el servidor y graba el ejemplo completo del formulario para comprobar que ahora los saludos ahora se guardan en el servidor. También diles a tus compañeros que prueben la página web y verifiquen que los datos que han introducido también estén guardados.

Observarás las similitudes respecto al ejemplo anterior. Solo hemos cambiado las variables ($saludo y $persona) y el nombre del archivo donde se guardan los datos («saludos.csv»).
<?php
  // La variable global $_GET nos permite acceder a los datos enviados con el método GET
  $saludo = $_GET['saludo'];
  $persona = $_GET['persona'];

  // Colocamos todos los datos en el archivo "saludos.csv" en una nueva línea cada vez
  file_put_contents("saludos.csv", "$saludo,$persona\n", FILE_APPEND);

  // Mostramos un enlace a la página anterior y también al archivo para comprobar el resultado
  echo "<p>Datos guardados</p>";
  echo "<p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para volver a la página anterior</p>";
  echo "<p>Haz clic <a href='saludos.csv' target='_blank'>aquí</a> para ver todos los saludos</p>";
?>

El método POST

El método POST es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: «Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado.» Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP. Es más seguro que el método GET, ya que cuando el formulario se envía mediante el método POST, ninguna otra persona que se encuentre cerca puede ver los datos. Este método se recomienda, por ejemplo, para ser utilizado en formularios donde se envía una contraseña.

Veamos el siguiente ejemplo, que es bastante similar al formulario en la sección GET anterior, pero con el atributo de método establecido en POST y el tipo de campo establecido en «password»:

<form action="login.php" method="POST">
  <p>
    <label>Usuario: <input type="text" name="usuario" required="" /></label>
  </p>
  <p>
    <label>Contraseña: <input type="password" name="contrasena" required="" /></label>
  </p>
  <p>
    <button>Comprobar usuario y contraseña</button>
  </p>
</form>
Ejercicio propuesto: Formulario de login

Crea una nueva página web con un formulario de inicio de sesión, utilizando el código del ejemplo anterior. Deberías obtener un resultado similar al que se muestra a continuación. Comprueba el resultado en tu navegador y valida el código. A continuación intenta enviar los datos pulsando el botón y observa si hay alguna información en la URL. Finalmente, establece la longitud mínima del campo de texto del usuario en 5 y la máxima en 10, y haz lo mismo para el campo de contraseña.

Ten en cuenta que si pulsas el botón enviar, irás a la página «login.php», que aún no está implementada. En este punto obtendrás un error, pero no verás ninguna información en la URL, ya que estamos usando el método POST.

Ejercicio propuesto: Comprobar datos privados

Continuemos con nuestro código PHP para comprobar el usuario y la contraseña del formulario de inicio de sesión. Crea un archivo «login.php» con el siguiente código. Sube el formulario y el código PHP a tu servidor y prueba tu ejemplo completo del formulario de inicio de sesión para comprobar el usuario («admin») y la contraseña («1234»). También dile a tus compañeros que prueben tu página web. Después de eso, cambia la contraseña del archivo «login.php» y pide a tus compañeros que intenten adivinar la nueva contraseña. Debes usar una contraseña muy simple de entre las que aparecen en «https://en.wikipedia.org/wiki/List_of_the_most_common_passwords» (de lo contrario, es posible que tus compañeros no puedan adivinarla).

Observarás las similitudes respecto al ejemplo anterior. Solo hemos cambiado las variables ($usuario y $contrasena) y hemos utilizado una condición para mostrar una imagen con el pulgar hacia arriba o hacia abajo, dependiendo de si la contraseña es correcta o no.
<?php
  // La variable global $_POST nos permite acceder a los datos enviados con el método POST
  $usuario = $_POST['usuario'];
  $contrasena = $_POST['contrasena'];

  // Comprueba el usuario y la contraseña
  if ($usuario == "admin" && $contrasena == "1234") {
      echo "<img src='https://raw.githubusercontent.com/twbs/icons/main/icons/hand-thumbs-up.svg' width='100' />";
      echo "<p>¡Perfecto! :-)</p><p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para ir a la página anterior</p>";
  }
  else {
      echo "<img src='https://raw.githubusercontent.com/twbs/icons/main/icons/hand-thumbs-down.svg' width='100' />";
      echo "<p>¡Usuario o contraseña incorrectos! :-(</p><p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para probar de nuevo</p>";
  }
?>

CSS. Unidad 6. Flexbox.

¿Por qué flexbox?

Durante mucho tiempo, las únicas herramientas fiables para crear diseños CSS con una alta compatibilidad entre navegadores, fueron los elementos flotantes y el posicionamiento. Cumplen su propósito, pero tienen una funcionalidad bastante limitada.

Con tales herramientas resulta difícil, si no imposible, lograr obtener un diseño de página sencillo y flexible que cumpla con unos requisitos como los siguientes:

  • Centrar verticalmente un bloque de contenido dentro de su elemento padre.
  • Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.
  • Hacer que todos los elementos en una distribución de columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.

Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de distribución de elementos dentro de la página.

Un ejemplo sencillo

En esta unidad te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. En el siguiente ejemplo verás que tenemos un elemento <header> con un encabezado de nivel superior en él, y un elemento <section> que contiene tres elementos <article>. Los usaremos para crear una distribución bastante habitual de tres columnas:

<header>
  <h1>Comunidad Valenciana</h1>
</header>

<section>
  <article>
    <h2>Alicante</h2>
    <p>El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.</p>
  </article>

  <article>
    <h2>Valencia</h2>
    <p>Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.</p>
  </article>

  <article>
    <h2>Castellón</h2>
    <p>La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.</p>
  </article>
</section>
html {
  font-family: sans-serif;
}

body {
   margin: 0;
}

header {
  background: purple;
  height: 75px;
}

h1 {
  text-align: center;
  color: white;
  line-height: 75px;
  margin: 0;
}

article {
  padding: 1%;
  margin: 1%;
  background: aqua;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Ejercicio propuesto: Distribución simple de cajas

Usando el código del ejemplo anterior, crea una nueva página web con un contenido similar. Puedes utilizar el texto que quieras y los colores y fuentes que más te gusten.

Especificar qué elementos serán cajas flexibles

Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de display en el elemento padre de los elementos que deseas editar. En este caso, queremos distribuir los elementos <article>, por lo que lo activaremos la propiedad correspondiente en el elemento <section> (que se convierte en un contenedor flexible):

section {
  display: flex;
}

Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra distribución en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este.

Para dejarlo un poco más claro, vamos a observar detenidamente el resultado. El elemento al que le hemos dado un valor de display de flex actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. También podemos usar un valor de display de inline-flex si queremos que los elementos secundarios de un elemento sean elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.

Ejercicio propuesto: Cajas flexibles

Añade al ejercicio anterior el código CSS necesario para que todo el contenido dentro del elemento <section> se muestre como cajas flexibles (display: flex) que se muestran de izquierda a derecha, todas ellas con la misma altura.

Como hemos explicado antes, solo tienes que añadir tres líneas de código y ¡solucionado! Dispondrás de cajas flexibles:
section {
  display: flex;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

El modelo flexible

Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:

  • El eje principal (main axis) es el eje en el que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio principal (main start) y final principal (main end).
  • El eje transversal (cross axis) es el eje perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio transversal (cross start) y extremo cruzado (cross end).
  • El elemento padre que tiene establecido display: flex (el elemento <section> en nuestro ejemplo) se llama contenedor flexible.
  • Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan elementos flexibles (son los elementos <article> de nuestro ejemplo).

¿Filas o columnas?

A los elementos flexbox les podemos aplicar una propiedad llamada flex-direction que especifica en qué dirección aparece el eje principal, o lo que es lo mismo, en qué dirección estarán dispuestos los elementos hijo de un elemento flexbox. Por defecto, está establecido en el valor row, por lo que se presentan en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).

Ejercicio propuesto: Distribución en una columna

Añade al ejercicio anterior el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna (flex-direction: column), de forma similar a la distribución que teníamos antes de aplicar el código CSS.

Bastará con utilizar unas pocas líneas de código CSS:
section {
  display: flex;
  flex-direction: column;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Orden inverso

También puedes distribuir elementos flexibles en una dirección inversa utilizando los valores row-reverse y column-reverse.

Ejercicio propuesto: Distribución en fila en orden inverso

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en la misma fila, pero en orden inverso (flex-direction: row-reverse).

Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
section {
  display: flex;
  flex-direction: row-reverse;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Ejercicio propuesto: Distribución en columna en orden inverso

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna, pero en orden inverso (flex-direction: column-reverse).

Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
section {
  display: flex;
  flex-direction: column-reverse;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Ajustar las columnas al tamaño del contenedor

Un problema que surge cuando tienes una cantidad fija de ancho o alto es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y no se ajustan al diseño de nuestra página. Echa un vistazo al ejemplo de este enlace (donde vemos que los elementos hijo se pueden llegar a salir de su contenedor), o fíjate en el resultado que se observa a continuación, donde el ancho de cada columna es muy reducido:

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ejercicio propuesto: Establecer el tamaño de cada columna

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> tengan un ancho fijo de 200px.

Una forma de conseguir esto fácilmente es añadir una propiedad más (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño (flex:200px) para ser aplicada al elemento <article>:
section {
  display: flex;
  flex-wrap: wrap;
}
article {
  ...
  flex: 200px;
}

Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.

Ejercicio propuesto: Establecer el número de columnas por fila

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en dos columnas.

Una forma de conseguir esto fácilmente es utilizar la propiedad correspondiente (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño especificando el porcentaje (flex:48%) para ser aplicada al elemento <article>:
section {
  display: flex;
  flex-wrap: wrap;
}
article {
  ...
  flex: 48%;
}

Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ejercicio propuesto: Orden inverso en cada fila

Partiendo del código anterior, cambia el valor de tu propiedad flex-direction a row-reverse. Ahora verás que todavía tienes tu distribución en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés:

section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ejercicio propuesto: Añadir imágenes y sombras

Usando el código del último ejemplo anterior, añade tres ciudades más (para mostrar al menos 9 ciudades en total) y también inserta una imagen por cada una. Añade sombras al texto y a las cajas y también puedes cambiar los colores y el texto a tu gusto.

El resultado podría ser similar al siguiente (con ancho fijo o con porcentaje):

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

The city is notorious for its music festivals, among which we find: the Tanned Tin music festival for alternative music, the Benicàssim’s International Festival, the Arenal Sound and the Rototom Sunsplash Festival, known for its reggae music.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

The city is notorious for its music festivals, among which we find: the Tanned Tin music festival for alternative music, the Benicàssim’s International Festival, the Arenal Sound and the Rototom Sunsplash Festival, known for its reggae music.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Alineación horizontal y vertical

También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo (puedes mirar el resultado aquí), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda. Si miramos el código HTML, observaremos que simplemente tenemos 5 botones dentro de un bloque <div>:

<div>
    <button>Smile</button>
    <button>Laugh</button>
    <button>Wink</button>
    <button>Shrug</button>
    <button>Blush</button>
</div>

Si aplicamos algo de código CSS, por ejemplo, utilizando la propiedad align-items podremos controlar dónde se ubican los ejemplos flexibles del eje transversal:

  • Por defecto, el valor es stretch, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.
  • El valor center mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal.
  • También puedes tener valores como flex-start y flex-end, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta align-items para conocer todos los detalles al respecto.

Por otro lado, también podemos modificar el valor de la propiedad justify-content  para controlar dónde se ubican los elementos flexibles sobre el eje principal:

  • El valor por defecto es flex-start, que coloca todos los elementos al comienzo del eje principal.
  • Puedes usar flex-end para que se coloquen al final.
  • center también es un valor de justify-content (para alinear contenido), que coloca los elementos flexibles sobre el centro del eje principal.
  • El valor space-around puede resultar muy útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.
  • Hay otro valor, space-between, que es muy similar a space-around, pero no deja espacio en los extremos.

Ejercicio propuesto: Alineación vertical y distribución uniforme

Partiendo del código anterior de los cinco botones, cambia el valor de las propiedades align-items  y justify-content como se indica a continuación. Cambia además el tamaño del bloque <div>, la fuente del texto y añade también alguna sombra al elemento <div> y a los botones y actualiza el contenido del navegador para observar el resultado.

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

CSS. Unidad 5. El modelo de cajas.

Introducción

Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear unos elementos con otros. En esta unidad echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños más complejos entendiendo cómo funciona y llegando a conocer la terminología relacionada.

¿Qué es el modelo de cajas CSS?

El modelo de cajas CSS define cómo funcionan las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página.

Partes de una caja

Al definir una caja de tipo bloque en CSS tenemos los siguientes elementos:

  • El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
  • El relleno de la caja (o padding box): El relleno es el espacio en blanco alrededor del contenido. Es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
  • El borde de la caja (o border box): El borde de la caja envuelve el contenido y el relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
  • El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde, así como el espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.

El diagrama siguiente muestra estas capas:

En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

Observemos por ejemplo la caja que viene definida por el siguiente código CSS, que establece los valores para las propiedades widthheightmarginborder, y padding:

.caja {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.

El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.

Ejercicio propuesto: Jugando con el modelo de cajas

En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase definida en CSS que establece los valores de las propiedades width, height, margin, border y padding. Utilizando ese código, crea una página web con cinco cajas diferentes, cada una con diferentes estilos. Tienes que cambiar también el color del texto (puedes elegir los colores que más te gusten). Y finalmente añade algunas sombras al texto usando diferentes estilos y colores.

Puedes consultar los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Código CSS:

.caja1 {
  border: 5px solid red;
  background-color: lightgray;
  padding: 10px;
  margin: 25px;
  width: 250px;
  height: 200px;
  ...
}

.caja2 {
  border: 7px solid green;
  background-color: gray;
  padding: 5px;
  margin: 0px;
  width: 300px;
  height: 200px;
  color: white;
  ...
}

...

Código HTML:

<div class="caja1">Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.</div>
<div class="caja2">Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.</div>
...

Y el resultado:

Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.
Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.

Márgenes, relleno y bordes

En el ejemplo anterior ya has visto cómo usar las propiedades marginpadding y border. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.

Vamos a explorar estas propiedades más detalladamente.

Margen

El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.

Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar:

Ejercicio propuesto: Márgenes personalizados

Crea una página web con el ejemplo que tienes a continuación y cambia los valores de los márgenes para ver cómo se desplazan las cajas debido a que el margen crea o elimina espacio (si es un margen negativo) entre este elemento y el elemento contenedor. Finalmente, añade tres cajas más con cualquier estilo que desees dentro del mismo contenedor.

.contenedor {
  border: 5px solid red; 
}

.caja1 {
  border: 5px solid green;
  margin-top: 10px;
  margin-left: 10px;
  width: 50%;
}

.caja2 {
  border: 5px solid blue;
  margin-top: 10px;
  margin-left: 50px;
  width: 50%;
}

.caja3 {
  border: 5px solid orange;
  margin-top: 10px;
  margin-left: 100px;
  width: 50%;
}
...
<div class="contenedor">
  <div class="caja1">Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor</div>
  <div class="caja2">Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor</div>
  <div class="caja3">Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor</div>
  ...
</div>
Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor
Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor
Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor

Relleno

El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.

Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad padding, o para cada lado uno de los lados usando las propiedades equivalentes:

Ejercicio propuesto: Padding personalizado

Si cambias los valores para el relleno de las clases «.caja» del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja. También puedes cambiar el relleno en la clase «.contenedor», que ampliará el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y aumentará el espacio entre su borde y lo que esté dentro del elemento. Crea una página web con el siguiente código y añade tres cuadros más con diferentes rellenos y estilos.

.caja1 {
  border: 5px solid red;
  margin: 10px;
  ...
}

.caja2 {
  border: 5px solid blue;
  margin: 10px;
  padding: 25px;
  ...
}

.caja3 {
  border: 5px solid green;
  margin: 10px;
  padding: 50px;
  ...
}
...
<div class="caja1">
  Esta es una caja sin relleno
</div>
<div class="caja2">
  Esta es una caja con 25px de relleno
</div>
<div class="caja3">
  Esta es una caja con 50px de relleno
</div>
...
Esta es una caja sin relleno
Esta es una caja con 25px de relleno
Esta es una caja con 50px de relleno

Bordes

El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.

Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.

Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.

Para establecer las propiedades de cada lado de forma individual, puedes utilizar:

Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:

Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:

Ejercicio propuesto: Bordes personalizados

En el siguiente ejemplo hemos utilizado varios métodos abreviados y largos para diseñar los bordes. Crea una nueva página web con ese código y combina las diferentes propiedades para comprobar cómo funcionan. Finalmente, añade tres cajas más y configura los estilos de borde como más te guste.

Puedes echar un vistazo a las páginas de MDN (enlazadas arriba) para obtener información sobre los diferentes estilos de borde que puedes elegir. También puedes echar un vistazo a los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
.caja1 {
  border-top: 5px dotted green;
  border-right: 5px dashed orange;
  border-bottom: 5px dotted red;
  border-left: 5px dashed blue;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  ...
}

.caja2 {
  border: 5px solid black;
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-color: aqua;
  border-bottom-color: pink;
  padding: 15px;
  text-align: center;
  ...
}

.caja3 {
  border: 2px solid black;
  padding: 10px;
  ...
}

...
<div class="caja1">Esta es una caja con diferentes tipos de bordes</div>
<div class="caja2">Esta es otra caja con diferentes tipos de bordes</div>
<div class="caja1">
  <div class="caja2">Esta es una caja con diferentes tipos de bordes dentro de otra caja</div>
</div>
<div class="caja3">
  <div class="caja3">
    <div class="caja3">
      <div class="caja3">
        <div class="caja3">
          <div class="caja3">
            Estas son cajas dentro de cajas
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
...
Esta es una caja con diferentes tipos de bordes
Esta es otra caja con diferentes tipos de bordes
Esta es una caja con diferentes tipos de bordes dentro de otra caja
Estas son cajas dentro de cajas

CSS. Unidad 2. Estilos de texto y fuente de letra.

Introduction

Here we’ll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

What is involved in styling text in CSS?

The CSS properties used to style text generally fall into two categories, which we’ll look at separately in this unit:

  • Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
  • Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.

Bear in mind that the text inside an element is all affected as one single entity. You can’t select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>, for example).

Font color

Let’s move straight on to look at properties for styling fonts. In this section we’ll apply some different CSS properties to the same HTML sample.

The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property):

p {
  color: red;
}

Proposed exercise

Create a new web page made of 2 files: one HTML file with the code below, and another one with some CSS code to change the <h1> and <p> elements to any color you like. Do not forget to link the CSS file from the HTML file, and validate your code.

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>

Font families

To set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:

p {
  font-family: arial;
}

This would make all paragraphs on a page adopt the arial font, which is found on any computer.

Default fonts

CSS defines five generic names for fonts:  serifsans-serifmonospacecursive and fantasy. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serifsans-serif and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.

The five names are defined as follows (you will find below some examples about how they look like):

  • serif: Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces).
  • sans-serif: Fonts that don’t have serifs.
  • monospace: Fonts where every character has the same width, typically used in code listings.
  • cursive: Fonts that are intended to emulate handwriting, with flowing, connected strokes.
  • fantasy: Fonts that are intended to be decorative.
  • This is serif
  • This is sans-serif
  • This is monospace
  • This is cursive
  • This is fantasy

Proposed exercise: Default fonts

Using the code of the previous exercise, copy and paste the paragraphs several times (5 in total) and define some classes to apply all default fonts (serif, sans-serif, monospace, cursive, fantasy). You must set a different font and color each time. Your source code and the result should look something like this:

HTML code:

<h1>Tommy the cat</h1>

<p class="serif">Well I remember it as though it were a meal ago...</p>
<p class="serif">Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>

...

<p class="fantasy">Well I remember it as though it were a meal ago...</p>
<p class="fantasy">Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>

CSS code:

.serif {
    font-family: serif;
    color: blue;
}

...

.fantasy {
    font-family: fantasy;
    color: green;
}

And the result:

Tommy the cat

Well I remember it as though it were a meal ago…

Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

Well I remember it as though it were a meal ago…

Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

Web safe fonts

Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.

Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).

The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):

  • Arial (sans-serif)
  • Courier New (monospace)
  • Georgia (serif)
  • Times New Roman (serif)
  • Trebuchet MS (sans-serif)
  • Verdana (sans-serif)

Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.

Proposed exercise: Main safe fonts

Create a new web page with a header (<h1>) and six other paragraphs (<p>) with any content you like, and set a different font for each of them (Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana). You can also change the color of the text too.

Font names that have more than one word (like Trebuchet MS) need to be surrounded by quotes, for example:
font-family: "Trebuchet MS";

Font stacks

Since you can’t guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. This simply involves a font-family value consisting of multiple font names separated by commas, e.g.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.

It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser’s default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!

Proposed exercise: More safe fonts and font stacks

Create a new web page with a header and five other paragraphs with any content you like, and set a different font for each of them, but this time you cannot use any font used previously: you must select some other fonts from cssfontstack.com. Moreover, in this exercise you have to use font stacks to ensure at least one font is always available, and you can also change the color too. Finally, check your web page using several browsers from several devices and operating systems, to make sure that all fonts are shown.

If you are changing the color and the font family using font stacks, your CSS and HTML code should look like this:
.font-book {
  color: blue;
  font-family: "Book Antiqua", Arial, sans-serif;
}
<p class="font-book"> ... </p>

Using an online font service

Online font services generally store and serve fonts for you, so you don’t have to worry about the font availability, and generally you just need to insert a simple line or two of code into your site to make everything work. Examples include Adobe Fonts and Cloud.typography. Most of these services are subscription-based, with the notable exception of Google Fonts, a useful free service, especially for rapid testing work and writing demos.

Most of these services are easy to use, so we won’t cover them in great detail. Let’s have a quick look at Google fonts, so you can get the idea. These are the steps that you have to follow to use one or several of the fonts they provide:

  1. Go to Google Fonts.
  2. You may use the filters to display the kinds of fonts you like.
  3. To select a font family, click on it, and after that press the «+ Select this style» option on the right hand side.
  4. When you’ve chosen the font families, press the «View your selected families» icon at the top right corner of the page.
  5. In the resulting screen, you first need to copy the line of HTML code shown and paste it into the head of your HTML file. Put it above the existing <link> element, so that the font is imported before you try to use it in your CSS.
  6. You then need to copy the CSS declarations listed into your CSS as appropriate, to apply the custom fonts to your HTML.

Proposed exercise: Google fonts

Create a web page with ten paragraphs, each one using a different Google font.

For example, to use the Google fonts «Nerko One», «Permanent Marker» and «Rock Salt», your HTML code should look like this:
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web font example</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nerko+One&family=Permanent+Marker&family=Rock+Salt&display=swap">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Web font example</h1>
    <p class="nerko">This is a text with Nerko One font</p>
    <p class="marker">This is a text with Permanent Marker font</p>
    <p class="rock">This is a text with Rock Salt</p>
  </body>
</html>

The CSS code inside your own file styles.css:

.nerko {
  font-family: 'Nerko One', cursive;
}
.marker {
  font-family: 'Permanent Marker', cursive;
}
.rock {
  font-family: 'Rock Salt', cursive;
}

And the result:

This is a text with Nerko One font

This is a text with Permanent Market font

This is a text with Rock Salt font

Font size

Font size (set with the font-size property) can take values measured in several units (such as percentages), however the most common units you’ll use to size text are:

  • px (pixels): The number of pixels high you want the text to be (this is an absolute unit).
  • em: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but t is quite natural once you get used to it, and you can use em to size everything, not just text. You can have an entire website sized using em, which makes maintenance easy.
  • rem: These work just like em, except that 1 rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle (rem is not supported in Internet Explorer 8 and below).

Absolute size (pixels)

The easiest way to change the size of your text is setting a specific number of pixels. However, this might not be the best solution, since in case you want to increase (or decrease) the size of all text in your website, you should change each value manually (one time per each CSS rule). So, we are going ahead with a first exercise using pixels, but after that we will use a more convenient way in another exercise using relative values.

Proposed exercise: Absolute sizing with «px»

Create a new web page with at least 15 paragraphs of some text you like, and set the font size for each paragraph a bit larger each time. You must use pixels to set each font size.

Your source code and result should look like this (you may choose any class names, colors and sizes you like):
.ten {
  color: black;
  font-size: 10px;
}

.eleven {
  color: blue;
  font-size: 11px;
}

.twelve {
  color: green;
  font-size: 12px;
}

.thirteen {
  color: brown;
  font-size: 13px;
}

...
<p class="ten">This is a text with 10 px font size</p>
<p class="eleven">This is a text with 11 px font size</p>
<p class="twelve">This is a text with 12 px font size</p>
<p class="thirteen">This is a text with 13 px font size</p>
...

This is a text with 10 px font size

This is a text with 11 px font size

This is a text with 12 px font size

This is a text with 13 px font size

This is a text with 14 px font size

Relative size («em» and «rem»)

The font-size of an element is inherited from that element’s parent element. This all starts with the root element of the entire document  (<html>) the font-size of which is set to 16 px as standard across browsers. Any paragraph (or another element that doesn’t have a different size set by the browser) inside the root element will have a final size of 16 px. Other elements may have different default sizes, for example an <h1> element has a size of 2 em set by default, so it will have a final size of 32 px.

Things become more tricky when you start altering the font size of nested elements. For example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?

<!-- document base font-size is 16px -->
<article> <!-- If my font-size is 1.5em -->
  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
</article>

You would need to set its em value to 20/24, or 0.83333333 em. The maths can be complicated, so you need to be careful about how you style things. It is best to use rem where you can, to keep things simple, and avoid setting the font-size of container elements where possible.

When sizing your text, it is usually a good idea to set the base font-size of the document to 10px, so that then the maths is a lot easier to work out (required (r)em values are then the pixel font size divided by 10, not 16). After doing that, you can easily size the different types of text in your document to what you want. Also it is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find.

Proposed exercise: Relative sizing with «rem»

Create a new web page with at least 15 paragraphs of some text you like, and set the font size for each paragraph a bit larger each time. This time, you must use relative sizing to set each font size (for example, with «rem» units). When you finish writing your code, check the results using your browser, and set different values for the main size (inside the <html> element) and check that the size of all the paragraphs changes accordingly.

Your source code and result should look like this (you may choose any class names, colors and sizes you like):
html {
  color: black;
  font-size: 10px;
}

.eleven {
  color: blue;
  font-size: 1.1rem;
}

.twelve {
  color: green;
  font-size: 1.2rem;
}

.thirteen {
  color: olive;
  font-size: 1.3rem;
}

...
<p>This is a text with 1 rem font size</p>
<p class="eleven">This is a text with 1.1 rem font size</p>
<p class="twelve">This is a text with 1.2 rem font size</p>
<p class="thirteen">This is a text with 1.3 rem font size</p>
...

This is a text with 1 rem font size

This is a text with 1.1 rem font size

This is a text with 1.2 rem font size

This is a text with 1.3 rem font size

This is a text with 1.4 rem font size

Font style, font weight, text transform, and text decoration

CSS provides four common properties to alter the visual weight/emphasis of text:

  • font-style: Used to turn italic text on and off. Possible values are as follows (you’ll rarely use this, unless you want to turn some italic styling off for some reason):
    • normal: Sets the text to the normal font (turns existing italics off)
    • italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
    • oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
  • font-weight: Sets how bold the text is. This has many values available in case you have many font variants available (such as -light-normal-bold-extrabold-black, etc.), but realistically you’ll rarely use any of them except for normal and bold:
    • normalbold: Normal and bold font weight
    • lighterbolder: Sets the current element’s boldness to be one step lighter or heavier than its parent element’s boldness.
    • 100900: Numeric boldness values that provide finer grained control than the above keywords, if needed. 
  • text-transform: Allows you to set your font to be transformed. Values include:
    • none: Prevents any transformation.
    • uppercase: Transforms ALL TEXT TO CAPITALS.
    • lowercase: Transforms all text to lower case.
    • capitalize: Transforms all words to Have The First Letter Capitalized.
    • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
  • text-decoration: Sets/unsets text decorations on fonts (you’ll mainly use this to unset the default underline on links when styling them.) Available values are:
    • none: Unsets any text decorations already present.
    • underline: Underlines the text.
    • overline: Gives the text an overline.
    • line-through: Puts a strikethrough over the text.

You may use some combinations of the options above. For example:

p {
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: line-through;
}

This an uppercase text with line through text decoration

You should also note that text-decoration can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that text-decoration is a shorthand property for text-decoration-linetext-decoration-style, and text-decoration-color. You can use combinations of these property values to create interesting effects, for example:

p {
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: line-through red wavy;
}

This a bold uppercase text with a text decoration of a red wavy line through

Proposed exercise: Style, weight, transform and decoration

Create a website with at least 15 paragraphs to show most of the values that can be used with font-style , font-weight , font-transform and font-decoration properties.

This is an example of the result you should get (you may choose your own combinations):

This is a normal text

This is an italic text

This is a bold text

This is an uppercase and italic text

This is a bold and uppercase text

This is a capitalized text with a weight of 500

This is a capitalized text with a weight of 600

This is a capitalized text with a weight of 700

This is a capitalized text with a weight of 800

This is a capitalized text with a weight of 900

This is an uppercase bold text with an orange line through decoration

This is an uppercase bold text with a blue line through decoration

This is a capitalized bold text with a wavy red line through

This is an uppercase bold text underlined and also with red line-through

Text drop shadows

You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown in the example below:

text-shadow: 4px 4px 5px red;

The four properties are as follows:

  1. The horizontal offset of the shadow from the original text. This can take most available CSS length and size units, but you’ll most commonly use px. Positive values move the shadow right, and negative values left. This value has to be included.
  2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
  3. The blur radius. A higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
  4. The base color of the shadow, which can take any CSS color unit. If not included, it defaults to currentColor, i.e. the shadow’s color is taken from the element’s color property.

You can also apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:

text-shadow: 1px 1px 1px red,
             2px 2px 1px red;

Proposed exercise: Simple shadows

Create a website with at least 15 paragraphs with shadows, each one with different offsets and colors. You can also change any other properties you like, such as the font-family. You should use Google Fonts to ensure that everything is displayed in the right way for all the operating systems and browsers.

This is an example of the result you should get (you may choose your own combinations):

This is a white text with Permanent Marker font and 2 px offset black shadow with 5 px blur

This is a text with Permanent Marker font and 2 px offset yellow shadow without blur

This is a text with Permanent Marker font and 3 px offset yellow shadow with 5 px blur

This is a text with Nerko One font and 2 px offset orange shadow without blur

This is a text with Nerko One font and 2 px offset orange shadow with 5 px blur

This is a bold text with Rock Salt font and 2 px offset red shadow without blur

This is a bold text with Rock Salt font and 2 px offset red shadow with 5 px blur

Proposed exercise: Multiple shadows

Create a website with at least 10 paragraphs each one with multiple shadows and also different offsets and colors. You can also change any other properties you like, such as the font-family and font-size. You should use Google Fonts to ensure that everything is displayed in the right way for all the operating systems and browsers.

This is an example of the result you should get (you may choose your own combinations):

This is a bold white text with Sedgwick Ave font and 1 px offset red shadow and 3 px offset black shadow with 5 px blur

This is a bold text with Sedgwick Ave font and 2 px offset yellow shadow and also a 3 px offset blue shadow without blur

This is a bold text with Sedgwick Ave font and 3 px offset yellow shadow and also a 6 px offset blue shadow with 5 px blur

This is a text with Lakki Reddy font and 1 px offset orange shadow and also a 2 px offset red shadow without blur

This is a text with Lakki Reddy font and 3 px offset orange shadow and also a 6 px offset red shadow with 5 px blur

This is an orange bold text with Gloria Hallelujah font and 2 px offset red shadow and also a 4 px offset blue shadow without blur

This is an orange bold text with Gloria Hallelujah font and 3 px offset red shadow and also a 6 px blue shadow with 5 px blur

Text-alignment

The text-align property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:

  • left: Left-justifies the text.
  • right: Right-justifies the text.
  • center: Centers the text.
  • justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully, since sometimes it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines.

For example, you can center some text just by using the following CSS code:

text-align: center;

Proposed exercise: Alignment types

Create a web page with 4 headers and 4 paragraphs, each one with a different alignment type.

You can use any text you like, but keeping in mind that you must insert several lines to properly see how the alignment is done:

This is left alignment

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

This is right alignment

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

This is center alignment

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

This is justify alignment

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

Line height

The line-height property sets the height of each line of text. This can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option (the font-size is multiplied to get the line-height). Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you’d use this:

line-height: 1.6;

Proposed exercise: Line heights

Create a web page with at least 3 headers and 3 paragraphs, each one with a different line height.

This text has 0.8 line height:

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

This text has 1.2 line height:

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

This text has 1.6 line height:

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

Letter and word spacing

The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won’t use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.

So as an example, we could apply some word-spacing and letter-spacing like this:

word-spacing: 4px;
letter-spacing: 4px;

Proposed exercise: Spacing

Create a web page with at least 2 headers and 2 paragraphs, each one with different word and letter spacing (you may choose any values you like).

This text has 10 px word spacing:

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

This text has 5 px letter spacing:

Well I remember it as though it were a meal ago… Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator. Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.

Font shorthand

Many font properties can also be set through the shorthand property font. These are written in the following order:  font-stylefont-variantfont-weightfont-stretchfont-sizeline-height, and font-family. Among all those properties, only font-size and font-family are required when using the font shorthand property. A forward slash has to be put in between the font-size and line-height properties.

A full example would look like this:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

Proposed exercise: Font properties in one line

Create a new web page with at least five paragraphs and change the font properties using one single CSS line (font shorthand) for each one.

This is a big bold italic text with Special Elite font family.

This is a bigger bold italic text with Bonbon font family.

Other properties worth looking at

The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you’ve become used to using the above, you should also explore the following:

Font styles:

Text layout styles:

  • text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
  • text-overflow: Define how overflowed content that is not displayed is signaled to users.
  • white-space: Define how whitespace and associated line breaks inside the element are handled.
  • word-break: Specify whether to break lines within words.
  • direction: Define the text direction (This depends on the language and usually it’s better to let HTML handle that part as it is tied to the text content.)
  • hyphens: Switch on and off hyphenation for supported languages.
  • line-break: Relax or strengthen line breaking for Asian languages.
  • text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.
  • text-orientation: Define the orientation of the text in a line.
  • overflow-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.
  • writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.

CSS. Unidad 1. Primeros pasos.

Introducción

En el módulo de Introducción al HTML, puedes encontrar los conceptos básicos para saber qué es HTML y cómo se usa para definir documentos que puedan se interpretados por un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Estos estilos vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al fichero HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito. Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así, con los mismos estilos por defecto. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, pudiendo establecer el diseño que cada uno desee.

¿Para qué sirve CSS?

Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.

Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: HTML es el más común, pero también existen otros como SVG o XML.

Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los navegadores, como por ejemplo FirefoxChrome o Edge, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.

El código CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar también para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación.

Sintaxis de CSS

CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre con letras grandes de color rojo».

El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

h1 {
    color: blue;
    font-size: 5em;
}

La regla se abre con un selector. Este selecciona el elemento HTML al que queremos aplicar nuestros estilos. En este caso, cambiaremos el diseño de los encabezados de nivel uno (<h1>).

Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.

Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.

Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra:

h1 {
    color: blue;
    font-size: 5em;
}

p {
    color: green;
}

Algunos valores se aprenden rápidamente, mientras que otros son difíciles de recordar. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o si deseas saber qué más se puede usar como valor. Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características) enumeradas en la referencia CSS del proyecto MDN. También puedes buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre alguna particularidad de CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».

Añadir CSS a un documento

Lo primero que debemos hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el código CSS desde el encabezado del documento. Para ello bastará con crear un archivo en la misma carpeta que el documento HTML y guardarlo como estilos.css. La extensión .css indicará que nuestro archivo contiene código CSS.

Para vincular estilos.css a index.html, bastará con añadir la siguiente línea en algún lugar dentro del <head> del documento HTML:

<link rel="stylesheet" href="estilos.css">

Este elemento <link> utiliza el atributo rel para indicarle al navegador que debe utilizar una hoja de estilo y especifica la ubicación de esa hoja de estilo con el valor del atributo href. Puedes probar si el código CSS funciona correctamente añadiendo una regla al fichero estilos.css. Para ello puedes usar cualquier editor de código para añadir lo siguiente al archivo CSS:

h1 {
  color: blue;
}

Debes tener en cuenta que después de hacer cualquier cambio, deberás guardar los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser azul. Si esto es correcto, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no cambia el color del encabezado, verifica que hayas escrito todo correctamente.

Puedes continuar trabajando en estilos.css localmente o usar cualquier otro editor (como repl.it) para continuar con este tutorial.

Ejercicio propuesto: Enlazar ficheros y añadir estilos

Nuestro punto de partida en esta unidad es un documento HTML. Copia el código que tienes a continuación y guárdalo en un nuevo archivo HTML para trabajar en tu propio ordenador. Después de eso, crea un nuevo archivo CSS para configurar todos los títulos <h1> en color rojo y guárdalo con el nombre «estilos.css» en la misma carpeta que el documento HTML. Finalmente verifica los resultados usando un navegador y no olvides validar el código.

Recuerda que la parte más importante de este ejercicio es vincular tu archivo CSS colocando una sola línea dentro de la sección <head>. Después de eso, dentro de «estilos.css» solo necesitarás insertar tres líneas:
  1. HTML file:
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Empezando con CSS</title>

    <!-- Utilizaremos los estilos que tengamos dentro de 'estilos.css' -->
    <link rel="stylesheet" href="estilos.css">
</head>
<body>   
    <h1>Yo soy un estilo de nivel 1</h1>

    <p>Esto es un párrafo de texto.</p> 
    <p>Esto es un párrafo y también un enlace a <a href="https://google.com">Google</a>.</p>

    <ul>
        <li>Primer elemento de una lista</li>
        <li>Segundo elemento de una lista</li>
        <li>Tercer elemento de una lista</li>
    </ul>
</body>
</html>
  1. Fichero CSS (estilos.css):
h1 {
  ...
}

Ejercicio propuesto: Estilos de encabezados

Usando los archivos HTML y CSS del ejercicio anterior, añade algunos encabezados <h2> y cambia el color con el que aparecen utilizando CSS. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Puede encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Dar formato a elementos HTML

Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para seleccionar todos los párrafos del documento, se usa el selector p. De esta forma, para hacer que el texto de todos los párrafos se muestren de color verde, bastará con utilizar el siguiente código:

p {
  color: green;
}

Puedes utilizar múltiples selectores a la vez, separándolos con una coma. Por ejemplo, si queremos que el texto de todos los párrafos y de todos los elementos de cualquier lista sea verde, el código a utilizar sería el siguiente:

p, li {
    color: green;
}

Ejercicio propuesto: Cambiar el color de varios elementos

Usando los archivos HTML y CSS del ejercicio anterior, cambia el color de los párrafos y elementos de la lista. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Puede encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Aplicar formato según el estado

CSS nos ofrece la capacidad de aplicar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anchor). Tiene diferentes estados dependiendo de si se ha visitado o no, si se pasa el ratón por encima, o si se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. Utilizando el código CSS que se muestra a continuación se deberían visualizar en color rosa los enlaces que no se han visitado y en verde los que sí.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

También puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:

a:hover {
  text-decoration: none;
}

En el ejemplo de arriba hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, es conveniente recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento.

Ejercicio propuesto: Aplicar estilos a los enlaces

Usando los archivos HTML y CSS del ejercicio anterior, inserta varios párrafos con algunos otros enlaces a tus páginas preferidas y cambia el color de todos los enlaces. También debes usar diferentes colores cuando se ha visitado el enlace y cuando el ratón está sobre el enlace. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como viene siendo habitual, verifica los resultados con tu navegador y no olvides validar el código.

Puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Cambiar el comportamiento predeterminado de los elementos

Cuando visualizamos una página web, incluso con un código tan simple como el de nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se amontonaría y tendríamos que darle formato desde cero. Todos los navegadores modernos suelen mostrar el contenido HTML por defecto de la misma manera.

Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia.  Un buen ejemplo es <ul>, que muestra una lista desordenada. Por defecto tiene viñetas, pero si decidimos que no las queremos, podemos eliminarlas fácilmente de este modo:

ul {
  list-style-type: none;
}

Puedes consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior donde podrás probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página). También descubrirás en esa página que además de eliminar las viñetas de la lista, también puedes cambiarlas.

Ejercicio propuesto: Cambiar las viñetas de una lista

Utilizando los archivos HTML y CSS del ejercicio anterior, intenta configurar el list-style-type con square. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Deberías obtener un resultado similar a este:
  • Primer elemento de una lista
  • Segundo elemento de una lista
  • Tercer elemento de una lista

Ejercicio propuesto: Cambiar el estilo de una lista numerada

Usando los archivos HTML y CSS del ejercicio anterior, agregue una lista ordenada (<ol>) y configura el list-style-type con upper-roman. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Deberías obtener un resultado similar a este:
  • Elemento uno
  • Elemento dos
  • Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres

Utilizando clases

Hasta ahora, hemos utilizado selectores cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y establecer el estilo que se aplicará al utilizar dicha clase.

Puedes añadir un atributo de clase a cualquier elemento dentro de tu fichero HTML. Por ejemplo, podríamos utilizar el atributo «class» sobre elementos de tipo lista de la siguiente forma:

<ul class="lista-roja-con-cuadrados">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>
<ul class="lista-azul-con-circulos">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>

Después de escribir ese código HTML, en tu CSS, puedes diseñar las clases lista-roja-con-cuadrados y lista-roja-con-cuadrados creando un par de selectores que comiencen con un punto:

.lista-roja-con-cuadrados {
  list-style-type: square;
  color: red;
}
.lista-azul-con-circulos {
  list-style-type: circle;
  color: blue;
}

Para observar el resultado después de escribir nuevo código HTML y CSS, bastará con guardar los archivos y refrescar el contenido del navegador pulsando Ctrl+F5.

Ejercicio propuesto: Estilos diferentes para cada lista

Usando los archivos HTML y CSS del ejercicio anterior, añade varias listas para obtener algo similar al resultado que se muestra a continuación. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

En lo que respecta a las listas no ordenadas (<ul>) debes crear 4 clases diferentes, cada una de ellas con un valor diferente de la propiedad list-style-type (none, disc, circle, square). Para las listas ordenadas (<ol>) debes crear otras clases, cada una también con valores diferentes para la propiedad list-style-type (upper-roman, lower-greek, lower-alpha, upper-alpha).

Listas no ordenadas

  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento uno
  • Elemento dos
  • Elemento tres

Listas ordenadas

  1. Elemento uno
  2. Elemento dos
  3. Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres

Ejercicio propuesto: Usar CSS con encabezados, párrafos y texto general

Cambia el color de diversos elementos de ejercicios previos de HTML en los que utilizaste encabezados, párrafos y texto formateado en las unidades 1 y 2 (https://fernandoruizrico.com/html-unidad-1/ and https://fernandoruizrico.com/html-unidad-2/). No olvides validar tu código de nuevo.

Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Ejercicio propuesto: Usar CSS con hipervínculos

Cambia el color de diversos elementos de la unidad 3 de HTML (https://fernandoruizrico.com/html-unidad-3/). No olvides validar tu código de nuevo.

Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Ejercicio propuesto: Usar CSS con listas

Cambia el color, las viñetas y la numeración de diversas listas de los ejercicios de listas de la unidad 4 de HTML (https://fernandoruizrico.com/html-unidad-4/). No olvides validar tu código de nuevo.

Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

HTML. Unidad 5. Imágenes.

Introducción

Al principio, las páginas web solo contenían texto y resultaba más bien aburrida. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes). Existen elementos multimedia que debemos tener en cuenta, pero es lógico comenzar con el humilde elemento <img> utilizado para insertar una imagen simple en una página web. En esta unidad veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando <figure>.

¿Cómo ponemos una imagen en una página web?

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento <a> contiene los valores del atributo href.

Por ejemplo, si tu imagen se llama dinosaurio.jpg, y está en el mismo directorio que tu página HTML, incluir la imagen de la siguiente manera:

<img src="dinosaurio.jpg" />

El código anterior debería darnos el resultado siguiente:

Si la imagen está en el subdirectorio imagenes, ubicado en el mismo directorio que la página HTML (lo que Google recomienda con fines de indexación y posicionamiento en buscadores SEO), entonces la imagen se puede incluir así:

<img src="imagenes/dinosaurio.jpg" />

Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO.  Por lo tanto, elige para tu imagen un nombre descriptivo. Por ejemplo, dinosaurio.jpg es mejor que img835.png.

También puedes incluir la imagen usando la URL absoluta, por ejemplo:

<img src="https://www.ejemplo.com/imagenes/dinosaurio.jpg" />
...
<img src="https://developer.mozilla.org/static/img/favicon144.png" />

Aunque esta última opción es menos habitual, ya que provoca que el navegador tenga que buscar la dirección IP desde el servidor DNS cada vez. Al ser posible, conviene almacenar las imágenes de tu página web en el mismo servidor donde guardes tu código HTML.

Por último, conviene mencionar que la mayoría de imágenes tienen derechos de autor. Por ello, no debes mostrar una imagen en tu página web a menos que:

  1. seas dueño de la imagen,
  2. tengas permiso escrito explícito del dueño de la imagen o 
  3. tengas suficientes pruebas de que la imagen es de dominio público.

El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no debes apuntar nunca tu atributo src a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama hotlinking. Asimismo es ilegal robar el ancho de banda de alguien.  Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.

Texto alternativo

El próximo atributo que veremos es  alt. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no se pueda mostrar o tarde demasiado en mostrarse por una conexión de Internet muy lenta. Por ejemplo, nuestro código anterior podría modificarse así:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y afilados">
...
<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="MDN logo" />

La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre de archivo de nuestra imagen como dinosaurioooooo.jpg, el navegador no podrá mostrar la imagen, y en su lugar mostrará el texto alternativo.

Además de ser necesario (la validación de tu página web no será correcta si omites algún texto alternativo), el texto alternativo podría resultar necesario por varias razones:

  • El usuario tiene alguna discapacidad visual y utiliza un lector de pantalla para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.
  • Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta.
  • El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como Lynx, que muestran el texto del atributo alt.
  • Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.
  • Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto puede suceder especialmente en teléfonos móviles y en países en los que el ancho de banda está bastante limitado.

Para saber qué hay que escribir exactamente en el atributo alt, debemos pensar primero por qué la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:

  • Decoración. Para las imágenes decorativas deberían utilizarse imágenes de fondo CSS. Pero si es inevitable usar HTML, la mejor forma de hacerlo es con alt="". Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.
  • Contenido. Si tu imagen proporciona información significativa, se debe proporcionar la misma información en un texto alternativo (alt) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar alt="".
  • Enlace. Al poner una imagen dentro de una etiqueta <a> para convertirla en un enlace, aun debes proporcionar texto de enlace accesible. En tal caso podrías escribirlo dentro del mismo elemento <a>, o dentro del atributo alt de la imagen. Lo que mejor funcione en tu caso.
  • Texto. No deberías poner tu texto en imágenes.  Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, usa CSS para ello en vez de poner el texto en una imagen. Pero, si realmente no puedes evitarlo, deberías proporcionar el texto en el atributo alt.

Resumiendo, el objetivo es ofrecer una experiencia de navegación adecuada en términos de usabilidad, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario se pierda ninguna parte del contenido.

Puedes consultar la guía de texto alternativo de Mozilla para obtener más información.

Anchura y altura

Puedes usar los atributos  ancho (width) y alto (height) para especificar la anchura y altura de cada imagen. Puedes encontrar el ancho y el alto de cualquier imagen de diversas maneras. Por ejemplo, con el botón derecho del ratón, o en Mac también puedes usar  Cmd + I  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
          tiene una cabeza grande con dientes largos y afilados"
     width="400"
     height="341">

Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse pixeladas o borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la proporción de aspecto correcta. Deberías utilizar un editor de imágenes para dar a tu imagen el tamaño adecuado antes de colocarla en tu página web. Y si tienes que alterar el tamaño de una imagen desde tu código fuente, es mejor usar CSS.

Título de la imagen

Al igual que con los enlaces, también puedes añadir atributos title a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
          tiene una cabeza grande con dientes largos y afilados"
     width="400"
     height="341"
     title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">

Esto nos da una etiqueta de ayuda (tooltip) como las de los enlaces. Sin embargo, no se recomienda incluir esta propiedad en las imágenes, ya que title presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (screen readers) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en este tema, puedes leer el artículo The Trials and Tribulations of the Title Attribute de Scott O’Hara.

Resumiendo, es más adecuado incluir en el texto principal de la página la información que pondríamos en el title, en lugar de adjuntarla en la imagen.

Ejercicio propuesto: Insertar imágenes

Crea una página web para mostrar varias imágenes. Tienes que usar la etiqueta básica <img> y el atributo «src» para apuntar a la URL de cada imagen individual. Por ejemplo, puedes usar imágenes como estas:

https://developer.mozilla.org/static/img/favicon144.png

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

https://validator.w3.org/images/w3c.png

También debes añadir un texto alternativo a cada imagen y verificar que se muestra al escribir mal la URL de cada imagen. Finalmente experimente con diferentes valores de ancho y alto para ver cuál es su efecto.

Imágenes con enlaces

Este ejemplo se basa en los anteriores y muestra cómo convertir la imagen en un enlace. Para hacerlo, debes anidar la etiqueta <img> dentro de <a>. Además, se debe usar el texto alternativo para describir el recurso al que apunta el enlace, como si se estuviera usando un enlace de texto en su lugar:

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Visita la web de MDN" />
</a>

Ejercicio propuesto: Las diez páginas más importantes

Crea una página web que muestre una lista ordenada (<ol>) de las diez páginas web que más te gusten. Debes utilizar imágenes para crear enlaces a cada página y establecer el atributo de altura con el mismo valor para todas las imágenes para que todas tengan la misma altura. Por ejemplo:

<ol>
  <li>
    <a href="https://developer.mozilla.org">
      <img src="https://developer.mozilla.org/static/img/favicon144.png" 
           alt="MDN site" height="100" />
    </a>
  </li>
  <li>
    <a href="https://validator.w3.org/">
      <img src="https://validator.w3.org/images/w3c.png" 
           alt="Markup Validation Service" height="100" />
    </a>
  </li>
  ...
</ol>

Comentar imágenes con figure y figcaption

Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:

<div class="figure">
  <img src="imagenes/dinosaurio.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
            tiene una cabeza grande con dientes largos y afilados"
       width="400"
       height="341">

  <p>Exposición de un T-Rex en el museo de la Universidad de Manchester.</p>
</div>

Este código es completamente correcto, ya que incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?

Una solución mejor es utilizar los elementos HTML5 <figure> y <figcaption>. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior podría reescribirse así:

<figure>
  <img src="imagenes/dinosaurio.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
            tiene una cabeza grande con dientes largos y afilados" width="400"
       height="341">

  <figcaption>Exposición de un T-Rex en el museo de la Universidad de Manchester.</figcaption>
</figure>

El elemento <figcaption> le dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento <figure>. Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo alt cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto alt proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto alt no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra.

También debemos tener en cuenta que el elemento figure no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:

  • Expresa un significado en una forma compacta y fácil de entender.
  • Se puede poner en varios sitios en el flujo lineal de la página.
  • Proporciona información esencial que da apoyo al texto principal.

Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.

Ejercicio propuesto: Figuras con leyenda

Crea una página web para mostrar varias imágenes que te gusten, usando el elemento <figure>, y agrega un título a cada una usando el elemento <figcaption>, como se hace en el siguiente ejemplo:

<figure>
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Página web de MDN (Mozilla Developer Network)">
  <figcaption>MDN Logo</figcaption>
</figure>

<figure>
  <img src="https://validator.w3.org/images/w3c.png"
       alt="Validador de W3C">
  <figcaption>W3C Logo</figcaption>
</figure>

...

Ejercicio propuesto: Las diez películas más interesantes

Crea una nueva página web que muestre una lista ordenada (<ol>) de las diez películas que más te gusten. En este caso, debe utilizar figuras con subtítulos para crear enlaces a cada página. Utiliza el mismo valor para el atributo de altura de todas las imágenes para que todas tengan la misma altura. Por ejemplo:

<ol>
  <li>
    <a href="https://en.wikipedia.org/wiki/Steve_Jobs_(film)">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/49/SteveJobsMacbookAir.JPG" 
             alt="Steve Jobs y el Macbook Air" height="100" />
        <figcaption>Steve jobs</figcaption>
      </figure>
    </a>
  </li>
  <li>
    <a href="https://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(film)">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/0/09/2001child2.JPG" 
             alt="Bebé, espacio, y la Tierra" height="100" />
        <figcaption>2001: Una Odisea Espacial</figcaption>
      </figure>
    </a>
  </li>
  ...
</ol>

HTML. Unidad 4. Listas.

Introducción

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.

Listas no ordenadas (elemento <ul>)

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:

leche
huevos
pan
hummus

Utilizando HTML, esa misma lista se mostrará de la siguiente forma:

  • leche
  • huevos
  • pan
  • hummus

Para conseguir ese resultado y mostrar la lista con viñetas, cada vez que creemos una lista no ordenada, debemos utilizar el elemento <ul> (unordered list) para agrupar todos los artículos dentro de la lista. A continuación deberemos encerrar cada artículo con un elemento <li> (list item):

<ul>
  <li>leche</li>
  <li>huevos</li>
  <li>pan</li>
  <li>hummus</li>
</ul>

Listas ordenadas (elemento <ol>)

Las listas ordenadas son aquellas en las que el orden de los elementos  importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

Conduce hasta el final de la calle
Gira a la derecha
Sigue derecho por las dos primeras glorietas
Gira a la izquierda en la tercer glorieta
El colegio está a la derecha, 300 metros más adelante

Utilizando HTML, esa misma lista se mostrará de la siguiente forma:

  1. Conduce hasta el final de la calle
  2. Gira a la derecha
  3. Sigue derecho por las dos primeras glorietas
  4. Gira a la izquierda en la tercer glorieta
  5. El colegio está a la derecha, 300 metros más adelante

La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta <ol> («ordered list»), en lugar de <ul>:

<ol>
  <li>Conduce hasta el final de la calle</li>
  <li>Gira a la derecha</li>
  <li>Sigue derecho por las dos primeras glorietas</li>
  <li>Gira a la izquierda en la tercer glorieta</li>
  <li>El colegio está a tu derecha, 300 metros más adelante</li>
</ol>

Ejercicio propuesto: Receta de hummus

Llegados a este punto de esta unidad, tienes toda la información necesaria para marcar la página de ejemplo con una receta que aparece a continuación. Utilizando dicho texto, crea un nuevo fichero y utiliza las etiquetas adecuadas para mejorar el formato con el que se muestra la receta.

Note: Debes utilizar <h1> para el título principal, <h2> para el resto de títulos, <p> para los párrafos, <ul> para los ingredientes, y <ol> para las instrucciones. Si tienes dudas, puedes consultar el ejemplo completo en el repositorio de Github: text-complete.html.
Receta rápida de hummus

Con esta receta puedes conseguir un hummus rápido y sabroso, sin ensuciar. Ha sido adaptado a partir de varias recetas diferentes que he leído a lo largo de los años.

El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabrosa y se puede combinar con ensalada, carnes a la brasa y pan de pita.

Ingredientes

1 lata (400g) de garbanzos
175g de tahini
6 tomates secos
Medio pimiento rojo
Una pizca de pimienta de cayena
1 diente de ajo
Una pizca de aceite de oliva

Instrucciones

Pelar el ajo y picarlo en trozos gruesos.
Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
Meter todos los alimentos en un procesador de alimentos.
Mezclar todos los ingredientes hasta conseguir una pasta.
Mezclar brevemente si deseas un hummus "grueso".
Picar durante más tiempo si se desea obtener un hummus "suave".

Para obtener un sabor diferente, puedes intentar mezclar un poco de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Experimenta para probar qué te gusta más.

Almacenamiento

Mantener el hummus terminado en la nevera en un recipiente cerrado. Deberías poder consumirlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.

El hummus es apto para congelar; se puede descongelar y consumir en un par de meses.

Listas anidadas

Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior:

  • Primer elemento
  • Segundo elemento
    • Primer subelemento del segundo elemento
    • Segundo subelemento del segundo elemento
    • Tercer subelemento del segundo elemento
  • Tercer elemento
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento     
  <!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
    <ul>
      <li>Primer subelemento del segundo elemento</li>
      <li>Segundo subelemento del segundo elemento</li>
      <li>Tercer subelemento del segundo elemento</li>
    </ul>
  <!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
  </li>
  <li>Tercer elemento</li>
</ul>

Y es posible que también quieras tener por ejemplo una lista ordenada dentro de una lista desordenada:

  • Primer elemento
  • Segundo elemento
    1. Primer subelemento del segundo elemento
    2. Segundo subelemento del segundo elemento
    3. Tercer subelemento del segundo elemento
  • Tercer elemento
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento     
  <!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
    <ol>
      <li>Primer subelemento del segundo elemento</li>
      <li>Segundo subelemento del segundo elemento</li>
      <li>Tercer subelemento del segundo elemento</li>
    </ol>
  <!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
  </li>
  <li>Tercer elemento</li>
</ul>

Tomemos ahora como ejemplo la segunda lista de nuestro ejemplo de la receta:

<ol>
  <li>Pelar el ajo y picarlo en trozos gruesos.</li>
  <li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
  <li>Meter todos los alimentos en un procesador de alimentos.</li>
  <li>Mezclar todos los ingredientes hasta conseguir una pasta.</li>
  <li>Mezclar brevemente si deseas un hummus "grueso".</li>
  <li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
</ol>

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:

<ol>
  <li>Pelar el ajo y picarlo en trozos gruesos.</li>
  <li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
  <li>Meter todos los alimentos en un procesador de alimentos.</li>
  <li>Mezclar todos los ingredientes hasta conseguir una pasta.
    <ul>
      <li>Mezclar brevemente si deseas un hummus "grueso".</li>
      <li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
    </ul>
  </li>
</ol>

Ejercicio propuesto: Receta de hummus con lista anidada

Usando el ejercicio propuesto anteriormente de la receta de hummus, actualiza la segunda lista para usar elementos anidados para obtener el siguiente resultado:

  1. Pelar el ajo y picarlo en trozos gruesos.
  2. Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
  3. Meter todos los alimentos en un procesador de alimentos.
  4. Mezclar todos los ingredientes hasta conseguir una pasta:
    • Mezclar brevemente si deseas un hummus «grueso».
    • Picar durante más tiempo si se deseas obtener un hummus «suave».

Ejercicio propuesto: Lista de la compra

Escribe tu propia lista de la compra, con al menos 20 productos. Debes utilizar tipos y subtipos, colocando los elementos en listas anidadas como en el siguiente ejemplo:

  • Pan
  • Leche
  • Café
    • Té negro
    • Té rojo
    • Té verde
  • Fruta
    • Naranjas
    • Manzanas
<ul>
  <li>Pan</li>
  <li>Leche</li>
  <li>Café</li>
  <li>Té
    <ul>
      <li>Té negro</li>
      <li>Té rojo</li>
      <li>Té verde</li>
    </ul>
  </li>
  <li>Fruta
    <ul>
      <li>Naranjas</li>
      <li>Manzanas</li>
    </ul>
  </li>
</ul>

Ejercicio propuesto: Lista de tareas

Crea un nuevo archivo que contenga una lista de tareas, con al menos 20 elementos. Debes usar listas anidadas combinando tareas e instrucciones, por ejemplo, insertando listas ordenadas dentro de una lista desordenada, más o menos como en el ejemplo siguiente:

  • Alimentar al gato
    1. Limpiar el cuenco
    2. Abrir la comida para gatos
    3. Poner la comida en el cuenco
  • Lavar el coche
    1. Aspirar el interior
    2. Lavar el exterior
    3. Encerar el exterior
  • Comprar comida
    1. Planificar el menú
    2. Limpiar la nevera
    3. Escribir la lista de la compra
    4. Ir al supermercado
<ul>
   <li>Alimentar al gato
     <ol>
       <li>Limpiar el cuenco</li>
       <li>Abrir la comida para gatos</li>
       <li>Poner la comida en el cuenco</li>
     </ol>
   </li>
   <li>Lavar el coche
     <ol>
       <li>Aspirar el interior</li>
       <li>Lavar el exterior</li>
       <li>Encerar el exterior</li>
     </ol>
   </li>
   <li>Comprar comida
     <ol>
       <li>Planificar el menú</li>
       <li>Limpiar la nevera</li>
       <li>Escribir la lista de la compra</li>
       <li>Ir al supermercado</li>
     </ol>
   </li>
</ul>

Listas de descripciones (elemento <dl>)

Ya hemos visto cómo marcar listas básicas en HTML. Ahora veremos un tercer tipo de lista con el que te puedes llegar a encontrar: listas de descripciones. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:

soliloquio

En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).

monólogo

En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.

aparte

En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas: <dl> («description list» o lista de descripciones). Además, cada término está envuelto en un elemento <dt> («description term» o término a describir), y cada descripción está envuelta en un elemento <dd> («description definition» o definición de descripción).

Colocando las etiquetas HTML adecuadas, el ejemplo anterior quedaría de la siguiente forma:

<dl>
  <dt>soliloquio</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>

  <dt>monólogo</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>

  <dt>aparte</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
</dl>

De forma predeterminada, el navegador mostrará las listas de descripciones con las descripciones sangradas un poco más que los términos, o con los términos un poco más destacados que las descripciones:

soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Para concluir, ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:

<dl>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
</dl>
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).

Ejercicio propuesto: Café, té y chocolate

Es hora de probar suerte con las listas de descripciones. Crea un nuevo archivo y añade elementos al texto sin formato que tienes a continuación para que aparezca como una lista de descripciones:

Café

El café es una bebida elaborada con un aroma y un sabor distintos que se prepara a partir de las semillas tostadas de la planta Coffea.

Té

El té es una bebida aromática que se prepara comúnmente vertiendo agua caliente o hirviendo sobre las hojas curadas de la planta del té.
 
Chocolate caliente

El chocolate caliente es una bebida que generalmente se obtiene mezclando chocolate rallado, chocolate derretido o cacao en polvo, leche o agua caliente y azúcar.

Ejercicio propuesto: bacon, huevos y café

Crea un nuevo archivo con el texto que tienes a continuación y añade elementos al texto para que aparezca como una lista de descripción. Puedes usar tus propios términos y descripciones si lo deseas.

Nota: observa que el término café tiene dos definiciones.
Bacon

Carne curada preparada a partir de carne de cerdo.

Huevos

Comida común y uno de los ingredientes más versátiles utilizados en la cocina.

Café

La bebida que hace que el mundo funcione por la mañana.
Un color marrón claro.

Ejercicio propuesto: Componentes de ordenador

Escribe una lista de definiciones para explicar el significado de los siguientes términos: unidad central de procesamiento, monitor, ratón, teclado, tarjeta gráfica, tarjeta de sonido, altavoces y placa base.