Manual HTML

<HEAD> encabezar el documento
Para ser visualizados en Internet, los documentos son salvados en formato texto y contienen las marcas necesarias para informar al navegador (Netscape, MsIe o Explorer) al respecto. En otras palabras, el navegador visulizar en cualquier caso los documentos con texto salvados en formato .htm, pero si stos carecen de marcas HTML aparecern sin formato de ningn tipo: sin separacin de lneas o prrafos, sin texto alineado, sin negritas, cursivas, etc. La finalidad del HTML es dotar, mediante unos comandos denominados marcas , de formato al documento, as como insertar imgenes y otros elementos multimedia (filmaciones, apliques, etc.). El trabajo que un editor web realiza en el documento HTML est dirigido a proporcionar al navegador toda la informacin necesaria para interpretar correctamente la pgina. Un documento HTML se divide en dos partes fundamentales: el encabezamiento o cabecera y el cuerpo del documento. Es fcil comprender que el cuerpo del documento contiene todos los elementos de la pgina: el texto, las imgenes, los apliques (applet) Java, el cdigo Javascript y todo lo que es visualizado materialmente por el navegador. Por el contrario, la cabecera contiene una serie de datos que el navegador necesita para interpretar correctamente el documento, pero que no se visualizan dentro del mismo. La cabecera tiene, por tanto, una funcin no visible pero fundamental. Entre los elementos facilitados por la cabecera podemos citar: el ttulo de la pgina, los trminos clave para los buscadores, el tipo de HTML soportado y los enlaces base de referencia. Aqu analizaremos slo algunos elementos, omitiendo por el momento el estudio de aqullos que no resultan inmediatamente necesarios para la comprensin del HTML: HTML DOCTYPE HEAD TITLE META
A continuacin describiremos detalladamente las peculiaridades ms relevantes de cada uno de los elementos anteriores.
<HTML>
Todos los elementos y el contenido de un documento HTML estn encerrados dentro de las marcas <HTML></HTML> cuya funcin es servir de apertura y cierre al archivo. Las marcas <HTML></HTML> indican al navegador que el documento est marcado en HTML, si bien los navegadores ms recientes (Netscape 3 y 4, MsIe 3,4 y 5) consiguen interpretar igualmente las marcas sucesivas. Dicho esto, existen en cualquier caso dos razones para introducir siempre la marca
<HTML></HTML> dentro del documento: HTML no es el nico lenguaje de marcado presente en el WWW (pinsese, por ejemplo, en el XML) y corremos el riesgo de que el navegador malinterprete las marcas, confundindolas con otros lenguajes de marcado. Los usuarios de viejos navegadores corren el riesgo de visualizar un documento psimamente formateado.
DOCTYPE
Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debera ser el primer elemento que abriera un documento. Esto quiere decir que ira colocado antes de <HTML>. Se trata de una marca que no precisa de cierre y cuya funcin es proporcionar informacin al servidor de web anfitrin de la pgina. Los datos que facilita DOCTYPE se refieren al tipo de documento visualizado adems de ser necesarios para la comunicacin entre navegador y servidor. DOCTYPE se debe escribir de una forma estndar: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> Esta lnea proporciona algunos datos sobre el documento: HTML PUBLIC: el documento es pblico IETF: el tipo de HTML pblico est gestionado por la Internet Engineering Task Force DTD HTML 4.0: la versin de HTML soportada es la 4.0 EN: el idioma del documento es el ingls El uso de DOCTYPE no es obligatorio y puede omitirse. Ciertamente, su utilizacin ayuda al servidor de web a interpretar correctamente el documento, pero su falta no condiciona la correcta visualizacin. Tal y como puede observarse fcilmente DOCTYPE es una marca que no prev elemento de cierre (no se escribe de esta manera: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>)
<HEAD>
Los elementos <HEAD></HEAD> se colocan inmediatamente despus de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la informacin que necesita el navegador, el servidor de web y los motores de bsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script . Dentro de <HEAD></HEAD> se introduce el ttulo del documento y otros datos. He aqu la sintaxis HTML de un documento con los comandos hasta ahora examinados: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> <HTML> <HEAD></HEAD>
</HTML>
<TITLE>
El elemento <TITLE></TITLE> es el ms utilizado dentro de la marca <HEAD>, dado que sirve para dar ttulo a la pgina. El ttulo suele ser visualizado por los navegadores en la cabecera de pgina. La que figura a continuacin es la imagen del TITLE de HTMLpoint (el texto es: HTMLpoint el sitio italiano sobre el Web publishing):
En caso de que el URL se guarde con "agrega a favoritos" (para MsIe) Y "agrega a marcapginas" (para Netscape) la marca TITLE da nombre a la conexin. En otras palabras, cuando se guarda la direccin, el navegador asigna al mismo lo que aparece dentro de <TITLE></TITLE>. La imagen que sigue muestra el efecto en MsIe (idntico para Netscape):
El contenido que aparece entre las marcas <TITLE></TITLE> es utilizado tambin por algunos buscadores para indicizar la pgina y buscar palabras clave. Altavista constituye probablemente el ejemplo ms eclatante. Por ello, es recomendable proporcionar en el TITLE una descripcin detallada aunque sinttica de la pgina, con todas las palabras clave que los buscadores pueden indicizar. Un consejo que conviene tener presente es el de no exagerar con la longitud del texto, teniendo presentes las exigencias de quienes aaden el sitio al marcapginas y de los buscadores. La sintaxis correcta de la marca TITLE es la siguiente: <TITLE>Mi primera portada con la gua de HTMLpoint</TITLE>
META
Los buscadores representan un recurso indispensable para quienes buscan informacin en la red, y sitios como Altavista, Yahoo, Lycos y Excite se cuentan entre los ms visitados de Internet. Figurar en dichos motores de bsqueda es fundamental para quien crea pginas web y quiere mayor visibilidad. Es necesario, antes de nada, sealar las propias pginas a estos buscadores, lo que se efecta mediante
pequeos formularios presentes en las pginas web bajo la frase "Add your site". Peridicamente estas araas (spider) supervisan los millones de pginas contenidos en sus bases de datos verificando las eventuales modificaciones. Adems de ser incluidos en los buscadores, es importante figurar en los primeros puestos de la lista que aparece al efectuar la bsqueda (a menudo, sobre todo cuando los trminos que se buscan son de uso frecuente y de carcter general, aparecen en las listas miles de sitios). Para ello, debemos adoptar algunas sencillas medidas. Fundamentales por lo que se refiere a este objetivo resultan las marcas de metainformacin (META), cadenas de cdigos que figuran en la cabecera del documento, entre <HEAD></HEAD> y que son las primeras que leen los buscadores. Las palabras clave (keywords) son los trminos que, de manera resumida, describen el contenido de una pgina web. Si, por ejemplo, el sitio se ocupa de la realizacin de pginas web, las palabras clave sern: HTML realizacin pginas web portada buscadores precios mdicos ....... La marca META deber impostarse como sigue: <META name="keywords" Content="HTML, realizacin pginas web, portada, buscadores, precios mdicos"> La coma divide unos trminos de otros. No se escriben comas dentro de las frases que constan de ms de un vocablo para que el buscador puede encontrarlas tal y como aparecen escritas. Naturalmente, si vuestro sitio es multilinge ser recomendable incluir palabras clave en todos los idiomas del sitio, prestando siempre mucha atencin para evitar usar trminos demasiado genricos. En el caso de que se tratara de nombres propios, es aconsejable incluir la forma singular y plural. El buscador considera el nmero de veces que se repite un trmino dentro de la pgina y de las palabras clave; sin embargo, repetir exageradamente la misma palabra en la marca META tiene el efecto contrario al deseado ya que la mayor parte de las araas cancelan estos sitios de las propias bases de datos. Por ello, insistimos en no exagerar con el nmero de trminos incluidos en las palabras clave. Otras marcas de metainformacin se refieren al autor de la pgina web: <META name="author" content="Nombre Apellidos"> el ttulo que aparecer tras la bsqueda: <META name="description" content="Mi primera portada con la gua de HTMLpoint"> y el nombre del editor con el que se ha generado el documento HTML:
<meta name="GENERATOR" content="BLOC DE NOTAS Win95"> Si por cualquier razn quieres que una de tus pginas NO sea indicizada en los motores de bsqueda, debers incluir la siguiente marca de metainformacin: <META NAME="ROBOTS" CONTENT="NOINDEX"> Otra marca META es la que permite el "refresh" de la pgina. Esto significa que la misma pgina u otra diferente puede lanzarse automticamente tras un cierto nmero de segundos determinado por nosotros mismos. He aqu el cdigo: <META HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm"> Donde CONTENT="5 es el nmero de segundos en los que la nueva pgina ser cargada, mientras que url=pippo.htm" es el archivo que ser cargado.
RESUMEN DE LA LECCIN
A continuacin figura una pgina HTML impostada segn cuanto hemos visto en esta leccin. Esta pgina constituir tambin un punto de referencia para las lecciones siguientes: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> <HTML> <HEAD> <META name="keywords" Content="HTML, realizacin pginas web, portada, buscadores, precios mdicos"> <META name="description" content="Mi primera portada con la gua de HTMLpoint"> <meta name="GENERATOR" content="BLOC DE NOTAS Win95"> <META name="author" content="Nombre Apellidos"> <TITLE>Mi primera portada con la gua de HTMLpoint</TITLE> </HEAD> </HTML>
Escribir correctamente las marcas de metainformacin (META)

