Programacin Web

Ingeniera en Sistemas Computacionales

1.2. Protocolo http (protocolo de transferencia de texto )

1.2.1 Arquitectura del www.
Antes de hablar de lo que es propiamente un navegador, necesitamos hablar obligatoriamente a cerca de lo que es WWW. Este es el servicio ms utilizado en la actualidad por los usuarios de Internet, junto al tan conocido e-mail, del que hablaremos ms adelante.

WWW te permite conectar con un ordenador remoto y acceder a la informacin que ste te proporciona, ya sea texto, imgenes, sonido o programas.
WWW es un acrnimo de World Wide Web, a veces escrito como W3. Lo que pretende WWW es proporcionar al usuario un entorno sencillo, con el que acceder a servicios complejos como puede ser hacer consultas a un servidor de bases de datos.

El invento del Web lleg de las manos de Tim Berners-Lee de la empresa norteamericana CERN, el Laboratorio Europeo para la Fsica de las Partculas, quien lo defini como "un

sistema capaz de saltar de un sitio a otro de una forma automtica, presentando una diversidad de datos que de otra forma no estaran disponibles".

Se predispuso que los recursos disponibles en distintas conexiones fuesen disponibles para cada investigador desde su ordenador, de una forma transparente y exenta de dificultades. Este sistema te ofrece hipertextos, es decir, palabras subrayadas e imgenes recuadradas y diferenciadas del resto, y que al pulsar sobre ellas con el botn del ratn te conducirn a otros textos, imgenes, o incluso otros Web.

Puede parecer exagerado pero el Web ha cambiado en la forma de moverse por Internet, ya que permite a golpe de ratn viajar de un punto a otro de la red.

[Link] http (protocolo de transferencia de texto ).

No podemos hablar de WWW sin hacer mencin del protocolo HTTP. Bsicamente, un protocolo es la forma o el modo que se emplea para comunicarse determinados elementos entre si.

De un modo sencillo podemos decir que es el lenguaje en el que hablan entre si.
Para las pginas Web, este protocolo es el HTTP, que es acrnimo de HyperText Transfer Protocol y que es el lenguaje que emplean los servidores de Web.

Por esta razn se pone la etiqueta "[Link] en la barra de direcciones del navegador cuando introducimos una direccin web. Ya que en la actualidad, los navegadores son capaces de soportar otros servicios como el ftp o el gopher. El uso de estas etiquetas antes de la direccin Web que vamos a usar, le permite al navegador identificar el servicio que empleamos. Pero en el caso de las direcciones Web la etiqueta "[Link] no es necesaria, ya que se trata del servicio por defecto para los navegadores.
Este protocolo de alto nivel est pensado para el futuro, dado que puede negociar la forma en que se representan los datos por la pantalla del ordenador, ya sea en forma de imgenes, sonido, animaciones o videos.

QU ES UN NAVEGADOR?
Para poder acceder al World Wide Web es necesario emplear un programa cliente de este servicio. A estos clientes se les suele denominar "browsers" o "navegadores", ya que al movernos de un servidor Web a otro es como si estuvisemos "navegando" por la red. Los navegadores han sido fundamentales para la popularizacin de Internet, principalmente debido a su facilidad de manejo para usuarios no expertos en informtica y que permiten capturar cualquier documento de Internet, independientemente de su localizacin y formato y presentarlo al usuario. Gracias a esto no es necesario seguir los complicados pasos que requeran el conocimiento del sistema Unix para poder realizar, por ejemplo, la transferencia de un archivo por ftp.

Los navegadores ofrecen un interfaz grfico que permite navegar por la red simplemente usando el ratn en un soporte multimedia, para poder realizar cualquier tipo de bsquedas y encontrar lo que deseamos.
Bsicamente, los navegadores son visualizadores de documentos escritos en lenguaje HTML, los cuales pueden incluir texto, grficos, sonidos, enlaces (links) a otros documentos o servidores Web.

1.2.2 URLs. URL significa Uniform Resource Locator, es decir, localizador uniforme de recurso. Es una secuencia de caracteres, de acuerdo a un formato estndar, que se usa para nombrar recursos, como documentos e imgenes en Internet, por su localizacin.

Los URL fueron una innovacin fundamental en la historia de la Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos establecer hiperenlaces en la World Wide Web (WWW o Web). Desde 1994, en los estndares de la Internet, el concepto de URL ha sido incorporado dentro del ms general de URI (Uniform Resource Identifier - Identificador Uniforme de Recurso), pero el trmino URL an se utiliza ampliamente.

El URL es la cadena de caracteres con la cual se asigna una direccin nica a cada uno de los recursos de informacin disponibles en la Internet. Existe un URL nico para cada pgina de cada uno de los documentos de la World Wide Web, para todos los elementos de Gopher y todos los grupos de debate USENET, y as sucesivamente. El URL de un recurso de informacin es su direccin en Internet, la cual permite que el navegador la encuentre y la muestre de forma adecuada. Por ello el URL combina el nombre del ordenador que proporciona la informacin, el directorio donde se encuentra, el nombre del archivo y el protocolo a usar para recuperar los datos.

El formato general de un URL es:

protocolo://mquina/directorio/archivo

Tambin pueden aadirse otros datos:

protocolo://usuario:contrasea@mquina puerto/directorio/archivo Por ejemplo: [Link]

Un URL se clasifica por su esquema, que generalmente indica el protocolo de red que se usa para recuperar, a travs de la red, la informacin del recurso identificado. Un URL comienza con el nombre de su esquema, seguida por dos puntos, seguido por una parte especfica del esquema'.
Algunos ejemplos de esquemas URL: http - recursos HTTP https - HTTP sobre SSL. Secure Sockets Layer -Protocolo de ftp - File Transfer Protocol. Protocolo de Transferencia de mailto - direcciones E-mail ldap - bsquedas LDAP Lightweight Directory Access Protocol.
es un protocolo a nivel de aplicacin que permite el acceso a un servicio de directorio ordenado y distribuido para buscar diversa informacin en un entorno de red. Archivos. Capa de Conexin Segura-

file - recusos disponibles en el sistema local, o en una red local news - grupos de noticias Usenet (newsgroup) gopher - el protocolo Gopher (ya en desuso) telnet - el protocolo telnet data - el esquema para insertar pequeos trozos de contenido en los documentos Data: URL

Sintaxis Genrica URL Todos los URL, independientemente del esquema, deben seguir una sintaxis general. Cada esquema puede determinar sus propios requisitos de sintaxis para su parte especfica, pero el URL completo debe seguir la sintaxis general. Usando un conjunto limitado de caracteres, compatible con el subconjunto imprimible de ASCII, la sintaxis genrica permite a los URL representar la direccin de un recurso, independientemente de la forma original de los componentes de la direccin. Los esquemas que usan protocolos tpicos basados en conexin usan una sintaxis comn para "URI genricos", definida a continuacin: esquema://autoridad/ruta?consulta#fragmento La autoridad consiste usualmente en el nombre o Direccin IP de un servidor, seguido a veces de dos puntos (":") y un nmero de Puerto TCP. Tambin puede incluir un nombre de usuario y una clave, para autenticarse ante el servidor.

La ruta es la especificacin de una ubicacin en alguna estructura jerrquica, usando una barra diagonal ("/") como delimitador entre componentes. La consulta habitualmente indica parmetros de una consulta dinmica a alguna base de datos o proceso residente en el servidor. El fragmento identifica a una porcin de un recurso, habitualmente una ubicacin en un documento.
Ejemplo: URL en HTTP

Los URL empleados por HTTP, el protocolo usado para transmitir pginas web, es el tipo ms popular de URL y puede ser usado para mostrarse como ejemplo. La sintaxis de un URL HTTP es:

esquema://anfitrin:puerto/ruta?parmetro=valor#enlace

