Curso de HTML - Introduccin

Sumario

INTRODUCCIN: Antes de comenzar a disear sitios web se deben tener en cuenta algunas cosas que explicar en esta introduccin. Para realizar sitios web hay que saber de qu se tratan, diferenciar los elementos que los componen, conocer algunos lenguajes de diseo y programacin -comenzando por HTML- y tener ciertas herramientas que permiten su realizacin. Todo esto est al alcance de cualquiera de nosotros, ya que con una conexin a Internet se tiene acceso a las herramientas -todas gratuitas- y leyendo tutoriales como este se aprende de que se tratan los sitios Web as como los lenguajes que se requieren para desarrollarlos. A pesar que usualmente utilizamos la palabra pgina para definir a un sitio Web, esta solamente se refiere a lo que nos muestra en pantalla en un determinado momento el navegador; mientras que un sitio es el conjunto de estas pginas que forman parte del mismo. Por ejemplo, lo que ves en pantalla en este momento es una pgina que forma parte del total del sitio Web llamado Youbioit.com, para poner otro ejemplo; Youtube sera un sitio mientras que al ver un video en particular se abre una pgina. As como cada pgina forma parte de un libro; un sitio vendra a ser como un libro hecho por pginas. Aclarado esto pasamos a ver cuales son los componentes que hacen a una pgina y las herramientas que necesitamos para crearlos. Hay muchos tipos de pginas, las hay estticas nicamente con texto, otras presentan imgenes, otras animaciones atractivas, otras son interactivas y esperan una respuesta u orden nuestra -por ejemplo los buscadores-, etc. Basta con navegar un poco para darse cuenta del gran matiz de sitios que uno se encuentra en la red de redes. Al principio, en la dcada de los '90s solan ser estticas con texto y fondo gris o blanco. Con el paso del tiempo comenzaron a agregarles imgenes, fondos artsticos y hasta alguna meloda que sorprenda al visitante del sitio -debo confesar que no le encuentro la gracia a nada de esto, ser que soy de la generacin de en la que se encuentra de todo en la Web-. Luego, al ir creciendo Internet, llegaron los directorios y buscadores que nos facilitaban la bsqueda de sitios, ms tarde los sitios vistosos con animaciones en Flash y finalmente lo que hoy conocemos como Web 2.0.

Web 2.0 es un trmino que define a la Internet de hoy da en la que los sitios son interactivos y estn hechos por los mismos usuarios. Antiguamente, las pginas las hacian los diseadores y luego los usuarios las visitaban. Hoy los mismos usuarios forman parte de comunidades virtuales como Facebook, Twitter, Wikipedia, Youbioit, blogs, foros, sitios de ventas online, etc. Los usuarios comunes suben la informacin; escriben los artculos -como yo escrib este-; suben imgenes, videos, archivos, etc. y las pginas se construyen automticamente con solamente tocar un botn -obviamente se requiere un programador que desarrolle el mecanismo de los sitios para que los usuarios puedan luego crear las pginas de manera fcil y sin saber disear en lenguajes como HTML. As que Web 2.0 es el perodo que comienza aproximadamente en el 2004 cuando todos comenzamos a participar de la Web, y lo que permiti que tantas cosas e informacin est al alcance de todos. HISTORIA DE INTERNET: Otra cosa que necesitamos saber es de que se trata Internet y de que se compone. Puede que a muchos les aburra leer temas de historia, pero esto puede resultarles muy interesante, adems de abrirles la mente sobre ciertas dudas o trminos que escuchamos diariamente pero no sabemos bien de que se tratan. Adems para poder hacer sitios Web en HTML es fundamental saber que es lo que estamos haciendo. Voy a tratar de ser lo ms sinttico posible, pero a la vez informarlos bien acerca de como se desarroll Internet y darle una idea de que se trata, los sorprendern algunas cosas que van a leer.....de verdad. Bsicamente la idea de Internet naci durante la guerra fra como un proyecto militar de Estados Unidos creado en 1958, el Advanced Research Projects Agency (Agencia de Proyectos de Investigacin Avanzada) conocido como ARPA por sus siglas, cuando se lanz el satlite ruso Sputnik y Estados Unidos quera tomar la delantera en la carrera espacial -me pregunto que hubiese pasado entonces si Estados Unidos no hubiese querido llegar a la Luna, hoy quiz no tendramos Internet, o al menos no como la conocemos-. La idea principal de ARPA era crear sistemas que permitiesen interconectar a los distintos organismos de defensa del pas, como el Pentgono o la Estacin de Fuerza Area de la Montaa Cheyenne, as como a todos los radares para mantenerse informados al instante de lo que ocurra en cada sector del sistema de defensa nacional. Ya en 1957 se haba realizado la primera demostracin de TimeSharing (uso compartido de recursos) y lo que sera la base de Internet. Gracias a esto, distintas computadoras se podan conectar a una computadora y utilizar sus recursos al mismo tiempo -o sea lo que hacemos hoy da al navegar y bajar toda la informacin de distintos

sitios, bsicamente desde nuestra mquina tenemos acceso a una computadora remota-. Fue as que bajo la supervisin del proyecto ARPA, el 29 de Octubre de 1969, se pone en funcionamiento la red que conectaba a la facultad de Ingeniera y Ciencias Aplicadas de la Universidad de UCLA con el Instituto Internacional de Investigaciones de Stanford, esta fue el acta de nacimiento de ARPANET -antiguo nombre de lo que hoy conocemos como Internet-. En esta red se podan enviar paquetes de informacin, as como muchas otras tareas que de manera errnea creemos son desarrollos actuales; pero ya existan desde hace dcadas; por ejemplo las teleconferencias, ventanas mltiples en pantalla, hipervnculos, publicacin de medios, etc. Ms tarde se sumaran a la red en orden cronolgico el Centro Interactivo de Matemticas Culler-Fried de laUniversidad de California en Santa Brbara, California y el Departamento de Grficos de la Universidad de Utah. Para finales de 1971 ya habran 15 sitios conectados a la naciente red de ARPANET. Paralelamente en el Reino Unido se desarroll otra red llamada International Packet Switched Service (Servicio Internacional de Intercambio de Paquetes de Informacin). Fue creada en conjunto entre el Servicio Postal Britnico, la empresa estadounidense Western Union y la red de telecomunicaciones estadounidense Tymnet. Durante los prximos aos se perfeccionaron las tecnologas que permitan el intercambio de informacin entre computadoras, incluyendo tecnologas como correo electrnico; paralelamente estas redes seguan creciendo al agregarse ms y ms sitios gubernamentales y de investigacin. Ya en 1985 la NSF United States National Science Foundation (Fundacin Nacional de Ciencias de Estados Unidos), cre otra red, la NSFNET, la cual interconectaba universidades. Finalmente en verano de 1989 tras la aprobacin del Consejo de Redes del Gobierno de Estados Unidos, se vincularon las redes de NSFNET y la del sistema de correo electrnico de la empresa de telecomunicaciones MCI, la MCI Mail. As quedaban las redes abiertas al pblico comercial y dejaban de ser de uso exclusivo del gobierno, universidades y entidades de investigacin. A partir de ese momento se sumaron otras redes de servicios comerciales de email -s, todava no era gratuito tener correo electrnico-. Luego se sumaran ms y ms redes, que proporcionaran servicios varios; generando un conglomerado de redes que daba vida a una super-red o red de redes, llamada Internet.

Sin embargo Internet no sera popular hasta la dcada de los '90s cuando su uso fue facilitado gracias al sistema de navegacin inventado por Tim Berners-Lee en el Centro Europeo de Investigaciones Nucleares CERN a finales del ao 1990. Berner-Lee, desarroll el proyecto World Wide Web (Tejido o Telaraa Mundial) -de ah lo de www-, inventando un sistema que facilitaba la lectura de informacin, mediante el uso de un programa de navegacin, naca as el primer navegador el ViolaWWW. Este permita a los usuarios leer documentos que se bajaban con el navegador y pasar de un documento al otro mediante hipervnculos, tambin conocidos como links, enlaces o vnculos, entre otros nombres. El lenguaje que se utilizaba para crear estos documentos se pas a llamar HTML Hypertext Markup Language (Lenguaje de Marcado de Hipertexto), simplemente porqu su componente bsico eran los hipertextos -links- que nos permitan pasar de un documento o pgina a otro. Por lo tanto llegamos a la conclusin que los cimientos de la popularizacin de Internet fueron los links o enlaces que nos permitan ir de una pgina a la otra....dicho de otra manera, nos permita navegar. En 1993 se cre el navegador Mosaic, que muchos viejos usuarios de Internet recordarn. Desde entonces cada vez ms personas se interesaron en Internet, creciendo a un ritmo de 100% anual y dando un salto explosivo entre 1996 y 1997. Para principios de 2010 se calcula que haban ya ms de 1700 millones de usuarios en todo el mundo y no para de crecer. QUE ES INTERNET? Todos sabemos de que se trata Internet, pero sabemos exactamente qu es? Si leste la seccin anterior de historia -lo cual recomiendo- ya te dars una idea. Bsicamente se trata de un gigantesco sistema de redes computadoras conectadas unas con otras-, interconectadas. Por eso mismo se la denomina coloquialmente la Red de redes. En ella encontramos redes comerciales, gubernamentales, personales, empresariales, de telecomunicaciones, financieras, de entretenimiento, etc. Todas interconectadas entre ellas; formando un conglomerado mundial de redes, llamado Internet de International Network o Red Internacional-. Puesto que cada uno de nosotros tenemos acceso a pequeas redes locales de nuestros pases que a su vez estn conectadas a la super red, tenemos acceso as a todas las redes del planeta que estn conectadas a Internet.

Y que es lo que se transmite en Internet? La respuesta es simple, informacin. Paquetes de informacin que estn alojados en computadoras, dado que cada red no es ms que un conjunto de computadoras interconectadas, que al estar enlazadas a la red de redes son accesibles a cualquiera. O sea, que en otras palabras podemos entrar al disco rgido de esas computadoras donde est guardada la informacin que nos interesa. Por ejemplo si una pgina est compuesta de un documento textual, tres imgenes y un video lo que hace nuestro navegador es entrar a la computadora donde se aloja esa pgina y bajarse el documento, las tres imgenes y el video y mostrarlas en el navegador. Otro ejemplo sera cuando entramos a algn sitio donde se alojan archivos, tipo Rapidshare o Megaupload, lo que hacemos es encontrar la direccin donde se aloja el archivo que queremos bajar a nuestro disco rgido -desde el disco rgido donde se aloja el sitio- y lo descargamos. No hay ninguna diferencia entre bajarse un programa, imgenes, un video o un documento de texto; son todos archivos, algunos se ven en el navegador y otros necesitan aplicaciones especiales para ejecutarse -por ejemplo un juego-. Las pginas que vemos estn en formato .html las imgenes en .jpg o .gif, los videos en .avi, la msica en .mp3, etc. Todos estos archivos estn alojados en computadoras llamadas servidores. Los sitios que visitamos y todo lo que bajamos de ellos se encuentran en estos servidores. Pero no todo es bajar datos y archivos, tambin enviamos desde nuestras computadoras al enviar un mensaje de chat, al escribir un mail, al subir un video o simplemente al mandar una orden con nuestro navegador a una computadora de servidor para ver una cierta pgina y toda la informacin que esta muestre. Para graficar la situacin de cul es el proceso que ocurre al ver una pgina en nuestro navegador vamos a tomar el ejemplo de este tutorial: Al bajar esta pgina en la que se ve texto e imgenes sucede ms o menos lo siguiente:
1.

2.

3.

Nuestra computadora busca en la direccin del servidor donde est alojada la pgina -la que figura en la barra de direcciones del navegador-. Luego enva una orden a la computadora del servidor para que le enve el paquete de informacin, o sea los archivos que forman parte de esta pgina del tutorial. Comienzan a bajarse los archivos a nuestra computadora.

4.

Una vez que el archivo de documento -o sea esto mismo que lees- y las imgenes se hayan bajado a nuestra computadora, el navegador las muestra en la pantalla del monitor.

Pero vamos a interiorizarnos un poco ms en el tema. Como dijimos antes, cada una de nuestras computadoras estn conectadas a una red que a su vez est conectada a la red de redes; en otras palabras, nuestra mquina est conectada a la red de nuestro ISP, siglas de Internet Service Provider (Proveedor de Servicios de Internet), a travs de un Modem. Todos los clientes de una compaa de ISP acceden a las redes de estas por lo que se llaman POP, siglas de Point of Presence (Punto de Presencia), o sea que los POP son la ubicacin real (fsica) por la que se accede a la red del proveedor de servicios Internet. A su vez estas redes acceden a la red de Internet a travs de lo que se llaman NAP, siglas de Network Access Point (Punto de Acceso a la Red). Veamos un ejemplo prctico: Imaginemos una Compaa A de ISP, recordemos que significa Proveedor de Servicios de Internet, que en cada ciudad tiene un POP para que sus clientes accedan a la red de la empresa con sus Modems. A su vez la Compaa A le alquila a una empresa telefnica o de servicios de telecomunicaciones lineas de cables de fibra ptica para interconectar todos los POP de todas las localidades en las que presta servicio; as todas las computadoras de los clientes de esta empresa pueden estar interconectados entre ellas. Por otro lado existe tambin la Compaa B que hace exactamente lo mismo y tiene su propia red, interconectando a todos los clientes de esta. Sin embargo los clientes de la red de la Compaa A no pueden conectarse a los de la Compaa B y vice versa. Es as como estas deciden conectarse al Punto de Acceso a la Red NAP y quedar de esta manera interconectadas una con la otra.

Es as que Internet est formada por innumerables redes de empresas, organismos y otras entidades que conectad sus redes a los NAP que les dan acceso a Internet, que como dijimos antes no es ms que una coleccin de pequeas redes interconectadas unas con otras y por lo tanto todas las computadoras que estn conectadas a estas pequeas redes tambin lo estn a la red de redes.

Los paquetes de informacin viajan de una red a la otra a travs de Routers que cumplen la funcin de seleccionar que camino o ruta tomar este paquete de datos e informacin de una computadora a la otra y a travs de que redes lo har. Tambin cumplen la funcin de cerciorarse si los datos e informacin llegaron a destino as como evitar que se generen congestionamientos en el camino que hara colapsar el trfico general de redes a lo largo del camino. Los Routers son computadoras especiales que se encuentran a lo largo del camino que el paquete de informacin tomar a travs de miles de senderos virtuales y todo esto en una fraccin de segundo. Cada una de las computadoras conectadas a Internet cuentan con un identificador llamado Direccin IP, siglas de Internet Protocol (Protocolo Internet), que es el lenguaje estandar que usan las computadoras para intercomunicarse en Internet. Una direccin de IP tpica se parece a esto: 217.28.62.151 No vamos a profundizar en la estructura de los IP ya que est mas all del objetivo de esta parte del tutorial, sin embargo realizaremos un breve repaso superficial para que se tenga una idea acerca de que se trata ms o menos. Dijimos que cada computadora conectada a la red tiene su direccin IP, como vimos en la direccin anterior estas estn compuestas por 4 nmeros separados por puntos entre s. Cada uno de estos puede contener 256 valores de 0 a 255. Por lo tanto si realizamos 2564 -o

sea 256x256x256x256- obtenemos 4.294.967.296 distintas combinaciones de direcciones. Por lo tanto ese es el mximo nmero de conexiones que se pueden tener en Internet con el actual sistema. Hacia enero de 2010 quedaban aproximadamente 400 millones de conexiones disponibles que se calcula estaran ocupadas hacia el 2012. Pero a no preocuparse, los tcnicos estn trabajando para implementar otro sistema que permita mayor cantidad de conexiones. Obviamente el sistema de direcciones IP es ms complicado de lo que se explica aqu, pero escapara al enfoque de tutorial de HTML; simplemente es necesario tener una idea de lo que se trata sin tener que ahondar en aspectos tcnicos. Cada direccin Web a la que entramos en realidad nos da acceso a una computadora remota que aloja el sitio que visitamos y por ende tiene su direccin IP nica. Sin embargo como sera muy complicado recordar la direccin IP numrica de cada sitio, se invent el DNS Domain Name System (Sistema de Nombre de Dominio) el cual asigna un nombre de dominio como www.ejemplo.com a una direccin IP, siendo as ms fcil de recordar. COMO SE HACEN LOS SITIOS Y PAGINAS DE INTERNET? Se calcula que para principios de 2010 haban en toda Internet aproximadamente 70 millones de sitios y a su vez la mayora de estos estaban divididos en ms de una pgina que los componan. Ahora la pregunta es, cmo fueron diseadas estas pginas? o mejor dicho que necesitamos saber y tener para poder hacer nuestras propias pginas y por lo tanto sitios? Para empezar; acceso a Internet, para poder bajar todas las herramientas y recursos que necesitemos. Luego, para comenzar al menos, con el block de notas nos alcanza para editar el cdigo de las pginas que diseemos. Otra cosa necesaria es un navegador de Internet para ver los resultados, algo que obviamente ya tenemos, puesto que estamos leyendo este artculo. Pero hay distintos tipos de pginas y sitios, que dan resultados diferentes o varan en su contenido y que requieren que conozcamos distintos lenguajes y herramientas acorde a los resultados que se quieran obtener. Si lo que queremos obtener es una pgina esttica simple, lo ms bsico es que sepamos HTML y CSS -de esto hablaremos ms adelante en captulos ms avanzados-.

Si ya queremos agregar algunos efectos dinmicos como botones, animaciones simples, etc. debemos estudiar el lenguaje de programacin Javascript. Ms adelante se puede estudiar Flash y Action Script para realizar efectos especiales, reproductores de pelculas, juegos online y otras cosas que tengan que ver con el mundo audiovisual. Finalmente llegamos al punto avanzado de aprender a programar en PHP o ASP y usar bases de datos -comoMySql- para realizar sitios complejos como google, youtube, facebook, youbioit, etc. Pero como en casi todo debemos realizar cada paso para llegar al destino esperado y el primer paso a dar es HTML. Entre las herramientas adicionales que necesitamos para realizar sitios Web, es conveniente saber crear y editar imgenes en algn editor como Photoshop o Paint Shop Pro. Y para subir nuestras pginas y archivos a la computadora donde se aloja nuestro sitio necesitamos una herramienta llamada FTP de las siglas File Transfer Protocol (Protocolo de Transferencia de Archivos), que se puede conseguir de manera gratuita en la Web -luego se indicarn algunas direcciones de donde bajar herramientas tiles-. Eso es todo lo que se necesita saber antes de empezar con el tutorial de HTML. Si se ha entendido todo lo anteriormente explicado en esta introduccin, todo el resto del aprendizaje se har ms simple.

Curso de HTML - Primera Parte

Antes de comenzar a aprender HTML, debemos saber con qu herramientas vamos a trabajar. Primero hay que entender que HTML es un lenguaje interpretado por los navegadores; eso significa que si escribimos correctamente los comandos en el cdigo fuente de un archivo de formato .html o .htm, el contenido de este archivo ser visualizado en cualquier navegador de Internet. Si queremos ver cmo est hecha una pgina Web, podemos hacerlo tocando sobre cualquier punto de sta con el botn derecho de nuestro mouse, lo que abrir un men desplegable con varias opciones, en nuestro caso seleccionaremos Ver Cdigo Fuente; y as se abrir otra ventana con el cdigo fuente de la pgina Web que estamos viendo. Quiz en un principio, si no sabemos HTML no entenderemos nada de lo que nos muestra la ventana del cdigo fuente, pero con el tiempo a medida que aprendamos y practiquemos este lenguaje comenzaremos a comprender. Ya sabemos cmo ver el cdigo fuente de una pgina Web, ahora debemos saber con qu herramienta podremos hacer nuestras propias pginas. Hay muchos editores, como Dreamweaver por ejemplo, pero en mi opinin la mejor manera de aprender es utilizando una aplicacin que todos tenemos en nuestras computadoras, el Bloc de notas. En realidad con esta simple herramienta podemos realizar sitios Web desde los ms pequeos y simples, hasta

portales de redes sociales de los ms complejos, ya que con el Bloc de notas podemos programar en distintos lenguajes. Bien, ahora es momento de comenzar con HTML. Primero hay que aclarar que su nombre proviene de las siglas deHypertext Markup Language,que significa Lenguaje de Marcado de Hipertexto. El hipertexto no es ms que el texto remarcado que si es seleccionado nos redirige a otra pgina o documento Web; en otras palabras son los hipervnculos o links. Ya que al desarrollarse este lenguaje la caracterstica principal que presentaba era la posibilidad de pasar de un documento a otro mediante el uso de estos textos remarcados, siendo muy prctico lo que finalmente lo convirti en el sistema de exploracin Web estndar que hasta el da de hoy utilizamos en Internet. Por lo tanto ya tenemos las herramientas para crear y visualizar nuestras pginas Web. Los archivos de las pginas Web tienen que ser de tipo .htm o .html, los dos tipos son lo mismo, por lo tanto no habrn diferencias en los documento que vayamos a crear, est en nosotros elegir cualquiera de los dos tipos. Para guardar un archivo de pgina Web, vamos al men Archivo de nuestro Bloc de notas, seleccionamos Guardar como, elegimos un nombre, luego en tipo de archivo cambiamos de Documentos de texto a Todos los archivos; esto ltimo es muy importante, ya que si no seleccionamos el tipo de Todos los archivos, todo lo que hayamos escrito en el cdigo fuente se guardar como archivo de tipo .txt; y nosotros queremos guardarlo como archivo .htm o .html.

Bloc de notas de Windows

Ahora pasaremos a los ms importante, los comandos HTML que nos permiten hacer pginas Web.

ELEMENTOS Y ETIQUETAS HTML

Cada cosa que queremos mostrar en una pgina Web es un elemento, o sea que un elemento puede ser un prrafo, un ttulo, una imagen, una lista, un hipervnculo, etc. Cada elemento est formado por etiquetas y contenido. Las etiquetas son los comandos HTML que especifican lo que queremos mostrar y el contenido puede ser un texto, la direccin de una imagen, la direccin de un hipervnculo, etc.

En HTML las etiquetas deben ser abiertas y cerradas, o sea que se necesita una etiqueta de apertura que indica dnde comienza el elemento y una etiqueta de cierre que indica dnde termina el elemento. Por ejemplo para escribir un prrafo debemos escribir el siguiente cdigo fuente: <p>Este es un prrafo de ejemplo</p> Las etiquetas HTML se forman con signos de menor y mayor los cuales rodean el nombre del comando HTML. Por ejemplo <p> es la etiqueta de prrafo. Las etiquetas de cierre utilizan una barra antes del nombre del comando; de esta manera en el caso del prrafo la etiqueta de cierre es </p>. Las etiquetas de apertura y cierre deben rodear al contenido del elemento, o sea que en el caso anterior el contenido viene a ser el texto, el cual debe estar rodeado por las etiquetas de apertura y cierre, <p> </p>. Hay casos de elementos con contenido vaco, esto significa que no requieren etiqueta de apertura y cierre, stos simplemente se cierran en la primera y nica etiqueta; un ejemplo de este tipo de elementos son los saltos de lnea: <br /> El elemento anterior realiza un salto de lnea al rengln inmediatamente inferior. El cierre del mismo se realiza con una barra al final de la etiqueta como se muestra en el ejemplo anterior. Todas las pginas HTML requieren siempre de la presencia de ciertos elementos bsicos, estos son: <html>, <head>, <title> y <body>. El elemento <html> define dnde comienza el documento o pgina HTML y dnde finaliza. Entre las dos etiquetas de apertura y cierre <html> y</html> debemos poner el elemento <body> -que significa cuerpo-; este elemento es donde se pondr todo el contenido visual, o sea todo lo que se va a ver en la pgina; el contenido visual debe estar encerrado por una etiqueta de apertura <body> y una de cierre </body>; quedando as: <html> <body> Aqu deben ir todos los elementos visuales de la pgina, o sea prrafos, imgenes, hipervnculos, etc. </body> </html> Otro elemento necesario es <head>, que significa cabecera; dentro de este elemento se agregan todos los elementos no visuales de la pgina, o sea todo lo que no se ve en el cuerpo principal del explorador Web; por ejemplo informacin para servidores, para motores de bsqueda, etc. <html> <head> Aqu deben ir todos los elementos no visuales de la pgina, como informacin para los motores de bsqueda entre otras cosas.

</head> <body> Aqu deben ir todos los elementos visuales de la pgina, o sea prrafos, imgenes, hipervnculos, etc. </body> </html> Otro elemento necesario es el del ttulo de pgina, el cual aparece en la barra de ttulo de la parte de arriba del explorador o en los ms modernos en la pestaa de la pgina activa. Por ejemplo el ttulo de esta pgina es Curso de HTML - Primera Parte. El ttulo de una pgina se define con el elemento <title> el cual debe ir dentro del elemento de cabecera<head>. El texto del ttulo debe ir rodeado de una etiqueta de apertura <title> y otra de cierre </title>. De esta manera el cdigo fuente de una pgina Web simple, con lo mnimo indispensable, quedara as: <html> <head> <title>Este es el ttulo de la pgina Web</title> </head> <body> <p>Este es el texto de un prrafo que se ver en el cuerpo principal del explorador Web </p> </body> </html> Recuerden que el elemento <p> es el que define prrafos. Pueden probarlo copiando y pegando el texto del cdigo fuente de arriba en el Bloc de notas y guardando el archivo con el nombre de ejemplo1.html Una cosa que hay que recordar siempre es de cerrar los elementos, ya que a pesar que algunas veces pueden verse algunos de los elementos en algunos exploradores a pesar de olvidarnos de cerrarlos; no hay que confiarse; siempre hay que cerrarlos ya que muchos elementos no sern visualizados correctamente. Otro consejo; las etiquetas de los elementos pueden escribirse en mayscula o en minscula; pero; se recomienda escribirlas en minscula ya que en versiones modernas de HTML, como XHTML, es obligatorio que las etiquetas estn escritas en minscula; por lo tanto para tener compatibilidad en todos los navegadores del futuro es mejor que stas estn escritas con letras minsculas. Las etiquetas HTML pueden tener tambin atributos, los cuales proveen informacin adicional acerca de los elementos; los atributos siempre se escriben en la etiqueta de apertura, o sea la primera, de la siguiente manera <nombre-de-etiqueta atributo="valor">. Un ejemplo es la etiqueta <a> que se utiliza para crear hipervnculos: <a href="www.youbioit.com">Link a Youbioit.com</a> En este caso a es el nombre de la etiqueta del elemento utilizado para crear hipervnculos y href el atributo que provee informacin acerca de la direccin a la que nos enviar el link. Ms adelante detallaremos mejor el elemento de hipervnculos <a>, ya que en este momento simplemente lo utilizamos para explicar mejor qu son los atributos.

El valor del atributo siempre debe ser escrito entre comillas. Pueden utilizarse tanto comillas dobles " como comillas simples '; pero es recomendable utilizar las dobles. Las comillas simples se utilizan en aquellos raros casos en los que el valor incluya comillas dobles, por lo tanto para diferenciarlas se utilizan comillas simples, por ejemplo: name='Tienda "La neuquina" - Indumentarias de todo tipo' Si este no es el caso, lo recomendable es utilizar comillas dobles en este formato: atributo="valor del atributo" Como en el caso de las etiquetas es recomendable que los nombres de atributos estn escritos en letras minsculas.

ELEMENTOS HTML
1 - TITULOS Los ttulos en HTML se definen con las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Cada una de estas etiquetas difieren en el tamao del ttulo que generan. Veamos algunos ejemplos: <html> <head> <title>Ejemplo</title> </head> <body> <h1>Ttulo 1</h1> <h2>Ttulo 2</h2> <h3>Ttulo 3</h3> </body> </html> El cdigo fuente anterior dara como resultado los siguientes ttulos.

