INTRODUCCIÓN AL LENGUAJE HTML

Transcripción

1 1 INTRODUCCIÓN A ENGUAJE HTM En otro de los cursos de esta serie de apuntes ya aprendimos a navegar y buscar información en Internet. De esta forma, es posible acceder a recursos que pueden ser útiles en nuestra tarea educativa. Sin embargo, en ocasiones vamos a necesitar ser nosotros los que sirvamos la información en Internet, por ejemplo, para proporcionar apuntes de nuestras asignaturas. Para ello podemos diseñar nuestras propias páginas web. Pese a que existen diversas herramientas para el diseño sencillo de páginas web (como veremos en los temas siguientes de este curso) es necesario conocer algunos fundamentos básicos del lenguaje utilizado para su diseño: el lenguaje HTM. En este tema se aborda los conceptos mínimos necesarios para poder diseñar una página web sin necesidad de utilizar software específico.

2 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X ÍNDICE DE CONTENIDO 1 INTRODUCCIÓN PROGRAMAS ETIQUETAS UNA PRIMERA PÁGINA SENCIA ESTRUCTURA BÁSICA TEXTO SENCIO TEXTO ESTRUCTURADO ENCABEZADOS ISTAS NUMERADAS ISTAS NO NUMERADAS HIPERENACES CREACIÓN DE UN ENACE SENCIO RUTAS ABSOUTAS Y REATIVAS ENACES INTERNOS OTROS ENACES MEJORANDO NUESTRA PRIMERA PÁGINA IMÁGENES TABAS MARCOS CARACTERÍSTICAS AVANZADAS USO DE COOR ESTIOS DE FUENTE FORMATO DE FUENTE CARACTERES ESPECIAES... 31

3 I N T R O D U C C I Ó N A E N G U A J E HTM INTRODUCCIÓN El lenguaje HTM (HyperText Markup anguage) es el que se utiliza para el diseño de páginas web y, por tanto, el lenguaje que los navegadores reconocen. Se basa en el uso de etiquetas para definir cada uno de los elementos de la página (texto, formatos, imágenes, etc.) y define la estructura general de la página, y no tanto su presentación visual. Así, cuando se define un encabezado en HTM es el navegador el responsable del aspecto visual que presentará esta etiqueta. Por lo tanto, a la hora de diseñar páginas web hay que tener en cuenta que su aspecto puede variar dependiendo del navegador. El lenguaje HTM ha ido cambiando para incorporar nuevos elementos, como la inclusión de imágenes, tablas o elementos matemáticos. a última revisión de este estándar es la 4.01, y ya no se prevén nuevas actualizaciones. Dada la evolución de Internet, el uso de tecnologías diferentes (móviles, PCs de mano, etc.) o la inclusión de elementos multimedia (animaciones, vídeos, sonidos, etc), el diseño de documentos web está tendiendo al uso de lenguajes más complejos, como XM, XHTM, hojas de estilo CSS, etc. a intención de este curso no es la de dar una descripción extensa y completa de todos los elementos del lenguaje HTM, ya que para el diseño de estructuras más complejas se hará uso de editores gráficos, como se verá en temas subsiguientes de este curso. 1.1 PROGRAMAS Pese a la conveniencia previa de aprender el lenguaje HTM, existen programas que facilitan la escritura de ficheros HTM. Básicamente, podemos dividir estos programas en tres grupos: Editores de texto: Estos programas nos ayudan en la escritura directa de código HTM mediante la inserción automática de etiquetas (ver sección siguiente). Un ejemplo sería el programa de software libre BlueFish, cuyo uso se aborda en temas posteriores. Editores gráficos: Este tipo de editores permiten diseñar el aspecto final de la página, por lo que se evita la escritura de código HTM. Presentan el problema de que suelen introducir código adicional cuya interpretación puede variar de navegador a navegador, por lo que es útil conocer el lenguaje HTM para una corrección posterior. Un ejemplo de editor gráfico basado en software libre sería NVU, que se estudia en los últimos temas de este curso. Conversores: Por último, la gran mayoría de procesadores de texto permiten convertir los documentos a HTM. Por ejemplo, con OpenOffice.org Writer se pueden diseñar páginas web de forma sencilla y rápida. No obstante, los conversores adolecen de los mismos problemas que los editores gráficos:

4 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X introducen código basura en el fichero final y su resultado puede no ser el esperado. En cualquier caso, una vez diseñada una página web por cualquiera de estos métodos, es conveniente comprobar su visualización con distintos navegadores. 1.1 ETIQUETAS El lenguaje HTM se basa en el uso de etiquetas, que definen los distintos elementos de la página web y que serán posteriormente interpretados por el navegador. En general, los elementos HTM se definen mediante una etiqueta de principio y otra de fin. Estas etiquetas se definen con los caracteres < >, en cuyo interior se incluye el nombre de la etiqueta. En la etiqueta de final de elemento se añade antes del nombre de la etiqueta un carácter /. <NombreEtiqueta> Texto que define el elemento </NombreEtiqueta> Además, las etiquetas de inicio de elemento pueden contener información de formato mediante atributos. Por ejemplo, el siguiente elemento define un párrafo centrado: <p AIGN= center > Texto centrado </p> Además hay etiquetas (como por ejemplo <hr>, que introduce una línea horizontal) que no requieren un final. Cabe comentar que es indistinto que las etiquetas se definan en mayúsculas o minúsculas. En este texto se utilizarán minúsculas para las etiquetas y mayúsculas para sus atributos, como se observa en el ejemplo anterior. 2 UNA PRIMERA PÁGINA SENCIA Después de la introducción anterior, vamos a empezar a diseñar nuestra primera página web. Para ello, podemos utilizar un editor de texto cualquiera (como gedit en liurex) para escribir (con cuidado de no equivocarnos) el siguiente texto: <head> <title> Introducción a liurex </title> </head> <body> Qué es liurex? </body> </html> as páginas web se guardan con la extensión.htm o.html. Si guardamos este fichero con el nombre ejemplo01.html y lo abrimos desde un navegador, comprobaremos que hemos creado nuestra primera página web (eso sí, muy sencilla). as etiquetas utilizadas en este código se describen en la siguiente subsección.

