|
HTML no entiende los espacios en blanco tal y como los escribimos
normalmente. Para conseguir que el texto se posicione horizontalmente en
el punto deseado de la pantalla se utilizan algunas etiquetas especiales
como:
- La etiqueta de bloque <BLOCKQUOTE>
- La etiqueta de texto preformateado<PRE>.
- La etiqueta de centrado, <CENTER>.
- El espacio en blanco
- Las tablas <TABLE> (se verán en otra sección)
-
Los distintos tipos de listas <OL>,
<UL> y <DL> (se verán en otra sección)
El texto incluido dentro de las etiquetas
<blockquote>...</blockquote> ocupa en
pantalla menos espacio en horizontal que un párrafo normal ya que estas
etiquetas aumentan los márgenes derecho e izquierdo.
El texto incluido dentro de las etiquetas
<pre>...</pre> aparece preformateado, es
decir se muestra con el mismo formato con el que lo hayamos
escrito. Estas etiquetas se utilizan cuando interesa deshabilitar el
comportamiento habitual del navegador (agrupación de todos los espacios
en uno solo, ajuste de línea al tama ño de la ventana, etc.) y queremos
que el texto se vea tal y como lo estamos escribiendo. Esta
funcionalidad se utiliza por ejemplo al escribir los versos de una
poesía o un fragmento de código).
El texto incluido dentro de las etiquetas
<center>...</center> aparece centrado en
pantalla.
En HTML además de las etiquetas y los
atributos existen otro tipo de marcas denominadas
entidades y que se caracterizan porque comienzan con el símbolo
& y terminan con un punto y coma
"; ". Estas entidades nos sirven para
representar caracteres especiales.
La entidad (del inglés Non
Breaking Space que significa espacio sin ruptura) sirve
para representar en HTML un espacio en blanco y se utiliza normalmente en
dos casos:
-
Cuando queremos que dos palabras no se separen al ajustar el texto al
tamaño de la ventana, por ejemplo las dos palabras que forman una
marca. En ese caso si ponemos Coca Cola el navegador puede
separar las palabras pero si ponemos
Coca Cola el navegador no las separará
aunque modifiquemos el tamaño de la ventana.
-
Cuando queremos evitar que el navegador agrupe todos los espacios
como si fuesen uno sólo podemos utilizar la entidad
tantas veces como espacios en blanco
queramos incluir.
Puedes consultar la forma de representar otros caracteres especiales
pulsando sobre este enlace
Ejercicio
Tarea
Practica el uso de las etiquetas <blockquote>,
<pre>, <center> y la entidad
.
Procedimiento
-
Abre el editor interactivo seleccionando este enlace y escribe en el lado izquierdo
el siguiente texto.
<html>
<body>
<h3>Sangrar Texto</h3>
<ul>
<li>
Este es un ejemplo de uso de la etiqueta <blockquote>.
<blockquote> El efecto es que aumentan los márgenes
izquierdo y derecho y diminuye el tamaño del
párrafo.</blockquote>
</li>
<li>
Este fragmento de poesía es un ejemplo de texto preformateado
<pre>
1. Un soneto me manda hacer Violante
2. en mi vida me he visto en tal aprieto.
3. Catorce versos dicen que es soneto.
4. Burla burlando van los tres delante.
(...)
</pre>
</li>
<li>
Este es un ejemplo de uso de la etiqueta center que centra el texto
que contiene
<center>Texto centrado</center>
</li>
<li>
Este es un ejemplo de uso de los espacios en blanco. Hemos visto que
en HTML todos los espacios que escribimos el navegador los agrupa
como si fueran uno sólo. Aqui ponemos 4 espacios en blanco
que el navegador no podrá
agrupar
</li>
<li>
Este es un ejemplo de uso de la entidad "non breaking
space". Trata de ajustar el tamaño de la ventana hasta que
consigas romper en dos líneas esta primera aparición de la palabra
Coca Cola. Trata de hacer lo mismo con esta segunda aparición que
contiene un "non breaking space" Coca Cola
comprobarás que en este segundo caso te resulta imposible.
</li>
</ul>
</body>
</html>
Debería verse:
|
