Presentación
Infografías
Diapositivas y vídeos
Podrás familiarizarte con los contenidos clave de esta unidad a través de esta presentación y esta otra; estas diapositivas; y este vídeo y finalmente, este otro .
Introducción
HTML dispone de numerosos elementos para dar formato al texto que no abordamos en las unidades anteriores. Aunque las etiquetas que se describen en esta unidad son menos conocidas o de uso más específico, conocerlas resulta de gran utilidad para enriquecer nuestros documentos. Aprenderás a realizar el marcado semántico correcto de abreviaturas, citas y referencias, fragmentos de código informático, ecuaciones matemáticas y datos de contacto.
Abreviaturas
El elemento de abreviatura de HTML (<abbr>) representa una abreviatura o un acrónimo. A través del atributo opcional title, podemos proporcionar el significado desarrollado del término o una descripción legible para el usuario.
Por lo general, los navegadores presentan este texto mediante una etiqueta emergente (tooltip) que aparece automáticamente cuando se pasa el cursor del ratón sobre el elemento. Es importante tener en cuenta que, si se incluye el atributo title, este debe contener única y exclusivamente la descripción completa, sin añadir texto adicional.
A continuación, veamos algunos ejemplos prácticos en los que resulta adecuado el uso de abreviaturas o acrónimos:
Puedes utilizar CSS para dar estilo a tu HTML.
La NASA realiza un trabajo fascinante, sin duda.
El chiste de Ashok me hizo LOL muchísimo.
Veamos ahora qué código HTML debemos escribir para conseguir ese resultado:
<p>Usamos <abbr title="Lenguaje de Marcado de Hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p> <p>Puedes utilizar <abbr title="Hojas de Estilo en Cascada">CSS</abbr> para dar estilo a tu <abbr title="Lenguaje de Marcado de Hipertexto">HTML</abbr>.</p> <p>La <abbr title="Administración Nacional de Aeronáutica y el Espacio">NASA</abbr> realiza un trabajo fascinante, sin duda.</p> <p>El chiste de Ashok me hizo <abbr title="Reír a carcajadas">LOL</abbr> muchísimo.</p>
El objetivo principal de este elemento es aportar valor semántico y facilitar información adicional. Aunque todos los navegadores lo muestran como un elemento en línea (inline) de forma predeterminada, su estilo visual por defecto no es consistente y varía según el navegador (si bien esto siempre puede unificarse añadiendo reglas CSS).
Las diferencias de estilo más comunes son las siguientes:
- Sin estilo visual: Algunos navegadores, como Internet Explorer, no le aplican ninguna apariencia distintiva, mostrándolo exactamente igual que si fuera un elemento
<span>. - Subrayado: Navegadores como Opera o Firefox suelen añadir un subrayado de puntos al texto de la abreviatura para diferenciarlo.
- Versalitas: Unos pocos navegadores van un paso más allá y, además del subrayado punteado, transforman el texto a versalitas (small caps).
Ejercicio propuesto: Ejemplo de uso de abreviaturas
Crea una página web utilizando el código del ejemplo anterior, y añade varios párrafos nuevos que contengan algunas abreviaturas y verifica el resultado en tu navegador. Recuerda incluir el resto de etiquetas básicas de HTML necesarias para la estructura del documento y no olvides validar tu código.
Ejercicio propuesto: Abreviaturas para chatear
El mundo del correo electrónico, los mensajes de texto y la mensajería instantánea han dado lugar a toda una serie de acrónimos y abreviaturas que permiten a los usuarios redactar sus mensajes con mayor rapidez. En este ejercicio deberás crear un par de listas. La primera incluirá la relación de abreviaturas que se enumeran a continuación (puedes añadir otras que conozcas). La segunda lista deberá contener al menos veinte frases que ilustren cómo se utilizan dichas abreviaturas en una conversación de chat.
Además, utiliza encabezados<h1>y<h2>para añadir títulos a las listas y proporcionar así un texto descriptivo previo.
Por ejemplo, la primera lista podría mostrar las abreviaturas de la siguiente manera:
- bn – Bien
- bss – Besos
- finde – Fin de semana
- hl – Hola
- kdms – Quedamos
- npi – Ni puñetera idea
- ns / nc – No sabe / No contesta
- pf / xfa – Por favor
- pq / xq – Por qué
- q tal – Qué tal
- rt – Retuit (compartido / de acuerdo)
- salu2 – Saludos
- tb – También
- tqm – Te quiero mucho
- tpc – Tampoco
- vdd – Verdad
- xo – Pero
- +o- – Más o menos
La segunda lista deberá incluir al menos veinte frases en las que se empleen dichas abreviaturas. Por ejemplo:
- Espero que te encuentres bn, hace tiempo que no hablamos.
- Me tengo que ir corriendo, hablamos luego. ¡bss!
- ¿Tenéis algún plan interesante para este finde?
- hl, ¿te ha llegado ya el paquete que te envié?
- Si os parece bien, kdms a las 20:00 en la plaza mayor.
- No me preguntes cómo arreglarlo porque no tengo npi.
- Le he preguntado si vendrá a la cena de empresa, pero de momento ns / nc.
- …
Puedes utilizar el siguiente código como ejemplo para saber qué etiquetas debes utilizar para obtener ambas listas:
<h1>Algunas abreviaturas que uso para chatear</h1>
<h2>Las abreviaturas</h2>
<ul>
<li>bn - Bien</li>
<li>bss - Besos</li>
<li>finde - Fin de semana</li>
<li>hl - Hola</li>
<li>kdms - Quedamos</li>
<li>npi - Ni puñetera idea</li>
<li>ns / nc - No sabe / No contesta</li>
<li>...</li>
</ul>
<h2>Algunos ejemplos</h2>
<ul>
<li>Espero que te encuentres <abbr title="Bien">bn</abbr>, hace tiempo que no hablamos.</li>
<li>Me tengo que ir corriendo, hablamos luego. ¡<abbr title="Besos">bss</abbr>!</li>
<li>¿Tenéis algún plan interesante para este <abbr title="Fin de semana">finde</abbr>?</li>
<li><abbr title="Hola">hl</abbr>, ¿te ha llegado ya el paquete que te envié?</li>
<li>Si os parece bien, <abbr title="Quedamos">kdms</abbr> a las 20:00 en la plaza mayor.</li>
<li>No me preguntes cómo arreglarlo porque no tengo <abbr title="Ni puñetera idea">npi</abbr>.</li>
<li>Le he preguntado si vendrá a la cena de empresa, pero de momento <abbr title="No sabe / No contesta">ns / nc</abbr>.</li>
<li>...</li>
</ul>
Citas
El elemento <q>
El elemento HTML <q> indica que el texto que encierra es una cita corta en línea (inline). La gran mayoría de los navegadores modernos interpretan este elemento envolviendo automáticamente el texto entre comillas.
Asimismo, puedes utilizar el atributo cite para especificar una URL que señale el documento de origen o la fuente de la información citada, aunque es importante tener en cuenta que, por defecto, el navegador no muestra esta URL al usuario de forma visible.
A continuación mostramos un par de ejemplos analizando primero el resultado visual (en la mayoría de los casos la única diferencia es que las comillas aparecen automáticamente para acotar la cita):
Cuando Dave le pide a HAL que abra las compuertas de la cápsula, HAL responde: "Lo siento, Dave. Me temo que no puedo hacerlo"
.
Según el sitio web de Mozilla,
"Firefox 1.0 se lanzó en 2004 y se convirtió en un gran éxito"
.
Y ahora el código fuente correspondiente:
<p>
Cuando Dave le pide a HAL que abra las compuertas de la cápsula, HAL responde: <q cite="https://www.imdb.com/es-es/title/tt0062622/">"Lo siento, Dave. Me temo que no puedo hacerlo"</q>.
</p>
<p>
Según el sitio web de Mozilla,
<q cite="https://www.mozilla.org/en-US/about/history/details/">"Firefox 1.0 se lanzó en 2004 y se convirtió en un gran éxito"</q>.
</p>
Importante: El elemento <q> está diseñado para citas breves que no requieren saltos de párrafo. Para citas extensas, utiliza el elemento <blockquote>.
Ejercicio propuesto: Citas en línea
Crea una página web utilizando el código del ejemplo anterior, y luego añade varios párrafos que contenga citas de tu elección y verifica el resultado en el navegador. Recuerda incluir el resto de etiquetas básicas de HTML para estructurar el documento y no olvides validar tu código.
Puedes usar por ejemplo citas de tu película favorita, tal como aparecen en «https://www.fotogramas.es/noticias-cine/g32183447/star-wars-mejores-frases-de-la-saga/«.
El elemento <blockquote>
El elemento HTML <blockquote> (o elemento de cita en bloque) indica que el texto que encierra constituye una cita extensa. Por lo general, los navegadores representan este elemento visualmente aplicando una sangría o indentación al texto.
Es posible especificar la URL de la fuente de la cita mediante el atributo cite, pero para indicar la referencia de la fuente en formato de texto visible se emplea el elemento completo <cite>. Por ejemplo:
Vuestro trabajo va a llenar gran parte de vuestra vida, y la única forma de estar realmente satisfecho es hacer lo que creéis que es un gran trabajo. Y la única forma de hacer un gran trabajo es amar lo que hacéis. Si aún no lo habéis encontrado, seguid buscando. No os conforméis. Como con todo lo que tiene que ver con el corazón, lo sabréis cuando lo encontréis. Steve Jobs
<blockquote cite="https://www.brainyquote.com/quotes/steve_jobs_416859">
Vuestro trabajo va a llenar gran parte de vuestra vida, y la única forma de estar realmente satisfecho es hacer lo que creéis que es un gran trabajo. Y la única forma de hacer un gran trabajo es amar lo que hacéis. Si aún no lo habéis encontrado, seguid buscando. No os conforméis. Como con todo lo que tiene que ver con el corazón, lo sabréis cuando lo encontréis.
<a href="https://www.brainyquote.com/quotes/steve_jobs_416859"><cite>Steve Jobs</cite></a>
</blockquote>
Ejercicio propuesto: Citas célebres
Crea una página web que recopile al menos veinte de las citas más famosas de la historia. Puedes encontrar muchas de ellas en sitios como «https://www.proverbia.net«, «https://www.mundifrases.com/«, o también puedes utilizar cualquier otra fuente que prefieras.
Debes utilizar el elemento<blockquote>para envolver la cita completa, y el elemento<cite>dentro de cada cita para indicar el nombre del autor, tal como se muestra en el ejemplo anterior y en los siguientes:
La mayor gloria de vivir no radica en no caer nunca, sino en levantarnos cada vez que caemos. Nelson Mandela
La manera de empezar es dejar de hablar y comenzar a actuar. Walt Disney
Vuestro tiempo es limitado, así que no lo malgastéis viviendo la vida de otro. No os dejéis atrapar por el dogma, que es vivir según los resultados del pensamiento de otros. No dejéis que el ruido de las opiniones de los demás ahogue vuestra propia voz interior. Y lo más importante, tened el coraje de seguir a vuestro corazón y vuestra intuición. Steve Jobs
Si la vida fuera predecible, dejaría de ser vida y no tendría sabor. Eleanor Roosevelt
Si miras lo que tienes en la vida, siempre tendrás más. Si miras lo que no tienes en la vida, nunca tendrás suficiente. Oprah Winfrey
…
Combinando los elementos <q>, <blockquote> y <cite>
El elemento de cita HTML (<cite>) se utiliza para referenciar el título de una obra creativa citada (como un libro, un artículo, un ensayo, una película, etc.). Según las convenciones de metadatos más apropiadas para el contexto, esta referencia puede presentarse de forma abreviada. Veamos un ejemplo práctico en el que resulta útil combinar estos tres elementos para crear una mejor estructura semántica:
Hola y bienvenidos a mi página de motivación. Como dice el sitio Citas de Confucio :
No importa lo lento que vayas mientras no te detengas.
También me encanta el concepto del pensamiento positivo y la necesidad de
«mantener tus pensamientos positivos»
(como se menciona en
Citas Positivas
).
Y ahora echemos un vistazo al código fuente que debemos escribir para obtener ese resultado:
<p>
Hola y bienvenidos a mi página de motivación. Como dice el sitio
<a href="https://proverbia.net/autor/frases-de-confucio">
<cite>Citas de Confucio</cite>
</a>:
</p>
<blockquote cite="https://www.proverbia.net/citasautor/confucio">
No importa lo lento que vayas mientras no te detengas.
</blockquote>
<p>
También me encanta el concepto del pensamiento positivo y la necesidad de
<q cite="https://www.mundifrases.com/tema/pensamiento-positivo/">
mantener tus pensamientos positivos
</q>
(como se menciona en
<a href="https://psicologiaymente.com/reflexiones/frases-positivas">
<cite>Citas Positivas</cite>
</a>).
</p>
Ejercicio propuesto: Ejemplo de citas completas
Crea una página web utilizando primero el código del ejemplo anterior y verifica el resultado en tu navegador. A continuación añade otro bloque similar combinando las tres etiquetas mencionadas, y vuelve a comprobar el resultado en el navegador.
No olvides incluir el resto de las etiquetas básicas de HTML (incluyendo títulos
<h1>y<h2>) y valida tu código para asegurar que es correcto.
Representación de código informático
HTML pone a nuestra disposición una serie de elementos específicos para el marcado de código informático:
<code>: Se utiliza para marcar fragmentos genéricos de código informático.<pre>: Se usa para preservar los espacios en blanco (generalmente empleado para bloques de código). Si utilizas sangría o espacios en blanco adicionales dentro del texto, los navegadores los ignorarán por defecto y no se verán reflejados en la página renderizada. No obstante, como ya explicamos en una unidad anterior, si envuelves el texto entre etiquetas<pre></pre>, los espacios en blanco se mostrarán idénticos a como aparecen en tu editor de texto.<var>: Sirve para marcar específicamente nombres de variables.<kbd>: Se utiliza para marcar la entrada de teclado (u otros tipos de entrada de datos) introducida en el ordenador.<samp>: Se emplea para marcar la salida (output) de un programa informático.
El elemento <code>
El elemento HTML <code> muestra su contenido con un estilo visual diseñado para indicar que el texto es un fragmento breve de código informático. Por defecto, los navegadores muestran el texto de este elemento utilizando la fuente monoespaciada predeterminada del sistema.
Veamos un par de ejemplos:
El método push() añade uno o más elementos al final de un array y devuelve la nueva longitud del mismo.
La función selectAll() resalta todo el texto en el campo de entrada para que el usuario pueda, por ejemplo, copiar o eliminar el texto.
Y este sería el código HTML del ejemplo anterior:
<p>
El método <code>push()</code> añade uno o más elementos al final de un array y devuelve la nueva longitud del mismo.
</p>
<p>
La función <code>selectAll()</code> resalta todo el texto en el campo de entrada para que el usuario pueda, por ejemplo, copiar o eliminar el texto.
</p>
Ejercicio propuesto: Código en línea
Crea una página web con el código del ejemplo anterior, luego añade algunos ejemplos más, y verifica los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.
Los elementos <pre> + <code>
El elemento <code> por sí solo representa únicamente una instrucción o una única línea de código. Para representar múltiples líneas de código (un bloque), debemos envolver el elemento <code> dentro de un elemento <pre>. De esta forma, respetaremos los espacios y saltos de línea. Por ejemplo:
if (a > b) {
console.log('¡Hola!'); // Ejemplo de código en el lenguaje JavaScript
}
Código HTML del ejemplo:
<pre><code>
if (a > b) {
console.log('¡Hola!'); // Ejemplo de código en el lenguaje JavaScript
}
</code></pre>
Ejercicio propuesto: Bloque de código
Crea una página web con el código del ejemplo anterior, añade algunos bloque adicionales con cualquier fragmento de código de cualquier lenguaje y comprueba los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código
El elemento <var>
El elemento de variable HTML (<var>) representa el nombre de una variable dentro de una expresión matemática o en un contexto de programación. Por lo general, se presenta visualmente utilizando una versión en cursiva de la tipografía actual, aunque este comportamiento depende de cada navegador.
Por ejemplo:
Una ecuación simple: x = y + 2
El volumen de una caja es l × w × h, donde l representa la longitud, w la anchura y h la altura de la caja.
Las variables minSpeed y maxSpeed controlan la velocidad mínima y máxima del aparato en revoluciones por minuto (RPM).
Código HTML del ejemplo:
<p>
Una ecuación simple: <var>x</var> = <var>y</var> + 2
</p>
<p>
El volumen de una caja es <var>l</var> × <var>w</var> × <var>h</var>, donde <var>l</var>
representa la longitud, <var>w</var> la anchura y <var>h</var> la
altura de la caja.
</p>
<p>
Las variables <var>minSpeed</var> y <var>maxSpeed</var> controlan la velocidad mínima y máxima
del aparato en revoluciones por minuto (RPM).
</p>
Ejercicio propuesto: Ecuaciones y variables
Crea una página web con el código del ejemplo anterior, y añade un par de párrafos adicionales con cualquier ecuación que desees y comprueba los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código
El elemento <kbd>
El elemento HTML de entrada de teclado (<kbd>) representa un fragmento de texto en línea que denota una entrada del usuario, ya sea a través de un teclado convencional, comandos de voz o cualquier otro dispositivo de entrada de texto.
Por convención, el navegador renderiza el contenido de un elemento <kbd> utilizando su fuente monoespaciada predeterminada para que destaque visualmente. Veamos algunos ejemplos:
Por favor, pulsa Ctrl + Mayús + R para recargar una página de MDN.
Usa el comando help micomando para ver la documentación del comando «micomando».
Puedes crear un nuevo documento utilizando el atajo de teclado Ctrl + N.
<p>
Por favor, pulsa <kbd>Ctrl</kbd> + <kbd>Mayús</kbd> + <kbd>R</kbd> para recargar una página de MDN.
</p>
<p>
Usa el comando <kbd>help micomando</kbd> para ver la documentación del comando "micomando".
</p>
<p>
Puedes crear un nuevo documento utilizando el atajo de teclado <kbd>Ctrl</kbd> + <kbd>N</kbd>.
</p>
Ejercicio propuesto: Atajos de teclado
Crea una página web con el código del ejemplo anterior, añade un par de párrafos con cualquier atajo de teclado que conozcas y comprueba los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.
El elemento <samp>
El elemento de muestra HTML (<samp>) se utiliza para encerrar texto en línea que representa la salida (output) de muestra o el resultado devuelto por un programa informático. Su contenido se muestra habitualmente utilizando la fuente monoespaciada predeterminada del navegador (como Courier o Lucida Console) para diferenciarlo del texto normal.
Veamos un par de ejemplos:
Estaba intentando arrancar mi ordenador, pero me salió este mensaje tan irónico:
Teclado no encontrado
Pulse F1 para continuar
Cuando el proceso finalice, la utilidad mostrará el texto Escaneo completado. Se han encontrado N resultados. Entonces podrás proceder al siguiente paso.
Código HTML del ejemplo:
<p>Estaba intentando arrancar mi ordenador, pero me salió este mensaje tan irónico:</p>
<p>
<samp>Teclado no encontrado <br>Pulse F1 para continuar</samp>
</p>
<p>...</p>
<p>
Cuando el proceso finalice, la utilidad mostrará el texto <samp>Escaneo completado. Se han encontrado <em>N</em> resultados.</samp> Entonces podrás proceder al siguiente paso.
</p>
Ejercicio propuesto: Salida de muestra
Crea una página web con el código del ejemplo anterior, junto con un par de párrafos más, y comprueba los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código para asegurar que es correcto
Un ejemplo completo
Veamos ahora un ejemplo completo que combina todos estos elementos (<code>, <pre>, <var>, <kbd>, <samp>) para ver cómo interactúan entre sí.
A continuación mostramos el resultado visual:
var para = document.querySelector('p');
para.onclick = function() {
alert('¡Ay, deja de pincharme!');
}No deberías utilizar elementos de presentación como <font> y <center>.
En el ejemplo de JavaScript anterior, para representa un elemento de párrafo.
Selecciona todo el texto con Ctrl/Cmd + A.
$ ping mozilla.org PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
Y aquí el código fuente correspondiente:
<pre><code>var para = document.querySelector('p');
para.onclick = function() {
alert('¡Ay, deja de pincharme!');
}</code></pre>
<p>No deberías utilizar elementos de presentación como <code><font></code> y <code><center></code>.</p>
<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p>
<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
Ejercicio propuesto: Código, atajos y salida
Crea una página web con el código del ejemplo anterior, junto con algún bloque
<pre>...</pre>adicional, y comprueba los resultados en tu navegador.No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código .
Ejercicio propuesto: Comandos de Linux
Crea una página web que muestre una tabla con algunos de los comandos de Linux más importantes y su descripción de uso, siguiendo aproximadamente el modelo de la tabla que se muestra a continuación.
Debes cumplir los siguientes requisitos semánticos:
1. Utiliza la etiqueta<code>para los comandos en la columna de la izquierda.
2. Utiliza la etiqueta<kbd>para los ejemplos de entrada del usuario (user’s input) dentro de las descripciones.
3. Recuerda que la tabla debe tener encabezados (<th>) y un título o leyenda (<caption>).
| Comandos | Descripción |
|---|---|
passwd |
Cambia tu contraseña de usuario: 1. Escribe tu antigua contraseña 2. Introduce la nueva contraseña 3. Confirma la nueva contraseña |
~ |
Directorio personal del usuario (Home) (atajo para: /home/usuario) |
ls |
Lista las carpetas y archivos del directorio actual |
mkdir |
Crea un nuevo directorio dentro del actual: mkdir nuevodir |
cd |
Cambia de directorio: cd test (ir a un directorio llamado ‘test’) cd .. (ir al directorio padre/superior) cd ~ (ir al directorio personal) |
rm |
Elimina el archivo o directorio especificado: rm nombrearchivo (elimina un solo archivo) rm *.txt (elimina TODOS los archivos .txt del directorio actual) rm -r nombredir (elimina el directorio y sus archivos) ¡Por favor, ten cuidado al usar la opción -f! |
rmdir |
Elimina el directorio VACÍO especificado rmdir nombredir |
pwd |
Imprime la ruta absoluta actual |
man |
Muestra la página de manual del comando especificado: man ls (muestra la ayuda de ls) |
vi x.sh |
VI es un editor de texto. Si x.sh no existe, vi crea un nuevo archivo llamado
x.sh y lo abre; de lo contrario, simplemente abre el archivo existente. |
less archivotexto |
less es un paginador de texto. Abre (solo lectura) el archivo archivotexto. Puedes usar las flechas arriba y abajo para desplazarte por el texto; comparte muchos comandos con VI. |
chmod |
Cambia los permisos POSIX de un archivo o directorio. Permite proteger archivos contra accesos no deseados: r : permiso de lectura w : permiso de escritura x : permiso de ejecución chmod +x archivo.sh (permite la ejecución) chmod -w archivo.sh (deniega la escritura) |
chown |
Cambia el propietario de un archivo o directorio: chown usuario archivo.sh |
top |
Muestra los procesos en ejecución actualmente |
cat |
Imprime el contenido de un archivo en pantalla |
grep |
Filtra el archivo de texto especificado y muestra las líneas que contienen el patrón: grep patron archivo.sh También puedes usar tuberías (pipes) con la salida de otro comando: cat archivo.sh | grep home cat archivo.sh | grep "home page" |
Marcado de datos de contacto
HTML proporciona un elemento específico para marcar semánticamente la información de contacto: <address>. Este elemento es muy versátil y puede utilizarse en diversos contextos; por ejemplo, para facilitar los datos de contacto de una empresa en el encabezado o pie de página de un sitio web, o para indicar quién es el autor de un artículo o una publicación concreta.
Su funcionamiento es sencillo: basta con envolver los detalles de contacto dentro de esta etiqueta. Veamos un ejemplo básico:
<address>
<p>Fernando Ruiz, IES San Vicente, España</p>
</address>
No obstante, el contenido del elemento <address> puede albergar un marcado mucho más complejo. De hecho, la información suministrada puede adoptar la forma que mejor se ajuste al contexto, incluyendo cualquier dato necesario: dirección física, URL, correo electrónico, número de teléfono, redes sociales, coordenadas geográficas, etc. .
Regla importante: Debes tener en cuenta que siempre hay que incluir, como mínimo, el nombre de la persona, grupo u organización a la que hacen referencia dichos datos de contacto.
Veamos un ejemplo más completo y estructurado:
<address>
<p>
Juan Pérez<br>
Calle Mayor, 10<br>
Madrid, 28013<br>
España
</p>
<ul>
<li>Tel: 91 123 45 67</li>
<li>Email: [email protected]</li>
</ul>
</address>
También es correcto utilizar este elemento para referenciar información de contacto que se encuentra en otra página o enlace, como en el siguiente caso:
<address>
Puedes contactar con el autor en <a href="http://www.midominio.com/contacto">www.midominio.com</a>.<br>
Si encuentras algún error, por favor <a href="mailto:[email protected]">contacta con el webmaster</a>.<br>
También puedes visitarnos en:<br>
Fundación Mozilla<br>
331 E Evelyn Ave<br>
Mountain View, CA 94041<br>
EE. UU.
</address>
Ejercicio propuesto: Información de contacto
Crea una página web utilizando el código de los ejemplos anteriores y verifica el resultado en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código para asegurar que la estructura es correcta .
El elemento <figure>
El elemento HTML <figure> (Figura con leyenda opcional) representa contenido independiente (self-contained content), el cual puede ir acompañado de un título o leyenda opcional especificado mediante el elemento <figcaption>.
La figura, su leyenda y su contenido se referencian semánticamente como una única unidad.
Figuras con imágenes
Este es el uso más común: asociar imágenes con sus pies de foto. Por ejemplo:
Código HTML del ejemplo:
<figure>
<img src="https://picsum.photos/id/235/300/200"
alt="Paisaje nórdico.">
<figcaption>Paisaje nórdico</figcaption>
</figure>
<hr>
<figure>
<img src="https://picsum.photos/id/237/300/200"
alt="Perro pidiendo algo de comida">
<figcaption>Perro pidiendo comida</figcaption>
</figure>
Ejercicio propuesto: Imágenes con leyendas
Crea una página web utilizando el código del ejemplo anterior, añade un par de figuras (
Puedes utilizar cualquier imagen que te guste; por ejemplo, las del servicio «https://picsum.photos/images«, tal como hicimos en ejercicios de la unidad anterior.<figure>) nuevas con imágenes y elige una leyenda adecuada (<figcaption>) para cada una. Finalmente, comprueba los resultados en tu navegador. No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.
Figuras con poemas
El elemento <figure> no sirve solo para imágenes; también es excelente para enmarcar poemas o fragmentos literarios, como por ejemplo:
Caminante, son tus huellas
el camino y nada más;
Caminante, no hay camino,
se hace camino al andar.
Al andar se hace el camino,
y al volver la vista atrás
se ve la senda que nunca
se ha de volver a pisar.
Código HTML del ejemplo:
<figure>
<p>
Caminante, son tus huellas<br>
el camino y nada más;<br>
Caminante, no hay camino,<br>
se hace camino al andar.<br>
Al andar se hace el camino,<br>
y al volver la vista atrás<br>
se ve la senda que nunca<br>
se ha de volver a pisar.
</p>
<figcaption>
<cite>Proverbios y cantares</cite>, de Antonio Machado
</figcaption>
</figure>
Ejercicio propuesto: Poemas
Crea una página web con el código del ejemplo anterior (el de Machado), añade una nueva figura con otro poema que te guste (quizás de Lorca, Bécquer o Neruda) y comprueba los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código .
Figuras con código
El elemento <figure> es ideal para mostrar fragmentos de código que tienen un título descriptivo o que funcionan como ejemplos independientes.
Veamos un ejemplo práctico:
navigator:function EjemploNavigator() {
var txt;
txt = "Nombre en clave: " + navigator.appCodeName + "; ";
txt+= "Nombre del navegador: " + navigator.appName + "; ";
txt+= "Versión del navegador: " + navigator.appVersion + "; ";
txt+= "Cookies habilitadas: " + navigator.cookieEnabled + "; ";
txt+= "Plataforma: " + navigator.platform + "; ";
txt+= "Cabecera User-agent: " + navigator.userAgent + "; ";
console.log("EjemploNavigator", txt);
}Código HTML del ejemplo:
<figure>
<figcaption>Obtener detalles del navegador usando <code>navigator</code>:</figcaption>
<pre><code>
function EjemploNavigator() {
var txt;
txt = "Nombre en clave: " + navigator.appCodeName + "; ";
txt+= "Nombre del navegador: " + navigator.appName + "; ";
txt+= "Versión del navegador: " + navigator.appVersion + "; ";
txt+= "Cookies habilitadas: " + navigator.cookieEnabled + "; ";
txt+= "Plataforma: " + navigator.platform + "; ";
txt+= "Cabecera User-agent: " + navigator.userAgent + "; ";
console.log("EjemploNavigator", txt);
}
</code></pre>
</figure>
Ejercicio propuesto: Bloque de código en figura
Crea una página web con el código del ejemplo anterior, junto con otro más, y comprueba los resultados en tu navegador.
No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código .
Figuras con citas
Como vimos anteriormente, podemos usar <blockquote> por sí solo, pero si envolvemos la cita dentro de un elemento <figure>, podemos usar <figcaption> para indicar el autor o la fuente con mayor implicación semánticamente. Por ejemplo:
Si depurar es el proceso de eliminar errores de software, entonces programar debe ser el proceso de introducirlos.
Código HTML del ejemplo:
<figure>
<figcaption><cite>Edsger Dijkstra:</cite></figcaption>
<blockquote>
Si depurar es el proceso de eliminar errores de software,
entonces programar debe ser el proceso de introducirlos.
</blockquote>
</figure>
Ejercicio propuesto: Citas famosas (versión con figuras)
Crea una página web con el código del ejemplo anterior y añade algunas citas famosas más utilizando este mismo formato (
<figure>+<figcaption>+<blockquote>) para mostrar al menos diez citas.Finalmente, comprueba los resultados en tu navegador. No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.
Puedes reutilizar las citas que empleaste en ejercicios anteriores o buscar nuevas en los sitios que recomendamos previamente «https://proverbia.net/«, «https://www.mundifrases.com/«, o alguna en inglés como «https://www.brainyquote.com/«, o cualquier otra página web que conozcas.
Test
Comprueba tus conocimientos con este test sobre tablas y otros conceptos relacionados con esta unidad.