Titulo 1
Ttulo 2
Ttulo 3
La etiqueta <h1> genera los ttulos ms grandes mientras que la <h6> genera los ttulos ms pequeos. Las etiquetas <h1> a <h6> no deben ser utilizadas para resaltar el grandes cantidades de texto o prrafos enteros, ya que para eso existen otras etiquetas especiales. Deben ser utilizadas solamente para definir ttulos; ya que stos son utilizados por los motores de bsqueda para indexar el contenido de nuestras pginas Web. Si utilizamos las etiquetas<h1> a <h6> con textos muy largos, corremos el riesgo de que los motores de bsqueda no indexen nuestras pginas Web, o las posicionen en puestos bajos de bsqueda. 2 - LINEAS HORIZONTALES La etiqueta <hr /> define lneas horizontales. Este elemento no requiere etiqueta de cierre y por lo tanto se cierra en la primera y nica etiqueta que utiliza para crear lneas rectas.

Veamos un ejemplo: <html> <head> <title>Ejemplo</title> </head> <body> <p>Este es el prrafo 1 del ejemplo</p> <hr /> <p>Este es el prrafo 2 del ejemplo</p> <hr /> <p>Este es el prrafo 3 del ejemplo</p> </body> </html> El cdigo fuente anterior define tres prrafos separados por lneas horizontales. Pueden probarlo copiando y pegando el cdigo fuente en el Bloc de notas, guardndolo como archivo de tipo .htm o .html y probndolo en un explorador Web. 3 - COMENTARIOS HTML Si necesitamos guiarnos dentro del cdigo fuente explicando qu define cada pedazo de cdigo fuente, podemos utilizar comentarios. Los comentarios son omitidos por el explorador Web y solamente son visibles en el cdigo fuente de la pgina. stos pueden servir en cdigos fuentes muy largos y confusos para guiarnos. Los comentarios HTML se escriben entre medio de <!-- y --> <!-- Este es un comentario --> Pueden utilizarse todos los comentarios que sean necesarios, ya que como se mencion anteriormente stos no son visualizados por el explorador Web y no modifican el aspecto de nuestras pginas. 4 - PARRAFOS Como se mencion en algunos ejemplos anteriores los prrafos de texto se definen con la etiqueta <p>. Cada prrafo de un documento debe estar encerrado por las etiquetas de apertura y cierre <p> y </p>. Veamos un ejemplo: <html> <head> <title>Ejemplo</title> </head> <body> <p>Este es el prrafo 1 del ejemplo</p> <p>Este es el prrafo 2 del ejemplo</p> <p>Este es el prrafo 3 del ejemplo</p> </body> </html>

Los prrafos se encuentran separados entre s por un rengln. Recordemos que siempre debemos cerrar cada prrafo. 5 - SALTOS DE LINEA Si necesitamos realizar un salto de lnea a un nuevo rengln sin salirnos del prrafo utilizamos la etiqueta <br />. Veamos un ejemplo: <html> <head> <title>Ejemplo</title> </head> <body> <p>Este es el prrafo 1 del ejemplo.<br /> Este sigue siendo el prrafo 1.</p> <p>Este es el prrafo 2 del ejemplo.<br /> Este sigue siendo el prrafo 2.</p> <p>Este es el prrafo 3 del ejemplo.<br /> Este sigue siendo el prrafo 3.</p> </body> </html> Esto dar como resultado lo siguiente: Este es el prrafo 1 del ejemplo. Este sigue siendo el prrafo 1. Este es el prrafo 2 del ejemplo. Este sigue siendo el prrafo 2. Este es el prrafo 3 del ejemplo. Este sigue siendo el prrafo 3. Cada vez que querramos agregar saltos de lnea o nuevos renglones debemos utilizar la etiqueta <br />; todo nuevo rengln que agreguemos en el cdigo fuente sin la etiqueta <br /> ser omitido por el explorador Web. Por lo tanto si requerimos un salto de por ejemplo 2 renglones, tenemos que incluir en el cdigo fuente 2 etiquetas seguidas, de la siguiente manera: <br /><br />. Si necesitamos 3 renglones ponemos <br /><br /><br />.

DARLE FORMATO AL TEXTO

A continuacin veremos las etiquetas que nos permiten darle formato al texto; con estas etiquetas podemos presentar el texto en negrita, cursiva, texto grande, texto pequeo, etc. 1 - TEXTO EN NEGRITA Para obtener texto en negrita debemos utilizar la etiqueta <b>. Por ejemplo: <p><b>Este texto est en negrita.</b>Este texto no est en negrita.</p>

Esto dara como resultado lo siguiente: Este texto est en negrita. Este texto no est en negrita. 2 - TEXTO EN CURSIVA Para obtener texto en cursiva debemos utilizar la etiqueta <i>. Por ejemplo: <p><i>Este texto est en cursiva.</i>Este texto no est en cursiva.</p> Esto dara como resultado lo siguiente: Este texto est en cursiva. Este texto no est en cursiva. 3 - RESALTAR EL TEXTO Podemos hacer resaltar el texto utilizando las etiquetas <strong> y <em>. La etiqueta <strong> resalta ms al texto que la etiqueta <em>. Una cosa a tener en cuenta es que en los actuales exploradores Web el texto resaltado con <strong> se ve en negrita, exactamente igual que con <b>; y el texto resaltado con <em> se ve en cursiva exactamente igual que con <i>; sin embargo se recomienda que para obtener texto en negrita se utilice <b> y para cursiva <i>; en lugar de <strong> y <em>, ya que en un futuro es posible que los exploradores Web muestren de manera distinta a los textos formateados con estas ltimas dos etiquetas. Debemos utilizar <strong> y <em> simplemente para resaltar una parte del texto del resto no resaltado. Veamos un ejemplo: <html> <head> <title>Ejemplo</title> </head> <body> <p><b>Este texto est en negrita.</b></p> <p><i>Este texto est en cursiva.</i></p> <p><em>Este texto est resaltado.</em></p> <p><strong>Este texto est resaltado ms que el anterior.</strong></p> </body> </html> El resultado sera el siguiente:

Este texto est en negrita. Este texto est en cursiva. Este texto est resaltado. Este texto est resaltado ms que el anterior. Como se ve, los textos con <b> y <strong> dan resultados similares al igual que <i> y <em>.

Las etiquetas de formato pueden combinarse, as por ejemplo podemos tener texto en negrita y cursiva. 4 - OTRAS ETIQUETAS DE FORMATO DE TEXTO Existen varias etiquetas que dan distinto formato al texto definido. Primero veremos las definiciones de cada una de estas etiquetas y luego veremos un ejemplo que incluye el cdigo fuente de cada etiqueta: La etiqueta <big> le da tamao grande al texto definido. La etiqueta <small> le da tamao ms pequeo al texto definido. La etiqueta <sub> define texto en subndice, o sea texto de tamao ms pequeo y ligeramente ms abajo que el resto, como se suele utilizar en matemticas por ejemplo. La etiqueta <sup> define texto en superndice, o sea texto de tamao ms pequeo y ligeramente ms arriba que el resto, como se suele utilizar en matemticas para definir potencias. Las etiquetas <del> e <ins> se utilizan para definir un texto tachado y de correccin respectivamente; por ejemplo como se utiliza en casos de ofertas en las que figura el precio de antes y el de ahora. <del> tacha el texto e <ins> muestra el texto subrrayado como si fuese insertado para corregir el texto anterior; estas etiquetas suelen utilizarse en conjunto. La etiqueta <code> define texto con estilo de cdigo fuente de computadora. La etiqueta <kbd> define texto de teclado o mquina de escribir. La etiqueta <tt> define texto de estilo de teletipo. La etiqueta <pre> permite definir texto preformateado con estilo similar al de la etiqueta <code>; esto significa que si al texto definido le agregamos varios espacios o saltos de lnea en el cdigo -sin utilizar <br />- stos aparecern tal cual se los escribi en el cdigo fuente. Recordemos que en HTML el texto comn acepta solamente un espacio entre palabras y por ms que agreguemos dos o ms espacios, siempre se mostrar uno; lo mismo sucede con los saltos de lnea, ya que en el texto comn la nica manera de agregar saltos de lnea es mediante la etiqueta <br />. Con la etiqueta<pre> se aceptan computan ms de un espacio y los saltos de lnea se pueden realizar sin <br />, el nico detalle es que el estilo de texto es similar al definido por la etiqueta <code>. La etiqueta <var> define texto en formato similar al utilizado para mostrar variables en el cdigo fuente de editores de lenguajes de programacin; en muchos exploradores Web el estilo resultante es similar al que define <code>. La etiqueta <samp> define texto en estilo de ejemplo de cdigo fuente; el resultado es similar al de <code>. La etiqueta <abbr> sirve para definir abreviaturas, las cuales cuales se muestran subrrayadas por una lnea de puntos y si se apoya el puntero del mouse por encima del texto abreviado aprace una leyenda, generalmente utilizada para explicar qu significa la abreviatura del texto definido. La leyenda se define con el atributo title. Por ejemplo:

La <abbr title="Universidad Tecnolgica Nacional">UTN</abbr> es lder en la enseanza de carreras de tecnologa. La etiqueta <address> define texto en formato de direccin postal. En la mayora de los exploradores Web aparece en cursiva con un espacio de un rengln antes y despus del bloque de texto. La etiqueta <blockquote> define texto en formato de cita; por ejemplo se puede utilizar para citar frases. En la mayora de los exploradores Web, el bloque de texto definido con esta etiqueta aparece con un espacio de sangra adelante. Veamos un ejemplo con todas las etiquetas explicadas anteriormente: <html> <head> <title>Ejemplo</title> </head> <body> <p><big>Este texto se ver ms grande.</big></p> <p><small>Este texto se ver ms pequeo.</small></p> <p>El resultado de la potencia de 2¹⁰ es igual a 1024.</small></p> <p>El precio de este pantaln es: Antes - <del>$100</del>. Ahora - <ins>$80</ins>.</p> <p><code>Este texto tiene formato de cdigo fuente de computadora. </code></p> <p><kbd>Este texto tiene formato de letra de teclado o mquina de escribir. </kbd></p> <p><tt>Este texto tiene formato de teletipo.</tt></p> <pre>Este texto admite ms de un as como saltos de lnea.</pre> espacio

<p><var>Este texto tiene formato de variable de cdigo fuente.</var></p> <p><samp>Este texto tiene formato de ejemplo de cdigo fuente de programa.</samp></p> <p>La <abbr title="Universidad Tecnolgica Nacional">UTN</abbr> es lder en la enseanza de carreras de tecnologa y de ciencias exactas tanto en la Repblica Argentina como en Amrica en general.</p> <address> Direccin: Belgrano 2300 - Capital Federal<br/> Repblica Argentina<br/> Tel: 4999-9999<br/> </address>
<blockquote>Principio de la cita larga. Esta es una cita con espacios de sangras

agregados. Esta es una cita con espacios de sangras agregados. Esta es una cita con espacios de sangras agregados. Esta es una cita con espacios de sangras agregados. Esta es una cita con espacios de sangras agregados. Esta es una cita con espacios de sangras agregados. Esta es una cita con espacios de sangras agregados. Fin de la cita

larga.</blockquote> </body> </html>

CMO AGREGAR IMGENES

El texto es muy til para dar informacin, pero convengamos que lo que le da belleza esttica a una pgina Web son las imgenes, as que a continuacin veremos la etiqueta <img> y sus atributos que nos permiten agregar imgenes. Lo mnimo indispensable que hay que agregar en una etiqueta <img> es lo siguiente: <img src="imagen.jpg" /> Como vemos en el ejemplo anterior, <img /> requiere solamente una etiqueta la cual se cierra al final de la misma. Tambin requiere un atributo obligatorio, src, el cual proviene de "source" que significa fuente en ingls. Se trata del atributo que define el nombre de la imagen a agregar. Es importante saber la ubicacin de la imagen; si se encuentra en la misma carpeta que el archivo HTML que estamos editando, solamente hay que indicar el nombre del archivo, pero si se encuentra en otra carpeta hay que indicar la direccin completa con todos los nombres de carpetas. Otro atributo opcional pero til es alt, el cual sirve para definir un texto alternativo que aparece en caso que la imagen no se haya cargado. De esta manera, si por alguna razn la imagen no se ve o tarda mucho en cargar, en su lugar se muestra este texto alternativo. La etiqueta <img /> con el atributo alt se ve de la siguiente manera: <img src="imagen.jpg" alt="Imagen 1" /> Otros dos atributos opcionales, pero muy importantes, son los que definen el ancho y alto de la imagen que agregamos. El atributo width define el ancho y height define el alto. Veamos un ejemplo: <img src="imagen.jpg" alt="Imagen 1" width="400" height="200" /> La etiqueta anterior agrega una imagen llamada imagen.jpg, con texto alternativo "Imagen 1", un ancho de 400 pixels y un alto de 200 pixels. Se puede especificar el mismo tamao original de la imagen u otro distinto. Por ejemplo se pueden especificar dimensiones mayores y as estirar la imagen o se puede lograr el efecto contrario de mostrar una imagen con dimensiones inferiores a las originales. Una cosa que hay que tener en cuenta es que los usuarios que visitarn nuestra pgina utilizarn distintas resoluciones de pantalla, por lo tanto no todos vern de la misma manera las imgenes que agreguemos a la pgina. Si se utilizan imgenes para hacer partes estructurales de una pgina, como un marco o una sombra; por ejemplo si queremos que stas siempre se vean de la misma forma en todas las resoluciones de pantalla es conveniente utilizar porcentaje en lugar de pixels al definir el ancho de las imgenes.

<img src="imagen.jpg" alt="Imagen 1" width="80%" /> La imagen anterior ocupar el 80% del ancho de la pgina en la que est contenida. Otra cosa que se puede hacer con las imgenes es alinearlas respecto a un texto adyacente. Por ejemplo podemos lograr que el texto aparezca a la derecha de un texto o a la izquierda, o arriba o en el medios; tambin podemos lograr que la imagen sea recorrida por los costados por el texto, etc. Esto se logra mediante el uso del atributo align; y algunos de los valores pueden ser left, right, top, middle o bottom, que significan izquierda, derecha, arriba, medio, fondo. En el siguiente ejemplo sustituyamos el valor imagen.jpg del atributo src con el nombre de una imagen que poseamos. <html> <head> <title>Ejemplo con imgenes</title> </head> <body> <p><img src="imagen.jpg" alt="imagen de ejemplo" align="left" />La imagen est alineada a la izquierda de este texto, por lo tanto el texto recorrer la imagen por el lado derecho de la misma.La imagen est alineada a la izquierda de este texto, por lo tanto el texto recorrer la imagen por el lado derecho de la misma. La imagen est alineada a la izquierda de este texto, por lo tanto el texto recorrer la imagen por el lado derecho de la misma . La imagen est alineada a la izquierda de este texto, por lo tanto el texto recorrer la imagen por el lado derecho de la misma.</p> <p><img src="imagen.jpg" alt="imagen de ejemplo" align="right" />La imagen est alineada a la derecha de este texto, por lo tanto el texto recorrer la imagen por el lado izquierdo de la misma.La imagen est alineada a la derecha de este texto, por lo tanto el texto recorrer la imagen por el lado izquierdo de la misma.La imagen est alineada a la derecha de este texto, por lo tanto el texto recorrer la imagen por el lado izquierdo de la misma.La imagen est alineada a la derecha de este texto, por lo tanto el texto recorrer la imagen por el lado izquierdo de la misma.La imagen est alineada a la derecha de este texto, por lo tanto el texto recorrer la imagen por el lado izquierdo de la misma.</p> <p><img src="imagen.jpg" alt="imagen de ejemplo" align="top" /> La imagen est alineada arriba con respecto al texto, lo cual significa que el texto comenzar en la esquina superior derecha de la imagen.</p> <p><img src="imagen.jpg" alt="imagen de ejemplo" align="middle" />La imagen est alineada en el medio con respecto al texto adyacente a la misma. Esto significa que el texto comenzar en el medio del lado derecho.</p> <p><img src="imagen.jpg" alt="imagen de ejemplo" align="bottom" />La imagen est alineada abajo con respecto al texto. La imagen est alineada abajo con respecto al texto. La imagen est alineada abajo.</p> </body> </html>

Recordemos que debemos utilizar las imgenes con moderacin, ya que son archivos aparte del documento HTML, y que cuantas ms imgenes agreguemos ms tardar en cargarse todo. Otra cosa a tener en cuenta es que procuremos que stas no ocupen un tamao grande

de disco (en bytes), ya que utilizan espacio del ancho de banda. Por ejemplo si una pgina Web est compuesta por un documento HTML que ocupa 100 KB y cinco imgenes de 200 KB cada una; al cargar la pgina con un explorador deberemos bajar para verla 1.1 MB de datos (1 MB de las cinco imgenes y 100 KB del archivo .htm o .html) Los formatos de imgenes ms utilizados al crear pginas Web son .jpg, .png y .gif, siendo estos dos ltimos ms utilizados para crear botones o logos de sitios Web ya que permiten transparencias.

HIPERVNCULOS
Quiz uno de los elementos ms importantes del lenguaje HTML son los hipervnculos, los cuales permiten a los usuarios saltar de una pgina a otra, de un sitio a otro o incluso de un punto a otro dentro de una misma pgina. Los hipervnculos pueden estar definidos en texto o imgenes, de esta manera si tocamos un texto o imagens con hipervnculo saltaremos al punto que indica el mismo. Los hipervnculos se definen mediante la etiqueta <a>. Para que un texto o imagen tenga un hipervnculo la etiqueta que lo define debe estar rodeada por las etiquetas de apertura y cierre <a>. El atributo de <a> que define la direccin a la que apuntar el hipervnculo se llama href. El valor que se le introduce ahref es una URL (nombre tcnico que se utiliza para referirse a las direcciones Web, proveniente de las siglas de Uniform Resource Locator, que signifia Localizador Uniforme de Recursos). Veamos un ejemplo:

<html> <head> <title>Ejemplo con hipervnculo</title> </head> <body> <p><a href="http://www.youbioit.com">Este texto es un hipervnculo</a></p> </body> </html>

El ejemplo anterior dara como resultado un hipervnculo hacia www.youbioit.com, como se ve a continuacin: Este texto es un hipervnculo Hay dos maneras de definir la URL de un hipervnculo mediante una direccin absoluta o una direccin relativa. La direccin absoluta incluye la direccin completa y la relativa la direccin de un documento en relacin a la ubicacin del documento en el que nos encontramos. SI por ejemplo nos encontramos en http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento1.html y queremos definir un hipervnculo a http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html; hay dos maneras de hacerlo:

Utilizando la direccin absoluta: <a href="http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html">Texto</a> Utilizando la direccin relativa: <a href="documento2.html">Texto</a> Si nos encontramos en http://www.ejemplo.com/carpeta1/documento1.html y queremos definir un hipervnculo ahttp://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html; hay dos maneras de hacerlo: Utilizando la direccin absoluta: <a href="http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html">Texto</a> Utilizando la direccin relativa: <a href="carpeta2/carpeta3/documento2.html">Texto</a> Si nos encontramos en http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento1.html y queremos definir un hipervnculo a http://www.ejemplo.com/carpeta1/documento2.html; hay dos maneras de hacerlo: Utilizando la direccin absoluta: <a href="http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html">Texto</a> Utilizando la direccin relativa: <a href="../../carpeta3/documento2.html">Texto</a> Con ../ nos dirigimos a una carpeta atrs. Un atributo opcional de <a> es target, el cual nos permite abrir el hipervnculo en una pestaa nueva del explorador, si le agregamos el valor "_blank". Por ejemplo:

<html> <head> <title>Ejemplo con hipervnculo</title> </head> <body> <p><a href="http://www.youbioit.com" target="_blank">Este texto define un hipervnculo que se abre en una pestaa nueva</a></p> </body> </html>

Si queremos crear un hipervnculo hacia otro punto de la misma pgina en la que nos encontramos, por ejemplo para dirigirnos a una subseccin del documento que estamos leyendo debemos utilizar un marcador. Los marcadores se definen con el atributo de <a> name. Estos marcadores son invisibles y simplemente definen un punto al que podemos saltar dentro de la pgina. Para dirigirnos al punto donde se encuentra el marcador utilizamos el atributo href y como valor el nombre del marcador anteponiendo un signo #. Por ejemplo si queremos definir un marcador de nombre Marcador1 y un hipervnculo hacia el mismo debemos escribir el siguiente cdigo fuente:

<html> <head>

<title>Ejemplo con hipervnculo</title> </head> <body> <p><a href="#Marcador1">Este texto define un hipervnculo que nos lleva al punto donde se encuentra el marcador invisible llamado Marcador1. </a></p> <p>Texto 1</p> <p><a name="Marcador1">El hipervnculo anterior nos trae a este punto</a></p> </body> </html>

Tambin podemos dirigirnos a un marcador ubicado en otra pgina; simplemente debemos poner en el atributo href la direccin URL de la pgina donde se encuentra el marcador, seguido por # y el nombre del marcador. Por ejemplo si un marcador llamado Marcador1 se encuentra en la pgina ubicada enwww.ejemplo.com/documento1.html, para definir el hipervnculo que nos lleve al mismo debemos escribir el siguiente cdigo fuente. <a href="http://www.ejemplo.com/documento1.html#Marcador1">Este texto define un hipervnculo que nos lleva al punto donde se encuentra el marcador invisible llamado Marcador1.</a> Para crear hipervnculos con imgenes en lugar de utilizar texto rodeado por la etiqueta <a>, utilizamos una imagen. En donde dice nombredeimagen.jpg deben reemplazarlo por el nombre verdadero de una imagen que tengan.

<html> <head> <title>Ejemplo con hipervnculo de imagen</title> </head> <body> <a href="http://www.youbioit.com"><img src="nombredeimagen.jpg" alt="Imagen de ejemplo" /></a> </body> </html> Tambin podemos crear hipervnculos a direcciones mail, los cuales al ser tocados, abren automticamente la aplicacin de mail de nuestro sistema operativo. Para crearlo debemos agregar en href como valor mailto: seguido de la direccin de mail. <html> <head> <title>Ejemplo con hipervnculo a direccin de mail</title> </head>

<body> <a href="mailto:alguien@ejemplo.com">Esto abrir el programa de mail de nuestro sistema operativo con la direccin de mail agregada automticamente </a> <a href="mailto:alguien@ejemplo.com?Subject=Hola%20amigo">Esto abrir el programa de mail de nuestro sistema operativo con la direccin de mail y asunto agregados automticamente.</a> </body> </html> En el segundo ejemplo vemos que agregamos el asunto del mail utilizando la palabra Subject separada de la direccin por un signo ? . Cada palabra que forma el texto del asunto debe estar separada por %20 y no por espacios, de lo contrario no funcionar correctamente, as que recordemos utilizar siempre %20 en el asunto de mailto.

LISTAS
Otro elemento muy utilizado en el diseo de pginas Web es el de las listas. En HTML existen tres tipos de listas: las listas numeradas u ordenadas, las no numeradas o no ordenadas, y las listas de definicin. Las listas no ordenadas se ven como el siguiente ejemplo: tem 1 tem 2 tem 3 tem 4 tem 5

Para definir una lista no ordenada se utiliza la etiqueta <ul> y cada tem se define con la etiqueta <li>. Veamos el cdigo fuente necesario para agregar un lista como la anterior. <html> <head> <title>Ejemplo de lista</title> </head> <body> <ul> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> </body> </html>

Como se ve en el cdigo fuente anterior tanto la lista as como cada tem requieren una etiqueta de apertura y de cierre separadas, es muy importante respetar esto al igual que con otras etiquetas HTML, siempre hay que cerrar cada tem y la lista con la etiqueta de cierre. Otra cosa a tener en cuenta es que las listas agregan sangra automticamente a cada tem para que la misma quede destacada. Las listas ordenadas se ven como el siguiente ejemplo:
1. 2. 3. 4. 5.

tem 1 tem 2 tem 3 tem 4 tem 5

Para definir una lista ordenada se utiliza la etiqueta <ol> y al igual que en las listas no ordenadas, cada tem se define con la etiqueta <li>. Veamos el cdigo fuente necesario para agregar un lista como la anterior. Como se ve en el cdigo fuente anterior, la estructura de las listas ordenadas es igual a la de las no ordenadas y lo nico que cambia es el nombre de la etiqueta que define qu tipo de lista queremos agregar. Vale la pena aclarar que <ul> proviene de Unordered List que en ingls significa Lista no ordenada, mientras que <ol> proviene de Ordered List que significa Lista ordenada y <li> proviene de List Item que significa tem de lista. Hay un atributo que nos permite cambiar el tipo de listas ordenadas y no ordenadas, se trata del atributo type. Por ejemplo podemos tener una lista ordenada con letras en lugar de nmeros o una lista no ordenada con cuadrados o crculos blancos en lugar de crculos negros. Veamos un ejemplo: <html> <head> <title>Ejemplo de lista</title> </head> <body> <h4>Lista no ordenada con tems de crculos negros </h4> <ul type="disc"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> <h4>Lista no ordenada con tems de crculos blancos</h4> <ul type="circle"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li>

</ul> <h4>Lista no ordenada con tems cuadrados</h4> <ul type="square"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> <h4>Lista ordenada con tems de numerados </h4> <ol> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ol> <h4>Lista ordenada con tems de letras maysculas </h4> <ul type="A"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> <h4>Lista ordenada con tems de letras maysculas </h4> <ul type="A"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> <h4>Lista ordenada con tems de letras minsculas </h4> <ul type="a"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> <h4>Lista ordenada con tems de nmeros romanos en mayscula</h4> <ul type="I"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li>

</ul> <h4>Lista ordenada con tems de nmeros romanos en minscula</h4> <ul type="i"> <li>tem 1</li> <li>tem 2</li> <li>tem 3</li> <li>tem 4</li> <li>tem 5</li> </ul> </body> </html> Si no se especifica el tipo de item de lista, por omisin las listas no ordenadas contienen tems con crculos negros y las ordenadas estn numeradas.

LISTAS DE DEFINICIN Las listas de definicin contienen tems con una descripcin de cada uno. Una lista de definicin se ve as: tem 1 Descripcin del tem 1 tem 2 Descripcin del tem 2 tem 3 Descripcin del tem 3 tem 4 Descripcin del tem 4 tem 5 Descripcin del tem 5 <html> <head> <title>Ejemplo de lista</title> </head> <body> <dl> <dt>tem 1</dt> <dd>Descripcin de tem 1</dd> <dt>tem 2</dt> <dd>Descripcin de tem 2</dd> <dt>tem 3</dt> <dd>Descripcin de tem 3</dd> <dt>tem 4</dt> <dd>Descripcin de tem 4</dd> <dt>tem 5</dt> <dd>Descripcin de tem 5</dd> </dl> </body>

</html> La etiqueta que define una lista de definicin es <dl>, la etiqueta que define un tem es <dt> y <dd> la descripcin.

Curso de HTML - Segunda parte TABLAS HTML

Otro elemento muy utilizado en el diseo de pginas Web son las tablas. En HTML las tablas se definen en filas horizontales y columnas verticales. Para crear una tabla se requieren por lo menos tres etiquetas, la etiqueta <table>que define la tabla, <tr> para definir filas horizontales y <td> para definir las celdas de cada fila. Por ejemplo: Fila 1, Celda 1 Fila 2, Celda 1 Fila 3, Celda 1 Fila 4, Celda 1 Fila 5, Celda 1 Fila 1, Celda 2 Fila 2, Celda 2 Fila 3, Celda 2 Fila 4, Celda 2 Fila 5, Celda 2