5 I N T R O D U C C I Ó N A E N G U A J E HTM Figura 1: Página web sencilla. 2.1 ESTRUCTURA BÁSICA En la primera página web que se ha diseñado se define la estructura básica de un documento HTM, que en general es la siguiente: <head>... </head> <body>... </body> </html> Aquí aparecen tres primeras etiquetas, cuyo uso se define a continuación: : Esta etiqueta define que el documento es HTM e incluye todo el código de la página web. Dentro de esta estructura deben definirse, asimismo, la cabecera y el cuerpo del documento.... </html> <head>: Esta etiqueta define la cabecera del documento. El código que aparece en la cabecera no se muestra en la página web como tal, sino que define algunas características generales de la página. o más habitual es incluir en la cabecera el título de la página, que aparece en la barra de título del navegador (ver Figura 1), con la etiqueta <title>. Es importante que el texto del título describa brevemente el contenido de la página: este título es el que se almacena en los marcadores (o favoritos) de los navegadores. <head> <title> Título de la página.</title> </head> <body>: Esta etiqueta va a incluir todo el código HTM que defina el diseño de la página web. <body>...aquí va el código HTM de la página web... </body>

6 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X 1.1 TEXTO SENCIO Con los elementos aprendidos hasta ahora ya se puede crear una página web con algo de texto: <head> <title> Introducción a liurex </title> </head> <body> Qué es liurex? liurex es el proyecto de la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana que tiene como objetivo principal la introducción de las nuevas Tecnologías de la Información y la Comunicación basadas en software libre en el Sistema Educativo de la Comunidad Valenciana. Para ello se ha creado liurex, una distribución GNU/inux creada por la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana, orientada al Sistema Educativo de nuestra Comunidad. liurex está basado completamente en Software ibre y es gratuito. </body> </html> Si se guarda este documento como ejemplo02.html y se abre con el navegador, se observa una imagen similar a la siguiente: Figura 2: Página con texto simple. Fijémonos en que, a pesar de haber introducido cambios de párrafo en el documento, el texto aparece en la página web como una sola línea. Para introducir cambios de línea debemos utilizar la etiqueta <br>, que no presenta etiqueta de cierre (es decir, no debemos incluir </br>).

7 I N T R O D U C C I Ó N A E N G U A J E HTM <head> <title> Introducción a liurex </title> </head> <body> Qué es liurex?<br> liurex es el proyecto de la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana que tiene como objetivo principal la introducción de las nuevas Tecnologías de la Información y la Comunicación basadas en software libre en el Sistema Educativo de la Comunidad Valenciana.<br> Para ello se ha creado liurex, una distribución GNU/inux creada por la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana, orientada al Sistema Educativo de nuestra Comunidad.<br> liurex está basado completamente en Software ibre y es gratuito. </body> </html> Ahora el documento (ejemplo03.html) presenta el siguiente aspecto. Figura 3: Página con saltos de línea. Pese a haber mejorado el aspecto, aún puede estructurarse mejor el contenido con el uso de párrafos. os párrafos se definen con la etiqueta <p> (la etiqueta de cierre </p> es opcional). Un atributo interesante de esta etiqueta es AIGN, que puede presentar tres valores: left (alineación a la izquierda), center (centro) y right (derecha). A continuación se incluye esta etiqueta en el código (ejemplo04.html) y se presenta la web resultante en el navegador.

8 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X <head> <title> Introducción a liurex </title> </head> <body> <p AIGN=center> Qué es liurex? </p> <p>liurex es el proyecto de la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana que tiene como objetivo principal la introducción de las nuevas Tecnologías de la Información y la Comunicación basadas en software libre en el Sistema Educativo de la Comunidad Valenciana.</p> <p>para ello se ha creado liurex, una distribución GNU/inux creada por la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana, orientada al Sistema Educativo de nuestra Comunidad.</p> <p>liurex está basado completamente en Software ibre y es gratuito.</p> </body> </html> Figura 4: Página con párrafos. Aunque, como se verá en la sección siguiente, puede estructurarse mejor un documento con encabezados, esta primera página web puede mejorarse mediante el uso de líneas horizontales con la etiqueta <hr>. Esta etiqueta admite varios atributos para definir anchura, longitud y alineación, pero se dejará su descripción a temas posteriores. El siguiente código, incluido en el fichero ejemplo05.html, describe el uso que se muestra en la figura posterior. <body> <p AIGN=center> Qué es liurex? </p> <hr> <p>liurex es el proyecto...