El estudio de los datos facilitados por los buscadores ms utilizados ha demostrado que el trmino ms buscado es "sex", y que el 80% de los usuarios no consulta ms all de la segunda pgina de la bsqueda efectuada. Esto significa que si una bsqueda por palabra clave responde con 30 pginas de direcciones web, slo 2 usuarios de cada 10 consultarn ms all de la segunda pgina. En ltima instancia, podemos afirmar que los sitios contenidos en la pgina 30 tienen una visibilidad nula. Esta consideracin debera aclarar la vital importancia de colocarse entre los primeros puestos de estas bsquedas. Est demostrado que los buscadores y los directorios llevan ms accesos y visitantes a un sitio que cualquier otro medio (revistas, enlaces con otros sitios, televisin, etc.) En vista de lo anterior, la inclusin de un sitio en un buscador o directorio es una operacin fundamental para el pleno xito del mismo. Algunas medidas y pequeas estratagemas nos pueden ayudar a lograrlo, pero no hay un modo unvoco para resultar a la cabeza de cada
buscador, debido a la banal constatacin de que cada motor tiene peculiaridades propias. Antes de continuar, es conveniente precisar algunos conceptos: no es importante aparecer en todos los buscadores sino al mximo en los 10 de mayor difusin a nivel mundial y en los 2 ms importantes a nivel nacional; desconfiar de los numerosos servicios que por poco dinero prometen la insercin en 500 buscadores porque, a menudo, no dan resultado y porque, como antes sealamos, aparecer en los motores menores no tiene la menor importancia; desconfiar de los programas automticos de insercin; no esperar que las palabras clave de las marcas META sean la nica solucin de estos problemas; con frecuencia, la insercin no es inmediata y en algunos casos (Lycos y HotBot) ha sucedido incluso que la base de datos no fuese actualizada durante meses. El nmero de personas que en EEUU se ocupan exclusivamente de la inclusin de sitios en los buscadores se estima en alrededor de 100 unidades. Esto significa que ningn directorio puede controlar materialmente todos los nuevos sitios incluidos, por lo que muchos son indicizados sin haber sido antes sometidos a verificacin. Este estado de cosas crea una cierta confusin, adems de una prdida de calidad de las inserciones. Infoseek ha hecho pblico que recibe diariamente 30.000 nuevas solicitudes de inclusin, algo menos de la mitad de las de Yahoo.com. La inclusin en los directorios est, por su misma naturaleza, ms humanizada y es difcil que sea objeto de trucos ms o menos lcitos. Antes bien, intentar colocarse astutamente en los primeros puestos de los directorios puede resultar contraproducente, visto que los operadores, conocedores del truco, incluyen el sitio en el "limbo de los listos", en una posicin prcticamente invisible. Diverso es, sin embargo, el caso de los buscadores donde quien recibe la solicitud de insercin no es un ser humano sino una araa (spider). A lo largo de los aos, las araas, no demasiado perspicaces al inicio, han ido perfeccionando sus propios instrumentos y han radicalizado en muchos casos la intolerancia ante trampas y trucos. A menudo basta una palabra clave repetida dos veces para provocar la cancelacin del sitio de la base de datos. Antes de nada, por tanto, hay que evitar resultar penalizados. Trucos que hasta hace un ao permitan colocarse en los primeros puestos de los buscadores hoy son reconocidos por las araas. Por ejemplo, no es una buena idea insertar texto escondido en la pgina HTML de color idntico al fondo, as como no lo es tampoco crear pginas con palabras clave que no tengan ninguna relacin con el contenido del sitio slo porque son palabras que los usuarios buscan frecuentemente (p.ej., incluir el trmino "sex" en un sitio que se ocupa de informtica). Evitar radicalmente incluir pginas con una marca META "refresh" que enva a otra pgina tras un cierto nmero de segundos. Una vez dejado bien sentado que la ilegalidad no es rentable, aqu tienes una serie de sugerencias que te permitirn obtener un buen puesto en los buscadores: evitar, en la medida de lo posible, el uso de marcos HTML; no iniciar el documento HTML con una imagen o una tabla; dedicar particular atencin a la portada del sitio; evitar, en la medida de lo posible, el uso de pginas ASP (Active Server Pages) o denominadas con un nombre de archivo donde aparezca un signo de interrogacin "?"; incluir las palabras clave del sitio entre las marcas <TITLE></TITLE>, ya que muchas araas (Altavista in primis) conceden a esto gran importancia; utilizar las marcas <H1><H2> etc. crear "DOORPAGE", es decir, pginas de soporte de las pginas principales, que incluyan texto y palabras clave relacionadas con el sitio; no registrar ms de una pgina al da; registrar dominios de primer nivel. Por ejemplo, www.nome.com antes que www.nome.com/directry;
la marca de metainformacin "keywords" no debe contener trminos repetidos ni ms de mil caracteres. El 90% de las bsquedas corresponde a trminos escritos en minsculas, por lo que es preferible evitar las maysculas; la marca de metainformacin "description" es fundamental porque el buscador asocia a sta el enlace con el sitio. No debe superar los 300 caracteres.
<BODY> Impostar el fondoEn la leccin precedente hemos visto cmo crear un documento HTML
partiendo de cero y cmo impostar el ttulo y las marcas de metainformacin. La operacin que sigue a la impostacin del documento es la definicin del color o de la imagen del fondo, as como de los colores de los enlaces activos y de los visitados.
<BODY>
El elemento <BODY> se coloca inmediatamente despus del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento. Si el elemento <HEAD> contena metainformacin (es decir, datos no visualizados materialmente por el navegador) la funcin de la marca <BODY> es la de mostrar los objetos (texto, imgenes, sonidos, apliques, etc.) de la pgina. La sintaxis correcta del elemento <BODY> es la siguiente: <BODY> Contenido del documento </BODY> La marca <BODY> se utiliza tambin para proporcionar al navegador informacin sobre la disposicin de los objetos en el documento, as como para impostar varios atributos de visualizacin para el documento. A continuacin veremos cules.
BGCOLOR
El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es: <BODY BGCOLOR="red"> Es posible sustituir el nombre en ingls con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera: <BODY BGCOLOR="#ff0000"> La utilidad de los colores hexadecimales es mayor cuando no se desea un color estndar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusin prevn paletas para la definicin de los colores hexadecimales, mientras que Paint Shop Pro proporciona tambin, adems del color, el correspondiente valor hexadecimal que copiar/pegar. Para un ejemplo prctico, haz clic aqu
BACKGROUND
BACKGROUND tiene una funcin similar a BGCOLOR, pero mientras el segundo muestra un tono nico del color, el primero visualiza en el fondo una imagen en formato grfico .gif o .jpg. Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es: <BODY BACKGROUND="sfondo.gif"> El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la pgina por ejemplo, sino que llena todo espacio a disposicin. Por esta razn, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo ms uniforme posible. Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo ms posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podra leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo. Para un ejemplo prctico, haz clic aqu
TEXT
Si no viene establecido diversamente, el color del texto del documento es el negro ya que los navegadores asignan este color por defecto. Gracias al atributo TEXT es posible asignar al texto un color distinto del negro. La sintaxis correcta es: <BODY BACKGROUND="sfondo.gif" TEXT="red"> Tambin en este caso los colores pueden expresarse con nombres o con valores hexadecimales. En el interior del documento podemos marcar parte del texto con colores diferentes del que hemos impostado en TEXT. Para un ejemplo prctico, haz clic aqu
LINK
Si no viene establecido diversamente, el color de los enlaces (que todava no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes: <BODY BACKGROUND="sfondo.gif" LINK="red"> Todos los enlaces de la pgina no sern ya azules sino rojos (red). Este color puede expresarse en valores hexadecimales. Para un ejemplo prctico, haz clic aqu
ALINK
Cuando hacemos clic en un enlace, ste se vuelve de un color distinto al impostado en LINK (o al azul de la opcin por defecto). Gracias a ALINK (la A significa Active), es posible modificar este color: <BODY BACKGROUND="sfondo.gif" ALINK="yellow">
VLINK
Cuando se visita un URL asociado a un enlace, este ltimo se vuelve de un color distinto al de LINK (o al azul de la opcin por defecto). Gracias a VLINK (la V significa Visited), es posible modificar este color: <BODY BACKGROUND="sfondo.gif" VLINK="green"> Para un ejemplo prctico, haz clic aqu
BGPROPERTIES
Hablando del atributo BACKGROUND hemos resaltado el hecho de que las imgenes estn dispuestas ocupando toda la pantalla disponible. Si la pgina fuera tan larga como para tener que activar la barra de desplazamiento lateral, el fondo (la imagen asociada) ira pasando junto con la pgina. Para comprender mejor esta cuestin, haz clic aqu para ver un ejemplo, y despus pasa la pgina hacia abajo. Gracias a la propiedad BGPROPERTIES es posible hacer que el fondo permanezca inmvil respecto al desplazamiento de pgina. La sintaxis correcta es: <BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed"> Esto funciona slo con MsIe y no con Netscape que, en cambio, contina desplazando la pgina. Para un ejemplo prctico, haz clic aqu
Sonidos o msica de fondo

La presencia de archivos sonoros en forma de MIDI o WAV puede servir como agradable banda sonora mientras se navega por el web, pero tambin puede ser un pesado fardo que sirve slo para hacer ms lento el cargado y poner nervioso al visitante. Como repetiremos a menudo en esta gua, no podemos olvidar que aunque, sin lugar a dudas, una atractiva impostacin grfica y musical de las pginas web es importante, es fundamental que la navegacin no llegue a ser lenta o incluso, en ltima instancia, imposible si nos preocupa mnimamente nuestra cuenta de telfono. Nuestro consejo es, por tanto, evitar archivos MIDI grandes (60Kb de archivos MIDI, por ejemplo, resultan exagerados) y enormes WAVE (que podemos sustituir con otros archivos ms ligeros, como veremos a continuacin). Tomemos un archivo MIDI; imaginemos que se llama "imagine.mid"; y consideremos que queramos insertarlo como fondo de la pgina web nada ms abrirse sta, automticamente por tanto. Antes de nada, debemos pensar que Navigator y MSIE utilizan marcas diversas para llamar automticamente un archivo MIDI de fondo.
Por ejemplo, la marca <BGSOUND> funciona slo con MSIE pero no con Navigator (LOOP indica el nmero de veces que debe repetirse el midi): <BGSOUND SRC="imagine.mid" LOOP=INFINITE> Haz clic aqu tanto con MSIE como con Navigator para probar. Adems de los archivos MIDI, con la marca <BGSOUND> es posible insertar archivos .WAV y .AU Para permitir la apertura automtica de un archivo audio tambin con Netscape, hay que usar la marca <EMBED>: <EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0"> Haz clic aqu tanto con MSIE como con Navigator para probar. Tambin en este comando adems de los archivos MIDI es posible insertar archivos .WAV y .AU Una de las rmoras para la insercin de archivos midi en las propias pginas, obedece al hecho de que, cada vez que se cambia pgina, el archivo musical se interrumpe bruscamente. El problema no subsiste en los sitios divididos en marcos (frames), ya que el archivo musical se carga en el marco fijo y, por tanto, no cambia cuando se pasa pgina en los otros marcos. Y por lo que respecta a los sitios sin marco? Una pequea estratagema que toma piede los marcos puede ser la de construir una pgina con un marco "invisible". Para ello, se crea una pgina con el siguiente cdigo: <FRAMESET rows="0,*" border=0 frameborder="0" framespacing="0"> <frame me name="alto" src="top.htm" noresize> <frame me name="centrale" src="central.htm" noresize> </FRAMESET> donde en el marco "alto" insertaremos el cdigo que invoca el archivo audio: <EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0"> y en el marco "central" el contenido de las pginas. Para probar, haz clic aqu.
Otra "estratagema" para escuchar un archivo audio (SLO CON NETSCAPE) de manera continua incluso cuando se cambia pgina, es el de cargar dicho archivo en una ventana alternativa del navegador. Para hacer esto, es necesario utilizar un pequeo pero importantsimo TARGET. Los TARGET se usan sobre todo en los marcos pero pueden usarse tambin en otros casos. As, por ejemplo, si queremos que una pgina asociada a un enlace se cargue en una ventana distinta del navegador, tendremos que insertar el TARGET="_new". Pongamos que el midi para escuchar se llame "imagine.mid"; el cdigo sera: <A HREF="imagine.mid" TARGET="_new">Escucha el midi imagine.mid</A>
Haciendo clic se abrir una ventana por defecto, la cual se colocar al lado de la principal (aqulla desde la que se ha LANZADO el enlace). Aqu tienes el ejemplo prctico: Escucha el midi imagine.mid Este procedimiento es vlido slo para Nestcape. De este modo, el visitante podr leer el texto que aparece en la finestra desde la que ha lanzado el archivo "imagine.mid" y, mientras tanto, la otra ventana producir el midi. En el momento en que el visitante haga clic en otro midi para escucharlo, ste se cargar automticamente en la ventana precedente ya abierta para "imagine.mid" (o sea, no se abrirn decenas de ventanas). Desgraciadamente, esto funciona slo con Netscape y no con MSIE. Para atender las necesidades de los usuarios del navegador de Redmond es necesario arquitectar un procedimiento algo ms complejo, el cual consiste en asociar al enlace no el simple archivo midi "imagine.mid" sino un archivo HTML que contenga un comando EMBED que haga partir automticamente el midi. Para probar, haz clic aqu. Es <FONT> formatear el textote procedimiento funciona con ambos navegadores.
Antes de entrar de lleno en los temas relacionados con la formatacin del texto, es conveniente precisar algunos de los conceptos que rigen su uso.
Marcas de texto lgicas y tipogrficas

HTML es un sistema de marcado cuya funcin es definir la estructura y aspecto de un documento. Debemos profundizar esta definicin, que sin ms aclaraciones no dira mucho, a fin de comprender mejor los conceptos de marcas lgicas y tipogrficas. Una marca tipogrfica tiene como funcin formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo, etc. Una marca lgica, por el contrario, tiene como funcin definir una estructura independientemente del aspecto. Es decir, independientemente del modo en que el navegador interpretar visualmente el marcado. Para comprender mejor esta diferencia, tomemos dos elementos que sirven para formatear texto: <ADDRESS></ADDRESS> Se trata de una marca lgica que representa la informacin "direccin" en el documento. Dicho de otro modo, cuando estamos ante una direccin, una direccin de correo electrnido o un nmero de telfono, segn las reglas del HTML, hay que insertar esta marca lgica. <I></I> Se trata de una marca tipogrfica que indica que el texto comprendido en el elemento va en cursiva. Es, por tanto, una marca cuya funcin es dar un determinado aspecto al documento y no marcar una estructura. Veamos ahora juntos cul es el resultado visual de su utilizacin en el interno de un documento web:
webmaster@html.it webmaster@html.it Sin mirar la fuente del documento, podras averiguar qu texto ha sido formateado con ADDRESS y cul con I?. Visualmente ambas marcas (la primera es ADDRESS y la segunda I) producen el mismo resultado (el texto en cursiva). Sin embargo, desde el punto de vista de la estructura del documento, slo el primero (ADDRESS) indica que dentro hay una direccin, mientras que el segundo no proporciona ninguna informacin de este tipo.
La marca FONT y el nuevo estndar HTML 4

HTML 4 es el estndar que, desde hace casi dos aos, rige las suertes del lenguaje de marcado ms popular del mundo. Sin hacer juicios de valor sobre las novedades del nuevo estndar, queremos subrayar que el W3C ha desaconsejado el uso de la marca FONT en la formatacin del texto en HTML. As, los navegadores leen todava esta marca, pero su uso est rigurosamente prohibido por el nuevo estndar. Segn HTML 4, la formatacin del texto corresponde exclusivamente a las hojas de estilo. En esta leccin no tendremos en cuenta las indicaciones del W3C y explicaremos el uso de las marcas clsicas del HTML 4. Para profundizar en el tema CSS, puedes consultar la seccin Hojas de estilo de este sitio.
Formatear ttulos de <H1> ad <H6>

La marca <Hn> (donde n puede ser cualquier nmero comprendido entre 1 y 6) se emplea para definir el estilo de los encabezados de la pgina, dndoles ms o menos relieve segn el nmero correspondiente. Como hemos sealado, los nmeros van del 1 al 6, siendo ms importantes los nmeros ms bajos que los altos. Visualmente, esta diversa importancia se plasma en la diferente dimensin del texto, como en el siguiente ejemplo: Para un ejemplo prctico, haz clic aqu
Adems de definir el estilo de los encabezados, la marca <Hn> introduce separaciones de prrafo.
<FONT>
La marca tipogrfica FONT es una de las ms utilizadas y frecuentes en el actual web publishing. En la seccin Impostar el fondo del documento (elemento BODY), hemos visto que el atributo TEXT da un color nico a todo el texto del documento. La marca FONT tiene, en parte, una funcin similar, aunque es mucho ms amplia y conceptualmente diversa. La marca FONT se emplea para formatear el tipo y tamao del texto en algunos puntos del documento especficos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedara formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan slo en color del texto, la marca FONT puede definir el tipo utilizado, as como su tamao y color. Aqu tienes la sintaxis correcta de la marca: <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT> El atributo FACE="arial" indica el tipo que se visualizar; SIZE=5 el tamao del tipo, que puede
estar comprendido entre 1 y 7 (mayor dimensin cuanto ms cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales). Para un ejemplo prctico, haz clic aqu
<B>, <I>, <U>

<B>, <I>, <U> son tres de las marcas de formatacin tipogrfica ms usadas del HTML. Todas ellas deben constar de apertura y cierre: <B> Texto en negrita </B> El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al ingls BOLD). <I> Texto en cursiva </I> El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al ingls ITALIC) <U> Texto subrayado </U> El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al ingls UNDERLINE). Existe tambin la marca STRIKE para el texto tachado: <STRIKE> Texto tachado </STRIKE> Para un ejemplo prctico, haz clic aqu
<SUP> y <SUB>
Estas dos marcas tipogrficas crean respectivamente superndices(SUP), en los que el texto est en posicin ligeramente superior respecto al texto normal, y subndices (SUB), posicin ligeramente inferior respecto al texto normal. Es posible anidar diversas marcas a fin de obtener efectos de superposicin sucesiva. Estos elementos se usan, sobre todo, en las notas o en las frmulas matemticas. La sintaxis correcta es: HTMLpoint <SUP></SUP> es una marca registrada HTMLpoint <SUB></SUB> es una marca registrada Para un ejemplo prctico, haz clic aqu
Texto preformateado
HTML lee el texto, obviamente, de izquierda a derecha y, sin ningn tipo de formatacin, cambia de rengln al final de cada lnea sin interrupciones. La formatacin que examinamos en esta leccin indica al navegador dnde saltar de lnea, qu tipo de carcter utilizar, qu palabras resaltar, etc. A menudo, sin embargo, hay que importar un documento creado con un editor de texto normal sin formatear, tal y como ha sido creado. Para ello, HTML prev las marcas de texto preformateado, las cuales no leen ni interpretan algunas marcas de HTML ni los caracteres especiales: <XMP> Texto para formatear </XMP>
<PRE> Texto para formatear </PRE> Para un ejemplo prctico, haz clic aqu
Ambas marcas tienen la misma funcin, aunque el estndar de HTML 4 prev el uso de XMP y no de PRE.
Breve descripcin de las marcas lgicas

