IB14 Informtica Aplicada a la Construccin

Creacin de pginas web con HTML

Introduccin: pginas web y navegadores

Una pgina web, pese a la gran cantidad de colores, imgenes e informacin que puede mostrarnos cuando accedemos a ella, es simplemente un fichero de texto que contiene solamente informacin textual y rdenes de cmo representarla grficamente, aadiendo posiblemente ficheros externos con imgenes, sonidos, etctera. Los navegadores son programas cuya misin fundamental, adems de conectarse al servidor a travs de Internet y obtener la pgina y los ficheros que esta indique, es entender la informacin escrita en la pgina web y presentarla por pantalla de forma adecuada. Para que todos los navegadores puedan entender la informacin de todas las pginas web es necesario que la informacin contenida en la pgina se ajuste a unas normas estandarizadas, conocidas por los diseadores de pginas y los programadores de navegadores y otras aplicaciones capaces de entender las pginas web. Aunque hoy en da existen muchos lenguajes de descripcin o de programacin estandarizados y que entienden los navegadores o sus ampliaciones plugins-, tales como el php, javascript, etctera, el lenguaje estndar de descripcin que utilizan las pginas web es el Hypertext Markup Language o HTML. Como su nombre indica con la palabra hypertext, se trata de un lenguaje que define textos y su representacin en pantalla; enlaces entre documentos, textos u otros formatos de informacin, etctera, gracias a un sistema de marcas o etiquetas que indican cmo tratar el texto que encierran. Este documento va a presentar de forma sencilla las caractersticas y funciones del lenguaje HTML necesarias para realizar pginas web simples como las que se proponen en las prcticas. Existen numerosos cursos completos de HTML en Internet. En la pgina web de la asignatura, http://mermaja.act.uji.es, existen enlaces a algunos cursos y al manual de referencia del lenguaje HTML.

El editor Notepad++
Los documentos HTML se pueden crear con cualquier editor de texto que no aada informacin de formato, como el programa Notepad que se distribuye con los sistemas operativos Windows. Sin embargo existen editores que, manteniendo esa caracterstica, entienden el lenguaje HTML coloreando las etiquetas reconocidas, detectando errores de sintaxis y facilitando enormemente la tarea de edicin del texto HTML.

De entre estos editores se recomienda el programa gratuito Notepad++, que adems de HTML entiende una gran cantidad de lenguajes, es configurable, carga poco el ordenador y es, en definitiva, muy cmodo de usar. Este programa se ha desarrollado bajo la modalidad Open Source, por lo que cualquiera est autorizado para utilizarlo sin coste alguno. Se encuentra disponible en Internet en la direccin http://notepad-plus.sourceforge.net. La figura inferior muestra el aspecto de un fichero HTML editado con el programa Notepad++.

Conceptos bsicos de HTML

Como se ha dicho ms arriba, el lenguaje HTML consiste en una serie de etiquetas o marcas que indican qu debe hacer el navegador. Muchas veces estas marcas encierran texto y su funcin es indicar cmo se debe mostrar por pantalla. En este caso, la marca inicial tiene la forma <marca> y la final, que indica lmite de su accin, </marca>. Por ejemplo la expresin
<b>Este texto aparecer en negrita</b>

generara por pantalla una salida como

Este texto aparecer en negrita

Otras etiquetas no se aplican al texto encerrado entre su inicio y final, sino que indican efectos o modificaciones en ellas mismas. Por ejemplo <br> inserta un salto de lnea, <hr> una lnea de separacin horizontal, etctera. Muchas etiquetas admiten calificadores que aaden informacin u opciones al modo bsico de tratar el texto. As por ejemplo, si la etiqueta <div></div> trata como un bloque el texto encerrado, <div align=center></div> indicar que ese texto debe mostrarse centrado en la pantalla.

A lo largo de los siguientes apartados se describirn las etiquetas necesarias para realizar la prctica, con sus calificadores ms tiles. Para una descripcin completa la referencia ms autorizada es la especificacin del lenguaje HTML. Una forma sencilla de empezar a familiarizarse con el cdigo HTML y sus efectos es observar el cdigo fuente de las pginas web que visitamos. Los navegadores ms populares nos lo muestran seleccionando en la barra de men la opcin Ver -> Cdigo fuente de la pgina. En las dos figuras siguientes aparece la opcin en el men del navegador Firefox y la ventana que muestra el cdigo HTML de la pgina.