9 I N T R O D U C C I Ó N A E N G U A J E HTM Figura 5: Página con línea horizontal. 1.2 TEXTO ESTRUCTURADO Con las etiquetas indicadas hasta el momento podría diseñarse una web extremadamente sencilla. Habitualmente, los documentos que diseñamos (con un procesador de texto, por ejemplo) presentan un estructura de secciones, subsecciones, etc. Además, la información que se ofrece en las páginas web requiere frecuentemente ser concreta, lo cual se facilita mediante el uso de listas de elementos. En esta subsección se aprenderá a estructurar las páginas web para una mejor legibilidad Encabezados os encabezados se utilizan para estructurar las páginas con títulos de secciones, subsecciones, etc. Se definen con las etiquetas <h#>, donde # es un número que varía entre 1 (mayor nivel) y 6 (menor nivel), y admiten el atributo AIGN (al igual que las etiquetas de párrafo <p>). A continuación se modifica el código de la página web ejemplo06.html para incluir los encabezados <h1> y <h3> y se muestra el resultado con el navegador Mozilla Firefox.

10 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X <head> <title> Introducción a liurex </title> </head> <body> <h1 AIGN=center> Qué es liurex? </h1> <hr> <h3> Proyecto <h3> <p>liurex es el proyecto de la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana que tiene como objetivo principal la introducción de las nuevas Tecnologías de la Información y la Comunicación basadas en software libre en el Sistema Educativo de la Comunidad Valenciana.</p> <h3> Distribución </h3> <p>para ello se ha creado liurex, una distribución GNU/inux creada por la Conselleria de Cultura, Educación y Deporte de la Generalitat Valenciana, orientada al Sistema Educativo de nuestra Comunidad.</p> <h3> Características </h3> <p>liurex está basado completamente en Software ibre y es gratuito.</p> </body> </html> Figura 6: Uso de encabezados istas numeradas Para crear listas numeradas con HTM, hay que utilizar las etiquetas <ol> y <li>. Así, mientras que el contenido de la lista está delimitado por las etiquetas <ol> y </ol>, cada uno de sus elementos se indica con la etiqueta <li>, que no necesita etiqueta de

11 I N T R O D U C C I Ó N A E N G U A J E HTM cierre. Por ejemplo, el siguiente código en la página ejemplo07.html especifica las cuatro libertades del software libre. <h3> Características </h3> <p>liurex está basado completamente en Software ibre y es gratuito. Software ibre se refiere a la libertad de los usuarios para ejecutar, copiar, distribuir, estudiar, cambiar y mejorar el software. De modo más preciso, se refiere a cuatro libertades de los usuarios del software:< /p> <ol> <li> a libertad de usar el programa, con cualquier propósito(libertad 0). <li> a libertad de estudiar el funcionamiento del programa, y adaptarlo a las necesidades(libertad 1). El acceso al código fuente es una condición previa para esto. <li> a libertad de distribuir copias, con lo que puede ayudar a otros(libertad 2). <li> a libertad de mejorar el programa y hacer públicas las mejoras, de modo que toda la comunidad se beneficie(libertad 3). De igual forma que la libertad 1 el acceso al código fuente es un requisito previo. </ol> Figura 7: istas numeradas. a etiqueta <ol> tiene un atributo (TYPE) que permite elegir el tipo de numeración a utilizar. Este atributo puede tomar los siguientes valores: TYPE= 1 : ista de números estándar (1,2,3,...). Es la opción que se utiliza si no se indica este atributo. TYPE= a : Numeración siguiendo letras minúsculas (a,b,c,...). TYPE= A : Numeración siguiendo letras mayúsculas (A,B,C,...). TYPE= i : Numeración con números romanos en minúscula (i,ii,iii,iv,...). TYPE= I : Numeración con números romanos en mayúscula (I,II,III,IV,...). Así, si quisiéramos definir una lista con numeración romana en minúscula iniciaríamos la lista con la orden <ol TYPE= i >.

12 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X istas no numeradas En ocasiones necesitamos escribir listas de elementos en las cuales el orden no es importante. Para ello se pueden utilizar listas no numeradas. Estas listas siguen una estructura similar a las listas numeradas: utilizan la etiqueta <li> para cada elemento, pero la etiqueta <ul> para el inicio y final de lista. Fijémonos en lo que ocurre si transformamos la lista numerada del ejemplo anterior en una lista no numerada. <ul> <li> a libertad de usar el programa, con cualquier propósito(libertad 0). <li> a libertad de estudiar el funcionamiento del programa, y adaptarlo a las necesidades(libertad 1). El acceso al código fuente es una condición previa para esto. <li> a libertad de distribuir copias, con lo que puede ayudar a otros(libertad 2). <li> a libertad de mejorar el programa y hacer públicas las mejoras, de modo que toda la comunidad se beneficie(libertad 3). De igual forma que la libertad 1 el acceso al código fuente es un requisito previo. </ul> Figura 8: istas no numeradas. Al igual que ocurre con las listas numeradas, en este caso el atributo TYPE permite cambiar el tipo de viñeta utilizado. os valores que puede tomar son los siguientes: TYPE= disc : a viñeta es un círculo negro. Es el valor utilizado si no especifica este atributo. TYPE= square : a viñeta es un cuadrado negro. TYPE= circle : a viñeta es un círculo blanco con borde negro. 1 HIPERENACES os hiperenlaces o vínculos son elementos esenciales de las páginas web, ya que permiten enlazar entre sí distintas páginas y facilitan con ello la navegación por Internet. Aunque la creación de un enlace a otra página es simple, existen varios elementos distintos que deben ser tenidos en cuenta y que afectan a la propia estructura de un sitio web, por lo que este punto se tratará con algo más de detalle.