Para crear la tabla anterior primero debemos definir la tabla con la etiqueta <table>, luego la primera fila con la etiqueta<tr>, seguido de las celdas 1 y 2 de la primera fila con la etiqueta <td>, continuamos con la segunda fila usando otra etiqueta <tr>, luego las dos celdas de la segunda fila con etiquetas <td> y finalmente la tercera, cuarta y quinta fila y sus celdas con las etiquetas <tr> y <td> respectivamente. Todo esto debe hacerse en orden y respetando etiquetas de apertura y cierre de cada etiqueta, o sea que al terminar las filas debemos cerrarlas con </tr> y al terminar cada celda cerramos con </td>. Veamos el cdigo fuente necesario para crear la tabla del ejemplo anterior: <html> <head> <title>Ejemplo de tabla</title> </head> <body> <table border="1"> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>

</tr> </table> </body> </html> Como se ve en el cdigo fuente anterior, primero debemos definir dnde comienza la tabla con la etiqueta <table>. Luego definimos en orden cada fila con la etiqueta <tr> y dentro de cada fila las celdas correspondientes con <td>. Recordemos que hay que cerrar cada celda con </td> y cada fila con </tr>. El contenido de cada celda debe estar incluido entre las etiquetas de apertura y cierre <td>. Todo debe estar colocado en el orden de aparicin que deseamos lograr. Hay que tener mucho cuidado de colocar las etiquetas de celdas y filas correctamente; si alguna se llega a encontrar en una posicin incorrecta pueden obtenerse resultados indeseados en el diseo de la pgina Web con la que estamos trabajando. Finalmente donde termina la tabla cerramos con la etiqueta de cierre </table>. En el cdigo fuente anterior, dentro de la etiqueta <table> tambin incluimos un atributo llamado border, el cual define el ancho del borde de la tabla. Por omisin si no incluimos ese atributo la tabla tendr un borde invisible o de 0 pixeles. En el caso anterior la tabla tiene un borde de 1 pixel. El nmero del atributo border indica el ancho del borde en pixeles, o sea que cuanto ms grande sea el nmero indicado dentro de border, ms ancho ser el borde de la tabla en pixeles. Otro atributo opcional de la etiqueta <table> es cellpadding el cual sirve para indicar en pixeles el margen interno que tendrn las celdas de la tabla; cuanto ms grande sea el nmero ms alejado estar el contenido de las celdas de los bordes de las mismas. Por ejemplo cellpadding="10" indica que las celdas tendrn un margen interno de 10 pixeles. Tambin hay otro atributo de <table> llamado cellspacing el cual sirve para definir el espaciado entre celdas en pixeles, o sea que los bordes de las celdas tendrn un espacio vaco interno. Este atributo no afecta el borde externo de la tabla. El atributo width es muy importante ya que define el ancho que tendr la tabla. Por ejemplo si queremos que sta ocupe cierto espacio del ancho de la pgina es conveniente indicarle un ancho que puede ser en pixeles o porcentaje del ancho de la pgina. Por ejemplo si dentro de la etiqueta <table> indicamos width="500" la tabla tendr un ancho de 500 pixeles. Por otro lado si preferimos usar porcentajes e indicamos width="50%" la tabla tendr un ancho del 50% de la pgina que la contiene. En casos que querramos que la tabla ocupe el mismo ancho en todo tipo de resoluciones de pantalla, es conveniente indicar el ancho de tabla en porcentaje en lugar de pixeles, ya que por ejemplo una tabla de 1000 pixeles de ancho en una pantalla de 1024 pixeles de ancho ocupar ms espacio que en una pantalla de 1280 pixeles de ancho; sin embargo si indicamos para sta un ancho de por ejemplo un 80%, la misma ocupar el mismo espacio en todo tipo de resoluciones, convirtiendo as a nuestro diseo en compatible para todo tipo de pantalla. Tambin podemos especificar el ancho de cada celda agregando el atributo width en las etiquetas <td>. Vale aclarar que si indicamos el ancho en pixeles en todas las celdas y tambin en la tabla, la sumatoria del ancho de las celdas debe tener el mismo valor que el ancho de la tabla para evitar resultados no deseados en el diseo final de la pgina. Igualmente se recomienda utilizar porcentaje en el ancho de las celdas; ya que el porcentaje ser a razn del ancho total de la tabla y no de la pgina en que est contenida la tabla. As por ejemplo si una tabla est dentro de una pgina e indicamos un ancho de 50%, la tabla tendr un ancho del 50% de la pgina, mientras que si indicamos para una celda de la tabla un ancho del 20%, la

celda ocupar el 20% del ancho de la tabla; as si tenemos una tabla con 5 celdas por fila de 20% de ancho cada una, la suma total de las mismas dar un 100% del ancho de la tabla. Veamos algunos ejemplos: <html> <head> <title>Ejemplo de tabla</title> </head> <body> <h4>Tabla 1</h4> <table border="1" cellpadding="10" cellspacing="5" width="50%"> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> <tr> <td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td> </tr> </table> <br /> <h4>Tabla 2</h4> <table border="5" cellpadding="5" cellspacing="0" width="50%"> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> <tr> <td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td> </tr> </table> <br /> <h4>Tabla 3</h4> <table border="20" cellpadding="20" cellspacing="5" width="100%"> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> <tr> <td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td> </tr> </table> <br /> <h4>Tabla 4</h4> <table border="0" cellpadding="5" cellspacing="0" width="50%"> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> <tr> <td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td> </tr>

</table> <br /> <h4>Tabla 5</h4> <table border="1" cellpadding="5" cellspacing="0" width="50%"> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> <tr> <td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td> </tr> </table> </body> </html> Este sera el resultado del cdigo fuente anterior:

Tabla 1

Fila 1, Celda 1 Fila 2, Celda 1

Fila 1, Celda 2 Fila 2, Celda 2

Tabla 2
Fila 1, Celda 1 Fila 2, Celda 1 Fila 1, Celda 2 Fila 2, Celda 2

Tabla 3
Fila 1, Celda 1 Fila 1, Celda 2

Fila 2, Celda 1

Fila 2, Celda 2

Tabla 4
Fila 1, Celda 1 Fila 2, Celda 1 Fila 1, Celda 2 Fila 2, Celda 2

Tabla 5

Fila 1, Celda 1 Fila 2, Celda 1

Fila 1, Celda 2 Fila 2, Celda 2

------------------------------------------------------------------------------------------CELDAS DE TITULO Existe una etiqueta que se comporta de la misma manera que la etiqueta de celdas <td>, se trata de <th>. Funciona de manera muy parecida a <td> como una celda ms, con la diferencia de que el texto incluido en <th> aparece en negrita y centrado, ya que se trata de una celda de ttulo.
Veamos un ejemplo:

<html> <head> <title>Ejemplo de tabla</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="50%"> <tr> <th width="50%">Columna 1</th><th width="50%">Columna 2</th> </tr> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> </table> </body> </html> Esto se vera as: Columna 1 Fila 1, Celda 1 TTULO DE TABLA
Tambin se puede incluir un ttulo para la tabla con la etiqueta <caption>, el cual aparece por omisin en la parte de arriba y afuera de la tabla, y de manera centrada. La etiqueta <caption> debe ir inmediatamente despus de la etiqueta <table> y antes de la primera etiqueta <tr>, esto debe ser respetado para obtener resultados correctos.

Columna 2 Fila 1, Celda 2

Veamos un ejemplo: <html> <head>

<title>Ejemplo de tabla</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="50%"> <caption>Ttulo de la tabla</caption> <tr> <td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td> </tr> <tr> <td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td> </tr> </table> </body> </html> Esto se vera as:

Ttulo de la tabla Fila 1, Celda 1 Fila 1, Celda 2 Fila 2, Celda 1 Fila 2, Celda 2 CONFIGURANDO VARIAS CELDAS A LA VEZ Hay una etiqueta que nos permite ahorrar trabajo cuando queremos agregar propiedades a varias celdas en tablas extensas. Por ejemplo supongamos que tenemos una tabla de ancho 100%, de 5 columnas por 4 filas, con un total de 20 celdas y si queremos que cada celda tenga un ancho de 20%, en lugar de agregar el atributo width en cada celda, podemos utilizar la etiqueta <colgroup> que nos permite agrupar celdas en columnas y agregar todos los atributos que querramos, los cuales sern aplicados a todas las celdas de la columna que el grupo correspondiente representa. La etiqueta <colgroup> debe ir inmediatamente luego de la etiqueta <table> y antes de la primera etiqueta <tr>. El atributo span es el que define cuntas columnas agrupa cada etiqueta <colgroup> adems del atributo span esta etiqueta debe incluir los atributos que se aplicarn en las celdas de la/s columna/s que el grupo representa . Se pueden tener mas de un grupo de columnas en una tabla y stas deben estar ubicadas una despus de la otra y adems deben incluir etiqueta de cierre; entre la etiqueta de apertura y cierre no hace falta incluir nada, todo va en la de apertura. Veamos un ejemplo: <html> <head> <title>Ejemplo de tabla</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <colgroup span="5" width="20%"></colgroup> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td><td>Fila 1, Celda 3</td><td>Fila 1,

Celda 4</td><td>Fila 1, Celda 5</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td><td>Fila 2, Celda 3</td><td>Fila 2, Celda 4</td><td>Fila 2, Celda 5</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td><td>Fila 3, Celda 3</td><td>Fila 3, Celda 4</td><td>Fila 3, Celda 5</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td><td>Fila 4, Celda 3</td><td>Fila 4, Celda 4</td><td>Fila 4, Celda 5</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td><td>Fila 5, Celda 3</td><td>Fila 5, Celda 4</td><td>Fila 5, Celda 5</td> </tr> </table> <br /><br /> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <colgroup span="1" width="50%"></colgroup> <colgroup span="4" width="12.5%"></colgroup> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td><td>Fila 1, Celda 3</td><td>Fila 1, Celda 4</td><td>Fila 1, Celda 5</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td><td>Fila 2, Celda 3</td><td>Fila 2, Celda 4</td><td>Fila 2, Celda 5</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td><td>Fila 3, Celda 3</td><td>Fila 3, Celda 4</td><td>Fila 3, Celda 5</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td><td>Fila 4, Celda 3</td><td>Fila 4, Celda 4</td><td>Fila 4, Celda 5</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td><td>Fila 5, Celda 3</td><td>Fila 5, Celda 4</td><td>Fila 5, Celda 5</td> </tr> </table> </body> </html>

Esto se vera as:

Fila 1, Celda 1 Fila 2, Celda 1 Fila 3, Celda 1 Fila 4, Celda 1

Fila 1, Celda 2 Fila 2, Celda 2 Fila 3, Celda 2 Fila 4, Celda 2

Fila 1, Celda 3 Fila 2, Celda 3 Fila 3, Celda 3 Fila 4, Celda 3

Fila 1, Celda 4 Fila 2, Celda 4 Fila 3, Celda 4 Fila 4, Celda 4

Fila 1, Celda 5 Fila 2, Celda 5 Fila 3, Celda 5 Fila 4, Celda 5

Fila 1, Celda 1 Fila 2, Celda 1 Fila 3, Celda 1 Fila 4, Celda 1

Fila 1, Celda 2 Fila 2, Celda 2 Fila 3, Celda 2 Fila 4, Celda 2

Fila 1, Celda 3 Fila 2, Celda 3 Fila 3, Celda 3 Fila 4, Celda 3

Fila 1, Celda 4 Fila 2, Celda 4 Fila 3, Celda 4 Fila 4, Celda 4

Fila 1, Celda 5 Fila 2, Celda 5 Fila 3, Celda 5 Fila 4, Celda 5

En la primera tabla tenemos un grupo de 5 columnas en el que se aplic el atributo width de ancho con un valor de 20%, haciendo que no fuera necesario incluir este atributo en cada celda de la tabla. En la segunda tabla tenemos dos grupos de columnas, el primero incluye una columna, indicado en el atributo span con el valor 1, mientras que el segundo grupo incluye cuatro columnas, indicado en el atributo span con el valor 4. En el primer grupo de una columna se aplico el atributo width con valor 50% y en el segundo de cuatro columnas un width con valor 12.5% de ancho para cada celda. ALINEAMIENTO DEL CONTENIDO DE CELDAS Por omisin el contenido de las celdas aparece justificado a la izquierda, pero puede suceder que querramos centrar dicho contenido, para eso existe el atributo align, con el cual podemos justificar el contenido de las celdas a la izquierda, centro o derecha. Tambin existe el atributo valign que nos permite alinear verticalmente el contenido de las celdas. Dichos atributos pueden ser utilizados tanto en la etiqueta <table> como en las etiquetas <td> de una tabla. Si los utilizamos en la etiqueta <table> tendrn validez en toda la tabla, mientras que si los utilizamos en una etiqueta <td>solamente tendrn validez en la celda donde se encuentran. Tambin hay que tener en cuenta que si tenemos atributos de alineamiento tanto en <table> como en una celda, prevalecern los valores del atributo de la celda. Por ejemplo, si queremos que en toda la tabla el contenido est centrado salvo en una celda; debemos poner un atributo de alineamiento con valor centrado, align="center", en la etiqueta <table>, para que todas las celdas tengan contenido centrado mientras que en la celda que queremos que el contenido est justificado a la izquierda ponemos align="left". Veamos un ejemplo: <html> <head> <title>Ejemplo de tabla</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="50%" align="center" valign="middle"> <tr> <td width="50%">Contenido de la celda 1 de la fila 1 el cual se encuentra centrad o y alineado verticalmente en el medio</td><td width="50%" align="left" valign="top">Fila 1, Celda 2</td> </tr>

<tr> <td width="50%">Contenido de la celda 1 de la fila 2 el cual se encuentra centrad o y alineado verticalmente en el medio</td><td width="50%" align="right" valign="bottom">Fila 2, Celda 2</td> </tr> </table> </body> </html> Esto se vera as:

Contenido de la celda 1 Fila 1, Celda 2 de la fila 1 el cual se encuentra centrado y alineado verticalmente en el medio. Contenido de la celda 1 de la fila 2 el cual se encuentra centrado y alineado verticalmente en el medio. Fila 2, Celda 2 En la etiqueta <table> indicamos en el atributo align que el contenido de las celdas de la tabla deben estar centradas con el valor center (centro), mientras que con el atributo valign indicamos que debe estar verticalmente alineado al medio con el valor middle (medio). En el <td> de la segunda celda de la primera fila especificamos que el contenido debe estar alineado a la izquierda con el valor left (izquierda) y verticalmente arriba con el valor top (tope). En el <td> de la celda 2 de la fila 2 indicamos que el contenido debe estar alineado a la derecha con el valor right (derecha) mientras que en el atributo valign indicamos que queremos el contenido verticalmente alineado abajo con el valor bottom (fondo). Como se puede ver en el ejemplo anterior los valores de los atributos align y valign de las celdas de la derecha se superponen a los valores predeterminados de la tabla, indicados en los atributos align y valign de la etiqueta <table>.

CELDAS QUE OCUPAN MS DE UNA FILA DE ALTO O COLUMNA DE ANCHO Hasta ahora hemos creado tablas en formato de grilla regular con celdas que ocupan una fila de alto y una columna de ancho; sin embargo se puede hacer que una celda llegue a tener un ancho mayor al de una columna o un alto mayor al de una fila. Para lograr eso se utiliza en el <td> de la celda que queremos redimensionar, el atributo colspan para hacer que una celda tenga una ancho mayor a una columna o el atributo rowspan para que tenga una alto mayor a una fila. Veamos un ejemplo: <html> <head> <title>Ejemplo de tabla</title>

</head> <body> <h4>Tabla 1</h4> <table border="1" cellpadding="5" cellspacing="0" width="100%"> <tr> <td colspan="4" align="center"><b>Celda de 4 columnas de ancho</b></td> </tr> <tr> <td width="25%">Fila 2, Columna 1</td><td width="25%">Fila 2, Columna 2</td><td width="25%">Fila 2, Columna 3</td><td width="25%">Fila 2, Columna 4</td> </tr> </table> <h4>Tabla 2</h4> <table border="1" cellpadding="5" cellspacing="0" width="50%"> <tr> <td rowspan="4" width="50%" align="center" valign="middle"><b>Celda de 4 filas de alto</b></td><tdwidth="50%"><b>Fila 1, Columna 2</td> </tr> <tr> <td width="50%">Fila 2, Columna 2</td> </tr> <tr> <td width="50%">Fila 3, Columna 2</td> </tr> <tr> <td width="50%">Fila 4, Columna 2</td> </tr> </table> </body> </html> Esto se vera as:

Tabla 1
Celda de 4 columnas de ancho Fila 2, Columna 1 Fila 2, Columna 2 Fila 2, Columna 3 Fila 2, Columna 4

Tabla 2
Fila 1, Columna 2 Celda de 4 filas de alto Fila 2, Columna 2 Fila 3, Columna 2 Fila 4, Columna 2

Cuando diseamos una tabla debemos ser muy cuidadosos y respetar el orden y la cantidad de celdas y filas, o sea que la cantidad de celdas en una fila deben coincidir con la cantidad de celdas en las dems filas de la tabla; pero cuando diseamos una tabla con celdas de ms de una fila de alto o ms de una columna de ancho debemos ser an ms cuidadosos. Como se ve en el cdigo fuente anterior en la primera fila de la primera tabla, donde la celda ocupa cuatro columnas de ancho, solamente agregamos una celda a diferencia de la segunda fila donde s agregamos las cuatro celdas. En la segunda tabla, donde tenemos una celda de cuatro filas de alto; esta celda pertenece a la primera fila, por lo tanto dentro del primer <tr> incluimos dos celdas, la primera con el rowspan de 4 filas y la de la segunda columna de tamao normal; ya en las otras tres filas <tr> solamente debemos incluir una celda por fila pertenecientes a la segunda columna, ya que la primera columna est totalmente ocupada por la celda que tiene una altura de cuatro filas. CABECERA, CUERPO Y PIE DE TABLAS Otra posibilidad que nos da HTML es la de dividir una tabla en tres secciones, la de cabecera, cuerpo y pie de la tabla. Quiz no se utiliza mucho, pero a veces puede llegar a ser til. Las etiquetas que definen estas secciones son <thead>para la cabecera de la tabla que va en la parte de arriba, <tbody> para el cuerpo de la misma y <tfoot> para el pie. Tanto <thead>, <tfoot>, como <tbody> tienen que contener una o ms etiquetas <tr>, las tres deben ir siempre dentro de la tabla, o sea que deben ir colocadas despus del <table> de apertura, as como siempre deben estar colocadas despus de las etiquetas <caption> o <colgroup> en caso de que la tabla contuviera alguna de estas etiquetas. Otra cosa a tener en cuenta es que las secciones deben estar en este orden, primero se coloca la seccin de cabecera<thead> con todo su contenido de filas <tr> y celdas <td> o <th>; luego la seccin de pie de tabla <tfoot> con todas las filas <tr> y celdas <td> y finalmente la seccin de cuerpo <tbody> con sus filas <tr> y celdas <td>. Veamos un ejemplo: <html> <head> <title>Ejemplo de tabla</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption>Tabla con cabecera, cuerpo y pie</caption> <thead> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> </thead> <tfoot> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </tfoot> <tbody> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr>

<tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> </tbody> </table> </body> </html>

Tabla con cabecera, cuerpo y pie Fila 1, Celda 1 Fila 2, Celda 1 Fila 3, Celda 1 Fila 4, Celda 1 Fila 5, Celda 1 Fila 1, Celda 2 Fila 2, Celda 2 Fila 3, Celda 2 Fila 4, Celda 2 Fila 5, Celda 2

Como vemos en el ejemplo anterior primero se coloc la seccin <thead>, luego la <tfoot> y finalmente la <tbody>, sin embargo en la tabla aparecen primero la seccin de cabecera, luego la del cuerpo de la tabla y finalmente la del pie.
Mediante la divisin de una tabla en secciones de cabecera, cuerpo y pie se pueden agregar atributos distintos a los contenidos de cada una de estas. Por ejemplo si se quiere que las filas y celdas de cabecera tengan un cierto color de fondo y de fuente con texto centrado, las celdas de cuerpo tengan otros colores y texto justificado a la izquierda y las de pie tengan color de fondo y de fuentes distinto al de las otras secciones, la divisin de la tabla en secciones puede llegar a ser muy til, ya que los atributos de estilo se aplicaran en <thead>, <tfoot> y <tbody> y todas las etiquetas de adentro heredaran estos atributos. Vale mencionar que los atributos de estilo se definen mediante un sublenguaje llamado CSS que se utiliza en conjunto con HTML, y que veremos ms adelante en captulos siguientes del curso.

MARCOS DE TABLA Existe un atributo de <table> que permite tener bordes de tabla completos o parciales, o sea que solamente agregan bordes en uno o ms lados de la tabla. Por ejemplo puede que se quiera tener borde solamente en el lado de arriba. El atributo se llama frame que significa marco en ingls y los valores disponibles del mismo son: border (borde), box (caja), void (vaco), above (arriba), below (abajo), hsides (que proviene de lados horizontales), vsides (que proviene de lados verticales), lhs (para tener borde solamente en el lado izquierdo) y rhs (para borde solamente en el lado derecho). Veamos un ejemplo: <html> <head> <title>Ejemplo de tabla</title> </head>

<body> <table frame="border"> <caption>Marco de borde completo</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="box"> <caption>Marco de caja (box) - Mismo resultado que border -</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="void"> <caption>Marco vaco</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr>

<tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="above"> <caption>Marco de borde solamente arriba</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="below"> <caption>Marco de borde solamente abajo</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="hsides"> <caption>Marco de borde solamente en los lados horizontales</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr>

<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="vsides"> <caption>Marco de borde solamente en los lados verticales </caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="lhs"> <caption>Marco de borde solamente en el lado izquierdo</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> <table frame="rhs"> <caption>Marco de borde solamente en el lado derecho</caption> <tr> <td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>

</tr> <tr> <td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td> </tr> <tr> <td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td> </tr> <tr> <td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td> </tr> <tr> <td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td> </tr> </table> </body> </html>

Curso de HTML - Tercera parte Marco incorporado

Otra cosa que se puede hacer en HTML es incluir una pgina dentro de otra pgina. La etiqueta que permite hacer esto es <iframe> la cual mediante el uso de atributos nos permite elegir qu pgina queremos incluir, el tamao que sta tendr dentro de la pgina donde la incluimos, si tendr barra de desplazamiento o no, si tendr borde. Los atributos de <iframe> son: src para definir la direccin de la pgina que queremos incluir dentro de la pgina donde estamos trabajando; width (ancho) para definir el ancho de la pgina incorporada en pixeles o porcentaje; height (alto) para definir el alto de la pgina incorporada en pixeles o porcentaje; scrolling para indicar si se quiere que incluya barra de desplazamiento, los valores posibles son yes, no, y auto; y finalmente el atributo frameborder para definir si se quiere que el marco incorporado tenga borde o no, los valores posibles son 1 para agregar un borde y 0 para que no tenga borde. Una cosa a tener en cuenta es que el atributo frameborder en algunos exploradores Web no funciona. Para los exploradores Web que no soportan marcos incorporados hay que agregar un texto entre la etiqueta <iframe> de apertura y la de cierre. En los casos de no ser soportados aparecer el texto, sino se ver la pgina incluida. Veamos un ejemplo: <html> <head> <title>Ejemplo de marco incorporado</title> </head> <body> <iframe src="http://www.youbioit.com" width="500" height="500" scrolling="yes" frameborder="0"> Este texto aparece si el explorador Web utilizado no soporta marcos

incorporados</iframe> <br /><br /> <iframe src="http://www.youbioit.com" width="50%" height="500" scrolling="no" frameborder="1"> Este texto aparece si el explorador Web utilizado no soporta marcos incorporados</iframe> <br /><br /> <iframe src="http://www.youbioit.com" width="500" height="500" frameborder="1"> Este texto aparece si el explorador Web utilizado no soporta marcos incorporados</iframe> <br /><br /> <iframe src="http://www.youbioit.com" width="50%" height="500" scrolling="yes" frameborder="0"> Este texto aparece si el explorador Web utilizado no soporta marcos incorporados</iframe> </body> </html>

Formularios HTML
Un elemento muy importante en el diseo y desarrollo de pginas Web es el de ingreso de datos por parte de los usuarios para que stos sean procesados por algn programa y se devuelvan resultados. Desde formularios de contacto, pasando por buscadores, formularios de inscripcin, hasta campos de texto en foros de discusin y comunidades virtuales, el ingreso de datos es esencial para el funcionamiento de los sitios Web que los utilizan. Sin la capacidad de ingreso de datos no existira lo que hoy conocemos como Web 2.0; antes de la cual los sitios Web estaban armados nicamente por los administradores o webmasters de los mismos y los usuarios solamente podan ver el contenido sin poder participar. Con la modalidad de la Web 2.0, los usuarios son principalmente los que hacen crecer a los sitios Web mediante la informacin y datos que ingresan. Las comunidades virtuales (como Youbioit.com en donde soy un simple usuario y pude escribir este tutorial de HTML) donde son los usuarios los que agregan temas, pginas, videos, imgenes, comentarios, mensajes, etc. dependen del uso de formularios de ingreso de datos para que dichos datos puedan ser introducidos en los sitios Web, almacenados y luego puedan ser vistos por otros usuarios. Por ejemplo cuando uno realiza una bsqueda en un buscador, debe ingresar los datos en un campo de texto y luego tocar un botn para que sta se realice. Cuando uno deja un mensaje, artculo o comentario en una comunidad virtual como Youbioit, Twitter, etc. la informacin se ingresa en un rea de texto y se enva tocando un botn. Cuando uno se inscribe en un sitio Web para convertirse en usuario del mismo, los datos deben ser ingresados mediante el uso de un formulario y enviados tocando un botn. Por lo tanto la importancia que tienen los formularios es muy grande, ya que permiten a los usuarios comunicarse, agregar archivos, informacin y haciendo crecer a Internet, sin necesidad de ser programadores o desarrolladores Web. El funcionamiento de los formularios cuenta con dos partes, la esttica o estructural y la funcional. La parte esttica o estructural es la del diseo del formulario, con sus campos de texto, mens de opciones, botones, etc.; mientras que la funcional es la del programa que procesa los datos introducidos en el formulario devolviendo una respuesta.

