Formato de Texto en HTML

Publicado en 18 octubre 2010 por programandoenphp.over-blog.com

Formato de párrafos en HTML

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica...

Para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.

Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>).

Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal.

Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p> El resultado sería:

Texto alineado a la izquierda

Para una justificación al centro:

<p align="center">Texto alineado al centro</p> que daría:

Texto alineado al centro

Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p> cuyo efecto sería:

Texto alineado a la derecha

Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.

Esta etiqueta por sí sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.

Así, el código:

<p align="left">Parrafo1</p>

<p align="left"> Parrafo3</p>

<p align="left"> Parrafo2</p>

es equivalente a:

<div align="left"> <p>Parrafo1</p>

<p>Parrafo2</p>

<p>Parrafo3</p> </div>

Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.

Ejemplo práctico 01:

Construir una página que tenga, por este orden:

2 Párrafos centrados

3 Párrafos alineados a la derecha

Un salto de línea triple

1 párrafo alineado a la izquierda.

Codigo Fuente.

<html>

<head>

<title>Ejemplo de formateo de párrafos</title>

</head>

<body>

Ejemplo de formatear párrafos

</p>

Esto es el resultado:

</p>

<p>

Que son los buscadores que no tienen porque mantener un índice y que tienen robots que constantemente recorren Internet en busca de nuevas páginas para incluirlas en el buscador.

</p>

<p>

Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo).

</p>

<p>

Que son los buscadores que no tienen porque mantener un índice y que tienen robots que constantemente recorren Internet en busca de nuevas páginas para incluirlas en el buscador. Estos buscadores suelen tener un formulario accesible desde la página inicial, con el enlace correspondiente. No hay que navegar las categorías para acceder al formulario.

</p>

</div>

<br>

<p>

Esto es que acaba... hasta luego...

</p>

</body>

</html>

Encabezados.

Existen otras etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezados o Header en inglés. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita. Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan.

La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño.

Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.

Podemos ver cómo se presentan algunos encabezados a continuación. <h1>Encabezado de nivel 1</h1> Se verá de esta manera en la página:

Encabezado de nivel 1

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. <h2 align="center">Encabezado de nivel 2</h2>

Se verá de esta manera en la página:

Encabezado de nivel 2

Ejemplo práctico 02:

Construir una página web que contenga todos los encabezados posibles.

<html>

<head>

<title>Todos los encabezados

</title>

</head>

<body>

<h1>Encabezado de nivel 1

</h1>

<h2>Encabezado de nivel 2

</h2>

<h3>Encabezado de nivel 3

</h3>

<h4>Encabezado de nivel 4

</h4>

<h5>Encabezado de nivel 5

</h5>

<h6>Encabezado de nivel 6

</h6>

</body>

</html>

Observación:

No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra más grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en páginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.

Formateando el Texto.

Uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy común y práctico presentar texto resaltado en negrita, itálica y otros. Paralelamente el uso de índices, subíndices resulta vital para la publicación de textos cient&iaacute;ficos. Todo esto y mucho más es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.

Negrita.

Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y </b> (bold). Esta misma tarea es desempeñada por <strong> y </strong> siendo ambas equivalentes.

Escribiendo un código de este tipo:

<b>Texto en negrita</b>

Obtenemos este resultado: Texto en negrita

Itálica.

También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco más larga: <em> y </em>.

Un ejemplo de texto en itálica:

<i>Texto en itálica</i>

Que da el siguiente efecto:

Texto en itálica

Subrayado

El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero interés de nuestro texto.

Subíndices y supraíndices.

Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son:

<sup> y </sup> para los supraíndices

<sub> y </sub> para los subíndices

Ejemplo 03:

La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido

El resultado: La ¹³CC₃H₄ClNOS es un heterociclo alergeno enriquecido

Color, tamaño y tipo de letra.

Existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir

. A continuación os comentamos los atributos principales de esta etiqueta:

Atributo face

Define el tipo de letra.

Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto.

Veamos un ejemplo. <font face="Comic Sans MS,arial,verdana">

Este texto tiene otra tipografía</font>

Que se visualizaría así en una página web.

Este texto tiene otra tipografía

Atributo size

Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande. <font size=4>Este texto es más grande</font> Que se visualizaría así en una página web.

Este texto es más grande

Podemos asimismo modificar el tamaño de nuestra letra con respecto al del texto mostrado precedentemente definiendo el número de niveles que queremos subir o bajar en esta escala de tamaños por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamaño de la letra. Si estabamos escribiendo previamente en 3, pasaremos automáticamente a 4.

Los tamaños reales que veremos en pantalla dependerán de la definición y del tamaño de fuente elegido por el usuario en el navegador. Este tamaño de fuente puede ser definido en el Explorer yendo al menú superior, Ver/Tamaño de la fuente.

Atributo color

El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.

Es posible definir de una manera inmediata algunos de los colores más frecuentemente usados:

<font color="red">Este texto está en rojo</font>

Ejemplo 04.

Desarrollar una página una página que tenga las siguientes características:

• Un titular con encabezado de nivel 1, en itálica y color verde oliva.

• Un segundo titular con encabezado de nivel 2, también de color verde oliva.

Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que ésta no esté en el sistema que se coloque la fuente "Arial".

 <html>

 <head>

  <title>Home de la cocina para todos</title>

 </head>

 <body>

 <font color="Olive" face="Comic Sans MS,arial">

 <h1 align="center"><i>Cocina para Todos</i></h1>

 <h2 align="center">La cocina tu alcance</h2>

 </font>

 <font face="Comic Sans MS,arial">

 Descubre los platos más exquisitos, fáciles y económicos que puedas imaginar.

 <br>

 Dentro de este sitio podrás tener acceso a gran variedad de <b>recetas</b> de preparacion sencilla,

 aprenderás como realizar <b>operaciones comunes</b> dentro de una cocina y podras plantear tus preguntas

 en nuestro <b>consultorio</b> gourmet donde nuestro cocinero virtual podrá ayudarte con tus proyectos culinarios.

 También te será posible adquirir los <b>libros</b> gastronómicos más populares al precio més accesible...

 <br>

 Adéntrate en los misterios de la cocina sin quemar más cacerolas ni llamar al pizzero.

 </font>

 </body>

 </html>

Atributos para páginas.

Las páginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la página muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decíamos son generales a toda la página.

Atributos para fondos

bgcolor: especificamos un color de fondo para la página. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador.

background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página.

Ejemplo de fondo Vamos a colocar una imagen como fondo en la página.

La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la página. En este caso se colocaría la siguiente etiqueta

Color del texto text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro. Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la página. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página para que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que el texto.

Los tres atributos son los siguientes:

link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)

vlink: el color de los enlaces visitados. La "v" viene justamente de la palabra visitado. Es el color que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debería ser un poco menos vivo que el color de los enlaces normales.

alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.

Ejemplo de color del texto.

Pondremos el color de texto balnco y los enlaces amarillos, más resaltados los que no estén visitados y menos resaltados lo que ya están visitados.

Para ello escribiríamos la etiqueta body así: <body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">

Márgenes.

Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página.

leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.

topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.

Ejemplo 05.

Construir pagina sin margen.

<h1>Hola amigos</h1>

<br> <br> Gracias por visitarme! </td>

</tr>

</table>

</body>

Esta página tiene el fondo blanco y dentro una tabla con el fondo rojo. En la página podremos ver que la tabla ocupa el espacio en la página sin dejar sitio para ningún tipo de margen.