13 I N T R O D U C C I Ó N A E N G U A J E HTM CREACIÓN DE UN ENACE SENCIO a etiqueta que permite insertar hiperenlaces en los documentos web es <a>. Esta etiqueta presenta distintos atributos, pero quizás el más importante es HREF, que define la dirección de la página web a la que se accede tras hacer clic sobre el enlace. Así, si añadimos a nuestro código HTM las siguientes líneas, se define un enlace a la página web de liurex: <h3> Información </h3> <p> <a HREF=" Página web de liurex </a> a visualización de esta sección del documento (ejemplo09.html) presentaría un aspecto similar al siguiente: Figura 9: Hiperenlace simple. Si hacemos clic sobre el enlace, en la ventana del navegador se abre la página web de liurex. Si ahora volvemos al documento original (y actualizamos la página) observamos que el color del enlace ha cambiado. Figura 10: Hiperenlace simple ya visitado. En general, es el navegador el que se encarga de decidir el formato que va a utilizar para mostrar los vínculos. Es habitual que, por omisión, el texto de los enlaces se muestre subrayado y en color azul (si el enlace aún no se ha visitado) o púrpura (si el enlace ya se ha visitado con anterioridad). 1.2 RUTAS ABSOUTAS Y REATIVAS En el ejemplo anterior se ha creado un hiperenlace a una página web externa, es decir, que no se encuentra necesariamente en el mismo servidor que nuestra página. Es habitual que, al diseñar un sitio web, se creen distintas páginas web (puede que en distintos directorios) enlazadas entre sí por hipervínculos; en este caso se puede hacer uso de referencias relativas. Veamos un ejemplo que nos ayudará a entender este concepto. Supongamos que tenemos varias páginas web en un directorio www, en el que se encuentran a su vez organizadas en carpetas según el siguiente esquema:

14 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X Imaginemos que la dirección web del documento a.html es En ese caso, podemos incluir en a.html un enlace a b.html con la línea: <a HREF= > Documento b.html </a> Sin embargo, al estar localizados ambos documentos en la misma carpeta del mismo servidor, resulta más cómodo escribir simplemente <a HREF= b.html > Documento b.html </a> Si quisiéramos enlazar (desde a.html) el documento c.html, que se encuentra en la carpeta aux, deberíamos escribir: <a HREF= aux/c.html > Documento c.html </a> Por último, si queremos enlazar desde la página web c.html el documento a.html tendríamos que tener en cuenta que el fichero a enlazar se encuentra en un directorio superior, al que se puede acceder con../ como se muestra en el siguiente ejemplo: <a HREF=../a.html > Documento a.html </a> Es conveniente utilizar enlaces relativos para vincular páginas web de un mismo sitio, pero debemos tener en cuenta que en ese caso no debemos cambiar la situación relativa de los archivos enlazados. 1.3 ENACES INTERNOS Si el documento HTM que se está diseñando es muy largo, suele ser conveniente que haya enlaces que lleven al lector a sus distintas secciones. Estos enlaces internos (o anclas) no abren necesariamente una nueva página, sino que llevan a un punto concreto de la página web. Para incluir un ancla en algún punto de la página web basta con insertar una etiqueta <a> con el atributo NAME acompañado del nombre del ancla. Esta etiqueta no necesita incluir ningún texto. Por ejemplo, para incluir un ancla en la sección Características de nuestro documento ejemplo, escribiríamos el siguiente código: <a NAME= Seccion_Car > </a> <h3> Características </h3> Para situar ahora un enlace en el principio de la página a esta sección, escribiríamos en el atributo HREF el nombre de la sección antecedido del carácter #. <a HREF= #Seccion_Car > Características </a>

15 I N T R O D U C C I Ó N A E N G U A J E HTM De esta forma, podría empezarse el documento con un índice a sus secciones. A continuación se incluye el documento ejemplo10.html, en el que se añade dicho índice utilizando anclas y una lista no numerada, y se muestra en la figura siguiente su aspecto final. Fijémonos en que, al hacer clic sobre uno de los enlaces, en el navegador se muestra la dirección web con el ancla correspondiente. <head><title> Introducción a liurex </title></head> <body> <h1 AIGN=center> Qué es liurex? </h1> <ul> <li> <a HREF="#Sec_Pro"> Proyecto</a> <li> <a HREF="#Sec_Dis"> Distribución</a> <li> <a HREF="#Sec_Car"> Características</a> <li> <a HREF="#Sec_Info"> Información</a> </ul> <hr> <a NAME="Sec_Pro"></a><h3> Proyecto </h3> <p> liurex es...</p> <a NAME="Sec_Dis"></a><h3> Distribución </h3> <p>para ello...</p> <a NAME="Sec_Car"></a><h3> Características </h3> <p>liurex está...</p> <a NAME="Sec_Info"></a><h3> Información </h3> <p> <a HREF=" Página web de liurex </a> </body></html>

