HTML
Tabla de contenido
1.Conceptos generales de HTML.........................................................................................1 1.1.Qu es HTML?..............................................................................................................1 1.2.Lenguaje de Etiquetas.................................................................................................2 1.3.Partes de un documento HMTL.................................................................................3 1.4.Una pgina muy sencilla en HTML............................................................................4 2.Formatos generales.............................................................................................................5 2.1.Prrafos y saltos de lnea.............................................................................................5 2.2.Otros contenedores de prrafo................................................................................7 2.3.Encabezados................................................................................................................9 3.Formatos de Fuente...........................................................................................................10 3.1.Negrita, itlica, subrayado, subndices y suprandices.......................................10 3.2.Tamao, tipo y color..................................................................................................12 3.3.Anidar Etiquetas..........................................................................................................14 4.Atributos para pginas.....................................................................................................15 4.1.Fondo............................................................................................................................15 4.2.Color de texto.............................................................................................................16 4.3.Mrgenes.....................................................................................................................16 5.Listas......................................................................................................................................17 5.1.Desordenadas.............................................................................................................17 5.2.Ordenadas..................................................................................................................19 5.3.De definicin...............................................................................................................20 5.4.Anidando listas............................................................................................................21 6.Comentarios.......................................................................................................................22 7.Caracteres especiales......................................................................................................23 7.1.Insercin de cdigo HTML.........................................................................................25 8.Especificacin del idioma del contenido: el atributo lang.......................................25 9.Enlaces.................................................................................................................................27 9.1.Enlaces internos..........................................................................................................28 9.2.Enlaces locales...........................................................................................................29 9.3.Enlaces remotos..........................................................................................................29 9.4.Enlaces a direcciones de correo............................................................................30 9.5.Enlaces con archivos.................................................................................................31
10.Imgenes...........................................................................................................................32 10.1.Atributos de imgenes............................................................................................32 10.2.Utilizar imgenes como enlaces............................................................................34 10.3.Alineacin de imgenes.........................................................................................34 10.4.Mapas de imgenes................................................................................................35 11.Tablas.................................................................................................................................38 11.1.Atributos de filas y celdas.......................................................................................39 11.2.Atributos de tabla....................................................................................................41 11.3.Tablas anidadas.......................................................................................................43 11.4.Dando vistosidad......................................................................................................44 12.Los atributos alt y title......................................................................................................44 12.1.Diferencias.................................................................................................................44 13.Frames................................................................................................................................45 13.1.Declaracin de los Frames.....................................................................................46 13.2.Ejemplo de la creacin de un frame simple.......................................................48 13.3.Como dirigir el enlace al frame.............................................................................49 13.4.Valores para el atributo target..............................................................................49 13.5.Anidacin de frames...............................................................................................50 13.6.Atributos para la etiqueta frameset.....................................................................52 13.7.Atributos para la etiqueta frame...........................................................................52 13.8.Ventajas e inconvenientes de usar frames.........................................................53 14.Metainformacin.............................................................................................................54 14.1.Informacin personal...............................................................................................54 14.2.Si los "Robots" deben tener en cuenta esta pgina o no.................................55 14.3.Para "refrescar" una pgina o redirigirla a otra, transcurrido un cierto tiempo.................................................................................................................................56 14.4.La fecha en la que expira una pgina................................................................56 14.5.Para que no se guarde la pgina en la cach.................................................56 14.6.Idioma espaol.........................................................................................................57 14.7.Pgina de cdigos de caracteres en espaol..................................................57 15.Insercin de archivos multimedia.................................................................................57 15.1.Insercin de audio...................................................................................................58 15.2.Insercin de video....................................................................................................60 15.3.Insercin de videos de google..............................................................................62
II
16.iframes................................................................................................................................62 17.Formularios........................................................................................................................63 17.1.Definicin de un Formulario....................................................................................63 17.2.Componentes de los Formularios..........................................................................64 17.2.1.Cuadros de Texto.............................................................................................64 17.2.2.Texto largo..........................................................................................................66 17.2.3.Listas de opciones............................................................................................67 17.2.4.Botones de Radio.............................................................................................69 17.2.5.Cajas de Validacin........................................................................................70 17.2.6.Botn de Envo..................................................................................................70 17.2.7.Botn de Borrado.............................................................................................70 17.2.8.Datos Ocultos....................................................................................................70 17.2.9.Botones normales.............................................................................................71 17.2.10.Botones de envo grfico..............................................................................71 17.2.11.Ficheros adjuntos............................................................................................71 17.2.12.Tabla resumen de entradas de formularios...............................................72 17.3.Controles deshabilitados y de slo lectura.........................................................73 17.3.1.Controles deshabilitados: DISABLED..............................................................73 17.3.2.Controles de slo lectura: READONLY..........................................................73 17.4.Formularios avanzados............................................................................................74 17.4.1.Aadir estructura a los formularios: los elementos FIELDSET y LEGEND.. .74 17.4.2.Rtulos. El elemento LABEL..............................................................................75 17.5.Dirigir el foco hacia un elemento..........................................................................76 17.5.1.Navegacin con tabulador...........................................................................76 17.5.2.Teclas de acceso..............................................................................................78 17.6.Ejemplo de formulario.............................................................................................79 18.Editores de pginas Web...............................................................................................80 18.1.Editores de HTML.......................................................................................................80 18.2.Editores WYSIWYG....................................................................................................81 19.Validador...........................................................................................................................82 20.Bibliografa.........................................................................................................................82
III
Lo que obtendris despus del curso: Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad. Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en el mbito de la Red. Posiblemente una aficin que puede convertirse en pasin y terminar, en algunos casos, siendo un vicio o un oficio.
HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. El HTML es el lenguaje usado por los navegadores para mostrar las pginas Webs al usuario, siendo hoy en da la interfaz ms extendida en la red. Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto. El HTML se cre en un principio con objetivos divulgativos. No se pens que la Web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las Web. Ejemplos que pueden sonaros son las CSS, JavaScript, Paginas Dinmicas. Otros de los problemas que han acompaado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de
1
una manera unificada. Esto obliga al webmaster a, una vez creada su pgina, comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados. Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de textos. Es recomendable usar el Bloc de notas que viene con Windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto plano, con lo que podremos tener problemas. Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puede que, ms que aprender HTML, resulte ms interesante aprender el uso de una aplicacin para la creacin de pginas. As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensin .html, por ejemplo mipagina.html.
El resultado sera:
El resultado es un documento con la siguiente estructura: <html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave, </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body> </html> Un documento HTML 4.01 debera tener la siguiente estructura: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Ttulo del documento</TITLE> </HEAD>
3
Si ahora hacis clic con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas. Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una pgina web. Lo que est pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensin .txt y en realidad lo que est guardando en el disco duro es mi_pagina.html.txt.
2. Formatos generales.
2.1. Prrafos y saltos de lnea.
Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica... Hemos visto que para definir los prrafos nos servimos de la etiqueta <p> que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento. Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea. Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual. Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.
Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la izquierda escribiramos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda Para una justificacin al centro: <p align="center">Texto alineado al centro</p> que dara: Texto alineado al centro Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto sera: Texto alineado a la derecha Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left. Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas. El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos.
6
As, el cdigo: <p align="left">Parrafo1</p> <p align="left"> Parrafo2</p> <p align="left"> Parrafo3</p> es equivalente a: <div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div> Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.
Los navegadores representan generalmente un BLOCKQUOTE como un bloque con sangra. Los navegadores deben asegurarse de que el contenido del elemento Q se representa con marcas de citacin a su alrededor. Los autores no deberan colocar marcas de citacin al principio y al final del contenido de un elemento Q.
7
Los navegadores deberan representar las marcas de citacin en funcin del idioma (ver el atributo lang ms adelante). Hay muchos idiomas que adoptan diferentes estilos de citacin para las citas externas y las internas (anidadas), lo cual debera ser respetado por los navegadores. El siguiente ejemplo ilustra las citas anidadas con el elemento Q. John said, <Q lang="en-us">I saw Lucy at lunch, she told me <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q> Como el idioma de ambas citas es en ingls americano, los navegadores deberan representarlos de forma apropiada, por ejemplo, con comillas simples alrededor de la cita interior y con comillas dobles alrededor de la cita exterior: John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road." El elemento PRE le dice a los navegadores que el texto contenido est "preformateado". Al tratar con texto preformateado, los navegadores: Pueden dejar el espacio en blanco intacto. Pueden representar el texto con una fuente de ancho fijo. Pueden desactivar el ajuste automtico de lneas (word wrap). No deben desactivar el procesamiento bidireccional.
El siguiente ejemplo muestra la primera estrofa preformateada del poema de Gabriel Celaya, A Pablo Neruda: <PRE> Te escribo desde un puerto. La mar salvaje llora. Salvaje, y triste, y solo te escribo abandonado. Las olas funerales redoblan el vaco. Los megfonos llaman a travs de la niebla. La plida corola de la lluvia me envuelve. Te escribo desolado.
8
</PRE> As es como se representara esto en un caso tpico: Te escribo desde un puerto. La mar salvaje llora. Salvaje, y triste, y solo te escribo abandonado. Las olas funerales redoblan el vaco. Los megfonos llaman a travs de la niebla. La plida corola de la lluvia me envuelve. Te escribo desolado.
2.3. Encabezados.
Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o headers en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita. Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms grandes, <h2> para los de segundo nivel y as hasta <h6> que es el encabezado ms pequeo. Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocar en un prrafo independiente. Podemos ver cmo se presentan algunos encabezados a continuacin: <h1>Encabezado de nivel 1</h1> Se ver de esta manera en la pgina:
Encabezado de nivel 1
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro: <h2 align="center">Encabezado de nivel 2</h2> Se ver de esta manera en la pgina:
Encabezado de nivel 2
Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. Se puede ver a continuacin. <html> <head> <title>Todos los encabezados</title>
9
</head> <body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html> No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra ms grande y en negrita debemos utilizar las etiquetas que existen para ello. Los encabezados son para colocar titulares en pginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.
3. Formatos de Fuente.
3.1. Negrita, itlica, subrayado, subndices y suprandices.
Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de textos cientficos. Todo esto y mucho ms es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas. Negrita Podemos escribir texto en negrita incluyndolo dentro de las etiquetas <b> y </b> (bold). Esta misma tarea es desempeada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razn de esfuerzo. Escribiendo un cdigo de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en negrita Qu diferencia hay entre <b> y <strong>? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que
10
se debe escribir resaltado. El HTML lo interpretan los navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la prctica los encabezados de Internet Explorer y Firefox son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los encabezados con subrayado si le pareciese oportuno. La diferencia entre <b> y <strong> se podr entender ahora. Mientras que <b> significa simplemente negrita y todos los navegadores la interpretarn como negrita, <strong> es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la prctica <strong> coloca el texto en negrita, pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto.
Itlica
Tambin en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco ms larga: <em> y </em>. En este manual, y en la mayora de las pginas que veris por ah, os encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse. He aqu un ejemplo de texto en itlica: <i>Texto en itlica</i> Que da el siguiente efecto:
Texto en itlica
Subrayado El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto. y suprandices
Subndices
Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: <sup> y </sup> para los suprandices <sub> y </sub> para los subndices He aqu un ejemplo: a<sub>2</sub>X<sup>2</sup>+a<sub>1</sub>X<sup>1</sup>+a<sub>0 </sub>X<sup>0</sup>=0
11
Quedara como: a2X2+a1X1+a0X0=0 Aqu tenis otro ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido El resultado: La 13CC3H4ClNOS es un heterociclo alergeno enriquecido
face=Comic, pero no se tendra en cuenta todo lo que sigue, porque HTML no lo asociara al valor del atributo. En este caso HTML pensara que las siguientes palabras (despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimar. Atributo size Define el tamao de la letra. Este tamao puede ser absoluto o relativo. Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7" para la ms grande. <font size=4>Este texto es ms grande</font> Que se visualizara as en una pgina web.
Que se visualizara as en una pgina web. Este texto est en rojo Otro mtodo es utilizar la paleta RGB: <font color="#FF0000">Este texto est en rojo</font> Que se visualizara as en una pgina web. Este texto est en rojo Con todo esto estamos ya en disposicin de crear un texto formateado de una forma realmente elaborada.
En el siguiente enlace tenis una tabla con todos los colores HTML.
14
Cuando anides etiquetas HTML hazlo correctamente. Si abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de ella. Debemos evitar cdigos como el siguiente: <b>Esto est en negrita e <i>itlica</b></i> En favor de cdigos con etiquetas correctamente anidadas: <b>Esto est en negrita e <i>itlica</i></b>
Estos atributos se definen en la etiqueta <body> y, como decamos son generales a toda la pgina.
4.1. Fondo.
bgcolor: especificamos un color de fondo para la pgina. El color se asigna con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pgina. Ejemplo de fondo: La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la pgina. En este caso se colocara la siguiente etiqueta<body> <body background="fondo.jpg"> Consejo: siempre que coloquemos una imagen de fondo, debemos poner tambin un color de fondo cercano al color de la imagen. Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestin (Por ejemplo tener deshabilitada la carga de
15
imgenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la imagen de fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasar que no podremos leer el texto convenientemente. Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado a nuestro sistema la imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo.
4.3. Mrgenes.
Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las pginas, lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados, arriba y debajo de la pgina. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.
16
leftmargin: para indicar el margen a los lados de la pgina. Vlido para iexplorer. topmargin: para indicar el margen arriba y debajo de la pgina. Vlido para iexplorer. marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados) marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo) Ejemplo de Mrgenes <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff"> <table width=100% bgcolor=ff6666><tr><td> <h1>Hola amigos</h1><br><br> Gracias por visitarme! </td></tr></table> </body> Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo.
5. Listas
Las listas sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o ttulos. Las listas son utilizadas para citar, numerar y definir objetos. Tambin son utilizadas corrientemente para desplazar el comienzo de lnea hacia la derecha. Podemos distinguir tres tipos de listas: Listas desordenadas Listas ordenadas Listas de definicin
5.1. Desordenadas.
Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda as: <p>Pases del mundo</p> <ul> <li>Argentina <li>Per <li>Chile
17
Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea vlido para toda la lista, o dentro le la etiqueta <li> si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo: <ul type="tipo de vieta"> donde tipo de vieta puede ser uno de los siguientes: circle disc square
Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por mucho que nos empeemos, siempre saldr el redondel negro. En caso de que no funcione siempre podemos construir la lista a mano con la vieta que queramos utilizando las tablas de HTML. Veremos ms adelante cmo trabajar con tablas. Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el ltimo elemento colocaremos un crculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectar a todos los elementos de la lista. <ul type="square"> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 <li type="circle">Elemento 4 </ul> Que tiene como resultado Elemento 1
18
5.2. Ordenadas.
En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento ser igualmente precedido de su etiqueta <li>. Pongamos un ejemplo: <p>Reglas de comportamiento en el trabajo</p> <ol> <li>El jefe siempre tiene la razn <li>En caso de duda aplicar regla 1 </ol> El resultado es: Reglas de comportamiento en el trabajo 1. El jefe siempre tiene la razn 2. En caso de duda aplicar regla 1 Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto es posible especificar el tipo de numeracin empleado eligiendo: Nmeros (1, 2, 3...). Letras (a, b, c...) y sus maysculas (A, B, C,...). Nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...).
Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributo type, el cual ser situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son: 1 Para ordenar por nmeros a Por letras del alfabeto A Por letras maysculas del alfabeto i Ordenacin por nmeros romanos en minsculas I Ordenacin por nmeros romanos en maysculas
Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar.
19
Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, start, que tendr como valor un nmero. Este nmero, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los nmeros romanos, el navegador se encarga de hacer la traduccin del nmero a la letra correspondiente. Un ejemplo usando este tipo de atributos: <p>Ordenamos por numeros</p> <ol type="1"> <li>Elemento 1 <li> Elemento 2 </ol> <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a <li> Elemento b </ol> <p>Ordenamos por nmeros romanos empezando por el 10</p> <ol type="i" start="10"> <li>Elemento x <li> Elemento xi </ol>
5.3. De definicin.
Cada elemento es presentado junto con su definicin. La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definicin son <dt> (definition term) y <dd> (definition definition) respectivamente. Aqu os proponemos un cdigo que podr aclarar este sistema: <p>Diccionario de la Real Academia</p> <dl> <dt>Brujula <dd>Serula montada en una escbula <dt>Oreja <dd>Sesenta minutejos </dl>
20
El efecto producido: Diccionario de la Real Academia Brujula Serula montada en una escbula Oreja Sesenta minutejos Fijaos en que cada lnea <dd> esta desplazada hacia la derecha. Este tipo de etiquetas son usadas a menudo con el propsito de crear textos ms o menos desplazados hacia la derecha. El cdigo: <dl> <dd>Primer nivel de desplazamiento <dl> <dd>Segundo nivel de desplazamiento <dl> <dd>Tercer nivel de desplazamiento </dl> </dl> </dl> El resultado: Primer nivel de desplazamiento Segundo nivel de desplazamiento Tercer nivel de desplazamiento
</ol> <li>Uruguay <ol> <li>Montevideo <li>Punta del Este </ol> </ul> De esta forma creamos una lista como esta: Ciudades del mundo Argentina 1. Buenos Aires 2. Bariloche Uruguay 1. Montevideo 2. Punta del Este
6. Comentarios
Los comentarios en HTML son muy fciles de poner. Es como una etiqueta que tiene un inicio y un fin. Todo el texto que pongas dentro est comentado, es decir, no aparecer en la pgina. Dentro de un comentario puedes meter texto o cdigo HTML, como etiquetas. El comentario empieza por <!-- y finaliza por --> Todo lo que pongas entre esas etiquetas est comentado. Veamos un ejemplo: <html> <head> <title>Ejemplo con comentarios</title> </head> <body> <p> Este texto est normal.</p> <p> Este texto <b>tambin</b> es normal</p> <!-Esto es un comentario <B>Al ser un <i>comentario</i></B> no aparecer nada en la pgina <p>Ni las etiquetas HTML tendrn valor</p> -->
22
7. Caracteres especiales
Una pgina web se ha de ver en pases distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres. Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "á" de modo que la palabra pgina se escribira en una pgina HTML de este modo: página Caracteres especiales bsicos En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente carcter. < & < & > " > "
Caracteres especiales del HTML 2.0 Á É Í Ó Ú á é í ó ú Ä Ë Ï À È Ì Ò Ù à è ì ò ù Â Ê Î
23
Ö Ü ä ë ï ö ü Ã Ñ Õ ã ñ õ Ø ø Ð ð ß
Ô Û â ê î ô û å Å Ç ç Ý ý ÿ Þ þ Æ æ
Caracteres especiales del HTML 3.2 ¼ ½ ¾ © ® ª ² ³ ¹ ¯ µ ¶ · °
24
¡ £ ¥ § ¤ ¦ « ¬ ­ º ´ ¨ ±
¸ ¿
»
Otros caracteres especiales × ÷ “ ” Œ ‡ ¢ € ™ ‰ ƒ †
El atributo lang especifica el idioma del contenido del elemento y de los valores de los atributos; el que sea relevante para un atributo dado depender de la sintaxis y de la semntica del atributo y de la operacin involucrada. El objetivo del atributo lang es permitir a los agentes de usuario representar el contenido de forma ms significativa segn la prctica cultural aceptada para un idioma dado. Esto no implica que los agentes de usuario deberan representar los caracteres que no son tpicos de un idioma dado de maneras menos significativas; los agentes de usuario deben intentar representar todos los caracteres lo mejor posible, independientemente del valor especificado por lang. Por ejemplo, si aparecen caracteres del alfabeto griego dentro un texto escrito en espaol: <P><Q lang="es">Sus superpoderes son el resultado de las radiaciones γ,</Q> dijo l.</P> un navegador debera intentar representar el contenido en espaol de una manera apropiada (p.ej., en lo que respecta a la puntuacin de la cita) y debe intentar representar γ lo mejor posible aunque no sea un carcter espaol. La [RFC1766] define y explica los cdigos de idioma que deben ser usados en los documentos HTML. En pocas palabras, los cdigos de idioma consisten en un cdigo principal y una serie posiblemente vaca de subcdigos: cdigo-de-idioma = cdigo-principal ( "-" subcdigo )* Aqu tenemos algunos ejemplos de cdigos de idioma: "en": ingls "en-US": la variacin estadounidense del ingls. "en-cockney": la variacin de Cockney del ingls. "i-navajo": el idioma Navajo hablado por algunos nativos americanos. "x-klingon": la marca principal "x" indica un lenguaje experimental
En la ISO639 se reservan cdigos principales de dos letras para las abreviaturas de los idiomas. Entre estos cdigos de dos letras estn fr (francs), de (alemn), it (italiano), nl (neerlands), el (griego), es (espaol), pt (portugus), ar (rabe), he (hebreo), ru (ruso), zh (chino), ja (japons), hi (hindi), ur (urdu), y sa (snscrito).
26
Se sobreentiende que cualquier cdigo de dos letras es un cdigo de pas de ISO3166. En este ejemplo, el idioma principal del documento es el francs ("fr"). Hay un prrafo que se declara como escrito en espaol ("es"), despus del cual el idioma principal vuelve a ser el francs. El prrafo siguiente incluye un frase en japons ("ja"), despus de la cual el idioma principal vuelve a ser el francs. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML lang="fr"> <HEAD> <TITLE>Un document multilingue</TITLE> </HEAD> <BODY> ...Interpretado como francs... <P lang="es">...Interpretado como espaol... <P>...Interpretado de nuevo como francs... <P>...Texto en francs interrumpido por <EM lang="ja">algo en japons</EM> Aqu vuelve a empezar en francs... </BODY> </HTML>
9. Enlaces.
Un sitio web podr ser considerado como el conjunto de archivos, principalmente pginas HTML e imgenes, que constituyen el contenido al que el navegante tiene acceso. Sin embargo, no podramos hablar de navegante o de navegacin si estos archivos HTML no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de enlaces hipertexto. En efecto, el atractivo original del HTLM radica en la posible puesta en relacin de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que permitan un acceso rpido a la informacin deseada. De poco servira en la red tener pginas aisladas a las que la gente no puede acceder y desde las que la gente no puede saltar a otras. Un enlace puede ser fcilmente detectado en una pgina. Basta con deslizar el puntero del ratn sobre las imgenes o el texto y ver como cambia de su forma original transformndose por regla general en una mano con un dedo apuntador. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y
27
subrayados para que el usuario no tenga dificultad en reconocerlos. Si no especificamos lo contrario (ya tendremos ocasin de explicar como), estos enlaces texto estarn subrayados y coloreados en azul. En el caso de las imgenes que sirvan de enlace, veremos que estn delimitadas por un marco azul por defecto. Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido bajo forma de atributo, el cual lleva por nombre href. La sintaxis general de un enlace es por tanto de la forma: <a href="destino">contenido</a> Siendo el contenido un texto o una imagen. Es la parte de la pgina que se colocar activa y donde deberemos pulsar para acceder al enlace. Por su parte, destino ser una pgina, un correo electrnico o un archivo. En funcin del destino los enlaces son, clsicamente, agrupados del siguiente modo: Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. Enlaces locales: los que se dirigen a otras pginas del mismo sitio web. Enlaces remotos: los dirigidos hacia pginas de otros sitios web. Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una direccin. Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.
28
Como podis ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto de la misma pgina que todava no hemos definido. Ojo al smbolo #; es l quien especifica al navegador que el enlace apunta a una seccin en particular. En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma pgina. En este caso, la etiqueta que escribiremos ser sta: <a name="abajo"></a>
Ser algo parecido a esto. <a href="http://www.guiarte.com">ir a guiarte.com</a> Slo cabe destacar que todos las direcciones web (URLs) empiezan por http://. Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos de colocarlas, porque si no los enlaces sern tratados como enlaces locales a nuestro sitio. Otra cosa interesante es que no tenemos que enlazar con una pgina web con el protocolo HTTP necesariamente. Tambin podemos acceder a recursos a travs de otros protocolos como el FTP. En tal caso, las direcciones de los recursos no comenzarn por http:// sino por ftp://.
Podemos colocar otros atributos del mensaje con una sintaxis parecida. En este caso indicamos tambin que el correo debe ir con copia a colaborador@correo.com.
<a href="mailto:salva@correo.com?subject=contacto por pagina&cc=colaborador@correo.com"> salva@correo.com </a>
Nota: El visitante de la pgina necesitar tener configurada una cuenta de correo electrnico en su sistema para enviar los mensajes. Lgicamente, si no tiene servicio de
30
correo en el ordenador no se podrn enviar los mensajes y este sistema de contacto con el visitante no funcionar.
31
10. Imgenes
Sin duda uno de los aspectos ms vistosos y atractivos de las pginas web es el grafismo. La introduccin en nuestro texto de imgenes puede ayudarnos a explicar ms fcilmente nuestra informacin y darle un aire mucho ms esttico. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distraccin para el navegante, quien tendr ms dificultad en encontrar la informacin necesaria, y un mayor tiempo de carga de la pgina lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexin o si es un poco impaciente. Las imgenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG y PNG (para fotos). La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo grfico mediante el atributo src (source). La sintaxis queda entonces de la siguiente forma: <img src="camino hacia el archivo"> Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas siguen siendo las mismas, lo nico que cambia es que, en lugar de una pgina destino, el destino es un archivo grfico. Aparte de este atributo, indispensable obviamente para la visualizacin de la imagen, la etiqueta <img> nos propone otra serie de atributos de mayor o menor utilidad:
haciendo clic con el botn derecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el men que se despliega. El hecho de explicitar en nuestro cdigo las dimensiones de nuestras imgenes ayuda al navegador a confeccionar la pgina de la forma que nosotros deseamos antes incluso de que las imgenes hayan sido descargadas. As, si las dimensiones de las imgenes han sido proporcionadas, durante el proceso de carga, el navegador reservara el espacio correspondiente a cada imagen creando una maquetacin correcta. El usuario podr comenzar a leer tranquilamente el texto sin que ste se mueva de un lado a otro cada vez que una imagen se cargue. Adems de esta utilidad, el alterar los valores de estos dos atributos, es una forma inmediata de redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dado que, si lo que pretendemos es aumentar el tamao, la perdida de calidad de la imagen ser muy sensible. Inversamente, si deseamos disminuir su tamao, estaremos usando un archivo ms grande de lo necesario para la imagen que estamos mostrando con lo que aumentamos el tiempo de descarga de nuestro documento innecesariamente. Es importante hacer hincapi en este punto ya que muchos debutantes tienen esa mala costumbre de crear grficos pequeos redimensionando la imagen por medio de estos atributos a partir de archivos de tamao descomunal. Hay que pensar que el tamao de una imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resulta ser aproximadamente 4 veces inferior. Atributo border Definen el tamao en pxeles del cuadro que rodea la imagen. De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente til cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho caso tendremos que especificar border="0". Atributos vspace y hspace Sirven para indicar el espacio libre, en pxeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imgenes, etc. Atributo lowsrc Con este atributo podemos indicar un archivo de la imagen de baja resolucin. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolucin (que ocupa muy poco y que se transfiere muy rpido). Posteriormente descarga y muestra la imagen de resolucin adecuada (sealada con el atributo src, que se supone que ocupar ms y ser ms lenta de transferir). Este atributo est en desuso, aunque supone una ventaja considerable para que la descarga inicial de la web se realice ms rpido y que un visitante pueda ver una muestra de la imagen mientras se descarga la imagen real.
33
Vamos a utilizar esta imagen para hacer el ejercicio: Las dimensiones originales de la imagen son 28x21, as que este sera el cdigo fuente: <img src="img1.gif" width="28" height="21" alt="Tamao original" border="3"> <br><br> <img src="img1.gif" width="68" height="21" alt="Achatada" border="0"> <br><br> <img src="img1.gif" width="28" height="51" alt="Alargada" border="0"> <br><br> <img src="img1.gif" width="56" height="42" alt="Doble grande" border="0">
Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el atributo align. En este caso, la utilidad que le damos difiere de la anterior. El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en el caso de darle los valores left o right, justificar la imagen del lado que deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma embebemos nuestras imgenes dentro del texto de una manera sencilla. Aqu podis ver el tipo de cdigo a crear para obtener dicho efecto: <p> <img src="imagen.gif" align="right">Texto tan extenso como queramos que cubrir la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla... </p> <p> <img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrir la parte derecha de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla... </p> Existen otro tipo de valores que puede adoptar el atributo align dentro de la etiqueta <img>. Estos son relativos a la alineacin vertical de la imagen. Supongamos que escribimos una lnea al lado de nuestra imagen. Esta lnea puede quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en una misma lnea tengamos varias imgenes de alturas diferentes que pueden ser alineadas de distintas forms. Estos valores adicionales del atributo align son: top Ajusta la imagen a la parte ms alta de la lnea. Esto quiere decir que, si hay una imagen ms alta, ambas imgenes presentaran el borde superior a la misma altura. bottom Ajusta el bajo de la imagen al texto. middle Hace coincidir la base de la lnea de texto con el medio vertical de la imagen.
Los mapas de imgenes es un nuevo planteamiento de navegacin que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geomtricas y funcionan exactamente del mismo modo que los otros enlaces. En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurran a tecnologas de lado del servidor para ser visualizados. Hoy en da pueden ser implementados por medio de cdigo HTML. Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. Tambin puede ser muy prctico en mapas geogrficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una pgina. En cualquier caso, el uso de estos mapas ha de estar sistemticamente acompaado de un texto explicativo que d a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen. Frases como "Haz clic sobre tal icono para acceder a tal informacin" resultan muy indicativas a la hora de hacer intuitiva la navegacin por los mapas de imgenes. Por otro lado, no esta de ms introducir esa misma explicacin en el atributo alt de la imagen. As pues, un mapa de imagen esta compuesto de dos partes: La imagen propiamente dicha que estar situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML. Un cdigo, situado en el interior de la etiqueta <map>, que delimitar por medio de lneas geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen.
Las lneas geomtricas que (0,0) +X delimitan los enlaces, es decir, las reas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (100,80) +Y (x) y anchura (y) nos encontramos. De este modo, la Dibujo 1: El recuadro es una supuesta imagen de esquina superior izquierda 100x80 pxeles corresponde a la posicin 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qu coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseo grfico como Photoshop o Paint Shop Pro.
(X,Y)
Existen herramientas gratuitas para crear de forma gratuita los mapas de imgenes. En softonic podis encontrar aplicaciones gratuitas y shareware. Las directivas para crear mapas son <MAP></MAP> y <AREA>.
36
La directiva <MAP> identifica al mapa y tiene el parmetro name para indicar el nombre del mapa. La directiva <AREA> define las reas sensibles de la imagen. Tiene los siguientes parmetros obligatorios : shape = "tipo" Indica el tipo de rea a definir. Los tipos de rea pueden ser los siguientes: rect rea rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. <area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> poly shape=POLY Polgono. Se deben especificar las (X1,Y1) coordenadas de todos los vrtices del polgono. El visor se encarga de (X4,Y4) "cerrar" la figura. <area shape="POLY" coords=" (X3,Y3) X1,Y1,X2,Y2,X3,Y3,X4,Y4" href="#"> circle Circulo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a continuacin el valor del radio (en puntos). <area shape="CIRCLE" coords="X1,Y1,R" href="#"> Si dos reas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del mapa. Es importante definir una ltima area que abarque la totalidad del grfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un rea definida. coords = "coordenadas" Indica las coordenadas de la figura indicada con shape. href = "URL" Indica la direccin a la que se accede si se pulsa en la zona delimitada por el rea indicada. (X2,Y2) shape=CIRCLE R (X1,Y1) (X1,Y1) shape=RECT
(X2,Y2)
37
Veamos un ejemplo completo. <MAP name = "casa"> <AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm"> <AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm"> <AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm"> <AREA shape = "circle" coords = "80,76,18" href= "arbol.htm"> <AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm"> <AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm"> </MAP> <CENTER> <IMG src = "casa.gif" usemap = "#casa"> Otro ejemplo:
<MAP NAME="ejemplo"> <AREA SHAPE=RECT COORDS="8,10,61,63" HREF="boton1.htm" > <AREA SHAPE=RECT COORDS="62,10,134,36" HREF="boton2.htm" > <AREA SHAPE=RECT COORDS="62,36,134,64 "HREF="boton3.htm" > </MAP> <IMG SRC="imgmap.png" USEMAP="#ejemplo">
11. Tablas.
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. En un principio nos podra parecer que las tablas son raramente tiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada ms lejos de la realidad. Hoy, gran parte de los diseadores de pginas basan su maquetacin en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera ms optima. Nos puede ayudar a generar texto en columnas como los peridicos, prefijar los tamaos ocupados por distintas secciones de la pgina o poner de una manera sencilla un pie de foto a una imagen. Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si deseamos crear una pgina de calidad, tarde o temprano tendremos que vrnoslas con ellas y nos daremos cuenta de las posibilidades nos ofrecen.
38
Para empezar, nada ms sencillo que por el principio: las tablas son definidas por las etiquetas<table> y </table>. Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imgenes que darn forma y contenido a la tabla. Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas lneas es definida por otra etiqueta y su cierre: <tr> y </tr> Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas celdas ser definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas ser donde coloquemos nuestro contenido. Aqu tenis un ejemplo de estructura de tabla: <table> <tr> <td>Celda 1, linea 1</td> <td> Celda 2, linea 1</td> </tr> <tr> <td> Celda 1, linea 2</td> <td> Celda 2, linea 2</td> </tr> </table>
39
Otros atributos que pueden ser nicamente asignados a una celda y no al conjunto de celdas de una lnea son: background: Nos permite colocar un fondo para la celda a partir de un enlace a una imagen. height: Define la altura de la celda en pxeles o porcentaje. width: Define la anchura de la celda en pxeles o porcentaje colspan: Expande una celda horizontalmente rowspan: Expande una celda verticalmente. Nota: El atributo height no funciona en todos los navegadores, adems, su uso no est muy extendido. Las celdas por lo general tienen el alto que necesitan para que quepa todo el contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que hemos colocado dentro. El atributo width si que funciona en todos los navegadores y lo tendris que utilizar constantemente. Si le asignamos un ancho a la celda, el ancho ser respetado y si dicha celda tiene mucho texto o cualquier otro contenido, la celda crecer hacia abajo todo lo necesario para que quepa lo que hemos colocado. Un matiz al ltimo prrafo. Se trata de que si definimos una celda de un ancho 100 por ejemplo, y colocamos en la celda un contenido como una imagen que mida ms de 100 pxeles, la celda crecer en horizontal todo lo necesario para que la imagen quepa. Si el elemento, aunque ms ancho, fuera divisible (como un texto) el ancho sera respetado y el texto crecera hacia abajo o lo que es lo mismo, en altura, como sealbamos en el anterior prrafo. Estos ltimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pxeles o puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamao total de la tabla A titulo de ejemplo: <td width="80"> Dar una anchura de 80 pxeles a la celda. Sin embargo: <td width="80%"> Dar una anchura a la celda del 80% de la anchura de la tabla. Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la palabra en la misma lnea.
40
Por otra parte, si el texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su contenido. Anlogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabr a cual hacer caso. Es por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos disear. No est de ms si la prediseamos en papel si la complejidad es importante. El HTML resulta en general fcil pero las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente. Los atributos rowspan y colspan son tambin utilizados frecuentemente. Gracias a ellos es posible expandir celdas fusionando stas con sus vecinas. El valor que pueden tomar estas etiquetas es numrico. El nmero representa la cantidad de celdas fusionadas. As: <td colspan="2"> Fusionara la celda en cuestin con su vecina derecha.
Del mismo modo: <td rowspan="2"> Expandir la celda hacia abajo fusionndose con la celda inferior.
cellpadding: Define, en pxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing: Define el espacio entre los bordes (en pxeles). height: Define la altura de la tabla en pxeles o porcentaje. width: Define la anchura de la tabla en pxeles o porcentaje. summary = texto: Este atributo proporciona un resumen del propsito y la estructura de la tabla para navegadores que representen en medios no visuales como voz o Braille. frame: Este atributo especifica qu lados del marco que rodea a una tabla sern visibles. Valores posibles: void: Ningn lado. Este es el valor por defecto. above: Slo el borde superior. below: Slo el borde inferior. hsides: Slo los bordes superior e inferior. vsides: Slo los lados derecho e izquierdo. lhs: Slo el lado izquierdo. rhs: Slo el lado derecho. box: Los cuatro lados. border: Los cuatro lados. rules: Este atributo especifica qu lneas de divisin aparecern entre las celdas de una tabla. La representacin de las lneas de divisin depende del agente de usuario. Valores posibles: none: Ninguna lnea de divisin. Este es el valor por defecto. goups: Slo aparecern lneas de divisin entre grupos de filas (con THEAD, TFOOT y TBODY) y grupos de columnas (COLGROUP y COL). rows: Slo aparecern lneas de divisin entre filas. cols: Slo aparecern lneas de divisin entre columnas. all: Aparecern lneas de divisin entre todas las filas y columnas. Los atributos que definen las dimensiones, height y width, funcionan de una manera anloga a la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino ms bien, justificar la propia tabla con respecto a su entorno. Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.
42
Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto ms esttico. En un principio puede parecernos un poco confuso su uso pero un poco de practica ser suficiente para hacerse con ellos. En la siguiente imagen podemos ver grficamente el significado de estos atributos.
Podis comprobar vosotros mismos que los atributos definidos para una celda tienen prioridad con respecto a los definidos para una tabla. Podemos definir, por ejemplo, una tabla con color de fondo rojo y una de las celdas de color de fondo verde y se ver toda la tabla de color rojo menos la celda verde. Del mismo modo, podemos definir un color azul para los bordes de la tabla y hacer que una celda particular sea mostrada con un borde rojo. 11.3. Tablas anidadas.
De la misma forma que podamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. As, podemos incluir una tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el mismo aunque la situacin puede complicarse si el nmero de tablas embebidas dentro de otras es elevado.
43
12.1. Diferencias
Pero los que estaris acostumbrados a programar para Internet Explorer, habris detectado, que al indicar un atributo alt este trabaja a su vez cmo title y nos muestra el tooltip. <!-- Tooltip con Internet Explorer --> <img alt="Logo de la web" src="http://www.programacionweb.net/imagen.gif"> Esto no es as con otros navegadores como por ejemplo Firefox, en su caso, el atributo alt se utiliza slo como texto alternativo y para mostrar el tooltip hay que utilizar el atributo title ( compatible con IE y Firefox ). <!-- Tooltip compatible con W3C --> <img title="Logo de la web" alt="Texto alternativo" src="http://www.programacionweb.net/imagen.gif">
44
13. Frames.
Una de las caractersticas de HTML son los frames, que se aadieron, tanto en Netscape Navigator como en Internet Explorer, a partir de sus versiones 2.0. Los frames -que significan en castellano marcos- son una manera de partir la pgina en distintos espacios independientes los unos de los otros, de modo que en cada espacio se coloca una pgina distinta que se codifica en un fichero HTML distinto. Al principio se crearon como etiquetas propietarias del navegador Netscape y rpidamente la potencia del recurso hizo que el uso de frames se extendiera por toda la web. Poco tardara Internet Explorer en incluirlos, para que no se le escapase una novedad tan popular de su competidor. Finalmente, como respuesta a la popularidad entre los desarrolladores de los frames, el estndar HTML 4.0 incluy estas etiquetas dentro de las permitidas. Los frames, como decamos, nos permiten partir la ventana del navegador en diferentes reas. Cada una de estas reas son independientes y han de ser codificadas con archivos HTML tambin independientes. Como resultado, cada frame o marco contiene las propiedades especficas que le indiquemos en el cdigo HTML a presentar en ese espacio. As mismo, y dado que cada marco es independiente, tendrn sus propias barras de desplazamiento, horizontales y verticales, por separado. Existen en la web muchas pginas que contienen frames y seguro que todos hemos tenido la ocasin de conocer algunas. Se suelen utilizar para colocar en una parte de la ventana una barra de navegacin, que generalmente se encuentra fija y permite el acceso a cualquier zona de la pgina web. Una de las principales ventajas de la programacin con frames viene derivada de la independencia de los distintos frames, pues podemos navegar por los contenidos de nuestro web con la barra de navegacin siempre visible, y sin que se tenga que recargar en cada una de las pginas que vamos visitando. Un ejemplo de las reas que se pueden construir en una construccin de frames se puede ver en las imgenes siguientes.
Las pginas web que estn hechas con frames se componen de una declaracin de los marcos y tantas pginas en formato HTML corriente como distintas divisiones hemos definido.
45
La declaracin o definicin de frames es la nica pgina que realmente debemos aprender, puesto que las pginas que se van a visualizar en cada uno de los cuadros son ficheros HTML de los que venimos viendo hasta ahora.
rows="15%,60%,25%
As indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del medio con un espacio correspondiente al 60% del total y la de abajo con un 25%. En total suman el 100% del espacio de la ventana. Adems del porcentaje para indicar el espacio de cada una de las casillas, tambin podemos indicarlo en pxeles de esta manera: cols="200,600 Para indicar que la columna de la de la derecha 600. Esto est bien pero esto no tiene porque ser as que este modo de expresar los siguiente manera. cols="200,* As indicamos que la primera columna ha de medir 200 pxeles y que el resto del espacio disponible -que ser mayor o menor dependiendo de la definicin de la pantalla del usuario- se le asignar a segunda columna. En la prctica podemos mezclar todos estos mtodos para definir los marcos de la manera que deseemos, con porcentaje, con pxeles o con el comodn (*). No importa cmo se definan, la nica recomendacin es que uno de los valores que indiquemos sea un asterisco, para que el rea correspondiente a dicho asterisco o comodn sea ms o menos grande dependiendo del espacio que tenga la ventana de nuestro navegador. Otros mtodos de definir filas y columnas, atendiendo a este consejo, seran los siguientes: rows="100,*,12% Definimos tres filas, la primera con 100 pxeles de ancho, la segunda con el espacio que sobre de las otras dos, y la tercera con un 12% del espacio total. cols="10%,50%,120,* Estamos indicando cuatro columnas. La primera del 10% del espacio de la ventana, la segunda con la mitad justa de la ventana, la tercera con un espacio de 120 pxeles y la ltima con la cantidad de espacio que sobre al asignar espacio a las dems particiones. Una vez hemos indicado el nmero de filas o columnas y el espacio reservado a cada una con la etiqueta <FRAMESET>, debemos especificar con la etiqueta <FRAME> la procedencia de cada uno de los frames en los que hemos partido la ventana. Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o columnas de esta manera <FRAME src="marco1.html"> As queda indicado que el frame que estamos definiendo debe mostrar la pgina marco1.html en su interior.
47
izquierda debe tener 200 pxeles de ancho y la si nuestra ventana tiene 800 pxeles de ancho, en todos los monitores de los usuarios, por lo marcos es importante que se indique de la
Adems tenemos algunas consideraciones que hacer para terminar de comprender este ejemplo: El ttulo de la definicin de frames es el que hereda toda la pgina web, por ello, no es buena idea titular como "definicin de frames" por ejemplo, ya que entonces toda nuestra pgina se titulara as y seguramente no sea muy descriptivo. La pgina que define los frames no tiene <body>. HTML puede arrojarnos un error si lo incluimos. Las pginas "pagina1.html", "pagina2.html" y "pagina3.html" han de escribirse en archivos independientes con el nombre indicado. En este ejemplo, dichas pginas deberan encontrarse en el mismo directorio que la declaracin de frames. Si especificamos una ruta para acceder al archivo podemos colocarlo en el directorio que deseemos. Los colores de cada uno de los frames los hemos colocado con el atributo bgcolor colocado en la etiqueta <body> de cada una de las pginas que se muestran en los marcos.
48
_blank: Para hacer que ese enlace se abra en una ventana a parte. Nuestros ejemplos en este manual se suelen abrir en una ventana a parte, colocando este valor en el target de los enlaces que llevan a los ejemplos. _self: Se actualiza el frame donde est situado el enlace. Es el valor por defecto. _parent: El enlace se actualiza sobre su padre inmediato del marco actual. Este valor es equivalente a _self si el marco actual no tiene padre. _top: La pgina se carga a pantalla completa, es decir, eliminando todos los frames que pudiera haber.
Los pasos para definir la anidacin se pueden encontrar a la derecha. Los distintos frames vienen numerados con el orden en el que se escriben en el cdigo. En la imagen se puede ver el resultado final acompaada de la representacin sobre la manera de definirlos. En primer lugar definimos una estructura de frames en dos columnas y dentro de la primera columna colocamos otra parcicin de frames en dos filas.
El cdigo necesario es el siguiente: <frameset cols="200,*"> <frameset rows="170,*"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset> <frame src="pagina3.html"> </frameset>
50
Los pasos para definir la anidacin se pueden encontrar a la derecha. # Los distintos frames vienen numerados con el orden en el que se escriben en el cdigo. En la imagen se observa que el primer frameset a definir se compone de dos filas. Posteriormente, dentro de la segunda fila del primer frameset, tenemos otra particin en dos columnas, dentro de las que colocamos un tercer nivel de frameset con una defincin en filas en los dos casos. El cdigo se puede ver a continuacin. <frameset rows="60,*"> <frame src="pagina1.html"> <frameset cols="200,*"> <frameset rows="*,150"> <frame src="pagina2.html"> <frame src="pagina3.html"> </frameset> <frameset rows="*,60"> <frame src="pagina4.html"> <frame src="pagina5.html"> </frameset> </frameset> </frameset>
51
nos seala que podemos mover dicho borde y redimensionar as los frames. Por defecto, si no colocamos nada, los marcos si se pueden redimensionar. frameborder="yes|no|0" Este atributo permite controlar la aparicin de los bordes de los frames. Con este atributo igualado a "0" o "no" los bordes se eliminan.
Si quieres actualizar ms de un frame con la pulsacin de un enlace debers utilizar Javascript. Adems los scripts se pueden complicar bastante cuando se tienen que comunicar varios frames entre si. Conclusin El trabajo con frames puede ser ms o menos indicado dependiendo de las caractersticas de la pgina a desarrollar, es tu tarea saber si en tu caso debes utilizarlos o no.
14. Metainformacin.
En las pginas HTML existe una seccin dentro de la "cabecera", definido por <head> y </head>, en las cuales se pueden insertar etiquetas del tipo <meta>. Estas etiquetas son indicadores que, en algunos casos, le dicen a la pgina cmo deben comportarse y en otros son meramente informativos. Esta informacin tambin puede ser utilizada por los buscadores. La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.
54
Por ejemplo, el siguiente cdigo indica que el autor de la pgina es aulaclic, que la pgina trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores: <html> <head> ... <meta name="author" content="aulaclic"> <meta name="description" content="Curso de HTML"> <meta name="keywords" content="cdigo HTML etiqueta pgina web curso"> </head> ... El atributo lang puede ser utilizado con META para especificar el idioma del contenido del atributo: <META name="Author" lang="fr" content="Arnaud Le Hors"> Cuando se proporcionen varios elementos META con informacin para varios idiomas, los motores de bsqueda pueden utilizar el atributo lang como filtro para mostrar los resultados de la bsqueda usando las preferencias de idioma del usuario. Por ejemplo, <!-- Para hablantes de ingls americano --> <META name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <!-- Para hablantes de ingls britnico --> <META name="keywords" lang="en" content="holiday, Greece, sunshine"> <!-- Para hablantes de espaol --> <META name="keywords" lang="es" content="vacaciones, Grecia, sol">
55
14.3. Para "refrescar" una pgina o redirigirla a otra, transcurrido un cierto tiempo
<meta http-equiv="refresh" content="20; URL=indice.htm" > El tipo es http-equiv="refresh", en content le decimos el nmero de segundos (si indicamos CERO ser inmediato) y a continuacin indicamos la pgina a la que debe dirigirse, para ello usamos URL=nombre de la pgina. En este ejemplo, se cargar la pgina indice.htm que est en el directorio actual transcurridos 20 segundos. Hay dos ejemplos claros de utilizacin: Recargar nuestra propia pgina cada cierto tiempo. Si no ponemos URL se recarga nuestra propia pgina. Ejemplo, refrescamos nuestra pgina cada 5 minutos: <meta http-equiv="refresh" content="300> Comprar varios dominios y mantener slo uno. Por ejemplo, un .com y un .es.
El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo type indica el tipo de contenido de los datos del objeto. Los posibles valores de type estn estandarizados y la lista completa de tipos de contenido se define en los estndares RFC 2045 y RFC 2046. El propio estndar de HTML incluye ejemplos de uso de esta etiqueta. Incluir un vdeo en formato MPEG: <object data="PlanetaTierra.mpeg" type="application/mpeg">
57
Tambin se pueden incluir varias versiones alternativas de un mismo contenido. As, si el navegador no es capaz de interpretar el formato por defecto, puede optar por cualquiera de los otros formatos alternativos: <object title="La Tierra vista classid="http://www.observer.mars/TheEarth.py"> <!-- Formato alternativo en forma de vdeo --> <object data="PlanetaTierra.mpeg" type="application/mpeg"> <!-- Otro formato alternativo mediante una imagen GIF --> <object data="PlanetaTierra.gif" type="image/gif"> <!-- Si el navegador no soporta ningn formato, se muestra el siguiente texto --> La <strong>Tierra</strong> vista desde el espacio. </object> </object> </object> A los objetos tambin se les puede pasar informacin adicional en forma de parmetros mediante la etiqueta <param>: name = "texto" - Indica el nombre del parmetro value = "texto" - Indica el valor del parmetro desde el espacio"
Las etiquetas <param> siempre se incluyen en el interior de las etiquetas <object>: <object data="..." type="..."> <param name="parametro1" value="40" /> <param name="parametro2" value="20" /> <param name="parametro3" value="texto de prueba" /> </object> Uno de los principales inconvenientes de <object> es la forma de incluir vdeos en formato Flash en las pginas HTML. Si se utiliza el siguiente cdigo: <object data="nombre_video.swf" type="application/x-shockwave-flash"></object> El elemento anterior es correcto desde el punto de vista tcnico, pero provoca que algunos navegadores como Internet Explorer no visualicen el vdeo hasta que se ha descargado completamente. Si se trata de un vdeo largo, esta solucin no es vlida para el usuario.
<object atributo1="valor1" .... atributoN="valorN"> <param name="nombre" value="valor"> <param name="nombre" value="valor"> ... </object> Atributos relativos al audio: classid="identificador_objeto". Fija la URL del objeto o componente externo necesario para reproducir el fichero de audio, y la implementacin CLSID de los controles ActiveX necesarios. type="tipo_fichero". Indica el tipo de fichero de audio que ejecutoa. width="n". Fija la anchura en pxel de la consola. height="n". Fija la altura en pxels de la consola align="top | bottom | center | baseline | left | right | texttop |middle | absmiddle | absbotom". Similar la etiqueta img, indica la alineacin vertical y/o de la consola. hspace="hs". Indica la separacin horizontal en pixels entre la consola los elementos que la rodean, vspace="vs". Indica la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean. autostart="true/false". Asigna si se comienza la reproduccin del fichero automticamente al cargarse la pgina o si se requiere la intervencin del usuario para empezara la ejecucin del archivo de audio. standby="mensaje". Muestra un mensaje en pantalla mientras se carga el fichero.
Parmetros relativos al sonido: param name="FileName" value="ruta_fichero". Indica el nombre del fichero y la ruta del fichero de audio a reproducir param name="autostart" value="true/false". Asigna si el navegador comenzara a reproducir sonido automticamente al cargar la pgina o si ser el usuario el que pulse el botn play .
Cabe mencionar que estos no son todos los atributos y parmetros que existen para esta etiqueta. Se pueden encontrar mas atributos y parmetros tanto en paginas oficiales, as como en otros manuales. <object data="t-rex.wav" height="40"> type="sound/wav" autostart="false" width="200"
59
(Sonido de un Tiranosaurio enfadado) </object> <object data="lack_of_faith.mp3" type="audio/mp3" autostart="false" width="200" height="40"> (I Find Your lack of Faith Disturbing... - Star Wars) </object>
60
param name="filename" value="ruta_fichero". Establece la ruta del fichero de video, en forma relativa a la estructura de carpetas del sitio web o en forma de URL absoluta. param name="showcontrols" value="1/0". Fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de video. Slo funciona bien en Internet Explorer. param name="showdisplay" value="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con informacin sobre el fichero de video (nombre, autor, copyright, etc.). Slo funciona bien en Internet Explorer. param name="showstatusbar" value="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con informacin temporal sobre la visualizacin del video y sobre el sonido del mismo. Slo funciona bien en Internet Explorer. param name="autosize" value="1/0". Fija si el tamao de la consola se establece automticamente o no. Slo funciona bien en Internet Explorer. param name="autostart" value="true/false". Indica al navegador si se debe empezar a reproducir el video automticamente al cargar la pgina o si por el contrario ser preciso que el usuario pulse el botn Play para ello.
Ejemplo: <object data="lagarto.swf" width="200" height="100" type="application/x-shockwaveflash"> un pequeño lagarto caminando </object> Extensin .mpeg, .mpg .mov .avi Tipo de archivo video/mpeg video/quicktime video/avi video/x-msvideo
61
16. iframes.
Aunque su uso no es muy comn, la etiqueta <iframe> puede ser muy til en determinadas ocasiones, ya que permite insertar un documento HTML dentro de otro documento HTML. Un iframe puede considerarse como un agujero que se abre en una pgina web y a travs del cual se muestra otra pgina web. En ocasiones se utiliza para mostrar contenidos externos al sitio web como si fueran parte del mismo sitio. Otra veces se emplea para incluir una aplicacin comn a varios sitios web de una misma empresa. Tenemos las siguientes etiquetas: src = "url" - URL del documento HTML que se visualiza en el iframe. height = "longitud" - Altura que ocupar el iframe en el documento. width = "longitud" - Anchura que ocupar el iframe en el documento. name = "texto" - Nombre que identifica al iframe. Este nombre puede utilizarse como el destino de vnculos subsiguientes. Se utiliza, al igual que en los marcos, en los hiperenlaces de la pgina contenedora del iframe, para hacer referencia al mismo. longdesc = "url" - Direccin en la que puede encontrarse una descripcin larga del contenido del iframe. scrolling = "yes | no | auto" - Indica si el iframe debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe en el iframe
El siguiente ejemplo define la altura y anchura del iframe, indica la URL que se debe mostrar y mediante el atributo scrolling se indica que el iframe no debe mostrar barras de desplazamiento ni siquiera en el caso de que el contenido mostrado no quepa en el iframe definido: <iframe src="http://www.google.es" width="650" height="350" scrolling="no">
62
17. Formularios.
Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la informacin, esencialmente mediante texto, imgenes y enlaces. Nos queda por ver de qu forma podemos intercambiar informacin con nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante la Web: Comprar un articulo. Rellenar una encuesta. Enviar un comentario al autor.
Hemos visto anteriormente que podamos, mediante los enlaces, contactar directamente con un correo electrnico. Sin embargo, esta opcin puede resultar en algunos casos poco verstil si lo que deseamos es que el un cliente nos enve una informacin bien precisa. Es por ello que el HTML propone otra solucin mucho ms amplia: Los formularios. Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas pginas web. Son muy utilizados para realizar bsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en estos campos son enviados al correo electrnico del administrador del formulario o bien a un programa que se encarga de procesarlo automticamente. Usando HTML podemos nicamente enviar el formulario a un correo electrnico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco ms compleja ya que tendremos que emplear otros tipos de lenguajes. En este caso, la solucin ms sencilla es utilizar los programs prediseados que nos proponen un gran nmero de servidores de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros formatos. Si vuestras pginas estn alojadas en un servidor que no os propone este tipo de ventajas, siempre podis recurrir a servidores de terceros que ofrecen este u otro tipo de servicios gratuitos para web. Por supuesto, existe otra alternativa que es la de aprender lenguajes como ASP o PHP que nos permitirn, entre otras cosas, el tratamiento de formularios.
El formulario es enviado a una direccin de correo electrnico. El formulario es enviado a un programa o script que procesa su contenido. En el primer caso, el contenido del formulario es enviado a la direccin de correo electrnico especificada por medio de una sintaxis de este tipo: <form action="mailto:direccion@correo.com"> La forma en la que se expresa la localizacin del archivo que contiene el programa es la misma que la vista para los enlaces. method Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son POST y GET. A efectos prcticos y, salvo que se os diga lo contrario, daremos siempre el valor POST. enctype Se utiliza para indicar la forma en la que viajar la informacin que se mande por el formulario. En el caso ms corriente, enviar el formulario por correo electrnico, el valor de este atributo debe de ser "text/plain". As conseguimos que se enve el contenido del formulario como texto plano dentro del email. Si queremos que el formulario se procese automticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos enctype dentro de la etiqueta <form> Ejemplo de etiqueta <form> completa As, para el caso ms general la etiqueta de creacin del formulario tendr el siguiente aspecto: <form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name. La etiqueta es de la siguiente forma: <input type="text" name="nombre"> De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido ser llamado nombre (por ejemplo). El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de formulario que usan esta misma etiqueta. El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta. Veremos ms adelante que existe otra forma de tomar textos ms largos a partir de otra etiqueta. Adems de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles: size: define el tamao de la caja en nmero de caracteres. Si al escribir el usuario llega al final de la caja, el texto ira desfilando a medida que se escribe haciendo desaparecer la parte de texto que queda a la izquierda. maxlength: Indica el tamao mximo del texto que puede ser tomado por el formulario. Es importante no confundirlo con el atributo size. Mientras el primero define el tamao aparente de la caja de texto, maxlength indica el tamao mximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamao aparente (size) que es menor que el tamao mximo (maxlength). Lo que ocurrir en este caso es que, al escribir, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamao mximo definido por maxlength, momento en el cual nos ser imposible continuar escribiendo. value: Valor por defecto. En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo: <input type="text" name="nombre" value="Perico Palotes"> Es por ello que para mostrar un campo de texto no vale con poner la etiqueta <input>, sino que habr que ponerla dentro de un formulario de la siguiente manera: <form>
65
<input type="text" name="nombre" value="Perico Palotes"> </form> Texto oculto Podemos esconder el texto escrito por medio asteriscos de manera a aportar una cierta confidencialidad. Este tipo de campos son anlogos a los de texto con una sola diferencia: remplazamos el atributo type="text" por type="password": <input type="password" name="nombre"> En este caso, podis comprobar que al escribir dentro del campo en lugar de texto veris asteriscos. Estos campos son ideales para la introduccin de datos confidenciales, principalmente cdigos de acceso.
66
El atributo wrap no est incluido el estndar html 4.01 por lo que no todos los navegadores lo soportan (Internet Explorer y Firefox lo aceptan). Puede tomar los siguientes valores: WRAP="soft" significa que la caja introduce un retorno de carro cuando el texto introducido llega a la derecha, pero el texto se enva como una cadena continua, sin los retornos de carro introducidos por la caja. WRAP="hard" es igual a la anterior, pero el texto se enva de la forma en que aparece en la caja, incluidos los retornos de carro. WRAP="off" significa que la caja no introduce retornos de carro, aunque el texto se enva exactamente tal y como se ha introducido.
La eleccin de ms de un elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o shift. Este atributo se expresa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para conseguir el efecto, o no se pone si queremos una lista desplegable comn. No recomendamos especialmente la puesta en practica de esta opcin ya que el manejo de las teclas ctrl o shift para elegir varias opciones puede ser desconocido para el navegante. Evidentemente, siempre cabe la posibilidad de explicarle como funciona aunque no dejara de ser una complicacin para ms para el visitante. Veamos cual es el efecto producido por estos dos atributos cambiando la lnea: <select name="estacion"> por: <select name="estacion" size="3" multiple> La etiqueta <option> puede asimismo ser matizada por medio de otros atributos selected Del mismo modo que multiple, este atributo no toma ningn valor sino que simplemente indica que la opcin que lo presenta esta elegida por defecto. As, si cambiamos la lnea del cdigo anterior: <option>Otoo</option> por: <option selected>Otoo</option> value Define el valor de la opcin que ser enviado al programa o correo electrnico si el usuario elige esa opcin. Este atributo puede resultar muy til si el formulario es enviado a un programa puesto que a cada opcin se le puede asociar un nmero o letra, lo cual es ms fcilmente manipulable que una palabra o texto. Podramos as escribir lneas del tipo: <option value="1">Primavera</option> De este modo, si el usuario elige primavera, lo que le llegara al programa (o correo) es una variable llamada estacion que tendr como valor 1. En el correo electrnico recibiramos: estacion=1
68
Como puede verse, a cada una de las opciones se le atribuye una etiqueta input dentro de la cual asignamos el mismo nombre (name) para todas las opciones y un valor (value) distinto. Si el usuario elige supuestamente Otoo, recibiremos en nuestro correo una lnea tal que sta: estacion=3 Cabe sealar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo checked: <input type="radio" name="estacion" value="2" checked>Verano El resultado sera el siguiente:
69
70
Este tipo de datos, que no se muestran en la pgina pero si pueden ser detectados solicitando el cdigo fuente, no son frecuentemente utilizados por pginas construidas en HTML, son ms bien usados por pginas que emplean tecnologas de servidor. He aqu un ejemplo: <input type="hidden" name="sitio" value="www.mipagina.com"> Esta etiqueta, incluida dentro de nuestro formulario, enviar un dato adicional al correo o programa encargado de la gestin del formulario. Podramos, a partir de este dato, dar a conocer al programa el origen del formulario o algn tipo de accin a llevar a cabo (una redireccin por ejemplo).
<input type="image" name="enviar" src="accept.png" /> El atributo src indica la URL de la imagen que debe mostrar el navegador en lugar del botn normal. Su principal ventaja es que permite personalizar por completo la esttica de los botones y mostrarlos con un aspecto homogneo en todos los navegadores. El principal inconveniente es que ralentiza la carga del formulario y que si se quiere modificar su aspecto, es necesario crear una nueva imagen.
nmero, tipo o tamao total de los archivos que se pueden adjuntar, todos los servidores aaden restricciones por motivos de seguridad.
Fichero adjunto<br> <input type="file" name="adjunto"> El valor del atributo type para este control de formulario es file. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botn que permite navegar por los directorios y archivos del ordenador del usuario. Si se incluye un control para adjuntar archivos, es obligatorio aadir el atributo enctype en la etiqueta <form> del formulario. El valor del atributo enctype debe ser multipart/form-data, por lo que la etiqueta <form> de los formularios que permiten adjuntar archivos siempre es: <form action="..." method="post" enctype="multipart/form-data"> ... </form>
size = "unidad_de_medida"
maxlength = "numero"
"checked" "disabled"
72
no se enva al servidor junto con el resto de datos "readonly" El contenido del control no se puede modificar Para el control que permite crear botones con imgenes, indica la URL de la imagen que se emplea como botn de formulario Descripcin del control. Este atributo especifica texto alternativo para navegadores que no puedan mostrar imgenes, formularios o aplicaciones
src = "url"
alt = "texto"
Los siguientes elementos soportan el atributo disabled: BUTTON, INPUT, OPTGROUP, OPTION, SELECT y TEXTAREA. En este ejemplo, el elemento INPUT est deshabilitado. Por tanto, no puede recibir datos del usuario, y su valor no se enviar con el formulario. <INPUT TYPE=text disabled name="datos" value="5">
Cuando est establecido, el atributo readonly tiene los siguientes efectos sobre un elemento: El foco puede dirigirse hacia elementos de slo lectura, pero stos no pueden ser modificados por el usuario. Los elementos de slo lectura estn incluidos en la navegacin con tabulador.
La etiqueta <fieldset> agrupa campos del formulario y la etiqueta <legend> asigna un nombre a cada grupo: fieldset: Se emplea para agrupar de forma lgica varios campos de un formulario. legend: Se emplea para definir el ttulo o leyenda de un conjunto de campos de formulario agrupados con la etiqueta fieldset. <fieldset> <legend>Datos personales</legend> Nombre <br>
74
<input type="text" name="nombre" value=""><br> Apellidos <br> <input type="text" name="apellidos" value=""><br> DNI <br> <input type="text" name="dni" value="" size="10" maxlength="9"> </fieldset> </form> La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El navegador muestra por defecto un borde resaltado para cada agrupacin. La etiqueta <legend> se incluye dentro de cada etiqueta <fieldset> y establece el ttulo que muestra el navegador para cada agrupacin de elementos.
En el anterior ejemplo, el nombre de los campos de formulario se inclua mediante un texto normal: Nombre <br> <input type="text" name="nombre" value=""> Apellidos <br> <input type="text" name="apellidos" value=""> DNI <br> <input type="text" name="dni" value="" size="10" maxlength="9"> Utilizando la etiqueta <label>, cada campo de formulario puede disponer de su propio ttulo: <label for="nombre">Nombre</label> <br/> <input type="text" id="nombre" name="nombre" value=""> <label for="apellidos">Apellidos</label> <br> <input type="text" id="apellidos" name="apellidos" value="">
75
<label for="dni">DNI</label> <br> <input type="text" id="dni" name="dni" value="" size="10" maxlength="9"> La principal ventaja de utilizar <label> es que el cdigo HTML est mejor estructurado y se mejora su accesibilidad. Adems, al pinchar sobre el texto del <label>, el puntero del ratn se posiciona automticamente para poder escribir sobre el campo de formulario asociado. Este comportamiento es especialmente til para los campos de tipo radiobutton y checkbox.
76
1. Navegar en primer lugar por aquellos elementos que soporten el atributo tabindex y tengan asignado para ste un valor positivo. La navegacin se produce desde el elemento con menor valor de tabindex hasta el elemento con el valor ms alto. Los valores no necesitan ser secuenciales ni deben comenzar por un valor en particular. Si hay elementos que tengan valores idnticos de tabindex debera navegarse por ellos segn el orden en que aparezcan en el flujo de caracteres. 2. A continuacin se navega por aquellos elementos que no soporten el atributo tabindex o por los que soportndolo tengan asignado para l un valor "0". Se navega por estos elementos segn el orden en que aparezcan en el flujo de caracteres. 3. Los elementos que estn deshabilitados no participan en el orden de tabulacin. Los siguientes elementos soportan el atributo tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT y TEXTAREA. En este ejemplo, el orden de tabulacin ser el BUTTON, los elementos INPUT en orden (obsrvese que "campo1" y el botn comparten el mismo tabindex, pero "campo1" aparece despus en el flujo de caracteres), y por ltimo el vnculo creado por el elemento A. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Un documento con FORM</TITLE> </HEAD> <BODY> ...texto... <P>Ir al <A tabindex="10" href="http://www.w3.org/">sitio web del W3C.</A> ...ms texto... <BUTTON type="button" name="obtener-base-de-datos" tabindex="1" onclick="obtener-base-de-datos"> Obtener la base de datos acutal. </BUTTON> ...ms texto... <FORM action="..." method="post">
77
<P> <INPUT tabindex="1" type="text" name="campo1"> <INPUT tabindex="2" type="text" name="campo2"> <INPUT tabindex="3" type="submit" name="enviar"> </P> </FORM> </BODY> </HTML>
<P><A accesskey="C" rel="contents" href="http://algunsitio.com/especificacion/contenidos.html"> Tabla de Contenidos</A> La invocacin de teclas de acceso depende del sistema subyacente. Por ejemplo, en mquinas que ejecuten MS Windows, normalmente hay que pulsar la tecla "alt" adems de la tecla de acceso. En sistemas Apple, normalmente hay que pulsar la tecla "cmd" adems de la tecla de acceso.
<form action="mailto:alumno@correo.com" method="post" enctype="text/plain"> Nombre <input type="text" name="nombre" size="30" maxlength="100"><br> Email <input type="text" name="email" size="25" maxlength="100" value="@"><br> Población <input maxlength="60"><br> type="text" name="poblacion" size="20"
79
Sexo<br> <input type="radio" name="sexo" value="Varon" checked>Hombre<br> <input type="radio" name="sexo" value="Hembra">Mujer<br> <br>Frecuencia de los viajes<br> <select name="utilizacion"> <option value="1">Varias veces al día <option value="2">Una vez al día <option value="3">Varias veces a la semana <option value="4">Varias veces al mes </select><br> <br>Comentarios sobre su satisfaccin personal<br> <textarea cols="30" rows="7" name="comentarios"></textarea><br> <br><input type="checkbox" name="recibir_info" checked>Deseo recibir notificación de las novedades en las líneas de autobuses.<br><br> <input type="submit" value="Enviar formulario"><br> <input type="Reset" value="Borrar todo"></form> Para acabar, vamos a ver lo que recibiran por correo electrnico en la empresa de autobuses cuando un usuario cualquiera rellenase este formulario y pulsase sobre el botn de envo. nombre=Federico Mijo Silvestre email=fede@terramix.com poblacion=Astorga, Len sexo=Varon utilizacion=2 comentarios=No creo que sea una buena linea. Poned ms autobuses. recibir_info=on
Aqu se encuentra una lista de programas gratuitos para ayudarte a elegir: Stone's WebWriter Araneae HTML-kit EditPad Lite 1st Page 2000 NoteTab Light Arachnophilia NotesPad UltraEdit Notepad++ Quanta (Linux)
81
19. Validador
La validacin es un mecanismo que permite comprobar que el cdigo HTML creado cumple las reglas de la sintaxis del lenguaje. El W3C (World Wide Web Consortium) dispone de un validador online que permite validar cdigo HTML suelto, pginas HTML y archivos HTML. El validador se puede acceder en http://validator.w3.org/
20. Bibliografa.
http://html.conclase.net/w3c/html401-es/cover.html http://www.acidtests.org/ Los encabezados HTTP vlidos se recogen en la especificacin HTTP ([RFC2616])
82