IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede mostrarnos cuando accedemos a ella, es simplemente un fichero de texto que contiene solamente información textual y órdenes de cómo representarla gráficamente, añadiendo posiblemente ficheros externos con imágenes, sonidos, etcétera. Los navegadores son programas cuya misión fundamental, además de conectarse al servidor a través de Internet y obtener la página y los ficheros que esta indique, es entender la información escrita en la página web y presentarla por pantalla de forma adecuada. Para que todos los navegadores puedan entender la información de todas las páginas web es necesario que la información contenida en la página se ajuste a unas normas estandarizadas, conocidas por los diseñadores de páginas y los programadores de navegadores y otras aplicaciones capaces de entender las páginas web. Aunque hoy en día existen muchos lenguajes de descripción o de programación estandarizados y que entienden los navegadores o sus ampliaciones plugins-, tales como el php, javascript, etcétera, el lenguaje estándar de descripción que utilizan las páginas 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 representación en pantalla; enlaces entre documentos, textos u otros formatos de información, etcétera, gracias a un sistema de marcas o etiquetas que indican cómo tratar el texto que encierran. Este documento va a presentar de forma sencilla las características y funciones del lenguaje HTML necesarias para realizar páginas web simples como las que se proponen en las prácticas. Existen numerosos cursos completos de HTML en Internet. En la página 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 añada información de formato, como el programa Notepad que se distribuye con los sistemas operativos Windows. Sin embargo existen editores que, manteniendo esa característica, entienden el lenguaje HTML coloreando las etiquetas reconocidas, detectando errores de sintaxis y facilitando enormemente la tarea de edición del texto HTML.
De entre estos editores se recomienda el programa gratuito Notepad++, que además de HTML entiende una gran cantidad de lenguajes, es configurable, carga poco el ordenador y es, en definitiva, muy cómodo 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 dirección http://notepad-plus.sourceforge.net. La figura inferior muestra el aspecto de un fichero HTML editado con el programa Notepad++.
Conceptos básicos de HTML Como se ha dicho más 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 función es indicar cómo se debe mostrar por pantalla. En este caso, la marca inicial tiene la forma <marca> y la final, que indica límite de su acción, </marca>. Por ejemplo la expresión <b>este texto aparecerá en negrita</b> generaría 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 línea, <hr> una línea de separación horizontal, etcétera. Muchas etiquetas admiten calificadores que añaden información u opciones al modo básico 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 describirán las etiquetas necesarias para realizar la práctica, con sus calificadores más útiles. Para una descripción completa la referencia más autorizada es la especificación del lenguaje HTML. Una forma sencilla de empezar a familiarizarse con el código HTML y sus efectos es observar el código fuente de las páginas web que visitamos. Los navegadores más populares nos lo muestran seleccionando en la barra de menú la opción Ver -> Código fuente de la página. En las dos figuras siguientes aparece la opción en el menú del navegador Firefox y la ventana que muestra el código HTML de la página.
Estructura de un archivo HTML Un archivo con código HTML comienza con una etiqueta opcional- que indica la versión del lenguaje que se está usando y la marca <html></html> que indica al navegador que se utiliza código HTML, que vendría 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 pondrán las líneas necesarias para crear nuestra página web. </html> El código 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 página, que puede ser mostrado por el navegador mientras la carga, información de estilos a utilizar en la página, scripts en otros lenguajes de programación, etcétera. El cuerpo viene encerrado entre <body></body> y contiene la información que servirá para mostrar la página: textos, formatos, enlaces, etcétera. Esta etiqueta admite varios calificadores para indicar el color del fondo (bgcolor), texto (text), enlaces (link, vlink, alink), etcétera, 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 selección de color del programa GIMP, nos aparecen como notación html).
A continuación aparece un ejemplo que es ya un texto HTML completo y generaría la página 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 más completos para los caracteres, sólo vamos a comentar las etiquetas básicas 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 itálica, <u></u> sirve para representar texto subrayado y <s></s> texto tachado. Además disponemos de <tt></tt> para texto monoespacio o en formato teletipo, <big></big> para representar texto de mayor tamaño y <small></small> para texto menor. Se pueden también indicar subíndices y superíndices con <sub></sub> y <sup></sup> respectivamente. Estas etiquetas se pueden mezclar en distintas letras de una palabra y se pueden además 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 representaría como Texto raro Existe un conjunto de etiquetas, desde <h1></h1> hasta <h6></h6> que nos permite definir hasta 6 niveles de título distintos, siento el 1 el más importante. Cómo se representen estos niveles depende del estilo aplicado o del navegador. Formateando el texto Una vez visto cómo podemos definir la apariencia de los caracteres en pantalla, queda por estudiar como dar formato a os párrafos e incluir otros elementos tales como listas, tablas etcétera.
La etiqueta más útil para definir trozos de texto con un formato común 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 podríamos usar <div align= center >Este texto aparecerá centrado</div> Además, al organizar texto común, la etiqueta fuerza un salto de línea antes y después del texto encerrado. Es interesante comentar que HTML ignora los caracteres de formato introducidos en el propio fichero, tales como saltos de línea y espacios. Si se quiere forzar un salto de línea para separar párrafos se debe hacer con la etiqueta <br>. Si se quieren insertar manualmente espacios entre palabras, se hará con. Otro elemento interesante para el formato es la línea horizontal. Generada con <hr> muestra por pantalla una línea que divide horizontalmente la página. 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> </ol> <li>primer elemento de la lista con orden.</li> <li>este segundo elemento es más raro.<br>incluye un salto de ínea sólo para liar.</li> <li>el tercero muestra cómo se pueden hacer listas anidadas. <ul> </ul> </li> <li>elemento de la lista de la lista.</li> <li>otro.</li> <li>así hasta cansarnos </li> <li>este, que es el último, nos devuelve a la normalidad.</li> La salida por pantalla generada, que aparece en la fgura siguiente, se puede comprobar fácilmente copiando el texto en un archivo HTML y abriéndolo con un navegador. Como se puede ver en el ejemplo, se ha mantenido la estructura más o menos esperada organizando con tabuladores el texto introducido. Esta forma de estructurar los textos, llamada indentación, se utiliza al escribir programas y es una
buena práctica 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 versátil y completa la información 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 página y el segundo su color de fondo. Otro conjunto de atributos definen el tamaño y apariencia de la tabla en pantalla. Así border nos permite definir el ancho en píxeles de los bordes de la tabla. Un valor de 0 (border=0) los ocultará, permitiendo organizar la información en pantalla sin que parezca tabulada. Los atributos frame y rules indican además qué líneas alrededor de la tabla y entre las celdas se muestran. El atributo width ajusta el ancho de la tabla en pantalla, bien en píxeles bien en porcentaje de la anchura disponible, si se añade el símbolo % tras el valor numérico (width=25%). Por último, cellspacing y cellpadding indican, respectivamente, la distancia, en píxeles o porcentaje, entre las celdas y desde el extremo de la celda hasta el principio de su contenido. El número de filas y columnas de la tabla no se especifica. El navegador lo obtiene contando las definiciones de filas, identificadas por la etiqueta 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 sería
<table bgcolor= cyan cellspacing=1 cellpadding=2 border=3> <td>fila 1, columna 1</td> <td>fila 1, columna 2</td> <td>fila 1, columna 3</td> <td>fila 1, columna 4</td> <td>fila 2, columna 1</td> <td>fila 2, columna 2</td> <td>fila 2, columna 3</td> <td>fila 2, columna 4</td> <td>fila 3, columna 1</td> <td>fila 3, columna 2</td> <td>fila 3, columna 3</td> <td>fila 3, columna 4</td> </table> Y su apecto en el navegador:
La etiqueta admite los atributos bgcolor y align, ya descritos anteriormente, y valign que indica la posición del texto en vertical (top, middle, bottom y baseline). La marca <td></td> admite los mismos atributos, además de otros muy interesantes para definir tamaños y agrupaciones de celdas. height y width permiten definir la altura y anchura de las celdas en píxeles o porcentaje, como se ha visto anteriormente. Por otra parte, colspan y rowspan indican que la celda actual se expande por el número de columnas y filas especificado. En este caso, la expansión se debe tener en cuenta en las siguientes definiciones de fila, que tendrán menos elementos. El ejemplo siguiente muestra el uso de estos atributos. <table bgcolor= cyan align= center cellspacing=5 cellpadding=5 border=1> </table> <td colspan=2 rowspan=2 bgcolor= yellow >Fila 1 y 2, columna 1 y 2</td> <td>fila 1, columna 3</td> <td>fila 1, columna 4</td> <td>fila 2, columna 3</td> <td rowspan=2 bgcolor= green >Fila 2 y 3, columna 4</td> <td>fila 3, columna 1</td> <td>fila 3, columna 2</td> <td>fila 3, columna 3</td>
Y la imagen obtenida en pantalla: Aunque no se ha comentado explícitamente, 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 también dentro de la nueva lista o la nueva tabla. La imagen siguiente nos muestra cómo se puede utilizar esta etiqueta para organizar distintos elementos en las dos dimensiones de la pantalla. El código que se ha utilizado para generarla aparece después ( 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> <td height=100 align="center">aquí va una tabla</td> <td align="left">aquí va una lista</td>
<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> <td bgcolor="cyan">f1</td> <td>texto1</td> <td>texto2</td> <td>texto3</td> <td bgcolor="cyan">f2</td> <td>texto4</td> <td>texto5</td> <td>texto6</td> </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> </table>
Enlaces Hasta ahora hemos visto funciones de HTML para el formato de los textos y su representación en pantalla. Sin embargo, su característica principal como lenguaje de hipertexto es su capacidad para incorporar en los textos otro tipo de información: imágenes, vídeo, 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 páginas. 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 dónde se encuentra el fichero que contenga la imagen. Los tipos de ficheros que pueden ser representados dependen del navegador. Normalmente los formatos de imagen más comunes (.jpg,.bmp,.gif,.png ) pueden ser utilizados. Otros atributos interesantes son los ya vistos height y width para indicar el tamaño, align para indicar la posición con respecto a la página y border para situar, si se desea, un marco de los píxeles indicados alrededor. Además, 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 ratón sobre ella. A continuación aparece un ejemplo de cómo incluir una imagen en una página: <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 imágenes. 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 ubicación de los ficheros en el disco y de cómo referirse a ellos en los enlaces. El enlace por excelencia en las páginas web, el que nos permite enlazar otras páginas, otras zonas de la propia página, ficheros, enviar correo electrónico, etcétera es el etiquetado con <a></a> (del inglés, anchor). El atributo más importante es href, que indica la dirección de la hiper-referencia y por construcción de esta, su tipo. De esta manera, para enlazar una página 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 electrónico mediante el enlace usaremos la expresión mailto:dirección_de_correo. Los siguientes ejemplos sirven para mostrar estos distintos tipos de enlaces y su uso.
<a href= http://www.uji.es >Página de la Universitat Jaume I</a> <a href= mailto:fabregat@icc.uji.es>envía 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 cómo 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 continuación, especificaremos el marco en el que se va a cargar la página enlazada. Páginas con varios marcos HTML nos permite dividir la pantalla en varias zonas que pueden tratarse y enlazarse individualmente pero que forman la misma página 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 podrán luego tratar individualmente. Especificando como atributos rows o cols con una lista de tamaños, determinaremos la estructura resultante. Como esta estructura define toda la página web, una definición de marcos aparece en una página 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 más interesantes son frameborder que admite los valores 1 ó 0 para indicar que se representa o no con borde, src que nos indica la página que se cargará inicialmente y name, que nos servirá para dirigir los enlaces al marco que se desee, según se ha dicho antes. Como siempre, HTML permite definir elementos dentro de otros elementos idénticos. Así el siguiente ejemplo muestra cómo, mediante dos definiciones de marcos, creamos una página versátil 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% > </frameset> </html> <frame src= titulo.html name= titulo > <frameset cols= 15%, 85% > </frameset> <frame src= margen.html name= margen > <frame src= principal.html name= principal >
La página resultante se vería: Para saber más Además de estas breves notas, se recomienda leer los tutoriales en línea que existen en la página web de la asignatura y consultar el código HTML de las páginas 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 página web, además de indicar su nombre, incluyendo extensión, 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 sería, por ejemplo C:\dir1\dir2\nombre.ext. Esta referencia sin embargo tiene el inconveniente de no ser correcta si cambiamos de lugar la página 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 página 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 aquél en que se encuentra la página, lo indicaremos mediante../, de la forma../nombre_de_fichero. En general, si queremos descender varias carpetas que son subdirectorios de subdirectorios de aquélla en la que está la página, pondremos sus nombres hasta obtener algo como subdir1/subdir2/subdir3/imagen.jpg. Este sería el caso que se ilustra en la figura, con nuestra página 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 página estuviera en subdir3 y el fichero imagen.jpg en Origen.
Y si queremos descender por otros subdirectorios de alguno por encima del actual, la expresión quedará cómo../../subdir2_2/subdir2_22/imagen.jpg si, como aparece en esta última figura, la página 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 sitúa 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.