16 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X Figura 11: Documento con anclas. 1.4 OTROS ENACES Hasta ahora únicamente se han definido enlaces a otras páginas web (o a elementos internos de una página web), pero pueden utilizarse los hiperenlaces para otro tipo de elementos. Por ejemplo, podemos vincular cualquier tipo de documento para que pueda descargarse desde otra ubicación. Así, con la siguiente instrucción <a HREF= apuntes.odt > Apuntes de la asignatura </a> podemos enlazar un documento de texto escrito con el procesador OpenOffice.org Writer. Al hacer clic sobre este tipo de enlaces pueden ocurrir dos cosas: si el navegador conoce la extensión del documento enlazado, puede abrir el documento con el programa correspondiente; o puede guardar el documento en su ordenador para abrirlo posteriormente. Habitualmente, nuestro navegador nos preguntará cuál de estas opciones deseamos seguir.

17 I N T R O D U C C I Ó N A E N G U A J E HTM MEJORANDO NUESTRA PRIMERA PÁGINA En esta sección se van a estudiar otros elementos del lenguaje HTM más avanzados. Algunos de ellos, como el uso de imágenes, resultan esenciales para hacer nuestra página web más atractiva para los usuarios de Internet. 2.1 IMÁGENES as imágenes ayudan a mejorar el aspecto visual de nuestra página web y pueden introducir información útil que complementa el contenido textual del documento. En los documentos HTM estas imágenes deben estar en formato JPEG o GIF; en liurex puede utilizarse, por ejemplo, The Gimp para diseñar este tipo de imágenes. a etiqueta HTM que sirve para indicar la aparición de imágenes es <img>, y no necesita etiqueta de cierre. Su atributo más importante es SRC, que indica la dirección de la imagen. Así, para insertar en una página web una imagen que se encuentra en el mismo directorio que el documento HTM basta con incluir la etiqueta siguiente: <img SRC= imagen.jpg > En caso de que la imagen se encuentre en otro directorio, deben seguirse las mismas normas que ya se indicaron en el caso de hipervínculos. Así, el siguiente código (ejemplo11.html)1 <head> <title> Introducción a liurex </title> </head> <body> <h1 AIGN=center> Qué es liurex? </h1> <img SRC= ratoli.jpg > </body></html> se visualizaría tal y como se muestra en la Figura a imagen del ratón de liurex puede encontrarse en

18 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X Figura 12: Inserción simple de una imagen. Quizás esta imagen es demasiado grande, por lo que querríamos reducir su tamaño. Para controlar las dimensiones de una imagen la etiqueta <img> cuenta con los atributos HEIGHT (altura) y WIDTH (anchura). Estos atributos reciben las dimensiones correspondientes en pixels (podemos conocer las dimensiones de una imagen con cualquier programa de diseño gráfico, como The Gimp). Así, la siguiente orden reduce la imagen de nuestro ratoncito: <img SRC= ratoli.jpg width=70 height=100> Figura 13: Imagen reducida. Si únicamente definimos uno de los dos atributos ( HEIGHT o WIDTH) el otro se cambia automáticamente para mantener las dimensiones de la imagen original. Y si quisiéramos incluir la imagen justo al lado del título de la página? En ese caso, bastaría con introducir la etiqueta de imagen en el interior del par de etiquetas <h1>...</h1>, pero también definir la alineación del texto respecto a la imagen. El atributo que define esta característica es AIGN: este atributo puede aceptar (entre otros) los valores top (alinea el texto con la parte superior de la imagen), middle (con la parte central de la imagen) y bottom (con la parte inferior de la imagen) 2. Por ejemplo, 2 El uso de estas opciones está en desuso en HTM 4.01, donde se prefiere el uso de hojas de estilo.

19 I N T R O D U C C I Ó N A E N G U A J E HTM para alinear nuestro ratoncito con el centro del texto, el código HTM sería el siguiente: <head><title> Introducción a liurex </title></head> <body> <h1 AIGN=center> Qué es liurex? <img SRC= ratoli.jpg WIDTH=70 HEIGHT=100 AIGN=middle></h1> </body></html> Figura 14: Alineación de texto e imágenes. 2.2 TABAS En esta sección se va a tratar la inserción de tablas en páginas web. El diseño de tablas puede ser realmente complejo, incluyendo fusión de celdas, definición de colores, bordes, etc. No obstante, aquí únicamente se tratará la creación de tablas simples, dejando las tablas más complejas a los editores gráficos de páginas web. a estructura básica de una tabla es muy simple: la tabla completa se define con las etiquetas <table>...</table>, para iniciar cada fila hay que incluir una etiqueta <tr>, y una etiqueta <td> por cada una de las columnas (o celda) de cada fila. Antes de mostrar el primer código HTM de una tabla, indicaremos dos atributos de la etiqueta <table> que darán un mejor aspecto a nuestra tabla: el atributo BORDER delimita las celdas con una línea (con border=1,2,...se cambia la anchura del borde) y el atributo AIGN=center centra la tabla en la página web. <head><title> Equivalencias liurex/windows </title></head> <body> <h1 AIGN=center> Equivalencias liurex/windows </h1> <hr> <table BORDER=1 align=center> <tr> <td> Tipo de aplicación <td> Windows <td> liurex <tr> <td> Suite Ofimática <td> Microsoft Office <td> OpenOffice.org <tr> <td> Navegador web<td> Windows Explorer <td> Mozilla Firefox <tr> <td> Imágenes <td> Adobe Photoshop <td> The Gimp </table> </body></html>