esquema, en el caso de HTTP, en la mayora de las veces equivale a http, pero tambin puede ser https cuando se trata de HTTP sobre una conexin TLS (para hacer ms segura la conexin). Muchos navegadores web permiten el uso de esquema://usuario:contrasea@anfitrin:puerto/... para autenticacin en HTTP. Este formato ha sido usado como una "hazaa" para hacer difcil el identificar correctamente al servidor involucrado. En consecuencia, el soporte para este formato ha sido dejado de lado por algunos navegadores. anfitrin, la cual es probablemente la parte que ms sobresale de un URL, es en casi todos los casos el nombre de dominio de un servidor, [Link].: [Link], [Link], etc. La porcin :puerto especifica un nmero de puerto TCP. Usualmente es omitido (en este caso, su valor por omisin es 80) y probablemente, para el usuario es lo que tiene menor relevancia en todo el URL.

La porcin ruta es usada por el servidor (especificado en anfitrin) de cualquier forma en la que su software lo establezca, pero en muchos casos se usa para especificar un nombre de archivo, posiblemente precedido por nombres de directorio. Por ejemplo, en la ruta /wiki/Vaca, wiki sera un (seudo-)directorio y Vaca sera un (seudo-)nombre de archivo. La parte mostrada arriba como ?parmetro=valor se conoce como porcin de consulta (o tambin, porcin de bsqueda). Puede omitirse, puede haber una sola pareja parmetro-valor como en el ejemplo, o pueden haber muchas de ellas, lo cual se expresa como ?param=valor&otroParam=valor&.... Las parejas parmetro-valor nicamente son relevantes si el archivo especificado por la ruta no es una pgina web simple y esttica, sino algn tipo de pgina automticamente generada. El software generador usa las parejas parmetro-valor de cualquier forma en que se establezca; en su mayora transportan informacin especfica a un usuario y un momento en el uso del sitio, como trminos concretos de bsqueda, nombres de usuario, etc.

(Observe, por ejemplo, de qu forma se comporta el URL en la barra de direcciones de su navegador durante una bsqueda Google: su trmino de bsqueda es pasado a algn programa sofisticado en [Link] como un parmetro, y el programa de Google devuelve una pgina con los resultados de la bsqueda.) La parte #enlace, por ltimo, es conocida como identificador de fragmento y se refiere a ciertos lugares significativos dentro de una pgina; por ejemplo, esta pgina tiene enlaces internos hacia cada cabecera de seccin a la cual se puede dirigir usando el ID de fragmento. Esto es relevante cuando un URL de una pgina ya cargada en un navegador permite saltar a cierto punto en una pgina extensa. Un ejemplo sera este enlace, que conduce a esta misma pgina y al comienzo de esta seccin. (Observe cmo cambia el URL en la barra de direccin de su navegador cuando hace clic en el enlace.)

