HTML. Unidad 2. Formato de texto.

Introducción

Énfasis e importancia

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta unidad veremos algunos de los más comunes, como por ejemplo:

<b>Texto en negrita</b>
<strong>Texto importante</strong>
<i>Texto en cursiva</i>
<em>Texto enfatizado</em>
<u>Texto subrayado</u>
<mark>Texto marcado (o resaltado)</mark>

Otros elementos menos habituales

<small>Texto más pequeño</small>
<del>Texto eliminado</del>
<ins>Texto insertado</ins>
<sub>Subíndice</sub>
<sup>Superíndice</sup>

El elemento <strong>

Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:

Este líquido es altamente tóxico.

Cuento contigo. ¡No llegues tarde!

En HTML usamos el elemento <strong> para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por defecto, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento <span> y CSS, o un elemento <b> (explicado más adelante).

Ejercicio propuesto: Texto importante

Crea una página web con el siguiente texto (u otro similar), utilizando encabezados y párrafos, y añade además una importancia adicional a varias palabras dentro de cada párrafo.

Nota: El texto del ejemplo ha sido extraído de https://www.msf.es/quienes-somos/como-trabajamos y https://www.msf.es/quienes-somos/como-financiamos.
Médicos sin fronteras

Quiénes somos

Somos una organización de acción médico-humanitaria: asistimos a personas amenazadas por conflictos armados, violencia, epidemias o enfermedades olvidadas, desastres naturales y exclusión de la atención médica. La acción humanitaria es un gesto solidario de sociedad civil a sociedad civil, de persona a persona, cuya finalidad es preservar la vida y aliviar el sufrimiento de otros seres humanos: esta es nuestra razón de ser.

Debemos nuestra independencia financiera a los más de seis millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo. Gracias a ellas, nosotros decidimos a quién atendemos y cómo, y nuestro único interés es el de las poblaciones a las que asistimos. Con el fin de mejorar su situación, también podemos prestar testimonio para denunciar las situaciones que presenciamos. Pero no aspiramos a transformar una sociedad, sino a permitirle superar un periodo crítico: nuestro objetivo son las personas, no los Estados. Por este motivo, nuestras intervenciones son limitadas en el tiempo.

Cómo nos financiamos

La mayor parte de nuestros fondos son privados: en 2019, procedían de las 6,5 millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo, de las cuales casi 569.900 en España. En 2019, el 96,2% de nuestros ingresos mundiales eran de origen privado y el resto correspondía a organismos públicos, como las agencias de ayuda humanitaria de algunos Gobiernos.

No tenemos ánimo de lucro: no generamos beneficios para nosotros mismos, y destinamos los fondos recibidos a nuestra misión social –acción médica y testimonio– y a las tareas de administración y captación de recursos necesarias para cumplirla.

El elemento <em>

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:

Me alegro de que no llegues tarde.

Me alegro de que no llegues tarde.

La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.

En HTML usamos el elemento <em> («emphasis») para marcar estos casos:

<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>

El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores, que lo expresan con un tono diferente de voz. El navegador, de manera predeterminada, aplica el estilo de letra cursiva, pero no debes utilizar esta etiqueta solamente para establecer este estilo de letra cursiva. Para usar ese estilo, debes utilizar la etiqueta del elemento <span> y algo de CSS u otra etiqueta como el elemento <i> (explicado a continuación).

Ejercicio propuesto: Texto enfatizado

Crea una página web con el texto del ejemplo (u otro similar) utilizando encabezados y párrafos. A continuación aplica la etiqueta <em> a las expresiones que creas más relevantes.

Nota: el texto ha sido extraído de: https://as.com/meristation/2019/08/11/betech/1565556732_792381.html
Cómo escribir mensajes de WhatsApp en negrita, cursiva o subrayados

La app te permite cambiar el aspecto de las palabras que escribes de dos maneras. Aprende a subrayar y poner en negrita.

Desde que nos despertamos hasta que nos acostamos, la usamos a diario, constantemente, y ya es difícil imaginar el mundo sin ella. WhatsApp es de esas apps que han traspasado la barrera de meras aplicaciones y junto a otros elementos de la cultura electrónica como los emojis, se ha hecho un hueco en la sociedad, en el día a día. Y como toda app multitarea, WhatsApp oculta decenas de funciones desconocidas, pequeños trucos que nos hacen la experiencia más fácil y/o variada a la hora de usarla.

En Word, Pages y otros procesadores de texto estamos acostumbrados a cambiar el formato del texto con un sólo botón. De esta manera podemos colocar una cita en cursiva, subrayar encabezados o resaltar en negrita un nombre en particular. Y esto mismo puedes hacer en WhatsApp, ya que hace unos años que la app de mensajería admite un cambio de formato de texto entre sus funciones.