20 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X Figura 15: Tabla sencilla. Sería interesante poder destacar la primera fila, ya que constituye la cabecera de la tabla. Para ello podemos definir celdas de cabecera, utilizando la etiqueta <th> en lugar de <td>. Una opción habitual en la construcción de tablas es la combinación de celdas. Para ello, las etiquetas de celda (<td> o <th>) disponen de los atributos ROWSPAN (número de filas que ocupa la celda) y COSPAN (número de columnas que ocupa la celda). Hay que tener en cuenta que al combinar celdas, el número de celdas en filas o columnas subsiguientes puede disminuir. A continuación se muestra el código de una página más compleja (ejemplo15.html) y su visualización con el navegador. <head> <title> Equivalencias liurex/windows </title> </head> <body> <h1 AIGN=center> Equivalencias liurex/windows </h1> <hr> <table BORDER=1 AIGN=center> <tr> <th COSPAN=3> Tabla de equivalencias <tr> <th> Tipo de aplicación <th> Windows <th> liurex <tr> <th COSPAN=3> Ofimática <tr> <td> Suite Ofimática <td> Microsoft Office <td> OpenOffice.org <tr> <td> Gestor de proyectos<td> Microsoft Project <td> Planner <tr> <th COSPAN=3> Internet <tr> <td ROWSPAN=2> Navegador web<td ROWSPAN=2> Windows Explorer <td> Mozilla Firefox <tr> <td> Epiphany <tr> <td> Correo <td> Outlook <td> Mozilla Thunderbird <tr> <th COSPAN=3> Diseño gráfico <tr> <td> Imágenes <td> Adobe Photoshop <td> The Gimp </table> </body> </html>

21 I N T R O D U C C I Ó N A E N G U A J E HTM Figura 16: Tabla compleja. 2.3 MARCOS El uso de marcos o frames es habitual en el diseño de páginas web para poder fijar algunos elementos de la ventana, como por ejemplo índices o logos del sitio web. Básicamente, los marcos permiten subdividir la ventana del navegador de forma que se muestren distintas páginas web. a estructura básica de una página con marcos no sigue el estándar habitual, ya que se sustituye la etiqueta <body> por <frameset>, tal y como se muestra en el siguiente esquema: <head>... </head> <frameset>... </frameset> </html> a etiqueta <frameset> presenta como atributos más importantes COS y ROWS. Estos atributos, excluyentes entre sí, definen si la ventana se va a dividir vertical u horizontalmente, respectivamente, y el número y tamaño de estas divisiones. Tomemos como ejemplo el atributo COS (el uso de ROWS es totalmente equivalente). Podemos definir las dimensiones de cada columna con un valor absoluto (en píxels), relativo (en %) o tomar todo el espacio disponible. Por ejemplo, en el siguiente código

22 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X <frameset COS= 80, 40%, * >... </frameset> se indica que la ventana del navegador se va a dividir en tres columnas, la primera de las cuales presentará una anchura de 80 píxels, la segunda ocupará el 40% de la ventana del navegador, y la tercera ocupará el resto (se indica con *). Si quisiéramos subdivisiones iguales bastaría con escribir un carácter * por cada columna. Para especificar la página web que se va a mostrar en cada marco se utiliza la etiqueta <frame>. En su atributo SRC se indica de forma explícita la dirección web, como se muestra en el siguiente ejemplo (fichero ejemplo16.html): <head> <title> Página web de liurex </title> </head> <frameset COS= 80, 40%, * > <frame SRC= blanco.html > <frame SRC= blanco.html > <frame SRC= blanco.html > </frameset> </html> Si blanco.html es una página vacía (sólo con la etiqueta, por ejemplo), el fichero ejemplo16.html se mostraría así en el navegador: Figura 17: Página web con tres marcos verticales. También pueden anidarse marcos, es decir, subdividir un marco en nuevas subventanas. Por ejemplo, el siguiente código (ejemplo17.html) subdivide la ventana en dos marcos horizontales, y el segundo de estos marcos en dos columnas:

23 I N T R O D U C C I Ó N A E N G U A J E HTM <head> <title> Página web de liurex </title></head> <frameset ROWS="80,*"> <frame SRC="blanco.html"> <frameset COS="80,*"> <frame SRC="blanco.html"> <frame SRC="blanco.html"> </frameset> </frameset> </html> Figura 18: Página web con marcos complejos. Ahora bastaría con cambiar nuestro código incluyendo una página web distinta en cada marco. Vamos a hacerlo: para ello utilizaremos los ficheros ejemplo10.html y ejemplo15.html (ya creados anteriormente) y prepararemos las páginas que se indican a continuación: ejemplo18.html: <head><title> Cabecera</title> </head> <body> <h1 AIGN=center> IUREX <img SRC="ratoli.jpg" WIDTH=70 HEIGHT=100 AIGN=middle> </h1> </body> </html>

24 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X ejemplo19.html: <head> <title> Indice </title> </head> <body> <h3> Indice </h3> <ul> <li> <a HREF="ejemplo10.html"> Qué es liurex? </a> <li> <a HREF="ejemplo15.html"> Equivalencias liurex/windows </a> </ul> </body> </html> ejemplo20.html: <head> <title> Página web de liurex </title></head> <frameset ROWS="130,*"> <frame SRC="ejemplo18.html"> <frameset COS="200,*"> <frame SRC="ejemplo19.html"> <frame SRC="ejemplo10.html"> </frameset> </frameset> </html> Si abrimos este último fichero con nuestro navegador, la página web tendría un aspecto similar al siguiente. De esta forma, se ha logrado que el marco superior contenga el logo de la página y el marco izquierdo un índice.

