© Jordi González Boada
Dar formato al texto
Etiquetas de encabezados o títulos
En HTML existen una serie de etiquetas de encabezados -o títulos- del documento que diferencian el tamaño y posible uso del texto que se incluya en ellas, estas etiquetas son (de mayor a menor tamaño de letra):
- <h1>...</h1>
- <h2>...</h2>
- <h3>...</h3>
- <h4>...</h4>
- <h5>...</h5>
- <h6>...</h6>
El texto afectado por estas etiquetas es (como siempre) aquel que se sitúa entre el código de inicio de la etiqueta y el código de fin de la etiqueta.
Veamos con un ejemplo que hace cada una de estas etiquetas:
<html>
<head>
<title>
fig02_01
</title>
</head>
<body>
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6 (Letra pequeña)</h6>
Texto sin etiquetar (Texto general)
</body>
</html>
fig02_01 Etiquetas de encabezados de documentos
En mi página web (esta que estáis viendo) estos encabezados se verían como sigue:
Título 1
Título 2
Título 3
Título 4
Título 5
Título 6
|
Como podréis apreciar la presentación de las etiquetas de encabezado de mi página difiere de la presentación que se puede ver en el ejemplo. Más adelante veremos como se pueden cambiar las características preestablecidas de estas etiquetas.
Las etiquetas de encabezado producen tras de si un salto de párrafo.
Aumentar o disminuir el tamaño del texto
Para aumentar las fuentes por defecto podéis utilizar las siguientes etiquetas:
- <font size="+1">...</font>: fuente mayor
- <font size="+2">...</font>: fuente mucho mayor
- <big>...</big>: fuente grande
De similar manera para disminuir las fuentes por defecto podéis utilizar las siguientes etiquetas:
- <font size="-1">...</font>: fuente menor
- <font size="-2">...</font>: fuente mucho menor
- <small>...</small>: fuente pequeña
Veamos con un ejemplo que hace cada una de estas etiquetas:
<html>
<head>
<title>
fig02_02
</title>
</head>
<body>
Texto normal
<font size="+1">fuente mayor</font>
<font size="+2">fuente mucho mayor</font>
<big>fuente grande</big>
<font size="-1">fuente menor</font>
<font size="-2">fuente mucho menor</font>
<small>fuente pequeña</small>
</body>
</html>
fig02_02 Etiquetas para aumentar o disminuir el texto
El valor de <font size="±número">...</font> puede estar entre -2 y +4.
Otra manera de fijar el tamaño del texto es mediante <font size="número">...</font>. En realidad ya os habréis dado cuenta que no es una nueva forma, pero en este caso el número no va precedido del signo "+" o del signo "-".
Cuando el número va precedido del signo "+" o el signo "-" el tamaño final de la fuente depende del tamaño preestablecido que esta tuviese inicialmente (el tamaño que tendría la fuente base o una fuente de tamaño 3). Por contra, cuando el número no va precedido de un signo, el número hace referencia a un tamaño concreto de la fuente -no a un tamaño relativo-, el tamaño 3 es el que usa -a falta de fuente base- el sistema relativo como tamaño base.
Veamos más claramente esto con un nuevo ejemplo:
<html>
<head>
<title>
fig02_03
</title>
</head>
<body>
<font size="1">fuente 1</font>
<font size="2">fuente 2</font>
<font size="3">fuente 3</font>
<font size="4">fuente 4</font>
<font size="5">fuente 5</font>
<font size="6">fuente 6</font>
<font size="7">fuente 7</font>
</body>
</html>
fig02_03 Tamaños de fuente en escala del 1 al 7
La escala de fuente va de 1 a 7, si pusiésemos tamaño 20 la fuente no tendría mayor tamaño que la fuente de tamaño 7.
Esto nos ha servido para introducirnos en un nuevo concepto, los atributos de las etiquetas.
Size es un atributo de la etiqueta font. Font tiene dos atributos específicos más, los cuales se verán al final de este tema.
Con los nuevos estándares HTML, los atributos específicos de la etiqueta font (size y los otros dos que veremos al final del tema) han sido desaprobados en favor del uso de hojas de estilo en cascada. Aún así creo interesante explicarlos por dos razones:
- Resulta más fácil aprender a hacer páginas web así.
- Los navegadores, por razones de compatibilidad con páginas antiguas, siguen reconociendo el código desaprobado.
Una tercera razón podría ser que ya en la página de introducción especificaba que el presente manual se hace según la especificación HTML 4.01 transicional.
Y una cuarta razón podría ser que no debiéramos convertir los medios en el fin (el propósito es la divulgación de conocimientos, por tanto no mudemos los recursos en plomíferos objetivos).
La razón de la desaprobación esta en el hecho de que el tamaño es dependiente en última instancia del navegador utilizado para visionar la página.
Size es un atributo modificador de la etiqueta font, en cambio small y big son elementos de modificación del estilo de fuente (No es necesario que recordéis esto. Aunque quiero realizar un curso más divulgativo que técnico también hay que incluir algunas cuestiones más técnicas).
Como se puede observar en estos dos ejemplos, estas etiquetas no introducen tras de si saltos de línea o saltos de párrafo. Así pues, ya es hora de explicar como se puede hacer eso en HTML.
Saltos de línea y saltos de párrafo
Un salto de línea sitúa el siguiente texto justo en la línea inferior, mientras que un salto de párrafo deja una línea en blanco entre los distintos párrafos.
Las etiquetas que realizan estas acciones son:
- <br>: salto de línea.
- <p>: salto de párrafo.
- <p>...</p>: engloba un párrafo y produce un salto de párrafo después de él.
El salto de línea tiene etiqueta inicial (<br>) pero no final (incluir </br> es incorrecto). El salto de párrafo, en cambio, puede presentarse sólo con la parte inicial de la etiqueta (<p>) o con ambas partes, la inicial y la final (<p></p>).
Veamos un ejemplo de su uso:
<html>
<head>
<title>
fig02_04
</title>
</head>
<body>
Auckland (REUTERS, 1966). Ayer murió una tortuga
que el capitán Cook había regalado en 1777 al rey
de Tonga. Tenía casi 200 años. El animal, llamado
Tu’Imalila, murió en el parque del palacio real de
la capital tongana de Nuku, Alofa.<br>
El pueblo de Tonga daba a la tortuga las consideraciones
de un jefe; tenía guardias especiales y hace pocos años
había quedado ciega durante un incendio forestal.<p>
Radio Tonga anunció que los restos de Tu’Imalila serían
enviados al museo de Auckland, en Nueva Zelandia.
</body>
</html>
fig02_04 Salto de línea y salto de párrafo
En el caso de que queramos dejar varias líneas en blanco no basta con repetir la etiqueta <br> o la etiqueta <p>, hay que repetirlas ambas alternadas:
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
La que produce el siguiente efecto:
En este caso seis líneas vacías.
Tipo de fuente y color
Como ya se dijo más arriba la etiqueta font tiene tres atributos específicos, size y los dos que vamos a ver ahora:
- Face: especifica el tipo de fuente a utilizar.
- Color: especifica el color de la fuente.
Como también se dijo más arriba estos tres atributos han sido desaprobados (en favor del uso de hojas de estilo en cascada), pero aún así los soportan todos los navegadores por razones de compatibilidad.
La estructura de la etiqueta font con estos atributos es:
<font face="tipo de fuente">...</font>
<font color="#color">...</font>
Atributo face
Este atributo indica el tipo de fuente que se utilizará para mostrar el texto. Puede corresponde con el nombre de una única fuente o con una lista de fuentes separadas por comas y organizadas por orden de preferencia (por si alguna de las fuentes no estuviera instalada en el sistema operativo de destino).
Veamos algunos ejemplos:
<font face="arial">...</font> que se muestra así:
Ayer murió una tortuga
<font face="verdana">...</font> que se muestra así:
Ayer murió una tortuga
<font face="times">...</font> que se muestra así:
Ayer murió una tortuga
<font face="courier">...</font> que se muestra así:
Ayer murió una tortuga
<font face="impact">...</font> que se muestra así:
Ayer murió una tortuga
<font face="seagull">...</font> que se muestra así:
Ayer murió una tortuga
<font face="broadway bt">...</font> que se muestra así:
Ayer murió una tortuga
<font face="symbol">...</font> que se muestra así:
Ayer murió una tortuga
<font face="broadway bt,seagull,arial">...</font> que se muestra así:
Ayer murió una tortuga
El hecho de que podáis o no ver todas las fuentes que pongo de ejemplo dependerá de que las tengáis instaladas en vuestro sistema. Si alguna de las fuentes escogidas no se encuentra instalada en vuestro sistema -y si no hay fuentes alternativas- se mostraría la fuente por defecto de vuestro sistema. Tened esto en cuenta a la hora de seleccionar vuestras fuentes, si es muy rara -por poco común- puede que no la tengan muchos de los que vean tu página y no conseguirás el efecto deseado.
Atributo color
El atributo color puede ser cualquier número hexadecimal -precedido por el carácter "#"- especificado según el espacio de color sRGB, o uno de los 16 colores definidos por un nombre:
|
Nombre
|
Valor sRGB
|
Muestra
|
Nombre
|
Valor sRGB
|
Muestra
|
|
Black
|
#000000
|
|
Green
|
#008000
|
|
|
Silver
|
#C0C0C0
|
|
Lime
|
#00FF00
|
|
|
Gray
|
#808080
|
|
Olive
|
#808000
|
|
|
White
|
#FFFFFF
|
|
Yellow
|
#FFFF00
|
|
|
Maroon
|
#800000
|
|
Navy
|
#000080
|
|
|
Red
|
#FF0000
|
|
Blue
|
#0000FF
|
|
|
Purple
|
#800080
|
|
Teal
|
#008080
|
|
|
Fuchsia
|
#FF00FF
|
|
Aqua
|
#00FFFF
|
|
El número que representa el valor del color sRGB está definido de la siguiente manera:
El número esta agrupado en pares, los dos primeros dígitos -el primer par- corresponden el canal rojo (R), el tercer y cuarto dígito -el segundo par- corresponden al canal verde (G) y los dos últimos dígitos -el tercer par- corresponden al canal azul (B).
Cada dígito puede estar representado por un número del 0 al 9 o por una letra de la A a la F según el siguiente orden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. El valor 00 en un par correspondería con la ausencia de dicho color y el valor FF en un par correspondería con el valor máximo de dicho color (observad la tabla de colores de más arriba).
Uso simultáneo de los tres atributos de la etiqueta font
Por supuesto se pueden usar simultáneamente los tres atributos específicos para definir la etiqueta font, por ejemplo:
<font size="5" color="#00ff33" face="times new roman">Ayer murió una tortuga</font> se muestra así:
Ayer murió una tortuga
Por supuesto esto, el uso simultaneo de varios atributos de una etiqueta, es válido para cualquier etiqueta y sus atributos correspondientes.
Color del texto general de la página
Cuando no se especifica ninguna etiqueta como font, h1, h2, h3, h4, h5 o h6 se tiene un texto genérico, para cambiar el color de este texto genérico se debe utilizar el atributo text en la etiqueta body:
<html>
<head>
<title>
fig02_05
</title>
</head>
<body text="#33ff33">
Contenido de la página
</body>
</html>
fig02_05 Color del texto general de una página
Esta manera de cambiar el color del texto general de una página ha sido desaprobada en favor del uso de CSS.
Color de fondo de la página
Ya se ha visto como cambiar el color de los textos así que es momento de explicar como cambiar el color de fondo de las páginas. Para hacer esto, sin usar CSS, se puede utilizar el atributo bgcolor aplicado a la etiqueta body, como con el color del texto general de la página:
<html>
<head>
<title>
fig02_06
</title>
</head>
<body bgcolor="#ffffcc">
Contenido de la página
</body>
</html>
fig02_06 Color del fondo de una página
Esta manera de cambiar el color de fondo de una página ha sido desaprobada en favor del uso de CSS.