Este proceso funciona de la siguiente manera: cuando un usuario (tcnicamente se lo denomina cliente) entra a una pgina con un formulario su computadora la descarga temporalmente (como a todas las pginas de Internet) en la memoria de la misma; el usuario completa el formulario, supongamos que se trata de un buscador con un campo de texto de bsqueda y un botn de Enviar. Una vez que el usuario presiona el botn, los datos son enviados a un programa que se encuentra en el servidor del sitio Web, donde los datos ingresados son procesados; en este caso el proceso realizado por el programa ubicado en el servidor es el de buscar los trminos ingresados en el campo de texto a travs de una base de datos que tambin se encuentra en el servidor; en caso de coincidir las palabras ingresadas o al menos ser similares a las encontradas en la base de datos, el programa automticamente genera una pgina con las respuestas ms cercanas a la bsqueda, la cual es enviada a la computadora del usuario que realiz la bsqueda. Otro ejemplo sera el de un formulario de contacto; primero el usuario abre una pgina la cual se baja a la memoria de la computadora, en la pgina hay un formulario de contacto el cual cuenta con una serie de campos de texto donde el usuario escribe sus datos y el rea de texto donde deja un mensaje, luego presiona el botn de enviar y los datos as como el mensaje del rea de texto son enviados a un programa ubicado en el servidor del sitio Web, el cual procesa los datos generando automticamente un mail que es enviado a una direccin especificada en el programa, en este caso sera la direccin de mail del Webmaster o administrador del sitio, quien recibe todos los datos ingresados por el usuario as como el mensaje en formato de correo electrnico. Simultneamente el programa enva a la computadora del usuario una pgina de agradecimiento, con un texto que dice que el mensaje enviado ser ledo por el administrador. La parte estructural o esttica es la del formulario y sus elementos visuales, la cual tiene un funcionamiento de tipo client side (del lado del cliente), ya que se ejecuta o baja en la memoria de la computadora del usuario; mientras que la parte funcional del formulario, o sea el programa que procesa los datos ingresados y enviados por el usuario, tiene un funcionamiento de tipo server side (del lado del servidor) ya que se ejecuta en la memoria de la computadora del servidor. La parte estructural se disea con lenguaje HTML mientras que la parte funcional debe programarse con un lenguaje lgico como PHP, ASP u otro. HTML no tiene comandos lgicos, por lo tanto solamente sirve para disear las partes estticas y estructurales de las pginas Web. Sin embargo antes de aprender otros lenguajes de desarrollo Web hay que aprender HTML y CSS, los cuales son los principales lenguajes de diseo Web, y que sern cubiertos plenamente en este tutorial. A continuacin veremos cmo se disean los formulario HTML. ELEMENTOS DE FORMULARIOS HTML La etiqueta que nos permite agregar un formulario a una pgina es <form>, por lo tanto todos los elementos que forman parte del mismo (campos de texto, mens, botones, etc.) deben estar entre la etiqueta <form> de apertura y la de cierre. La etiqueta <input> nos permite agregar distintos tipos de elementos de ingreso de datos, como campos de texto, botones de opcin, casillas de seleccin y botones simples. El tipo de elemento de ingreso de datos se elige mediante el uso del atributo de <input> type y los distintos valores posibles de este atributo son: text (para campo de texto), checkbox (para casilla de seleccin), radio (para botn de opcin), submit (para botn de envo de datos), y reset (para botn de restablecer). La etiqueta <input> no utiliza etiqueta de cierre as que se cierra al final como sucede con <img> Veamos un ejemplo: <html>

<head> <title>Ejemplo de formulario</title> </head> <body> <form> Campo de texto<br /> <input type="text" /> <br /><br /> Casilla de seleccin<br /> <input type="checkbox" /> <br /><br /> Botn de opcin<br /> <input type="radio" /><br /><br /> <br /><br /> <input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /> </form> </body> </html> El ejemplo anterior es muy simple y simplemente agrega los distintos elementos que se pueden tener en un formulario. A continuacin vamos a analizar cada elemento con ms detalles. Tambin vamos a ver los otros atributos de <input>. Un atributo muy importante de <input> que le da verdadera funcionalidad en un formulario, es name (nombre); el cual representa al nombre de la variable donde se almacenar el dato ingresado en el elemento. A pesar que este es un tema de programacin algo ms avanzada; es importante al menos tener idea de lo que es una variable. Cuando trabajamos con una computadora todos los datos y rdenes, el funcionamiento en general, se almacenan temporalmente en la memoria de la mquina. Para graficarlo de una manera fcil de entender, la memoria est subdividida en celdas de memoria de un byte cada una y un nmero de direccin que la identifica; la totalidad de todas las celdas dan como resultado la cantidad de memoria que tiene una computadora. Los programas utilizan la memoria para almacenar temporalmente, mientras se ejecutan, los datos ingresados en celdas de memoria. Para identificarlas se requiere el uso de un nombre, este nombre es la variable. Las variables ocupan un cierto espacio de la memoria, acorde al tipo de datos que se almacenan. Por lo tanto, los datos se almacenan temporalmente en variables que son utilizadas por los programas para identificar la posicin de memoria donde estas se encuentran. Supongamos que en un campo de texto de un buscador ingresamos una frase para que el programa de la computadora del servidor del motor de bsqueda compare a la frase de los datos ingresados con los datos que tiene en la base de datos y si encuentra una coincidencia devuelva una pgina con la lista de respuestas o links de pginas relacionadas; para que todo esto ocurra la frase ingresada debe ser enviada a la computadora del servidor y almacenada en una variable que representa un espacio de la memoria de esa computadora, para que el programa de bsqueda la utilice. Cuando definimos el nombre de la variable donde se almacenarn los datos ingresados tenemos que fijarnos que ste coincida con el nombre de variable requerido por el programa que se ejecuta en el servidor.

Un ejemplo sera <input type="text" name="nombre-de-variable" />, esta etiqueta define un campo de texto, cuyos valores ingresados sern almacenados en la variable "nombre-devariable" del programa que se encuentra en la memoria de la computadora del servidor donde se realizar el procesamiento de los datos introducidos. Otro atributo muy importante, esta vez de la etiqueta <form> es action (accin), el cual define que accin realizar el formulario una vez enviados los datos ingresados. Por lo general la accin ms utilizada es la de especificar la direccin del programa ubicado en el servidor que procesar los datos ingresados. Si la etiqueta <form> no tiene un atributo actioncon un valor, el formulario no realizar ninguna accin; ya que debemos recordar que con HTML solamente se disea la parte estructural del formulario y el programa de procesamiento lgico server-side (ubicado en el servidor) se desarrolla en otro lenguaje como PHP o ASP. As que en action se pone la direccin del programa de procesamiento. Un ejemplo sera <form action="www.ejemplo.com/buscador.php">, el cual al enviar los datos ingresados ejecuta el programa ubicado en "" para que stos sean procesados. Hasta ahora vimos que hay que especificar en <form>, mediante el uso del atributo action, la direccin donde se encuentra el programa de procesamiento de datos y mediante el uso de name en las etiquetas <input> del formulario, los nombres de las variables donde se almacenarn los datos. Pero falta especificar el atributo que define la forma o mtodo de envo de los datos. El atributo que define la manera de enviar los datos se llama method (mtodo). Hay dos maneras de enviar los datos desde la computadora cliente (la del usuario) a la computadora del servidor: uno es el mtodo GET y el otro el mtodo POST. Para entender plenamente la diferencia entre GET y POST hay que saber ms de programacin Web, sin embargo por ahora para los fines requeridos basta con conocer algunos aspectos de estos dos mtodos. Con el mtodo de envo GET los datos ingresados son aadidos a la direccin URL del programa de procesamiento. Supongamos que tenemos un buscador cuyo programa de procesamiento se encuentra en la direccinwww.ejemplo.com/buscador.php (direccin que debemos especificar en el atributo action as: <form action="www.ejemplo.com/buscador.php">); la variable que almacena los datos del campo de texto se llama "palabra-de-busqueda" (que debe ser definida as <input type="text" name="palabra-de-busqueda" />); y finalmente el mtodo de envo de datos es GET, la etiqueta <form> quedara as: <form action="www.ejemplo.com/buscador.php" method="GET">. Si por ejemplo queremos buscar la palabra "tutoriales", esta sera enviada a la variable "palabra-de-busqueda" del programa de procesamiento a travs de la direccin URL de la siguiente manera: palabra-debusqueda=tutoriales; por lo tanto eso sera lo que veramos en la barra de direcciones del explorador Web. Mediante GET la informacin enviada se encuentra a la vista ya que se ve en la barra de direcciones; tambin la cantidad de datos incluidos es limitada. Nunca hay que usar el mtodo GET para enviar datos que no se quiere que sean vistos, por ejemplo los datos de un formulario de inscripcin el cual incluye datos personales o un nombre de clave. Para enviar muchos datos, de manera ms segura es conveniente utilizar el mtodo de envo POST; ya que no presenta lmites en la cantidad de informacin que se puede enviar y estos viajan ocultos en un paquete de informacin el cual no queda aadido a la direccin del programa de procesamiento.

El mtodo de envo GET puede llegar a ser ms conveniente para casos en los que no hay que ocultar la informacin enviada, como un motor de bsqueda; mientras que el mtodo POST es ms conveniente para casos como formularios de contacto o formularios de inscripcin. Veamos un ejemplo (Atencin: la direccin que aparece en el atributo action no es real, por lo tanto debe ser reemplazada por una real; tambin hay que tener en cuenta que si no se tiene un programa de procesamiento en un servidor, el formulario no realizar ninguna accin y solamente tendr su parte estructural o esttica). <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Nombre<br /><input type="text" name="nombre" /></p> <p>Telfono<br /><input type="text" name="telefono" /></p> <p>Email<br /><input type="text" name="email" /></p> <p>Direccin<br /><input type="text" name="direccion" /></p> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html> Otro atributo de <input> es value, mediante el cual se agrega un valor a la variable indicada en el atributo namedirectamente desde el cdigo fuente HTML de la pgina que estamos diseando. Por ejemplo si se le agrega un atributovalue a un campo de texto, el valor especificado en el mismo aparecer por omisin en el campo de texto cada vez que se descargue la pgina con el formulario; obviamente que los usuarios podrn reemplazar este valor predeterminado con tan slo tocar dentro del campo de texto y borrarlo suplantndolo con otro texto de su preferencia. Entre los distintos tipos de elementos de ingreso de datos tambin estn las casillas de seleccin, las cuales se utilizan para seleccionar una o varias opciones de un grupo. Por ejemplo se puede elegir en un grupo de gneros de pelculas cuales son los gneros favoritos, o entre un grupo de marcas de autos, las marcas favoritas. Para agregar una casilla de seleccin hay que poner en el atributo type el valor "checkbox". Una cosa que hay que tener en cuenta es que al definir un grupo de casillas de seleccin deben especificarse los valores distintos en el atributo value de cada casilla, estos valores sern agregados en la variable de la casilla. Son necesarios ya que al seleccionar una casilla el usuario, el valor de esa casilla es enviado a la variable que utiliza el programa que procesa los datos en el servidor. Otra cosa que hay que tener en cuenta es que el nombre de la variable de un grupo de casillas de seleccin debe ser el mismo para que los valores de las distintas casillas sean agregados a la misma variable; por ejemplo si se tienen cinco casillas en un grupo en el que hay que elegir marcas de autos favoritas, los valores de las casillas deben ser enviados a una variable de

nombre "marcas" donde sern agregados para que el programa ubicado en el servidor los procese. Veamos un ejemplo: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Nombre<br /><input type="text" name="nombre" /></p> <p>Telfono<br /><input type="text" name="telefono" /></p> <p>Direccin<br /><input type="text" name="direccion" /></p> <p>Email<br /><input type="text" name="email" value="escribe tu email" /></p> <p><u>Gneros de pelcula favoritos</u><br /> <input type="checkbox" name="peliculas" value="Accion" />Accin<br /> <input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficcin<br /> <input type="checkbox" name="peliculas" value="Comedia" />Comedia<br /> <input type="checkbox" name="peliculas" value="Intriga" />Intriga<br /> <input type="checkbox" name="peliculas" value="Terror" />Terror<br /></p> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html>

Otro elemento de formulario son los botones de opcin; a diferencia de las casillas de seleccin en las que se pueden elegir una o ms opciones en estos ltimos solamente se puede seleccionar una opcin del grupo, por eso mismo tambin se los conoce como botones de seleccin excluyente, ya que al tocar una opcin se deselecciona la que ya estaba elegida antes. El valor que se debe especificar en el atributo type de la etiqueta <input> es "radio". Cuando se arma un grupo de botones de opcin excluyente, cada uno de los elementos del mismo debe tener el mismo valor en el atributo de variable name; para que de esta manera se consideren todos partes del mismo grupo y de esta manera al seleccionar una nueva opcin se deseleccione cualquier otra del grupo con el mismo nombre de variable. Veamos un ejemplo: <html> <head> <title>Ejemplo de formulario</title> </head>

<body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Nombre<br /><input type="text" name="nombre" /></p> <p>Telfono<br /><input type="text" name="telefono" /></p> <p>Email<br /><input type="text" name="email" /></p> <p>Direccin<br /><input type="text" name="direccion" /></p> <p><u>Nivel de estudios alcanzado</u><br /> <input type="radio" name="estudios" value="Primario" />Primario<br /> <input type="radio" name="estudios" value="Secundario" />Secundario<br /> <input type="radio" name="estudios" value="Terciario" />Terciario<br /> <input type="radio" name="estudios" value="Universitario" />Universitario<br /> <input type="radio" name="estudios" value="Postgrado" />Postgrado<br /></p> <p><u>Gneros de pelcula favoritos</u><br /> <input type="checkbox" name="peliculas" value="Accion" />Accin<br /> <input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficcin<br /> <input type="checkbox" name="peliculas" value="Comedia" />Comedia<br /> <input type="checkbox" name="peliculas" value="Intriga" />Intriga<br /> <input type="checkbox" name="peliculas" value="Terror" />Terror<br /></p> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html>

Como se ha visto en los ejemplos anteriores los botones de envo de datos se definen poniendo el valor "submit" (enviar o presentar) en el atributo type; y que el valor especificado en el atributo value es el rtulo que aparece en el botn. Por otro lado, tambin vimos en los ejemplos anteriores que para definir un botn de restablecer (que al presionarse devuelve todos los campos de texto y casilleros a sus estados originales) hay que poner el valor "reset" (restablecer) en el atributo type; mientras que el valor especificado en el atributo value ser el rtulo que aparecer en el botn. BOTON DE IMAGEN Los botones de envo de datos que se definen con el valor "submit" tienen un diseo preestablecido por HTML, en caso de necesitar algn diseo ms personalizado de botn existe la posibilidad de utilizar una imagen con funcionalidad de botn de envo de datos de formulario. Esto se logra agregando en el atributo type de <input>el valor "image" (imagen); y el atributo src (diminutivo de "source", que en ingls significa fuente), donde se debe especificar la direccin de la imagen que se utilizar como botn.

Otros dos atributos que se pueden utilizar al definir un botn de imagen son width (ancho) y height (alto), los cuales funcionan de la misma manera que en la etiqueta <img>, indicando el ancho y el alto en pixeles o porcentaje.

Al igual que en <img>, cuando definimos un botn de imagen podemos utilizar en <input> el atributo alt, en el que se puede especificar un texto alternativo el cual aparece en casos de que la imagen no pudiera ser cargada. BOTONES CON DISTINTAS FUNCIONALIDADES Tambin se pueden definir botones que no tienen funcionalidad de envo de datos ingresados en un formulario y que se suelen utilizar para activar alguna accin programada en un lenguaje de programacin Web como Javascript, el cual sirve para darle dinamismo a las pginas Web (efectos especiales, animaciones, etc). Por ejemplo se puede definir un botn con el cual se puede cambiar el color de fondo de una pgina, o se puede realizar algn efecto especial, etc). Este tipo de botn no tiene mucha utilidad en formularios. Para definir un botn as hay que utilizar el atributo de <input>button (botn). Como se mencion antes por lo general se lo debe utilizar en combinacin de otro lenguaje de programacin Web como Javascript, el cual ahora no veremos en este tutorial pero s en uno prximo ms avanzado. CAMPOS DE ENVIO DE ARCHIVOS En muchos sitios Web existe la posibilidad de subir o enviar archivos; por ejemplo cuando se quiere adjuntar archivos en un mail, o cuando se sube una imagen o un video se utilizan campos de envo de archivos, los cuales incluyen un botn que al presionarse nos da la posibilidad de elegir un archivo de nuestro disco rgido. Para definir un campo de envo de archivos se debe poner el valor "file" en el atributo type de la etiqueta <input>. CAMPOS DE TEXTO CON CARACTERES OCULTOS Un tipo de campo de texto que se suele utilizar por lo general en formularios de inscripcin o cuando se deben ingresar datos personales o secretos como una clave son los campos de caracteres ocultos, en los cuales al ingresar un texto se muestran puntos o asteriscos que ocultan la informacin introducida. Para definir un campo de texto con caracteres ocultos se debe poner el valor "password" (clave) en el atributo type de la etiqueta <input>. ENVIO DE INFORMACION OCULTA A veces para que el programa de procesamiento ubicado en el servidor funcione correctamente se necesita enviar ciertos datos ocultos, los cuales no son ingresados por el usuario sino que los enva la misma pgina Web automticamente cada vez que se toca el botn de envo de datos. Por ejemplo en un formulario de contacto los datos ingresados por los usuarios son enviados a un programa de procesamiento ubicado en el servidor, el cual arma un mail con toda la informacin ingresada en los elementos del formulario y lo enva a una direccin de correo electrnico que por lo general es la del Webmaster o administrador del sitio Web. Para que esto ocurra al disear la pgina de formulario debemos especificar la direccin a la que siempre sern enviados los mail que crea el programa de procesamiento ubicado en el servidor.

Para definir datos que sern enviados automticamente de manera oculta cada vez que se presione el botn de envo de datos, se debe pone el valor "hidden" (oculto) en el atributo type de la etiqueta <input>; mientras que como en otros casos la variable y el valor a enviar se definen con los atributos name y value respectivamente. Veamos un ejemplo (Atencin: los valores introducidos en la direccin de la imagen del botn de envo, el valor de la direccin de email donde se envan los datos y la del programa de procesamiento deben ser reemplazados con valores reales. En el caso del programa de procesamiento, se requiere tener uno en un servidor para que los datos puedan ser procesados; sin embargo si no se tiene uno no importa para los fines de este tutorial, ya que estamos aprendiendo diseo de pginas Web con HTML, y para los fines visuales de un formulario no se requiere un programa de procesamiento en un servidor el cual solamente cumple funciones funcionales.) <html> <head> <title>Ejemplo de formulario</title> </head> <body> <input type="button" value="Puedes presionarme igual no hago nada" /> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <input type="hidden" name="mail" value="mimail@ejemplo.com" /> <p>Nombre<br /><input type="text" name="nombre" /></p> <p>Telfono<br /><input type="text" name="telefono" /></p> <p>Email<br /><input type="text" name="email" /></p> <p>Direccin<br /><input type="text" name="direccion" /></p> <p>Nombre de usuario<br /><input type="text" name="usuario" /></p> <p>Clave<br /><input type="password" name="clavesecreta" /></p> <p>Subir imagen de usuario<br /><input type="file" name="foto-de-usuario" /></p> <p><u>Nivel de estudios alcanzado</u><br /> <input type="radio" name="estudios" value="Primario" />Primario<br /> <input type="radio" name="estudios" value="Secundario" />Secundario<br /> <input type="radio" name="estudios" value="Terciario" />Terciario<br /> <input type="radio" name="estudios" value="Universitario" />Universitario<br /> <input type="radio" name="estudios" value="Postgrado" />Postgrado<br /></p> <p><u>Gneros de pelcula favoritos</u><br /> <input type="checkbox" name="peliculas" value="Accion" />Accin<br /> <input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficcin<br /> <input type="checkbox" name="peliculas" value="Comedia" />Comedia<br /> <input type="checkbox" name="peliculas" value="Intriga" />Intriga<br /> <input type="checkbox" name="peliculas" value="Terror" />Terror<br /></p> <p><input type="image" src="imagendeboton.jpg" alt="Enviar" width="50" height="40"

/> </p> </form> </body> </html>

Hay otros cinco atributos de <input> que funcionan nicamente con ciertos tipos de elementos. El atributo checked funciona nicamente con las casillas de seleccin y los botones de opcin, tipos "checkbox" y "radio" respectivamente; el mismo sirve para que al cargarse la pgina Web con el formulario, ya haya un botn de opcin tildado o seleccionado o una o varias casillas de seleccin tildadas. El valor que debe agregarse tambin es "checked". El atributo disabled (deshabilitado) sirve para deshabilitar elementos del formulario; este atributo se puede utilizar en todos los elementos <input> y el valor que hay que poner en el atributo disabled tambin es "disabled". El atributo maxlenght (longitud mxima) se utiliza nicamente con los campos de texto (tipo "text") y sirve para indicar la mxima cantidad de caracteres que se pueden ingresar en el mismo. El valor que hay que poner en maxlength es un nmero que indica la cantidad mxima de caracteres que se pueden ingresar en el campo de texto. Otro atributo que se utiliza con los campos de texto es size (tamao), el cual sirve para indicar el ancho del campo de texto en cantidad de caracteres. El valor que hay que poner en el atributo size es un nmero que indica la cantidad de caracteres de ancho que tendr el campo de texto; por ejemplo un valor de "40" indica 40 caracteres de ancho. El atributo size tambin sirve para definir el ancho de los campos de envo de archivos con valor "file" en el atributo type. No hay que confundir maxlength con size, el primero indica la cantidad mxima de caracteres que se pueden escribir dentro del campo de texto, mientras que el segundo indica el ancho en caracteres que tendr el campo en s. Otro atributo que tambin funciona con los campos de texto, es readonly (slo lectura), el cual se utiliza para indicar que un campo de texto es de slo lectura; esto significa que si por ejemplo ya contiene un texto predeterminado al cargar la pgina (el cual se define en el atributo value como ya hemos visto) y adems tiene un atributo readonly con valor "readonly"; no se podr escribir nada en el mismo, solamente se podr leer el texto predeterminado de value. Veamos un ejemplo con los atributos anteriores: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <input type="button" value="No puedes presionarme estoy deshabilitado" disabled="disabled" /> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">

<input type="hidden" name="mail" value="mimail@ejemplo.com" /> <p>Nombre<br /><input type="text" name="nombre" size="40" /></p> <p>Email<br /><input type="text" name="email" size="40" /></p> <p>Nombre de usuario<br /><input type="text" name="usuario" value="Nombre de usuario" readonly="readonly" size="40" /></p> <p>Clave<br /><input type="password" name="clavesecreta" size="40" maxlength="5" /></p> <p>Subir imagen de usuario<br /><input type="file" name="foto-deusuario" size="40" /></p> <p><u>Nivel de estudios alcanzado</u><br /> <input type="radio" name="estudios" value="Primario" />Primario<br /> <input type="radio" name="estudios" value="Secundario" checked="checked" />Secundario<br /> <input type="radio" name="estudios" value="Terciario" />Terciario<br /> <input type="radio" name="estudios" value="Universitario" />Universitario<br /> <input type="radio" name="estudios" value="Postgrado" />Postgrado<br /></p> <p><u>Gneros de pelcula favoritos</u><br /> <input type="checkbox" name="peliculas" value="Accion" />Accin<br /> <input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficcin<br /> <input type="checkbox" name="peliculas" value="Comedia" />Comedia<br /> <input type="checkbox" name="peliculas" value="Intriga" checked="checked" />Intriga<br /> <input type="checkbox" name="peliculas" value="Terror" checked="checked" />Terror<br /></p> <p><input type="image" src="imagendeboton.jpg" alt="Enviar" width="50" height="40" /> </p> </form> </body> </html>

LISTAS Y MENUS Hasta ahora hemos visto los elementos de formulario que se definen con la etiqueta <input>, sin embargo tambin existen otros elementos de formulario que se definen con otras etiquetas; stos son los mens y listas de opciones, as como las reas de texto que permiten ingresar comentarios ms largos de varios renglones o prrafos. Para agregar un men o lista de opciones se debe utilizar la etiqueta <select> para definir el men o la lista y la etiqueta<option> para definir cada una de las opciones, que deben colocarse entre las etiquetas <select> de apertura y cierre.

Adems, para definir el valor de cada opcin que ser enviado al programa de procesamiento ubicado en el servidor del sitio Web, hay que utilizar el atributo valueen cada etiqueta <option> de la lista o men. El texto que se debe escribir entre la etiqueta <option> de apertura y cierre tiene funciones visuales para que los usuarios puedan leer cada opcin del men o lista que se disea, sin embargo el verdadero valor enviado al servidor es el definido en el atributo value. El nombre de la variable que se utiliza en el programa de procesamiento ubicado en el servidor y donde se almacenarn los valores especificados en cada atributo value de las etiquetas <option> debe definirse en el atributo name de la etiqueta <select>. En aquella variable sern aadidos el o los valores seleccionados por los usuarios. Veamos un ejemplo simple: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Seleccione una marca de autos</p> <select name="marcas"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <p><input type="submit" value="Enviar" /> </p> </form> </body> </html>

En el ejemplo anterior agregamos un men desplegable; para definir una lista de opciones hay que agregar el atributosize (tamao) en la etiqueta <select> donde se debe especificar la cantidad de renglones que sern visualizados entre la cantidad total de opciones que la lista contiene; por ejemplo si la lista contiene 20 opciones y se especifica un tamao de 5 renglones, para ver todas las opciones la lista tendr una barra de desplazamiento vertical ubicada a la derecha. Para definir una lista de opciones en la que se pueden seleccionar ms de una opcin se debe utilizar el atributo multipleen la etiqueta <select> y especificar en el mismo el valor "multiple". Veamos un ejemplo que contiene un men y una lista de opciones: <html> <head> <title>Ejemplo de formulario</title> </head>

<body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Seleccione una marca de autos</p> <select name="marcas-menu"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <br /><br /> <select size="4" name="marcas-lista"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <br /><br /> <select name="marcas-lista-multiple" multiple="multiple" size="5"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <p><input type="submit" value="Enviar" /> </p> </form> </body> </html>

Se puede tener una opcin preseleccionada de men al cargar la pgina Web con el formulario o variar opciones preseleccionadas en el caso de listas que permiten elegir selecciones mltiples. Esto se logra mediante el uso del atributo selected (seleccionado) en la etiqueta <option> y en el cual debe especificarse el valor "selected". Otra posibilidad es la de tener opciones de men o lista deshabilitadas al cargar la pgina Web; tambin se pueden tener mens o listas deshabilitadas por completo; esto se logra mediante el atributo disabled (deshabilitado), en el cual se debe especificar el valor "disabled". El mismo puede ser utilizado tanto en la etiqueta <select> como en <option>. Veamos un ejemplo que utilizan estos atributos: <html> <head> <title>Ejemplo de formulario</title> </head>

<body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Seleccione una marca de autos</p> <select name="marcas-menu"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick" disabled="disabled">Buick</option> <option value="Cadillac" selected="selected">Cadillac</option> </select> <br /><br /> <select size="4" name="marcas-lista"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick"disabled="disabled">Buick</option> <option value="Cadillac" selected="selected">Cadillac</option> </select> <br /><br /> <select name="marcas-lista-multiple" size="5" disabled="disabled"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html> Dentro de las listas o mens se pueden agregar ttulos para separar las opciones en grupos, la etiqueta que permite hacer eso es <optgroup>; cada grupo de opciones debe estar encerrado entre la etiqueta <optgroup> de apertura y de cierre. El ttulo que representa cada grupo de la lista o men se define dentro del atributo label de esta etiqueta. Veamos un ejemplo: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Seleccione una marca de autos</p> <select name="marcas-menu">

<optgroup label="Marcas de General Motors"> <option value="Buick">Buick</option> <option value="Chevrolet">Chevrolet</option> </optgroup> <optgroup label="Otra marca"> <option value="Ford">Ford</option> </optgroup> </select> <br /><br /> <select name="marcas-lista" multiple="multiple" size="5"> <optgroup label="Marcas de General Motors"> <option value="Buick">Buick</option> <option value="Chevrolet">Chevrolet</option> </optgroup> <optgroup label="Otra marca"> <option value="Ford">Ford</option> </optgroup> </select> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html>