Estructura de un archivo HTML

Un archivo con cdigo HTML comienza con una etiqueta opcional- que indica la versin del lenguaje que se est usando y la marca <html></html> que indica al navegador que se utiliza cdigo HTML, que vendra encerrado entre inicio y final de marca. As nuestro documento tendr el aspecto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> Aqu en medio se pondrn las lneas necesarias para crear nuestra pgina web. </html>

El cdigo HTML encerrado entre las marcas se divide en dos partes bien diferenciadas: la cabecera y el cuerpo. La primera va encerrada entre las etiquetas <head></head> y contiene el nombre de la pgina, que puede ser mostrado por el navegador mientras la carga, informacin de estilos a utilizar en la pgina, scripts en otros lenguajes de programacin, etctera. El cuerpo viene encerrado entre <body></body> y contiene la informacin que servir para mostrar la pgina: textos, formatos, enlaces, etctera. Esta etiqueta admite varios calificadores para indicar el color del fondo (bgcolor), texto (text), enlaces (link, vlink, alink), etctera, o para indicar una imagen de fondo (background). Los colores se especifican mediante palabras reservadas (black, red, blue) o indicando en hexadecimal sus tres componentes RGB (en la ventana de seleccin de color del programa GIMP, nos aparecen como notacin html).

A continuacin aparece un ejemplo que es ya un texto HTML completo y generara la pgina correspondiente al cargarlo en un navegador.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Ejemplo HTML completo</title> </head> <body bgcolor=yellow text=#0202E4> Primer documento HTML </body> </html>

Tipos de letra
Aunque existen formas de definir tipos de letra y formatos ms completos para los caracteres, slo vamos a comentar las etiquetas bsicas de que disponemos para modificar el tipo de letra. La etiqueta <b></b> hace que el texto que encierra se represente en negrita, <i></i> en itlica, <u></u> sirve para representar texto subrayado y <s></s> texto tachado. Adems disponemos de <tt></tt> para texto monoespacio o en formato teletipo, <big></big> para representar texto de mayor tamao y <small></small> para texto menor. Se pueden tambin indicar subndices y superndices con  y  respectivamente. Estas etiquetas se pueden mezclar en distintas letras de una palabra y se pueden adems combinar, incluyendo varios modificadores. Por ejemplo
<b>T<i>e<u>xto</u></i></b> r<u>a</u><i>r</i><b>o</b>

se representara como
Texto raro

Existe un conjunto de etiquetas, desde <h1></h1> hasta <h6></h6> que nos permite definir hasta 6 niveles de ttulo distintos, siento el 1 el ms importante. Cmo se representen estos niveles depende del estilo aplicado o del navegador.

Formateando el texto
Una vez visto cmo podemos definir la apariencia de los caracteres en pantalla, queda por estudiar como dar formato a os prrafos e incluir otros elementos tales como listas, tablas etctera.

La etiqueta ms til para definir trozos de texto con un formato comn es <div></div>. Admite el atributo align con los valores center, justify, left y right que indican de manera evidente el tipo de alineamiento del texto encerrado. De esta forma, para incuir texto centrado podramos usar

<div align=center>Este texto aparecer centrado</div>

Adems, al organizar texto comn, la etiqueta fuerza un salto de lnea antes y despus del texto encerrado. Es interesante comentar que HTML ignora los caracteres de formato introducidos en el propio fichero, tales como saltos de lnea y espacios. Si se quiere forzar un salto de lnea para separar prrafos se debe hacer con la etiqueta <br>. Si se quieren insertar manualmente espacios entre palabras, se har con &nbsp;. Otro elemento interesante para el formato es la lnea horizontal. Generada con <hr> muestra por pantalla una lnea que divide horizontalmente la pgina.

Otro elemento de formato muy usado es la lista. HTML permite generar listas sin orden, es decir, cuyas opciones no van numeradas, con la etiqueta <ul></ul> y listas ordenadas con <ol></ol>. Dentro de cada lista, los elementos se delimitan con <li></li>. Por supuesto, est permitido incluir listas dentro de otras listas como aparece en el ejemplo siguiente.

<ol> <li>Primer elemento de la lista con orden.</li> <li>Este segundo elemento es ms raro.<br>Incluye un salto de nea slo para liar.</li> <li>El tercero muestra cmo se pueden hacer listas anidadas. <ul> <li>Elemento de la lista de la lista.</li> <li>Otro.</li> <li>As hasta cansarnos</li> </ul> </li> <li>Este, que es el ltimo, nos devuelve a la normalidad.</li> </ol>

La salida por pantalla generada, que aparece en la fgura siguiente, se puede comprobar fcilmente copiando el texto en un archivo HTML y abrindolo con un navegador. Como se puede ver en el ejemplo, se ha mantenido la estructura ms o menos esperada organizando con tabuladores el texto introducido. Esta forma de estructurar los textos, llamada indentacin, se utiliza al escribir programas y es una

buena prctica para evitar confundirse al ver el texto tal como lo vamos escribiendo, sin formato.

El ltimo elemento de formato que vamos a considerar en este documento es la tabla. Es un instrumento de una gran potencia porque permite organizar de forma muy verstil y completa la informacin en las dos dimensiones de la pantalla. La etiqueta que define una tabla es <table></table> y admite varios atributos. Algunos de ellos, ya vistos como align y bgcolor, tienen el efecto esperado. El primero nos indica el alineamiento de la tabla en la pgina y el segundo su color de fondo. Otro conjunto de atributos definen el tamao y apariencia de la tabla en pantalla. As border nos permite definir el ancho en pxeles de los bordes de la tabla. Un valor de 0 (border=0) los ocultar, permitiendo organizar la informacin en pantalla sin que parezca tabulada. Los atributos frame y rules indican adems qu lneas alrededor de la tabla y entre las celdas se muestran. El atributo width ajusta el ancho de la tabla en pantalla, bien en pxeles bien en porcentaje de la anchura disponible, si se aade el smbolo % tras el valor numrico (width=25%). Por ltimo, cellspacing y cellpadding indican, respectivamente, la distancia, en pxeles o porcentaje, entre las celdas y desde el extremo de la celda hasta el principio de su contenido. El nmero de filas y columnas de la tabla no se especifica. El navegador lo obtiene contando las definiciones de filas, identificadas por la etiqueta <tr></tr> que aparecen dentro de la tabla y las de columnas, con <td></td>, que encuentra dentro de cada fila. Una tabla con 3 filas y 4 columnas sera

<table bgcolor=cyan cellspacing=1 cellpadding=2 border=3> <tr> <td>Fila 1, columna 1</td> <td>Fila 1, columna 2</td> <td>Fila 1, columna 3</td> <td>Fila 1, columna 4</td> </tr> <tr> <td>Fila 2, columna 1</td> <td>Fila 2, columna 2</td> <td>Fila 2, columna 3</td> <td>Fila 2, columna 4</td> </tr> <tr> <td>Fila 3, columna 1</td> <td>Fila 3, columna 2</td> <td>Fila 3, columna 3</td> <td>Fila 3, columna 4</td> </tr> </table>

Y su apecto en el navegador:

La etiqueta <tr></tr> admite los atributos bgcolor y align, ya descritos anteriormente, y valign que indica la posicin del texto en vertical (top, middle, bottom y baseline). La marca <td></td> admite los mismos atributos, adems de otros muy interesantes para definir tamaos y agrupaciones de celdas. height y width permiten definir la altura y anchura de las celdas en pxeles o porcentaje, como se ha visto anteriormente. Por otra parte, colspan y rowspan indican que la celda actual se expande por el nmero de columnas y filas especificado. En este caso, la expansin se debe tener en cuenta en las siguientes definiciones de fila, que tendrn menos elementos. El ejemplo siguiente muestra el uso de estos atributos.

<table bgcolor=cyan align=center cellspacing=5 cellpadding=5 border=1> <tr> <td colspan=2 rowspan=2 bgcolor=yellow>Fila 1 y 2</td> <td>Fila 1, columna 3</td> <td>Fila 1, columna 4</td> </tr> <tr> <td>Fila 2, columna 3</td> <td rowspan=2 bgcolor=green>Fila 2 y 3, columna 4</td> </tr> <tr> <td>Fila 3, columna 1</td> <td>Fila 3, columna 2</td> <td>Fila 3, columna 3</td> </tr> </table> y 2, columna 1

Y la imagen obtenida en pantalla:

Aunque no se ha comentado explcitamente, la potencia de las tablas viene de la propia naturaleza recursiva del lenguaje HTML. Un elemento de datos de una tabla, encerrado entre <td></td>, puede ser casi cualquier elemento del lenguaje, por ejemplo una lista u otra tabla. Y esto se aplica tambin dentro de la nueva lista o la nueva tabla. La imagen siguiente nos muestra cmo se puede utilizar esta etiqueta para organizar distintos elementos en las dos dimensiones de la pantalla. El cdigo que se ha utilizado para generarla aparece despus (para no asustar a nadie antes de tiempo!)

<table bgcolor="white" border=0 cellspacing=50> <tr bgcolor="cyan"> <td align="center" colspan=2><h1>Ejemplo de tabla potente</h1> </tr> <tr> <td height=100 align="center">Aqu va una tabla</td> <td align="left">Aqu va una lista</td>

</tr> <tr> <td valign="middle" align="center"> <table bgcolor="pink" border=2> <tr bgcolor="cyan" align="center"> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> </tr> <tr> <td bgcolor="cyan">F1</td> <td>Texto1</td> <td>Texto2</td> <td>Texto3</td> </tr> <tr> <td bgcolor="cyan">F2</td> <td>Texto4</td> <td>Texto5</td> <td>Texto6</td> </tr> </table> </td> <td valing="middle" align="left"> Ahora viene la lista <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> </ol> </td> </tr> </table>

Enlaces
Hasta ahora hemos visto funciones de HTML para el formato de los textos y su representacin en pantalla. Sin embargo, su caracterstica principal como lenguaje de hipertexto es su capacidad para incorporar en los textos otro tipo de informacin: imgenes, vdeo, sonidos u otros textos, y permitirnos navegar de unos a otros con facilidad. Estas funciones del lenguaje se consiguen mediante etiquetas que constituyen enlaces a otros ficheros o pginas. El primer elemento que nos puede interesar incluir es una imagen. Esto se consigue con la etiqueta <img> que requiere el atributo src para indicar dnde se encuentra el fichero que contenga la imagen. Los tipos de ficheros que pueden ser representados dependen del navegador. Normalmente los formatos de imagen ms comunes (.jpg, .bmp, .gif, .png) pueden ser utilizados. Otros atributos interesantes son los ya vistos height y width para indicar el tamao, align para indicar la posicin con respecto a la pgina y border para situar, si se desea, un marco de los pxeles indicados alrededor. Adems, hspace y vspace nos permiten indicar el espacio libre a dejar alrededor de la imagen, tanto en horizontal como en vertical. Por ltimo vale la pena comentar la etiqueta alt que permite definir un texto que aparecer en lugar de la imagen mientras esta se carga o cuando pasemos el puntero del ratn sobre ella. A continuacin aparece un ejemplo de cmo incluir una imagen en una pgina:
<img src=mi_imagen.jpg alt=Foto de mis vacaciones align=middle>

Es necesario indicar que los navegadores pueden interpretar de formas distintas el alineamiento de las imgenes. Una buena forma de situarla correctamente es incluirla dentro de un bloque <div></div> con el alineamiento horizontal deseado.

Se recomienda as mismo leer detenidamente el apartado de este documento acerca de la ubicacin de los ficheros en el disco y de cmo referirse a ellos en los enlaces.

El enlace por excelencia en las pginas web, el que nos permite enlazar otras pginas, otras zonas de la propia pgina, ficheros, enviar correo electrnico, etctera es el etiquetado con <a></a> (del ingls, anchor). El atributo ms importante es href, que indica la direccin de la hiper-referencia y por construccin de esta, su tipo. De esta manera, para enlazar una pgina web de Internet el texto que utilizamos para el atributo ser http://direccion_web; si queremos enlazar un fichero en nuestro servidor, pondremos nombre_de_fichero. Si queremos enviar un correo electrnico mediante el enlace usaremos la expresin mailto:direccin_de_correo. Los siguientes ejemplos sirven para mostrar estos distintos tipos de enlaces y su uso.

<a href=http://www.uji.es>Pgina de la Universitat Jaume I</a> <a href=mailto:fabregat@icc.uji.es>Enva un correo a tu profesor</a> <a href=mi_imagen.jpg target=blank>Si quieres ver la foto a pantalla completa</a>

El atributo target, que aparece en el ltimo ejemplo, permite definir cmo se va a realizar el enlace. Si indicamos blank este se realizar en una nueva ventana abierta por el navegador. En el caso de utilizar marcos, como se explicar a continuacin, especificaremos el marco en el que se va a cargar la pgina enlazada.

Pginas con varios marcos

HTML nos permite dividir la pantalla en varias zonas que pueden tratarse y enlazarse individualmente pero que forman la misma pgina web. Esto se consigue mediante el uso de marcos. La etiqueta <frameset></frameset> nos permite dividir la pantalla en secciones horizontales o verticales que se podrn luego tratar individualmente. Especificando como atributos rows o cols con una lista de tamaos, determinaremos la estructura resultante. Como esta estructura define toda la pgina web, una definicin de marcos aparece en una pgina web en lugar del cuerpo de la misma, reemplazando a la etiqueta antes vista <body></body>. Dentro de un frameset se utiliza la etiqueta <frame></frame> para especificar los contenidos y otros aspectos de cada uno de los marcos. Sus atributos ms interesantes son frameborder que admite los valores 1 0 para indicar que se representa o no con borde, src que nos indica la pgina que se cargar inicialmente y name, que nos servir para dirigir los enlaces al marco que se desee, segn se ha dicho antes. Como siempre, HTML permite definir elementos dentro de otros elementos idnticos. As el siguiente ejemplo muestra cmo, mediante dos definiciones de marcos, creamos una pgina verstil con tres marcos efectivos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Ejemplo de marcos</title> </head> <frameset rows=20%, 80%> <frame src=titulo.html name=titulo> <frameset cols=15%, 85%> <frame src=margen.html name=margen> <frame src=principal.html name=principal> </frameset> </frameset> </html>

La pgina resultante se vera:

Para saber ms
Adems de estas breves notas, se recomienda leer los tutoriales en lnea que existen en la pgina web de la asignatura y consultar el cdigo HTML de las pginas que nos gusten. Para resolver cualquier duda la referencia mejor es el manual del lenguaje HTML.

Acerca de los ficheros y sus referencias

Cuando se quiere hacer una referencia a un fichero desde un enlace en una pgina web, adems de indicar su nombre, incluyendo extensin, es necesario indicar el camino a seguir en el sistema de ficheros para encontrarlo. Esto siempre se puede hacer de dos formas. La primera consiste en dar la referencia absoluta desde el origen del sistema de ficheros. En los sistemas operativos Windows sera, por ejemplo C:\dir1\dir2\nombre.ext. Esta referencia sin embargo tiene el inconveniente de no ser correcta si cambiamos de lugar la pgina y todos los archivos enlazados, por ejemplo para publicarla. Se recomienda por ello utilizar referencias relativas al archivo desde el que se hace el enlace. Si nuestra pgina desea enlazar un archivo en su propia carpeta,

pondremos simplemente el nombre del archivo en el enlace. Si, por el contrario, el archivo se encuentra en un subdirectorio llamado por ejemplo img, escribiremos en el enlace img/nombre_de_fichero. Si ocurre al contrario, que queremos referenciar un archivo en el directorio padre de aqul en que se encuentra la pgina, lo indicaremos mediante ../, de la forma ../nombre_de_fichero. En general, si queremos descender varias carpetas que son subdirectorios de subdirectorios de aqulla en la que est la pgina, pondremos sus nombres hasta obtener algo como subdir1/subdir2/subdir3/imagen.jpg. Este sera el caso que se ilustra en la figura, con nuestra pgina HTML residiendo en la Origen,

Si por el contrario queremos remontarnos varios directorios por encima del actual nada nos impide poner ../../../imagen.jpg. si, como en la figura inferior, la pgina estuviera en subdir3 y el fichero imagen.jpg en Origen.

Y si queremos descender por otros subdirectorios de alguno por encima del actual, la expresin quedar cmo ../../subdir2_2/subdir2_22/imagen.jpg si, como aparece en esta ltima figura, la pgina se encuentra en subdir2_12 e imagen.jpg en subdir2_22.

Para comprender las referencias relativas basta con tener en cuenta que cada ../ asciende una carpeta desde la que estamos, y cada nombre de carpeta desciende. As ../../ nos sita en subdir2 y de all vamos a subdir2_2 y subdir2_22.

En el fichero comprimido ejemploHTML.zip aparecen todos los ejemplos de este texto, incluyendo el uso de referencias relativas. Para verlo con un navegador entrar en la carpeta primera y hacer doble clic en primera.html.