Saltos de línea y líneas en blanco Otra de las herramientas de que disponemos a la hora de dar formato al texto de nuestra página es el uso de saltos de línea y líneas en blanco. Para obtener en HTML un salto de línea simple podemos usar la etiqueta <BR>, (break=romper), que no posee etiqueta pareja de cierre. Por ejemplo, con: Esta es una línea de texto. <BR>Y esta es la siguiente. Obtendremos: Esta es una línea de texto. Y esta es la siguiente. Y para conseguir un salto de línea doble (con línea vacía en medio) podemos usar la combinación de dos etiquetas <BR> Ejemplo: Esta es una línea de texto. <BR><BR>Y esta es la siguiente. Que nos da: Esta es una línea de texto. Y esta es la siguiente. La etiqueta FONT A la hora de formatear el texto en HTML sin duda alguna la estrella ha sido durante mucho tiempo la pareja de etiquetas <FONT>...</FONT>, ya que podemos aplicarla a cualquier porción de nuestro texto, permitiéndonos variar el tamaño, el tipo de letra y el color de la misma. Los principales atributos de la etiqueta FONT son: <FONT SIZE="tamaño">...</FONT>, que fija el tamaño del texto entre etiquetas, y donde el tamaño viene representado por un número entero que puede variar entre 1 (tamaño menor) y 7 (tamaño mayor), siendo su valor por defecto 3. Ejemplos: fuente tamaño 1 fuente tamaño 2 fuente tamaño 3 fuente tamaño 4 fuente tamaño 5 Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez fuente tamaño 6 fuente tamaño 7 <FONT COLOR="color">...</FONT>, que fija el color con el que va a aparecer el texto afectado, y donde el color puede venir expresado mediante su valor hexadecimal o mediante su nombre web estándar. Ejemplos: <FONT COLOR="red">texto en color rojo</FONT> <FONT COLOR="#336600">texto en color verdoso</FONT> que nos da: texto en color rojo texto en color verdoso <FONT FACE="familia">...</FONT>, que va a determinar el tipo de letra con la que aparecerá el texto, definido mediante el nombre de la familia correspondiente. Se pueden especificar varios tipos de fuente, separados por comas, de tal forma que se usara la primera de ellas especificada, siempre que el ordenador del usuario disponga la tenga instalada. Si no es así, se usara la siguiente especificada en la lista, y así sucesivamente. Si especificamos una sola fuente y esta no esta instalada en el ordenador cliente el texto se vera en la fuente por defecto, que suele ser Times New Roman. Ejemplo: <FONT SIZE="4" FACE=" Comic Sans MS ">este texto es de prueba</FONT> Con lo que obtenemos: este texto es de prueba Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Fuentes soportadas por los Navegadores - TrueType Los tipos de letras suelen ser un problema a la hora de crear una pagina web, en esta sección muestro cuales suelen ser las mas comunes dentro de la gama TrueType (Microsoft TrueType) Nombre Ejemplo Negrita Itálica Negrita Itálica Times New Roman Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Si Si Si Si Si Si Si Si Si Si Si Si Si Si Si Si Si Si No No No Andale Mono Ejemplo Ejemplo No No No Comic Sans MS Ejemplo Si No No Impact No Ejemplo No No No No No Georgia Courier New Arial Verdana Trebuchet Arial Black Webdings Comentarios Siempre que escribamos código HTML, y al igual que pasa en los lenguajes de programación, es siempre útil y yo diría que hasta obligatorio la introducción de líneas de texto que expliquen o comenten qué es lo que estamos haciendo en cada momento, no sólo por claridad en el código, si no porque si en un tiempo futuro deseamos retocar la web necesitaremos saber porqué escribimos unas etiquetas u otras. Para poder conseguir esto necesitamos poder escribir líneas de texto que aparezcan en el código pero que luego no sean visibles en el navegador, es decir debemos usar comentarios, que en HTML se consiguen mediante el par de etiquetas <!--....-->. Todo el texto incluido entre ellas será considerado como un comentario por el navegador, por lo que no lo mostrara en pantalla. Ejemplo: <!—esto es un comentario--> Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Enlaces en HTML La etiqueta A La base de toda esta sección va a ser la etiqueta A, definida en HTML mediante la siguiente sintaxis: <A propiedad="valor" propiedad="valor"...>hiperenlace</A> Y que posee las siguientes propiedades: * HREF="ruta" Que define el nombre del anclaje o la ruta URL del documento con el que va a conectarnos el hiperenlace. En el caso de un documento, éste normalmente será otra página web, pero puede ser cualquier otro tipo de documento: imágenes, documentos de texto, de Word, hojas de cálculo, ficheros JavaScript, etc. Si tenemos nuestro navegador configurado para abrir el tipo de documento solicitado en el hiperenlace, se abrirá en la propia ventana de éste, y si no es así, se nos abrirá un cuadro de dialogo para que permitamos abrirlo con el programa asociado al fichero o guardarlo en nuestro disco duro. Las únicas restricciones que tenemos respecto a los valores que puede tomar esta propiedad son que la URL del fichero enlazado tenga una sintaxis correcta y que el documento exista en el servidor web. Si no es así, obtendremos el conocido ERROR 404, que corresponde a un documento no encontrado. Ejemplos: A otra web: <A HREF=”http://www.google.com”>clic aquí para ir al buscador google</A> A un fichero grafico: <A HREF=”foto.jpg”>ver fotografía</A> * TARGET="nombre" Esta propiedad va a fijar la ventana en la que se va a abrir el documento solicitado en el hiperenlace (siempre que sea un fichero que pueda abrir el propio navegador). Si imaginamos que trabajamos en una página con frames, los posibles valores que puede tomar el atributo nombre son: Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez 1) nombre_ventana: que es el valor del atributo name que le hayamos dado en una página de frameset a un frame o a una ventana flotante en la que queramos que se abra el documento. 2) _self: representa al propio frame o ventana en que se encuentra el enlace, y es el valor por defecto. El documento solicitado se cargará en la página actual, reemplazando a la que lo ha solicitado. 3) _parent: representa al frame padre del que contiene la página con el enlace, es decir, al que se encuentra inmediatamente por encima del actual en la jerarquía de frames de la página. 4) _top: que representa al frame padre de todos los de la ventana del navegador, con lo que el documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior. 5) _blank: que representa a una pantalla en blanco, por lo que el documento se abrirá en una nueva ventana del navegador. Ejemplo: <A HREF=”foto.jpg” TARGET=”_blank”>ver fotografía</A> * TITLE="cadena" Mediante esta propiedad podemos fijar un texto descriptivo del destino del enlace o de la funcionalidad del mismo, que aparecerá cuando el puntero del ratón se posicione sobre el enlace, en forma del conocido "tip" o bocadillo explicativo, común a diferentes aplicaciones. El mensaje a mostrar quedará definido mediante el valor "cadena". Es ésta una propiedad muy interesante, ya que en muchas ocasiones el texto o imagen que actúan como enlace no son lo suficientemente significativos, por lo que el usuario puede no tener claro dónde le va a enviar el enlace. Esta confusión podemos corregirla empleando TITLE, que dará al usuario la suficiente información sobre la utilidad final del enlace. Ejemplo: <A HREF=”foto.jpg” TARGET=”_blank” TITLE=”aquí tienes una fotografía de Manizales”>ver fotografía</A> Nota: También podemos asignar un hipervínculo a una imagen, para esto solo es necesario insertarla mediante la etiqueta <IMG> ubicándola en el medio de <A HREF> y </A> Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Ejemplo: <A HREF="http://www.yahoo.es" TARGET="_blank"> <IMG SRC = "imagenes/yahoo.gif" width="66" height="20"></a> Con lo que obtenemos: Enlaces dentro de una misma página: Podemos usar la etiqueta <A> para implementar enlaces que nos lleven a diferentes partes o secciones de la página en que están incluidos, pudiendo con ellos navegar dentro de una página. Este tipo de enlaces recibe el nombre genérico de anchors o anclas, y para establecerlos necesitamos crear dos elementos diferentes. Por un lado, necesitamos fijar el punto de la página donde va a ir el enlace, cosa que conseguimos escribiendo en ese punto la siguiente etiqueta: <A NAME="nombre_anclaje">texto/imagen_de_referencia</A> Y por otro lado, necesitamos crear el texto o imagen que nos va a llevar al punto definido anteriormente, lo que conseguimos mediante el código: <A HREF="#nombre_anclaje">texto_explicativo</A> OJO: Nótese el caracter (#) justo antes del nombre del anclaje. Hay que ponerlo siempre en este tipo de enlaces. Eventos Vamos a ver ahora una de las partes más importantes sobre la etiqueta <A>, y es la correspondiente a los eventos que soporta. La importancia de este aspecto se basa en que los links son verdaderos "disparadores" de eventos, ya que soportan casi todos los tipos de ellos que existen en HTML, permitiéndonos entonces extender la captura de determinados eventos a otros elementos HTML que no los soportan bien o por completo. Para mostrar ejemplos vamos a usar el método de JavaScript, alert, que lanza una ventana con un mensaje. Los principales eventos soportados por la etiqueta <A> son: Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Eventos de ratón: onmouseOver, que salta cuando se pasa el puntero del ratón sobre un enlace: <a href="#" onmouseOver="alert('Evento MOUSEOVER')">onmouseOver</a> onmouseOut , que salta cuando, tras pasar el puntero del ratón por el enlace, nos vamos de él. <a href="#" onmouseOut="alert('Evento MOUSEOUT')">onmouseOut</a> onmouseDown, que salta cuando pulsamos sobre el enlace con el puntero del ratón, sin necesidad de despulsar. Es decir, salta con el sólo hecho de bajar el botón izquierdo o derecho del ratón sobre el enlace: <a href="#" onmouseDown="alert('Evento MOUSEDOWN')">onmouseDown</a> onmouseUp, que salta cuando, tras haber pulsado con uno de los botones del ratón sobre el enlace, dejamos libre ese botón del ratón, sin necesidad de sacar el puntero del enlace: <a href="#" onmouseUp="alert('Evento MOUSEUP’)">onmouseUp</a> onmouseMove, que salta cuando movemos el puntero del ratón sobre el texto o imagen del enlace: <a href="#" onmouseMove=" alert('Evento MOUSEMOVE’)">onmouseMove</a> - onClick, que salta cuando se pincha sobre el enlace con el botón izquierdo del ratón: <a href="#" onClick="alert('Evento CLICK’)">onClick</a> onDblclick, que salta cuando se hace doble click sobre el enlace con el botón izquierdo del ratón : <a href="#" onDblclick="alert('Evento DBLCLICK’)">onDblclick</a> Notas adicionales: 1) Aunque a primera vista hay eventos que puedan parecer de igual activación, cada uno de ellos difiere de los demás en algún aspecto. No hay dos eventos iguales, aunque en ocasiones parezca que trabajan igual. 2) Alguno de los eventos anteriores puede parecer a primera vista poco útiles. En el caso de enlaces simples de texto es cierto que algunos eventos tienen Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez una aplicación práctica incierta, pero cuando entramos en el uso de los links como disparadores de eventos para otros elementos es cuando adquieren todo su sentido. Ampliación: Retornando a lo que decíamos al principio de esta sección, existen muchos elementos de HTML que no soportan todos los eventos anteriores, o que lo hacen de forma defectuosa o incompleta. Es entonces cuando podemos auxiliarnos de los enlaces para dar a ese elemento HTML la facultad de capturar todos los eventos. En realidad no es él el que captura el evento, si no el enlace que lo contiene, pero el resultado final, que es el que de verdad nos interesa, es el que estábamos buscando. Como ejemplo de esto, vamos a ver cómo una imagen, que en Nestcape Navigator 4x no soporta el evento onmouseOver, si puede ser activada mediante él usando un enlace. Si tenemos definida la imagen siguiente: <img src="imagenes/yahoo.gif" width="66" height="20" onmouseOver="alert('evento capturado')"> En Internet Explorer sí que se activará el evento al pasar el cursor sobre ella, pero si se esta usando Nestcape 4x, no ocurrirá nada. Ahora bien, si metemos la imagen dentro de un enlace y colocamos el evento en el mismo, tendremos el problema resuelto: <a href="#" onClick="return false" onmouseOver="alert('evento capturado')"> <img src="imagenes/yahoo.gif" width="66" height="20"> </a> Nota: A lo largo del tema que estamos tratando, tal vez se han preguntado por que cuando pongo un enlace que no quiero que me lleve a ninguna página al ser ejecutado utilizo como valor de href el caracter # y luego en ocasiones pongo el evento onClick="return false". La razón es que si no pongo la propiedad href, el navegador no considera a la etiqueta <A> como un enlace; por eso pongo el caracter “#”, que es como si estableciera que el enlace me va a llevar a una anclaje genérico, aunque en realidad éste no exista. Pero si sólo pongo eso, al ejecutar el enlace el navegador me lleva al principio de la página, ya que considera que el ancla a la que me refiero queda allí. Es por eso que se pone return false en el evento onClick, ya que así anulamos la funcionalidad de la propiedad href, con lo que podemos pulsar un enlace y aprovecharnos de sus eventos sin que el documento de la página se inmute. Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Tablas en HTML Las tablas son una de las herramientas mas útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente de distribución que había antes de la introducción de las Hojas de Estilo y de las capas. Es por esta facilidad a la hora de organizar con tablas nuestras páginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque están "ocultas". Pero no todo es coser y cantar a la hora de trabajar con tablas, ya que a veces actúan un poco "a su aire", por lo que podemos llegar a desesperarnos al pasar varias horas intentando que una tabla se comporte como nosotros queremos. Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar información, no como una ayuda para el diseño grafico de la pagina, ya que en esa época el lenguaje y las paginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolución, y no fue hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una pagina web como un medio global para transmitir no solo texto plano, si no también contenidos gráficos y multimedia. Para solucionar estas carencias hace falta conocer bien todas las etiquetas y atributos de que disponemos para la creación de tablas. Estructura de una tabla Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna. columna 1 columna 2 columna 3 fila 1 celda(1,1) celda(1,2) celda(1,2) fila 2 celda(2,1) celda(2,2) celda(2,3) fila 3 celda(3,1) celda(3,2) celda(3,3) Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>. Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR> y su correspondiente de cierre de fila</TR>, por lo que deberemos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla. Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>. De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de etiquetas sería el siguiente: <TABLE> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> </TABLE> Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma: <TABLE> <TR> <TD> celda(1,1) </TD> <TD> celda(1,2) </TD> <TD> celda(1,3) </TD> </TR> <TR> <TD> celda(2,1) </TD> <TD> celda(2,2) </TD> <TD> celda(2,3) </TD> </TR> <TR> <TD> celda(3,1) </TD> <TD> celda(3,2) </TD> <TD> celda(3,3) </TD> </TR> </TABLE> Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez Atributos: <TABLE> y </TABLE> son las etiquetas principales de definición de una tabla, que acotan el espacio en el que podemos definir filas y celdas. Sus principales atributos son: WIDTH="p", donde p puede venir expresado en píxeles ó en tanto por ciento (%). Este atributo determina la anchura que va a tener la tabla. Si le damos un valor en píxeles la anchura será absoluta, con esa medida independientemente del tamaño de la pantalla o del elemento que contenga la tabla, mientras que si le damos un valor en % la anchura será relativa al tamaño de pantalla ó del elemento que contenga la tabla. Así, si queremos que la tabla ocupe toda la ventana del navegador, bastara con especificar WIDTH="100%". <TABLE WIDTH="100%" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> HEIGHT= "p", donde p puede venir expresado como un entero (píxeles) ó como tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la tabla, y con él ocurre igual que con WIDTH en lo que respecta a los valores absolutos (píxeles) y relativos (%). Normalmente el alto de la tabla no se especifica, ya que su valor lo va a determinar el texto y/o las imágenes que vamos a introducir en las celdas de la misma. <TABLE WIDTH="100" HEIGHT="100" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> BORDER= "n", donde n es un número entero. Este atributo va a permitir que veamos los bordes de la tabla y de las celdas que la componen, que van a tener una anchura de n píxeles, Si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no aparecerán con bordes, por lo que si queremos que se muestren deberemos insertar en la celda un espacio (&nbsp;) o una etiqueta <BR>. <TABLE WIDTH="100" BORDER="5"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez BORDERCOLOR= "color", donde color puede venir expresado mediante su nombre web en inglés ó mediante su código hexadecimal. Nótense las comillas que encierran la definición del color. Este atributo nos permite definir el color en que se vera el borde de nuestra tabla. La etiqueta <TABLE>, también posee atributos de color e imagen de fondo al igual que <BODY> por lo cual cabe resaltar que se implementan de la misma forma: Ejemplo: <TABLE BGCOLOR=”blue” ></TABLE> <TABLE BACKGROUND= "imágenes/foto.jpg"></TABLE> ALIGN= "a". Este atributo nos va a permitir alinear la tabla respecto a la pantalla activa o respecto al elemento que contiene a la tabla, dependiendo de los posibles valores del atributo a, que son: a=LEFT: alinea la tabla a la izquierda. Es el valor por defecto. a=CENTER: sitúa la tabla en el centro. a=RIGHT: sitúa la tabla a la derecha del elemento contenedor. ROWSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias celdas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene. COLSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias columnas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene. Ejemplos. <TABLE WIDTH="50%" CELLPADDING="5" CELLSPACING="0" BORDER="1"> <TR> <TD COLSPAN="3" ALIGN="center">CELDA ESPANDIDA</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> <TD WIDTH="33%">TRES</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> <TD WIDTH="33%">TRES</TD> </TR> </TABLE> Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez CELDA ESPANDIDA UNO DOS TRES UNO DOS TRES <TABLE WIDTH="75%" CELLPADDING="2" CELLSPACING="0" BORDER="1"> <TR> <TD ROWSPAN="3">CELDA ESPANDIDA</TD> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">UNO</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> </TR> </TABLE> CELDA ESPANDIDA UNO DOS UNO DOS UNO DOS Programación para Sistemas en Red I Profesor: Julio Cesar Meza Ramirez