Hay una etiqueta que no agrega ningn cambio visual, pero que facilita el uso de formularios con el mouse al seleccionar un elemento de formulario. Se trata de la etiqueta <label> la cual le confiere funcionalidad de seleccin a un texto o rtulo. Esto significa que si por ejemplo tenemos un texto junto a un campo de texto o a una casilla de seleccin o botn de opcin, si aquel texto se encuentra entre etiquetas <label> de apertura y cierre y se lo relaciona con un elemento de formulario; al tocarse con el botn del mouse el texto, el elemento de formulario relacionado con el mismo se activar; en el caso de un campo de texto el cursor del mismo se activa, en el caso de una casilla sta se selecciona. Para que un texto se relacione con un elemento de formulario, el elemento debe tener un nombre de identificacin el cual se define mediante el atributo id y la etiqueta <label> debe tener un atributo for (para) en el cual se debe colocar el mismo nombre especificado en el atributo id del elemento de formulario, as al tocar el texto se activar dicho elemento. Veamos un ejemplo: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p><label for="nombre">Nombre</label><br /><input type="text" name="nombre" id="nombre" /></p>

<p><label for="tel">Telfono</label><br /><input type="text" name="telefono" id="tel" /></p> <p><label for="mail">Email</label><br /><input type="text" name="email" id="mail" /></p> <p><label for="direc">Direccin</label><br /><input type="text" name="direccion" id="direc" /></p> <p><u>Nivel de estudios alcanzado</u><br /> <input type="radio" name="estudios" value="Primario" id="prima" /><label for="prima">Primario</label><br /> <input type="radio" name="estudios" value="Secundario" id="secun" /><label for="secun">Secundario</label><br /> <input type="radio" name="estudios" value="Terciario" id="terci" /><label for="terci">Terciario</label><br /> <input type="radio" name="estudios" value="Universitario" id="univ" /><label for="univ">Universitario</label><br /> <input type="radio" name="estudios" value="Postgrado" id="post" /><label for="post">Postgrado</label><br /></p> <p><u>Gneros de pelcula favoritos</u><br /> <input type="checkbox" name="peliculas" value="Accion" id="acci" /><label for="acci">Accin</label><br /> <input type="checkbox" name="peliculas" value="Ciencia Ficcion" id="cienc" /><label for="cienc">Ciencia Ficcin</label><br /> <input type="checkbox" name="peliculas" value="Comedia" id="come" /><label for="come">Comedia</label><br /> <input type="checkbox" name="peliculas" value="Intriga" id="intri" /><label for="intri">Intriga</label><br /> <input type="checkbox" name="peliculas" value="Terror" id="terr" /><label for="terr">Terror</label><br /></p> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html>

Hay otro elemento muy utilizado en formularios, el rea de texto, <textarea>; el cual sirve para realizar comentarios largos, temas de foros de discusin, escribir texto para formularios de contacto, etc. A diferencia de los campos de texto, las reas de texto permiten ingresar ms de un rengln formando prrafos. Tambin se pueden especificar las dimensiones de un rea de texto tanto en cantidad de renglones como en cantidad de caracteres visibles de ancho. A diferencia de la etiqueta <input>, la etiqueta <textarea> utiliza etiquetas de apertura y de cierre. Para definir las dimensiones de un rea de texto se utiliza el atributo cols (columnas) para el ancho en cantidad de caracteres y el atributo rows (filas o renglones) para el alto en cantidad de renglones. Al igual que en otros elementos de formulario el atributo name sirve para definir el nombre de

variable que utilizar el programa de procesamiento en el servidor y en el que se almacenar el texto introducido en el rea de texto. Tambin como se vio anteriormente con otros elementos, se pueden disear reas de texto deshabilitadas, con el atributo disabled (deshabilitado), donde se pone el valor "disabled" como sucede con <input>, <select> y <option>. A veces se requiere la utilizacin de reas de texto de slo lectura en las cuales se puede leer el texto ya escrito que aparece al cargar la pgina pero no se puede ingresar ninguno nuevo. Por ejemplo se los utiliza en formularios de inscripcin de sitios Web que incluyen una especie de contrato con normas o trminos de uso y polticas de privacidad. Para definir un rea de texto de slo lectura se debe utilizar el atributo readonly (slo lectura) con el valor "readonly". Veamos un ejemplo con reas de texto: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Comentario</p> <textarea cols="40" rows="10" name="comentario"></textarea> <br /><br /> <p>Comentario 1</p> <textarea cols="40" rows="10" name="comentario-1">Escribe un comentario</textarea> <br /><br /> <p>Area de texto deshabilitada</p> <textarea cols="40" rows="10" name="comentario-2" disabled="disabled"></textarea> <br /><br /> <p>Area de texto de solamente lectura</p> <textarea cols="40" rows="10" name="comentario-3" readonly="readonly">Esta es un area de texto de solamente lectura</textarea> <br /><br /> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </form> </body> </html> Como se ve, se puede agregar texto previamente ingresado en el cdigo fuente, el cual ser cargado en el rea de texto al abrir la pgina; el mismo debe ser escrito entre las etiquetas <textarea> de apertura y de cierre.

RECUADRO DE FORMULARIO Ya sabemos casi todo acerca del diseo de formularios en HTML; solamente nos falta conocer una etiqueta de carcter ms bien esttico; su funcin es simplemente la de agregar un

recuadro alrededor de un formulario. Se trata de la etiqueta <fieldset>, cuya etiqueta de apertura debe estar ubicada luego de la etiqueta <form> y antes de todos los elementos que forman parte del formulario, mientras que la etiqueta de cierre </fieldset> debe estar colocada inmediatamente antes de la etiqueta de cierre </form>. Adems, opcionalmente, se le puede agregar un ttulo al recuadro de formulario; para eso junto a la etiqueta <fieldset>se debe utilizar la etiqueta <legend> la cual debe ir ubicada inmediatamente despus de la etiqueta<fieldset> de apertura. Veamos un ejemplo: <html> <head> <title>Ejemplo de formulario</title> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <fieldset> <legend>Formulario de contacto</legend> <p><label for="nombre">Nombre</label><br /><input type="text" name="nombre" id="nombre" /></p> <p><label for="tel">Telfono</label><br /><input type="text" name="telefono" id="tel" /></p> <p><label for="mail">Email</label><br /><input type="text" name="email" id="mail" /></p> <p><label for="direc">Direccin</label><br /><input type="text" name="direccion" id="direc" /></p> <p><u>Nivel de estudios alcanzado</u><br /> <input type="radio" name="estudios" value="Primario" id="prima" /><label for="prima">Primario</label><br /> <input type="radio" name="estudios" value="Secundario" id="secun" /><label for="secun">Secundario</label><br /> <input type="radio" name="estudios" value="Terciario" id="terci" /><label for="terci">Terciario</label><br /> <input type="radio" name="estudios" value="Universitario" id="univ" /><label for="univ">Universitario</label><br /> <input type="radio" name="estudios" value="Postgrado" id="post" /><label for="post">Postgrado</label><br /></p> <p><u>Gneros de pelcula favoritos</u><br /> <input type="checkbox" name="peliculas" value="Accion" id="acci" /><label for="acci">Accin</label><br /> <input type="checkbox" name="peliculas" value="Ciencia Ficcion" id="cienc" /><label for="cienc">Ciencia Ficcin</label><br /> <input type="checkbox" name="peliculas" value="Comedia" id="come" /><label for="come">Comedia</label><br /> <input type="checkbox" name="peliculas" value="Intriga" id="intri" /><label for="intri">Intriga</label><br /> <input type="checkbox" name="peliculas" value="Terror" id="terr" /><label for="terr">Terror</label><br /></p>

<p>Comentario</p> <textarea cols="40" rows="10" name="comentario"></textarea> <br /><br /> <p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p> </fieldset> </form> </body> </html>

Curso de HTML - Cuarta parte Mltiples hipervnculos en una imagen

En la primera parte del tutorial de HTML aprendimos a cmo agregar hipervnculos a imgenes, o en otras palabras como utilizar imgenes como hipervnculos, simplemente rodeando la etiqueta <img> con las etiquetas de hipervnculo de apertura y cierre. Por ejemplo: <a href="http://www.youbioit.com"><img src="nombredeimagen.jpg" alt="Imagen de ejemplo" /></a> Pero HTML nos da la posibilidad de agregar mltiples hipervnculos en una sola imagen; simplemente definiendo reas de la imagen para distintos links. Supongamos que tenemos una imagen con cuatro rectngulos, y queremos que cada rectngulo de la imagen al ser presionado con el botn izquierdo del mouse nos enve a una pgina distinta; lo nico que deberamos hacer para que esto ocurra es agregar reas para cada rectngulo indicando las coordenadas superior izquierda e inferior derecha de cada uno e indicar la direccin URL a la que nor dirigir dicho hipervnculo al ser presionado. Las etiquetas que nos permiten definir reas de hipervnculos para imgenes son <map> y <area>. La etiqueta <map>se utiliza para indicar cul es la imagen que ser utilizada para hipervnculos mltiples, mientras que <area> sirve para definir cada rea y agregarle un hipervnculo a cada una. Para utilizar una imagen para hipervnculos mltiples hay que agregar en la imagen a usar el atributo usemap, dentro del cual agregamos cualquier nombre que querramos, precedido por un signo numeral; de la siguiente forma: <img src="nombredeimagen.jpg" alt="Imagen de ejemplo" usemap="#hipervinculosmultiples" /> Luego colocamos debajo de la imagen la etiqueta <map>, con un atributo name (nombre), donde agregamos el mismo nombre que declaramos en el atributo usemap de la imagen. De esta manera las reas a definir quedarn vinculadas a la imagen en cuestin; siguiendo el ejemplo anterior sera: <map name="hipervinculosmultiples"> Entre las etiquetas de apertura y cierre <map> se deben colocar las etiquetas <area> que representan cada una de las reas a utilizar como hipervnculos.

Las reas pueden tener distintas formas; rectangulares, circulares y en forma de polgono. Para indicar la forma que utilizaremos en un rea debemos indicar en el atributo shape (forma) de la etiqueta <area>, el tipo de forma que queremos que tenga. Los posibles valores de shape son "rect" (rectangular), "circle" (circular) o "poly" (poligonal). Una vez elegida la forma, debemos indicar las coordenadas de los vrtices de cada rea; as en el caso de la forma rectangular debemos poner los valores de las coordenadas superior izquierda e inferior derecha del rectngulo que define el rea. En el caso del rea circular se deben indicar las coordenadas del centro del crculo que definir el rea y la longitud del radio del mismo. Finalmente para el rea poligonal se deben agregar las coordenadas de cada uno de los vrtices que definen el polgono; si por ejemplo se tiene un pentgono se deben agregar las coordenadas de cada uno de los cinco vrtices. Los valores de las coordenadas se deben agregar en el atributo coords de la etiqueta <area> y se miden en pixeles, as por ejemplo si tenemos una imagen de 500x500 pixeles y en la misma hay un rectngulo cuyo vrtice superior izquierdo se encuentra en el pixel con coordenadas (x,y) 50,50 y el vrtice inferior derecho se encuentra en el pixel con coordenadas 200,200; en coords debemos agregar los valores 50,50,200,200. Si queremos definir un rea circular debemos indicar las coordenadas (x,y) del centro del crculo y la longitud del radio en pixeles. Entonces si por ejemplo tenemos un crculo con centro en el pixel con coordenadas 100,300 y el mismo tiene un radio de 50 pixeles; en coords debemos agregar los valores 100,300,50,50. Para definir el hipervnculo de cada rea de la imagen hay que agregar el atributo href en cada etiqueta <area>, con la URL a la que nos enviar el hipervnculo. Tambin al igual que en la etiqueta <a> podemos utilizar el atributo target en <area> para hacer que los hipervnculos se abran en pestaas nuevas. Tambin se puede incluir un atributo alt en cada etiqueta <area> con un nombre cualquiera, el cual aparecer en un rtulo o leyenda cada vez que posemos el puntero sobre dicha rea. Es bueno aclarar que esto no funciona en todos los exploradores, ya que en algunos no dar resultados; por ejemplo uno de ellos es Firefox; sin embargo en Internet Explorer s funciona. Veamos un ejemplo. (Para probar dicho cdigo simplemente debemos guardar en la carpeta que utilizamos para almacenar las pginas creadas durante el tutorial la siguiente imagen). En el ejemplo la imagen est en la misma carpeta del archivo .html.

A continuacin sigue el cdigo: <html> <head> <title>Ejemplo de imagen con hipervinculos multiples</title> </head> <body> <img src="areas.jpg" alt="Imagen de ejemplo" usemap="#multi" /> <map name="multi"> <area shape="rect" coords="50,50,200,200" alt="Rectangulo" target="_blank" href="http://www.youbioit.com" /> <area shape="circle" coords="100,300,50,50" alt="Circulo" target="_blank" href="http://www.youtube.com" /> </map> </body> </html>

Caracteres especiales HTML

Cuando escribimos algn texto en HTML existen ciertos caracteres especiales que por distintos motivos no pueden ser representados simplemente como una letra o nmero comn. Por ejemplo si queremos representar un smbolo > no podemos agregarlo simplemente en el texto y listo; ya que eso causara un conflicto con la etiqueta precedente; rompiendo la estructura del cdigo fuente y derivando en resultados indeseados en el diseo de la pgina Web en la que

estamos trabajando. Veamos un ejemplo de lo que no hay que hacer: <p>La etiqueta <img> sirve para agregar imgenes en la pgina HTML. </p> El ejemplo anterior dar resultados indeseados, ya que nosotros queremos que aparezca la etiqueta <img> en el texto, pero el explorador se confunde creyendo que queremos mostrar una imagen; dando como resultado un cuadrado vaco de imagen no cargada. Para solucionar esto se deben utilizar cdigos de escape, tambin conocidos como secuencias de escape, los cuales nos permiten agregar smbolos especiales mediante el uso de cdigos especiales. Cada smbolo tiene su propio cdigo; el cual puede ser el cdigo ASCII que le corresponde o un cdigo especial de HTML; cualquiera de los dos da el mismo resultado esperado. Los cdigos especiales HTML deben ir siempre precedidos por un smbolo & y sucedidos por un ; . As, siguiendo con el ejemplo anterior: Para representar el smbolo < debemos escribir: &lt; Para representar el smbolo > debemos escribir: &gt; Si en lugar de utilizar los cdigos HTML se prefieren los cdigos ASCII; podemos hacerlo agregando el nmero correspondiente a cada smbolo. El mismo debe estar precedido por la combinacin de smbolos &# y sucedido por ;(punto y coma). Volviendo al ejemplo anterior; para obtener los resultados esperados del cdigo fuente en el que queramos representar<img> debemos poner: <p>La etiqueta &lt;img&gt; sirve para agregar imgenes en la pgina HTML.</p> Las secuencias o cdigos de escape tambin son muy importantes para asegurar la compatibilidad del texto en todas las computadoras. Cada idioma tiene su juego de caracteres y cdigos; as mientras que el ingls no tiene la letra o no usa acentos, el idioma castellano s. Por lo tanto si una computadora tiene su sistema operativo en un idioma distinto al que est escrito la pgina; puede que algunos smbolos, caracteres o signos de acentuacin u ortografa en general no se visualicen correctamente o sean reemplazados por otros signos que en aquel idioma si existan, perdiendo el texto as su claridad. Por eso cada vez que se escriba una palabra con acento, o tilde (como la ); estas letras no deben ser escritas directamente como van a ser representadas pero con el cdigo o secuencia de escape que les corresponde. Por ejemplo. Para representar : &aacute; Para representar : &eacute; Para representar : &iacute; Para representar : &oacute; Para representar : &uacute; Para representar : &Aacute; Para representar : &eacute; Para representar : &Iacute; Para representar : &Oacute; Para representar : &Uacute; Para representar : &ntile; Para representar : &Ntilde; Para representar : &auml;

Para representar : &euml; Para representar : &iuml; Para representar : &ouml; Para representar : &uuml; Para representar : &Auml; Para representar : &Euml; Para representar : &Iuml; Para representar : &Ouml; Para representar : &Uuml;

Al final del tutorial de HTML, debajo de todo, hay una lista con muchos ms cdigos o secuencias de escape para smbolos.

Marcos HTML
Un elemento de diseo Web que estaba muy de moda en los primeros aos del siglo 21 eran los marcos de pgina (frames en ingls); pero a partir de mediados de la dcada comenzaron a caer en desuso. Con los marcos se puede dividir una pgina Web en varias subpginas separadas por marcos. Por ejemplo se pueden tener dos columnas, cada una mostrando una pgina; o se puede dividir la pgina en dos franjas horizontales cada una mostrando el contenido de un documento .html o .htm distinto. Cuando estaban de moda, por lo general se solan dividir las pginas en cuatro marcos; uno superior horizontal ocupando todo el ancho de la pantalla donde se sola colocar un logo o ttulo; uno vertical en la izquierda para la botonera; un marco central que mostraba una subpgina con el contenido del documento y un marco horizontal inferior. Uno de los inconvenientes de los marcos, es que se debe crear una pgina para cada marco ms la pgina que contiene a los marcos. As por ejemplo si se tiene una pgina con 4 marcos se deben crear 5 pginas Web, y unirlas en una principal. El conjunto de etiquetas que se utilizan para armar una pgina con marcos son <frameset> (conjunto de marcos) y<frame> (marco). Supongamos que queremos dividir una pgina en 4 marcos horizontales. Lo primero que debemos hacer es crear las cuatro pginas que ocuparn los marcos. Luego tenemos que crear la quinta pgina que contendr los distintos marcos con las pginas. <html> <head> <title>Ejemplo de Marcos</title> </head> <frameset rows="25%, 25%, 25%, 25%"> <frame src="pagina1.html" /> <frame src="pagina2.html" /> <frame src="pagina3.html" /> <frame src="pagina4.html" /> </frameset> </html>

Como se puede ver en el cdigo fuente anterior, al crear una pgina con marcos no se utiliza <body>, ya que el contenido de la pgina est en el conjunto de marcos incluidos, por lo tanto en su lugar se utiliza la etiqueta <frameset>, entre cuyas etiquetas de apertura y cierre se colocan cada una de las etiquetas <frame> que representan los marcos con subpginas. En el atributo rows de <frameset> se define la cantidad de marcos horizontales que tendr la pgina, especificando el tamao de cada uno. Los valores pueden ser en pixeles o porcentaje del alto de la pgina. En los atributos src de cada<frame> se indican las ubicaciones de las pginas que ocuparn cada marco del conjunto. Los nombres de las pginas.html del ejemplo pueden ser reemplazados por los nombres de las pginas Web que querramos o incluso por URLs de pginas de otros sitios. Tambin se pueden crear pginas con marcos verticales, los cuales se dividen en columnas cuyas dimensiones se indican en el atributo cols. <html> <head> <title>Ejemplo de Marcos</title> </head> <frameset cols="20%, 20%, 10%, *"> <frame src="pagina1.html" /> <frame src="pagina2.html" /> <frame src="pagina3.html" /> <frame src="pagina4.html" /> </frameset> </html> En el ejemplo anterior dividimos la pgina en cuatro marcos verticales. Un detalle que llama la atencin es el asterisco *de la cuarta posicin del atributo cols de <frameset>. El asterisco se utiliza cuando no sabemos el tamao que resta en una pgina y representa "lo sobrante de la pgina". En el ejemplo anterior definimos una primera columna a la izquierda que ocupa el 20% del ancho de la pgina, otra del 20%, otra del 10% y finalmente a la derecha una que ocupa el espacio sobrante, que en este ejemplo equivale al 50% del ancho de la pgina. Por lo general el asterisco se utiliza cuando trabajamos en pixeles, ya que podemos definir tamaos especficos para algunas columnas pero desconocemos el espacio sobrante que habr en las pantallas de los distintos usuarios. Supongamos que creamos una pgina con dos columnas, una izquierda para la botonera con 400 pixeles de ancho y una segunda que ocupa el espacio sobrante, el cual variar de pantalla en pantalla segn la resolucin horizontal de cada una. El asterisco se puede utilizar para cualquiera de las columnas. Como se puede ver en los ejemplos anteriores, la posicin de cada <frame> coincide con la posicin de cada valor de los atributos cols y rows. As el primer <frame> tendr el alto o el ancho indicado en el primer valor de rows o colsrespectivamente; y as ocurre con cada uno de los marcos restantes. Por ejemplo una modificacin en el cuarto valor decols, modificar al cuarto <frame>. Si se quiere quitar el borde de los marcos hay que agregar el atributo frameborder en cada uno de los <frame>, indicando un valor "0" que representa "sin borde". Si se quieren bordes en los marcos se debe pone un valor de "1" en cada <frame>. El valor por omisin de frameborder es "1"; ya que por default los marcos tienen bordes, entonces si no se indica nada, tendrn bordes.

Por omisin los marcos pueden ser redimensionados con el mouse, sin embargo si no se quiere este efecto y se buscan marcos estticos se debe agregar en la etiqueta <frame> que queremos mantener en su tamao original, el atributo noresize (no redimensionar) cuyo valor tambin debe ser "noresize". Este atributo puede llegar a ser til si se quiere hacer un marco conteniendo una botonera de dimensiones fijas o un marco que contiene el logo del sitio; para evitar modificar el aspecto visual del mismo. Otro atributo de <frame> que puede llegar a ser til en el diseo de una pgina con marcos, es scrolling, mediante el cual se puede especificar si se quiere incluir una barra de scroll o deslizamiento en dicho marco. Los valores posibles de este atributo son "yes" (que siempre haya barra de deslizamiento), "no" (que nunca haya barra de deslizamiento) y "auto" (que solamente aparezca la barra de deslizamiento si es necesario); el ltimo es el valor por omisin, que equivale a no usar el atributo. A cada marco tambin se le pueden agregar mrgenes horizontales y verticales; lo cual se logra con los atributos de<frame> marginheight (alto de margen) y marginwidth (ancho de margen). Los valores de los mismos deben ser especificados en pixeles. Finalmente el atributo de <frame> name (nombre), sirve para denominar a cada marco con un nombre que permite que cada uno pueda ser identificado por otros elementos HTML. Dicho atributo es principalmente til si se quiere disear una pgina con marco de botonera y marco de contenido. As cada vez que se pulsa un hipervnculo de la botonera del marco de la izquierda, la pgina a la cual dicho hipervnculo nos enva, se abrir en el marco de contenido principal. Para lograr eso, cada etiqueta de hipervnculo <a> ubicada en la pgina que aparecer en el marco de la izquierda, deber contener el atributo target (objetivo), del que ya hemos hablado en la primera parte del tutorial cuando aprendimos a crear hipervnculos. En target debemos colocar como valor el nombre del marco en el cual queremos que las pginas se abran. A continuacin veremos un ejemplo, de una pgina de marcos dividida en dos columnas, una izquierda para la botonera de tres hipervnculos y una principal a la derecha para el contenido. Para realizarla se deber crear una pgina de botonera, tres de contenido y una que contenga el conjunto de marcos (frameset). Primero se mostrar el cdigo fuente de la pgina de la botonera, luego las tres pginas de contenido, y finalmente en el ltimo recuadro, el cdigo fuente de la pgina de marcos. En total tendremos cinco recuadros de cdigo fuente para el siguiente ejemplo de pgina con marcos. 1-Pgina de botonera (botonera.html): <html> <head> <title>Ejemplo de marcos</title> </head> <body> <p><a href="pagina1.html" target="marcoprincipal">BOTON 1</a></p> <p><a href="pagina2.html" target="marcoprincipal">BOTON 2</a></p> <p><a href="pagina3.html" target="marcoprincipal">BOTON 3</a></p> </body> </html> 2- Pgina de contenido 1 (pagina1.html):

<html> <head> <title>Ejemplo de marcos - Pag. 1</title> </head> <body> <p>Secci&oacute;n 1 de la p&aacute;gina de marcos</p> </body> </html>

3- Pgina de contenido 2 (pagina2.html): <html> <head> <title>Ejemplo de marcos - Pag. 2</title> </head> <body> <p>Secci&oacute;n 2 de la p&aacute;gina de marcos</p> </body> </html>

4- Pgina de contenido 3 (pagina3.html): <html> <head> <title>Ejemplo de marcos - Pag. 3</title> </head> <body> <p>Secci&oacute;n 3 de la p&aacute;gina de marcos</p> </body> </html> 5- Pgina del conjunto de marcos (marcos.html): <html> <head> <title>Ejemplo de Marcos</title> </head> <frameset cols="200, *"> <frame src="botonera.html" noresize="noresize" scrolling="no" frameborder="0" marginheight="10" marginwidth="10" /> <frame src="pagina1.html" noresize="noresize" scrolling="auto" frameborder="0" marginheight="10" marginwidth="10" name="marcoprincipal" /> </frameset>

</html> En el ejemplo anterior creamos tres pginas de contenido, una para la botonera con tres hipervnculos y finalmente una para el conjunto de marcos. En la pgina del conjunto de marcos (marcos.html); definimos en la etiqueta <frameset> dos columnas, una a la izquierda con 200 pixeles de ancho (para la pgina de botonera) y otra a la derecha (para las pginas de contenido) con un ancho que ocupa lo sobrante de la pantalla. En cada <frame> indicamos que no queremos bordes, que los marcos deben ser fijos y que cada uno debe tener un margen a los cuatro lados de 10 pixeles. En cuanto a la barra de deslizamiento se especifica que el marco de la izquierda no tendr barra, mientras que la de la derecha solamente si es necesario. En el segundo <frame> agregamos un atributo name para que dicho marco pueda ser identificado por los hipervnculos de la pgina de la botonera que tienen como marco objetivo (target) para abrir las pginas, el del contenido. As cada vez que se pulse uno de los botones, la pgina se abrir en el marco denominado "marcoprincipal". Tambin hay que aclarar que como en el atributo src del <frame> de contenido se indica la "pagina1.html", cada vez que se abra por primera vez el archivo marcos.html; por omisin ser cargado con dicha pgina 1. Luego al pulsar los otros botones se cargarn las otras. Ya hemos aprendido a crear marcos de pgina, sin embargo es muy importante dejar claro que se han vuelto casi obsoletos, al menos para el diseo de sitios Web. Quiz se sigan utilizando en manuales, libros o tutoriales de productos diseados en formato HTML; pero se desaconseja su utilizacin para el diseo sitios Web; ya que son complicados de armar; no siempre se visualizan bien en todos los exploradores Web, dando resultados variados y no son muy amigables a los buscadores; lo que significa que les cuesta indexar en su base de datos, sitios Web desarrollados con marcos. Adems resultan estticamente desagradables para muchos usuarios, ya que dan un aspecto de sitio viejo o desactualizado. En lugar de los marcos de pgina se recomienda utilizar los marcos incorporados <iframe> de los cuales hablamos en la tercera parte del tutorial, ya que resultan ms fciles de disear, ms amigables a los buscadores y adems ms atractivos visualmente. Por ejemplo se los suele utilizar para incorporar pginas de otros sitios dentro de la pgina que diseamos, sin la necesidad de que los usuarios tuvieran que abrirlas tras pulsar un hipervnculo. Los usos de los marcos incorporados son variados.

Versiones de HTML
Desde la creacin de la World Wide Web (Red informtica mundial) HTML estuvo presente, ya que se trata del lenguaje en el que los documentos Web estn escritos. Al principio las pginas Web solamente podan mostrar texto, pero con el tiempo se fueron agregando nuevos elementos, como las imgenes. Pero ninguna de las primeras versiones lleg a considerarse un estndar. Luego se cre el consorcio de la World Wide Web, llamado W3C (de WWW Consortium); que se encarga de dar recomendaciones para la estandarizacin de comandos y elementos de diseo y desarrollo Web. Se supone que los creadores de exploradores Web deben adherir a estos estndares; no incluyendo la reproduccin de etiquetas viejas o de versiones anteriores de HTML, ya desaprobadas; y siguiendo normas de diseo Web. La primera versin de HTML que fue organizada por el consorcio W3C fue HTML 3.0. Entre algunas de las nuevas capacidades ms destacables de HTML 3.0, se incluan facilidades para la creacin de tablas, la posibilidad de hacer fluir el texto alrededor de imgenes, o la capacidad de agregar