Al inicio de la leccin, hemos definido la diferencia entre marcas tipogrficas y lgicas. Ahora citamos las marcas lgicas ms interesantes y su correspondiente utilizacin en HTML: <ADDRESS> Se emplea para indicar informacin relacionada con cualquier tipo de direccin (e-mail, telfono, etc.). <BLOCKQUOTE> Se usa en las citas textuales que ocupan ms de dos o tres lneas. <CITE> Indica la fuente de la cita. <CODE> Se utiliza para formatear lneas de cdigos de programacin. <DFN> El texto comprendido dentro es una definicin. <EM> Da nfasis al texto comprendido dentro. <KBD> y <SAMP> Poco utilizados. Indican cosas que el ordenador debera decir al usuario y viceversa, segn un tpico concepto de Unix. <STRONG> Denota nfasis fuerte. <VAR> Asociado a CODE, indica las variables de programacin.
Prrafos y alineacin
En la leccin anterior hemos visto como formatear un sencillo texto en HTML. Ahora nos centraremos en cmo disponer, dividir y colocar el texto y dems objetos de una pgina HTML dentro del documento.
Crear prrafos con <P>
La marca <P> sirve para definir un nuevo prrafo de texto, indicando al navegador que el mismo debe empezar en una nueva lnea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la izquierda. Para indicar otros tipos de alineacin, existen atributos especficos: <P ALIGN=left> Define un prrafo y alinea el texto a la izquierda(left). <P ALIGN=right> Define un prrafo y alinea el texto a la derecha (right). <P ALIGN=center> Define un prrafo y centra el texto (center). Para un ejemplo prctico, haz clic aqu
Salto de lnea con <BR>

<BR> es una marca de interrupcin de lnea. Tiene un funcionamiento similar a la marca de prrafo vista anteriormente, pero se diferencia porque no indica el inicio de un nuevo prrafo. Dicho de otro modo, su funcin es parecida a la de la tecla "enter" del teclado. Se usa sin marca de cierre.
Disponer el texto con <DIV ALIGN> y <CENTER>

El elemento <DIV> se utiliza para alinear horizontalmente el texto a la izquierda, a la derecha o en el centro de la pgina. El atributo ALIGN es fundamental a este respecto. <DIV ALIGN=left>Texto e imgenes a la izquierda</DIV> Mueve a la izquierda los elementos contenidos dentro de sus marcas. <DIV ALIGN=right>Texto e imgenes a la derecha</DIV> Mueve los elementos a la derecha. <DIV ALIGN=center>Texto e imgenes centrados</DIV> Centra los elementos. Para un ejemplo prctico, haz clic aqu La marca <CENTER> tiene un funcionamiento idntico al de <DIV ALIGN=center> pero su uso ha sido depreciado por el estndar 4 de HTML. El uso de <CENTER> fue introducido por Netscape, justo cuando el HTML prevea la salida de DIV. La enorme difusin inicial de Netscape ha hecho que el uso de esta marca est tambin muy difundido, por lo que todava los navegadores la utilizan y reconocen (incluido MsIe). El uso de <CENTER> es muy simple: <CENTER>Texto para centrar</CENTER>
Lneas horizontales con <HR>

Las lneas horizontales constituyen un instrumento idneo para dividir partes del documento y hacer ms legible el texto. La sintaxis necesaria para su insercin en un documento HTML es la siguiente:
<HR align="CENTER" size="2" width="400" color="Red" noshade> La marca HR (acrnimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos: aling="CENTER": define la alineacin de la lnea (center, right, left). size="2": define el grosor, en pxel, de la lnea. width="400": define la longitud horizontal, en pxel, de la lnea. Puede tambin expresarse en tanto por cien respecto al espacio a disposicin: width=80%. color="RED": define el color de la lnea.
noshade: si este atributo est presente, elimina el efecto 3D de la lnea. Si no est presente,
produce dicho efecto. Para un ejemplo prctico, haz clic aqu
Crear listas ordenadas y desordenadas

Las listas representan uno de los instrumentos ms difundidos para organizar la informacin dentro de los sitios web. Una de sus caractersticas principales es la de proporcionar un cuadro claro y sinttico del tema tratado. HTML pone a disposicin distintos tipos de listas. A continuacin, analizaremos cada uno de ellos.
Listas ordenadas
Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el men <LI>. La sintaxis correcta para elaborar listas ordenadas es: <OL> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </OL> Para un ejemplo prctico, haz clic aqu En el ejemplo notamos cmo es posible omitir la marca <BR> para el salto de lnea, dado que est automticamente incluido en <LI>. Si no se establece diversamente (como veremos a continuacin), el tipo de lista ordenada que el navegador visualiza est numerada (es decir, la lista consta de una serie de nmeros que parte del 1 y va aumentando progresivamente). Las ltimas versiones de HTML prevn la posibilidad de listas ordenadas que contengan un sistema de ordenacin diverso del numrico antes citado: Ordenacin con letras maysculas: <OL TYPE=A> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </OL> Ordenacin con letras minsculas:
<OL TYPE=a> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </OL> Ordenacin con nmeros romanos en mayscula: <OL TYPE=I> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </OL> Ordenacin con nmeros romanos en minscula (romanitos): <OL TYPE=i> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </OL> Para un ejemplo prctico, haz clic aqu
Listas desordenadas
Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia bsica es que en el caso de las listas desordenadas no existen relaciones jerrquicas entre los elementos del elenco, por lo cual no se prevn ordenaciones progresivas como las obtenidas mediante nmeros o letras. Las listas desordenadas constan de una sola marca de apertura y cierre <UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es: <UL> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </UL> Para un ejemplo prctico, haz clic aqu Si no se especifica diversamente, cada voz del elenco va precedida de un smbolo geomtrico. Al igual que para las listas ordenadas, tambin en este caso podemos indicar diversos tipos de smbolos: Los crculos slidos de la lista anterior se obtienen con disc: <UL TYPE=disc> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </UL>
El atributo circle imposta circunferencias: <UL TYPE=circle> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </UL> El atributo square imposta listas definidas por cuadrados slidos: <UL TYPE=square> <LI> Primera voz del men <LI> Segunda voz del men <LI> Tercera voz del men </UL> Para un ejemplo prctico, haz clic aqu
<IMG> insertar imgenes

Internet, que slo en los ltimos 10 aos se ha afirmado como medio de comunicacin de masa, durante mucho tiempo fue un sistema de comunicacin utilizado exclusivamente por el mundo militar, primero, y por el universitario, despus. Es fcil imaginar la escasa inclinacin hacia el diseo y la esttica mostrada por estos primeros navegantes de la red. A finales de los aos 80, Internet sufri una transformacin radical que condujo hasta las "autopistas telemticas" a un pblico de masa, con exigencias diversas de las militares o acadmicas. Con la transformacin de la red, se ha impuesto la necesidad de poner a disposicin instrumentos de navegacin ms fciles de usar ("user friendly") y no slo para el estudio o la investigacin. As, en 1989 nace el WWW, que gracias al primer navegador de la historia, Mosaic, transforma el texto blanco sobre fondo negro en el actual web, hecho de color e interactividad. La revolucin de la imagen (criticada por algunos puristas acadmicos que vieron en el Internet de masa el fin del sistema de comunicacin) fue tambin mrito de una marca hoy muy comn <IMG>, esto es, el elemento necesario para invocar imgenes dentro de la pgina.
<IMG>
Antes de describir en detalle la marca principal de insercin de imgenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imgenes que les sirven de acompaamiento grfico, sino que se limitan a invocarlas desde un recorrido especfico in situ o en el web. Dicho de otro modo, existe una divisin muy clara entre archivo .htm e imgenes (y tambin sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imgenes solicitadas. La marca <IMG> no necesita cierre y su sintaxis correcta es: <IMG SRC="immagine.gif"> donce SRC corresponde al ingls Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos sealado, esta marca es nica en el sentido de que NO lleva como cierre el correspondiente </IMG>. Para un ejemplo prctico, haz clic aqu Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos grficos, aunque los ms utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics
Experts Group). En los ltimos meses, asistimos a la difusin a nivel internacional de otro formato: PNG (Portable Network Graphics). El elemento <IMG> va acompaado de diversos atributos que facilitan su uso. Veamos ahora juntos cules son.
ALT
El uso de texto para comentar las imgenes es una regla fundamental que debemos observar en la creacin de sitios web por varias razones: algunos navegadores pordran estar impostados para no invocar las imgenes; los navegadores textuales para invidentes no conseguiran interpretar las imgenes si carecieran de comentario; es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma. En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la pgina web. La sintaxis correcta de los comentarios es la siguiente: <IMG SRC="immagine.gif" ALT="Obra de K. Haring"> Para un ejemplo prctico, haz clic aqu Para comprobar sus efectos, pasa el ratn por encima de la imagen del ejemplo.
WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente: <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring"> donde WIDTH=178 es la dimensin horizontal (ancho) de la imagen expresada en pxel, y HEIGHT=180 la dimensin vertical (alto). Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imgenes con su tamao efectivo sobre todo si estn en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numricos y van expresados en pxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningn borde, pero si la imagen es tambin un enlace automticamente se le asignar un BORDER=1. La sintaxis correcta es: <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring"> Para un ejemplo prctico, haz clic aqu
HSPACE y VSPACE
Con estos dos atributos podemos establecer la distancia en pxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.
HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.). VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.). La sintaxis correcta es <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring"> Estos atributos resultan tiles cuando queremos distanciar la imagen de los objetos ms cercanos.
ALIGN
El atributo ALIGN define la posicin de la imagen respecto al texto colocado inmediatamente antes o despus de la misma. Existen varias opciones para el atributo ALIGN: ALIGN=top: alinea la primera lnea de texto con la parte superior de la imagen. Para un ejemplo prctico, haz clic aqu. ALIGN=middle: alinea la primera lnea del texto con el centro de la imagen. Para un ejemplo prctico, haz clic aqu. ALIGN=bottom: alinea la primera lnea de texto con la parte inferior de la imagen. Para un ejemplo prctico, haz clic aqu. ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma. Para un ejemplo prctico, haz clic aqu.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior

de la misma. Para un ejemplo prctico, haz clic aqu.
<HREF> crear enlaces

Habrs odo muchas veces hablar de hipertextos y de cmo stos sustenten el web. Un hipertexto es un modo de formatear documentos de manera no secuencial. Para comprender esta caracterstica, podemos pensar en un libro impreso en papel cuya estructura fuera ndice, captulos y glosario. Dicha estructura es secuencial en el sentido de que se lee el ndice para pasar despus a los captulos (yendo del primero al ltimo) y acabar con el glosario de trminos. Al lector, en este caso, se le marca un recorrido que le lleva a leer el primer captulo para llegar al ltimo. Con el hipertexto esta estructura secuencial desaparece gracias a los enlaces hipertextuales, que permiten leer el documento sin seguir necesariamente un orden predeterminado. La peculiaridad de saltar de un punto a otro del documento es tpica del WWW, donde a menudo siguiendo un documento saltamos de un sitio a otro. Los documentos HTML son hipertextos cuyo funcionamiento se debe, en su mayor parte, a los hiperenlaces o anclajes, cuya marca especfica es <A>.
<A HREF>
El elemento <A> (la A corresponde al ingls Anchor) necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imgenes y otros elementos multimedia. Para que funcione, el elemento <A> debe estar asociado a otros atributos. De stos, el ms
importante es HREF (abreviatura del ingls Hypertext Reference), que contiene el URL o pgina donde ir. La sintaxis es: <A HREF="http://www.htmlpoint.com">Visita HTMLpoint</A> En el cdigo antes citado, si hacemos clic en el texto "Visita HTMLpoint" (comprendido entre las marcas de apertura y cierre), llegamos al URL http://www.htmlpoint.com indicado por el atributo HREF. Es posible sustituir el texto con una imagen obteniendo un efecto idntico. HREF puede contener tanto enlaces a recursos externos (como en este caso), como enlaces a otros documentos de la misma direccin. Por ejemplo, si nos encontraramos en la pgina 1.htm y quisiramos incluir un enlace a la pgina 2.htm presente en la misma carpeta, el cdigo correcto sera: <A HREF="2.htm">Haz clic aqu para llegar a la nueva pgina</A>
TARGET
TARGET es un atributo implementado por exigencias relacionadas con la gestin de los marcos. En una pgina dividida en marcos, este atributo indica en cules de ellos debe quedar visualizado el documento. No entraremos aqu en detalles sobre los marcos ya que comentaremos este tema ms adelante. Sin embargo, s nos ocuparemos aqu de otro uso de este atributo: gracias a TARGET podemos cargar una pgina asociada a HREF en otra ventana del navegador usando la siguiente sintaxis: <A HREF="http://www.htmlpoint.com" TARGET="_new">Visita HTMLpoint</A> Aqu tienes el ejemplo prctico: Visita HTMLpoint El atributo TARGET="_new" indica al navegador que debe cargar el enlace con http://www.htmlpoint.com en una nueva (_new) ventana. El empleo de distintas ventanas para cada enlace es muy til cuando se manda a recursos externos ya que nos permite no perder al visitante: el usuario de este modo tendr abiertas dos ventanas y no dejar de tener disponible nuestra pgina.
TITLE
Al igual que para el elemento IMG, tambin en el caso de los enlaces hipertextuales podemos definir un texto con un comentario que se activar cuando pasemos el ratn por encima del enlace. La sintaxis es: <A HREF="http://www.htmlpoint.com" TITLE="El sitio italiano sobre el web publishing">Visita HTMLpoint</A> Aqu tienes el ejemplo prctico: Visita HTMLpoint
MAILTO (enlace a e-mail)

Es posible asimismo incluir enlaces con direcciones de correo electrnico utilizando una sintaxis algo distinta de la indicada para los URL. El cdigo es:
<A HREF="mailto:webmaster@html.it">Escribe a HTMLpoint</A> Aqu tienes ejemplo prctico: Escribe a HTMLpoint Haciendo clic en este enlace se abre automticamente tu programa de correo electrnico predefinido con el campo TO ya impostado en webmaster@html.it.
Enlaces con partes de un mismo documento

