UT 2: Lenguajes de Marcas: HTML
2.5.3.- Párrafos
Para la creación de párrafos usamos la etiqueta <p>...</p>.
Es una de las etiquetas más utilizadas de HTML y se trata de un elemento de línea.
Antes de manejar esta etiqueta, es necesario comprender como es interpretado el texto que escribimos
en dicha etiqueta. Cuando una navegador lee el código HTML de una página, todos los espacios
múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un
único espacio.
También hemos de tener en cuenta, que la etiqueta </p>, provoca siempre un salto de línea al finalizar
el texto que compone el párrafo.
Ejemplo 5: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Mi primera página WEB</title>
<!-- Este es un comentario HTML, el usuario no lo ve en el navegador -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Aquí empieza la página -->
<p> El conductor del coche le preguntó si se encontraba mal</p>
<p> El conductor del coche
le preguntó si se encontraba
mal</p>
</body>
</html>
Sin embargo, cuando vemos el resultado de esta página en nuestro navegador web, obtenemos el
siguiente resultado:
11
UT 2: Lenguajes de Marcas: HTML
Figura 8. Ejemplo 5. Problema con los párrafos
En este ejemplo podemos observar como todos los saltos de líneas y separaciones en el texto, han
sido interpretados por el navegador como un sólo espacio en blanco.
En cuanto a los atributos, uno de los más usados para esta etiqueta es el atributo align, que ya hemos
visto anteriormente con la línea horizontal.
Solución al problema de los espacios en blanco dentro de párrafo
El problema de los múltiples espacios en blanco, lo solucionamos mediante la utilización de
Solución al problema de saltos de línea dentro de párrafo
XHTML nos ofrece una etiqueta que nos permite mostrar el texto preformateado, es decir, que el
navegador nos muestre el texto, tal cual lo escribimos nosotros en el editor.
Para esto utilizamos la etiqueta <pre>...</pre>.
12
UT 2: Lenguajes de Marcas: HTML
Ejemplo 6: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Mi primera página WEB</title>
<!-- Este es un comentario HTML, el usuario no lo ve en el navegador -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Aquí empieza la página -->
<h3> Párrafo sin saltos de línea ni uso del nbsp</h3>
<p> El conductor del coche
le preguntó si se encontraba
mal
</p>
<h3>Párrafo sin saltos de línea pero con uso de nbsp</h3>
<p> El conductor
del coche
le preguntó si se encontraba
mal
</p>
<h3>Párrafo preformateado</h3>
<pre>El conductor del coche
le preguntó si se encontraba
mal
</pre>
</body>
</html>
13
UT 2: Lenguajes de Marcas: HTML
Sin embargo, cuando vemos el resultado de esta página en nuestro navegador web, obtenemos el
siguiente resultado:
Figura 9. Ejemplo 6. Problemas con los párrafos
2.5.4.- Saltos de línea
Para solucionar el problema anteriormente comentado de los saltos de línea, y forzar a que se lleve a
cabo un salto de línea dentro de un párrafo, usamos la etiqueta <br/>, en el punto del párrafo donde
queremos provocar dicho salto de línea.
14
UT 2: Lenguajes de Marcas: HTML
Ejemplo 7: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Mi primera página WEB</title>
<!-- Este es un comentario HTML, el usuario no lo ve en el navegador -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Aquí empieza la página -->
<h3> Párrafo sin saltos de línea ni uso del nbsp</h3>
<p> El conductor del coche
le preguntó si se encontraba
15
UT 2: Lenguajes de Marcas: HTML
mal
</p>
<h3>Párrafo sin saltos de línea pero con uso de nbsp</h3>
<p> El conductor
del coche
le preguntó si se encontraba
mal
</p>
<h3>Párrafo con saltos de línea pero con uso de nbsp</h3>
<p> El conductor
del coche<br/>
le preguntó si se encontraba<br/><br/><br/>mal </p>
<h3>Párrafo preformateado</h3>
<pre>El conductor del coche
le preguntó si se encontraba
mal
</pre>
</body>
</html>
Y el resultado lo podemos ver en la siguiente imagen:
16
UT 2: Lenguajes de Marcas: HTML
Figura 10. Ejemplo 7. Problemas con los párrafos
2.5.5.- Añadir Comentarios
Para añadir cualquier comentario en una página html, usamos <!--- comentario --->
2.5.7.- Etiqueta center
Al igual que con el atributo align=”center” de un párrafo podemos centrar todo el texto del mismo,
con la etiqueta center, podemos centrar todos los elementos html que se encuentren entre:
<center>...</center>
17
UT 2: Lenguajes de Marcas: HTML
2.6.- Formatos básicos
2.6.1.- Etiquetas para destacar texto
➢ <em>...</em>: La etiqueta <em> marca un texto indicando que su importancia es mayor que
la del resto del texto. Por defecto, los navegadores muestran los elementos <em> en cursiva
para hacer evidente su importancia.
➢ <strong>...</strong>: La etiqueta <strong> indica que un determinado texto es de la mayor
importancia dentro de la página. Por defecto, los navegadores muestran los elementos
<strong> en negrita, para indicar que son los más importantes.
Ejemplo 8: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Uso de em y strong</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como <em>muy importantes</em> y otros segmentos como <strong>los
más importantes</strong>.</p>
</body>
</html>
El resultado lo podemos ver en la siguiente imagen:
Figura 11. Ejemplo 8. Uso de em y strong
18
UT 2: Lenguajes de Marcas: HTML
2.6.2.- Otros Estilos
➢ <b>...</b>: Texto en negrita
➢ <i>...</i>: Texto en cursiva
➢ <strike>...</strike>: Texto tachado
➢ <big>...</big>: Aumenta el tamaño por defecto del texto
➢ <small>...</small>: Disminuye el tamaño por defecto del texto
➢ <sub>...</sub>: Texto como subíndice
➢ <sup>...</sup>: Texto como superíndice
➢ <u>...</u>: Texto subrayado
Nuevas en Html5:
<del>...</del> para mostrar un texto tachado.
<mark>...</mark> para poner un texto subrayado (nuevo en html5).
<q>...</q> para mostrar una pequeña cita.
<cite>...</cite> para mostrar el título de una referencia bibliográfica.
<time>...</time> para mostrar horas.
<address>...</address> para mostrar direcciones.
<blockquote>...</blockquote> para poner citas largas.
2.7.- Codificación de Caracteres
Una consideración importante directamente relacionada con el texto de las páginas HTML es la
codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que
se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:
✔ Los caracteres que utiliza HTML para definir sus etiquetas (<, > y ") no se pueden utilizar
libremente.
✔ Los caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡, etc.) pueden ser
problemáticos dependiendo de la codificación de caracteres utilizada.
La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas
expresiones llamadas entidades HTML y que representan a cada carácter:
19
UT 2: Lenguajes de Marcas: HTML
Entidad Carácter
< <
> >
& &
" “
' '
La solución a la segunda limitación consiste en sustituir los caracteres reservados de HTML por otras
entidades HTML y que representan a cada carácter:
Entidad Carácter
ñ ñ
Ñ Ñ
á á
é é
í í
ó ó
ú ú
Á Á
É É
Í Í
Ó Ó
Ú Ú
€ €
© ©
® ®
20
UT 2: Lenguajes de Marcas: HTML
Si se utilizan las entidades HTML en vez de los caracteres problemáticos, es indiferente pasar de una
codificación de caracteres a otra diferente pero esto es muy dependiente del navegador.
2.8.- Propiedades de un texto
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Podemos insertar el texto
entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:
➢ Cambiar el tamaño del texto
Mediante el uso del atributo size y asignándole un valor numérico.
➢ Cambiar el color del texto
Mediante el uso del atributo color. Para especificar el color podemos hacerlo, o bien
poniendo el nombre del color en inglés, o bien poniendo el valor hexadecimal del color
precedido por el carácter #.
➢ Cambiar el tipo del letra del texto
Mediante el uso del atributo face. Para especificar el tipo de letra, ponemos el nombre del
tipo de letra que deseamos usar. Lo recomendable es poner al menos tres tipos de letras
diferentes, separados por coma, de tal manera que si el ordenador del usuario no tiene el
primero de los tipos de letras, intentará usar el segundo, si tampoco lo tiene, intentará
usar el tercero....
Ejemplo 9: Código XHTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859" />
<title>Jacarandá :: XHTML :: Ejemplo de uso de font</title>
</head>
<body>
<h1>Propiedades de texto</h1>
<p>
<font color="blue" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Ejemplo de uso de font
con tamaño de letra 4, y tipo de letra Comic Sans MS, Arial o MS Sans Serif y color azul</font>
</p>
</body>
21
UT 2: Lenguajes de Marcas: HTML
</html>
Figura 12. Ejemplo 9. Uso de FONT
2.8.1.- Color de fondo y color de texto para toda la página
Otra forma de especificar el color para todo el texto de nuestra página es mediante el atributo text de
la etiqueta <body>, y este atributo si que es bien interpretado por todos los navegadores.
También podemos especificar el color para todo el fondo de nuestra página mediante el atributo
bgcolor de la etiqueta <body>.
Ejemplo 10: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>Jacarandá :: XHTML :: Mi primera página WEB</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="green" text="red">
<!-- Aquí empieza la página -->
<p> <b>El conductor del coche le preguntó si se encontraba mal</b></p>
</body>
</html>
22
UT 2: Lenguajes de Marcas: HTML
Figura 11. Ejemplo 10. Uso de bgcolor y text
23