Capítulo 4. Introducción a HTML 4.1 Introducción HTML (HyperText Markup Language) es el lenguaje utilizado para representar documentos en la World Wide Web. Además de texto normal, incluye también elementos multimedia y existen enlaces que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet. En un lenguaje portable, es decir, se pueden visualizar y crear las páginas con cualquier sistema operativo. Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo, así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, enlaces, etc. Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo= valor y se colocan detrás del nombre de la etiqueta. El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y >, y normalmente se usan dos etiquetas, una de inicio y otra de fin. En el caso de usar una sola etiqueta de inicio y fin el formato sería el siguiente: <ETIQUETA/>. A continuación, introduciremos los aspectos más importantes de este lenguaje, haciendo hincapié en las partes más utilizadas en nuestro proyecto. 4.2 Estructura básica Los documentos HTML tienen la estructura que se muestra a continuación: Ejemplo 4.1: Estructura documento HTML <HTML> <HEAD> <TITLE>Título de la página</title>... </HEAD> <BODY> Aquí iría el contenido de la página </BODY> </HTML> La cabecera es la sección comprendida entre las etiquetas <head> y </head>, y en ella se encuentra necesariamente el título. Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas <script language= JavaScript > y </script>. En el caso de nuestro proyecto, lo que hacemos es importar el código de un fichero de JavaScript mediante un atributo de la siguiente manera: <script src= fichero.js />. 20
El cuerpo del documento HTML es lo más importante y donde debemos colocar el contenido de la página. Está delimitado por las etiquetas <body> y </body>. Algunos de los atributos que puede contener esta etiqueta son: BGCOLOR: parámetro usado para especificar el color de fondo de la página. TEXT: parámetro usado para definir el color del texto por omisión, por defecto es negro. LINK, VLINK, ALINK: parámetros usados para especificar el color por omisión de texto con enlace, enlace ya visitado y enlace activo respectivamente. BACKGROUND: parámetro usado para especificar la ruta y el nombre de archivo de la imagen que será usada como fondo del documento. 4.3 Formatos del texto El texto del documento se puede modificar de muchas formas, vamos a ver las más usuales: Títulos: Se emplean al comienzo de una sección. Las etiquetas que se usan, ordenadas de tamaño mayor a menor, son: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, con sus respectivas etiquetas de fin. Estilos de fuente: los principales estilos de fuente se consiguen con las etiquetas <b> (indica texto en negrita), <i> (cursiva), <u> (subrayado), <em> (enfatizado), <strong> (fuerte), <big> (grande), <small> (pequeño), <sub> (subíndice) o <sup> (superíndice), y las correspondientes etiquetas de final. Tamaño de fuente: Se puede especificar de dos maneras. Una de ellas por medio de un número del 1 al 7 de este modo <font size=1>texto</font>. De otra forma sería por medio de una referencia relativa, teniendo en cuenta que el tamaño por defecto es 3. Un ejemplo sería <font size= +1 >Texto</font> que tendría tamaño 4. Tipos de fuente: Se consigue con el atributo face de la etiqueta anterior. Se le asigna a este atributo el tipo de fuente que se desee. Color de la fuente: Es otro atributo de FONT. Se especifica un color asignando un valor al atributo color. Párrafos y bloques: Para separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto preformateado o bloques con significado especial como direcciones o citas. Las etiquetas <p> y</p> se utilizan para separar párrafos por una línea en blanco. Admite el atributo align que permite alinear el texto con los valores left, right, center o justify. El texto insertado entre las marcas <pre> y </pre> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. La etiqueta <address> se emplea para indicar que un texto representa una dirección o firma. Los textos entre <blockquote> y </blockquote> se presenta con tabulaciones a izquierda y derecha, es decir, márgenes a ambos lados. Y por último, dos etiquetas sin pareja de cierre, <br> que indica un salto de línea, y <hr> que representa una línea horizontal. 21
4.4 Enlaces e imágenes Un enlace aparece generalmente como un texto azul subrayado. Pulsar sobre el enlace implica saltar a otra parte del documento, a otro documento, o incluso abrir el programa de correo para enviar un mensaje a la dirección indicada. En general los enlaces tienen la siguiente estructura, y será la que usemos en nuestro proyecto: <a href= URL >Texto del enlace</a> Lo que se visualiza en el navegador es el texto del enlace, y la URL es la dirección donde apunta el enlace. La etiqueta para incluir una imagen es la siguiente: <img src= URL > No tiene etiqueta de cierre, y URL es la dirección de la imagen, que puede ser relativa o absoluta. Una etiqueta de imagen puede tener varios atributos, pero destaca alt cuyo contenido es el texto que se muestra en caso de que el navegador no cargue la imagen. 4.5 Tablas Las tablas son posiblemente la manera más clara de organizar la información. Es también el modo más adecuado de maquetar texto y gráficos de una manera controlada. Las tablas se definen con las siguientes marcas: <table> y </table> son las etiquetas donde está contenida la tabla. <tr> y </tr> son las etiquetas que indican el comienzo y el fin de una fila. <td> y </td> señalan una celda (<th> y </th> si es una celda de cabecera). La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celdas, y así sucesivamente. No es necesario que todas las filas contengan el mismo número de celdas. Los atributos que puede llevar una tabla son los siguientes: BORDER: Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno. CELLSPACING: Define el número de píxeles que separan las celdas. CELLPADDING: Especifica el número de píxeles que habrá entre el borde de una celda y su contenido. WIDTH: Especifica la anchura de la tabla. Puede estar tanto en píxeles como en porcentaje de la anchura total disponible. ALIGN: Alinea la tabla a izquierda (left), derecha (right) o centro (center). 22
Una fila puede tener los siguientes atributos: ALIGN: Alinea el contenido de las celdas de la fila horizontalmente a izquierda (left), derecha (right) o centro (center). VALIGN: Alinea el contenido de las celdas de la fila verticalmente arriba (top), abajo (bottom) o centro (middle). Y por último, los atributos de una celda: ALIGN: Alinea el contenido de la celda horizontalmente a izquierda (left), derecha (right) o centro (center). VALIGN: Alinea el contenido de la celda verticalmente arriba (top), abajo (bottom) o centro (middle). WIDTH: Especifica la anchura de la celda. También se puede especificar tanto en píxeles como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto del ancho total de la tabla. NOWRAP: Impide que, en el interior de la celda, se rompa la línea en un espacio. COLSPAN: Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha. ROWSPAN: Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta. 4.6 Formularios Un formulario se utiliza para obtener del usuario información concreta, ya sea responder a alguna pregunta o seleccionar de entre varias opciones. Todos los botones de un formulario deben estar encerrados entre las marcas <form> y </form>. Cabe destacar tres atributos de los de un formulario. El atributo action define la URL que deberá gestionar el formulario. El parámetro method define la manera en la que se mandará el formulario. Y por último, name que especifica el nombre del formulario. 4.6.1 Cajas de texto Existen tres maneras de conseguir que el usuario introduzca texto en un formulario. Las dos primeras mediante la etiqueta <input>: <input type=text> <input type=password> El primero nos dibujará una caja donde escribir un texto de una sola línea. El segundo es equivalente, pero no veremos lo que tecleemos en él. Se pueden modificar mediante los atributos size, que indica el tamaño de la caja, maxlength, que especifica el 23
número máximo de caracteres que puede introducir el usuario, y value, que asigna el texto por defecto que contendrá la caja. Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la etiqueta <textarea>. Lo que se incluya entre esta etiqueta y la de cierre será lo que se muestre por defecto dentro de la caja. Admite dos atributos, rows, que indica las filas que ocupará la caja de texto, y cols, que especifica las columnas que ocupará la caja de texto. 4.6.2 Lista de opciones o menú desplegable Para emplearlas se necesitan dos etiquetas, teniendo el siguiente formato: Ejemplo 4.2: Lista desplegable <select name= nombre > <option>opción1 <option>opción2 </select> La etiqueta <select> admite dos parámetros, size, que indica el número de opciones que podremos ver (si es mayor que uno veremos una lista de selección, si no, veremos una lista desplegable), y multiple, que si se indica se podrá elegir más de una opción. Los atributos que pueden acompañar a la etiqueta <option> son value, valor que asignará a la variable, y selected, que si se indica en una de las opciones, ésta será la seleccionada por defecto. 4.6.3 Botones de radio o de opción Otra manera de permitir al usuario elegir de entre varias opciones es mediante los botones de radio. Tiene la siguiente forma: <input name= nombre type=radio value = valor > Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo nombre. De sus atributos destacan value, que asigna un valor a la variable, y checked, que si se indica en una de las opciones, ésta será la que esté activada por defecto. 4.6.4 Casillas de verificación Permiten que el usuario confirme o niegue algo activando (valor on) o desactivando (valor off) la casilla. Para asociar varias casillas a una misma variable les pondremos a todas ellas igual nombre. Permite así marcar una o más casillas (respuesta múltiple). Tiene la siguiente forma: <input name= nombre type=checkbox> 24
Para que el control esté activado por defecto añadiremos el parámetro checked. También se puede asignar un valor distinto de on en caso de activación con el atributo value. 4.6.5 Botones del formulario El botón que permite mandar el formulario tiene asociado el siguiente código: <input type=submit> Para limpiar todo lo que haya rellenado un usuario en el formulario se utiliza: <input type=reset> Podemos cambiar el texto que el navegador pone por defecto en estos botones dando un valor al parámetro value. Además, existe otro botón, cuyo atributo type tiene el valor hidden, que permite que tengamos una variable con un valor previamente asignado. 25