elementos matemticos para la representacin de frmulas matemticas de todo tipo. Sin embargo dadas las complejidades tecnolgicas que requeran esos elementos, esta versin no fue apoyada por los desarrolladores de exploradores Web de la poca; expirando el estndar al poco tiempo. Ms tarde se organiz la versin HTML 3.1 pero no lleg a ser oficializada. Pero la siguiente versin HTML 3.2 fue adoptada; ya que retiraba muchas de las funcionalidades de la versin HTML 3.0, para adaptarse a las tecnologas de la poca; una de las capacidades abandonadas era la de representacin de frmulas matemticas; las cuales pasaron a formar un lenguaje separado llamado MathML. Adems incorporaba varios elementos desarrollados por Mosaic y Netscape, que eran los exploradores Web ms populares. Ya para 1997 la W3C cre un nuevo estndar, la versin HTML 4.0; la cual adoptaba elementos usados por los exploradores Web populares, pero tambin comenz a limpiar el lenguaje, dando cierto orden y organizacin al mismo; desaprobando la utilizacin de algunas etiquetas antiguas o formas de diseo, a favor de otras ms prcticas desde el punto de vista de diseo.

En el ao 1999 se public una revisin de la versin HTML 4.0; denominada HTML 4.01, la cual inclua ciertas modificaciones sobre la anterior. A pesar de la existencia del estndar, al cual los variados exploradores Web utilizados hoy da adhieren; muchas etiquetas viejas HTML desaprobadas por el W3C siguen funcionando en la mayora de los exploradores Web; pero esto no significa que en futuras versiones sigan funcionando; por lo tanto por motivos de compatibilidad con futuros exploradores Web se sugiere respetar las normas del W3C y no utilizar antiguas etiquetas. Es importante aclarar que para un correcto aprendizaje del lenguaje HTML, en este tutorial no se utilizan etiquetas desaprobadas por el W3C y todo lo aprendido cumple con las normas del estndar establecido en las versiones HTML 4.01 y XHTML de la cual hablaremos a continuacin. El lenguaje HTML est basado en el sistema de definicin y organizacin de etiquetas llamado SGML (Standard Generalized Markup Language - en ingls Estndar de Lenguaje de Marcado Generalizado). SGML no es un lenguaje en s, sino que se trata de un sistema de etiquetado de documentos, o sea que a travs de la aplicacin de un sistema de etiquetas se puedan definir los distintos elementos que forman parte de un documento. El lenguaje HTML, se cre a partir de la sintaxis de este sistema de estructuracin o creacin de documentos. Por otro lado, posteriormente se cre una versin ms perfeccionada y simplificada de SGML, para la definicin o creacin de lenguajes de estructuracin de documentos llamada XML (EXtensible Markup Language - que en ingls significa Lenguaje de Marcado Extensible). En base a XML se cre XHTML. El XHTML no es otra cosa que HTML pero basado en XML, siendo por lo tanto casi idnticos. XHTML es soportado por la mayora de los exploradores Web populares de hoy da. XHTML presenta leves diferencias con el HTML simple; las cuales se describirn aqu. Las etiquetas y los atributos en XHTML deben estar escritos en letras minsculas; de lo contrario no se obtendrn los resultados deseados. En HTML a pesar que es un error no cerrar los elementos con etiquetas de cierre, pueden ser reproducidos por muchos exploradores Web. Sin embargo en XHTML es obligatorio que todos los elementos estn correctamente cerrados; incluso los elementos vacos como <img> que no llevan etiquetas de cierre, siendo cerrados al final de los mismos. Algunos ejemplos incluyen <br />, <hr /> entre tantos otros. Por lo tanto es importante ser cuidadoso y cerrar todos los elementos. Todos los valores de los atributos de etiquetas deben estar entre comillas. Los elementos en XHTML deben estar correctamente anidados. En HTML simple puede que algunos exploradores Web reproduzcan elementos que fueron

incorrectamente anidados como por ejemplo: <p><b><em>Hola</b></p></em>, pero en XHTML esto no funcionara as que habra que corregirlo anidando bien las etiquetas as: <p><b><em>Hola</em></b></p>. Como se puede observar en la lista anterior las diferencias entre HTML simple y XHTML son mnimas, tratndose nada ms de una versin ms estricta en cuanto al respeto de la sintaxis de codificacin se trata. De hecho es recomendable adherir a las normas de XHTML, ya que respetar las normas de sintaxis al pie de la letra es una buena costumbre para todo diseador Web. De hecho todos los ejemplos de este tutorial adhieren a las normas de XHTML; ya que tanto las etiquetas como los atributos estn escritos con letras minsculas, todos los elementos estn cerrados as como correctamente anidados. Entonces surge la pregunta, de cul es la ventaja de XHTML por sobre el HTML simple. En realidad si se trata de un documento Web que incluye adems de los elementos del lenguaje HTML, elementos de otros lenguajes de marcado como MathML (elementos para la representacin de frmulas matemticas como el smbolo de raiz cuadrada, integrales, etc) o SVG (Scalable Vector Graphics, en ingls Grficos Vectoriales Escalables; para la representacin de valores vectoriales bidimensionales), entre otros; se recomienda trabajar en XHTML; de lo contrario si se trata de una pgina Web convencional se puede trabajar en la versin HTML 4.01. Sin embargo, dada la ventaja anteriormente mencionada de XHTML, as como la falta de diferencias estructurales en lo que al lenguaje HTML respecta entre HTML 4.01 y XHTML a veces es mejor trabajar en este ltimo. Adems en XHTML estamos obligados a escribir el cdigo fuente con la sintaxis correcta. Actualmente se encuentra en etapa de experimentacin la versin de sintaxis HTML 5 y paralelamente XHTML 5; incorporando algunos elementos nuevos como las etiquetas <audio> y <video>, de las cuales hablaremos ms adelante. Sin embargo hay que aclarar que muchos elementos de HTML 5 todava no pueden ser representados por todos los exploradores Web, incluso en sus versiones ms nuevas; haciendo que mientras puedan funcionar en algunos no lo harn en otros. Por eso si se necesita utilizar algn elemento de HTML 5, es recomendable chequear que funcione en varios exploradores Web.

Cmo declarar la versin de HTML del documento Web

Cuando estamos diseando una pgina Web es muy importante declarar en qu versin de HTML est codificada para que el explorador Web la pueda reproducir acorde a los elementos que contiene. Hay etiquetas que ya no se utilizan en la versin de HTML 4.01 y que fueron desaprobadas por el W3C; sin embargo cuando se declara la versin en la que est escrita la pgina Web, se puede especificar que a pesar de todo se permitirn elementos desaprobados por el consorcio W3C; o tambin lo contrario, declarando que se trata de un cdigo fuente estricto que no permite reproducir elementos viejos desaprobados. La declaracin de la versin HTML en el que est escrita la pgina Web, siempre debe estar ubicada en la primera lnea o rengln del cdigo fuente antes de <html>. La declaracin de la versin de HTML se realiza con la instruccin <!DOCTYPE>. No est de ms reiterar que siempre debe ser incluida en el cdigo fuente y que debe estar ubicada en laprimera lnea o rengln del cdigo fuente. A continuacin se muestran las distintas declaraciones <!DOCTYPE> utilizadas para indicar en qu versin est escrita una pgina. Versin HTML 4.01 Transicional: A pesar de estar en versin 4.01, permite la reproduccin de etiquetas viejas o desaprobadas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Versin HTML 4.01 Estricta: Est escrita en versin HTML 4.01; pero prohibe estrictamente la reproduccin de elementos viejos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Versin XHTML 1.0 Transicional: A pesar de estar en versin XHTML 1.0, permite la reproduccin de etiquetas viejas o desaprobadas. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Versin XHTML 1.0 Estricta: Est escrita en versin XHTML 1.0; pero prohibe estrictamente la reproduccin de elementos viejos. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Versin HTML 5: En la versin HTML 5 no hay declaraciones en estado transicional que permite el uso de elementos viejos o desaprobados; ya que esta versin es estricta en cuanto al uso de las etiquetas viejas desaprobadas; as que hay slo una versin. <!DOCTYPE html> Para describir brevemente esta instruccin; DOCTYPE proviene de Document Type (en ingls Tipo de Documento); PUBLIC indica que es de tipo pblico accesible a todos los usuarios de la Web; W3C que respeta las normas del estndar de dicho consorcio; DTD proviene de Document Type Definition (Definicin de Tipo de Documento) luego de lo cual se define la versin de HTML en la que est escrito el documento. La direccin del archivo de formato dtd que figura al final de la instruccin DOCTYPE de cada versin (salvo la de HTML 5); indica la ubicacin del archivo donde se definen todos los comandos y elementos que componen una versin de HTML. Para cada versin hay un archivo dtddiferente. Las declaraciones de versin de HTML siempre se escriben exactamente como se ha indicado en los prrafos anteriores; as, cada vez que se necesiten; acorde a la versin seleccionada; podemos venir a esta pgina del tutorial y copiar la instruccin de declaracin requerida; o tambin podemos crear un archivo de texto donde podemos copiarlas para tenerlas a mano. Una cosa ms que hay que hay que aclarar es que cuando una pgina Web est en versin XHTML, hay que agregar un atributo en la etiqueta <html> de nombre xmlns (XML Namespace - Espacio de nombres XML) cuyo valor es la direccin donde se encuentra el espacio o conjunto de nombres de elementos que componen la versin XHTML. La direccin siempre es "http://www.w3.org/1999/xhtml". Atencin, el atributo xmlns de <html> solamente debe ser utilizado en la versin XHTML. Veamos un ejemplo de declaracin de versin HTML en el cdigo fuente de uno de los ejemplos que utilizamos anteriormente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ejemplo de formulario</title>

</head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Seleccione una marca de autos</p> <select name="marcas"> <option value="Ford">Ford</option> <option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <p><input type="submit" value="Enviar" /> </p> </form> </body> </html> En el ejemplo anterior se declar un cdigo fuente XHTML 1.0 Transicional, el cual si llega a contener alguna etiqueta vieja ya desaprobada de versiones anteriores, igualmente podr ser visualizada por los exploradores Web sin ningn inconveniente. No est de ms reiterar que todos los ejemplos de este tutorial respetan las normas del W3C al pie de la letra y en ningn momento se han enseado etiquetas viejas de versiones anteriores a HTML 4.01, ya desaprobadas; todas son etiquetas vigentes . Tampoco est de ms reiterar que es importante siempre declarar la versin del cdigo fuente de la pgina. As que a declarar siempre la version!

CSS en HTML
En los primeros aos de la World Wide Web (Red Informtica Mundial) el lenguaje HTML se utilizaba para definir tanto la parte estructural de las pginas Web (inclusin de distintos elementos) as como la esttica (colores, posiciones, diseo y trazado). Pero con el paso del tiempo y la suma de ms elementos que componan las pginas Web, cada vez ms complejas y estticamente ricas, se requiri la creacin de un lenguaje aparte, dedicado exclusivamente al diseo esttico de las pginas Web, llamado CSS. El nombre CSS proviene de las siglas Cascading Style Sheets (Hojas de Estilo en Cascada); un lenguaje dedicado exclusivamente a la presentacin esttica de la pgina. De esta manera la definicin de la parte estructural de las pginas Web, o sea la incorporacin de elementos (texto, imgenes, hipervnculos, tablas, formularios, etc) se realiza con HTML, mientras que la definicin de la parte esttica (colores de texto, posiciones de elementos, distribucin o trazado del diseo de la pgina Web, etc) se realiza con CSS. Una analoga arquitectnica vlida sera comparar a HTML con la parte estructural de un edificio (cimientos, vigas, paredes, techos) y a CSS con la parte de diseo del mismo (pintura, empapelado, decoracin interior y exterior). As, el trabajo combinado de HTML y CSS da como resultado pginas visualmente ricas.

Antes, las pginas Web no tenan tanta riqueza visual como ahora; y toda la parte esttica del diseo dependa de HTML. Claro que la variedad de elementos estticos de las pginas Web en aquellos tiempos era inferior a los que se pueden encontrar hoy da. Por aquel entonces se poda cambiar el color, el tamao y el tipo de fuente del texto; cambiar el color de fondo de la pgina as como incluir una imagen de fondo; alinear los elementos de la pgina (texto, imgenes, tablas, etc) a la izquierda, centro o derecha; y para distribuir los elementos en posiciones especficas se utilizaban tablas con bordes invisibles de tamao "0". La mayora de las etiquetas y atributos HTML que se utilizaban para mejorar estticamente las pginas, quedaron desaprobados (deprecated en ingls) en la versin HTML 4.01; sin embargo hasta el da de hoy la mayora de ellos todava pueden ser visualizados en los exploradores Web si se especifica en el <!Doctype> del cdigo fuente una versin de HTML transicional (no estricta). A pesar que funcionen no se recomienda incluir estos elementos y atributos; ya que mientras algunos pueden funcionar en ciertos exploradores Web puede que no lo hicieran en otros; sin mencionar que es probable que en un futuro todos los browsers dejen de visualizarlos, convirtiendo a la pgina en incompatible con exploradores Web futuros. Adems es importante destacar que los beneficios visuales ofrecidos por estas etiquetas y atributos de HTML son limitados en comparacin con la capacidad de diseo esttico con que cuenta CSS, el cual brinda un sin fin de combinaciones visuales que permiten el desarrollo de pginas Web mucho ms bonitas que las de antes. Algunas de las etiquetas desaprobadas: <center>: Centra todo tipo de elementos como texto, imgenes, tablas, etc. <font>: Utilizada para indicar el color, tamao y tipo de fuente de un texto. <basefont>: Serva para indicar el color, tamao y tipo de fuente de todo el texto de la pgina. Esta etiqueta se colocaba fuera de <body> en <head>. Algunos atributos ya desaprobados por el W3C: Atributos de <body>: link: Define el color de los hipervnculos de la pgina. vlink: Define el color de los hipervnculos ya visitados. alink: Define el color de los hipervnculos activos. bgcolor: Define el color de fondo de la pgina. background: Define una imagen de fondo para la pgina. Atributos de <p>: align: Indica el alineamiento de un texto en la pgina. Atributos de <table> y <td>: bgcolor: Color de fondo de una tabla o celda. Hoy da en lugar de utilizar etiquetas y atributos HTML para agregar belleza esttica a las pgina se utiliza CSS; el cual facilita mucho el diseo ya que cuenta con una gran variedad de aditivos estilsticos especficos para cada elemento HTML. Los comandos o elementos de estilo CSS pueden incorporarse dentro del cdigo fuente HTML de la pgina, as como tambin pueden estar en un archivo separado de formato .css el cual se vincula o importa en la pgina mediante la etiqueta <link> (vincular), la cual debe ir ubicada en la seccin de cabecera del cdigo fuente, fuera de <body>, entre las etiquetas de apertura y cierre <head>.

Si en lugar de crear un archivo separado de tipo .css se prefiere incorporar el cdigo CSS dentro del cdigo HTML, se debe utilizar la etiqueta <style> (estilo), entre cuyas etiquetas de apertura y cierre se coloca el cdigo en lenguaje CSS.<style> al igual que <link> debe colocarse fuera de <body>, en la seccin de cabecera entre las etiquetas de apertura y cierre de <head>. Una de las ventajas de utilizar archivos CSS separados del cdigo fuente de las pginas, es que si se quiere un diseo homogneo y general para todas las pginas que componen un sitio Web; el mismo puede ser especificado en dicho archivo CSS; donde el estilo visual de cada elemento HTML de las pginas es definido. Por ejemplo, si se quiere que todas las pginas del sitio tengan un cierto color de fondo, en lugar de especificarlo en cada una de ellas; simplemente hay que hacerlo una vez en el archivo CSS, ya que los comandos estilsticos de aquel archivo se aplican a todas las pginas que componen el sitio Web. Si luego se quiere cambiar el color de fondo de cada pgina, en lugar de tener que modificar el cdigo fuente de cada pgina, simplemente se modifica el color de fondo desde el archivo CSS; ahorrando as tiempo y trabajo. Si se prefiere tener los comandos de estilo dentro del cdigo fuente de la pgina Web, los cambios realizados entre las etiquetas de apertura y cierre <style> se aplicarn a toda la pgina; pero no afectarn al resto de los documentos del sitio Web. Si por otro lado, si slo se requiere aplicar los cambios de estilo en un elemento HTML especfico, se puede agregar el atributo style en cualquiera de las etiquetas que forman parte del cdigo fuente de la pgina Web. Los cambios slo se aplicarn en dicho elemento. El potencial de diseo esttico que tiene CSS es muy grande, ofreciendo una infinidad de combinaciones estilsticas que pueden ser aplicadas en las pginas Web. Por eso al terminar de aprender HTML es indispensable estudiar CSS para complementar los conocimientos de desarrollo Web adquiridos. Hay que tener claro que si no se sabe CSS, no se pueden disear pginas y por ende sitios Web que cubran las expectativas visuales de los usuarios de hoy da. Sera como construir casas y dejarlas en su estado estructural; sin ventanas ni puertas, pisos y techos descubiertos de cemento; sin pintar, etc. El lenguaje HTML sirve para definir los elementos que forman parte de la pgina, mientras que con CSS se organiza la distribucin de los elementos de la pgina, colocndolos en posiciones precisas elegidas por el diseador; se da estilo a dichos elementos (colores de fondo, formato de texto, colores de hipevnculos, efectos especiales, etc). Por lo tanto HTML sin CSS es incompleto. En este tutorial nos dedicamos solamente a HTML, por lo tanto es recomendable que al finalizarlo busquemos un buen tutorial de CSS para completar el curso de diseo Web. Obviamente que para convertirnos en buenos diseadores y desarrolladores Web, tambin se necesita saber utilizar algunas aplicaciones como Flash; editores de imgenes como Paint Shop Pro o Photoshop; as como otros lenguajes entre los que se cuentan Javascript, PHP, ActionScript y el manejo de bases de datos como MySQL. Con todos esos conocimientos ms el uso de otras pequeas herramientas tiles de administracin de archivos como los FTP (que sirven para subir al servidor los archivos que forman parte de un sitio); se pueden crear sitios Web de gran calibre; con lo cual podremos incluso dedicarnos profesionalmente al diseo y desarrollo Web. Aunque este tutorial est dedicado exclusivamente al aprendizaje completo de HTML y no de CSS u otros lenguajes, veremos un ejemplo de CSS para darnos una idea de qu se trata y cmo se utiliza. En el siguiente ejemplo daremos estilo al texto. <html>

<head> <title>Ejemplo de estilo CSS</title> <style type="text/css"> h1 {color: red; font-family: arial;} h2 {color: blue; font-family: verdana;} p {color: fuchsia; font-family: courier; font-size: 4em;} </style> </head> <body> <h1>T&iacute;tulo en color rojo y fuente arial</h1> <h2>T&iacute;tulo en color azul y fuente verdana</h2> <p>Texto fucsia, courier, tama&ntilde;o 4</p> </body> </html>

Javascript en HTML
El lenguaje HTML sirve para disear la estructura de una pgina, sin embargo los elementos que se agregan mediante este lenguaje son estticos. Para darle dinamismo a la pgina; por ejemplo botones dinmicos con efectos especiales, imgenes animadas y en general cambios dinmicos del contenido; se requiere otro lenguaje de programacin llamado Javascript. Una de las ventajas de Javascript es que el cdigo fuente puede ser agregado entre medio del cdigo fuente de la pgina HTML; siento estos dos lenguajes completamente compatibles. Sin embargo hay que tener en cuenta que la sintaxis de estos lenguajes es muy distinta una de la otra; ya que HTML es un lenguaje de diseo estructural de pginas Web y Javascript es un lenguaje de programacin lgico que le da dinamismo a los elementos de la pgina Web. Para agregar cdigo fuente Javascript entre medio del cdigo HTML se debe utilizar la etiqueta <script>. El cdigo fuente deber ser codificado entre medio de las etiquetas de apertura y cierre <script>. A partir de la etiqueta de apertura, todo lo que haya dentro de aquel espacio ser cdigo fuente Javascript hasta la etiqueta de cierre, tras la cual se retorna a HTML. La etiqueta <script> sirve para agregar distintos tipos de lenguajes compatibles a HTML, por eso mismo se debe indicar en el atributo type de la misma, el nombre del lenguaje de programacin; a pesar de esto el lenguaje de programacin compatible con HTML ms utilizado es Javascript, sin embargo es importante aclarar en type el nombre del lenguaje. En este tutorial no se explicarn los comando de Javascript, ya que se trata de otro lenguaje; sin embargo a continuacin, a modo de ejemplo, dentro del espacio de <script> se muestra una lnea que contiene un comando Javascript. <html> <head> <title>Ejemplo de Javascript</title> </head> <body> <script type="text/javascript">

document.write("Hola, esto es simplemente un ejemplo"); </script> </body> </html>

El ejemplo anterior simplemente sirve para demostrar cmo se utiliza la etiqueta HTML <script> para agregar cdigo fuente Javascript.

Distribucin de la pgina Web

Uno de los puntos ms importantes que hay que tener en cuenta al disear un sitio Web, es el de la distribucin visual de las pginas Web que lo componen; dnde estarn ubicadas la opciones o botones de hipervnculos, el contenido principal, etc. Por lo general lo ms recomendable, as como tambin lo ms acostumbrado, es situar los botones de hipervnculos en la parte superior o en la parte izquierda de la pgina Web, mientras que en el rea central se sita el contenido principal de la pgina. Uno de los motivos principales de ese tipo de organizacin o distribucin de los elementos de la pgina se debe a que en la mente humana las cosas por lo general se perciben en un cierto orden que obedece a mecanismos psicolgicos que hacen que observemos o analicemos nuestro alrededor siguiendo un patrn especfico. Por lo tanto el usuario se dirige inmediatamente hacia lugares especficos de la pgina para realizar ciertas actividades; si los elementos que busca no se encuentran en las posiciones donde habitualmente se localizan en la mayora de los sitios Web, se pierde eficiencia. Es muy importante tambin mantener suavidad y uniformidad en los colores de la pgina para hacer que el usuario tenga una sensacin de tranquilidad y pueda concentrarse en el contenido. Los colores muy llamativos pueden distraer la atencin del usuario. Hay dos maneras de organizar y distribuir los elementos de una pgina, el mtodo viejo mediante la utilizacin de tablas y el mtodo actualmente ms utilizado que depende de CSS. Las tablas son elementos HTML que fueron especficamente creados para tabular informacin y no como herramientas de diseo; sin embargo en los primeros tiempos cuando no se utilizaba CSS para el diseo visual, se deba recurrir plenamente a HTML para lograr pginas lo ms atractivas posible. Dado que no existen etiquetas especiales o atributos en HTML para ubicar los distintos elementos que forman parte de una pgina, mediante la utilizacin de tablas de borde invisible o valor "0" se pueden situar dichos elementos en las distintas celdas de dimensiones determinadas para lograr un efecto de posicionamiento libre en cualquier punto de la pgina. Por ejemplo con una tabla de borde "0" o invisible, de 2 columnas y 2 filas; se puede disear una pgina con una barra horizontal en la parte superior para colocar el logo, una columna a la izquierda para la botonera y un espacio para el contenido central. Se podra utilizar la celda superior izquierda para el logo, la inferior izquierda para la columna de botones y la inferior derecha para el contenido central. Dentro de la celda del contenido pueden insertarse tablas anidadas para organizar los elementos del contenido en posiciones especficas mediante el ajuste de los tamaos de las celdas.

Tabla de 4 celdas (2 columnas x 2 filas) y borde 0. En la celda superior izquierda se encuentra el logo, en la celda inferior izquierda la botonera de hipervnculos y en la celda inferior derecha el contenido central de la pgina.

A pesar de obtenerse los resultados buscados, utilizar tablas para organizar y distribuir elementos de HTML no es correcto. Lo que se debe hacer es utilizar CSS, dadas las mayores capacidades de diseo que ofrece. Mediante CSS se pueden organizar y distribuir los elementos de las pginas con mayor facilidad y flexibilidad que con las tablas. Otra desventaja de utilizar tablas para la distribucin de pginas Web en lugar de CSS, es que dados los mecanismos utilizados por los motores de bsqueda, se les complica indexar las pginas cuyos elementos estn distribuidos en tablas, resultando en puestos ms bajos en bsquedas. Por lo tanto no slo por motivos de diseo sino tambin de posicionamiento en buscadores, es ms conveniente utilizar CSS en lugar de tablas para la distribucin de las pginas Web. Las etiquetas que permiten aprovechar atributos CSS en la distribucin de pginas son <div> y <span>. Dichas etiquetas definen reas individuales dentro de una pgina. De por s solas <div> y <span> no dan resultados visuales, ya que lo nico que hacen es definir zonas o reas dentro de la pgina; pero si se les agregan modificadores de estilo CSS para definir las posiciones y estilos de diseo de dichas reas, se puede apreciar el gran potencial que tienen estas dos etiquetas. A continuacin se van a dar dos ejemplos de la misma distribucin de una pgina Web realizados con una tabla en el primer ejemplo y con la combinacin de <div> y CSS en el segundo. Hay que aclarar que en el primer ejemplo que utiliza una tabla para la distribucin, se utiliza un poco de CSS dentro de algunas etiquetas pero solamente para definir los colores de cada celda que facilitan la diferenciacin visual de cada una; en ese ejemplo no se utiliza CSS en absoluto para la distribucin. Ejemplo 1 (tablas): <html> <head> <title>Ejemplo de distribuci&oacute;n de p&aacute;gina</title> </head> <body> <table width="100%" style="height: 100%;" border="0" cellspacing="0"> <tr> <td colspan="2" style="background-color:magenta;"> <h1>Logo de la p&aacute;gina Web</h1> </td> </tr>

<tr valign="top"> <td width="20%" valign="top" style="background-color:grey;"> <b>Botonera</b><br /> Bot&oacute;n 1<br /> Bot&oacute;n 2<br /> Bot&oacute;n 3<br /> Bot&oacute;n 4 </td> <td valign="top" style="background-color:white;">Contenido principal de la p&aacute;gina.</td> </tr> <tr> <td colspan="2" align="center" style="background-color:darkgrey;">Copyright 2012 P&aacute;gina de Ejemplo</td> </tr> </table> </body> </html> Ejemplo 2 (<div> y CSS): <html> <head> <title>Ejemplo de distribuci&oacute;n de p&aacute;gina</title> </head> <body style="margin: 0px;"> <div style="width:100%; height:100%; position: absolute; margin-left: 0px; margin-top: 0px; padding: 0px; top: 0px;"> <div id="header" style="background-color:magenta; height: 100px; position: relative; margin-top: 0px; top: 0px;"> <h1 style="margin-bottom:0;">Logo de la p&aacute;gina Web</h1></div> <div id="menu" style="background-color:grey;height:100%; width:20%;float:left;"> <b>Botonera</b><br /> Bot&oacute;n 1<br /> Bot&oacute;n 2<br /> Bot&oacute;n 3<br /> Bot&oacute;n 4</div> <div id="content" style="background-color:white;height:100%; width:80%; float:left;"> Contenido principal de la p&aacute;gina.</div> <div style="background-color:darkgrey; clear:both; text-align:center; height: 40px;"> Copyright 2012 P&aacute;gina de Ejemplo</div> </div> </body>

</html>