Una cookie (pronunciado ['[Link]]; literalmente galleta) es un fragmento de informacin que se almacena en el disco duro del visitante de una pgina web a travs de su navegador, a peticin del servidor de la pgina. Esta informacin puede ser luego recuperada por el servidor en posteriores visitas. En ocasiones tambin se le llama "huella". Las invent Lou Montulli, un antiguo empleado de Netscape Communications. Al ser el protocolo HTTP incapaz de mantener informacin por s mismo, para que se pueda conservar informacin entre una pgina vista y otra (como login de usuario, preferencias de colores, etc), sta debe ser almacenada, ya sea en la URL de la pgina, en el propio servidor, o en una cookie en el ordenador del visitante. De esta forma, los usos ms frecuentes de las cookies son: Llevar el control de usuarios: cuando un usuario introduce su nombre de usuario y contrasea, se almacena una cookie para que no tenga que estar introducindolas para cada pgina del servidor. Sin embargo una cookie no identifica a una persona, sino a una combinacin de computador y navegador.

Conseguir informacin sobre los hbitos de navegacin del usuario, e intentos de intrusos, por parte de agencias de publicidad y otros. Esto puede causar problemas de privacidad y es una de las razones por la que las cookies tienen sus detractores. Originalmente, slo podan ser almacenadas por peticin de un CGI desde el servidor, pero Netscape dio a su lenguaje Javascript la capacidad de introducirlas directamente desde el cliente, sin necesidad de CGIs. En un principio, debido a errores del navegador, esto dio algunos problemas de seguridad. Estas vulnerabilidades fueron descubiertas por Roberto Santizo.[cita requerida] Las cookies pueden ser borradas, aceptadas o bloqueadas segn desee, para esto slo debe configurar convenientemente el navegador web.

El CGI (Por sus siglas en ingls Common Gateway Interface) cambio la forma de manipular informacin en el web. En s, es un mtodo para la transmisin de informacin hacia un compilador instalado en el servidor. Su funcin principal es la de aadir una mayor interaccin a los documentos web que por medio del HTML se presentan de forma esttica. El CGI es utilizado comnmente para contadores, bases de datos, motores de bsqueda, formularios, generadores de email automtico, mapas de imgenes, juegos en lnea y otros. Esta tecnologa tiene la ventaja de correr en el servidor cuando el usuario lo solicita por lo que es dependiente del servidor y no de la computadora del usuario.

1.3 Introduccin a HTML Qu es HTML?

Definindolo de forma sencilla, "HTML es lo que se utiliza para crear todas las pginas web deInternet". Ms concretamente, HTML es el lenguaje con el que se "escriben" la mayora de pginas web. Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los programas que utilizan los diseadores generan pginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las pginas web despus de leer su contenido HTML. Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseo, es muy fcil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de Hyper Text Markup Language y ms adelante se ver el significado de cada una de estas palabras.

El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo sin nimo de lucro llamado World Wide Web Consortium ([Link] ,ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. El propio W3C define el lenguaje HTML como "un lenguaje reconocido

universalmente y que permite publicar informacin de forma global". Desde su creacin, el lenguaje HTML ha

pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.

El organismo W3C ([Link] (World Wide WebConsortium) elabora las normas que deben seguir los diseadores de pginas web para crear las pginas HTML. Las normas oficiales estn escritas en ingls y se pueden consultar de forma gratuita en las siguientes direcciones:
Especificacin oficial de HTML 4.01

([Link] Especificacin oficial de XHTML 1.0 ([Link]

El estndar XHTML 1.0 incluye el 95% del estndar HTML 4.01, ya que slo aade pequeas mejoras y modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a disear pginas con HTML o XHTML. Las normas oficiales estn escritas con un lenguaje bastante formal y algunas secciones son difciles de comprender.

1.3.1 HTML como un tipo SGML. HTML y XHTML El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms que una adaptacin de HTML al lenguaje XML. Tcnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, tambin es descendiente de SGML).

Lenguajes de Etiquetas. Uno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo almacenar la informacin en los archivos digitales. Como los primeros archivos slo contenan texto sin formato, la solucin utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en nmeros. De esta forma, para almacenar un contenido de texto en un archivo electrnico, se utiliza una tabla de conversin que transforma cada carcter en un nmero. Una vez almacenada la secuencia de nmeros, el contenido del archivo se puede recuperar realizando el proceso inverso.

El proceso de transformacin de caracteres en secuencias de nmeros se denomina codificacin de caracteres y cada una de las tablas que se han definido para realizar la transformacin se conocen con el nombre de pginas de cdigo. Una de las codificaciones ms conocidas (y una de las primeras que se publicaron) es la codificacin ASCII.

1.3.2 Elementos del lenguaje HTML. La base del html son la Etiquetas, estas son

las palabras que se encuentran encerradas entre los smbolos '<' y '>'. En el ejemplo usamos las etiquetas html, title, head y body. Las etiquetas definen un documento html. Cada una de ellas cumple una funcin determinada. La mayora de las etiquetas van por parejas (<html> y </html>, <head> y </head>...), una indica el principio y otra el final. En el ejemplo todas son de este tipo.

Es conveniente poner las etiquetas siempre en minsculas.

La etiqueta html Esta es la etiqueta que contiene a TODO el documento html. La etiqueta <html> indica el comienzo del documento y </html> el final. No debe haber etiquetas fuera de estas dos (excepto un par de excepciones que ya veremos).

head Esta etiqueta contiene la cabecera (o encabezamiento) del documento. Esta cabecera contiene entre otras cosas el ttulo de la pgina. La cabecera contiene informacin que no se muestra con la pgina (exceptuando el ttulo), es la informacin que usan los navegadores y buscadores de internet para mostrar o indexar las pginas.

title

El ttulo de la pgina. Este se muestra en la barra de tareas (en windows), no en la propia pgina. Tambin se muestra en la parte superior de la ventana del navegador. Si te fijas en el ejemplo el ttulo es "Tu primera pgina" que no aparece mas que en la barra de tareas y en la parte de arriba de tu navegador. Cuando alguien ponga un marcador (o bookmark, o favorito) a nuestra pgina el nombre con el que se guardar ser este ttulo. body Aqu es donde va el texto de la pgina, y las imgenes, y las tablas y todo lo que le pongamos. El contenido de body es lo que se muestra en el navegador.

Ejemplo: <html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE. </body> </html>

Ya hemos visto en el ejemplo anterior cmo escribir texto en una pgina, basta con escribirlo dentro de las etiquetas <body>. Sin embargo el HTML tiene una peculiaridad, no muestra el texto tal y como lo escribimos. Para comprobarlo veamos un ejemplo:

<html> <head> <title>Tu primera pgina</title> </head> <body>

Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es una cosa muy fcil.

</body> </html>

Es lgico pensar que la pgina tendr este aspecto: Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es muy fcil.

Pero el aspecto real ya en el navegador es:

Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es muy fcil.

Saltos de lnea Como ves nos escribe todas las lneas seguidas, no pone saltos de lnea. Tenemos que ponerlos nosotros. La forma de saltar a la lnea siguiente es usando la etiqueta <br>. Esta es una de las pocas etiquetas que no tiene pareja, no existe una etiqueta </br>.

<html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> Esta es mi primera pgina web.<br> HTML es una cosa muy fcil.<br> </body> </html>

Espacios Vamos a hacer una segunda prueba, creamos una pgina con un montn de espacios entre algunas palabras:

<html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> Esta es mi primera pgina web.<br> HTML es una cosa muy fcil.<br> </body> </html>

Hola, NOMBRE. Esta es web. HTML es

me llamo PON TU
mi primera pgina una cosa muy fcil.

Pero no es as, los espacios adicionales se eliminan y tan slo se deja un espacio entre dos palabras. Comprubalo en este ejemplo: Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es una cosa muy fcil.

Entonces cmo metemos espacios adicionales? Existen en HTML lo que se llaman cdigos, cada cdigo representa una letra o un carcter. Por ejemplo el cdigo del espacio en blanco es &nbsp; (Non Breaking SPace). Si escribimos &nbsp; obtendremos un espacio adicional:

<html> <head> <title>Tu primera pgina</title> </head> <body> Hola, &nbsp &nbsp &nbsp me llamo PON TU NOMBRE.<br> Esta es mi primera pgina web.<br> HTML esuna cosa muy fcil.<br> </body> </html>

Texto sin formatear Existe una forma de mostrar el texto con saltos de lnea y espacios sin tener que usar <br> y &nbsp;. Es el texto preformateado. Cuando ponemos texto en una pgina el navegador lo formatea, le quita los saltos de lnea y los espacios adicionales. Podemos indicarle que no haga esto usando las etiquetas <pre> y </pre>. Cuando rodeamos un texto con estas etiquetas queda preformateado, es decir, queda tal cual:

<html> <head> <title>Tu primera pgina</title> </head> <body> <pre> </pre> </body> </html>
Hola, Esta HTML me llamo PON TU NOMBRE. es mi primera pgina web. es una cosa muy fcil.

La pgina queda de la siguiente manera:

Hola, Esta HTML me llamo PON TU NOMBRE. es mi primera pgina web. es una cosa muy fcil.

Prrafos Una forma ms ordenada de introducir el texto es utilizando <p> y <p>. Todo lo que va entre estas dos etiquetas es un prrafo. Probablemente vers muchas pginas que utilizan slo la primera etiqueta (<p>), esto es vlido pero se recomienda usar ambas. La forma correcta de usar lo prrafos es colocando <p> al principio del prrafo y </p> al final.

Adornando el texto Ahora que sabemos cmo se mete texto en la pgina vamos a darle algunos efectos interesantes como la negrita, cursiva, subrayado... Negrita Con las etiquetas <b> y </b> se consigue poner el texto en negrita (bold). Se recomienda no usar esta etiqueta con bloques de texto muy grandes porque puede dificultar su lectura. Este el el efecto que se consigue: <b>Negrita</b> -> Negrita Existe otra etiqueta <strong> que es similar y que veremos ms adelante.

Cursiva Para mostrar un texto en cursiva: <i>Cursiva</i> -> Cursiva Hay otras posibilidades <cite> y <em> que veremos ms adelante. Subrayado Para tener un texto subrayado usamos la etiqueta <u>(underline): <u>Subrayado</u> -> Subrayado

Algunos navegadores no muestran esta etiqueta porque puede confundirse con los enlaces (que tambin aparecen subrayados). No se recomienda su uso, en su lugar es mejor usar <i>, o <em> o <cite>.

Tachado Para el texto tachado se usa la etiqueta <strike> (strikeout): <strike>Tachado</strike> -> Tachado Puede no estar implementada en todos los navegadores. Teletipo Se puede mostrar el texto como si fuese escrito por una mquina de escribir usando la etiqueta <tt> (TeleType): Con esta etiqueta el texto no sale preformateado como con pre, se eliminan los espacios adicionales. Grande Con las etiquetas <big> y</big> el texto aparece con un tamao mayor al normal. <big>Grande</big> -> Grande

Se pueden encadenar varios <big> pero no se asegura que el texto sea ms grande que uno solo. Mira este ejemplo para comprobar si funciona en tu navegador: Con un big -> Grande Con 3 big -> Grande Se puede usar tambin las etiquetas <font size="+1"> y </font>. Pequeo Es lo opuesto a la etiqueta big, con esta tenemos un texto ms pequeo de lo normal: <small>Pequeo</small> -> Pequeo Al igual que con big, se pueden encadenar varios small.

Superndice Si usamos frmulas matemticas esta etiqueta es muy interesante. Muestra el texto ms elevado que lo normal y con letra ms pequea. No est implementado en todos los navagadores as que sera bueno asegurarse de que el texto se entiende aunque no funcione la etiqueta. ^Superndice -> NormalSuperndice

Subndice Similar a la anterior pero el texto aparece ms bajo de lo normal. _Subndice -> NormalSubndice Centrado Esta etiqueta centra el texto y adems introduce un salto de lnea antes y despus. Se puede usar tambin <p align=center">. para centrar texto. Con <center>Centrado</center> se tiene: Centrado

Lnea Horizontal Para dibujar una lnea horizontal usamos la etiqueta <hr>. Esta es otra de las etiquetas sin compaera. Con <hr> se tiene una lnea horizontal Esta etiqueta tiene una serie de opciones: ALIGN=left|right|center : Para poner la etiqueta a la izda, centrada o a la derecha.

NOSHADE : Para dibujar la etiqueta sin sombra. SIZE=n : Especifica la altura (o grosor) de la etiqueta. WIDTH=n|p% : Especifica la anchura de la etiqueta en pixels (en puntos) o en tanto por ciento respecto a la anchura de la pantalla. Ejemplos: Con <hr noshade>

Con <hr widht="30%"> Parpadeo Esta etiqueta produce un texto parpadeante. No est implementada en todos los navegadores (creo que slo est en el navigator). No se recomienda su uso, es MUY incmodo leer pginas con texto parpadeante. Si en tu navegador no funciona te puedes considerar afortunado: <blink>Parpadeo</blink> -> Parpadeo

Titulos Los ttulos son la forma de tener ordenado el documento. Algunos buscadores hacen un resumen de nuestro documento utilizando los ttulos. Tambin puede ser que den ms importancia a las palabras que aparecen en nuestros ttulos. Estos ttulos s aparecen en la pgina, son diferentes de <title>. No es obligatorio poner estos tipos de ttulos en una pgina. Es recomendable si tu pgina contiene un curso con captulos, apartados y subapartados. Tambin es recomendable si son instrucciones, un informe, un catlogo,...

Los ttulos se indican con las etiquetas h1,h2,h3,h4,h5,h6 (la h viene de heading, encabezamiento) y van de mayor nivel (<h1>) a menor nivel (<h6>). <h1> El ttulo de mayor nivel se indica con las etiquetas <h1> y </h1>. Conviene respetar el orden de los ttulos, poner primero los de nivel 1, luego de nivel 2, nivel 3,... Los ttulos normalmente se muestran con un tamao de letra mayor que el normal aunque no tiene por qu ser as.

Esta y las siguientes etiquetas de ttulo tienen unas opcines que indican cmo se debe alinear el texto: ALIGN= left | center | right. Si no se indica nada se coloca a la izquierda. Si queremos alinear el texto en el centro: <h1 align=center>Este es mi ttulo</h1> y esto da como resultado: <h2>

Este es mi ttulo

Estos son los ttulos de segundo nivel. Son de menor importancia que los anteriores. Se suele representar en negrita y con un tamao de letra inferior a h1, aunque no tiene por qu ser as (depende del navegador). Este tiene las misma opcines que h1. <h3>, <h4>, <h5>, <h6> Tenemos hasta seis encabezamientos posibles, cada uno de menor importancia con respecto al anterior. Cuanta menor importancia tienen se le suele poner en un tamao de letra menor (aunque insisto que depende del navegador). Existen las mismas opciones que para los anteriores.

Ejemplo <html>

<body>

<head> <title>Pgina con ttulos</title> </head>

<h1 align=center>Curso de THLD</h1> <p>Este es un boceto para un curso de THLD (no existe tal cosa).</p> <h2>Introduccin</h2> <h3>Qu es el THLD?</h3> <p>No es nada, no existe eso.</p> <h3>Para qu sirve?</h3> <p>Como no existe no sirve para nada</p> <h3>Versiones</h3> <h4>Versin 1</h4> <p>La versin 1 no existe. <h4>Versin 2</h4> <p>Si no existe la versin 1 la 2 menos todava.</p> <h2>Conclusiones</h2> <p>Esto es slo una pgina de ejemplo y el THLD no existe (al menos que yo sepa). </p> </body> </html>

Los enlaces Los enlaces (o hiperenlaces) nos permiten saltar de una pgina a otra con un simple click. Tambin nos permiten acceder a ficheros e imgenes. En general un enlace tiene la forma: <a href="direccin_destino">descripcin_del_destino</ a> En direccin_destino debemos poner la direccin de la pgina, fichero, o imagen a la que queremos saltar. La descripcin_del_destino debe ser una pequea descripcin del sitio o la pgina a la que nos conduce el enlace.

Enlaces a otras pginas Si queremos poner un enlace a una pgina fuera de nuestro sitio tenemos que indicar su direccin completa (incluyendo el [Link] Si quisiramos por ejemplo enlazar con la pgina del Web Consortium cuya direccin es [Link] deberamos hacer: <a href="[Link] Consortium</a> Y este enlace se ver como: Web Consortium. Si pinchas sobre este enlace irs a su pgina web.

Tambin podramos acceder directamente a un fichero que hubiera en su pgina. Imaginemos que queremos poner un enlace al fichero que contiene el temario del curso en la pgina (es el ficheroProgramacion%20WEB_ISC.pdf ) que est en [Link] El enlace sera: <a href="[Link] mas/Programacion%20WEB_ISC.pdf">Curso de HTML</a> Y quedara como: Contenido de programacin Web. (A las direcciones completas de las pginas web se las llama URL)

Enlaces a otra pgina nuestra NOTA: Por si no sabas en nuestro sitio web podemos poner ms de una pgina. La pgina principal normalmente se llamar [Link] o [Link] y desde ella enlazamos a las dems. Para enlazar con una pgina que est en nuestro sitio web basta con poner el nombre de esa pgina (por ejemplo [Link]); no es necesario poner toda la direccin. Para poner este enlace de tendramos que hacer: <a href=[Link]">ejemplo1 del curso</a> y quedara as: ejemplo1 del curso.

Enlaces a una seccin dentro de la misma pgina Para poner estos enlaces debemos poner una etiqueta en donde vamos a hacer el enlace por ejemplo esta pgina vamos a dividirla en tres secciones la primera seria enlaces a otras pginas, la segunda enlaces a un archivo y la otra seria enlace en la misma pagina. Si pinchas sobre algn ttulo vas a la seccin correspondiente. En un documento HTML se pueden definir unos "marcadores" en cualquier parte del documento. Para poner un marcador se usa <a name="nombre_marcador">, y para acceder a el usamos <a href="#nombre_marcador">.

Por ejemplo al principio de este captulo hay definida una etiqueta <a name=Principio"></a> NOTA: La etiqueta a name debe llevar un </a> al final. y para acceder a ella desde cualquier parte del documento hacemos:

Principio. Podemos definir cuantas secciones queramos en un documento, pero no se debe repetir ningn nombre de marcador.

Caracteres especiales Es posible que en un momento dado deseemos insertar un carcter que no sea ASCII en nuestro documento HTML. Muy probablemente, si lo creamos nosotros con las combinaciones de teclas habituales no llegue a poder ser ledo por otra plataforma una vez publicado en Internet. Para solventar este conflicto, HTML ofrece la posibilidad de insertar unas entidades de carcter que podrn ser interpretados por todas las plataformas. Estas entidades pueden ser:

1. Nombradas: Se suelen construir con el signo &, la abreviatura del carcter y acabado con el signo punto y coma. El smbolo de registrado se construira: &reg; 2. Numeradas: Se construyen con los signos &#, el nmero correspondiente a la posicin del carcter en el conjunto ISOLatin-1 (ISO-8859-1). El mismo smbolo de registrado, sera ahora: &#174;

3. Existen unas entidades reservadas, exclusivamente, para caracteres usados en tags pero que nosotros no los pretendemos usar dentro de ninguna de ellas. Estos son:
signo signo signo signo <, entidad &lt; >, entidad &gt; &, entidad &amp; ", entidad &quot;

La etiqueta BASEFONT La etiqueta BASEFONT (fuente base) nos sirve para controlar el tamao de letra que queremos para nuestro documento. Todo el documento utilizar este tamao de letra. Si queremos un tamao mayor o menor debemos usar <big>,<small> o la etiqueta <font>.

El formato de esta etiqueta es: <basefont size=tamao> No necesita una etiqueta final, no existe <basefont>. El tamao ms pequeo es 1 y el mayor 7. Por ejemplo: <basefont size=7> Aqu tenemos un ejemplo de un documento que usa como fuente base un tamao 7

<html> <head> <title>Pgina con basefon</title> </head> <body background="[Link]"> <h1 align=center>Esta es una pagina ejemplo</h1> <hr Align=center size=10 ></hr> <basefont size=7> <p>A esta pgina le hemos puesto como <em>fuente base</em> un tamao 7.</p> <p>Si usamos &lt;small&gt; el texto queda ms pequeo, disminuye en relacin al tamao base: <small>ms pequeo</small>.</p> </body> </html>

Algunos navegadores tambin admiten la opcin face dentro de basefont. Con esta opcin podemos especificar el tipo de letra que queremos. Para poner una pgina con tipo de letra Arial: <basefont face="Arial"> Atencin: Esta opcin no la admiten todos los navegadores. Si usamos una fuente que el usuario no tiene instalada en su ordenador, se ver con la fuente por defecto, as que no conviene usar tipos de letra extraos. Para asegurarnos de que la pgina se vea como queremos podemos especificar ms de un tipo de letra (separadas por comas). Si la primera no est en el ordenador se pasa a la segunda: <basefont face="Arial, helvetica, comic sans ms">

La etiqueta FONT Con la etiqueta font (fuente) podemos controlar la apariencia del texto, tanto en tamao como en color. Esta etiqueta necesita una de apertura (<font>) y otra de cierre (</font>), y slo afecta al texto que encierra. Las opciones de FONT son: size=tamao color=#color face="tipo de letra"

size Con FONT podemos especificar el tamao de la letra al igual que hacamos con BASEFONT (1 es el tamao menor y 7 el mayor): <font size=7>Este texto tiene tamao 7</font> Tambin podemos dar valores relativos al tamao base usando los smbolos + y -. Cada unidad que sumemos har la letra un paso ms grande (algo equivalente a <big> y <small>). Se usa de la siguiente manera: <font size="+2"> Esto har que se muestre la letra ms grande que el resto.

color Con el atributo color podemos especificar el color con el que se mostrar el texto (creo que ya te lo imaginabas). Existen dos formas de indicar el color: 1. Usando la forma RGB (red, green, blue): color=#RRGGBB. RR indica la intensidad del rojo (en hexadecimal), GG la del verde y BB la del azul. El color resultante depende de la cantidad de cada uno. Consulta la tabla de abajo para ver algunos ejemplos. 2. Usando el nombre del color: existen una serie de colores preestablecidos. No todos los navegadores los entienden, as que es mejor usar la forma anterior.

Los colores se especifican de la siguiente forma: Para la forma RGB: <font color="#008000">Texto</font> Usando nombres: <font color=green>Texto</font>

Como referencia aqu queda una tabla con algunos colores (se debe usar el nombre en ingls no en espaol):ver como quedan los colores Color Valor Rgb Nombre Negro #000000 black Verde #008000 green Plata #C0C0C0 silver Lima #00FF00 lime Gris #808080 gray Aceituna #808000 olive Blanco #FFFFFF white

Amarillo

#FFFF00

yellow

Castao Rojo
Azul

#FFFF00 #FF0000
#0000FF

maroon
navy

Azul marino #000080

red
blue

Morado
Teal

#800080
#008080

purple
teal

Agua
Fucsia

#00FFFF
#FF00FF

aqua
fuchusia

face La etiqueta face sirve para cambiar el tipo de letra que estamos usando. Se usa de la siguiente forma: <font face="nombre del tipo de letra"> Esta etiqueta tiene dos desventajas: 1. no la admiten todos los navegadores, 2. si el usuario no tiene instalada la fuente en su ordenador no funciona.

Cuidado con las imgenes Las imgenes pueden dar colorido a nuestras pginas y hacerlas ms atractivas. Las imgenes pueden convertir nuestra pgina en una maravilla, pero tambin puede convertirla en una pesadilla. Las imgenes tienen unas cuantas desventajas:

1. Hacen muy lenta la carga de las pginas. Por muy artstica que nos quede la pgina poca gente esperar a que se cargue un grfico grande. Si la gente espera mucho se aburre mucho y se va a otro sitio. 2. Pueden recargar la pgina y distraer al usuario del verdadero contenido.

3. Si estn mal elegidas pueden complicar la lectura o hacerla imposible.

4. No debemos basar nuestra pgina en las imgenes; hay gente que tiene navegador de texto (sin imgenes) o el navegador configurado para no ver imgenes (as se cargan las pginas ms rpido). Una pista: una pgina con muchos grficos es muy probable que sea pobre de contenidos (a no ser que la pgina sea una galera de imgenes).

Al principio a todos nos gusta tener una pgina con muchos grficos y colores para hacerla ms vistosa, pero hay que contenerse. Piensa en los sufridos internautas que tienen una conexin lenta. NOTA: Cuando un navegador carga una imagen la guarda en la cach (en el disco para entendernos), de tal forma que si pasamos a otra pgina en nuestro sitio que use la misma imagen no necesita cargarla de nuevo.

Una Imagen como fondo

Un primer efecto bastante bueno lo podemos conseguir poniendo una imagen como fondo. Es muy fcil, basta aadir un par de cosas a la etiqueta body: <body background="nombre_de_la_imagen"> Lo que hace el navegador es ir colocando la imagen indicada hasta llenar el fondo. Veamos un ejemplo de cmo usar correctamente los fondos:

<html> <head> <title>Pgina con fondo ideal</title> </head> <body background="[Link]"> <h1 align=center>Esta es una pagina con fondo</h1> </body> </html> Sin embargo tienes que tener cuidado con el fondo, no escojas una imagen muy grande. Ten cuidado que contraste bien con el texto para que se pueda leer con comodidad.

Por ejemplo mira esta imagen: Alguien puede pensar "es un precioso muro con esos colores, voy a ponerla como fondo" y ponerlo de fondo

Ejemplo de fondo errneo:

<html> <head> <title>Pgina con un Fondo erroneo</title> </head> <body background=[Link]"> <h1 align=Center>Fondo erroneo</h1> </body> </html>

Mostrar imgenes Para insertar una imagen en nuestra pgina debemos hacer: <img src="nombre_de_la_imagen"> src es la abreviatura de SouRCe. La etiqueta img no tiene pareja, no existe una etiqueta </img>. Esta etiqueta tiene varias opciones: ALT = "descripcin" ALIGN = left / right / top / middle / bottom HEIGHT / WIDTH BORDER HSPACE / VSPACE

ALT La descripcin que se mete en alt es la que se muestra en caso que de la imagen no se pueda cargar por el motivo que sea. Esto es conveniente para que la gente que tiene un navegador de texto o las imgenes desactivadas no se pierda en nuestra pgina.

Esta descripcin tambin se muestra si ponemos el ratn sobre la imagen y lo dejamos quieto unos segundos. El siguiente ejemplo muestra una imagen y al poner el ratn encima muestra el mensaje "Grfico que representa Correo Electrnico": <center><IMG SRC=tgc_email_51.gif" width="96" height="96" ALT= "Grfico que representa Correo Electrnico"></center>

ALIGN Con esta etiqueta podemos alinear el texto con respecto a la imagen. Con unos ejemplos es como mejor se explica: <IMG SRC=" tgc_email_51.gif " align=top> Este texto va arriba

Este texto va arriba <img src=" tgc_email_51.gif " align=middle> Este texto va en medio Este texto va en medio <img src=" tgc_email_51.gif " align=bottom> Este texto va abajo Este texto va abajo Existen otras dos posibilidades (left y right):ejemplo

Color del texto Ya hemos visto anteriormente cmo se cambiaba el color del texto con FONT. Existe otra forma para cambiar el color por defecto del documento, con unas opciones de la etiqueta BODY (igual que hacamos con la opcin background). Con estas opciones podemos cambiar el color del texto, el del fondo y el de los enlaces.

Las posibles opciones son: text bgcolor link vlink alink Para cambiar el color del texto debemos escoger la primera opcin; text. Se usa igual que la opcin color de la etiqueta font (se puede especificar el color por su nombre o por su cdigo hexadecimal). Si ponemos el siguiente cdigo tendremos el texto de nuestra pgina de color azul: <body text=blue>

Color de fondo Tambin podemos cambiar el color de fondo de nuestro documento simplemente usando la opcin bgcolor (igual que text. Para tener un fondo de color azul y texto blanco: <body text=white bgcolor=blue>

Color de los enlaces Quiz te hayas fijado que cuando pones un enlace en tu pgina se muestra de color azul. Si el enlace ya ha sido visitado aparece con otro azul ms claro (se usan colores diferentes para que el usuario sepa si ya ha visitado la pgina o no). Esto lo podemos cambiar a nuestro gusto. Enlaces no visitados Para cambiar el color de los enlaces a pginas que an no han sido visitadas se usa la opcin link. Para poner estos enlaces de color amarillo: <body link=yellow>

Enlaces visitados El color de los enlaces a pginas ya visitadas se establece con la opcin vlink (Visited Link). Si queremos que sea verde: <body vlink=green> Enlaces activos En el momento que pinchamos sobre un enlace este cambia de color. Para especificar este color se usa alink (Active Link): <body alink=red>

Email de contacto Cuando mantenemos una pgina web es muy importante indicar a nuestros lectores la forma de ponerse en contacto con nosotros. De esta forma sabremos que es lo que la gente opina de nuestra pgina, lo que hacemos mal y lo que hacemos bien.

La mejor forma de contacto es el correo electrnico, pero creo que no tengo que convencer a nadie de eso. Poner nuestra direccin de correo en nuestra pgina es muy sencillo, basta con insertar el siguiente cdigo: <a href="[Link] nico">Nombre</a>

Donde pone Nombre podemos poner nuestro nombre, direccin de correo o lo que queramos. Funciona como un enlace normal, la diferencia es que si alguien pincha sobre ese enlace en vez de ir a otra pgina se abrir el programa de correo electrnico con nuestra direccin. Pincha aqu para comprobarlo: Escrbeme. (No se debe olvidar la palabra [Link]

Al abrirse el programa de correo electrnico aparece un nuevo mensaje con nuestra direccin. El usuario tan slo tiene que poner el asunto, escribir el mensaje y enviarlo. Podemos tambin especificar nosotros el asunto del mensaje (esto es interesante porque mucha gente olvida poner el asunto) utilizando el siguiente formato: <a href="[Link] udas_de_Html">Escrbeme</a> La forma de indicar el asunto es con ?subject= seguido del mensaje sin comillas ni [Link]

Listas numeradas Con html podemos crear listas numeradas de forma sencilla. El comienzo de la lista se marca con <ol> y el final con </ol> (ol=ordered list). Cada elemento de la lista debe ir precedido por <li>. Por ejemplo vamos a hacer una ficticia lista de las herramientas: 1. martillos 2. clavos 3. destornilladores 4. tornillos

El cdigo correspondiente a esta lista sera: <ol> <li>martillos <li>clavos <li>destornilladores <li>tornillos </ol>

La etiqueta OL tiene varias opciones. La primera, type, sirve para especificar el tipo de numeracin que queremos: 1 - Nmeros (1,2,3,4,...) A - Letras maysculas (A, B, C, D,...) a - Letras minsculas (a, b, c, d,...) I - Nmeros romanos en maysculas (I, II, III, IV,...) i - Nmeros romanos en minsculas (i, ii, iii, iv,...)

i. martillos ii. clavos iii. destornilladores iv. tornillos Que se consigue con: <ol type=i> Se puede especificar tambin el nmero en el que queremos que empiece la lista con la opcin start=n, aunque no lo admiten todos los navegadores.

Sin numerar Se pueden tambin utilizar listas que usen un pequeo smbolo al comienzo de la lnea en vez de un nmero. Estas lneas se delimitan por <ul> y </ul>. La lista de antes queda as con ul en vez de ol: martillos clavos destornilladores tornillos

El smbolo que aparece al principio se puede cambiar con type. Las posibles opciones son disc (disco) square (cuadrado) y circle (crculo). Con <ul type=square> queda: martillos clavos destornilladores tornillos No es conveniente usar la etiqueta UL para establecer mrgenes, ya veremos ms adelante cmo se hace.

Listas de Definiciones Existe otro tipo de lista que sirve para definir trminos, como por ejemplo un diccionario. La lista se delimita con <dl> y </dl>. Cada elemento consta de dos partes, el trmino a definir <dt> (definition term) y la definicin del trmino <dd> (definition).

Como ejemplo el siguiente cdigo servira para definir los trminos computadora" y "televisin": <dl>Computadora: <dt> <dd>Caja de alto precio que rara vez se usa para otra cosa que no sea jugar. <dt>Televisin: <dd>Reproductor de imgenes en el que rara vez se ven cosas inteligentes. </dl>

Se vera as: Computadora:

Caja de alto precio que rara vez se usa para otra cosa que no sea jugar.

Televisin:
Reproductor de imgenes en el que rara vez se ven cosas inteligentes.

Definicin de una tabla Las tablas son muy tiles para mostrar la informacin con un formato flexible y ms elegante que una simple lista o que con texto formateado. Se usan mucho para dar formato a la pgina; es lo que usan las pginas que muestran la informacin en varias columnas. Por supuesto esto no se recomienda puesto que en un navegador que no admita tablas el diseo se ir a la porra. A pesar de esto cada vez se usan ms para este propsito (yo mismo lo hago).

1.3.3 Tablas en HTML. En este objetivo vamos a ver una sencilla introduccin a las tablas y en el siguiente analizaremos con ms profundidad el juego que dan. Para montar una tabla en nuestro documento lo primero es usar las etiquetas <table> y </table>. Esta etiqueta tiene varios atributos que analizaremos despues.

Dentro de la tabla slo podemos meter el ttulo de la tabla (caption) o filas (tr), no puede haber otros elementos dentro de la tabla. Donde s podemos meter otros elementos es dentro de las filas (encabezamientos celdas). Para mostrarlo grficamente: TABLE
+----Caption +----TR +----TH +----TD Ejemplo

Caption Con este podemos ponerle un ttulo a la tabla. Este ttulo puede ir encima o debajo de la tabla. Para indicar dnde lo queremos usamos la opcin align y sus valores posible son top o bottom. Si no especificamos nada se coloca encima de la tabla. No es necesario poner un ttulo a la tabla, pero si se pone debe ir justo debajo de la etiqueta <table> y slo puede haber uno.

TR (table row) Despus de colocar el ttulo colocamos las lneas. <tr> indica el comienzo de una lnea y </tr> el final. Dentro de una lnea slo podemos meter elementos td o tr. Esta etiqueta tiene unas opciones para alinear la etiquetas que contiene horizontalmente y verticalmente. Esto lo veremos ms tarde.

TH (Table header) Con las etiquetas <th> y </th> podemos colocar encabezamientos a las columnas. Estos encabezamientos en algunos navegadores aparecen en negrita. Esta etiqueta tiene las misma opciones que la etiqueta td. Esta etiqueta se suele usar poco, yo apenas la he visto en ninguna pgina.

TD (table data?) Esta etiqueta puede contener cualquier cosa en su interior, desde lista hasta otras tablas. Debe ir dentro del par de etiquetas <tr> </tr>

<table> y sus posibilidades Ya hemos visto anteriormente cmo se crea una tabla. En este vamos a jugar con ellas; aprenderemos a cambiarlas de tamao, de color y muchas otras cosas. Vamos a empezar por ver las opciones disponibles con <table> Border (Ancho de los bordes) Una tabla puede ir con un borde que lo enmarque. El grosor de este borde se establece con la opcin Border: Usando Border=1 Ejemplo Usando Border=5 Ejemplo1 Si hubisemos cogido el valor border=0 no se mostrara el marco (en algunos navegadores antiguos puede que s). Si slo se poner border sin especificar ningn valor aparece un borde de tamao 1.

Width Si te has fijado, hasta ahora, la tabla tiene la anchura adecuada para acomodar el texto que contiene. Con el atributo width podemos especificar el ancho de la tabla que deseemos. El ancho se puede establecer de dos formas: en pixels o en tanto por ciento:

Si especificamos el ancho en pixels la anchura de la tabla ser siempre la misma. Por ejemplo si usamos width=800 esto significa que la tabla debe tener una anchura de 800 puntos. Todos los navegadores intentarn dibujar una tabla de 800 puntos. Pero qu sucede si uno tiene la pantalla de 640 puntos? la tabla no le cabr y aparecer una barra de desplazamiento en la parte inferior de la ventana. Esto puede hacer la visita a la pgina una experiencia muy incmoda. Comprueba en este ejemplo la incomodidad de una tabla de 2000 pixels de ancho (no creo que nadie tenga por ahora una configuracin de pantalla tan grande): Ejemplo

No todo el mundo tiene en su ordenador la ltima tarjeta grfica con una resolucin tan grande; hay mucha gente con una modesta tarjeta grfica de 640x480 y se les debe tener en cuenta. La configuracin ms comn son 800x600. Por supuesto podramos hacer tablas de menos de 640 pixels para que todos la vieran igual. Una forma mejor de indicar la anchura de tabla deseada es usar tantos por ciento: width="50%" (con comillas). El 50% hace que la tabla ocupe el 50% del ancho de la pgina. De esta forma no importa la configuracin de pantalla que se tenga, a todos les ocupar la tabla la mitad de la pantalla.

Align Con esta opcin podemos alinear la tabla a la izquierda (left, es la opcin por defecto), centro (center), o a la derecha (right). En algunas viejas versiones de Netscape esta opcin no funcionaba. La tabla queda centrada pero no su contenido:

Cellspacing Si queremos separar las celdas unas de otras podemos usar cellspacing. Con cellspacing podemos especificar cuntos pixels queremos que se separen. Para especificar esta distancia: <table align=center border=1 cellspacing=10> Ejemplo con cellspacing Ejemplo sin cellspacing

Cellpadding Y con este ltimo atributo podemos cambiar la distancia entre el contenido de las celdas y el borde. <table align=center border=1 cellpadding=10> Ejemplo: Cellspacing y cellpadding a veces se confunden as que sera bueno que practicaras un poco con ellos para ver clara la diferencia.

bgcolor En algunos navegadores se puede incluso establecer el color de fondo para todas las celdas. Esto se hace usando bgcolor: <table align=center border=1 bgcolor=yellow> Los colores son los que ya hemos visto anteriormente. Ejemplo

background Tambin podemos establecer una imagen como fondo de las celdas. Si la imagen es ms grande que la celda se recortar, si es ms pequea que la celda se repite tantas veces como sea necesario para llenarla. Es decir, la imagen se acomoda a la celda y no al revs.

Por ejemplo la siguiente imagen.

Ejemplo en html

Las opciones de <td> Width (establece el ancho) Con width podemos indicar al navegador la anchura que queremos para una celda en concreto. La anchura podemos establecerla en pixels o en tantos por ciento. Un ejemplo en pixels: <table border=1> <tr> <td width=100>Ancho = 100 </td> </tr> </table>

Y el mismo ejemplo en tanto por ciento: <table border=1> <tr> <td width=25%">Acho = 50% del ancho de la tabla </td> </tr> </table> Ejemplo Esto del % no funciona igual en todos los navegadores y los antiguos no lo admiten. As que si lo usamos debemos comprobar que se ve bien en varios navegadores. Por otra parte es aconsejable poner la misma anchura para todas las celdas de una misma columna. Si ponemos distintas anchuras pueden tenerse resultados extraos, o en el mejor de los casos se adaptan todas a la de mayor anchura.

Veamos un ejemplo: <table border=1> <tr> <td width=100>Ancho = 100 </td> </tr> <tr> <td width=130>Ancho = 130 </td> <tr> <td width=200>Ancho = 200 </td> </tr> </table> Ejemplo

Height (altura) Con height podemos especificar la altura en pixels de una celda. <table border=1> <tr> <td height=100>Alto = 100 </td> </tr> </table> Al igual que con width no conviene poner distintas alturas para celdas de la misma fila Ejemplo:

Align Con align le decimos al navegador cmo queremos colocar el contenido de la celda: a la izquierda (left, es la opcin predeterminada), a la derecha (right) o centrada (center): <table border=1 width="70%" align=center <tr> <td align=right>Texto a la dcha </td> </tr> </table> Ejemplo

Valign Con valign controlamos la alineacin vertical dentro de las celdas. Las posibles opciones son: top, middle, bottom. Veamos en un ejemplo el comportamiento normal si tenemos en una fila una celda ms alta que las otras:

Este es un ejemplo sin valign. <TABLE align=center border=1 width="40%"> <TR> <td> Esta primera celda es ...(bla,bla) </td> <td> Efectivamente esta lnea es ms corta. </td> <td> Esta tambin es ms corta. </td> </TR> </TABLE>

Ejemplo con valign con top. <TABLE align=center border=1 width="40%"> <TR> <td> Esta primera celda es ...(bla,bla) </td> <td valign=top> Efectivamente esta lnea es ms corta. </td> <td> Esta tambin es ms corta. </td> </TR> </TABLE>

Ejemplo con valign con bottom. <TABLE align=center border=1 width="40%"> <TR> <td> Esta primera celda es ...(bla,bla) </td> <td valign=bottom> Efectivamente esta lnea es ms corta. </td> <td> Esta tambin es ms corta. </td> </TR> </TABLE> Ejemplo

Colspan Cuando hacemos una tabla como hemos visto hasta ahora tenemos que todas las celdas en una misma columna ocupan el mismo espacio. Pero existe una forma de hacer que una celda ocupe ms de una columna: usando colspan.

Aqu tenemos una tabla normal:

<table border=1 width="60%" align=center> <tr align=center> <td>Celda 1,1 </td> ... <td>Celda 1,4 </td> </tr> <tr align=center> <td>Celda 2,1 </td> ... <td>Celda 2,4 </td> </tr> </table>

Esto se consigue con el siguiente cdigo usando colspan: <table border=1 width="60%" align=center> <tr align=center> <td colspan=2>Celda 1,1 </td> <td>Celda 1,3 </td> <td>Celda 1,4 </td> </tr> <tr align=center> <td>Celda 2,1 </td> <td>Celda 2,2 </td> <td>Celda 2,3 </td> <td>Celda 2,4 </td> </tr> </table> Ejemplo

Rowspan Con rowspan podemos hacer lo mismo que con colspan pero con filas. Podemos hacer que una celda ocupe dos o ms filas: Ejemplo

 Y esto se consigue usando rowspan as: <table border=1 width="60%" align=center> <tr align=center> <td rowspan=2>Celda 1,1 </td> <td>Celda 1,2 </td> <td>Celda 1,3 </td> <td>Celda 1,4 </td> </tr> <tr align=center> <td>Celda 2,2 </td> <td>Celda 2,3 </td> <td>Celda 2,4 </td> </tr> </table>

Nowrap Cuando tenemos un texto demasiado largo ste se corta y se acomoda en varias lneas. Sin embago, si usamos el atributo nowrap el texto se mostrar todo en una lnea: Ejemplo

Frames. Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se cargua una pgina html distinta. Las versiones ms antiguas de los navegadores no tienen implementada esta caracterstica, por lo que no podrn verlos.

Sintaxis Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorar. Un ejemplo sencillo es el siguiente: Frames

EL atributo ROWS (filas) es el que define el nmero y el tamao de los frames, en este caso dos filas, de 75 pxels la primera y el resto de la ventana la segunda. Tambin se puede dividir en columnas mediante COLS.

Sus principales atributos o parmetros son:

* COLS= " x,y,z,..." , para definir el n de columnas o marcos verticales que va a tener la ventana, y donde las variables x,y,z... van a definir el tamao de cada marco vertical, pudiendo definirse en pxeles o en porcentaje. Tambin podemos fijar el tamao de una columna o columnas como * , y en este caso el tamao de esta ser todo aquel que quede despus de definir mediante puntos o porcentajes las dems columnas.

Si definimos tamaos en pxeles, estos sern absolutos, En este caso si todas las frames se indican de este modo, los valores se ajustarn para que las frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporcin con la que se definen las frames. Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarn para que coincidan con el tamao de la ventana. Se podr combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje.

Posibles

combinaciones

seran:

1) COLS="100,700"...que nos dividira la ventana en dos columnas, una de 100 puntos y la otra de 700. 2) COLS="10%,*"...que nos dara una columna con el 10% de la ventana y otra con el resto. 3) COLS="20%,*,*"...obteniendo con ello una columna del 20% de la ventana y otras dos que se repartirian por igual el tamao restante. 4) COLS="*,2*"...que nos crear dos columnas, teniendo la segunda el doble de ancho que la primera, es decir, la primera ocupara el 33% de la ventana y la segunda el 66% restante.

* ROWS=" x,y,z,..." , para definir el n de filas o marcos horizontales que va a tener la ventana, y donde las variables x,y,z... van a definir el tamao de cada marco horizontal, pudiendo definirse en pxeles o en porcentaje. Tambin podemos fijar el tamao de una fila o filas como * , y en este caso el tamao de esta ser todo aquel que quede despus de definir mediante pxeles o porcentajes las dems filas. Las combinaciones posibles son muchas, siendo su estructura anloga a las vistas para COLS

Si definimos tamaos en pxeles, estos sern absolutos, En este caso si todas las frames se indican de este modo, los valores se ajustarn para que las frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporcin con la que se definen las frames

Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarn para que coincidan con el tamao de la ventana. Se podr combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje.

* FRAMEBORDER= " 0 / 1 / no / yes " , que nos permite definir si los marcos creados van a tener borde o no. Los valores 0 y no son equivalentes, eliminando los bordes, as como 1 y yes, que los muestran. Su valor por defecto es yes / 1 , por lo que si no especificamos nada se vern los bordes de todos los marcos.

Si adems queremos que no se vean los huecos que originan los bordes invisibles hay que aadir el atributo FRAMESPACING=0 para Internet Explorer y BORDER=0 para Nestcape. Ejemplo con borde Ejemplo sin borde

* BORDER= " n " , con n = n entero = n de pxeles. En el caso de que se haya establecido FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde. Slo funciona con Nestcape. * FRAMESPACING= " n " , con n = n entero = n de pxeles. Nos permite definir el espacio entre los marcos, y en el caso de que se haya establecido FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde. Slo funciona con Explorer. * BORDERCOLOR= " color " , donde color puede venir especificado mediante su nombre web en ingls o mediante su cdigo hexadecimal. Nos permite establecer el color de los bordes de los marcos. Ejemplo

* SRC=" ruta pgina html" , que especifica qu pgina se va a cargar en el frame. La ruta de la pgina debe especificar su localizacin en el sistema de archivos local del servidor web o una URL completa. Ejemplos.<frame src=[Link]"> <frame src="[Link]

*NAME=" nombre " , que especifica qu pgina se va a cargar en el frame. La ruta de la pgina debe especificar su localizacin en el sistema de archivos local del servidor web o una URL completa. Sirve para asignar un nombre al marco. Es un atributo muy importante, ya que cuando queramos luego cargar una pgina en un marco mediante un enlace, deberemos decir en qu marco queremos hacerlo, y esto se consigue haciendo referencia al nombre del marco en el atributo TARGET de la etiqueta <A> del enlace.

Este parmetro TARGET est relacionado con pulsar un enlace en un marco y cargar la pgina enlazada en otro. Su sintaxis general dentro de la etiqueta <A> es: <A HREF=" [Link]" TARGET= " principal">Principal</A> donde cuerpo es el nombre asignado a un frame mediante el atributo NAME. Con esto, al pulsar el enlace se cargar la pgina [Link] dentro del marco llamado cuerpo.

<A HREF=" [Link] " TARGET= " _blank">Principal</A> y ahora se cargar la pgina en una ventana nueva del navegador, por lo que tendremos dos ventanas abiertas. <A HREF=" [Link] " TARGET= " _self "</A> En este caso el la pgina llamada se va a cargar en el propio frame que la llama. Es equivalente a no colocar el parmetro TARGET, por lo que casi no se usa. Se puede usar para modificar el valor dado por BASE.

<A HREF=" Principal " TARGET= " _parent</A> y la pgina se mostrar en el marco o <FRAMESET> que llam al documento actual. Si no hay ningn <FRAMESET> anterior, la pgina llamada se mostrar a pantalla completa, suprimiendo todos los marcos de la pantalla. Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana.

<BASE TARGET= " nombre" </A> que especifica el frame en el que se mostrar por defecto todos los hiperenlaces del documento actual. Se debe especificar en la cabecera del documento (HEAD).

<AREA SHAPE=RECT COORDS="x,y,..." HREF="url" TARGET="frame" </A> que en la definicin de imgenes sensibles en el cliente, indica el frame donde se ver el documento que se activa en la zona correspondiente de la imagen.

<FORM ACTION="url" TARGET="nombre"</A> que indica al formulario al que se mandan los datos el frame de destino del resultado de los mismos.

* MARGINWIDTH=" x " , con x = n pxeles o porcentaje. Sirve para definir el margen horizontal que queremos que haya dentro del frame, entre l os lmites de este y su contenido. Que indica al formulario al que se mandan los datos el frame de destino del resultado de los mismos.

* MARGINHEIGHT=" x " , con x = n pxeles o porcentaje. Nos define el margen vertical que queremos que haya dentro del frame, entre los lmites de este y su contenido.

* SCROLLING= " yes / no / auto " , que nos va a permitir establecer si el marco tendr o no barra deslizadora cuando el contenido del marco exceda al tamao de este. Sus posibles valores son: - yessiempre aparecer la barra deslizadora. - nonunca aparecer. Por lo tanto, si el contenido es mayor que el texto slo podremos ver lo que quepa en el marco. - autoslo aparecer el scroll si es necesario para poder visualizar el contenido completo del marco. Este es el valor por defecto

* NORESIZE . Este atributo impide que el marco pueda ser redimensionado por el visitante arrastrando su borde. Si no se indica este atributo el marco podr ser redimensionado.

* BORDECOLOR= " color " , con color = nombre color web en ingls o en hexadecimal. Sirve para definir el color del borde del marco concreto al que se aplica. * FRAMEBORDER= " 1 / 0 " . Si se ha establecido BORDECOLOR, si su valor es 0 se mostrar el borde sin efecto 3D en el marco (se percibe mejor en Explorer), y si es 1 s se mostrar este efecto. Adems, si lo igualamos a cero se eliminar el borde con todos los marcos contiguos que tengan tambin este valor a cero.

Etiquetas <NOFRAMES></NOFRAMES> Este par de etiquetas no son atributos de <FRAME> . Se utiliza para prevenir el caso de que el navegador del visitante no soporte frames. Deben situarse antes de </FRAMESET>, y dentro de ellas se incluyen <BODY> texto de aviso </BODY>. Si el navegador no reconoce los frames los ignorar, mostrando el mensaje de aviso. Este atributo est actualmente en dehuso, ya que todos los modernos navegadores soportan frames.

Frames anidados Hasta ahora hemos definido frames simples, es decir, la forma de dividir una pgina en una serie de filas o de columnas que nos posibilitan cargar una pgina html independiente dentro de cada marco. Pero este diseo de pgina, aunque til, es muy simple. Podemos ir ms all anidando frames, es decir introduciendo frames dentro de otros previamente definidos. As, podemos dividir una fila en columnas, una columna en filas, etc

Qu son los formularios? Los formularios son posiblemente la herramientas ms utilizada en Internet para obtener datos e informacin acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar informacin online en la interaccin con el usuario y luego ejecutar una determinada accin con la misma, que podra ser por ejemplo, quizs el caso ms utilizado, un formulario de venta que el usuario completa y luego es enviado va email al vendedor en forma encriptada.