Los elementos <i>, <b> y <u>

Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con <b> (negrita o «bold»), <i> (cursiva o «italic») y <u> (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se utilizan habitualmente porque la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos. Sin embargo, HTML5 redefinió los elementos <b><i> y <u> con roles semánticos nuevos un tanto confusos (puedes encontrar más información en este hilo de StackExchange, y en HTML Living Standard).

Para clarificar un poco en qué momento podríamos usar estos elementos, nos podemos remitir a la siguiente regla de oro: el uso de <b><i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de cursiva no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

Por último, es conveniente añadir una observación muy importante acerca del subrayado (<u>): La mayoría de los lectores de una página web suelen asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado .

En resumen, y concretando más:

  • <i> se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento…
  • <b> se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales…
  • <u> se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos…

Ejercicio propuesto: Ejemplos de uso

Crea una página web para obtener el siguiente resultado:

Nombres científicos

El colibrí garganta de rubí (Archilochus colubris) es el colibrí más común en el este de América del Norte.

Extranjerismos

El menú era un mar de palabras exóticas como vatrushka, nasi goreng y soupe à l’oignon.

Un error ortográfico reconocido

Algún día aprenderé a deletrear mejor la palabra frigofírico.

Palabras clave destacadas en una serie de instrucciones
  1. Corta dos piezas de la hogaza de pan.
  2. Inserta una rodaja de tomate y una hoja de lechuga entre las rebanadas de pan.

Ejercicio propuesto: Negrita y cursiva

Crea una página web con el siguiente texto (u otro similar), utilizando un encabezado y párrafos, y aplica letra negrita y cursiva a las palabras correspondientes dentro de cada párrafo.

Nota: El texto del ejemplo ha sido extraído de https://www.escribirycorregir.com/la-letra-cursiva/.
Diez casos en los que demos emplear la letra cursiva

Títulos de obras literarias, periódicos, revistas, etcétera: Cien años de soledad, El País, Qué leer.

Títulos de obras de arte y composiciones musicales: Las señoritas de Avignon, Sinfonía nº. 5 de Beethoven.

Títulos de películas: El apartamento, La tentación vive arriba, Ben-Hur…

Palabras o expresiones que provengan de otro idioma: affaire, coaching, hardware.

Palabras empleadas con uso metalingüístico, como meras referencias, prescindiendo de su significado. Es lo que sucede cuando citamos una palabra: La palabra empoderamiento se ha puesto de moda en los últimos años.

Para resaltar partes del texto. Los motivos pueden ser varios, y no los vamos a enumerar en esta ocasión: Era una cuestión de amor propio, ¿me entiendes?

Advertencias o indicaciones en los textos: Sigue leyendo, Continúa en la página 75.

Locuciones del latín y de otras lenguas que no tienen adaptación al castellano: ad infinitum, alter ego, full time, delirium tremens.

Los apodos y sobrenombres que van intercalados entre el nombre y el apellido: Ernesto Che Guevara, Roberto Mano de Piedra Durán (boxeador panameño).

En las obras teatrales, para resaltar acciones o aportar algún dato que no pertenece al parlamento del personaje sino a la pluma del autor:
TÍO.- (Aparte a CASTELAR.) Pues tenía él razón. Beringola no ve tres en un burro
CASTELAR.- (Aparte al Tío). Beringola es un idiota.
(Por el primero derecha salen DANIEL Y FELIPE.)

Los elementos <del> e <ins>

El elemento <del> se utiliza para definir un texto que se ha eliminado de un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de un sitio web, cuando se ha eliminado parte del texto después de que el desarrollador haya subido una nueva versión.

Por otro lado, el elemento <ins> se utiliza para definir un texto que se ha insertado en un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de una página web, cuando se reemplaza algún texto después de que el desarrollador haya subido una nueva versión.

Depende del navegador cómo mostrar el texto dentro de estos elementos, pero la mayoría de ellos marcarán una línea sobre el texto eliminado y subrayarán el texto insertado de forma predeterminada.

Ejercicio propuesto: Texto reemplazado

Crea una página para mostrar varios párrafos donde anteriormente se dijeron algunas palabras u oraciones, pero ahora los autores han cambiado de opinión y quieren contarles a sus lectores una nueva versión de lo que piensan. Usando las etiquetas <ins> y <del>, muestra los textos anteriores y los nuevos de forma que quede claro que el nuevo texto está reemplazando al primero. El resultado obtenido debería ser similar al siguiente, añadiendo algunos otros ejemplos:

La Tierra es plana redonda.

El 31 de diciembre del 2020 se acabará el mundo no pasará nada.

...

El elemento <mark>

El elemento <mark> representa un texto marcado o resaltado como referencia o anotación, debido a su relevancia o importancia en un contexto particular.

Ejercicio propuesto: Datos relevantes

Crea una página web con el siguiente texto usando encabezados y párrafos, y a continuación resalta varias palabras o cifras dentro de los párrafos:

Nota: el texto utilizado se ha extraído de https://bloygo.yoigo.com/entretenimiento/los-records-guinness-mas-gamers-del-2020_74516616.html.
Récords de Super Mario

Mario Bros, el fontanero italiano, es el personaje de videojuegos más famoso del mundo. La primera vez que Mario apareció fue en 1981 en el juego virtual Donkey Kong, llamándose Jumpman (saltador, en español).

Dentro del universo de Mario Bros, el videojuego Super Mario Bros para NES de 1985 es el más vendido con más de 40,24 millones de copias vendidas a principios del 2019.

En la categoría de speed-runners, los más rápidos en completar un videojuego, en octubre del 2018, el usuario “somewes” consiguió el menor tiempo en completar Super Mario Bros, fijando el récord en 4 minutos y 55 segundos.

Récords de Fornite

Seas o no seas un gamer, has oído hablar de este famoso videojuego. Fornite es un videojuego de lucha, supervivencias y batallas desarrollado por Epic Games y lanzado en 2017.

Tal ha sido el éxito de Fornite que, el 20 de marzo del 2019, se convirtió en el primer battle royale con 250 millones de jugadores registrados. Además, Fornite también superó el récord de juego con más jugadores simultáneos llegando a alcanzar los 10,8 millones de jugadores.

...

Ejercicio propuesto: Resultado de una búsqueda

Crea una página web similar a la del ejemplo, y resalta todas las apariciones de una palabra en concreto a lo largo de todo el texto. En este caso resaltaremos todas las apariciones de «Minecraft» que encontremos:

Nota: el texto del ejemplo se ha extraído de https://hipertextual.com/2015/01/minecraft-records-guinness-2015.
Resultados de búsqueda de la palabra "Minecraft":

Minecraft consigue 12 récords mundiales.

En el Guinness Book of World Records 2015: Gamer's Edition, Minecraft consiguió 12 récords mundiales. El impacto que tiene este juego parece no tener límites.

Lo que ha logrado Minecraft hasta el momento es de esa clase de fenómenos que convierten su entorno en un antes y un después. Su forma peculiar de jugar ha hecho que propios y extraños del mundo gamer dediquen su tiempo a construir sus propios mundos.

El primer país modelado a escala real en un videojuego establece un nuevo récord para Minecraft. Danish Geodata Agency publicó la recreación a escala 1:1 de Dinamarca. Se consiguió representar todos los edificios del país utilizando cuatro mil millones de bloques.

...

Los elementos <sub> y <sup>

En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos <sup> y <sub> se ocupan de ello. Por ejemplo:

Ejercicio propuesto: Subíndices

Crea una página web con el siguiente texto, añadiendo algún ejemplo más que conozcas o encuentres por Internet:

Una de mis moléculas favoritas es C8H10N4O2, también conocida como "cafeína".

Las posiciones de las coordinadas horizontales a lo largo del eje X se representan como x1 ... xn.

...

Ejercicio propuesto: Nomenclatura y formulación

Crea una página web para mostrar la formulación química de algunos compuestos comunes, aplicando formato de superíndices a los números (debes imprimir cada compuesto en un párrafo diferente, utilizando el elemento <p>). El resultado debería ser similar al siguiente, donde los puntos suspensivos indican que debes añadir algunos otros ejemplos que conozcas o encuentres por Internet:

Oxígeno: O2
Agua: H2O
Dióxido de carbono: CO2
Vinagre: C2H4O2
Bicarbonato de sodio: NaHCO3
Azúcar: C12H22O11
Alcohol: C2H5OH
...

Ejercicio propuesto: Superíndices

Crea una página web para mostrar el siguiente texto, añadiendo algunos otros ejemplos:

El teorema de Pitágoras se expresa con la siguiente ecuación: a2 + b2 = c2

Una de las ecuaciones más conocidas en física es: E = mc2

El número ordinal "quinto" se abrevia en inglés de esta forma: 5th

...

Ejercicio propuesto: Potencias

Imprime los cuadrados de los números del 1 al 25. Cada número deberá colocarse en una línea independiente (utilizando el elemento <br />). Justo después de cada número se colocará el número 2 con formato de superíndice, y a continuación el signo igual, y el resultado. Se debería mostrar algo del siguiente estilo:

12 = 1
22 = 4
...
252 = 625

El elemento <span>

Si necesitamos marcar un texto pero consideramos que ninguna de las etiquetas existentes es una buena opción, podemos utilizar el elemento <span>. Así, podemos aislar un fragmento de texto sin introducir a priori cambios en la apariencia del texto marcado. La ventaja de esta etiqueta se aprecia al usarla junto con algunos atributos tales como class o style, combinados con algún código CSS. Trabajaremos en esto más adelante, pero de momento echemos un vistazo a este código de ejemplo, donde usamos un elemento <span> para colorear solo una parte del texto dentro de un párrafo:

<p>Mi madre tiene los ojos <span style="color:blue">azules</span>.</p>

Ejercicio propuesto: Color del texto

Utilizando los elementos <p> y <span>, crea una página web para mostrar el color de ojos de gente que conozcas, como por ejemplo: azules (blue), marrones (brown), verdes (green) o grises (gray).

Test

Comprueba tus conocimientos con este test sobre formato de texto y otros conceptos relacionados con esta unidad.