Lorenzo Martínez

Tutor Curso MentorHTML

 

HTML: Párrafo y texto

Encabezados

Se utilizan para crear los títulos de los distintos apartados en que puede estar dividido un documento. Se admiten seis niveles y se representan por las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. El más importante, de mayor tamaño y grosor, es <h1> y <h6> el menor. Es un elemento de bloque por lo que inserta un salto de línea. El tamaño de los encabezados puede variar de unos navegadores a otros.

Admite el atributo align mediante el cual podemos alinear el encabezado a derecha, centro e izquierda, la alineación izquierda es la predeterminada.

Párrafos y saltos de línea

Para indicar que un texto forma un párrafo lo encerraremos entre las etiquetas <p> y </p>. La mayor parte de los navegadores dejan una línea en blanco antes y después del párrafo. Admite el atributo align que puede tomar los valores de left, right, center y justify.

No es recomendable el uso de la etiqueta <p> para dejar líneas en blanco ya que los navegadores contraen las etiquetas <p> vacías a una sola, FrontPage escribe un espacio en blanco entre las etiquetas de apertura y cierre del párrafo para que no esté vacía y respete todas las insertadas. Para dejar líneas en blanco es preferible utilizar la etiqueta <br> que genera un salto de línea.

Fuentes

Mediante la etiqueta <font> podemos definir el color, tamaño y tipo de letra de un texto para ello especificaremos dentro de dicha etiqueta los atributos face, size y color.

El atributo face define el tipo de fuente a utilizar en un texto". Deberemos tener en cuenta que no todos los usuarios tienen instaladaslas mismas fuentes por lo que en el caso de que el visitante no tenga instalada la especificada su navegador la sustituirá por la que utiliza por defecto. Se pueden especificar en dicho atributo varias fuentes separadas por comas de manera que si el navegador no dispone de la fuente indicada en primer lugar pasará a la segunda y así sucesivamente hasta encontrar una instalada o llegar a la última fuente especificada.

El atributo size define el tamaño de la fuente. Éste tamaño podemos establecerlo de forma absoluta o relativa.

Para definir el valor del atributo size de forma absoluta utilizaremos los números del 1 al 7, siendo 7 el tamaño más grande, la opción predeterminada es 3.

Añadiendo los signos + o - podemos aumentar o disminuir el tamaño de la fuente utilizada en el número de unidades indicadas a continuación del signo. Los valores en esta forma relativa estarán comprendidos entre +1 a +6 o de -1 a -6, recuerda que solamente hay siete tamaños. En el caso de superar los tamaños existentes el navegador establecerá el tamaño de fuente al más grande o al más pequeño.

Podemos configurar un tipo de letra base para todo el documento utilizando la etiqueta <basefont>, puede incluir los atributos color, face y size. Se debe colocar cerca del principio de la etiqueta <body>. <basefont color="blue" face="Arial" size="7">

Formateo del texto

Podemos dar formato al texto utilizando dos planteamientos distintos.

El objetivo del primero de ellos es puramente estético y solamente responde a la presentación del texto en la pantalla, recibe el nombre de formateo físico. Pulsando en ejemplo1 puedes ver una página con las etiquetas más usuales de este formateo.

El segundo intenta establecer una relación con el tipo de información contenido en las etiquetas pero no con la presentación en el navegador, recibe el nombre de formateo lógico. Debido a que la forma en que se representa puede variar de unos navegadores a otros su uso es menos frecuente que el formateo físico. Pulsando en ejemplo2 puedes ver una página con las principales etiquetas.

Aunque no se realiza con HTML, sino con hojas de estilo, podemos modificar la dirección del texto y escribirlo de derecha a izquierda o verticalmente. Desgraciadamente sólo podemos verlo en Explorer a partir de la versión 5.5, para ello utilizaremos la propiedad writing-mode que admite los valores lr-tb (de izquierda a derecha, de arriba a abajo) y tb-lr (de arriba a abajo, de derecha a izquierda). Fíjate en el ejemplo:


Voy de cabeza Ahora en horizontal. Otra vez de cabeza. De nuevo en horizontal.

<div style="writing-mode:tb-rl">Voy de cabeza
<span style="writing-mode:lr-tb; color:yellow;">Ahora en horizontal. </span>
Otra vez de cabeza.
<span style="writing-mode:lr-tb; color:yellow;">De nuevo en horizontal.</span>
</div>


Fuentes descargables

Como su nombre indica son fuentes que el usuario descarga en su ordenador automáticamente al cargar la página, con este procedimiento se trata de evitar que el visitante no tenga instalada la fuente con la que está diseñada.

El procedimiento es muy sencillo, aunque es diferente para Explorer y para Netscape, por lo que nos veremos obigados a incluir el código para los dos navegadores

Para utilizar una fuente descargable en Netscape, incluiremos el siguiente código:

<html>
<head>
<link rel="fontdef" src="Futura_Light_BT.pfr"> </head>
<body>
<font face="Futura_Light_BT">Ejemplo de fuente Futura_Light_BT/font>
</body>
</html>>

Donde el valor del atributo rel será fontdef que indica que la página contiene una definición de fuentes y el valor de src será la dirección de la fuente a descargar, el fichero tiene que ser del formato pfr y solamente puede utilizarse desde el dominio que esté predeterminado, es decir, aunque te lo descargues a tu ordenador no podrás utilizarlo. En el cuerpo de la página marcaremos el texto a aplicar la fuente mediante el elemento <font face="Futura_light_BT">

El procedimiento en Explorer consiste en crear unas reglas de estilo que contienen la información sobre la fuente. Puedes verla en el cuadro inferior.

<html><head>
<style type="text/css">
<!--
@font-face {
font-family: Ransom;
font-size: 7;
src: url(ransom.eot);
}
-->
</style>
</head>
<body>
<font face="ransom">Ejemplo de fuente Ransom</font>
</body>
</html>>

El fichero que contiene la fuente tiene que tener el formato eot, Microsoft proporciona gratuitamente un programa que transforma las fuentes TrueType en EOT, puedes descargarlo pulsando en este enlace. Para no poner las cosas fáciles el programa está solamente en inglés.

Ejercicios