No es objetivo del actual curso de HTML explicar los modificadores de estilo CSS que se incluyen en las etiquetas <div>del ejemplo anterior; la idea es simplemente comparar los dos mtodos. Pero lo que s se debe aclarar es que el segundo mtodo es el ms recomendado para organizar la distribucin de una pgina Web. Por lo tanto es un requerimiento estudiar CSS luego de haber aprendido HTML, para poder lograr el diseo de sitios Web de calidad profesional. Por lo tanto, las tablas son importantes pero para lo que fueron proyectadas, tabular datos y no para fines de diseo estilstico.

Multimedia en HTML
Los archivos multimedia vienen en muchos formatos. Multimedia es cualquier cosa que se puede or o ver como texto, sonido, msica, grabaciones, videos, pelculas, etc. Hoy en da ya es muy usual encontrar elementos de multimedia en pginas Web. Los distintos exploradores Web soportan un cierto nmero de formatos multimedia, pudiendo as reproducir videos, msica, etc. Los primeros exploradores Web solamente soportaban texto y no slo eso sino que contaban nicamente con un tipo de fuente. Ms adelante comenzaron a soportar colores, distintas fuentes y estilos de letras; y ya luego imgenes. El soporte de audio, video y animaciones es manejado de distintas formas en cada tipo de explorador Web. Mientras que algunos elementos multimedia pueden ser reproducidos directamente por los componentes bsicos del explorador, otros, para poder funcionar, requieren el uso de ciertos programas especiales que se aaden complementariamente, llamados plug-ins. Hay distintos tipos de formatos multimedia, y cada uno realiza distintas tareas. A continuacin se listan algunos de los ms utilizados. Archivos AVI: Tienen extensin de formato .avi (Audio Video Interleave - En ingls Audio Video Intercalado); este formato fue desarrollado por Microsoft, siendo por lo tanto compatible en todas las computadoras con sistema operativo Windows. Adems es soportado por la mayora de los exploradores Web o browsers. En otros sistemas operativos a veces no funciona. Archivos WMV: Tienen extensin de formato .wmv (Windows Media); y como el anterior tambin ha sido desarrollado por Microsoft, siendo compatible con todos los sitemas operativos Windows. Sin embargo para poder ser reproducidos en otros sistemas operativos requieren la instalacin de un programa o componente especial el cual es gratutio. Archivos MPEG: Tienen extensin de formato .mpg o .mpeg (Moving Pictures Expert Group - En ingls Grupo de Expertos de Imgenes en Movimiento). Este formato de video es el ms popular en Internet y es soportado por todos los sistemas operativos y exploradores Web; por lo tanto es uno de los ms recomendables a la hora de agregar videos. Archivos Quicktime: Tienen extensin de formato .mov . Este formato ha sido desarrollado por Apple; por lo tanto es soportado por las computadoras de aquella empresa como las Mac; mientras que para poder ser ejecutados en sistemas operativos Windows, requieren que se instale un plug-in o aplicacin componente adicional gratuito.

Archivos Flash o Shockwave: Tienen extensin de formato .swf y .flv . El formato Flash ha sido desarrollado por Macromedia. Este formato es utilizado para poder reproducir pelculas Flash (usadas para representar animaciones, interfaces dinmicas, juegos online, etc.). Hoy da son muy populares en Internet, dados los resultados estticos positivos que posee. Por otro lado el formato.flv es muy utilizado en sitios de videos como Youtube.

Insertar objetos en HTML

Una de las capacidades de los exploradores Web es la de poder ejecutar algunos tipos de aplicaciones externas dentro de los mismos; dichas aplicaciones son conocidas como programas ayudantes o plug-ins (enchufados o conectados). Los plug-ins enriquecen a las pginas Web tanto estticamente como funcionalmente, ya que permiten la ejecucin de efectos especiales o tareas que no podran funcionar en documentos Web si no fuera por ellas; por ejemplo los reproductores de pelculas o juegos online. Algunas de las aplicaciones incrustadas o enchufadas en documentos Web incluyen reproductores de archivos de Flash (.swf y .flv), reproductores Quicktime, etc. Una de las aplicaciones ms utilizadas hoy da en pginas Web son los reproductores Flash. Desde interfaces visualmente ricas y con efectos especiales hasta reproductores de pelculas (como los de Youtube) y juegos online son en realidad aplicaciones o programas independientes enchufados en las pginas Web. La etiqueta que nos permites incluir estos objetos externos es <object>. La etiqueta <object> va acompaada de otra etiqueta llamada <param>. Mientras la primera sirve para enchufar los programas ayudantes o plug-ins, la segunda es para ajustar los parmetros de funcionamiento especficos del programa introducido. Veamos un ejemplo: <html> <head> <title>Ejemplo de programa insertado</title> </head> <body> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v ersion=8,0,0,0" width="708" height="137"> <param name="movie" value="http://www.advanceclean.com.ar/botonera.swf" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="sameDomain" /> </object> </body> </html> Con el cdigo fuente anterior se inserta una aplicacin Flash de formato .swf. En el mismo se pueden ver diversos atributos en la etiqueta <object>. Comencemos con los ms fciles; width y height que se utilizan para especificar el ancho y el alto que ocupar la aplicacin dentro de la pgina. En cuanto al extrao atributo classid el cual contiene un an ms extrao valor, se trata de una herramienta que sirve nicamente en Internet Explorer (IE). Ese valor le indica a IE qu tipo de programa se quiere ejecutar, por ejemplo el valor "d27cdb6e-ae6d-11cf-96b8-444553540000" declara que se quiere utilizar una aplicacin Shockwave-Flash, requiriendo por lo tanto un

reproductor de archivos de tipo .swf. A continuacin vemos el atributo codebase en el cual se indica la ubicacin del cdigo fuente que permite la ejecucin del objeto insertado; en el ejemplo anterior al tratarse de un archivo de tipo Flash, el cdigo o aplicacin que permite la ejecucin del objeto se encuentra en la direccin "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"; por lo tanto si en IE no tenemos instalado el plug-in que permite ejecutar programas Flash, mediante este atributo IE nos sugerir bajarlo e instalarlo desde la direccin indicada. El motivo de la existencia de classid es que en IE existe la posibilidad de insertar aplicaciones especiales de Microsoft o programadas para ejecutarse en sistemas operativos Microsoft Windows; dichas aplicaciones se denominan componentes ActiveX y pueden ser insertadas en todo tipo de herramientas de Microsoft como el Word, Excel o Visual Studio entre otros. El Internet Explorer, no se encuentra excento de dicha capacidad. Los componentes ActiveX son programas que se instalan y pueden ser controlados desde otras aplicaciones; por eso mismo pueden ser insertados en pginas Web como objetos externos. En classid lo que se indica mediante un cdigo es el tipo de aplicacin que se quiere enchufar. Cada tipo de aplicacin tiene un cdigo de identificacin, por lo tanto no ser el mismo para el reproductor Media Player que para el reproductor de pelculas Flash. Hay que aclarar que Flash no es un producto de Microsoft, pero igual por temas de compatibilidad cuenta su propio cdigo de identificacin para poder funcionar en Internet Explorer. Con las etiquetas <param> se ajustan parmetros especficos del objeto insertado; dichos parmetros varan segn el programa; no siendo los mismos en aplicaciones Flash, que en aplicaciones Quicktime o de otro tipo. El nombre del parmetro se indica en el atributo de <param> name, mientras que el valor de dicho parmetro de declara en el atributovalue. En aplicaciones o pelculas Flash se utiliza el parmetro movie (pelcula) para indicar la direccin URL o ubicacin de dicha pelcula. Tambin se ve el atributo quality (calidad) en el que indicamos un valor de "high" (alta). El parmetroallowScriptAccess permite a la pelcula Flash tener acceso al cdigo fuente de la pgina HTML e interactuar con la misma; los valores posibles son "sameDomain" (mismo dominio) y "always" (siempre); el primer valor indicando que solamente puede ser accedido el cdigo fuente de la pgina si el archivo .swf se encuentra en el mismo dominio del documento Web; mientras que el segundo valor especifica que puede ser accedido por archivos .swf ubicados en otros servidores; el valor por omisin es "sameDomain". Hay que aclarar que los parmetros recin mencionados son especficos de Flash. Sin embargo es muy posible que algunos exploradores Web como Firefox el cdigo fuente anterior no funcione. Eso se debe a que el atributo classid necesario para que Internet Explorer pueda insertar la pelcula Flash, confunde a Firefoxresultando en un espacio vaco donde debera estar el objeto. La solucin a este problema nos lleva al concepto de condiciones de IE. Las condiciones de Internet Explorer funcionan nicamente en aquel explorador Web, pero pueden llegar a ser tiles para solucionar conflictos como el que tenemos aqu. Se trata de un tipo de comando especfico de IE cuya sintaxis se encuentra incluida dentro comentarios. Primero veremos cmo quedara el cdigo fuente anterior y luego lo analizaremos con cuidado. <html> <head> <title>Ejemplo de programa insertado</title> </head> <body> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v ersion=8,0,0,0" width="708" height="137"> <!--[if !IE]><!--> <object type="application/x-shockwaveflash"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=8,0,0,0" width="708" height="137" data="http://www.advanceclean.com.ar/botonera.swf"> <!--<![endif]--> <param name="movie" value="http://www.advanceclean.com.ar/botonera.swf" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="sameDomain" /> </object> </body> </html>

En el cdigo fuente se puede observar la etiqueta <object> sin ninguna modificacin respecto al cdigo fuente anterior, y adems una segunda versin de la misma etiqueta con algunas modificaciones, ubicada entre unos extraos comandos. La primera versin es para que el IE pueda insertar el objeto, mientras que la segunda versin es para que lo hagan otros exploradores Web como Firefox. Primero analizaremos la sintaxis de los comandos condicionales de IE y a continuacin los atributos. Estos comandos no son parte de HTML y tampoco son validados por el consorcio W3C; por lo tanto son incluidos como comentarios, ya que solamente pueden ser interpretados por IE y los otros exploradores Web pueden dar resultados no deseados. La estructura de las condiciones son una parte esencial de la programacin y de la informtica en general, en otras palabras, sin comandos de condiciones, la computacin como la conocemos hoy da no existira. Sin embargo son elementos pertenecientes a lenguajes de programacin lgicos como Javascript, PHP, Visual Basic, C/C++, etc; los cuales son ms avanzados que HTML, un lenguaje de marcado esttico que se utiliza para definir estructuras de documentos Web; siendo as, los comandos de condiciones escapan al objetivo del presente tutorial dedicado exclusivamente a HTML. No obstante, dada la necesidad de aplicarlos para hacer funcionar objetos insertados en exploradores Web como Firefox, se dar una breve descripcin del funcionamiento o mecanismo que hay detrs de las condiciones. En el cdigo fuente hay una etiqueta <object> (la primera) con atributos que pueden ser interpretados por IE pero no por Firefox; a continuacin le sigue una condicin la cual ordena al explorador Web que si no es IE ejecute la segunda etiqueta <object> con atributos interpretados por otros exploradores Web que no son IE. El truco detrs de dicha movida es que si tenemos un explorador Web IE el mismo interpretar y ejecutar la primera etiqueta <object>, mientras que al leer la condicin de "si no es IE ejecute la segunda etiqueta <object>", como se trata efectivamente de IE el resultado de dicha condicin ser falso, o sea que se saltear la segunda etiqueta <object> y no la ejecutar. Por el contrario, Firefox no podr interpretar la primera etiqueta <object> y tampoco interpretar los comandos condicionales de IE, ya que los tomar como simple texto; pero s podr entender la segunda etiqueta <object>, logrando insertar as finalmente la pelcula Flash. A continuacin analizaremos la sintaxis de los comandos condicionales de IE. El condicional [if !IE]> se puede descomponer de la siguiente manera: La palabra if significa "si" en ingls; el smbolo !significa "no es"; mientras que IE, como ya sabemos, son las siglas de Internet Explorer; de esta manera se arma la condicin "si no es IE". El comando [endif],

simplemente seala el fin del condicional "si" ("end" significa final), por lo tanto significa "finalizar si". En el medio, entre el principio de la condicin y el final se coloca la etiqueta a ejecutar por otros exploradores Web y a ignorar por IE. Un detalle al que hay que prestarle atencin es que los comandos condicionales deben estar dentro de comentarios, ya que los exploradores Web como Firefox, al no interpretarlos los considerarn como simple texto. Por lo tanto el cdigo de los comandos condicionales de IE quedara as: <!--[if !IE]><!--> y <!--<![endif]-->. Al figurar como comentarios, Firefox se lo saltear leyendo directamente la segunda etiqueta <object> que podr interpretar dadas unas modificaciones en los atributos. Ahora pasemos a analizar los atributos de <object> que permiten visualizar el objeto insertado en otros exploradores Web que no sean IE. Una de las razones por las que no se puede insertar correctamente el objeto en otros browsers como Firefox, es por el atributo classid que es incompatible con estos ltimos. Por lo tanto debemos reemplazar aclassid con el atributo type (tipo), en el que se indica el tipo de aplicacin que se quiere insertar; siendo en el ejemplo nuestro "application/x-shockwave-flash" (aplicacin Shockwave Flash). Otro atributo que debemos agregar es data, en donde se debe declarar la URL donde se encuentra el objeto a insertar. No importa que en el atributo value de <param>haya sido tambin declarado, se trata de una redundancia necesaria. Con las modificaciones recin descritas finalmente se podr reproducir la pelcula Flash en todos los exploradores Web. Sin embargo no todo es tan simple, hay unos puntos que hay que aclarar antes. Microsoft ha anunciado que a partir de Internet Explorer 10, los condicionales IE no funcionan ms en pginas Web diseadas en versin HTML 5; por lo tanto la implementacin de dichos condicionales no garantiza su funcionamiento en futuras versiones de IE. Otra manera de hacer que el objeto insertado pueda ser visualizado en todos los exploradores Web es con la etiqueta<embed>; no obstante hay que aclarar que dicha etiqueta se haba desaprobado en versiones HTML 4 y XHTML 1.0; pero volvi a ser aprobada en HTML 5. Para utilizarla en versiones HTML 4 y XHTML hay que declarar en<!DOCTYPE> que se trata de una versin de tipo transicional; en HTML 5 la etiqueta <embed> funcionar sin ningn problema. Veamos el cdigo fuente: <html> <head> <title>Ejemplo de programa insertado</title> </head> <body> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v ersion=8,0,0,0" width="708" height="137"> <param name="movie" value="http://www.advanceclean.com.ar/botonera.swf" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="" quality="high" width="708" height="137" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" /> </object>

</body> </html> En el cdigo fuente anterior se puede ver que <embed> se coloca entre las etiquetas <object> de apertura y cierre, reemplazando los comandos condicionales de IE y la etiqueta <object> para browsers como Firefox. Los parmetros del objeto en vez de ser definidos en etiquetas separadas <param>, son definidos en atributos dentro de la etiqueta<embed>. Los atributos utilizados son: src, donde se declara la direccin del objeto a insertar; allowScriptAccess que cumple la misma funcin que en su versin de valor en la etiqueta <param>, type para indicar el tipo de aplicacin que se inserta ypluginspage (pgina del plug-in) para indicar la direccin de descarga del plug-in que permite ejecutar el objeto si an no est instalado en el browser. El tipo de solucin a aplicar depende de nosotros y del tipo de finalidad que tendr el sitio Web. Es interesante mencionar que cuando se crean pelculas o archivos .swf, el editor de Flash crea adems automticamente un archivo HTML con un cdigo fuente que aplica el ltimo mtodo de insercin de objetos que vimos, combinando las etiquetas <object> y<embed>. Dicho cdigo fuente puede ser copiado y pegado en la pgina Web que estamos diseando, as como tambin se pueden modificar los valores de algunos parmetros y atributos ajustndolos a los requerimientos nuestros. Cada tipo de objeto utiliza una serie de parmetros propios del mismo, por lo tanto pueden variar de un tipo de aplicacin a otra.

Agregar audio en HTML

Agregar audio a una pgina Web no es tan simple, ya que se requieren algunos trucos para lograr que todos los exploradores Web y los distintos sistemas operativos puedan reproducir sin problemas los archivos de audio de la pgina. La forma ms fcil de agregar archivos de audio en una pgina es utilizando el reproductor gratuito de Yahoo. Lo nico que hay que hacer es agregar en la pgina un corto cdigo de Javascript, que se encuentra en el servidor de Yahoo mediante la etiqueta <script>. Se debe apuntar hacia la direccin URL donde est ubicado el reproductor para que pueda ser aadido en la pgina. Luego se agregan unos simples enlaces, con la etiqueta <a> que apuntan hacia los archivos de audio que queremos agregar en la pgina. Al tocar cualquiera de los enlaces, el reproductor comenzar a reproducir el audio. Veamos un ejemplo: <html> <head> <title>Ejemplo de Audio</title> </head> <body> <p><a href="cancion1.mp3">Canci&oacute;n 1</a></p> <p><a href="cancion2.mp3">Canci&oacute;n 2</a></p> <p><a href="cancion3.mp3">Canci&oacute;n 3</a></p> <p><a href="cancion4.mp3">Canci&oacute;n 4</a></p> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

</body> </html> Como se ve en el cdigo fuente anterior, la etiqueta <script> agrega el reproductor de Yahoo, ya que en el atributo src se declar la direccin donde se encuentra el cdigo fuente del reproductor; haciendo que de esta manera el mismo sea incrustado en la pgina. De esta manera si en la misma pgina hay hipervnculos hacia archivos de audio, estos se abrirn y sern ejecutados automticamente por el reproductor aadido de Yahoo. Los nombres de archivo del ejemplo anterior deben ser reemplazados por nombres de archivos de audio reales, ya que esos son solamente para ejemplificar. Otra manera de agregar audio en una pgina Web es mediante la etiqueta <audio>, entre cuyas etiquetas de apertura y cierre se pone la etiqueta <source>. La etiqueta <audio> se utiliza para introducir el reproductor del explorador Web en la pgina; para ello hay que incluir el atributo controls cuyo valor tambin es "controls". Pero eso solamente coloca el reproductor en la pgina; para agregar un archivo de audio se debe incluir entre las etiquetas de apertura y cierre de<audio> la etiqueta <source>, en cuyo atributo src se debe indicar la direccin de la ubicacin del archivo de audio, mientras que en el atributo type se indica de qu tipo de archivo o formato se trata. Estos dos atributos son necesarios y siempre deben utilizarse. Por temas de compatibilidad en distintos browsers o exploradores Web es recomendable que los archivos de audio se suban en formato .mp3 y .ogg, ya que si un formato no puede ser reproducido por un cierto browser otro formato s podr. Veamos un ejemplo: <html> <head> <title>Ejemplo de Audio</title> </head> <body> <audio controls="controls"> <source src="cancion.mp3" type="audio/mpeg" /> <source src="cancion.ogg" type="audio/ogg" /> </audio> </body> </html> Hay que aclarar que la etiqueta <audio> solamente est validada en la versin de HTML 5; por lo tanto solamente funcionar en exploradores Web nuevos. Tampoco funcionar en cdigos fuente que han sido declarados en <!DOCTYPE> como escritos en versiones XHTML o HTML 4. As, al utilizar esta etiqueta hay que aclarar que se trabaja en la versin HTML5. Otro reproductor similar al de Yahoo es el reproductor de Google; pero a diferencia del anterior que est basado en un cdigo Javascript, el reproductor de Google se incrusta en la pgina con la etiqueta <embed>; en cuyo atributo type(tipo) se debe indicar que se trata de una aplicacin shockwave-flash mediante el siguiente valor "application/x-shockwave-flash"; mientras que en el atributo src se debe indicar la direccin del reproductor en el servidor de Google as como la direccin del archivo de audio a reproducir de la siguiente manera:

"http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=cancion4.mp3", donde "http://www.google.com/reader/ui/3523697345-audio-player.swf" es la ubicacin del reproductor de Google y"cancion4.mp3" es la direccin URL del archivo de audio a reproducir. Tambin se pueden agregar los atributos width y height para indicar el ancho y el alto que ocupar el reproductor. Veamos un ejemplo: <html> <head> <title>Ejemplo de Audio</title> </head> <body> <embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audioplayer.swf?audioUrl=cancion4.mp3" height="200" width="200"></embed> </body> </html>

Como se ve en el cdigo fuente anterior, no se pone nada entre las etiquetas de apertura y cierre de <embed>. Adems en src se indican los valores de la ubicacin del reproductor y luego de la parte que dice "audioUrl" se indica la direccin del audio.

Agregar video en HTML

As como con el audio, agregar videos en una pgina Web no es tan simple por motivos de compatibilidad. Los comando existentes pueden funcionar en algunos browsers mientras que en otros no; as como hay formatos de video que no pueden ser reproducidos en ciertos sistemas operativos. Tambin hay que tener en cuenta que hay etiquetas no compatibles en versiones anteriores de HTML, haciendo que los browsers ms viejos no puedan reproducir los videos agregados. El primer mtodo que veremos para agregar videos es el que utiliza la etiqueta <video>. Esta etiqueta es nueva y est validada nicamente a partir de HTML 5; por lo tanto los usuarios de exploradores Web ms viejos que no soportan HTML 5 no podrn ver estos videos, por suerte sin embargo la mayora de los usuarios hoy da utilizan browsers actualizados. Tambin si en <!DOCTYPE> se indica que el cdigo fuente est escrito en versin XHTML, tampoco funcionar. Al igual que <audio>, la etiqueta <video> agrega el reproductor en la pgina, mientras que la etiqueta acompaante<source>, que debe ir colocada entre las etiquetas de apertura y cierre <video>, es la que indica la direccin del video a reproducir. Los atributos de <video> width y height definen el ancho y el alto del reproductor respectivamente; mientras que el atributo controls incluye los controles del reproductor, el valor de este atributo debe ser tambin "controls"; este atributo es muy recomendable incluso se puede decir que es obligatorio, ya que sin controles ede reproductor el video no podr ser reproducido.

Con la etiqueta <source> se indica la fuente del video a reproducir mediante el atributo src; as como el tipo y formato del mismo en el atributo type. Es recomendable convertir el video a varios formatos con una aplicacin especial, para que pueda ser reproducido en browsers o sistemas operativos que no soportan ciertos formatos; por lo tanto entre las etiquetas de apertura y cierre <video> se tend rn que agregar varias etiquetas <source> con los archivos del video en distintos formatos. Veamos un ejemplo: <html> <head> <title>Ejemplo de Video</title> </head> <body> <video width="200" height="200" controls="controls"> <source src="videodeejemplo.ogg" type="video/ogg" /> <source src="videodeejemplo.mp4" type="video/mp4" /> <source src="videodeejemplo.webm" type="video/webm" /> Su browser no soporta la etiqueta video </video> </body> </html> En el ejemplo anterior se agregaron varios formatos del mismo video por las dudas si no es compatible con algn browser o sistema operativo. Adems se puede ver un texto antes de la etiqueta de cierre </video> que aparecer si el reproductor no funciona; por distintos motivos como tener una pgina escrita en versin HTML 4.01 o XHTML estricta; o por ser un browser viejo. Para agregar videos tambin se puede utilizar la etiqueta <embed> en cuyo atributo src se indica la direccin del video y en los atributos width y height el ancho y el alto respectivamente. Pero es importante aclarar que no se incluyen controles de reproductor y el video se reroducir automticamente. Este mtodo es ms conveniente para reproducir videos Flash en formato swf que videos en otros formatos. Uno de los inconvenientes de la etiqueta <embed> es que no est validado en la versin HTML 4, por lo tanto solamente funcionar en cdigos fuente declarados como HTML 5 o HTML 4 no estricto y por lo tanto en nuevos exploradores Web. Otra cosa a tener en cuenta es que los videos Flash no pueden ser reproducidos en iPad y iPhone. Veamos un ejemplo: <html> <head> <title>Ejemplo de Video</title> </head> <body> <embed src="pelicula.swf" width="200" height="200" /> </body>

</html>

Otra etiqueta similar a <embed> para agregar videos es <object>; la cual tambin es ms utilizada para agregar videos Flash de formato swf. En el atributo data se debe indicar la direccin del video; mientras que con los atributos width y height se establecen el ancho y el alto del video respectivamente. La etiqueta <object> funciona tanto en versiones HTML 4, como XHTML y HTML 5. Tambien hay que tener en cuenta que los videos Flash no pueden ser reproducidos en iPad y iPhone. Veamos un ejemplo:

<html> <head> <title>Ejemplo de Video</title> </head> <body> <object data="pelicula.swf" width="200" height="200" /> </body> </html>

Agregar videos de Youtube en HTML

Hoy da est muy de moda agregar videos de Youtube en pginas Web, esto se logra usando un marco incorporado con la etiqueta <iframe>, en cuyo atributo src se indica la direccin de la pgina Youtube del video. Sin embargo no se trata de solamente copiar y pegar la URL, ya hay que hacer una pequea modificacin en la direccin. Por ejemplo en un video de Youtube ubicado en la pgina "http://www.youtube.com/watch?v=cMG-CaFnZ9s" hay que hacer una pequea modificacin que deja la direccin con el siguiente formato: "http://www.youtube.com/v/cMG-CaFnZ9s". En los atributoswidth y height se indican el ancho y el alto respectivamente con el que el video Youtube aparecer en la pgina que diseamos. Veamos un ejemplo: <html> <head> <title>Ejemplo de Video Youtube</title> </head> <body> <iframe src="http://www.youtube.com/v/cMG-CaFnZ9s" width="200" height="200" ></iframe> </body> </html>

Tambin se puede utilizar la etiqueta <embed> para agregar videos de Youtube en una pgina Web, en cuyo atributosrc, al igual que con <iframe>, hay que indicar la direccin de la pgina Youtube donde se encuentra el video a incluir; tambin con el formato de la direccin modificado, como se hace con <iframe>. Adems hay que incluir un atributo type(tipo), cuyo valor debe indicar el tipo de aplicacin que se agrega; que sera "application/x-shockwaveflash" (aplicacin Shockwave-Flash). Veamos un ejemplo: <html> <head> <title>Ejemplo de Video Youtube</title> </head> <body> <embed src="http://www.youtube.com/v/cMG-CaFnZ9s" width="200" height="200" type="application/x-shockwave-flash"></embed> </body> </html>

Recordemos que la etiqueta <embed> qued desaprobada en HTML 4.01 y luego volvi a ser aprobada por la W3C en la versin de HTML 5. Por lo tanto si se quiere utilizar <embed> hay que declarar en <!DOCTYPE> un cdigo fuente transicional o de HTML 5.

Etiquetas de cabecera en HTML

Hasta ahora hemos trabajado con elementos HTML visibles, o sea que son visualizados en el explorador Web, dado que han sido declarados dentro de la seccin <body> (cuerpo) del cdigo fuente, que es donde se insertan los elementos estructurales de la pgina. Pero todava nos falta estudiar la seccin de la cabecera del cdigo fuente <head>, donde se ubican las etiquetas de elementos no visibles, o sea que no son visualizado en la pgina y solamente cumplen funciones informativas acerca del documento Web. La informacin que brindan las etiquetas de la seccin de la cabecera a pesar de no ser directamente perceptible por los usuarios es de gran importancia, puesto que es interpretada por los exploradores Web, motores de bsqueda y otros servicios de Internet. De las etiquetas de la cabecera solamente aprendimos a utilizar una, <title>, de hecho fue una de las primeras que vimos en el curso de HTML, que sirve para definir el ttulo de la pgina que aparecer en la barra de ttulo o en la pestaa. En realidad se trata de la nica etiqueta de cabecera que brinda resultados visibles a los usuarios, aunque se encuentren fuera del cuerpo del contenido de la pgina, se pueden ver. El resto de las etiquetas brindan nicamente informacin. Comenzaremos con la etiqueta <base>, la cual brinda informacin a los exploradores Web. Se utiliza para indicar la URL base de todas las URL relativas de los hipervnculos, imgenes y otros elementos que hay en la pgina. Por ejemplo si la URL base que se indica en <base> es "http://www.ejemplo.com/paginas/" y en el atributo src de una etiqueta <img>de imagen indicamos la direccin "imagen1.jpg", el explorador Web cargar la imagen ubicada

en"http://www.ejemplo.com/paginas/imagen1.jpg". Tambin se utiliza para definir el target (objetivo) de todos los hipervnculos. Veamos un ejemplo: <html> <head> <title>Ejemplo de URL y target base</title> <base href="http://www.ejemplo.com/paginas/" target="_blank" /> </head> <body> <img src="imagen1.jpg" width="200" height="200" alt="imagen1" /> <a href="inicio.html">Inicio</a> <a href="servicios.html">Servicios</a> <a href="productos.html">Productos</a> <a href="ayuda.html">Ayuda</a> </body> </html>

En el ejemplo anterior la URL base es "http://www.ejemplo.com/paginas/", por lo tanto la imagen de la etiqueta <img>deber estar en "http://www.ejemplo.com/paginas/imagen1.jpg" para poder ser visualizada; mientras que los hipervnculos abrirn las pginas que se encuentran en "http://www.ejemplo.com/paginas/inicio.html","http://www.ejemplo.com/paginas/servicios.htm l", "http://www.ejemplo.com/paginas/productos.html" y"http://www.ejemplo.com/paginas/ayuda.html". Todos los hipervnculos se abrirn en ventanas o pestaas nuevas segn lo indicado en <base>. Los valores posibles del atributo target de <base> son los mismos que los de la etiqueta <a>; "_blank" para abrir las pginas en ventanas o pestaas nuevas; "_top" abre la pgina en la misma ventana de la pgina abierta (es el valor por omisin); "_self" abre la pgina en el mismo marco del hipervnculo (muy poco utilizado, solamente sirve si se trabaja con "frames"; y finalmente se puede declarar el nombre del marco (frame) donde se quiere abrir la pgina del hipervnculo. En realidad la funcin de <base> no es estructuralmente muy importante, simplemente ofrece comodidad al diseador, para evitar tener que indicar la URL absoluta de cada imagen e hipervnculo; o el target de cada hipervnculo. Por ejemplo si primero declaramos target "_blank" y despus nos arrepentimos queriendo que los hipervnculos se abran en la misma ventana o pestaa, solamente tenemos que cambiar el target de <base> en lugar de tener que modificar el target de cada <a>. ELEMENTO DE CABECERA LINK La etiqueta <link> de la seccin de cabecera sirve para vincular un recurso externo a una pgina Web. Su utilizacin ms comn es para vincular archivos de hojas de estilo CSS externos con la pgina Web. Como ya hablamos antes, los modificadores de estilo CSS pueden insertarse individualmente dentro de las etiquetas HTML con el atributo style; pueden declararse dentro de la seccin <head> mediante la utilizacin de la etiqueta <style> de la cual hablaremos ms tarde; y tambin pueden declararse en un archivo CSS externo el cual es insertado o importado en la pgina Web con la etiqueta <link>.

Para graficarlo de otra manera cuando el explorador Web carga el cdigo fuente de la pgina HTML, adems le adjunta el cdigo fuente del archivo de hojas de estilo CSS externo dentro de la seccin de cabecera, resultando un slo cdigo fuente. Veamos un ejemplo: <html> <head> <title>Ejemplo de archivo CSS insertado</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <p>P&aacute;gina Web con archivo de estilo insertado.</p> </body> </html>

El cdigo fuente anterior no genera ninguna diferencia visual, ya que para eso se necesitan tener algunos conocimientos de CSS que van ms all del objetivo del actual curso de HTML. El ejemplo anterior simplemente muestra cmo vincular un archivo o recurso externo con el documento HTML utilizando la etiqueta <link>. A continuacin analizaremos cada atributo. Primero tenemos el atributo rel (por relationship que en ingls significa relacin), en donde se indica qu tipo de relacin tiene la pgina con el archivo o recurso con el que se vincula; en otras palabras, se indica para qu se quiere vincular el recurso con el documento HTML. En el ejemplo la relacin indicada es "stylesheet" (hoja de estilo CSS); lo que significa que se trata de un archivo CSS con estilos que sern insertados en el cdigo fuente HTML en el momento que se cargue la pgina. En type se indica el tipo o formato de archivo a insertar; en el ejemplo se declara el valor "text/css", significando que se trata de un archivo en formato texto y de tipo css. Finalmente en el atributo href se indica la direccin del archivo o recurso a insertar. Aunque se pueden vincular muchos tipos de archivos, la etiqueta <link> es ms frecuentemente utilizada para vincular hojas de estilo CSS. En la seccin de cabecera se pueden incluir mltiples etiquetas <link>, vinculando al documento HTML con varios archivos de recurso. As por ejemplo se pueden tener varios archivos de hoja de estilo CSS vinculados o insertados en la pgina HTML. ELEMENTO DE CABECERA STYLE Como ya se mencion antes, se pueden incluir los modificadores de estilo CSS dentro de la seccin de cabecera del archivo HTML, en lugar de insertar un archivo CSS conteniendo a los mismos. Dichos modificadores de estilo sern aplicados en los elementos HTML de la pgina. Para lograr eso se requiere la utilizacin de la etiqueta <style>, dentro de la cual (entre la etiqueta de apertura y cierre) se debe escribir el cdigo fuente en CSS. Los modificadores de estilo incluidos se aplicarn a los elementos HTML de la seccin de contenido visible o cuerpo <body>. El atributo que se utiliza en <style> es type, y sirve para indicar el tipo de estilo que se incluye; siendo el valor siempre "text/css" (tipo de texto css).

Veamos un ejemplo: <html> <head> <title>Ejemplo de estilo CSS</title> <style type="text/css"> h1 {color: red;} h2 {color: green;} p {color: blue;} </style> </head> <body> <h1>T&iacute;tulo 1 de color rojo.</h1> <h2>T&iacute;tulo 2 de color verde.</h2> <p>P&aacute;rrafo de color azul.</p> </body> </html>

En el ejemplo anterior se puede ver el cdigo fuente CSS entre las etiquetas de apertura y cierre <style>, con modificadores de estilo que definen los colores de los elementos <h1>, <h2> y <p> del cuerpo <body> de la pgina Web. ELEMENTOS META HTML Uno de los tipos de elementos de cabecera ms utilizados son los <meta>, los cuales proveen datos o informacin acerca del documento o pgina Web para los browsers, motores de bsqueda y otros servicios Web. Veamos como funcionan. Los recursos o archivos que se transmiten entre los servidores y los exploradores Web, lo hacen cumpliendo ciertas normas o protocolos llamados HTTP (Hypertext Transfer Protocol que en ingls significa Protocolo de Transferencia de Hipertexto). Por eso mismo en las URL de las direcciones Web se antepone el tipo de protocolo al que responde el documento a descargar por el browser "http://". Los tipos de recursos que se descargan son documentos HTML, imgenes, videos, etc. Cuando se abre una pgina Web ocurren una serie de actividades que el usuario no ve entre el explorador Web (denominado cliente en el protocolo HTTP) y el servidor; los cuales intercambian un cierto nmero de mensajes. Antes de descargar los recursos que forman parte de una pgina Web, el browser (cliente) enva un mensaje de peticin al servidor para descargar la pgina Web y los recursos que la componen; como respuesta el servidor le enva otro mensaje y a continuacin los recursos de la pgina. El mensaje de peticin del browser tiene la siguiente primera lnea o rengln: GET /archivo.html HTTP/1.1 El mensaje anterior significa "dame el archivo del directorio raiz llamado archivo.html, soy compatible con la versin de protocolo HTTP 1.1".

El mensaje de respuesta del servidor tiene en la primera lnea o rengln (status line - lnea de estado en ingls) lo siguiente: HTTP/1.1 200 OK El mensaje anterior significa "los recursos han sido enviados satisfactoriamente respetando el protocolo HTTP 1.1". El nmero 200 es un cdigo que significa que lo pedido se ha enviado exitosamente. Existen distintos cdigos de mensaje de respuesta, por ejemplo el cdigo significa 401 "no autorizado", 402 "se requiere pago", 403 "prohibido", 404 "no se encuentra", etc. Adems de la primera lnea o lnea de estado, el mensaje de respuesta puede contener ms lneas con informacin para el browser acerca de la pgina. Dichas lneas pueden ser agregadas por nosotros mediante la utilizacin de la etiqueta<meta>. La estructura de las etiquetas <meta> y sus atributos para proveer informacin a los browsers acerca de la pgina es la siguiente: <meta http-equiv="tipo-de-informacin" content="valor-informacin" /> Como se puede ver hay dos atributos, uno es http-equiv, cuyo valor es el tipo de informacin que se va a pasar, y contenten el cual se indica el valor del tipo de informacin declarado en http-equiv. A continuacin veremos distintos tipos de informacin meta que se pueden especificar en la cabecera del cdigo fuente de la pgina Web que estamos diseando. Mensaje meta content-type El tipo de informacin meta "content-type" se utiliza para que en el mensaje de respuesta del servidor, cuando se descarga una pgina, se especifique el tipo de juego de caracteres que utiliza la pgina. En la gran mayora de los sitios Web se utiliza el juego de caracteres UTF-8, que responde al estndar de codificacin de caracteres Unicode, con el cual cada carcter y smbolo tiene un cdigo numrico que lo representa. Se recomienda que siempre se agregue este mensaje meta. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> En http-equiv se indica el nombre de la informacin meta "content-type" (tipo de contenido) y en el atributo content(contenido) se indica que es texto de html que obedece al juego de caracteres UTF-8 "text/html; charset=UTF-8". Se recomienda agregar la informacin meta "content-type" en todas las pginas que diseemos como se mostr recin en el ejemplo. Mensaje meta date La informacin meta "date" se utiliza para especificar a los exploradores Web la fecha y la hora en que la pgina fue creada: <meta http-equiv="date" content="Wed, 20 Apr 2011 22:00:00" /> Mensaje meta last-modified El mensaje meta "last modified" indica a los exploradores Web y buscadores cundo fue modificada por ltima vez la pgina Web: <meta http-equiv="last-modified" content="Mon, 20 Dec 2011 20:20:00" />

Mensaje meta cache-control Los exploradores Web tienen la capacidad de almacenar las pginas que son visitadas frecuentemente, para no tener que descargar del servidor, los recursos que la componen (imgenes, videos, pgina HTML, archivo de estilo CSS, etc) cada vez que se visita. En lugar de descargarla del servidor, la descarga de una carpeta de archivos temporales dentro del disco duro de nuestra computadora, pudiendo as acceder a ella y visualizarla mucho ms rpido. Dicho mecanismo se llama cache, y las ventajas que ofrece es que se puede acceder ms rpido a pginas que visitamos frecuentemente; sin embargo una de las desventajas es que si la pgina se actualiza frecuentemente, es posible que los usuarios que la tienen guardada en cache, no vean las modificaciones inmediatamente. Por ejemplo en portales de diarios o peridicos no se recomienda permitir el cache, ya que dichos sitios Web se actualizan frecuentemente y no se veran las modificaciones. Existen dos tipos de chache, los privados y los pblicos. Los caches privados son los provistos por el explorador Web como vimos recin. Los caches pblicos por otro lado, pertenecen a los proveedores de servicios de Internet ISP (Internet Service Provider), o sea la empresa que nos permite conectarnos a Internet. Ese tipo de cache se denomina "cache de proxy". Como es utilizado por mucha gente, y el cache del proveedor de Internet es compartido por todos ellos, cuando una pgina es muy vista por algunos usuarios, la misma es cacheada y puede ser descargada por otros usuarios ms rpidamente desde el servidor del ISP. El proxy del ISP se puede habilitar desde la seccin de configuracin de proxy del browser. A continuacin veremos los distintos tipos de informacin meta "cache-control" que podeos utilizar. <meta http-equiv="cache-control" content="no-cache" /> Por ejemplo en la lnea anterior se indica que la pgina no debe ser cacheada por los exploradores Web y tiene que ser descargada. Sin embargo hay que aclarar que en muchos browsers lo que hace es guardarla y cada vez que se quiere ver la pgina, primero chequea en el servidor si hay alguna modificacin o actualizacin de la misma y si no la hay la abre directamente de la carpeta de archivos temporales de Internet. Para que directamente no se guarde la pgina hay que escribir: <meta http-equiv="cache-control" content="no-store" /> La lnea anterior indica que no debe cachear la pgina ni almacenarla; por lo tanto cada vez que se quiere abrir la pgina, la debe descargar del servidor. Sin embargo la mejor opcin para no cachear una pgina es utilizar los dos valores: <meta http-equiv="cache-control" content="no-cache, no-store" />
Por el contrario si lo que queremos es que la pgina sea cacheada, tenemos las siguientes opciones que se dan a continuacin:

<meta http-equiv="cache-control" content="private" /> En la lnea anterior se indica que la pgina puede ser cacheada en los browsers de los usuarios. Si se quiere que sea cacheada tanto por los browsers como por los proxys de los ISP de manera pblica, hay que escribir la siguiente lnea meta: <meta http-equiv="cache-control" content="public" /> Mensaje meta pragma En versiones ms viejas de browsers, se utilizaba para indicar que la pgina no deba ser cacheada el mensaje meta "pragma".

<meta http-equiv="pragma" content="no-cache" /> Sin embargo en nuevas versiones de browsers ya no es tan utilizada y se la pasa por alto, siendo ms til "cache-control". Tambin como otra opcin se pueden utilizar de manera combinada tanto el meta "pragma" as como "cache-control". Mensaje meta refresh Con el mensaje meta "refresh" se puede hacer que la pgina se actualice cada cierta cantidad de segundos automticamente, o sea que se recarga sola sin necesidad de que el usuario presione F5 o el botn del browser de "actualizar". Adems se puede hacer que despus de pasados los segundos indicados en lugar de recargarse la misma pgina se abra una pgina en otra direccin. Por lo general dicha modalidad es utilizada por administradores de sitios que se han mudado de direccin, para que los usuarios que entran a la direccin vieja sean redireccionados despes de pasados unos segundos. Pero hay que tener en cuenta que a los buscadores no les gustan mucho las pginas que se actualizan o recargan automticamente, resultando en puestos ms bajos de bsqueda, por lo tanto hay que tratar de evitar "refresh". <meta http-equiv="refresh" content="40" /> En la lnea anterior se indica que la pgina debe ser refrescada (refresh) o recargada cada 40 segundos. La cifra siempre debe indicarse en segundos. Por el contrario si se quiere redireccionar al usuario despus de pasados unos segundos: <meta http-equiv="refresh" content="40; URL=http://www.youbioit.com" /> En la lnea anterior se indica que despus de pasados 40 segundos se debe redireccionar al browser a la direccin indicada. Otra cosa por la que se desaconseja la utilizacin de "refresh" es porque a muchos les molesta que la pgina se recargue sola.
Hasta ahora hemos visto mensajes meta definidos con el atributo http-equiv, ahora veremos meta definidos con el atributo name.

Mensaje meta expires El mensaje meta "expires" (expira) se utiliza para indicar en que fecha expira o caduca la pgina Web. Eso es para que los buscadores dejen de indexar la pgina y por lo tanto desaparezca de los resultados de las bsquedas que hagan los usuarios. En realidad no se recomienda utilizar el mensaje meta "expires" ya que tanto los buscadores como los exporadores Web de hoy da no le prestan atencin. Para que los buscadores no indexen la pgina, se recomienda utilizar "cache-control". <meta name="expires" content="Fri, 30 Dec 2011 20:00" /> Mensaje meta "robots" El mensaje meta "robots" se utiliza para indicarles a los buscadores que acciones pueden tomar en la pgina. Entre las acciones se incluyen permitir indexar la pgina, permitir entrar a otras direcciones a travs de los hipervnculos incluidos en la pgina, prohibir indexar la pgina, prohibir entrar a los hipervnculos de la pgina. Veamos los distintos mensajes meta "robots". Permitido hacer todo (opcin default): <meta name="robots" content="all" /> Permitido indexar:

<meta name="robots" content="index" /> Permitido seguir hipervnculos: <meta name="robots" content="follow" /> Prohibido indexar: <meta name="robots" content="noindex" /> Prohibido indexar y seguir links: <meta name="robots" content="noindex, nofollow" /> Como se puede ver en la ltima lnea, tambin se pueden combinar las distintas opciones. El meta "robots" es muy til si por ejemplo tenemos alguna pgina del sitio que no queremos que se vea en buscadores ya que puede pertenecer a una seccin privada del sitio, como por ejemplo la pgina privada de perfil de usuario en una red social. De lo contrario es conveniente permitir a los buscadores tanto indexar las pginas como tambin permitir que entren a los links para que puedan indexar otras pginas del sitio, resultando en mejores posiciones de bsqueda, lo cual permite ms visitas al sitio. Mensaje meta googlebot Google tiene su propio mensaje meta, similar a "robots", con el cual se puede indicar a Google qu se le permite hacer en la pgina. <meta name="googlebot" content="index, follow" /> La lnea anterior indica a Google que la pgina puede ser indexada y sus links pueden ser visitados por el buscador para indexar tambin las pginas hacia las que apuntan dichos hipervnculos. As podrn estar en resultados de bsquedas de Google. Igualmente es bueno mencionar que dado que por omisin Google puede indexar la pgina as como seguir los links de la misma, indicarle que puede hacer dichas acciones es redundante, agregando una lnea innecesaria al cdigo. En la siguiente lnea le indicamos a Google que no puede indexar la pgina ni tampoco seguir los hipervnculos de la misma. <meta name="googlebot" content="noindex, nofollow" /> Cada vez que el buscador de Google, tambin conocido como la araa de Google, visita un sitio; en lo posible pasa por todas las pginas que forman parte del mismo, utilizando los hipervnculos presentes en cada una. Adems de indexar las pginas, en el momento de cada visita toma una copia de la pgina, para que en caso de no estar disponible en algn momento por problemas tcnicos o de servidor entre otros, el usuario podr ver igualmente la pgina como se encontraba en el momento en que Google hizo una copia cache de la misma. Obviamente un mensaje indica en la parte de arriba, que se trata de una versin cache y no de la pgina actual. Si no queremos que Google tome una copia de la pgina cada vez que la visita, podemos indicarle que no lo haga mediante el siguiente mensaje meta de "googlebot" con valor "noarchive". <meta name="googlebot" content="noarchive" /> Cada vez que realizamos una bsqueda, Google muestra en los resultados un fragmento del texto de la pgina que contiene las palabras incluidas en nuestra bsqueda, marcadas en negrita. Si no queremos que Google muestre en los resultados de bsquedas un fragmento del texto de la pgina hay que incluir el "googlebot" con valor "nosnippet" (no fragmento).

<meta name="googlebot" content="nosnippet" /> Como sucede con el meta "robots", en "googlebot" tambin se pueden combinar varios valores con indicaciones al buscador. <meta name="googlebot" content="nofollow, nosnippet" /> Por ejemplo en la lnea anterior se indica a Google que no puede seguir los links de la pgina ni tampoco dar fragmentos de texto en los resultados de bsqueda. Las combinaciones pueden ser variadas dependiendo de las necesidades del administrador. Mensaje meta "keywords" Quiz uno de los mensajes meta ms utilizados por los desarrolladores Web es "keywords" (palabras clave). Con "keywords" se pueden agregar distintas palabras o frases que tengan relacin con la temtica del texto incluido en la pgina, las cuales pueden ser utilizadas o tomadas en cuenta por los distintos buscadores para promover la pgina a mejores posiciones de resultados de bsqueda. As, si un usuario hace una bsqueda que coincida con la frase incluida en "keywords", es posible que nuestra pgina aparezca en una mejor posicin de resultado de bsqueda, dado que dicha frase fue indexada por el motor de bsqueda. Por ejemplo si en una pgina se habla de electrnica podemos escribir: <meta name="keywords" content="cursos de electronica, tutorial de electronica, transistores, capacitores, fabricacin de circuitos integrados" /> En el ejemplo anterior se incluyen palabras y frases que pueden ser utilizadas por usuarios en bsquedas y que posiblemente por coincidencia hagan que nuestra pgina pueda ser incluida en posiciones de resultado de bsqueda ms altas, siendo la primera pgina de resultados la ms favorable, resultando en mayor cantidad de visitas. Las palabras y frases siempre tienen que estar relacionadas a la temtica de la pgina, y preferentemente que sean exactamente iguales a palabras que aparecen en el texto de la pgina Web. Las palabras clave deben estar separadas por coma. Mensaje meta "description" Otro meta muy utilizado, es "description" el cual sirve para darles una descripcin acerca de la pgina Web a los buscadores; para que dicha descripcin aparezca en los resultados de bsquedas, como texto descriptivo sinttico de la pgina. <meta name="description" content="Pgina de datos acerca de componentes y dispositivos electrnicos; desde transistores hasta circuitos integrados." /> En el mensaje meta anterior se dio una descripcin ficticia acerca de una supuesta pgina de electrnica. Se supone que en los resultados de bsqueda de algunos buscadores debera aparecer el texto del meta "description" debajo del ttulo. Mensaje meta "revisit-after" Con "revisit-after" (revisitar despus de) se le indica a los buscadores cada cunto tienen que volver a visitar la pgina para indexar las actualizaciones. El perodo se marca en das, por lo tanto si se indican 20 das, los buscadores visitarn, revisarn e indexarn la pgina cada 20 das (days). Obviamente se trata de una sugerencia a los buscadores, lo que no significa que visitarn la pgina exactamente con la frecuencia que se indica en "revisit-after", algunos lo harn ms seguido, otros lo harn con menor frecuencia y tambin habrn buscadores que s respetarn el perodo indicado por nosotros. <meta name="revisit-after" content="20 days" />

Mensaje meta "author" Con "author" simplemente se especifica quin es el autor de la pgina Web, se trata de una especie de crdito al desarrollador. <meta name="author" content="Mi nombre" /> Mensaje meta "generator" Con "generator" se indica qu programa o herramienta se utiliz para generar la pgina. Si la diseamos a mano sin la ayuda de algn diseador visual, como Dreamweaver, no hace falta especificar nada, si por el contrario utilizamos un editor de pginas Web, automticamente se agregar una lnea con el meta "generator" con el nombre del programa utilizado. <meta name="generator" content="Dreamweaver" /> Mensaje meta "copyright" Con "copyright" se especifican los derechos de autor y proteccin contra copias. Hay que tener en cuenta que es importante siempre mostrar los derechos de autor en la parte visible de la pgina, sin embargo no est de ms incluir el meta "copyright". <meta name="copyright" content=" 2012 - El nombre de nuestra empresa" /> Mensaje meta "owner" Con "owner" se indica el nombre del propietario del sitio Web y por ende de la pgina que se visita, a veces es el mismo que el autor. <meta name="owner" content="Mi nombre" /> Veamos un ejemplo tomado de uno de los cdigos fuente vistos anteriormente en el que agregamos algunos mensajes meta: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Automotores - El Cuervo de Boedo</title> <meta name="description" content="Venta de automotores nuevos y usados. Somos la concesionaria de automviles ms grande de la ciudad." /> <meta name="keywords" content="marcas de autos, automoviles, vehiculos automotores, ford, chrysler" /> <meta http-equiv="cache-control" content="no-cache, no-store" /> <meta name="revisit-after" content="20 days" /> <meta name="owner" content="Automotores - El Cuervo de Boedo" /> </head> <body> <form action="www.ejemplo.com/formulario-de-contacto.php" method="POST"> <p>Seleccione una marca de autos</p> <select name="marcas"> <option value="Ford">Ford</option>

<option value="Chevrolet">Chevrolet</option> <option value="Chrysler">Chrysler</option> <option value="Buick">Buick</option> <option value="Cadillac">Cadillac</option> </select> <p><input type="submit" value="Enviar" /> </p> </form> </body> </html>

Ya hemos estudiado todo HTML y analizamos todos los elementos y etiquetas del lenguaje. Pero como ya se coment anteriormente, para complementar los conocimientos de diseo y desarrollo Web adquiridos en el actual curso es necesario continuar aprendiendo otros lenguajes, comenzando con CSS y continuar con Javascript y aplicaciones como Flash, Photoshop y Paint Shop Pro. Despus de aprender bien esos lenguajes y herramientas; si estamos convencidos de querer dedicarnos profesionalmente al desarrollo Web, podramos continuar estudiando un lenguaje para la creacin de sitios ms complejos; como redes sociales, sitios de ventas online, buscadores, etc. El lenguaje ms popular para la creacin de sitios de ese tipo es PHP el cual debe ir acompaado de algn tipo de base de datos que debemos aprender a administrar. Sabiendo todo lo anteriormente mencionado podemos dedicarnos profesionalmente al desarrollo Web.

ANEXO - CARACTERES ESPECIALES CODIGOS O SECUENCIAS DE ESCAPE HTML

Nmero de Secuencia de Escape &#34; &#39; &#38; &#60; &#62; &#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168;

Smbolo " ' & < >

Secuencia de escape &quot; &apos; &amp; &lt; &gt; &nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml;

Nombre Comillas Apstrofe Ampersand Menor a Mayor a Espacio Signo de exclamacin invertido Centavo Pound Moneda, signo monetario genrico Yen Barra vertical separada Seccin Diresis

&#169; &#170; &#171; &#172; &#174; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#215; &#247; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202;

&copy; &ordf; &laquo; &not; &reg; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &times; &divide; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc;

Copyright - Derechos de autor Indicador de gnero femenino Comillas bajas angulares (izq) Negacin Marca registrada Guin alto Grados Signo mas menos Superndice 2 (al cuadrado) Superndice 3 (al cubo) Acento agudo Micro Prrafo Punto medio Cedilla Superndice 1 Indicador de gnero masculino Comillas bajas angulares (derecha) Fraccin Fraccin Fraccin Signo de interrogacin invertido Multiplicacin Divisin A mayscula, acento grave A mayscula, acento agudo A mayscula, acento circunflejo A mayscula, con tilde A mayscula, con diresis A mayscula, con anillo Diptongo ae en mayscula C mayscula, con cedilla E mayscula, acento grave E mayscula, acento agudo E mayscula, acento

circunflejo &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; E mayscula, con diresis I mayscula, acento grave I mayscula, acento agudo I mayscula, acento circunflejo I mayscula, con diperesis Letra eth mayscula Letra mayscula O mayscula, acento grave O mayscula, acento agudo O mayscula, acento circunflejo O mayscula, con tilde O mayscula, con diresis O mayscula, con barra inclinada U mayscula, acento grave U mayscula, acento agudo U mayscula, acento circunflejo U mayscula, con diresis Y mayscula, acento agudo Letra Thorn mayscula Letra eszett Letra a, acento grave Letra a, acento agudo Letra a, acento circunflejo Letra a, con tilde Letra a, con diresis Letra a, con anillo Diptongo ae Letra c, con cedilla Letra e, acento grave Letra e, acento agudo Letra e, acento circunflejo Letra e, con diresis Letra i, acento grave Letra i, acento agudo Letra i, acento circunflejo

&#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

&iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

Letra i, con diresis Letra eth Letra Letra o, acento grave Letra o, acento agudo Letra o, acento circunflejo Letra o, con tilde Letra o, con diresis Letra o, con barra inclinada Letra u, acento grave Letra u, acento agudo Letra u, acento circunflejo Letra u, con diresis Letra y, acento agudo Letra thorn Letra y, con diresis