Hasta ahora hemos analizado los enlaces con recursos externos o con pginas diversas de un mismo sitio. Sin embargo, podemos asimismo crear enlaces con puntos especficos de un mismo documento gracias al cdigo <A NAME="ancora">. En otras palabras, si con los enlaces examinados hasta ahora llegamos a un documento, con <A NAME> llegamos a una parte concreta del documento. A continuacin, figura el procedimiento que hay que seguir para crear enlaces con puntos internos del documento: Inserta la marca <A NAME="ancora"> en el punto del documento al que quieres que se llegue (.ANCORA es un identificador del punto en el que el navegador deber visualizar la pgina. Obviamente puedes sustituirlo con otros trminos).
En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente
sintaxis: <A HREF="#ancora">Visita HTMLpoint</A> La almohadilla (#) indica que se trata de un enlace interno. En este ejemplo se manda a un punto de la misma pgina, porque a la derecha de la almohadilla aparece el nombre del enlace interno, mientras que a su izquierda no hay nada escrito. Si quisiramos llegar a un punto concreto de un documento externo, la sintaxis correcta sera: <A HREF="nome_file.htm#ancora">Visita HTMLpoint</A>, donde "nome_file.htm" es el nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho documento. Haciendo clic en el enlace que aparece a continuacin, visualizars un punto de este mismo documento. Para probar, haz clic aqu.
<TABLE> gestionar tablas
La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que seala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en pxel o en tantos por ciento respecto a la pgina: <TABLE WIDTH=500> </TABLE> En este ejemplo de cdigo, la anchura de la tabla est expresada en pxel (500). Si se elige esta opcin, sea cual sea la resolucin con la que venga vista la pgina, la medida de la tabla no sufrir variaciones, es decir, en nuestro caso ser siempre de 500 pxel. No suceder lo mismo, sin embargo, si decidimos expresar el tamao mediante
un porcentaje: <TABLE WIDTH=50%> </TABLE> En este caso, la anchura de la tabla ser distinta segn sea la resolucin del vdeo del usuario. As, por ejemplo, quien tenga un vdeo con resolucin 640x480 ver una tabla de unos 320 pxel (porque hemos impostado un ancho de tabla equivalente al 50% de la pgina), mientras quien tenga un vdeo con resolucin 800x600 ver una tabla de 400 pxel. En nuestra opinin, es preferible mantener el control absoluto sobre la dimensin de la tabla utilizando, por tanto, la medicin en pxel y no en tanto por ciento. Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para ello utilizaremos algunas imgenes:
Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla. He aqu cmo el diseo puede ser transformado en cdigo y, por tanto, en una tabla propiamente dicha: <TABLE BORDER=1 WIDTH=300> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> </TABLE>
prueba
prueba
prueba
En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:
Como podemos observar, hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aqu cmo el diseo puede ser transformado en cdigo y, por tanto, en una tabla propiamente dicha: <TABLE BORDER=1 WIDTH=300> <TR> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> </TR> <TR> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> </TR> </TABLE>
prueba prueba
prueba prueba
prueba prueba
El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en pxel):
<TABLE CELLPADDING=10 CELLSPACING=10> </TABLE> La colocacin del texto y de las imgenes dentro de los distintos campos <TD> de la tabla puede ser modificada de varias maneras: <TABLE WIDTH=300 HEIGHT=200> <TD width=100 VALIGN=TOP> prueba </TD> <TD WIDTH=100 VALIGN=BOTTOM > prueba </TD> <TD WIDTH=100 VALIGN=MIDDLE> prueba </TD> </TABLE>
prueba
prueba
prueba
<TABLE WIDTH=300 HEIGHT=200> <TD width=100 ALIGN=RIGHT> prueba </TD> <TD WIDTH=100 ALIGN=CENTER> prueba </TD> <TD WIDTH=100 ALIGN=LEFT> prueba </TD> </TABLE>
prueba
prueba
prueba
Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo como los de las pginas web normales (los fondos pueden ser sustituidos con GIF animadas):
<TABLE WIDTH=300 HEIGHT=200> <TD width=100 BGCOLOR="red"> prueba </TD> <TD WIDTH=100 BGCOLOR="yellow"> prueba </TD> <TD WIDTH=100
prueba
prueba
prueba
BGCOLOR="gray"> prueba </TD> </TABLE>
<TABLE WIDTH=300 HEIGHT=230> <TD width=100 BACKGROUND="sfondo15.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo26.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo61.jpg"> prueba </TD> </TABLE>
prueba prueba prueba
Hojas de estilo
HTML adolece de las limitaciones propias de un sistema de marcado ideado con objetivos muy alejados de los que actualmente se exige que cumpla el web design. Aun cuando estas limitaciones puedan parecer marginales a los ojos de los nefitos, resultan un peso, que conduce en muchos casos a la inmovilidad, para los profesionales formados en la grfica tradicional. Colocar una imagen, crear una pancarta lateral, justificar texto en HTML se convierte en un problema cuya resolucin es posible slo con el uso de instrumentos nacidos con otra finalidad (las tablas, por ejemplo, en el 90% de los casos se utilizan para disponer elementos en la pgina, en lugar de servir para ordenar datos). El problema, en trminos algo ms tcnicos, tiene relacin con la clsica separacin SGML entre estilo, contenido y estructura. El HTML "tradicional" no slo no satisface esta condicin, sino que, por el contrario, acrecienta la no separacin. Pero qu significa separar el estilo de los contenidos?. Tomemos un sitio web de complejidad media, con un nmero de pginas HTML igual a 100. Pongamos que el tipo adoptado para tratar los temas sea un "arial" de cursiva. Con los instrumentos clsicos de HTML el cdigo para obtener este resultado sera: <FONT FACE="ARIAL"><I>Texto de la pgina</I></FONT> que debera repetirse en todas y cada una de las 100 pginas del sitio, en la apertura y cierre del texto para formatear. Sencillo, obvio y, desde un cierto punto de vista, banal. Pero qu sucede si decidimos cambiar el tipo de fuente a todas las pginas? No tenemos ms remedio que ir abriendo las 100 pginas e ir cambiando en todos los casos el nombre "arial" por el de la nueva fuente. Un webmster medianamente capaz puede tardar algunas decenas de minutos en la operacin, que llegarn a convertirse en horas si se trata de sitios de grandes dimensiones. Pues bien, esta prdida de tiempo es una consecuencia directa de la no separacin entre estilo y
contenido: el primero (la marca FONT) no est separado del segundo (el texto de la pgina). Es fcil deducir que la solucin de este problema radica en la separacin entre los dos elementos citados, la cual se obtiene en la prctica adoptando las Hojas de Estilo en Cascada (Cascading Style Sheets). En lo que sigue denominaremos con el acrnimo CSS a estas hojas de estilo que fueron introducidas en el web publishing hace ya tiempo, pero que slo en los ltimos meses han experimentado una difusin generalizada. Con la expresin "en cascada" se hace referencia a una de las caractersticas principales de este mtodo: la que permite incorporar en el documento distintas hojas de estilo, cada una de las cuales, segn una serie de reglas jerrquicas, tendr prevalencia sobre la otra. Las CSS fueron introducidas por Microsoft a partir de la tercera versin de Internet Explorer, mientras que Netscape incorpora su soporte parcial slo a partir de su cuarta versin. Quien accede con un navegador obsoleto a un documento formateado con CSS se encontrar ante una pgina gestionada por las opciones por defecto del navegador (el fondo, por ejemplo, ser gris; el tipo de fuente, "times new romans"; etc.). Las CSS han sido oficialmente reconocidas y normalizadas por el W3C (consorcio internacional cuyo objeto es el establecimiento de estndares relacionados con el web), en sus disposiciones "CSS1" primero, y "CSS2" despus. Para mayores detalles, remitimos a estos documentos oficiales. El tema de las CSS es demasiado complejo para tratarlo aqu, dado que requiere un estudio amplio y pormenorizado. Por ello, hemos decidido dedicar al tema una seccin completa de HTMLpoint, de manera que puedas profundizar y aclarar todas las cuestiones relacionadas con las CSS. Para ms detalles, haz clic aqu.
<FRAME> gestionar marcos (frame)
Amados u odiados, tiles o intiles, excelentes o psimos, los marcos son instrumentos que forman ya parte habitual del web y que los navegadores gestionan hoy da a la perfeccin. Los detractores de los marcos afirman la inutilidad de subdividir ulteriormente las pginas web, las cuales, en ltima instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar a ser muy tiles ya que se evita cargar las mismas imgenes y se mantienen ordenados el contenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado psimas impostaciones grficas, obteniendo un efecto contrario al previsto. Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de navegacin grfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las pginas. Una buena solucin es crear una versin con marco y una versin sin marco (como esta misma gua ha hecho). Cmo se crean los marcos? Antes de nada, repasemos rpidamente las marcas HTML de gestin de marcos. N2.0 Documento <FRAMESET></FRAMESET> (en lugar de
Marco N2.0 altura en filas N2.0 altura en filas N2.0 anchura en columnas N2.0 anchura en columnas N3.0b anchura del borde N3.0b borde <FRAMESET ROWS=,,,></FRAMESET> <FRAMESET ROWS=*></FRAMESET> <FRAMESET COLS=,,,></FRAMESET> <FRAMESET COLS=*></FRAMESET> <FRAMESET BORDER=?> <FRAMESET FRAMEBORDER="yes|no">
<BODY>) (pxel %) (* = tamao relativo) (pxel %) (* = tamao relativo)
N3.0b color del borde <FRAMESET BORDERCOLOR="#$$$$$$"> N2.0 Definicin del marco <FRAME> (contenido de cada uno de los recuadros)
N2.0 documento que <FRAME SRC="URL"> se debe mostrar N2.0 denominazione <FRAME NAME="***"|_blank|_self| del frame _parent|_top> N2.0 anchura de los mrgenes N2.0 altura de los mrgenes <FRAME MARGINWIDTH=?> (margen izquierdo y derecho) (margen superior e inferior)
<FRAME MARGINHEIGHT=?>
<FRAME N2.0 barra de desplazamiento SCROLLING="YES|NO|AUTO"> o no <FRAME NORESIZE> N2.0 no redimensionable <FRAME N3.0b borde FRAMEBORDER="yes|no"> N3.0b color del borde <FRAME BORDERCOLOR="#$$$$$$"> N2.0 contenido en ausencia de marco <NOFRAMES></NOFRAMES> (para navegadores antiguos)
Para crear una pgina dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal, que es el que permite su gestin. As pues, antes de nada hace falta impostar este archivo "fuente", y, posteriormente, los dems archivos que componen el marco. Imaginemos que debemos crear una ventana dividida en marcos como la de la figura, con un marco en la parte superior fijo (en el cual cargaremos el archivo "top.htm", que deberemos crear aparte) y un marco central (en el cual cargaremos el archivo "central.htm", que deberemos, asimismo, crear aparte) que cambiar segn cual sea la pgina que deba mostrar. Como hemos sealado antes, la gestin de estos dos marcos correr a cargo de un tercer archivo, el cual deber invocarlos asignndoles una parte de la pgina. He aqu el cdigo de esta pgina:
<FRAMESET rows="80,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </FRAMESET>
Como podemos ver, el cdigo del marco est encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>. El tamao de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la pgina, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que en este caso es una fila, "row") debe tener 80 pxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habramos podido expresar el tamao de los marcos en tantos por ciento de esta manera: <FRAMESET rows="20%,*">
Una vez impostados los dos parmetros <FRAMESET></FRAMESET>, dentro de ellos se definen los nombres y los archivos que debern invocarse en los dos marcos creados. Es necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deber cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de nombre "top.htm" y "central.htm". Fjate bien en lo importante que es la colocacin dentro del cdigo para una correcta interpretacin por parte del navegador. As, si se invirtiera el orden de esta manera: <FRAMESET rows="80,*"> <frame name="central" src="central.htm"> <frame name="alto" src="top.htm"> </FRAMESET> el navegador invertira el orden de asignacin y cargara el archivo
"central.htm" en el marco superior, y el archivo "top.htm" en el marco central. Haz clic aqu para ver el resultado de este marco.
Para crear dos marcos verticales basta sustituir el trmino "rows" (filas) con el trmino "cols" (columnas):
<FRAMESET cols="100,*"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </FRAMESET>
Haz clic aqu para ver el resultado de este marco.
Los antiguos navegadores no soportaban los marcos por lo cual, dada la posibilidad de que se use uno de estos viejos programas para visualizar las pginas, es til insertar un cdigo que advierta de la presencia de marcos y de la imposibilidad de que el navegador los muestre. ste es el cdigo que debes incluir: <noframe> <HTML> <body> Atencin. Tu navegador no soporta la opcin de los marcos. Para ver estas pginas es necesario descargar un navegador que soporte dicha opcin. Te aconsejo Netscape 3.0 o superior. </body> </html> </noframe>
Es posible adoptar simultneamente una divisin tanto en columnas como en filas, de manera que se cree una ventana dividida en varios marcos. Veamos cmo debemos intervenir en el cdigo HTML del documento segn el nmero y la posicin de los marcos que queremos crear.
<frameset rows="100,*"> <frame name="alto" src="top.htm"> <frameset cols="150,*"> <frame name="sx" src="sx.htm.htm"> <frame name="central" src="central.htm"> </frameset>
</frameset>
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset>
</frameset>
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="20%,60%,20%,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset>
</frameset>
<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frame name="dx" src="dx.htm"> </frameset>
<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frameset cols="20%,80%*"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset> </frameset> <frame name="dx" src="dx.htm"> </frameset>
<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frameset rows="24%,76%"> <frame name="top" src="top2.htm"> <frame name="dx" src="dx.htm"> </frameset> </frameset>
<frameset cols="25%,75%"> <frameset rows="80%,20%"> <frame name="alto" src="top.htm"> <frame name="bajo" src="basso.htm"> </frameset> <frame name="central" src="central.htm"> </frameset>
<frameset rows="20%,60%,20%"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset>
<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> <frame name="dx" src="dx.htm"> </frameset>
Para eliminar el borde gris de los marcos, se debe insertar el siguiente cdigo: <frameset cols="20%,60%,20%" border=0> Para impedir que los marcos sean redimensionados por el visitante: <frame name="alto" src="top.htm" noresize> Para eliminar siempre las barras de desplazamiento (scrollbars): <frame name="alto" src="top.htm" scrolling="no"> Para mostrarlas siempre: <frame name="alto" src="top.htm" scrolling="yes"> Para mostrarlas slo cuando son necesarias: <frame name="alto" src="top.htm" scrolling="auto"> Para regular la distancia del contenido del marco al margen superior (marginheight) y a los mrgenes izquierdo y derecho (marginwidth): <frame name="alto" src="top.htm" marginheight=2 marginwidth=5>
Por lo que se refiere a los enlaces dentro de los marcos (es decir, cmo cargar una pgina en un marco diverso de aqul en que se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en la fase de realizacin. Este nombre no se refiere al archivo sino a lo que aparece escrito despus de "name=". Por ejemplo, en este caso: <frame name="alto" src="top.htm"> el nombre asignado es "alto". Tomemos la siguiente pgina subdividida en marcos:
<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset>
Pongamos que de un enlace presente en "SX" tengamos que cargar otra pgina en el marco "central". Si el enlace presente en el marco "SX", fuera simplemente: <A HREF="nuova.htm">Haz clic</A> la pgina se cargara dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas especficas el navegador interpreta que debe cargar la nueva pgina en el mismo marco en que est presente el enlace. El cdigo exacto sera: <A HREF="nuova.htm" TARGET="central">Haz clic</A> Haz clic aqu para probar. Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a otra pgina, la cual se visualizar ocupando la pantalla completa y eliminando todos los marcos preexistentes. Aqu est el cdigo: <A HREF="nuova.htm" TARGET="_parent">Haz clic</A> Haz clic aqu para probar. Si insertas el cdigo: <base target="_top"> a la cabeza del documento HTML todos los enlaces presentes en las pginas eliminarn los marcos existentes, sin necesidad de ir enlace por enlace.
Es posible tambin que queramos cargar, con un solo clic, dos o ms marcos (naturalmente, la ventana tiene que estar dividida por lo menos en tres marcos). Tomemos una pgina subdividida como en la figura:
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto2" src="top.htm"> <frame name="centrale3" src="central.htm"> </frameset> </frameset>
Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue simultneamente dos pginas diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas lneas con cdigo JavaScript. La primera parte del cdigo va insertada entre <HEAD></HEAD>: <HEAD> <script language="JavaScript">  </script> </HEAD> mientras que la segunda parte deber quedar comprendida entre <BODY></BODY>, donde se quiere insertar el enlace: <BODY> <FORM NAME="buttons"> <INPUT TYPE="button" VALUE="Haz clic" onClick="loadtwo('nuovo1.htm','nuovo2.htm')"> </FORM> </BODY> Haz clic aqu para probar
Introduccin a los formularios

Introduccin a los formularios
Antes de entrar de lleno en el tema, es conveniente precisar que las dificultades de comprensin de las plantillas HTML se justifican debido a que constituyen un caso singular dentro de la programacin hipertextual normal. En efecto, la mayor parte de los elementos HTML de que disponemos permite al visitante visualizar los contenidos de un sitio, pero no interactuar con l. Dicho de otro modo, la relacin usuario/pgina es unidireccional y esttica. Con las plantillas, por el contrario, el usuario puede interactuar con el sitio enviando sus comentarios, haciendo peticiones sin necesidad de escribir mensajes por correo electrnico, firmando en el libro de visitas, contestando a encuestas y sondeos, etc. Todo ello define una relacin bidireccional, que es posible slo gracias a la intervencin de
programas residentes en servidores WWW: se trata de los denominados CGI o Common Gateway Interface (Interfaz Comn de Pasarela). Estos programas hacen posible lo que no podra hacerse si se actuara desde el lado client. Es decir, la gestin de las plantillas depende, en realidad, ms del servidor que de la programacin HTML propiamente dicha. Para que un formulario HTML funcione es necesario disponer de un CGI residente en el propio servidor o en otro sitio. El web no escatima los servicios gratuitos destinados justamente a este fin. A menudo se trata de CGI gratuitos que las comunidades virtuales (Geocities, Tripod, Xoom, etc.) ponen a disposicin de sus propios ciudadanos, pero no faltan servicios especficos gratuitos no relacionados con estas comunidades. Para los ms despabilados, es aconsejable dirigirse a la fuente e importar personalmente en el propio servidor uno de los numerosos programas CGI distribuidos gratuitamente por los propios autores y recopilados en sitios especficos. A decir verdad, un formulario puede elaborarse tambin sin pasar por un CGI, pero las desventajas y lmites que comporta este procedimiento no pueden obviarse por lo que no debera adoptarse sino en casos de extrema necesidad. En las pginas que siguen trataremos tambin detalladamente esta posibilidad. La elaboracin de una plantilla consta de dos fases: impostacin de las marcas para la creacin de la plantilla, de los campos y del botn de envo; elaboracin de un script CGI en servidor (o llamamiento de un script ya impostado)
Las marcas de los formularios

MARCAS DE FORMULARIOS
Las plantillas se introdujeron en la versin HTML 2.0. Veamos ahora, con detalle, todas las marcas que para la elaboracin de formularios prev HTML 4.0. <FORM></FORM> Esta marca abre y cierra la plantilla y recoge el contenido de la misma, que puede variar segn una serie de marcas que veremos ms adelante. No es posible insertar una plantilla dentro de otra. Dicho de otro modo, los formularios no permiten anidamientos. La sintaxis usual de las marcas citadas es la siguiente: <FORM method="get|post" action="http://www.tuosito.com/cgibin/nome_script.cgi"> Si METHOD est impostado como GET los datos se envan al servidor y se separan en dos variables. Para este mtodo el nmero mximo de caracteres que puede contener el formulario es de 255. Utilizando "method=post", el script CGI recibe directamente los datos sin un proceso
previo de descodificacin. Esta caracterstica hace que el script pueda leer una cantidad ilimitada de caracteres. Una vez impostada la primera marca <FORM> de la plantilla, es posible, siempre y cuando el script CGI lo permita, crear algunos elementos que resultan de gran utilidad para una adecuada gestin de los datos: <INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Asunto del formulario"> Este cdigo determina el asunto (subject) del mensaje que recibirs por correo electrnico con el contenido del formulario. Es muy til que los mensajes recibidos lleven especificado el asunto, no slo para quienes usan filtros de seleccin del correo, sino tambin para ordenar la correspondencia. <INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.tuosito.it"> Este cdigo es muy til ya que, una vez rellenado y enviado correctamente, el formulario responde con una pgina HTML sucesiva, dentro de la cual es posible incluir cualquier tipo de comentario. Lo ms normal es visualizar una pgina de confirmacin "Tu formulario ha sido enviado correctamente", pero se puede tambin mandar directamente a la portada del sitio. Se trata de comandos no estndar que varan segn el CGI utilizado. Por tanto, el cdigo antes descrito no funciona en todos los casos, sino nicamente con el ejemplo prctico que os mostraremos ms adelante. La marca de base para la definicin de los elementos de un formulario es <INPUT>, que se utiliza para agregar botones, mens de seleccin, contraseas, etc. A <INPUT> se le pueden asignar los 8 valores que analizamos a continuacin.
type="TEXT"
<INPUT type="TEXT" name="nombre" maxlength="40" size="33" value="Tu nombre">
Este valor crea los tpicos campos de texto, en los que generalmente se solicitan datos tales como el nombre o la direccin de correo electrnico. Es un valor usado sobre todo para informaciones no predefinidas, que cambian cada vez. TEXT tiene tres atributos opcionales, presentes tambin en el ejemplo: maxlength (el nmero mximo de caracteres que puede ser introducido en el campo y que no es posible superar), size (la anchura de la cadena dentro de la pgina) y value (visualiza un texto por defecto dentro de la cadena). EJEMPLO
tu nombre
type="PASSWORD"
<INPUT type="PASSWORD" name="nombre" maxlength="40" size="33"> Este campo de texto funciona como el anterior, pero con una pequea diferencia que su propio nombre indica: cuando se escribe dentro del cajetn blanco, no se ven los caracteres sino los clsicos asteriscos de las contraseas. En realidad, los datos no se codifican de ningn modo por lo que esta marca no consigue eliminar la inseguridad de fondo. EJEMPLO
type="CHECKBOX"
<INPUT type="CHECKBOX" name="edad" value="s" checked> Este atributo se utiliza para representar datos de tipo "s/no" y "verdadero/falso". Crea pequeas casillas cuadradas que hay que puntear o dejar en blanco. Si la casilla est punteada, INPUT restituye un valor al CGI; en caso contrario, no restituye ningn valor. Value impostado en "s" significa que por defecto la casilla est punteada. Checked controla el estado inicial de la casilla, en el momento de cargar la pgina. EJEMPLO
type="RADIO"
<INPUT type="RADIO" name="calificacin" value="suficiente"> <INPUT type="RADIO" name="calificacin" value="bueno"> <INPUT type="RADIO" name="calificacin" value="excelente">
Este atributo tiene funciones similares al visto anteriormente, pero contiene ms posibilidades de seleccin. Seleccionando una de las voces presentes, y siempre y cuando tengan todas un valor "name" idntico, las restantes se deseleccionan automticamente. SUFICIENTE BUENO EXCELENTE
type="SUBMIT"
<INPUT type="SUBMIT" value="Enva">
El clsico botn de envo que remite el formulario con todo su contenido. La dimensin del botn depende de la longitud del texto. EJEMPLO
type="RESET"
<INPUT type="RESET" value="Reinicio">
Botn que vuelve a impostar todo el formulario eliminando los datos introducidos. EJEMPLO
type="IMAGE"
<INPUT type="IMAGE" src="pulsante.gif">
Funcin similar a la de la tecla "ENVA" pero con la diferencia de que en lugar del botn de la opcin por defecto, aparece una imagen.
EJEMPLO
TEXTAREA
<TEXTAREA cols=40 rows=5 WRAP="physical" name="comentario"></textarea>
TEXTAREA se utiliza para introducir comentarios o campos que prevn muchas lneas de texto. La anchura se imposta con "cols" y la altura con "rows". WRAP="physical" establece que, en el caso de que el texto introducido supere la
anchura de la ventana, salte de lnea automticamente. EJEMPLO
SELECT
<SELECT size=1 cols=4 NAME="calificacin"> <OPTION selected value=ninguna> <OPTION value=bueno> Bueno <OPTION value=suficiente> Suficiente <OPTION value=excelente> Excelente </select>
SELECT es un elemento que permite la creacin de listas con varias posibilidades de seleccin. En nuestro ejemplo, hemos hipotizado que se solicita una calificacin sobre un sitio web.
Formularios sin CGI Como ya hemos sealado varias veces en esta seccin, el uso de formularios HTML produce mejores resultados cuando se acompaa de un programa CGI residente en servidor. De todas formas, esto no excluye la posibilidad de utilizar formularios tambin sin el auxilio de CGI. Para enviar una plantilla empleando exclusivamente las marcas que HTML pone a disposicin, debemos insertar un encabezamiento similar al siguiente: <form action="mailto:nome@provider.it" method="post"> donde en lugar de "nome@provider.it", debes introducir tu direccin de correo electrnico a la que quieres que lleguen los formularios ya rellenados. El mayor inconveniente de esta eleccin reside en la falta de formatacin del contenido del formulario, aspecto en el que, por el contrario, el CGI resulta muy eficaz. Cuando un formulario es enviado al servidor, el valor de cada uno de los controles correspondientes est incluido en una cadena individual. Dicha cadena est compuesta por pares de valores nombre-valor y est delineada por "&"
comerciales. A la misma se le asignan todos los valores de los elementos denominados, en una especie de concatenacin. He aqu, a continuacin, el confuso resultado de un formulario en el que, sin pasar por un CGI, se han introducido algunos datos personales: Nombre=Massimiliano+Valente&Email=webmaster@html.it&ciudad%27=Roma&edad%25 mientras que con un CGI habramos obtenido el siguiente resultado: (Nombre) Massimiliano Valente (Email) webmaster@html.it (Ciudad) Roma (Edad) 25 Si para una plantilla muy simple la "criba" del contenido propiamente dicho es una operacin rpida, para formularios largos y complejos (y numerosos) resulta una va difcilmente practicable y en absoluto profesional. CGI gratuitos La solucin preferible para la elaboracin de una plantilla es la que prev el uso de un CGI residente en servidor. Una vez llegados a este punto, surge la pregunta sobre cmo impostarlo pero, sobre todo, dnde encontrarlo. Consideremos con detalle los casos que pueden presentarse. Comprar un servicio anfitrin (hosting) con acceso al directorio CGI-BIN. Si se compra un espacio en hosting en uno de los muchos proveedores de tales servicios, es aconsejable preguntar si el paquete incluye el acceso al directorio CGIBIN. Si la respuesta es afirmativa, es posible bajar un CGI gratuito freeware o shareware, es decir, de libre distribucin o de prueba, de uno de los sitios que elencaremos ms adelante, para pasar despus a impostarlo y usarlo segn las propias exigencias. Es una eleccin muy ventajosa para todos aquellos que tienen un conocimiento tcnico del tema y pueden, as, elegir el programa que mejor se adapte a sus necesidades. El sitio italiano con mayor autoridad sobre los CGI es CGIpoint. Cuando elijis un CGI, prestad atencin a la plataforma para la cual ha sido creado: Unix o Windows NT. Analizando por encima los recursos a disposicin, podris daros cuenta inmediatemente de que el material de Unix es mucho ms copioso que el de NT. Este desequilibrio explica la mayor difusin de Unix en los elaboradores en Perl. Suscribir un espacio web en una de las comunidades free-web space. Hasta la fecha, son numerossimas las comunidades virtuales que ofrecen espacio gratuitamente, tanto en ingls como en otras lenguas. Estos servicios ya no se limitan al simple espacio y acceso FTP, sino que prevn muchos otros servicios suplementarios, entre los cuales no falta nunca un formulario para el libro de visitas y el correo. Para ms detalles sobre los procedimientos y caractersticas tcnicas de dichos servicios, os aconsejamos consultar las pginas oficiales de cada comunidad.
Comprar un servicio anfitrin sin acceso al directorio CGI-BIN, o la escasa

confianza en los servicios suministrados por las comunidades virtuales. En estos casos, la mejor solucin consiste en dirigirse a un servicio gratuito de plantillas residentes en otro servidor (es decir, no impostadas en el propio), que podrn utilizarse previa suscripcin. Dirigirse a un servicio tercero separa el uso de las plantillas del uso del servidor con la ventaja de no tener que volver a impostar todo en el caso de que se cambie de servidor o comunidad. Crear un formulario simple Empecemos creando un formulario muy simple en el que figuren el nombre y apellidos, la direccin de correo electrnico y un comentario sobre el sitio. Para ello, introducimos el siguiente cdigo: <FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST> <INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743"> <INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi primer formulario"> <INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm"> <B>Nombre y apellidos</B><BR> <input type=text NAME=MAILFORM_NAME size=33><BR><BR> <B>Direccin de correo electrnico</B><BR> <input type=text NAME=MAILFORM_FROM size=33><BR><BR> <B>Comentarios</B><BR> <TEXTAREA NAME=MAILFORM_TEXT ROWS=10 COLS=42 WRAP></TEXTAREA><BR><BR> <INPUT TYPE=SUBMIT VALUE="Enva"><INPUT TYPE=RESET VALUE="Cancela"> </FORM> Veamos juntos qu campos personalizar y cules dejar, por el contrario, inalterados para un correcto funcionamiento del formulario. <FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST> Este campo debe permanecer inalterado dado que invoca el CGI presente en el servidor del servicio gratuito al que nos hemos suscrito anteriormente. <INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743"> Este campo se modifica slo por lo que se refiere al cdigo de identificacin "Val_7743", que se sustituye con el comunicado por el servicio gratuito mediante correo electrnico. Este sencillo procedimiento es fundamental para que tu formulario llegue a tu buzn de correo y no al de otra persona. <INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi primer formulario"> Este campo define el asunto del mensaje que te llegar por correo electrnico en el
momento del envo con el contenido del formulario. En lugar de "Mi primer formulario", puedes usar la frase que retengas ms oportuna. <INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm"> Este campo indica la pgina web que deber visualizarse tras pulsar el botn "Enva". En este ejemplo hemos insertado un documento presente en el servidor de HTMLpoint que puedes sustituir con una pgina presente en tu servidor. <input type=text NAME=MAILFORM_NAME size=33> Este campo debe permanecer inalterado (no por lo que respecta a las dimensiones, obviamente) ya que introduce en el mensaje que nos llegar por correo electrnico ese nombre en el campo del remitente. <input type=text NAME=MAILFORM_FROM size=33> Este campo debe permanecer invariado (no por lo que respecta a las dimensiones, obviamente) ya que permite obtener en el "reply-to" del mensaje que el formulario enva, la direccin de quien ha rellenado la plantilla. <INPUT TYPE=SUBMIT VALUE="Enva"> Este campo es necesario para expedir el mdulo, pero no se sale de las reglas generales de los formularios. He aqu el resultado que obtenemos con el cdigo que hasta ahora hemos examinado (el formulario llegar a HTMLpoint, por lo que agradeceramos nos enviaras tus comentarios y sugerencias sobre esta gua): Un formulario complejo El formulario que hemos visto anteriormente es muy sencillo ya que incluye slo tres campos. El que figura a continuacin, sin embargo, es un mdulo complejo, que retoma todo cuanto hemos expuesto en el captulo "Las marcas". Si deseas profundizar en el tema, puedes volver a dicho captulo. Aqu tienes el cdigo: <FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST> <INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743"> <INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi segundo formulario"> <INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm"> <font face=ARIAL> <table border=0> <tr><td align=right><B>Nombre</B></td><td><input type=text size=33 NAME=MAILFORM_NAME></TD></TR> <tr><td align=right><B>Portada</B></td><td><input type=text name="portada" value="http://" size=33></TD></TR> <tr><td align=right><B>Direccin e-mail</B></td><td><input type=text NAME=MAILFORM_FROM size=33></TD></TR> <tr><td align=right><B>Ciudad</B></td> <td><input type=text name="ciudad" size=33></TD></TR>
<tr><td align=right><B>Tu calificacin de esta gua?</B></td> <td><SELECT size=1 cols=4 NAME="qu_piensas"> <OPTION selected Value=Ninguna> <OPTION value=Excelenteo> Excelente <OPTION value=Notable> Notable <OPTION value=Buena> Buena <OPTION value=Suficiente> Suficiente <OPTION value=Mediocre> Mediocre <OPTION value=Insuficiente> Insuficiente </select></td></tr> <tr><td align=right><B>Explicaciones claras?</B></td> <td align=center> <B>s</B><input name="claras" type=radio> <B>no</B><input name="no_claras" type=radio> <B>no s</B><input name="no_s" type=radio> </td></tr> </table> <BR><BR> <CENTER><table border=0 width=450> <tr> <td width=450><B><CENTER>Comentarios sobre HTMLpoint</CENTER></B></td></tr> <tr><td colspan=2><textarea cols=58 rows=8 size=200 WRAP=physical></textarea></td></tr> </table></CENTER> <BR> <CENTER> <INPUT TYPE="SUBMIT" VALUE="Enva el formulario"> </CENTER> </FORM> ste es el resultado prctico de lo visto hasta ahora:
Nombre Portada Direccin e-mail Ciudad Tu calificacin sobre esta gua? Explicaciones claras? s no no s
http://
Adaptar a la resolucin/b>
La eleccin de una resolucin vdeo en la que desarrollar el contenido de un sitio web generalmente se deja en manos de los operadores. Es cierto que crear pginas optimizadas para la resolucin que est ms de moda (en este momento la 800x600) es una eleccin condivisible, mientras que las antiguas 640x480 y las ms elevadas 1024x768 deben dejarse de lado por ahora. No decimos nada nuevo si consideramos que el non plus ultra es una resolucin vdeo adaptable a las distintas impostaciones de cada monitor. Pero un resultado de este tipo no se obtiene fcilmente con imgenes, tablas y mens de grandes dimensiones, que en ltima instancia podran afectar al diseo de pgina. Existen algunos recursos que tomando pie de las tablas HTML llegan a resolver, al menos en parte, el antedicho problema. Para simplificar la comprensin del problema y de su correspondiente solucin, supongamos que tenemos una pgina HTML abierta por un encabezamiento que consta de una serie de imgenes cuyo ancho total asciende a unos 750 pxel. Esto quiere decir que un usuario que accede a la pgina con una resolucin vdeo de 800x600 visualizar perfectamente su contenido, mientras que quien accede a 640x480 obtendr un resultado psimo. A fin de comprender mejor lo que queremos decir, hemos preparado una pgina de prueba a la que puedes llegar haciendo clic en el enlace siguiente: pgina de prueba de una pgina no adaptable a las impostaciones vdeo El cdigo usado para crear el encabezamiento superior de la pgina es un simple: <img src="b01.gif" width=80 height=82 border=0><img src="b02.gif" width=294 height=82 border=0><img src="b03.gif" width=384 height=82 border=0> lo que significa que cambiando la resolucin vdeo y llevndola a 640x480 el resultado que se obtiene es desastroso: las imgenes del men se insertan automticamente debajo del logo y de las lneas alterando radicalmente el diseo de la pgina. Si quieres comprobar los efectos en esta pgina, sin modificar las impostaciones vdeo, prueba a redimensionar la ventana arrastrndola con el ratn. Para salvar este inconveniente, basta utilizar unos instrumentos estndar de HTML: las tablas. Partiendo de los mismos elementos grficos vistos anteriormente, impostamos un nuevo cdigo: <table border=0 width=100% cellpadding=0 cellspacing=0> <td width=80> <img src="b01.gif" width=80 height=82 border=0> </td> <td background="b02.gif" width="100%"> </td> <td width=384> <img src="b03.gif" width=384 height=82 border=0> </td>
</table> La tabla queda impostada con una anchura (width) equivalente al 100% del espacio disponible en la pgina. Esto significa que la dimensin general de la tabla se adapta a las resoluciones vdeo individuales. Por lo que se refiere a la primera y tercera imagen (el logo y el men respectivamente), hemos previsto un valor TD idntico a la anchura de las mismas. En otras palabras el tamao de los dos TD es fijo y no variable en dimensin idntica a la de las imgenes.
Para el segundo TD (las lneas horizontales negras) hemos previsto que la

imagen se coloque como fondo (background="b02.gif") y no dentro del TD como las anteriores. Una vez ms hemos impostado la anchura del TD en un 100%. Para las propiedades de las tablas esto se traduce en la adaptacin del TD al espacio dejado por las imgenes fijas (logo y men). En otras palabras, el primer y tercer TD permanecen siempre fijos e invariables en lo que a dimensiones se refiere, mientras que el segundo TD se adapta a las diversas resoluciones vdeo. pgina de prueba de una pgina adaptable a las impostaciones vdeo Y para acabar slo nos queda decir que el ejemplo funciona perfectamente tanto con MsIe como con Netscape.
Abrir ventanas independientes
Es posible abrir ventanas del navegador independientes de la principal de tres maneras diferentes: con la simple marca <A HREF="http://www.htmlpoint.com" target="_new">haz clic</a> que abre una nueva ventana con todas las opciones tpicas de MsIe con sintaxis Javascript que abre una nueva ventana de enlace con la dimensin y opciones deseadas.
con sintaxis Javascript que pone en marcha automticamente una ventana con la dimensin y
opciones deseadas cuando se abre la pgina. Respecto a la primera modalidad no tenemos mucho que aadir, salvo que dicha solucin no permite establecer las medidas (alto y ancho) de la nueva ventana ni tampoco sus opciones. La segunda modalidad se analiza con detalle en un nmero de la lista de distribucin "Un Javascript a la semana". Para profundizar en el tema, pudes consultar dicho artculo. La tercera modalidad s necesita un examen ms pormenorizado. Antes de nada, es necesario insertar el siguiente cdigo entre las marcas <HEAD> del documento principal (la pgina desde la que se accede y que automticamente abre otra):
<script language="JavaScript"> newwindow=window.open("pagina.htm","","width=315,height=160") newwindow.creator=self </script> Pagina.htm es el nombre de la ventana independiente que se quiere abrir, cuya anchura y altura quedan establecidas por width=312 y height=160 respectivamente. Hecho esto, no tenemos ms que crear el archivo de la ventana independiente, que no requiere disposiciones particulares.
Esconder el HTML
Uno de los problemas que ms a menudo se interponen entre el diseador web y la profesin que realiza en Internet es sin duda el relativo al delicado tema de los derechos de autor. En el web publishing tutela del derecho de autor se traduce en prohibir que los dems copien completamente la grfica o contenidos utilizados. La cuestin es muy compleja y no existe jurisdiccin clara al respecto, o mejor existen dos lneas de interpretacin: la primera considera el web una especie de salvaje oeste al margen de la ley, donde es posible efectuar cualquier operacin de plagio; la segunda propone que el derecho telemtico se interprete por analoga con las reglas del derecho general. Por un principio de legalidad, apoyamos fervientemente la segunda lnea de interpretacin, aunque estamos tambin seguros de que muchos indeseables sin fantasa ni escrpulos no comparten esta idea. En parte, la costumbre les da la razn porque a menudo el "no vale la pena poner una denuncia por un sitio copiado" es la amarga conclusin de muchos plagios. HTMLpoint ha sufrido a lo largo del tiempo diversos plagios, algunos de ellos perpretados por simples usuarios, otros sin embargo por empresas y sociedades. Por lo que se refiere a los primeros, probablemente la ingenuidad y la inexperiencia han jugado un papel decisivo, mientras que por lo que respecta a los segundos la cuestin reviste una gravedad mucho mayor. La pregunta que el legtimo propietario de los derechos de autor se plantea ante un plagio es cmo poder reaccionar y hacer valer sus derechos. Si esta pregunta se la hacemos a un abogado, nos dar una respuesta obvia: hay que denunciar al infractor. Solucin seguramente condivisible en casos extremos en los que no se atiende a razones de otro tipo. Antes de llegar a la denuncia, te aconsejamos realizar algunas operaciones previas que en la mayor parte de los casos bastan para resolver el problema. Antes de continuar, es conveniente establecer una diferencia segn el sitio objeto de plagio tenga como anfitrin una comunidad gratuita (Digiland, Aspide, Geocities, Tripod, Xoom, etc.) o posea un propio dominio de segundo nivel (www.nome.com o www.nome.it).
Sitios hospedados por Community

En este caso los datos personales del responsable del plagio no son seguros, ya que las Community requieren en el momento de la inscripcin estos datos sin realizar ningn tipo de verificacin. Esto se traduce en la posibilidad, en absoluto remota, de que se comuniquen a la
comunidad nombres inventados y datos falsos sin que se pueda as acceder a la verdadera identidad del culpable. Por esta razn, la totalidad de los sitios pirata en MP3 o Crack estn hospedados en comunidades virtuales gratuitas. Sentadas estas premisas, te aconsejamos que intimes por correo electrnico al responsable (generalmente todo sitio web tiene una direccin electrnica de referencia). El mensaje, escrito en tono formal, debe incluir: nombre, apellidos, direccin, telfono y declaracin explcita de los datos que se retienen ilegalmente copiados; referencias claras a las pginas que se consideran copiadas; solicitud de eliminacin inmediata y sin condiciones del material copiado. El mismo mensaje podemos enviarlo en CC (la opcin de los programas de correo que enva el mensaje, adems de a la direccin especificada en el campo TO, a otros destinatarios) a los responsables de la comunidad. Adems de este mensaje, sera aconsejable enviar otro directamente a los responsables de la comunidad solicitando aclaraciones al respecto. En el mismo destacaremos los datos relativos a la mayor ancianidad de nuestro sitio respecto al reo de plagio. Pongmonos, en efecto, en el lugar de un dirigente de comunidad virtual que ve que le llega un mensaje solicitando que d de baja a uno de sus "ciudadanos". Es obvio que desee asegurarse de que los datos relativos a la efectiva existencia previa del sitio sean ciertos. Esta prueba de preexistencia puede proporcionarse mostrando la fecha de registro del sitio a la Internic (para los dominios .com) o a la RA italiana (para los dominios .it).
Sitios con dominio propio

Para sitios con nombres de dominio de segundo nivel (www.nombre.com o www.nombre.it) la solucin del problema es ms clara dado la certeza de la identidad de los responsables. Tanto la RA italiana como la Internic americana ponen a disposicin bases de datos para conocer la identidad de los titulares de los dominios. As, si el dominio www.gif-animate.com hubiera plagiado tu sitio, bastara insertar en el espacio siguiente:
gif-animate.com
La base de datos de Internic te facilitar nombre, apellidos, direccin electrnica y direccin real del titular. Llegados a este punto, las soluciones son dos: con un mensaje electrnico como el visto antes para las comunidades, se intenta convencer al culpable de que no contine delinquiendo; por correo certificado con acuse de recibo, se le enva al culpable una carta redactada por nuestro abogado. La carta certificada con acuse de recibo tiene valor legal y podr usarse en el eventual juicio. Tiene seguramente un impacto psicolgico "traumtico" en el responsable que no podr hacer como si nada. Otra solucin es la de enviar simultneamente el mensaje y la carta, de manera que aunque el primero no surta efecto no perdamos un tiempo precioso.
ltimo consejo
Demostrar la presencia en la red de nuestro sitio con fecha anterior a otros no es siempre fcil y, a menudo, es tcnicamente imposible. Una solucin poco tcnica pero seguramente eficaz es la siguiente:
guardar en floppy o Cd-rom todo el contenido del propio sitio; meter todo en un sobre y sellarlo con lacre; enviarnoslo por correo certificado con acuse de recibo a nuestro propio domicilio. De esta manera el sello postal y el sello de lacre demostrarn sin que haya lugar a dudas la fecha en que el sitio estaba en lnea. En el caso de que tuvieramos que acudir a juicio, el sobre sellado podra servirnos prueba.
Hosting y housing
La trayectoria de muchos sitios web es comn: comenzar publicando las pginas en un servidor gratuito (Xoom, Tripod, Digiland, etc.) para pasar despus a un dominio propio. Pero cules son las ventajas de un dominio de pago? A continuacin tienes una lista de las ms evidentes: un dominio corto del tipo www.tunombre.com es ms fcil de recordar de un annimo www.comunidad/categoria/tunombre; a un dominio de segundo nivel (www.tunombre.com) se le otorga inevitablemente una mayor consideracin que a un sitio hospedado por comunidades virtuales. Por tanto, es ms fcil obtener reseas peridisticas y realizar acuerdos de asociacin; un servidor comercial elimina algunos obstculos de los espacios gratuitos: es posible hacer publicidad comercial, explotar el espacio con fines comerciales, vender servicios, etc.
un buen servidor de pago garantiza mayor calidad del servicio y mayor fiabilidad.
Todas estas buenas razones tienen como contrapartida los costes de gestin que van desde algunos cientos de miles de liras, hasta decenas de millones al ao. En el momento en que decidimos adquirir un espacio comercial para nuestro sitio, nos encontramos ante una vasta gama de ofertas y precios. Las terminologas utilizadas a menudo resultan incomprensibles y no es raro que nuestra inexperiencia acabe engandonos. Pero cul es la razn de esta jungla de precios y servicios? En realidad existen diversas razones que empujan el mercado hacia la confusin. Intentaremos aclarar la situacin para guiarte en la adquisicin de un buen servicio y evitar que te lleves sorpresas desagradables o que te crees falsas esperanzas.
Un sitio en hosting
El hospedaje (en ingls, hosting) es con seguridad el camino que recorren muchos sitios web para garantizar su conectividad: las pginas son publicadas y estn disponibles para la navegacin en ordenadores que alojan diversos sitios. Tu sitio, por tanto, no tiene a disposicin una banda mnima o mxima sino que obtiene conectividad de una especie de "olla" colectiva puesta a disposicin por
el proveedor. Es evidente que la banda disponible resiente de volmenes de trfico procedente de numerosos sitios, pero en la mayor parte de los casos est sobredimensionada en relacin con el consumo efectivo. Un sitio virtual es un sistema mediante el cual una mquina sola resuelve muchas direcciones IP. Esto permite que un nico ordenador se comporte como si se tratara de muchos sistemas separados. La ventaja principal del hosting es el de no estar vinculado en ningn modo a la gestin tcnica del servidor. Como destacamos en la leccin Una decisin importante: qu es mejor Linux o NT? de esta gua, si un servidor web no est continuamente controlado corre el riesgo de ser vulnerable a posibles ataques externos. El hecho de que en el hospedaje exista un administrador tcnico que se ocupa de la gestin de las mquinas ofrece una mayor garanta frente a ataques externos y disfunciones. A menudo estos servidores estn supervisados las 24 horas al da y estn controlados constantemente por administradores competentes. Otra ventaja del hospedaje es la puesta a disposicin de programas CGI para la gestin de operaciones server side include. Estos servicios estn generalmente incluidos en el precio y en el momento de la suscripcin al servicio es conveniente valorar su eficacia. A continuacin, ofrecemos una lista de los servicios suplementarios facilitados por la mayora de los paquetes hosting: FTP Annimo FTP es el acrnimo de File Transfer Protocol, es decir, el protocolo que permite enviar ficheros desde y hacia el propio sitio. Dicho de otro modo, el FTP permite publicar las propias pginas y actualizar sus contenidos. El servicio de FTP annimo es, pues, de gran utilidad y permite el acceso con contrasea e identificacin de usuario a los contenidos del propio sitio. Soporte a los script CGI Acceso a un directorio cgi-bin personal donde instalar CGI propias no indicadas en el servicio. No todos los servicios de hospedaje ofrecen esta posibilidad, sobre todo por cuestiones de seguridad. Panel de control Algunos servicios de hosting ponen a disposicin paneles de control grficos para las operaciones ms frecuentes relativas al propio sitio. Espacio en disco El espacio en disco es simplemente la cantidad de Mb disponibles para la publicacin. Normalmente, un sitio de media dimensin no supera los 5 Mb, pero es siempre mejor algo ms sobre todo cuando se piensa revender el espacio. Registro de los Nombres de Dominio El registro de los nombres de dominio no est casi nunca incluido en el precio. Controlad los costes de registro, sobre todo de los dominios .it. Nombres de dominio adicionales Algunos proveedores ofrecen la posibilidad de registrar ms de un nombre de dominio que reenva al URL principal. El coste de un nombre de dominio adicional es inferior al de uno principal. Por ejemplo, se puede registrar un dominio www.minombre.it y simultneamente otro
www.minombre.com, el cual reenva al primero. Extensiones de FrontPage Las extensiones del editor HTML de Microsoft permiten una perfecta integracin entre servidor Web y programa. Dichas extensiones son compatibles con servidores Linux y Nt. Direcciones de correo electrnico Presta atencin a este tipo de servicio porque a menudo puede resultar equvoco. Existen dos modalidades para la asignacin de e-mail segn el dominio suscrito (p. ej., pincopallino@miosito.it): apodo o alias y POP3. Los alias permiten nicamente descargar correo de la direccin previamente elegida pero no permiten enviarlo. Dicho de otro modo, impostad vuestro lector de correo para descargar el correo del dominio suscrito, pero para enviarlo deberis utilizar vuestro proveedor habitual. La razn de esta eleccin es la mole de trfico, mucho mayor para correo en salida que en entrada. Si queris una direccin de correo de verdad, tanto en entrada como en salida (SMTP y POP3) deberis solicitar un buzn de correo POP3. Email Autoresponder De dudosa utilidad, este servicio permite impostar una respuesta automtica a todos los mensajes que tienen como destino una determinada direccin de correo electrnico. Base de datos Algunos proveedores ponen a disposicin bases de datos para la indizacin y la bsqueda de artculos. Streaming RealAudio El streaming es un sistema cliente-servidor para la distribucin de contenidos multimedia en sitios web. Carro de la compra Algunos proveedores ponen a disposicin programas para la gestin de actividades de comercio electrnico. Servidor seguro SSL La Capa de Conexin Segura SSL (Secure Socket Layer) es un sistema criptogrfico para operaciones va WWW con tarjeta de crdito o similares. Estadsticas Programas estadsticos de control del trfico del sitio. Buscador interno Un buscador interno por palabras clave. Envo de formularios, libro de visitas, contadores Los clsicos servicios para enviar formularios, realizar libros de visitas y contadores de los accesos. Suministrados por todos los proveedores. Servidor NT o Linux Para esta eleccin, remitimos al artculo relativo.
El precio de estos artculos va de pocas decenas de miles de liras al mes (para servidores americanos) a algunos millones (para servidores italianos). Es importante, aunque las condiciones contractuales no lo prevean, establecer lmites mnimos y mximos de trfico. Dichos lmites se expresan en GigaByte mensuales descargados y es conveniente aclarar desde un principio, sobre todo para sitios con un gran volumen de trfico, si existen lmites o costes adicionales.
Un sitio en housing
El housing es una solucin orientada a sitios con gran volumen de trfico que consiste en conectar un ordenador de tu propiedad directamente a los locales del proveedor. Es una solucin que elimina los altos costes y la lentitud de las lneas dedicadas y permite la gestin remota de la mquina. Las caractersticas ms destacables del housing son: Ordenador de propiedad instalado en el backbond del proveedor. Alimentacin con grupos de continuidad centralizados. Climatizacin de los locales. Posibilidad de instalar cualquier sistema operativo y servidor web, adems de programas escritos y todo lo necesario para la gestin de un sitio. Manutencin hardware y software a cargo tuyo.
Manutencin remota y posibilidad de acceder a los locales en horas de oficina.

Importante, por lo que se refiere a una buena velocidad de conexin, es la banda mxima disponible. Existen de 64K, 128K, 256K, 512K y ms. El costo de esta banda vara segn la cantidad y para servidores italianos va de los 7 millones de liras al ao aproximadamente para una 64K hasta los ms de 40 para una 512K. Las ventajas principales de un housing residen en la posibilidad de gestionar la propia mquina asumiendo su control total. En otras palabras, se llega a ser administradores del sistema, con todos los pros y contras que esta funcin comporta. Para quien tiene experiencia en el campo de los servidores web, la solucin del housing parece preferible respecto al hosting, mientra que para quien no cuenta con esta experiencia es altamente desaconsejable experimentar en la propia piel. A los costes de alquiler de las lneas hay que aadir el de la compra de la mquina que instalaremos en los locales del proveedor. Para mayor informacin sobre el hardware que se precisa, lee el artculo: El mejor hardware para servidores NT o Linux. Un riesgo que se corre adquiriendo un servicio en housing es el de tener una banda sobredimensionada a ciertas horas e infradimensionada a otras. Dicho de otro modo, un sitio en housing a 256K puede ser muy rpido en horas de poco trfico (la noche o las primeras horas de la maana) y muy lento en horas de mucho trfico (das laborables en horario de oficinas). As, si el hosting se basa en un trfico mensual total, el housing hace referencia exclusiva a la banda mnima garantizada, superada la cual el sitio se hace ms lento. Vistos los costes y las dificultades de gestin, el housing es aconsejable exclusivamente para
webmster con experiencia previa o para grandes sociedades que quieran limar los altos costes de las lneas dedicadas. Para webmster bisoos, sin embargo, nuestro consejo es el de dirigirse a servicios de hosting: econmicos y que requieren poco esfuerzo tcnico .
Linux o NT?
Si la navegacin cliente asiste desde hace aos al culebrn "Netscape contra Internet Explorer", en el lado servidor existe tambin una encendida controversia. Cambia el terreno de lidia pero la cuestin es siempre la misma: Microsoft y su legtima poltica comercial contra parte del variado universo de la red que propugna la importancia fundamental de un desarrollo diverso, desvinculado de la hegemona de cualquier Software House. En esta sempiterna lucha, hay un poco de todo: prejuicios hacia Microsoft, cybercultura alternativa, argumentos tcnicos y polticos. Protagonistas del enfrentamiento, dos productos: Microsoft NT y Linux. Existen, obviamente, otros sistemas operativos destinados a la gestin de servidores web, pero en la actualidad la alternativa seria es entre ellos dos. Cuando decidis adquirir un espacio web comercial, deberis elegir un servidor gestionado o por Linux o por NT. En la actualidad, el ms utilizado es, en gran medida, Linux, el cual gracias a su carcter gratuito y a sus orgenes Unix goza de mayor aprecio entre los expertos del campo. NT, por el contrario, se est imponiendo con una poltica muy distinta: producto de pago, tecnologa de propiedad y cdigo fuente secreto. As, mientras Microsoft contina adoptando, coherentemente, una poltica comercial de venta software, Linux es completamente gratuito con cdigo de dominio pblico. Esto significa que toda persona que cuente con la preparacin necesaria puede modificar el sistema operativo y hacer pblicas dichas modificaciones. De este modo Linux es el resultado del esfuerzo conjunto a nivel mundial de estudiantes, profesores y simples aficionados unidos entre s por Internet y por una organizacin que se ocupa de armonizar el desarrollo. Linux es, por tanto, la realizacin de una utopa que fascina y seduce a expertos e inexpertos. NT, por el contrario, es un producto de pago, desarrollado en su totalidad por tcnicos de una sociedad especializada, en el cual no se pueden introducir ni modificaciones ni mejoras externas. Representa, pues, la continuidad con el pasado y la poltica que hasta ahora ha gobernado la difusin del software. Hasta aqu los principios polticos y filosficos que caracterizan los dos productos. Pero desde un punto de vista tcnico qu consecuencias tiene la adopcin de un sistema operativo u otro? NT tiene la ventaja de adoptar una interfaz grfica familiar a todos los usuarios del sistema Windows (95, 98, etc.), un aspecto que no es de secundaria importancia sobre todo para usuarios con poca experiencia en la gestin servidor. Esto no significa que NT sea un sistema operativo simple, al contrario, su complejidad es tal que requiere cursos de especializacin, certificados y miles de pginas de manuales. La ventaja del actual NT es su dimensin "user friendly", frente a la particular sintaxis y grfica espartana de Linux. El porqu de esta difcil impostacin se deduce de la historia de Linux, nacido para usuarios expertos y no para los informticos noveles. No debemos olvidar, de todas formas, que se han esbozado distintos modos para simplificar Linux y hacer su uso ms inmediato. Este esfuerzo continuo en pos de una interfaz ms seductora es una garanta de que antes o despus los dos productos, al menos desde este punto de vista, se encontrarn en una situacin paritaria.
Desde el punto de vista de la seguridad, numerosos expertos en este campo consideran Linux ms slido, sobre todo si usado conjuntamente con Webserver Apache. No faltan, sin embargo, opiniones y juicios opuestos. Para nosotros, un servidor, sea ste NT o Linux, ser altamente inseguro si no se controla y supervisa de manera constante. Como para todo software en el mercado, y ms an para aqullos destinados a la seguridad y gestin de Webserver, la seguridad es sin lugar a dudas el primer requisito. As como existen, por una parte, miles de tcnicos que trabajan para llegar a alcanzar el mayor nivel de seguridad posible, as tambin existe, por otra, un nmero igualmente elevado de piratas informticos que intentan encontrar todos los gazapos del programa. Por "gazapos" (bug, en ingls) entendemos los puntos no cubiertos del programa a travs de los cuales es posible forzar el sistema. Ni NT ni Linux estn libres de alarmas peridicas de gazapos. La supervisin y el control constante del servidor web hacen que puedan adoptarse todas las medidas necesarias para eliminar una situacin de inseguridad, lo que, obviamente, no puede hacerse en el caso de un servidor abandonado al destino. As sucede que gazapos muy conocidos en el ambiente tcnico sean causa de ataques pirata y violaciones de los sistemas de seguridad. La primera regla fundamental que hay que seguir es, en nuestra opinin, la de supervisar continuamente el propio servidor, ya sea ste Linux o Nt. Por lo que se refiere a sitios de grandes dimensiones, es preferible el uso de un servidor Linux, mientras que para sitios de pequeas o medianas dimensiones Nt supone una vlida alternativa. Debemos recordar tambin que para sitios en hospedaje (vase al respecto la leccin especfica de esta gua) los requisitos hardware de Linux son mnimos respecto a Nt. Incluso para un sitio de pequeas o medianas dimensiones, NT requiere ordenadores muy potentes, mientras que Linux gestiona perfectamente servidores con mucho trfico con un simple ordenador Pentium o incluso 486 (aunque este ltimo caso debe considerarse una excepcin a la regla). Asimismo, otro punto importante para efectuar una eleccin entre Linux y NT se refiere al server side include, es decir a todas las aplicaciones lanzadas desde el lado servidor. El web abunda en CGI escritos en su casi totalidad en Perl, pero tambin en C y C++. Todos estos programas, tanto freeware como shareware, son totalmente compatibles con Linux y a menudo incompatibles con NT. Esta produccin, por tanto, es mucho ms abundante y copiosa para plataformas Linux, si bien, instalando el Perl, tambin NT soporta parte de estos CGI. NT por su parte soporta la tecnologa ASP, a la cual Linux responde con una aplicacin similar denominada PHP. En cualquier caso, se han desarrollado algunos software que permiten una buena gestin de ASP en Linux. Las bases de datos creadas con Access (producto Microsoft) son compatibles slo con NT, mientras que el Perl permite, tambin aqu, una mayor compatibilidad y exportabilidad. Para acabar, una nota sobre los servidores web de mayor difusin. Entre stos, Apache es el que goza de ms popularidad gracias a sus caractersticas de solidez y seguridad. Es un producto de dominio pblico desarrollado por el Apache Development Group, un grupo de voluntarios dispersos por todo el mundo. El nico punto dbil de este servidor web es la falta de un soporte tcnico propiamente dicho. A Apache, Microsoft responde con el Internet Information Server (IIS), paquete software integrado, suministrado con Windows NT. A diferencia del software precedente, IIS tiene un soporte tcnico ptimo pero adolece de algunos problemas de seguridad. Resumiendo: nuestro consejo es adoptar un servidor Linux en mquinas en housing cuando se
posee un buen conocimiento del sistema, mientras que para principiantes absolutos NT es la nica solucin posible. De todas formas, no hay que olvidar que el software Microsoft tiene un coste elevado a diferencia de lo que sucede con Linux, aspecto que slo t puedes valorar.
Hardware para NT o Linux

En la leccin "Servidor de pago: hosting y housing" de este curso, y en la sucesiva " Una decisin importante: qu es mejor Linux o NT?", hemos evaluado las posibilidades ofrecidas por el mercado actual para hospedar un sitio Web. Sin entrar nuevamente en un tema ya ampliamente tratado, en este artculo veremos con detalle en qu medida es importante un buen hardware en el caso de que se haya elegido un servicio de housing. Para aclarar un tema tan complejo y en continua transformacin, hemos consultado a uno de los mayores expertos hardware del panorama Web italiano: Paolo Corsini, responsable del clebre sitio Hardware Upgrade. Con Hardware Upgrade y su responsable nos une una relacin de amistad y colaboracin profesional, adems de una sincera estima basada en los excelentes contenidos y la continuidad del sitio en el Web italiano. Le hemos pedido a Paolo Corsini que nos indique soluciones hardware apropiadas para housing de pequeas-medianas y grandes prestaciones. Antes empezar, es conveniente precisar que en gran medida depende del tipo de trfico generado por el sitio y del nmero de CGI instaladas. Otro factor determinante es la plataforma utilizada: Linux o Nt. Para elegir un buen hardware, hay que considerar cuatro factores: 1. Memoria: nunca como en este caso conviene no escatimar y evitar ahorros contraproducentes. En el caso de Linux es posible mantenerse en cantidades de memoria base, dadas las escasas pretensiones del sistema, pero en servidores NT es absolutamente necesario montar por lo menos 128 Mbytes. Este valor debe considerarse el requisito mnimo para prestaciones medio-bajas. 2. Procesador: absolutamente aconsejable orientarse hacia procesadores de gran potencia como Intel Pentium II, Intel Pentium III y AMD Athlon. Naturalmente, si las exigencias de trfico son muy limitadas y, sobre todo, las CGI instaladas son pocas, puede bastar tambin un procesador menos potente. En el mercado existen servidores web Linux giles capaces de girar a la perfeccin en 486, pero deben considerarse excepciones. 3. Discos: mejor orientarse hacia SCSI, porque se libera casi del todo al procesador de clculos que interesan a los discos. Tambin en este caso cuanto ms rpidos son, mejor responde el servidor a los problemas de trfico elevado. Los discos se deben tratar con mucho cuidado, prestando especial atencin al enfriamiento. Para servidores econmicos, los discos EIDE suponen una vlida alternativa. 4. Tarjeta vdeo: una tarjeta vdeo anticuada y de baja calidad es perfecta. El uso que se hace de esta tarjeta se limita a pilotar un monitor, casi siempre apagado y de 14 pulgadas. Sentadas estas premisas, pasemos a analizar dos servidores, uno de la franja medio-baja y otro de la franja alta: Servidor de franja medio-baja: 128 Mbytes de memoria (con NT4 mejor 256) cpu Pentium II 400 Mhz
HD EIDE 7.200 rpm Servidor de franja alta: 512 Mbytes de memoria, o incluso ms si se utiliza un elevado nmero de CGI y se genera mucho trfico. 2 procesadores Pentium III o bien AMD Athlon (aunque por ahora no existen todava motherboard dual processor para cpu Athlon), con una frecuencia de 600 Mhz o ms. HD SCSI 10.000 rpm, mejor si en configuracin RAID a fin de contar con la mxima seguridad para los datos. Generalmente, los servidores gestionados por Windows NT requieren elevadas prestaciones hardware. Tanto para servidor Nt como para Linux, se trate de franja alta o medio-baja, es necesario prestar mucha atencin a algunos particulares: proteccin del enfriamiento interno: la mquina est encendida 365 das al ao y no debe tener nunca problemas trmicos; case de excelente calidad alimentador testado y sobredimensionado. Para un servidor de franja alta puede valer un case con dos alimentadores hot-swap: cuando se rompe uno, automticamente se pone en funcionamiento el otro con la posibilidad de cambiar el averiado sin apagar nada. Para mayor informacin sobre hardware para PC, visita Hardware Upgrade.
Pegar dos imgenes
Tomemos como ejemplo una misma imagen dividida en dos:
e imaginemos que necesitamos juntar dichas imgenes manteniendo su independencia. Para hacer esto no bastar con introducir este cdigo (donde hspace=0 indica al navegador que deje 0 pxel entre la imagen y lo que est junto a ella): <IMG SRC="guida_segreti_a.gif" WIDTH=90 HEIGHT=180 BORDER=0 hspace=0> <IMG SRC="guida_segreti_b.gif" WIDTH=90 HEIGHT=180 BORDER=0 hspace=0> He aqu el resultado:
Como puedes ver, las imgenes no se han juntado. El problema, de hecho, se resuelve de manera banal porque en realidad es suficiente dejar el cdigo HTML de las imgenes en el mismo rengln, sin ningn salto de lnea, como en el ejemplo: <IMG SRC="guida_segreti_a.gif" WIDTH=90 HEIGHT=180 BORDER=0 hspace=0><IMG SRC="guida_segreti_b.gif" WIDTH=90 HEIGHT=180 BORDER=0 hspace= 0> He aqu finalmente el resultado que buscbamos:
Para imgenes que se deben juntar en horizontal, aqu tienes el cdigo equivocado y el cdigo exacto respectivamente:
<IMG SRC="guida_segreti_c.gif" WIDTH=180 HEIGHT=90 BORDER=0> <IMG SRC="guida_segreti_d.gif" WIDTH=180 HEIGHT=90 BORDER=0>
<IMG SRC="guida_segreti_c.gif" WIDTH=180 HEIGHT=90 BORDER=0><BR><IMG SRC="guida_segreti_d.gif" WIDTH=180 HEIGHT=90 BORDER=0>
Aliviar GIF y JPG
Cuntas veces hemos tenido que enfrentarnos con imgenes lentas de cargar pero no por ello menos importantes para la grfica de nuestras pginas? Es mejor tener buenas imgenes lentas de cargar (con lo que algunos decidirn huir antes de tiempo a otros sitios) o imgenes de baja calidad o incluso inexistentes pero rpidas? Esta es una eleccin que depender de los gustos y necesidades del webmster y que, en el mejor de los casos, desemboca en un compromiso. Hasta que no tengamos a disposicin lneas y conexiones ms veloces, no ser posible resolver este problema, pero ello no quita para que desde ahora mismo podamos adoptar algunas medidas prcticas. Respecto a este problema es importante elegir el formato grfico que queremos adoptar, que puede ser JPG o GIF segn nuestras necesidades. Adoptando el formato GIF, los colores de las imgenes pueden reducirse de 256 a 2 (1 bit) garantizando en algunos casos un resultado digno por un peso en Kb muy reducido. Es importante, por tanto, intentar disminuir lo ms posible el nmero de colores. En este ejemplo tenemos la misma imagen GIF salvada con 256 (en el primer caso), con 16 (en el segundo caso) y con slo 2 colores (en el tercer caso): 256 col. - 2,00Kb 16 col. - 1,19Kb
2 col - 846 byte
Como podis ver, entre la imagen de 256 y la de 16 colores no hay ninguna diferencia frente a lo que sucede con la imagen reducida a 2 nicos colores. Pero cmo se reduce el nmero de colores de una imagen? A continuacin intentaremos contestar a esta pregunta teniendo en cuenta el programa de retoque de fotos Paint Shop Pro 5. Una vez creada la imagen, debis, antes de guardarla, reducir el nmero de colores. Seguid lo indicado en la figura siguiente: Haz clic aqu para ver la imagen en otra ventana
Si el nmero de colores que pretendis asignar a la imagen no est comprendido entre los valores incluidos por defecto en el programa (256, 16 o 2), deberis elegir la opcin "X color... (8 bit)", que presentar la siguiente ventana (tenis que sustituir el nmero de colores donde est escrito "128"): Haz clic aqu para ver la imagen en otra ventana
El formato JPG a diferencia del GIF no permite disminuir el nmero de colores de la imagen (fijo en 16 millones) para aligerar su peso, pero ofrece la posibilidad de usar, en el momento de guardarla, una compresin ms alta. Naturalmente, una imagen muy comprimida puede tener una calidad psima (esa especie de halo que rodea muchas imgenes del web). A continuacin te mostramos dos imgenes, la primera con nivel de compresin 10 y la segunda con nivel 50. compresin 10 - 6Kb compresin 70 - 3Kb
Pero cmo se define la compresin de una imagen JPG? En lo que sigue intentaremos dar una respuesta a esta pregunta teniendo en cuenta el programa de retoque de fotos Paint Shop Pro 5. Una vez creada la imagen, tenis que guardarla pulsando . Se abre una ventana denominada "Save as...". Tenis que elegir el formato JPG como en la figura: Haz clic aqu para ver la imagen en otra ventana
Elegido el formato, siempre desde esta ventana, tenis que pulsar el botn "options..." situado en la parte inferior derecha; se abrir as la siguiente ventana: Haz clic aqu para ver la imagen en otra ventana
A mayor valor de compresin, peor calidad de imagen. Con un nivel de compresin bajo, la calidad es similar a la del original no comprimido (recordad que el formato JPG est ya de por s comprimido respecto a otros formatos). Mi consejo es probar imagen por imagen el efecto de la compresin en la calidad y mantenerse, en general, alrededor de un nivel de 20-25.
Crear GIF animados

Aunque la oferta de GIF freeware en red es consistente, a menudo exigencias particulares imponen crear uno mismo una animacin. Te adelantamos que no se trata de una operacin difcil; lo que es fundamental es la paciencia y un mnimo conocimiento de los instrumentos de retoque de fotos. Este tutorial te guiar paso a paso en la realizacin de un GIF animado, intentando aclarar los eventuales lados oscuros y dando, como es nuestra norma, indicaciones prcticas e inmediatamente verificables.
Lo primero que tenemos que hacer es descargar de la red uno de los muchos programas destinados a la animacin de GIF. Para ello, nos dirigimos al archivo de VolFTP. El programa que usaremos en este tutorial se llama Animagic GIF v1.10. Es un programa shareware, concedido a prueba durante 30 das, cuyo coste de registro es de 19$. Hemos elegido este software porque es intuitivo, eficaz, ligero y de costes contenidos. Para descargar Animagic GIF v1.10 haz clic aqu El archivo es de pequeas dimensiones (algo ms de medio Mb) y el download no dura ms que algn minuto con un mdem 28.800. Si deseas mayor informacin sobre este software, puedes visitar el sitio de la software house productora de Animagic: http://rtlsoft.com/animagic/index.html. Una vez descargado e instalado en el propio ordenador Animagic, pasemos a la realizacin de cada uno de los fotogramas que queremos colocar formando una secuencia y dotar de animacin. Llegados a este punto, es necesario aclarar algunos aspectos que, si no se entienden bien, pueden comprometer la comprensin del tutorial: solamente las imgenes GIF pueden tener animacin. Esto siginifica que en una imagen JPG, por ejemplo, se debe reducir el nmero de colores de 16 milioni hasta un mximo de 256. La diferencia entre GIF y JPG reside, de hecho, sobre todo en este diverso nmero de colores soportados. los GIF animados no son sino una serie de imgenes (a lo alto y a lo largo) puestas a continuacin una de otra con intervalos de tiempo modificables. Por tanto, es necesario, antes de nada, crear las imgenes con un programa de retoque de fotos y slo despus intervenir con Animagic.

Manual HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML

Uploaded by

Copyright:

Available Formats

<HEAD> encabezar el documento

Escribir correctamente las marcas de metainformacin (META)

Sonidos o msica de fondo

Marcas de texto lgicas y tipogrficas

La marca FONT y el nuevo estndar HTML 4

Formatear ttulos de <H1> ad <H6>

<B>, <I>, <U>

Breve descripcin de las marcas lgicas

Crear prrafos con <P>

Salto de lnea con <BR>

Disponer el texto con <DIV ALIGN> y <CENTER>

Lneas horizontales con <HR>

Crear listas ordenadas y desordenadas

<IMG> insertar imgenes

ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior

<HREF> crear enlaces

MAILTO (enlace a e-mail)

Enlaces con partes de un mismo documento

<TABLE> gestionar tablas

BGCOLOR="gray"> prueba </TD> </TABLE>

prueba prueba prueba

<FRAME> gestionar marcos (frame)

<BODY>) (pxel %) (* = tamao relativo) (pxel %) (* = tamao relativo)

<FRAMESET rows="80,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </FRAMESET>

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset>

Introduccin a los formularios

Las marcas de los formularios

<INPUT type="SUBMIT" value="Enva">

anchura de la ventana, salte de lnea automticamente. EJEMPLO

Comprar un servicio anfitrin sin acceso al directorio CGI-BIN, o la escasa

Para el segundo TD (las lneas horizontales negras) hemos previsto que la

Abrir ventanas independientes

Sitios hospedados por Community

Sitios con dominio propio

Manutencin remota y posibilidad de acceder a los locales en horas de oficina.

Hardware para NT o Linux

Pegar dos imgenes

Tomemos como ejemplo una misma imagen dividida en dos:

<IMG SRC="guida_segreti_c.gif" WIDTH=180 HEIGHT=90 BORDER=0><BR><IMG SRC="guida_segreti_d.gif" WIDTH=180 HEIGHT=90 BORDER=0>

Aliviar GIF y JPG

2 col - 846 byte

Crear GIF animados

You might also like