HTML para principiantes (Parte 9): Formato de texto

Redes sociales

HTML

En el artículo anterior aprendiste como utilizar los estilos en HTML, utilizando el atributo style. HTML dispone también de elementos especiales que dotan a los texto de formatos especiales. Los elementos de formato utilizados en HTML permiten obtener los siguientes efectos:

Texto en negrita

Hay dos etiquetas que harán que tu texto se muestre en negrita. Utilizar una u otra es indiferente (aunque pueda atribuírseles un significado distinto a cada una de ellas no vamos a prestarle atención ya que el resultado final es el mismo). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Las utilizaremos de la siguiente forma:

<p>Vamos a escribir una palabra en <b>negrita</b> y a continuación <strong>otra</strong>.</p>

que en el navegador se mostrará así:

Vamos a escribir una palabra en negrita y a continuación otra.

Texto en cursiva

Al igual que con la negrita, hay dos elementos para poner texto en cursiva, que puedes emplear indistíntamente. Uno es <i> y otro <em>, y aunque como ocurre con la negrita, pueden atribuírseles significados distintos, el resultado en pantalla es el mismo. Aquí te mostramos un ejemplo de cómo utilizarlas:

<p>Vamos a escribir una palabra en <i>cursiva</i> y a continuación <em>otra</em>.

que se vería así:

Vamos a escribir una palabra en cursiva y a continuación otra.

Texto resaltado

Puede resaltar parte del texto, utilizando la etiqueta <mark> de la siguiente manera:

Lo que viene a continuación <mark>es más importante</mark> que el resto.

que se mostrará así:

Lo que viene a continuación es más importante que el resto.

Textos más grandes y más pequeños

Si deseas destacar una palabra o conjunto de palbras modificanto su tamaño, sin necesidad de utilizar los elementos de encabezado <h1> a <h6>, puedes emplear las etiquetas <small> y <big>. Evidentemente, <small> reducirá el tamaño del texto y <big> lo aumentará. La etiqueta <big> se puede anidar, para obtener tamaños aún más grandes, tal y como se muestra en el siguiente ejemplo:

Las siguientes palabras se van escribir <small>más pequeñas</small>, estas <big>más grandes</big> y estas <big><big>aún más grandes</big></big>.

En el navegador visualizarás lo siguinte:

Las siguientes palabras se van escribir más pequeñas, estas más grandes y estas aún más grandes.

Texto tachado

Para mostrar texto tachado puedes utilizar la etiqueta <del>. Por ejemplo:

El siguiente texto <del>está tachado</del>.

que visto en el navegador sería:

El siguiente texto está tachado.

Superíndices y suníndices

Gracias a las etiquetas <sup> y <sub> podrás escribir superíndices y subíndices. Vemos un ejemplo a continuación:

<p>La fórmula química del agua es: H<sub>2</sub>O<br/>
La expresión matemática de 5 elevado al cuadrado es: 5<sup>2</sup></p>

En el navegador se mostrará de la siguiente forma:

La fórmula química del agua es: H2O
La expresión matemática de 5 elevado al cuadrado es: 52

Ejemplo

A continuación, se muestra el código completo de un documento HTML, en el que se utilizan los formatos de texto explicados en este artículo. Para ver el resultado del mismo: abre tu editor texto favorito: el Bloc de notas de Windows, TextEdit de Mac o gEdit de Linux, por citar algunos de los más usuales, y escribe o copia y pega lo siguiente:

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Formatos de texto HTML - Webdisenia</title>
 </head>
<body>
 <H1>Formatos de texto</H1>
 <p>Vamos a escribir una palabra en <b>negrita</b> y a continuación <strong>otra</strong>.</p>
 <p>Vamos a escribir una palabra en <i>cursiva</i> y a continuación <em>otra</em>.</p>
 <p>Lo que viene a continuación <mark>está resaltado</mark> del resto del texto.<p>
 <p>Texto <small>pequeño</small>, texto <big>grande</big>, texto <big><big>más grande</big></big>.</p>
 <p>El siguiente texto <del>está tachado</del>.</p>
 <p>La fórmula química del agua es: H<sub>2</sub>O</p>
 <p>La expresión matemática de 5 elevado al cuadrado es: 5<sup>2</sup></p>
</body>
</html>

Guarda el documento con el nombre: formatos.html (los documentos HTML deben tener extensión .htm o .html)

Sal de editor de texto, busca el documento y haz doble clic en él. El resultado final, dependerá del navegador que utilices, pero sera muy similar al siguiente:

fromatos HTML

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *