• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Organizar el texto

Log in or subscribe for free to enjoy all this course has to offer!

Bueno, la página en blanco es bonita, pero si dejáis vuestra página web así es probable que no tenga mucho éxito.

En este capítulo vamos a conocer un buen número de etiquetas HTML. Algunas etiquetas se usan desde la primera versión de HTML y otras se han introducido más recientemente en HTML5.

En este capítulo vamos a ver en orden sucesivo:

  • cómo teclear párrafos;

  • cómo organizar la página con títulos;

  • cómo resaltar palabras determinadas en el texto;

  • cómo organizar la información en listas.

¿Estáis preparados? Entonces, ¡vamos! Veréis que no es complicado.

Párrafos

El texto en una página web se teclea habitualmente en párrafos. En el lenguaje HTML la etiqueta <p> se usa para delimitar los párrafos.

<p>¡Hola y bienvenidos a mi sitio!</p>
  • <p> significa "comienzo del párrafo";

  • </p>significa "fin del párrafo";

Como os conté en el capítulo anterior tecleamos el contenido del sitio web entre las etiquetas <body></body>. Así que tenemos que poner nuestro párrafo dentro de estas dos etiquetas y ¡finalmente tendremos nuestra primera página web con texto!

Así que voy a coger exactamente el mismo código del capítulo anterior y lo voy a añadir al párrafo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Párrafos</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio!</p>
</body>
</html>

¡Probadlo, veréis los resultados!
Vale, no es la panacea, pero es un buen comienzo.

Pero no vamos a dejarlo cuando las cosas están yendo tan bien. Ahora vamos a ver algo que es un pelín especial en HTML: el salto de línea. Parece simple, pero realmente no funciona como un procesador de texto común...

Crear una línea nueva

En HTML si presionáis la tecla Enter no se crea una línea nueva en la forma en la que estáis acostumbrados. Así que probad este código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pruebas de salto de línea</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio web!
Esta es mi primera prueba así que por favor, tomadlo en cuenta, estoy aprendiendo poco a poco cómo funciona esto.
De momento está un poco vacío, ¡pero volved en 2 o 3 días cuando haya aprendido algunas cosas más y os puedo asegurar que os sorprenderéis!</p>
</body>
</html>

¡¡Todo el texto se muestra en la misma línea aunque haya un salto de línea en el código!! Darle a la tecla del Enterfrenéticamente en el editor de texto, por lo tanto, no sirve de nada.

Como podríais esperar, sin embargo, existe por supuesto una forma de empezar una línea nueva en HTML.

De hecho, si queréis teclear un párrafo nuevo solo necesitáis usar una segunda etiqueta <p>. ¡Así que al final vuestro código HTML debería estar lleno de etiquetas de párrafos!
¡Así que al final vuestro código HTML debería estar lleno de etiquetas de párrafos!

Un ejemplo:

<html>
<head>
<meta charset="utf-8" />
<title>Párrafos</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio!
Esta es mi primera prueba así que por favor, tomadlo en cuenta, estoy aprendiendo poco a poco cómo funciona esto.</p>

<p>De momento está un poco vacío, ¡pero volved en 2 o 3 días cuando haya aprendido algunas cosas más y os puedo asegurar que os sorprenderéis!</p>
</body>
</html>

El resultado se muestra en la figura siguiente.

Dos párrafos con 2 etiquetas <p>
Dos párrafos con 2 etiquetas <p>

Sí, ¿pero qué pasa si solo quiero pasar a la línea siguiente en un párrafo dando comienzo a una línea nueva?

Bueno, ¿adivinad qué? ¡Hay una etiqueta que se llama «salto de línea»!
Es una etiqueta huérfana que solo se usa para indicar el salto de línea: <br />. La tenéis que colocar dentro de un párrafo.

Aquí tenemos la forma de usarla en un código:

<html>
<head>
<meta charset="utf-8" />
<title>Saltos de línea</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio web!<br />
Esta es mi primera prueba así que por favor, tomadlo en cuenta, estoy aprendiendo poco a poco cómo funciona esto.</p>

<p>De momento está un poco vacío, ¡pero volved en 2 o 3 días cuando haya aprendido algunas cosas más y os puedo asegurar que os sorprenderéis!</p>
</body>
</html>

Entonces, ¿habéis entendido?

  • <p> </p>: para organizar el texto en párrafos;

  • <br />: para hacer un salto de línea.

Ahora ya sabemos cómo teclear párrafos, vamos a ver cómo crear títulos.

Títulos

Ya que el contenido de vuestra página incluye varios párrafos, va a ser difícil que vuestros visitantes se sitúen. Es aquí donde los títulos ganan utilidad.

En HTML se os mima, podéis seleccionar seis niveles de títulos diferentes. Con esto quiero decir que podéis decir «este es un título muy importante», «este es un título un poco menos importante», «este es un título mucho menos importante», etc. Por consiguiente, tenéis seis etiquetas de título diferentes:

  • <h1> </h1>: significa «título muy importante". En general se usa para mostrar el título de la página al comienzo de la página.

  • <h2> </h2>: significa "título importante".

  • <h3> </h3>: asimismo, esto significa un título un poco menos importante (podéis decir «subtítulo» si queréis).

  • <h4> </h4>: el título es incluso menos importante.

  • <h5> </h5>: el título no es importante.

  • <h6> </h6>: el título no es nada importante.

Qué no os desconcierten todas estas etiquetas. De hecho, seis niveles de títulos son muchos. En la práctica yo personalmente uso solo las etiquetas <h1>, <h2> y <h3>y muy raras veces las otras (normalmente no necesito seis niveles de títulos diferentes). Vuestro navegador muestra el título realmente importante en caracteres muy grandes, los títulos que son un poco menos importante en caracteres menos grandes, etc.

Intentad crear una página web con títulos para ver cómo se ve:

<html>
<head>
<meta charset="utf-8" />
<title>Niveles de títulos</title>
</head>

<body>
<h1>Título muy importante</h1>
<h2>Título importante</h2>
<h3>Título un poco menos importante (subtítulo)</h3>

<h4>No es un título importante</h4>
<h5>Título sin importancia</h5>
<h6>Título sin ninguna importancia</h6>
</body>
</html>

Vale, os daré un ejemplo de cómo usar los títulos en una página web (veréis que no uso todas las etiquetas):

<html>
<head>
<meta charset="utf-8" />
<title>Presentación de mi sitio web</title>
</head>

<body>
<h1>¡Hola y bienvenidos a mi sitio web!</h1>

<p>¡Hola y bienvenidos a mi sitio web: SdZ.<br /> ¿Cuál es el contenido del sitio web SdZ?</p>

<h2>Cursos de formación para principiantes</h2>

<p>El sitio web SdZ proporciona cursos de formación (tutoriales) para principiantes; ¡no se requiere ningún conocimiento para hacer estos cursos!</p>

<p>¡Por lo tanto, podéis aprender, sin tener ningún conocimiento previo, a crear un sitio web y a programar y construir entornos 3D!</p>

<h2>Una comunidad activa</h2>

<p>¿Tenéis algún problema o hay algo en el curso que no entendáis? ¿Necesitáis ayuda con la creación de vuestro sitio web?<br /> ¡Visitad los foros! Descubriréis que no estáis solos en esto e indudablemente encontraréis a alguien que os ayudará encantado a solucionar vuestro problema.</p>
</body>
</html>

¡Esta es una página web que está cogiendo forma!

¡Sí, pero quiero centrar el título, escribirlo en rojo y subrayarlo!

Haremos todo eso cuando aprendamos CSS en la segunda parte del curso. Me gustaría indicar que <h1> no significa «Times New Roman, tamaño 16 pt.», sino « título importante ».

Cuando uséis el lenguaje CSS podréis decir: «quiero de los títulos importantes estén centrados, sean rojos y estén subrayados». De momento solo estamos estructurando la página en HTML. Estamos escribiendo el contenido antes de pasarlo bien dándole formato.

Resaltar

Algunas palabras en los párrafos son algunas veces más importantes que otras y querréis que resalten. El HTML proporciona varias formas para resaltar el texto de la página.

Enfatizar

Para enfatizarel texto, tenéis que usar la etiqueta <em> </em>.
Es muy simple de usar, ¡todo lo que tenéis que hacer en encerrar las palabras a enfatizar dentro de estas etiquetas! Voy a volver a usar el ejemplo de hace un momento y a enfatizar algunas palabras:

<html>
<head>
<meta charset="utf-8" />
<title>Enfatizar</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio web!<br />
Esta es mi primera prueba así que por favor, <em>tomadlo en cuenta</em>, estoy aprendiendo poco a poco cómo funciona esto.</p>
</body>
</html>

Como podéis ver al usar la etiqueta <em>esta tiene un efecto, coloca el texto en cursiva. De hecho, es el navegador él que elije la forma en la que se muestran las palabras. Le diremos que las palabras son bastante importantes y para enfatizar esta información cambia la apariencia del texto con el uso de cursiva.

Enfatizar considerablemente

Para enfatizar considerablemente un texto, podéis usar la etiqueta <strong> que significa «énfasis fuerte» o si preferís «importante». Se usa exactamente de la misma forma que <em>:

<html>
<head>
<meta charset="utf-8" />
<title>Énfasis fuerte</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio web!<br />
Esta es mi primera prueba así que por favor, <strong>tomadlo en cuenta</strong>, estoy aprendiendo poco a poco cómo funciona esto.</p>
</body>
</html>

Sin lugar a dudas veréis que el texto aparecerá en negrita. También en este caso la negrita es un solo una consecuencia . El navegador eligió mostrar las palabras importantes en negrita para hacer que destaquen más.

La etiqueta <strong> no significa «negrita» sino «importante». Podéis decidir más adelante en CSS si queréis mostrar las palabras «importantes» de una forma diferente a la negrita.

Marcado de texto

La etiqueta <mark> se usa para resaltar visualmente una parte del texto. El extracto no se tiene que considerar necesariamente importante, pero queréis que destaque del resto del texto. Esto puede ser útil para resaltar texto que sea relevante, por ejemplo después de buscar en vuestra página web.

<html>
<head>
<meta charset="utf-8" />
<title>Marcado de texto</title>
</head>

<body>
<p>¡Hola y bienvenidos a mi sitio web!<br />
Esta es mi primera prueba así que por favor, <mark>tomadlo en cuenta</mark>, estoy aprendiendo poco a poco cómo funciona esto.</p>
</body>
</html>

Por definición <mark> tiene el efecto de resaltar el texto. Podemos cambiar en CSS la forma en la que se muestra (decidir resaltar en otro color, poner el texto en un cuadro, etc.) Es el mismo principio como el que os conté para las etiquetas anteriores: indican la relevancia de las palabras y no la forma en la que deberían mostrarse.

No os olvidéis: HTML para el contenido, CSS para el estilo

Puede parecer que estoy rizando el rizo, pero es muy importante que entendáis esto correctamente, ya que los principiantes a menudo cometen este gran error en esta etapa. Ven las etiquetas<em>, <strong>, <mark>… y se cuentan a sí mismos: «¡Genial, ya sé cómo poner el texto en cursiva, negrita y subrayarlo en HTML!»

Y aún así... ¡esto no es para lo que se usan estas etiquetas! Ya sé, ya sé, me vais a decir: «sí, pero cuando uso <strong>el texto aparece en negrita, entonces se tiene que usar para poner en negrita». Aún así, es un error creer que esta etiqueta se usa para hacer eso.

La finalidad de las etiquetas es indicar la relevanciadel texto. Por tanto, <strong> le dice al ordenador que «este texto es importante». Eso es todo.
Y para mostrar que el texto es importante, el ordenador decide ponerlo en negrita, ¡pero podría estar escrito igualmente en rojo! Aunque la mayoría de los navegadores muestren el texto importante en negrita nada les exige que lo hagan así.

No lo entiendo. ¿Qué sentido tiene que el ordenador sepa que un texto es importante?
¡No es lo suficientemente inteligente para entender!

¡Pensadlo otra vez! Muchos programas analizan el código fuente de las páginas web y aún más importante los robots de los motores de búsqueda. Estos robots rastrean la Red y leen el código HTML de todos los sitios. Este es el caso de los robots de Google y Bing por ejemplo. Como ellos lo ven, las palabras clave «importantes» suelen tener más valor, así que si alguien hace una búsqueda con estas palabras es más probable que se encuentre con vuestro sitio web.
Esto es por supuesto una explicación superficial y no deberíais concluir que el uso descontrolado de la etiqueta <strong> de alguna forma va a mejorar vuestro ranking de búsqueda. Solo tenéis que confiar en los ordenadores, ellos entienden lo que significa un texto «importante» y pueden usar esa información.

Entonces, ¿cómo ponéis concretamente un texto en negrita o lo escribís en rojo y todo eso?

Todo eso se hace en CSS. Recordad:

  • HTML define el contenido (contenido lógico de elementos);

  • CSS define el estilo (apariencia).

Veremos el CSS más adelante de momento nos centraremos en el HTML y sus etiquetas, cada una de ellas tienen un significado concreto.

Listas

Las listas normalmente nos permiten organizar el texto y ordenar la información.
Vamos a descubrir dos tipos de listas aquí:

  • listas no ordenadas o listas con viñetas;

  • listas ordenadas o listas enumeradas.

Listas no ordenadas

Una lista no ordenada tiene esta apariencia:

  • Fresas

  • Frambuesas

  • Cerezas

Es un sistema que nos permite crear una lista sin ningún concepto de orden (no hay «primero» o «último»). Crear una lista no ordenada es muy sencillo. Simplemente usad la etiqueta <ul> cerrada posteriormente con </ul>.
Entonces, empezad introduciendo esto:

<ul></ul>

Y ahora esto es lo que vamos a hacer: vamos a escribir cada elemento de la lista dentro de las etiquetas <li></li>. Cada una de estas etiquetas tienen que estar situadas entre <ul> y </ul>. Vais a entender esto de inmediato con este ejemplo:

<ul>
    <li>Fresas</li>
    <li>Frambuesas</li> 
    <li>Cerezas</li>
</ul>

El resultado se muestra en la figura siguiente.

Una lista no ordenada
Una lista no ordenada

Tened en cuenta que la lista no se ha colocado dentro de <body></body>. Para mantener el código de la página legible de ahora en adelante no voy a incluir en él todo lo que veamos.

Así que recordad estas dos etiquetas:

  • <ul></ul> delimita la lista completa;

  • <li></li> define un elemento de la lista (una viñeta).

Podéis incluir todos los elementos que queráis, no únicamente tres.

¡Así que ahora sabéis cómo crear una lista con viñetas! No es difícil una vez que entendáis cómo anidar las etiquetas.

Lista ordenada

Una lista ordenada funciona de la misma forma únicamente cambia la etiqueta: tenéis que sustituir <ul></ul> por <ol></ol>.
No cambiéis nada dentro de la lista: siempre tenéis que usar las etiquetas <li></li> para delimitar los elementos de la lista.

Como es especialmente intuitivo os voy a dejar que admiréis la simplicidad de este ejemplo (los resultados se muestran en la figura de abajo):

<h1>Mi día</h1>
 
<ol>
    <li>Me levanto.</li>
    <li>Como y bebo.</li>
    <li>Me vuelvo a dormir.</li>
</ol>
Una lista ordenada
Una lista ordenada

Comparado con el ejemplo anterior todo lo que ha cambiado es la etiqueta <ol>.

En resumen

  • HTML tiene muchas etiquetas que nos permiten organizar el texto de la página. Estas etiquetas proporcionan indicaciones, como «este es un párrafo», «esto es un título», etc.

  • La etiqueta <p> </p> define los párrafos y la etiqueta <br /> el salto de línea.

  • Hay seis niveles de títulos, desde <h1> </h1> hasta <h6> </h6>, los cuales se usan en función de la importancia del título.

  • Podéis resaltar determinadas palabras con las etiquetas <strong>, <em> y <mark>.

  • Para crear listas, tenéis que usar la etiqueta <ul> (lista no ordenada con viñetas) o la etiqueta <ol> (lista ordenada). Los elementos se incluyen dentro de la lista con la etiqueta <li> por cada elemento.

Example of certificate of achievement
Example of certificate of achievement