Esta es la segunda parte del manual sobre creación de páginas web, en concreto la parte relativa al HTML que en la anterior vez, dejé un poco en el aire, dando, simplemente, una breve introducción al mismo. Esta vez os traigo un pupurri de prácticamente todas las etiquetas que se pueden encontrar actualmente en este lenguaje. Sí, es cierto, hay más, pero como se trata de un breve manual de referencia, no he visto necesario incluir más, de todas formas, si por alguna razón, alguien cree que debería contener más etiquetas, o que he obviado alguna importante, no dude en decirlo que subsanaré el error en cuanto lo reciba.
El lenguaje HTML:
<body></body> además de ser la etiqueta que contiene todo aquello que se va a mostrar en la página, tiene muchos atributos interesantes: “bgcolor” que da color al fondo de la página, este color se expresa en formato hexadecimal, utilizando 6 dígitos en grupos de dos, es decir que dos dígitos representan la cantidad de un color, tal que así: #FFOOCC (FF representan la cantidad de rojo que tiene ese color, OO representa la cantidad de verde, y CC representa la cantidad de azul), estos números pueden variar en dígitos hexadecimales, del F al cero, y su combinación da cualquier color posible; “text” es otro atributo de <body> y se utiliza para dar color al texto, utilizando el mismo método que para el color del fondo; “link” “vlink” y “alink” son atributos que controlan los colores de los links, el primero sirve para los links sobre los que no se ha actuado, el segundo da color a los enlaces ya visitados, y el tercero da color a los enlaces justo cuando son pulsados, en todos la forma de poner los colores es idéntica a la del atributo “bgcolor”; también se puede utilizar una imagen como fondo del documento, en este caso se utiliza el atributo “background” utilizando una ruta relativa o absoluta para indicar la localización del archivo de imagen. (ej: <body bgcolor=“#FCC3AD” text=“#000000” link=“#99DDEE” vlink=“#019A6B” alink=“#478FDC” background=“imagen.gif”> )
<p></p> Son las etiquetas que encierran los párrafos (una apertura y un cierre por párrafo). Además, al escribir la etiqueta de cierre, hace un salto de línea.
<br /> Etiqueta que inserta un salto de línea. Como si fuera un intro en un documento cualquiera.
<h1></h1>, <h2></h2> (hasta h6) son etiquetas de encabezado o cabecera. Según el número que acompañe a la h la letra será más grande (h1) o más pequeña (h6).
<center></center> encierra aquellos elementos que se quieren centrar, desde una palabra, hasta una anidación de etiquetas.
<hr /> introduce una línea horizontal que divide los textos (ej.: cabecera y texto), puede ser de diferentes longitudes y grosores, con “width” modificamos la anchura y con “size” su espesor, además, se puede utilizar “align” para alinearla. El atributo “noshade” hace que sea una sólida no embutida sobre el fondo.
<strong> </strong>, <em> </em>, <u> </u> son etiquetas de formato de texto, “strong” pone en negrita aquello que contiene, “em” lo pone en cursiva y “u” lo subraya.
<ul> </ul> estas etiquetas crean listas desordenadas en su interior. <ol> </ol> crea listas ordenadas en su interior. Ambas etiquetas necesitan anidar la etiqueta <li></li> para que contenga los elementos de la lista. Se pueden anidar tantos elementos de lista como se necesite.
<dl> </dl> crea listas de definición, apropiadas para glosarios y términos de definición. Anidan las etiquetas <dt> </dt> que contiene el elemento a definir y <dd> </dd> que contiene la definición del elemento.
<!– –> un comentario se sitúa entre los guiones (y separado por espacio de ellos) así se pueden incluir notas que no aparecerán en el documento mostrado. Son muy usados para poner de encabezado a las partes de la página a modo de guía para quien necesite modificarla.
<a href=“”>…..</a> sirve para crear un enlace mostrando como palabra usable lo que contengan las “a” href=“” indica la ruta (relativa o absoluta) del archivo al que el enlace hace referencia. Para acudir a una parte de cierta página se crean las llamadas marcas, en las que en el href=”#” (donde el asterisco indica que no se trata de un enlace normal si no que sirve para acceder a una marca fijada), se incluiría el nombre de la marca a la cual queremos saltar. Para crear la marca se utiliza el atributo de “a” name=. (ej.: <a name=“inicio” href=“#fin”> enlace </a>). Para crear un enlace que permita enviar un correo electrónico se utilizará una llamada especial: <a href=“mailto:correo@e.mail”>enlace</a>
<img src=“” /> etiqueta que sirve para introducir imágenes en la página, el atributo “src” funciona igual que el “href” de la etiqueta “a”, sirve para introducir la ruta (relativa o absoluta) de la imagen que se quiere introducir. Un atributo muy importante de esta etiqueta es el “alt” que mostrará un texto alternativo en aquellos casos que la imagen no pueda ser mostrada. Otros atributos importantes son width=“” (indica el ancho de la imagen) y height=“” (indica el alto de la imagen), se usan principalmente para dos cosas, la fundamental es indicar al navegador el tamaño que va a ocupar la imagen para que reserve un espacio durante la carga de la página mientras la muestra, esto sirve para reducir el tiempo de espera del usuario, al poder el navegador ir cargando otros elementos menos pesados de la misma; la segunda forma de usarlo es para escalar la imagen dándole al navegador tamaños diferentes a los propios de la imagen, haciendo que sea el navegador quien la redimensione. También se puede alinear utilizando el atributo “align” con alguna de sus opciones: right, left, bottom, top y middle. Los dos primeros atributos colocan la imagen en relación con el texto, mientras que las tres restantes, colocan un texto al lado de la imagen en la localización indicada; Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se emplea el atributo “clear” de la etiqueta <br />, con las opciones: left (para buscar el primer margen libre, a la izquierda), rigth (busca el primer margen libre a la derecha), all (busca el primer margen libre a ambos lados).
<font> </font> es la etiqueta encargada de formatear las fuentes utilizadas, dándole un tamaño a la letra con el atributo “size”, diciendo que tipo de fuente utilizar con el atributo “face” o también dándole un determinado color en formato hexadecimal con el atributo “color”. Una etiqueta que cambia el texto para todo el documento es <basefont> pero ni el explorador firefox ni el ópera son capaces de entenderlo.
<table></table> esta es la etiqueta que engloba a todas las demás que se usaran para crear tablas. El atributo “border” dota de un borde a la tabla, por defecto pone un grosor de una unidad, pero se puede hacer más grueso mediante el símbolo igual seguido del número que quiera dársele al grosor.
La etiqueta <table> anida otras etiquetas que son las que crearán la tabla y le darán formato, las principales son <tr><tr /> (que indican el número de filas existentes) y <td></td> que crearán las celdas dentro de las filas. <tr> anida a <td>.
Se puede hacer que la tabla tenga un titular utilizando <caption></caption>. También se pueden crear celdas de cabecera, a modo de título de la columna, utilizando <th></th> en vez de <td>. Aunque se pueden utilizar en cualquier lugar de la tabla, lo normal es que se use como se indica.
HTML es un lenguaje de anidamiento, y como tal, dentro de las celdas se pueden utilizar diferentes etiquetas, por ejemplo, <img />, <a href>… tantas como se necesiten.
Se puede alinear el contenido de dentro de las celdas, mediante el atributo “align” y sus opciones (center, righ y left). En sentido vertical el alineamiento por defecto es centrado, se puede cambiar con el atributo “valign” y sus opciones: top y bottom.
Las tablas, normalmente, tienen dimensiones automáticas, adecuadas al contenido y al número de celdas y filas, pero se puede hacer que tenga otras dimensiones con los atributos width y height (valores tanto en porcentaje como en número de píxeles).
Se puede hacer que una celda ocupe varias columnas usando el atributo de <tr> “colspan” (añadiendo el igual y el número de columnas que se quiera ocupar), y también que ocupen varias celdas en la misma columna, para eso se usa “rowspan”.
Se puede aplicar un color de fondo de la misma forma que se usa para darle color al fondo de la página, es decir con el atributo “bgcolor”, seguido del código del color, esta vez en vez de aplicarlo a la etiqueta <body> se usa en las etiquetas <table> para darle un color a toda la tabla, o a <td> o <th> para que se diferencie esa celda del resto (es posible hacer que <table> tenga un color y <td> tenga otro). Además se puede utilizar el atributo “background” (de la misma forma que en <body>) en <table>, y también en <td> y <th>.
Si en la etiqueta <table> aplicamos los atributos “cellspading” y/o el atributo “cellpadding”, con el primero obtenemos una separación entre las celdas (por defecto 2 píxeles), con el segundo se obtiene una separación entre el borde y el contenido dentro de las celdas (por defecto es de un píxel).
Para crear un formulario se utiliza una etiqueta que contendrá al resto de propiedades del formulario, <form></form>, para dotar de acciones completas al formulario se usan los atributos: “action” (normalmente usado con la propiedad mailto:dirección_de_email para que los datos sean enviados vía email), “method” con las opciones post o guet (normalmente post, que indica que los datos sean enviados inmediatamente tras pulsar el botón de enviar), y “enctype” (tipo de encriptación), que para entender los datos que se envían, se utilizará la opción text/plain.
Para crear un cuadro de texto, donde el usuario insertará algo que le pedimos se utiliza: <input type=“text” name=“lo que sea” /> así se crea un cuadro de texto, en el que el usuario pondrá lo que se le pida y al enviar el “name” nos servirá para identificar a qué pertenecen los datos. Se puede poner atributos de máximo de tamaño del cuadro “size” y/o de máximo de caracteres introducibles “maxlength”. Un tipo especial de cuadro de texto es el de contraseña, en este caso, en vez de poner type=“text” se utilizará type=“password”, así se oculta el texto introducido.
Si lo que se quiere es incluir un gran campo de texto, donde se puedan dejar, por ejemplo, comentarios, lo que se hace es utilizar la etiqueta <textarea></textarea> con un atributo “name”, para lo mismo que en el caso anterior, un atributo “rows” que indicará el número de filas que tendrá el área de texto, y otro “cols” que indicará el número de columnas.
Una opción típica de cualquier formulario, es la de elegir entre varias opciones que se nos muestran, por medio de menús desplegables, esto se consigue mediante la etiqueta <select></select> en cuyo interior se encuentran las opciones a elegir, entre las etiquetas <option></option>, <select>, llevará el atributo “name” para el mismo motivo que anteriormente. Se puede introducir un atributo en <select> que haga que se muestre más de una opción en un principio, esto es, que en vez de mostrar una como hace por defecto y haya que desplegar el menú, muestre varias, para, por ejemplo, no tener que desplegar el menú.
Una forma práctica de crear opciones, en con las cajas de confirmación (checkbox), esta vez se creará mediante un <input> con atributo type=”checkbox” y un “name”, así se crea una caja que el usuario puede seleccionar o no. Para hacer que aparezca seleccionado de manera predefinida se utilizará el atributo checked=“checked”. Otra forma de opciones es mediante los botones de radio, estos son botones que se aúnan en una sola categoría mediante el atributo “name” para hacer que sólo pueda ser elegida una opción entre los de esa categoría. Para crearlos sólo hace falta poner <input type=“radio” name=“común” value=“único” /> en el que el value indica el valor único de cada botón. También se puede introducir el atributo “checked” ya comentado, para hacer que se seleccione una opción preferencialmente.
Para que el formulario pueda ser enviado a la dirección de destino incluida al principio del mismo, se necesita que se mande hacer, para ello se utiliza el botón de enviar o submit y se crea <input type=“submit” value=“Enviar” /> El type submit, crea por defecto un botón con la propiedad de enviar el formulario a la dirección de correo, el value indica qué es lo que se verá como texto en el botón. Otro botón muy valioso es el de reset o borrado, que permite borrar del formulario todos aquellos datos que ha introducido el usuario, se crea <input type=“reset” value=“Borrar” /> se da el mismo caso que en el botón de enviar, pero este lo borra todo.