25 I N T R O D U C C I Ó N A E N G U A J E HTM Figura 19: Página web con varios marcos. Haciendo clic en los enlaces del marco izquierdo, podríamos ver las webs enlazadas en el marco derecho. o no? Realmente, tal y como se ha escrito el código de estas páginas, al hacer clic sobre uno de los enlaces del índice, la página se mostraría en el mismo marco izquierdo. Este comportamiento no debería extrañarnos: es precisamente lo que ocurriría en una página sin marcos. Para indicar en qué marco deseamos que se abra un enlace, debemos introducir dos nuevos atributos. En primer lugar, debemos dar un nombre a cada marco con el atributo NAME de la etiqueta <frame> Así, podría modificarse el documento ejemplo20.html como sigue: <head> <title> Página web de liurex </title></head> <frameset ROWS="130,*"> <frame SRC="ejemplo18.html" NAME= arriba > <frameset COS="200,*"> <frame SRC="ejemplo19.html" NAME= izquierda > <frame SRC="ejemplo10.html" NAME= derecha > </frameset> </frameset> </html> A continuación, en los enlaces del documento ejemplo19.html debería introducirse el atributo TARGET en la etiqueta <a>, indicando el nombre del marco en el que se debe mostrar la página enlazada.

26 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X <head> <title> Indice </title> </head> <body> <h3> Indice </h3> <ul> <li> <a HREF="ejemplo10.html" TARGET= derecha > Qué es liurex? </a> <li> <a HREF="ejemplo15.html" TARGET= derecha > Equivalencias liurex/windows </a> </ul> </body> </html> 1 CARACTERÍSTICAS AVANZADAS El lenguaje HTM comprende una gran cantidad de opciones para incluir texto con características especiales, imágenes, audio, etc, por lo que el describir cada una de ellas sería más propio de un manual que de un curso básico. Además, muchas de estas opciones pueden incluirse mediante un editor de lenguaje HTM. Aún así, vamos a introducir brevemente algunas características avanzadas de HTM, como son la gestión de los estilos de fuente y el color, aunque estas opciones han quedado obsoletas por el uso de hojas de estilo CSS. 1.1 USO DE COOR Antes de hablar de cómo cambiar el color de distintas partes de la página web, debemos comentar cómo hacer referencia a los distintos colores. Para ello, el lenguaje HTM dispone de dos posibilidades: Nombres predefinidos: Existen una serie de colores que disponen de un nombre predefinido al que podemos hacer referencia (óbviamente, en inglés). A continuación, se muestra una pequeña tabla con algunos de estos nombres 3. 3 Existen más nombres predefinidos, pero en muchos casos sólo son soportados por algún navegador en particular.

27 I N T R O D U C C I Ó N Color A E N G U A J E HTM Nombre Negro Black Blanco White Verde Green Violeta Purple Gris claro Silver Gris oscuro Gray Rojo Red Amarillo Yellow Azul Blue Azul claro Aqua Azul marino Navy Tabla 1: Nombres de colores HTM. Número hexadecimal: Este es el método más flexible para la definición de colores, ya que permite definir cualquier color sin limitarse a un reducido conjunto de nombres. Para ello se define el código RGB (de Red-Green-Blue), que asocia un código hexadecimal a cada uno de los tres colores básicos. Dicho código varía entre 00 y FF, es decir, entre 0 y Así, el negro estaría representado por el número , el blanco por FFFFFF y el amarillo por FFFF00. Para utilizar estos códigos en HTM hay que antecederlos con el signo de número #. Así, podríamos cambiar el texto a rojo (como veremos a continuación) incluyendo en la etiqueta body el atributo TEXT= #FF0000. Para cambiar las características de color globales de un documento HTM debemos especificar los cambios como atributos de la etiqueta body. El atributo BGCOOR permite cambiar el color de fondo de la página y el atributo TEXT el color de la fuente base. Por ejemplo, si quisiéramos diseñar una página con el fondo rojo y fuente blanca, escribiríamos la siguiente instrucción para el cuerpo del documento: <body BGCOOR=red TEXT=white> También podemos incluir una imagen como fondo del documento, de forma que si es más pequeña que la página se repite en forma de mosaico. A partir de la siguiente imagen, de nombre fondo.gif 4 a definición de código hexadecimal excede los propósitos de este curso, por lo que en general se utilizarán nombres de colores o el selector de color de un programa de edición.

28 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X Figura 20: Imagen para fondo de página. se puede diseñar una página añadiendo el atributo BACKGROUND en su cuerpo: <body BACKGROUND= fondo.gif > Figura 21: Página web con imagen de fondo.

