Módulo 2. Formato del texto.
Uno de los elementos principales que han hecho de Internet el boom que es hoy en día, ha sido la implantación del llamado World Wide Web (WWW para abreviar). El WWW se basa en la interconexión de las llamadas páginas Web, que son la representación en pantalla de una serie de documentos o archivos escritos en un lenguaje específico que se denomina HTML. El objetivo de este curso es precisamente el de familiarizarnos con las estructuras básicas de este lenguaje, con el fin de poder crear nuestras propias páginas Web.
HTML son las iniciales de "Hypertext Mark-up Language", o Lenguaje Hipertextual basado en marcas (o etiquetas). Básicamente, HTML es un lenguaje de edición, con el que podemos conseguir resultados semejantes a los que obtendríamos mediante un procesador de textos, o un programa de autoedición. Pero el objetivo del HTML es la creación de documentos electrónicos (las páginas Web), susceptibles de ser transmitidos a través de la red.
Como lenguaje de edición, el HTML nos permite dotar a nuestros documentos (páginas) de una serie de características: cambiar el tipo de texto, alinearlo, introducir imágenes (estáticas o en movimiento), enlazar unas páginas con otras a través de los llamados enlaces hipertexto, etc. En los siguientes módulos de este curso veremos todos estos aspectos con mayor detalle, pero ahora vamos a concentrarnos en las partes mas básicas del HTML: la creación de un nuevo documento y la introducción y formatos de texto.
Trabajar con texto dentro de un documento HTML no es muy diferente de hacerlo en un procesador de textos cualquiera. Basta con teclear el texto que queramos que aparezca en nuestra página. La mayoría de los editores comerciales se encargarán de "traducir" el texto que tecleemos a códigos HTML cuando esto sea necesario.
Sin embargo, HTML no sólo nos permite introducir texto, sino que también podemos darle formato, es decir, asignar al texto características como la negrita, cursiva, etc. Veamos algunos ejemplos:
Uno de los más atributos de texto mas utilizados es la negrita, que nos permite resaltar el texto en puntos determinados.
Llegados a este punto, es necesario conocer una característica muy particular del lenguaje HTML. Los navegadores que trabajan con HTML(por ejemplo Netscape), cuando encuentran un documento en el que aparecen dos etiquetas idénticas, o dos espacios seguidos, no reconocen el segundo, y sólo representan el primero de ellos.
Hay varias maneras de solucionar esto, pero la más común es aplicar al texto el formato de texto preformateado. Cuando el navegador encuentra las etiquetas de texto preformateado (<TT></TT>), representa en pantalla todo lo que está incluido entre estas dos etiquetas de forma "literal", es decir, respeta los dobles espacios, dobles saltos de párrafo, etc. A esto nos referíamos antes al decir que el atributo de texto preformateado tiene una aplicación muy importante en documentos HTML.
Además de cambiar el aspecto del texto, también podemos cambiar su tamaño. En HTML esto se consigue mediante los llamados encabezamientos. Los encabezamientos codifican tamaños de letra predeterminados, que pueden aplicarse directamente a frases, párrafos o palabras para resaltarlos o distinguirlos del cuerpo del texto. Existen seis niveles de encabezamiento, siendo el nivel 1 el más grande, y el nivel 6 el más pequeño. Por ejemplo:
Podemos cambiar las características de cada uno de estos textos, simplemente marcándolos con un bloque y seleccionando la opción correspondiente al nivel del encabezamiento que queremos aplicar.
Veamos un ejemplo.
Como hemos visto hasta el momento, podemos visualizar un mismo documento HTML de dos maneras:
- La primera es como lo veremos simplemente al acceder (cargar) la página en un visualizador.
- La segunda es la que vemos al acceder a la opción Origen del documento. Esta segunda opción es algo menos "agradable" de ver, pero este es el lenguaje HTML real.
Si se han seguido las instrucciones correspondientes en cada uno de los casos vistos hasta ahora, habremos observado que después de aplicar al texto los atributos correspondientes (negrita, cursiva, etc.), los códigos también han cambiado. Cuando aplicamos un atributo al texto, éste aparece encerrado entre dos cadenas de caracteres, cada una de las cuales comienza por el signo "<", y termina por el signo ">". Estas cadenas son los que en HTML se denominan etiquetas o marcas. Todas las características de una página HTML y de todos y cada uno de sus elementos se definen por medio de estas etiquetas.
Pero volvamos a las características del texto en HTML. Hasta ahora hemos visto como podemos asignar atributos al texto, pero además el HTML nos permite, como lo haría cualquier procesador de textos, insertar retornos, es decir saltos de línea o de párrafo.
Una vez más nos encontramos con las etiquetas anteriormente mencionadas, que comienzan por el signo "<", y terminan por el signo ">". Lo que hay entre estos dos signos, sin embargo, es diferente según que atributo o función definan las etiquetas. Además, veremos que algunas de éstas siempre van por parejas, y en estos casos, la etiqueta que va al final lleva el signo "/"detrás del "<". Esta etiqueta que lleva el signo "/"es lo que se denomina etiqueta de cierre. Lógicamente la etiqueta que va delante (que no lleva el signo "/") se denomina etiqueta de apertura.
No todas las etiquetas en HTML tienen que ir por parejas. Aquellas que deben ir obligatoriamente por parejas (una etiqueta de apertura y otra de cierre) se denominan etiquetas pares.
Aquellas que no deben ir por parejas (no hay etiqueta de cierre, o ésta no es necesaria), se denominan etiquetas impares.
Por ejemplo, la mayor parte de las etiquetas que hemos visto son pares: negrita (<B></B>), cursiva(<I></I>), texto preformateado(<TT></TT>).
Hemos visto una etiqueta impar: salto de línea (<BR>, no hay etiqueta de cierre).
La etiqueta de salto de párrafo (<P>)es un caso especial. Aunque existe una etiqueta de cierre (</P>), ésta frecuentemente no se utiliza, limitándonos a poner la etiqueta de apertura (<P>) al final del párrafo tras el cual queremos forzar el salto.
Pero continuemos con los atributos de formato de texto. Además de los saltos de párrafo, el lenguaje HTML nos proporciona otro método de establecer "separaciones" entre secciones de nuestras páginas. Este elemento es el llamado barra horizontal.
Aparte de lo visto hasta ahora, aún hay un par de cosas más que podemos hacer con el texto. La primera de ellas es aplicarle el formato que denominaremos cita.
Ahora vamos a ver como podemos alinear el texto a la derecha o izquierda de la página, como haríamos con cualquier procesador de texto.
Ya sabemos como utilizar los encabezamientos para cambiar los tipos de letra a unos tamaños predeterminados. Existe además otro modo de cambiar los tamaños relativos de las letras dentro de una página HTML.
Si nos fijamos, al observar un documento HTML en modo texto, algunos caracteres (en especial todos aquellos que presentan acentos o signos diacríticos, junto con la letra "ñ" y algún otro) no aparecen igual que nosotros los tecleamos, sino que son representados por una serie de códigos.
El objetivo de este sistema de representación por códigos, es que la página HTML que nosotros creemos sea visualizada de la forma más fiel posible al original por cualquier persona que acceda a ella, no importa qué tipo de ordenador o sistema operativo utilice él o nosotros.
Hasta ahora hemos visto:
- Cómo podemos introducir un texto y darle formato utilizando un editor de HTML.
- Que el lenguaje HTML funciona a base de una serie de códigos que se denominan etiquetas, y que proporcionan al navegador información acerca de cómo debe representar en la pantalla los distintos formatos.
Pero además, las etiquetas sirven para muchas más cosas; de hecho prácticamente todos los elementos que pueden introducirse y/o insertarse en un documento HTML son codificados por medio de etiquetas, como veremos en este módulo y en los sucesivos.
Si hemos observado con atención las distintas páginas en las que hemos estado trabajando hasta ahora, especialmente al abrir la ventana de códigos (y si no, ahora es el momento de hacerlo), es fácil darse cuenta de que todos los documentos empiezan y terminan igual. Al principio de todo documento HTML siempre encontraremos la etiqueta <HTML>, y al final siempre aparecerá la etiqueta </HTML>. Estas dos etiquetas son las que informan al navegador de que todo lo que se encuentra entre ellas es una única página (documento) HTML.
Delante de <HTML> no debe introducirse ningún código ni cadena de texto.
Del mismo modo, detrás de </HTML>no podrá haber texto ni código alguno.
Es absolutamente indispensable que la etiqueta <HTML></HTML>aparezca al principio y al final de todo documento HTML. Es fácil comprobar por qué. Podemos abrir cualquiera de las páginas anteriores en el editor HTML en modo texto (si aún no lo hemos configurado, ha llegado el momento de hacerlo), y manualmente marcar con el ratón la etiqueta <HTML>que abre el documento y borrarla. Luego salvamos el documento y lo intentamos abrir desde Netscape.
El documento HTML propiamente dicho se encuentra contenido entre <HTML> y </HTML>, y está dividido en dos partes o secciones:
- La primera sección, que se denomina cabecera ("head" en inglés) ocupa siempre la primera parte del documento. Está delimitada por dos etiquetas, <HEAD>que se sitúa al principio de la cabecera, y está inmediatamente detrás de <HTML>, y </HEAD> que cierra la cabecera. Entre<HEAD> y </HEAD>podemos introducir toda aquella información que, aún siendo de vital importancia, no queremos que aparezca en pantalla: título de la página, descriptores, etc.
De toda la información que se puede introducir en la cabecera, la más importante es el título de la página. El título normalmente aparecerá en la barra de título (la barra azul por encima de la ventana) de la ventana en la que carguemos la página. Este título debería ser corto, pero a la vez descriptivo del contenido de la página. Nombres como "mi página", o "página principal", deben evitarse a toda costa.
- La segunda sección en la que se divide un documento HTML es lo que se denomina el cuerpo (en ingles "body"). El cuerpo del documento contiene toda la información, imágenes, texto, es decir, todo aquello que aparecerá
Las seis etiquetas que hemos visto ahora (sin contar <NAME></NAME>)son las que determinan la estructura del documento HTML (por decirlo de alguna forma, el recipiente en el que podremos introducir los elementos de nuestra página), y por ello se denominan etiquetas estructurales. Resumiendo podemos decir que la estructura mínima de un documento HTML es como sigue:
<HTML>nombre de la página</NAME>
<HEAD>
<NAME>
Por supuesto una página como ésta, aparecería en pantalla como una página en blanco, totalmente vacía. Para que aparezca algo en pantalla, tendremos que introducir el texto o código correspondiente entre las etiquetas <BODY>y </BODY>.
Veamos esto en un documento real.
Esto puede parecer muy complicado, pero no hay que asustarse. La mayoría de los editores modernos de HTML introducen automáticamente las etiquetas estructurales desde el mismo momento en que se crea un nuevo documento HTML, e introducen los elementos de la página en el lugar adecuado.