29 I N T R O D U C C I Ó N A E N G U A J E HTM ESTIOS DE FUENTE En esta sección se pretende introducir distintas etiquetas y características del lenguaje HTM que afectan a la presentación del texto en la página web. En particular, se comentará el uso de distintos formatos de fuente y el uso de caracteres especiales, como símbolos o letras acentuadas Formato de fuente Para cambiar el formato con que se presentan los caracteres tenemos distintas posibilidades, entre las que vamos a comentar el uso de estilos lógicos y físicos, y la etiqueta <font>. Estilos lógicos: Con las estilos lógicos no se pretende decirle al navegador cómo mostrar un texto determinado (si es negrita, cursiva, etc) sino las características del contenido del texto presentado. Por ejemplo, con estas etiquetas indicaremos que queremos resaltar un texto, indicar código de un programa o la definición de una palabra. Así, si queremos resaltar un texto (etiqueta <em>) será el propio navegador el que decida con qué características físicas (negrita, cursiva, color, etc) va a mostrar dicho texto. A continuación se muestra un listado de etiquetas de estilos lógicos y una figura en la que se muestra su visualización con Mozilla Firefox. Etiqueta Acción <em>...</em> Resaltado <strong>...</strong> Resaltado mayor <code>...</code> Muestra de código de programa <samp>...</samp> Texto de muestra (similar a code) <kbd>...</kbd> Texto que debe escribir el usuario <var>...</var> Texto variable <dfn>...</dfn> Definición <cite>...</cite> Cita. Tabla 2: Estilos lógicos de fuente.

30 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X Figura 15: Estilos lógicos en Mozilla Firefox. Estilos físicos: Al contrario que con los estilos lógicos, con los estilos físicos queremos indicar al navegador exactamente cómo queremos que muestre la información textual. Así, podemos especificar que queremos negrita, cursiva, subrayado, etc. A continuación se muestra una lista con los estilos físicos más importantes. Etiqueta Acción <b>...</b> Negrita <em>...</em> Cursiva <u>...</u> Subrayado <big>...</big> Aumenta tamaño de letra <small>...</small> Disminuye tamaño de letra _... Subíndice ^... Superíndice Tabla 3: Estilos físicos de fuente. Etiqueta <font> : El uso de esta etiqueta permite tener un mayor control sobre las características de la fuente, en particular sobre el tipo de fuente y su tamaño. Veamos sus atributos más importantes: SIZE, FACE y COOR. SIZE: Este atributo de <font> permite cambiar el tamaño de la fuente, ys u valor varía entre 1 y 7, siendo 3 el valor predeterminado. Por ejemplo, podríamos utilizar un tamaño menor de letra con: <font SIZE=1> Texto de menor tamaño </font> También puede indicarse un cambio relativo de tamaño con los signos + y -. Así, la siguiente instrucción aumenta el tamaño predeterminado en dos puntos: <font SIZE=+2> Texto de mayor tamaño </font>

31 I N T R O D U C C I Ó N A E N G U A J E HTM Como ya se ha comentado, el tamaño predeterminado es <font SIZE=3>. No obstante, podemos cambiar este tamaño predeterminado con la etiqueta <basefont>. Por ejemplo, si incluimos en una línea del documento la orden <basefont SIZE=4> a partir de ese punto, todo el texto que se introduzca se presentará con tamaño 4 puntos, y los cambios relativos que se indiquen con <font> se aplicarán a este nuevo tamaño. Por último, cabe indicar que no es aconsejable utilizar este cambio de tamaño para crear secciones del documento, ya que puede que haya navegadores que no interpreten correctamente la etiqueta. Siempre es mejor utilizar, para estos casos, los encabezados <h#>. FACE: Este atributo permite especificar una lista de tipos de fuente que el navegador deberá intentar en el orden indicado. Así, la orden <font FACE= Arial,Times > Texto </font> le indica al navegador que utilice para el texto la letra Arial o, si no dispone de ella, del tipo Times. En caso de no encontrar ninguna de estas dos fuentes, utilizará la fuente predeterminada. Hay que tener en cuenta que distintos navegadores y sistemas operativos utilizan distintos tipos de letra (o iguales, pero con distinto nombre) por lo que el uso de esta opción no es aconsejable. COOR: Este atributo permite cambiar el color del texto incluido entre las etiquetas <font> y </font>, siguiendo los formatos de color estudiados en la sección anterior. Por ejemplo, para escribir un texto en color rojo, escribiríamos_ <font COOR= red Texto </font> Caracteres especiales Existe un conjunto de caracteres, denominados caracteres especiales, que pueden dar problemas al ser visualizados en distintos navegadores en función de la codificación de texto que se utilice. Estos caracteres incluyen las letras acentuadas y la letra ñ, entre otros. Además, HTM no permite la inclusión de caracteres reservados de su código, como <,>, & y. Para solucionar este problema, HTM permite el uso de entidades de carácter que permiten introducir códigos asociados a los caracteres deseados y que son comprensibles para todos los navegadores independientemente de la codificación que utilicen. Estas entidades se introducen mediante una secuencia que empieza por & y termina por ;. Entre estos dos caracteres se incluye el nombre abreviado del carácter especial. Por ejemplo, la letra á se especificaría mediante la secuencia á. También es posible incluir entre los caracteres & y ; el número asignado a dicho carácter en la codificación ISO-atin-1 precedido del carácter # ; por ejemplo, la letra a con acento agudo se expresaría como á.como se ve en la tabla de códigos

32 G E N E R A C I Ó N P Á G I N A S W E B C O N I U R E X siguiente, es más sencillo recordar los nombres de los caracteres especiales que sus números, por lo que únicamente se especifican sus nombres abreviados. Carácter Secuencia Carácter Secuencia Carácter Secuencia á á à à ñ ñ é é è è Ñ &Ntilda; í í ì ì < < ó ó ò ò > > ú ú ù ù & & Á Á À À &quote; É É È È [Espacio] Í Í Ì Ì # # Ó Ó Ò Ò ~ ~ Ú Ú Tabla 4: Caracteres especiales HTM.