Introduccin

Creatuweb est dedicado a mostrarte la manera de crear un sitio de xito en la red. Como complemento a este sitio te ofrecemos este pequeo manual con el que podrs conocer los entresijos del lenguaje HTML, el que se usa para crear pginas web. En este curso pretendemos tan solo que llegues a ser capaz de construir pginas web correctas, vlidas para cualquier explorador, tando los de la familia de Netscape como los diferentes Explorers de Microsoft y otros. La idea es por tanto que estas pginas te sirvan como una guia prctica en tu labor de crear buenas pginas web. Quizs pienses que con los editores grficos est todo hecho y no es necesario conocer el HTML. En parte llevas razn, si no pretendes pasar del nivel de principiante y tan solo quieres crear pginas impersonales para ti y tus amigos pues no necesitas conocer HTML. Pero si lo que quieres es llegar a crear y publicar verdaderos sitios web de aspecto profesional y dignos de estar en la red, entonces lo mejor es que conozcas a fondo el lenguaje con el que se construyen esos sitios.
Qu es una pgina web?

Pues eso de entrada podemos preguntarnos qu es una pgina web. Habran dos respuestas: para el internauta y para el diseador. Para el internauta una pgina WEB es una pantalla en su monitor que le muestra la informacin que va buscando y enlaces a otros sitios relacionados. Para el diseador una pgina WEB es un documento construdo para mostrar informacin en la pantalla de un monitor, que contiene adems de la informacin una serie de instrucciones para indicar como se ha de mostrar esa informacin. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML Como ves el diseador define la pgina web como algo ms completo y tcnico que el simple internauta. La pgina web se concreta en un documento con un nombre terminado con la extensin .htm o .html. Una serie de pginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente est almacenado en un servidor.
Requisitos

Para seguir el curso los requisitos son mnimos: un ordenador, un navegador y un editor de texto simple es suficiente. Pero te recomendara, adems, instalar un servidor de internet en tu ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves en el mundo Linux te recomiendo el servidor Apache (si piensas trabajar con PHP te recomiendo la versin 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con este servidor corriendo en tu equipo tendrs un sitio llamado localhost al que podrs acceder como si se tratara de un servidor de internet: http://localhost/, pero solo es visible en tu ordenador.

En cuanto al editor de pginas web utiliza un editor tipo texto, o uno grfico, pero trabajano en modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores grficos esconden el cdigo. Mra estas herramientas que te pueden ser tiles, recuerda que de gratis tambin hay cosas buenas. En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrs comprobar que todo lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.
El HTML

El HTML HTML 2.0 HTML 3.0 y 3.2 HTML 4.0 Versiones para este manual El HTML Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje usado para describir documentos, el SGML. Y esto que significa? Pues muy sencillo: la estructura de las pginas web se describe en la propia pgina mediante una serie de etiquetas que le dicen al navegador como debe mostrar el documento, o sea, la pgina web: cuando debe cambiar de prrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas en el documento. El HTML es el lenguaje que explica qu etiquetas se pueden usar en una pgina y como se usan. Como ves todo va mezclado: informacin y formato, algo que ha comenzado a cambiar con la aparicin de los estilos CSS, un interesante intento de separar la informacin del formato de presentacin.

Los inicios: HTML 2.0 Cuando internet sali del mbito universitario y se convirti en una herramienta de dominio pblico la versin de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a ser capaz de interpretar HTML 3.0 y 3.2

A medida que la red se extenda, los documentos que circulaban por ella se hicieron ms complejos y completos, la versin 2.0 pronto se mostr demasiado limitada para cumplir con su cometido: mostrar las pginas web en los terminales de los usuarios. As que los exploradores comenzaron a incluir etiquetas extras no contempladas en el estndard. Por entonces el IETF (Intenert Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recien nacida red de redes y elabor la versin 3.0, versin que pretenda incorporar las nuevas etiquetas y las que estuvieran por llegar. Este standard no termin de cumplir lo esperado, adems en esas fechas la seccin de standarizacin de HTML de este comit cerraba sus puertas, por lo que un grupo de

empresas, entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comit para estandarizar internet, era el W3C, organismo que an hoy dicta los estndares no solo para HTML, sino tambin para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consisti en mejorar la versin 3.0 de HTML, lo que llev al HTML 3.2, que inclua muchas de las nuevas etiquetas que los principales navegadores de la poca, osea, Netscape y Explorer, ya estaban utilizando.
HTML 4.0 El HTML 3.2 era una solucin temporal que se aprob en enero de 1997, momento en el que el W3C comenzaba a eloborar un nuevo estandard con reformas profundas, era la versin 4.0. En julio de 1997 se presenta el borrador de este nuevo estndar que unifica el manejo de los marcos (frames e iframes), las hojas de estilo y los scripts. El 17 de diciembre de 1997 dicho borrador corregido fue finalmente aprobado como HTML 4.01, y es el que an hoy da viene usndose para la creacin de las pginas web. Versiones para este manual

En principio cualquier navegador debera ser capaz de interpretar el HTML 3.2, pero si en algn caso es necesario sealar que algn elemento es solo soportado por una determianda versin o navegador usaremos los smbolos que veis en esta tablita: Introducido con la versin 3.2 del HTML Introducido con la versin 4.0 del HTML Carecterstica soportado slo por Explorer Carecterstica soportado slo por Netscape
Xxxxxxxxxxxxxxxxxxx Mi primera pgina

El cdigo La explicacin El cuerpo del documento

El cdigo

Lo mejor para aprender a hacer algo es ... hacerlo!. As que vamos a la primera pgina mipagina.htm
<HTML> <HEAD> <TITLE>Mi primera pagina web </TITLE> </HEAD> <BODY> <H1 align="center" >Mi Primera pagina web </H1> <HR> <P>Esto tan sencillo es una verdadera pgina web, aunque le falta el

contenido, pero todo llegar.</P> </BODY> </HTML>

Si quieres ver como queda esto en el explorador solo tienes que pulsar aqu, y tranquilo que se abrir en otra ventana
La explicacin

Si te fijas en la pgina que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el contenido de la pgina, pero y lo que est entre esos parntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el ttulo de la pgina, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:
<ETIQUETA parmetros> ... </ETIQUETA>

Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de lnea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:
<HTML> ... </HTML>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque est limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la pgina en si. Contiene por ejemplo el ttulo que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :
<HEAD> <TITLE>Mi pgina web</TITLE> </HEAD>

Puede contener muchas otras cosas, pero eso lo dejamos para ms adelante.
El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la pgina web. Tiene una etiqueta con cierre:
<BODY> ... </BODY>

Y ahora el contenido:
<H1 align="center"> Mi primera pgina web</H1>

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea, en tamao grande y centrado en la pgina, una forma de resaltar la frase. Ahora separamos esa frase por medio de una lnea horizontal:
<HR>

Como ves este es un ejemplo de etiqueta sin cierre. Y por ltimo colocamos un texto escplicativo en un prrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrs :
<P>Esto tan sencillo es una verdadera pgina web, aunque le falta el contenido, pero todo llegar.</P>

Para empezar no est mal, por supuesto existen muchas ms etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.
El documento HTML

Estructura del documento La cabecera Meta Name Meta Http-Equiv El cuerpo

Estructura del documento

La estructura de un documento HTML se puede resumir as:

tipo de documento <HTML> <HEAD> <TITLE>titulo de la pgina</TITLE> cosas que afectan a la pgina pero no a su contenido </HEAD> <BODY parmetros> contenido de la pgina </BODY> </HTML>

En el tipo de documento deberemos especificar a que estndar del HTML responde nuestra pgina entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estndar HTML 2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Cumple el estndar HTML 3.2 Cumple el estndar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">

Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REC-html40/frameset.dtd">

Es una definicin de marcos que cumple el estndar HTML 4.0 El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo soportados, han sido sustituidos por otros ms potentes y, por ello, es posible que sean eliminados del estndar HTML en el futuro.

La cabecera

Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar ms recomendable para colocar los scripts y las hojas de estilo, como veremos en los captulos correspondientes. Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una pgina situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="http://www.misitio.com/">

Ahora todas nuestras URLs relativas se encontrarn dentro del servidor http://www.misitio.com
Meta Name

Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son los META. Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su autor. Por ejemplo,
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">

nos indicara la herramienta con que hemos creado la pgina (en este caso la versin 4.03 en espaol para Windows 95 del Composer de Netscape). Como veris el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante. Estas son las propiedades ms comunes: Name
AUTHOR

Content

Autor de la pgina. Palabras que permite clasificar la pgina dentro de un buscador CLASSIFICATION jerrquico (como Yahoo). Palabras clave por las que encontrarn la pgina en los buscadores. KEYWORDS Google no le hace mucho caso. GENERATOR Herramienta utilizada para hacer la pgina. DESCRIPTION Descripcin del contenido de la pgina. Google le hace algn caso.
Meta http-equiv

Son etiquetas usadas tambin para dar informacin al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La nica diferencia est en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de ms de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:
expires pragma

HTTP-EQUIV

ContentLanguage Refresh

Content-Type

CONTENT Fecha desde la que la pgina debe ser recargada por los navegadores El contenido debe ser no-cache y sirve para que el navegador no guarde la pgina en el ordenador del internauta. Idioma en el que est escrita la pgina. Se usan las iniciales como: es_ES: espaol Espaa, en_US: ingles americano... Indica al navegador el tiempo (en segundos) que debe esperar para recargar la pgina automticamente y la pgina a la que debe ir. Ambos datos se separan con un punto y coma. Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor: text/html; charset=iso-8859-1 Si n o se usa los caracteres especiales (letras acentuadas, ) pueden quedar ilegibles .

El cuerpo

El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es donde colocarn prcticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:
BACKGROUND BGCOLOR BGPROPERTIES TEXT LINK VLINK ALINK LEFTMARGIN y TOPMARGIN MARGINWIDTH y MARGINHEIGHT

Coloca una imagen como fondo de la pgina. Define el color de fondo de la pgina. Cuando es igual a FIXED el grfico definido como fondo de la pgina permanecer inmvil aunque utilicemos las barras de desplazamiento. Color del texto. Color de un enlace no visitado (por defecto azul). Color de un enlace ya visitado (por defecto prpura). Color que toma un enlace mientras lo estamos pulsando (por defecto rojo). Nmero de pixels que dejar de margen entre el borde de la ventana y el contenido de la pgina. Equivalentes a los anteriores, pero stos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.
Formato a nivel de bloques

Dando formato Estilos de prrafo

Encabezados Estilos de texto Tipo de letra Otros elementos

Dando formato Evidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto. Estilos de prrafo

Estos estilos o formatos actan a nivel de prrafo Etiqueta Significado

<P>

Sirve para delimitar un prrafo. Inserta una lnea en blanco antes del texto.

<p ALIGN=x> ... </p>

Justificar el texto del prrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos mrgenes (JUSTIFY html4 )

Permite centrar todo el bloque de texto encerrado. Representa el texto encerrado en ella <PRE con un tipo de letra de paso fijo. El WIDTH=x> ... Estoy en paso fijo parmetro WIDTH especifica el nmero </PRE> mximo de caracteres en una lnea. Si quieres ver el texto Mete sangras de prrafo tanto a derecha indentado por ambos <BLOCKQUOTE> ... como a izquierda. Suele usarse como </BLOCKQUOTE> mrgenes usa el tabulador Blockquote.
<CENTER> ... </CENTER>

Resultado Soy un prrafo: fjate en los espacios de antes y de despus. Alineacin izquierda Texto centrado Alineacin derecha Texto justificado o sea, alineado a ambos lados sin dejar, escalones en el margen derecho. Alineacin por defecto Texto centrado

Los encabezados

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o ttulos. Etiqueta
<H1> ... </H1> <H2> ... </H2> <H3> ... </H3>

Resultado

Cabecera de nivel 1
Cabecera de nivel 2
Cabecera de nivel 3

<H4> ... </H4>

Cabecera de nivel 4

<H5> ... </H5> Cabecera de nivel 5 <H6> ... </H6> Cabecera de nivel 6

Actan a nivel de prrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por delante y por detrs. Habitualmente se utilizan para destacar ttulos de los diferentes apartados o secciones de un texto.
Cambiando el tipo de letra

Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar dentro de un prrafo. Etiqueta
<B> ... </B> <I> ... </I> <U> ... </U> <S> ... </S> <TT> ... </TT> <SUP> ... </SUP> <SUB> ... </SUB> <BIG> ... </BIG> <SMALL> ... </SMALL>

Utilidad Pone el texto en negrita. Representa el texto en cursiva. Para subrayar algo. Para tachar. Permite representar el texto en un tipo de letra de paso fijo. Letra superndice. Letra subndice. Incrementa el tamao del tipo de letra. Disminuye el tamao del tipo de letra.

Resultado Soy un texto negro como el tizn Estoy ladeado Como soy muy importante estoy subrayado A m, en cambio, nadie me quiere
No soy variable

E=mc2 ai,j=bi,j+1

Soy GRANDE
Cre ver un lindo gatito

Estilos de texto

Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS. Etiqueta
<CITE> ... </CITE> <CODE> ... </CODE> <STRONG> ... </STRONG> <EM> ... </EM> <KBD> ... </KBD> <VAR> ... </VAR>

Significado Cita, por ejemplo de un texto Cdigo Fuerte, negrita. Enfasis. Teclado Representar variables de un cdigo.

Efectos Esta frase no es ma

int x=0;

Hay cosas importantes. Para poner nfasis El usuario debe teclear Multivac es el mejor. La variable x, definida anteriormente...

<SAMP> ... </SAMP> <ABBR> ... </ABBR>

Para representar una serie de caracteres literalmente. Abreviaturas.

Estoy en un literal La WWW usa el protocolo http

Otros elementos

Estas etiquetas realmente no son formato ni de prrafo ni de texto, pero hay que ponerlas en algn sitio: Significado Resultado <BR> Cambio de lnea. Simple salto de linea <HR> Barra horizontal. <!-- ... --> Comentarios. No se ve el contenido
Formateando caracteres

Etiqueta

Formateo de caracteres El color Tamao del texto Tipo de letra

Formateo de caracteres

Cuando hablamos del formato en un tema anterior te adelantbamos que podras dar formato al texto a nivel de carcter, y que la cosa no se iba a quedar solo en poner subrayados o negritas y cursivas. HTML nos permite un gran control sobre el formato del texto mediante la etiqueta <FONT>.
El color

Podemos cambiar el color de cualquier carcter mediant el uso del parmetro COLOR. La manera de especificarle el color es comn a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando los componentes de rojo, verde y azul (cdigo RGB) del mismo. Los colores reconocidos son los siguientes: Black Silver Gray White Maroon Red Purple Fuchsia Green Lime Olive Yellow Navy Blue Teal Aqua

<FONT color="blue">Soy azul como el mar</FONT>

El modo de indicar el color RGB es el mediante los componentes RGB para lo que se usa un cdigo de seis dgitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Cdigo para rojo es #FF0000D</FONT>

Cdigo para rojo es #FF0000

<FONT COLOR="#00FF00">Cdigo para verde es #00FF00</FONT>

Cdigo para verde es #00FF00

<FONT COLOR="#0000FF">Cdigo para Azul es #0000FF</FONT>

Cdigo para azul es #0000FF

<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>

Y ahora mezclemos colores con #10A2FF Tamao del texto El parmetro utilizado para indicar el tamao es SIZE. Puede utilizarse para indicar tamaos absolutos:
SIZE=1

SIZE=2

SIZE=3 SIZE=4

SIZE=5 SIZE=6

SIZE=7
El tamao por defecto es 3. Tambin se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamao del tipo de letra. As, por ejemplo, si indicamos que queremos un tamao de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces ms pequeo.
<FONT SIZE=2><font size="2">Tamao 2</font><FONT SIZE="+3"> <font size="2"><font size="+3">Tamao 6</font></font></FONT></FONT>

Tipo de letra Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parmetro FACE. Pero ojo esto no es realmente muy utilizable. El navegador usar el tipo de letra indicado en este atributo si tiene esa fuente instalada. Si sales de la Times New Roman, Arial, Helvtica, Verdana o Courier corres el riesgo de que el usuario no llegue a ver la pgina como tu la has diseado, sino de una manera que puede llegar a ser desastrosa para el diseo. Si el navegador no encuentra ninguno de las fuentes indicada en este parmetro utilizar la fuente por defecto:
<FONT FACE="Helvetica,Arial,Times"> <font face="Helvetica,Arial,Times"> No s como voy a salir exactamente</font></FONT>

Enlaces web

Enlaces o vnculos La etiqueta <A>

Las URLs Ancla

Enlaces Las pginas web no son ms que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino tambin el contenido de otras fuentes a las que accedemos desde el documento. En el caso de las pginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un grfico que habitualmente destacan por su color o su forma. Es prcticamente imposible que una pgina web no posea uno de estos enlaces. Los enlaces que nos encontramos en cualquier pgina pueden ser de dos tipos: internos a la propia pgina o externos a otra pgina. La forma de construir unos y otros es muy similar como vers a continuacin. arriba La etiqueta <A> La etiqueta <A></A> nos sirve para delimitar la zona de la pgina que constituye el enlace. Lo que est encerrado en esta etiqueta ser mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratn sobre esa zona el navegador se dirigir al lugar apuntado por ese enlace. El formato completo de esta etiqueta es el que sigue:
<A HREF="direccin de destino" target="destino">Pulsar para saltar</A>

La direccin de destino ser la pgina web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la pgina. En este caso se ha usado un texto pero igualmente podramos colocar una imagen. El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva pgina. Por ahora veremos dos de sus valores posibles: _blank Muestra la nueva pgina en una ventana nueva y sin nombre del navegador. _self Muestra la nueva pgina en el marco donde est declarado el enlace. Este es el destino por defecto de cualqueir enlace dentro de una pgina En el apartado dedicado a los frames veremos algo ms de este parmetro.

arriba Las URLs Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro nmeros entre 0 y 255, algo as como 84.234.12.122, cualquier sitio de internetest identificado por esta direccin. Pero como quiera que recordar esos nmeros no es nada fcil existen unos servidores de nombre que transforman esas direcciones en nombres ms humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier pgina en internet. En general tiene el siguiente formato:
protocolo://mquina:puerto/ruta/fichero@usuario

donde protocolo puede ser uno de los siguientes: http Es el protocolo para la transmisin de documentos HTML, es decir, el que habitualmente usamos para ver las pginas en nuestro navegador. https Es similar al anterior pero con la particularidad de que la informacin viaja codificada mediante tcnicas de encriptacin. ftp Es un protocolo para la transmisin de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo ms normal es usasr unos programas al efecto denominados clientes de FTP. mailto Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de correo. news Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribucin de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo. telnet Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad est bien pensada. Lo ms normal en nuestras pginas ser acceder a elementos de otros pginas y por tanto lo habitual ser usar URL del estilo http://servidor.dom/pgina.htm o similar. En un enlace podremos usar la URL como hemos escrito ms arriba, URL absoluta, pero tambin podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la direccin verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la pgina en la que est el enlace, son las URL relativas. Por ejemplo si miras la URL de esta pgina vers que es http://www.espaciolatino.com/tutorhtml/tema6.html

Pues bien si en esta pgina colocara un enlace en la forma

<A href="tema3.htm">Tema 3</A>

Esta direccin realmente apuntara a http://www.espaciolatino.com/tutorhtml/tema3.html Como ltimo detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. As este enlace
<A href="/index.htm">Portada</A>

estara apuntando a http://www.espaciolatino.com/index.htm.

Anclas

Como dijimos, es posible acceder a una posicin dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:
<A NAME="ancla">

A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el smbolo # seguido del nombre del ancla de esta manera:
<A HREF="#ancla">Ancla en esta pgina</A>

Al pulsar sobre este enlace se mostrar en la ventana la parte de la pgina actual que contiene el ancla. Si queremos acceder a un ancla en otra pgina basta indicarlo al final de su URL. Como en este ekemplo:
<A HREF="enlaces.html#ancla">Ancla en la pgina enlaces.html</A>

Listas

El formato listas Listas desordenadas Listas ordenadas Listas de definiciones arriba

El formato listas El lenguaje HTML nos permite crear listas en las pginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando rboles ms o menos complejos. Todos los tipos siguen el mismo formato:
<tipo_lista>

<LI>Primer elemento <LI>Segundo elemento </tipo_lista> tipo_lista puede ser

una de las siguientes: UL, OL, DL. arriba

Listas desordenadas La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las vietas en los procesadores de texto: son listas donde cada elemento est precedido de un smbolo como un putno o un disco. EL formato es el qeu sigue:
<UL> <LI>Juan Pedro <LI>Luisa </UL>

se ver como

Juan Pedro Luisa

A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros: Parmetro Significado Indica al navegador que debe representar la lista de la manera ms compacta posible. Resultado Primer elemento
o

COMPACT

TYPE="disc", "circle", "square"

Indica al navegador el dibujo que preceder a cada elemento de la lista. Para mayor flexibilidad se admite tambin como parmetro de <LI>.

Segundo elemento Tipo disc Tipo circle Tipo square

arriba Listas ordenadas La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un nmero de orden. Por ejemplo,
<OL> <LI>Primer elemento

<LI>Segundo elemento </OL>

se ver como 1. Primer elemento 2. Segundo elemento El HTML 3.2 admite estos parmetros para la etiqueta <OL> : Parmetro Significado Indica al navegador que debe representar la lista de la manera ms compacta posible. Resultado 1. Primer elemento 2. Segundo elemento 1. Tipo 1 a. Tipo a A. Tipo A i. Tipo i

COMPACT

Indica al navegador el tipo de numeracin que TYPE="1", "a", preceder a cada elemento de la lista. Para "A", "i", "I" mayor flexibilidad se admite tambin como parmetro de <LI>.

START="num"

Indica al navegador el nmero por el que se empezar a contar los elementos de la lista.

I. Tipo I 3. Primer elemento 4. Segundo elemento 1. Primer elemento 4. Segundo elemento 5. Tercer elemento

VALUE="num"

Atributo de <LI>, acta como START pero a partir de un elemento predeterminado.

arriba Listas de definiciones Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si

tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:
<DL> <DT>HTML<DD>Es un lenguaje de definicin de pginas web. <DT>Java<DD>Es un lenguaje de programacin. </DL>

se ver como HTML Es un lenguaje de definicin de pginas web. Java Es un lenguaje de programacin. La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>. Imgenes

Insertar imgenes Imgenes y enlaces Alineacin respecto al texto arriba

Insertar imgenes Una pgina web sin alguna imagen es como el mar sin sal. Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta
<IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>

El parmetro SRC especifica la URL del fichero que contiene el grfico. Los formatos estndar en la red son el GIF, PNG y JPG. Si quieres saber ms sobre imgenes e internet debes dirigirte a esta seccin dedicada al tema en la gua de diseo. El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estdar HTML 4.0 obliga a hacerlo. Su uso es adems muy interesante cara a los robots buscadores que de este atributo pueden sacar informacin del tema tratado en la pgina. Los atributos WIDTH y HEIGHT indican el ancho y alto del grfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el

navegador sabe el espacio que ocupar la imagen y puede seguir colocando los otros elementos de la pgina mientras se termina de descargar la imagen. Por ltimo vemos el atributo BORDER que como podrs adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado. Por ejemplo <img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">

arriba Imgenes y enlaces Recordars que al hablar de los enalces decamos que en el contenido de la etiqueta <A> poda ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para sealar los enlaces de texto. Algo bastante lgico pero que en la mayora de los casos queda poco esttico, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.
<a href="tema1.htm"> <img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45" height="30"> </a>

Se ve as:

Sin embargo,
<a href="tema1.htm"> <img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45" height="30" BORDER="0"> </a>

Se ve as:

arriba Alineacin respecto al texto

HTML nos permite controlar la disposicin de las imgenes en la pgina con relacin al texto, para ello usamos el parmetro ALIGN :
ALIGN= TOP

Significado Coloca el punto ms alto de la imagen coincidiendo con ms alto de la lnea de texto actual. Alinea el punto medio (en altura) de la imagen con la base del texto. Alinea el punto ms bajo de la imagen con la base del texto. Coloca la imagen a la izquierda del texto.

Muestra Este es el texto Este es el texto Este es el texto Este es el texto y esta es otra lnea Este es el texto y esta es otra lnea

MIDDLE

BOTTOM

LEFT

RIGHT

Coloca la imagen a la derecha del texto.

Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j. Los formularios

Formularios Campos de texto Opciones Botones del formulario Marcas de verificacin Campos ocultos arriba

Formularios Las pginas webs no son solo permiten presentar documentos de forma ms o menos atractiva al destinatario final, sino que tambin proporcionan elementos para interactuar con l. De esta manera el usuario final puede enviar su opinin de la pgina al autor, o realizar una compra en lnea. Estos elementos se conocen como formularios y seguro que todos los habis visto y utilizado alguna vez. Por ejemplo este sencillo formulario Tu nombre: Ests registrado? Si No

<FORM ACTION="" METHOD="POST" name="formul"> Tu nombre:<BR> <INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR> &iquest;Est&aacute;s registrado?<br> <label><input type="radio" name="Si" value="1">Si</label><br> <label><input type="radio" name="Si" value="0">No</label><br><BR> <INPUT TYPE="Submit" VALUE="Enviar"> <input name="Reset" type="reset" id="Reset" value="Borrar"> </FORM>

El formulario est formado por una serie de elementos (cajas de texto, casillas de verificacin, botones...) encerrados entre las etiquetas <FORM> </FORM>. Como vers en esta etiqueta existen varios parmetros como son: ACTION la accin que se ejecutar al pulsar el botn de enviar. Habitualmente ser una URL a un programa CGI encargado de procesar los datos del formulario. Puede ser tambin mailto: seguido de una direccin de correo electrnico, en este caso el formulario se enviar por correo, en cuyo es recomendable aadir el parmetro ENCTYPE="text/plain" para que el mensaje sea fcil de leer. METHOD indica como se enviarn losa datos del formulario al programa que los procese: POST de forma interna (oculta) y GET aadido a la direccin URL del programa. Si usas el formulario para un mailto: debes usr el mtodo POST NAME es el nombre que identifica al formulario, til si se usan scripts dentro de la pgina. arriba Cajas de texto Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas de una solo lnea o cuadros de texto con varias lneas. Las primeras usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es visto como una serie de asteriscos).
<INPUT TYPE=TEXT> <INPUT TYPE=PASSWORD>

Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que est codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son: Significado Tamao en columnas de la caja de texto. MAXLENGTH Nmero mximo de caracteres que se pueden teclear. VALUE Texto por defecto que aparecer en el campo.
SIZE

Parmetro

Pero si necesitamos que el usuario escriba ms llineas de texto pues usamos la etiqueta <TEXTAREA></TEXTAREA>:
<TEXTAREA>Comienza a escribir </TEXTAREA>

Si escribimos algun texto dentro de esta etiqueta, ese texto aparecer por defecto en ese area de texto. Admite estos parmetros: Parmetro
ROWS COLS

Utilidad Filas que ocupar la caja de texto. Columnas que ocupar la caja de texto.

arriba Opciones Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO VALUE="1"><BR> No<INPUT NAME="Registrado" TYPE=RADIO VALUE="0"><BR>

Si No

Fjate que ambos INPUT usan el mismo atribuyto NAME, de esa manera el navegador los reconoce como un juego de respuestas alternativas. Parmetro
VALUE CHECKED

Significado Este es el valor que asignar a la variable. Si lo indicamos en una de las opciones esta ser la que est activada por defecto.

arriba Listas de opciones Hay una alternativa al control de seleccin de alternativas: las listas desplegables. Mediante este control el usuasrio puede seleccionar una opcin de entre un grupo que aparece en una lista desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma"> <OPTION>Espaol</OPTION> <OPTION>Ingls</OPTION> <OPTION>Francs</OPTION> <OPTION>Alemn</OPTION>

</SELECT>

Los parmetros que admite SELECT son las siguientes: Parmetro

SIZE MULTIPLE

Significado El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista de seleccin con un scroll y, si no, veremos una lista desplegable. Si lo indicamos podremos elegir ms de una opcin, para ello el usuario utilizar la tecla CTRL y el botn activo del ratn.

Y OPTION estos: Parmetro

VALUE SELECTED

Significado Este es el valor que asignar a la variable. La opcin con esta propiedad ser la que aparezca seleccionada por defecto.

arriba Botones del formulario Existen dos clases e botones: uno que se utiliza para poner en marcha la operacin indicada por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de todos los controles:
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

En ambos casos su puede usar el parmetro VALUE para el texto que aparece dentro del botn. El botn de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image" src="imgs/botonel.gif" width="85" height="46" border="0">

Que se vera Este botn actua como un botn tipo SUBMIT, pero enva con los datos del formulario las coordenadas X Y del punto de la imagen donde puls el usuario. arriba Marcas de verificacin Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado o no marcado). Lo podremos conseguir por medio de controles de confirmacin:

<INPUT NAME="Opina" TYPE=CHECKBOX>Te gusta el curso?

Te gusta el curso?

Si queremos que el control est activado por defecto le aadiremos el parmetro CHECKED. arriba Campos ocultos Mediante un formulario podemos tambin enviar datos al programa encargado de procesarlo. Esto se realiza mediante los llamados campos ocultos, que son campos INPUT de tipo HIDDEN, y se llaman as porque no se ven en la pgina web, o sea, el usuario no los ve a menos que se mete en la vista de cdigo de la pgina, digo esto poruqe no vayamos a pensar que con estos campos podemos pasar informacin privada mediante los formularios. El cdigo para este tipo de campos es algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">

De esta manera si en un sitio tengo muchos formularios sabr que estos datos en concreto vienen de la pgina de Javascript. Su uso realmente no lo vers hasta que no escribas o utilices programas para gestionar los formularios. Mapas de imgenes

Mapas de imgenes Mapas lado cliente Usando los mapas arriba

Mapas Recordemos que los enlaces en las pginas web podan escribirse con un texto o con una imagen. Es decir podamos tener una imagen que al ser pulsada con el ratn nos llevaba a otra pgina. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se puede hacer de dos maneras:

Gestionando el mapa en el navegador. Gestionando el mapa en el servidor.

Los ms utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no exigen ningn apoyo del servidor y por tanto los puede usar cualuier webmaster en su propia pgina. arriba

Mapas lado cliente Un mapa no es ms que una imagen en la que se definen zonas activas, o sea, zonas que al ser pulsadas con el ratn actan como un enlace y nos llevan a otras pginas. Su creacin tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen:
<MAP NAME="mapa_enlaces"> <AREA SHAPE=... COORDS=... ALT="Enlace a.."> ... </MAP>

La descripcin del mapa es de lo ms simple: le damos nombre (para luego poderle asociar la imagen) y definimos las zonas activas (formas geomtricas como vers a continuacin): Parmetro
SHAPE COORDS HREF NOHREF ALT

Significado Define la forma de la zona: rectangular, circular o poligonal. Coordenadas (separadas por comas) que definen la zona. El nmero y significado de esas coordenadas depender de la forma. URL del enlace corespondiente a esta zona. Zona inactiva Texto alternativo, etiqueta idntica al ALT de IMG

Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se definen exactamente las formas y coordenadas: SHAPE Rectangular Circular Polgono irregular Toda la imagen
RECT CIRC POLY

COORDENADAS "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha. "x,y,r" siendo (x,y) el centro del crculo y r el radio. "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polgono. La ltima pareja de coordenadas se unir a la primera para cerrar el polgono. No se necesitan

DEFAULT

arriba Usando los mapas Una vez definido como es el mapa lo aisgnamos a una imagen:
<IMG SRC=... USEMAP="#mapa_enlaces">

Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver un ejemplo:

<MAP NAME="navegadores"> <AREA SHAPE=RECT COORDS="0,0,24,31" HREF="http://www.apache.org" ALT="Servidor Apache"> <AREA SHAPE=RECT COORDS="26,0,53,31" HREF="http://www.w3c.org" ALT="la W3C"> <AREA SHAPE=DEFAULT NOHREF ALT="por defecto"> </MAP> <IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">

Se ve tal que as:

Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce a ningn URL por si el usuario pulsa fuera de las zonas activas. Las tablas

Tablas Definicin Definir las filas Definir las celdas Ttulares arriba

Tablas La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web son como pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son las tablas. Una tabla no es ms que una coleccin de listas y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o imgenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen prcitcamente similares a las que se podran conseguir en pginas de revistas gracias a los programas de maquetacin. arriba Definir tablas Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las caractersticas de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) as:
<TABLE> <TR> <TD>1,1</TD>

1,1 1,2 1,3 2,1 2,2 2,3

<TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> </TABLE>

Pero la definicin va ms all, podemos poner bordes, colores de fondo a las celdas, definir mrgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos:
WIDTH

Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total disponible. ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). BORDER Especifica el grosor del borde que se dibujar alrededor de las tabla y celdas. BORDERCOLOR Define el color de los bordes de la tabla CELLSPACING Espacio entre celdas, en pixels. CELLPADDING Borde interior de las celdas, en pixels. Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente: 1,1 2,1 1,2 2,2 1,3 2,3

El contenido escrito son las coordenadas de la celda, as 1,2 indica que esa celda es la correspondiente a la fila 1 y la columna 2. arriba Definiendo las filas La definicin de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos: Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo VALIGN (BOTTOM) o centro (MIDDLE).
ALIGN

arriba

Defiminiendo las celdas Ya slo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta ltima es una celda especial que se ver destacada, como un ttulo para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:
ALIGN VALIGN WIDTH

Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE). Especifica la anchura de la celda. Tambin se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador). Impide que, en el interior de la celda, se rompa la lnea en varias lineas. Nmero de celdas de una fila agrupadas. Nmero de celdas de la columna agrupadas.

NOWRAP COLSPAN ROWSPAN

Los dos ltimos parmetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
<TABLE BORDER=1> <TR> <TD COLSPAN=2>1,1 y 1,2</TD> <TD>1,3</TD> </TR> <TR> <TD ROWSPAN=2>2,1 y 3,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD> <TD>3,3</TD> </TR> </TABLE>

1,1 y 1,2

1,3 2,2 2,3 2,1 y 3,1 3,2 3,3

Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el nmero de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en vertical. arriba Titulares Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla al completo puede llevar un ttulo, que ir en una zona fuera de cualquier celda o fila. Esta es la etiqueta CAPTION. Su uso es muy simple como puedes ver en este ejemplo:

<TABLE BORDER=1> <CAPTION> Nmeros</CAPTION> ... </TABLE>

Nmeros 1,1 y 1,2 1,3 2,2 2,3 2,1 y 3,1 3,2 3,3

Con el parmetro ALIGN, podemos controlar que el ttulo aparezca arriba (por defecto TOP) o abajo de la tabla , con el valor BOTTOM. Marcos o frames

Marcos Etiqueta <FRAMESET> Etiqueta <FRAME> Marcos flotantes <IFRAME> Acceso a los marcos arriba

Marcos Denodados por unos y adorados por otros los marcos o frames son una forma de insertar varias pginas web en una sola. Mal utilizados pueden arruinar la mejor pgina web, pues no hemos de olvidar que la pantalla del monitor est fsicamente limitada. Cada marco que compone la pgina poseer sus propios bordes y barras de scroll, comportndose como ventanas independientes. Su situacin en la pgina es rgida, no podemos colocarlos en las posiciones que deseemos, si tenemos cuatro marcos se situarn en cada uno de los cuatro cuadrantes de la pantalla. Si tenemos dos la pantalla se dividir en dos filas o en dos columnas para alojarlos. Pueden ser tiles para compartir un cierto contenido por todo el sitio web, por ejemplo para una barra de navegacin. Su uso puede parecer algo compeljo pero es muy simple. Bsicamente se trata de definir una pgina contenedora de los marcos y de colocar en cada uno de ellos la pgina cuyo contenido mostrarn. Por supuesto tambin concretaremos el tamao y posicin y otros atributos de cada marco. Pueden existir navegadores que no puedan manejar los marcos, por ello colocamos un texto alternativoa explicando la situacin. Mira el siguietne cdigo y ve los resultados en este ejemplo.
<HTML> <HEAD> <TITLE>Los frames: pginas multiventana</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.htm"> <FRAME NAME="principal" SRC="principal.htm"> <NOFRAMES> <P align="center">Al parecer tu navegador no soporta marcos, actualzate.</P> </NOFRAMES> </FRAMESET> </HTML>

Fjate las diferencias y coincidencias con una pgina HTML habitual: en lugar de BODY ahora tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una pgina o ventana dentro de la pgina contenedora que estar compuesta por varias zonas definidas con los parmetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno ocupa el 20% de la ventana del explorador y el otro el 80% restante. Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la accin alternativa para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un nombre y especificamos qu pgina HTML se mostrar en l (etiqueta <FRAME>). Slo queda definir lo que ver el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>). arriba Etiqueta FRAMESET Los parmetros COLS y ROWS nos permiten controlar el tamao de los marcos presentados en la ventana del navegador. Existen tres formas de establecer estos tamaos:

Porcentajes: podemos definir el tamao de un marco como un porcentaje del espacio total disponible (el ancho o alto de la ventana del navegador) Absolutos: Podemos especificar el ancho o alto del marco en pixels. Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamao del otro lo calcule el navegador, usando apra ello un asterisco en lugar de un valor o porcentaje. Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *", el ltimo ocupar el 60% (el espacio sobrante 100 - 10 -30). Si colcoamos el * varios marcos se repartirn el espacio equitativamente, pero podemos tambin hacer que un marco sea doble o triple de otro. As, un marco con un espacio de 3* ser tres veces ms grande que el que contenga un asterisco.

Se pueden combinar los tres mtodos. Por ejemplo:

<FRAMESET COLS="10%,*,300,3*">

Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupar el 10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego quedan 800-384, 416 pixels libres. Los otros se repartirn este espacio en funcin de los asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 pixels. Lo ms recomendable es dejar un marco con tamao calculado, o sea, con el asterisco para. Y bueno si queremos que los marcos se distribuyan de una forma algo ms irregular podemos aprovechar la posibilidad de anidarlos, en otras paralbras: un marco puede contener una pgina que a su vez ontenga otros marcos. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que as:
<FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.htm"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="superior.htm">

<FRAME NAME="ejemplos" SRC="principal.htm"> </FRAMESET> </FRAMESET>

El resultado del anidamiento lo podris contemplar aqu. Frameset tiene an dos parmetros extras: frameborder y framespacing, el primero permite eliminar los bordes que separan a todos los marcos, mientras que el segundo permite controlar el ancho del espacio que separa los marcos arriba Etiqueta FRAME Esta es la etiqueta que nos permite describir como debe ser cada marco Los parmetros que soporta son: Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace. SRC Indica la URL del documento HTML que ocupar el marco. NORESIZE Evita que el usuario pueda cambiar el tamao del marco. Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los FRAMEBORDER contiguos tienen borde ste se ver). Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecern SCROLLING si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas. Permite cambiar los mrgenes horizontales dentro de un marco. Se MARGINWIDTH representa en pixels. MARGINHEIGHT Igual al anterior pero con mrgenes verticales.
NAME

arriba Marcos flotantes <IFRAME> Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente soportados por todos los navegadores. La idea de este elemento ideado por Explorer, sigue siendo la misma: incluir una pgina externa dentro de otra, pero en este caso el marco puede quedar totalmente integrado en la pgina contenedora. Es como un include. La descripcin de este elemento es muy parecida a los frames: es necesario decir de donde viene la pgina y como se ha de ver el marco (bordes, mrgenes scroil...) Esto se hace mediante los parmetros ya vistos:
NAME ALIGN

Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace. Alineacin del marco respecto al texto que lo rodea (botton, right, left, middle)

Indica la URL del documento HTML que ocupar el marco. HEIGHT Altura del marco WIDTH Anchura del marco FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece Coloca o no las barras de scroll. Su valor es por defecto AUTO, SCROLLING aparecern si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas. Permite cambiar los mrgenes horizontales dentro de un marco. Se MARGINWIDTH representa en pixels. MARGINHEIGHT Igual al anterior pero con mrgenes verticales. Si es true La pgina origen puede tener como color de fondo allowtransparency transparent.
SRC

arriba Acceso a otros marcos Si lestes la seccin dedicada a los enlaces recordars que cuando pulsas un enlace en la ventanda del navegador aparecer otra pgina, pero podamos colocar el atributo target para hacer que la nueva pgina se abriera en otra ventana. Pues bien esta otra ventana puede ser otro marco. As en un marco puedo colocar un enalce que abra la pgina en otro marco de la misma pgina. Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el ltimo modificaremos el marco en el que por defecto se nos muestran todos los enlaces.Para indicarle el marco que deseamos le asignaremos el nombre del mismo. As, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">

Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TARGET: _top Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin marcos. _blank Muestra la nueva pgina en una ventana nueva y sin nombre del navegador. _self Muestra la nueva pgina en el marco donde est declarado el enlace. _parent Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin entre los marcos ejemplo y principal y mostrara en ese nuevo marco la nueva pgina.

Los Estilos CSS

Hojas de estilo Clases Bloques <SPAN> y <DIV> arriba

Hojas de estilo Las hojas de estilo intentan separar el contenido de un pgina de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una prrafo nuevo con una separacin del anterior determinada, etc.. Con las hojas de estilo tambin podremos decirle a un prrafo que todo su texto sea verde y que adems va a tener un margen izquierdo de 30 pixels. Por ejemplo. El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin embargo, como el estndar ms comunmente aceptado de sintaxis de hojas de estilo es el de cascada, ser este el nico que veamos. Vamos a empezar con un ejemplo:
<STYLE TYPE="text/css"> P {color: green; margin-left: 30;} </STYLE>

Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo ser <STYLE>, que slo podr estar situada en la cabecera de la pgina. Su parmetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deber ser text/css. Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Ser <P>. Despus, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels. Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre maysculas y minsculas. Conviene tener cuidado. El HTML 4.0 permite declarar fuera de la pgina las hojas de estilo, llevando de este modo al extremos su filosofa de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos ms que incluir la siguiente lnea en la cabecera de nuestro documento HTML para incluirlas en nuestras pginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">

Vamos a ver cmo quedara un prrafo que siguiese la hoja de estilo anterior Si la cosa va bien, este prrafo estar escrito en verde y con un margen izquierdo de 30 pixels. Precioso, no? embargo, estoy convencido de que los ms avispados se habrn dado cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalizacin de una etiqueta debera ser general y en esta pgina slo este prrafo est modificado. No os preocupis demasiado, ahora os cuento como se hace. arriba Clases Hasta ahora habamos definido estilos para una etiqueta determinada. Pero tambin podemos hacerlo para una clase determinada. Esto que significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}

slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos con <P CLASS="verde">. As de sencillo. Ampliando un poco ms las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos prrafos que queremos que tengan unos mrgenes determinados y color verde. Y deseamos que uno solo de esos prrafos, con los mismo mrgenes, sea azul. Podramos definir dos clases distintas, pero hay un mtodo mejor: usar el parmetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;} #ej1 { color: blue;}

Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen de 10 pixels. Sin embargo el prrafo definido por <P CLASS="verde" ID="ej1"> ser azul: Este prrafo es muy verde. Y anda que este... Sin embargo, este no, fjate que curioso. arriba Bloques SPAN y DIV Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos acte slo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, qu hacemos? Utilizar las etiqueta <SPAN> y <DIV>.

El mtodo es simple. Definimos una clase rojo que simplemente modifique el color (que ser rojo). Ahora, si queremos que una seccin de texto est en rojo lo encerraremos entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV CLASS="rojo"> y </DIV>. La diferencia entre ambas es que, mientras SPAN realmente no hace nada por s misma, DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de lnea tanto al comienzo como al final). Veremos en el siguiente captulo que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un prrafo entero) se les pueden definir atributos propios desde las hojas de estilo. Por ejemplo, si definimos las siguientes hojas:
all.titulo { margin-top: -24px; color: blue; font-size: 20px; } all.sombra { margin-top: 2px; margin-left: 2px; color: black; font-size: 20px; }

cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente cdigo HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV> <DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>

obtendremos este tpico efecto sombra:

El maravilloso curso de HTML El maravilloso curso de HTML

En el siguiente captulo tenis una gua de referencia con todos (o casi todos) los atributos que se pueden modificar con CSS. Sonido

Esta pgina me suena Sonido manual Sonido de fondo arriba

Esta pgina me suena Siempre hemos oido que las pginas web y que internet se aprovecha de la tecnologa multimedia, que si puedes oir msica y ver vdeos. Pues bien el elnguaje HTML, repetimos, es un lenguaje par definir documentos de hipertexto y soporta por tanto

elementos multimedia como puede ser sonido. Los navegadores mayoritarios son capaces de ejecutar piezas musicales desde una pgina web, algo de lo que algunos webmaster abusan despiadadamente. Hasta hace no mucho tiempo el colcoar una pieza de msica en una pgina se pagaba con tiempos de carga muy elevados (el navegador no solo tena que subir la pgina con sus imgnes y texto, sino tambin el archivo de sonido). Pero actualmente la extensin de las redes de alta velocidad ha casi eliminado este problema. Aunque si decides colocar msica en tu pgina piensa en que el visitante quizs no quiera oir msica o prefiera escuchar la radio o sus propios CD,s, por tanto dale siempre la oportunidad de hacer callar a la pgina. Los formatos de sonido que sern reproducidos por cualquier navegador son los WAV y MID. Aunque otros formatos tambin sern reproducidos previa carga del correspoindiente plugin, como Real Audio o Quicktime. arriba Sonido manual Una forma muy simple de ejecutar un sonido es mediante un enlace que llame alk archivo de sonido, el sistema operativo llamar a la aplicacin asociada y ese sonido se escuchar. Pero se lanzar la aplicacin asociada. Por ejemplo:
<A HREF="ringin.wav">El telfono?<A>

No est mal, al menos el asunto suena. Pero claro con una aplicacin asociada de por medio. arriba Sonido de fondo Pero hay otra manera: el sonido de fondo, un sonido que suena al cargar la pgina. El navegador de Microsoft, desde la versin 2.0, utilizaba la etiquea BGSOUND:
<BGSOUND SRC="musica.mid">

Su parmetro SRC indicar el archivo a reproducir. Tambin podemos permitir que se repita un cierto nmero de veces mediante el parmetro. Si se indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras estemos en la pgina. Para detener la msica o cambiar de melodia debamos hacer uso de Javascript. Los exploradores actuales usan la etiqueta <EMBED>, que tiene los siguiente parmetros: Utilidad SRC Contiene el nombre de archivo de sonido a reproducir WIDTH y HEIGHT Tamao de los controles del reproductor que aparece en la pgina. AUTOSTART="true" Arranca automticamente la reproduccin. Parmetro

LOOP="true" HIDDEN="true"

Reproduce ininterrumpidamente el fichero hasta que salimos de la pgina. Oculta el reproductor.

Pero el problema del plugin vuelve a aparecer tambin con este mtodo, puede ocurrir que el ordenador cliente lance su aplicacin para hacer sonar el fichero cargado. Y como suena esto? pues este ejemplo os lo muestra. Trucos HTML Aqu pretendemos ofrecerte soluciones para problemas que suelen presentarse a la hora de crear una pgina web. Conocer todas las etiquetas del lenguaje HTML no siempre garantiza un uso ptimo. Esta es la razn de este apartado. arriba Flash al fondo de la pgina Los objetos flash en las pginas web se empean en colocarse en primer plano con lo que ocultan mens desplegables y otros elementos de la pgina. Para evitar esto basta con aadir al objeto flash el argumento:
<param name="WMODE" value="TRANSPARENT">

El objeto flash no ocultar los elementos dinmicos. arriba Esconder tu email Existen robots que se dedican a recorrer las pginas web extrayendo las direcciones de correo, a las que luego inundarn con mensajes spam. Existe un truco muy sencillo para evitar esto sin dejar de mostrar nuestra direccin en la pgina: crear una imagen gif o jpg con nuestra direccin email. Quien desee enviarnos un email deber leer nuestra direccin y escribirla a mano en el mensaje creado con su programa de correo.
Trucos HTML Aqu pretendemos ofrecerte soluciones para problemas que suelen presentarse a la hora de crear una pgina web. Conocer todas las etiquetas del lenguaje HTML no siempre garantiza un uso ptimo. Esta es la razn de este apartado. arriba

Flash al fondo de la pgina Los objetos flash en las pginas web se empean en colocarse en primer plano con lo que ocultan mens desplegables y otros elementos de la pgina. Para evitar esto basta con aadir al objeto flash el argumento: <param name="WMODE" value="TRANSPARENT">

El objeto flash no ocultar los elementos dinmicos. arriba

Esconder tu email Existen robots que se dedican a recorrer las pginas web extrayendo las direcciones de correo, a las que luego inundarn con mensajes spam. Existe un truco muy sencillo para evitar esto sin dejar de mostrar nuestra direccin en la pgina: crear una imagen gif o jpg con nuestra direccin email. Quien desee enviarnos un email deber leer nuestra direccin y escribirla a mano en el mensaje creado con su programa de correo. arriba

Celda como enlace Una celda de una tabla puede convertirse en un enlace activo de la manera ms simple, basta con colocarla dentro de <a href> </a>. Ejemplo <table><tr><a href="sitio"><td>enlace</td></a> <td>otra celda</td> As de fcil, ahora la celda completa es un enlace. arriba

Dimensiones exactas Para lograr que una fila o una columda tenga una altura o anchura exacta, o para separar dos elementos una distancia fija, utiliza una imagen gif transparente de un slo pixel. Luego asignale la anchura o altura que desees. Por ejemplo <table><tr><td><img src="punto.gif" height="5"></td></tr> Esa celda poseer una altura exacta de 5 pixels. arriba

Caja de esquinas curvas Puedes crear una caja de esquinas curvas usando el elemento fieldset de los formularios. Ejemplo

<fieldset> contenido de la caja con esquinas curvas sin tablas!!! </fieldset> Y no es necesario usar tablas. arriba

Sonido de fondo Se puede hacer que suene una msica mientras los visitantes visitan la Web, o bien colocar una meloda a modo de presentacin. Guarda el sonido en el directorio raz de tu servidor. el cdigo HTML es el que sigue: <BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true"> Los sonidos en formato "midi" ocupan menos espacio y por tanto se cargan antes. arriba

Archivos para descargar Si queremos que los visitantes puedan descargar algn archivo solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web un enlace al mismo: <a href="archivo.exe">Descripcin del enlace </a> Ahora cuando el visitante pulse sobre ese enlace el navegador abre el dilogo de abrir o guardar el archivo. Lo habitual es usar arvhivos comprimidos en formato zip, de esta manera la descarga es ms rpida y se puede bajar cualquier tipo de archivo (previamente comprimido).

Guia de estilo

El sitio web Contenido Navegacin Estructura de las pginas Accesibilidad Diseo Mantenimiento

arriba El sitio web La elaboracin de sitios web es una tarea bastante personal, es casi un arte, y al final cada webmaster se desarrollar su propio estilo, una especie de firma intangible que baa todas sus pginas. Existen en la red multitud nde guas de estilo que ayudan al principiante, y al no tan principiante, a evitar errores comunes y a lograr pginas de cierta calidad. Por eso no quiero cerrar este cursillo sin un captulo dedicado a la forma de hacer buenos sitios web. Al menos desde el punto de vista de un webmaster que lleva algn tiempo en esto. Ojo, no es un captulo de recetas para resolver problemas concretos, es ms bien un resumen, que pretende servir para que quien las lea se plantee las cosas antes de lanzarse alegremente sobre su editor para crear su magnfico sitio web. En Creatuweb existe toda una seccin dedicada este tema, mucho ms detallada y completa, por tanto esto os debe servir tan solo de aperitivo antes de visitar esas otras pginas. arriba Contenido Todos hemos visto pginas horribles en cuanto a diseo y estructura, pero cuyo contenido nos ha sido lo bastante til como para obligarnos a detenernos en ellas. Aunque luego apenas hallamos vuelto a visitarla. Quiero decir que el contenido de una pgina es bsico para que alguien la visite. No esperemos que por publicar las fotos del botelln del viernes vamos a atraer a millones de visitas. Cualquier pgina ser visitada si su contenido es interesante. As que lo primero es pensar que tenemos que decir, si es que tenemos algo que decir. A la mejor a mi me gusta coleccionar rabillos de boina, pero crees que eso puede interesar a mucha gente? Sin embargo si he peleado con Linux desde su nacimiento y lo conozco como el padre que lo pari, seguro que mi pgina con el tiempo llegar a tener una gran difusin... y puedo sacarle provecho. El Linux hoy en da es un producto muy en alza. Ahora si que podras usar esa plataforma para colocar tu pgina personal, en la que podras publicar, por ejemplo, tu curriculum, algo que por si slo no atraera a demasiados visitantes. Y claro ya que el visitante ha llegado a tu pgina no dejes que se vaya para siempre. Haz que tu sitio sea un referente, por ejemplo con una pgina de enlaces a sitios que traten del mismo tema que la han trado hasta aqu. Para muchos visitantes tu pgina sera una lista de favoritos. O sea, ser til al visitante. Ah, y nunca, nunca coloques pginas vacas. Eso de pgina en construccin suele ser bastante irritante. Ponte en el lugar del visitante, llega a tu sitio convencido de haber encontrado lo que buscaba y se encuentra con una pgina con el cartelito de En Construccin. Lo normal es que no regrese.

arriba Navegacin Si quieres que los visitantes recorran tu sitio y descubran lo bueno que es faciltales la navegacin, procura que lleguen a donde quieran ir en un par de clicks. No le hagas volver a la pgina principal cada vez que quiera ir a una u otra seccin. Esto lo puedes logar con una buena barra de navegacin, un men sencillo e intuitivo al que pueda acceder est donde est. Una barra o men de navegacin debe contener como mnimo un enlace a la pgina principal, y uno a cada seccin o subseccin del sitio. La barra la puedes construir mediante javascript, mediante un frame ndice o colocando en todas las pginas el cdigo HTML de esa barra. Tampoco est de ms disponer de un enlace a una pgina con el mapa del sitio. Lo ideal es ver como la gente se mueve por tus pginas, mira como se distribuyen las visitas por tu sitio y facilita el acceso a las menos visitadas. Si ves que an as no aumentan las visitas examnalas por que a lo mejor no interesan. En cuanto a las ms visitadas, coloca sus enlaces de forma muy accesible. Ah, y ojo con los enlaces rotos. Procura repararlos cuanto antes, es como una casa descuidada. arriba Estructura Dale una estructura lgica a tu sitio. Un sitio web no es tan solo la suma de todas sus pginas, es tambin el como se relacionan entre s. Una serie de temas secuenciales como este cursillo puede tener una estructura secuencial: est pensada para que las pginas sean vistas una tras otra, sin saltos. No est de ms un botn de pgina adelante y pgina atrs en cada tema, pero sin quitarle al usuario la posibilidad de saltar a un tema especfico en un momento dado. Ojo con las pginas excesivamente largas. Aunque el aumento de la velocidad en internet ha permitido superar con creces los hasta hace no mucho recomendados 20 Kb por pginas, si un usuario tiene que desplazar el botn de scroll hasta el suelo es fcil que se vaya a un sitio ms cmodo. Si lo que ve en la parte superior de la pgina no le atrae es probable que no pulse en el scroll vertical, y si este es largo... Procura que en la primera parte de tu pgina haya informacin suficiente sobre el contenido de la misma. Recuerda que, salvo excepciones, a casi nadie le apetece leer en el monitor. Procura dividir tu sitio en secciones o zonas con un nmero suficiente de pginas, no intentes meter una seccin completa en una pgina. Ah, y ojo con esas splash pages, esas pginas de acceso que solo contienen un botn de entrar y una bonita imagen. Puede que en algn caso sea necesaria, pero quien llega a un

sitio buscando una solucin quiere ir directo al grano. En muchas ocasiones estas pantallas de presentacin se construyen con Flash y enlentecen innecesariamente la carga, en estos casos siempre se agradece el botn de saltar la presentacin (skip intro). arriba Accesibilidad No hagas demasiadas presunciones sobre los medios de acceso a tu pgina. Puedes presuponer que usarn un monitor en color, pero poco ms. As que procura que tus pginas puedan verse bien en cualquier navegador y con cualquier resolucin. Adems si tu tienes una magnfica ADSL de 8 Mb/s puede que muchos de tus visitantes se conecten con un modem de 56 Kb/. Lgicamente acertar con esto es ms difcil cuanto ms amplia sea tu audiencia. Puede que para mejorar el acceso algunos visitantes desactiven la presentacin de grficos, prevve esta situacin colocando en todas tus imgenes lel parmetro ALT . No abuses de los plugins, muchos usuarios puede que anden con ordenadores limitados en recursos y no quieran esperar a la carga de un pesado applet en Java o una presentacin en Flash, si puedes hacerlo con HTML y alo sumo con Javascript, hazlo. arriba Diseo Al principio decamos que una pgina con un buen contenido era imprescindible par atraer visitas. Pero no cabe duda de que estas visitas estarn ms tiempo y regresarn si encuentran un lugar, no solo cmodo como hemos visto, sino agradable a la vista. Algunos grficos bien situados, sin abusar, junto a unos colores nada agresivos pueden hacer que elijan tu pgina antes que la del vecino en la lista de enlaces de un buscador. Si usas una imagen de fondo procura que no moleste la lectura y que no distraiga. Cuidado tambin con los colores de texto y de fondo, busca el mximo contraste. Si tienes que destacar algo puedes usar algn grfico animado discreto, visualmete pesan mucho y distraen. Claro que si estas diseando una pgina infantil estos elementos son fundamentales. Evita en lo posible los bordes en las tablas, una pgina muy fragmentada se ve mal. Si usas bordes intenta que sean discretos y solo los imprescindibles. En cuanto a los frames, si no tienes ms remedio usalos pero recuerda que las pantallas de los monitores tienen una superficie limitada. Procura no colocarles bordes ni las barras de scroll. arriba

Mantenimiento Si has programado alguna vez sabe que el trabajo no termina cuando el programa est en marcha. Y si no has programado nunca tambin deberas saberlo, basta con que te fijes en la versin actual de tu navegador y la versin del mismo aue corra el ao pasado. Cualquier producto informtico acaba realmente en un continuo proceso de mantenimiento, comprobar que todo funciona y mejorar todo lo mejorable y como no hay nada perfecto ... todo es mejorable. Comprobar porqu una seccin no es demasiado visitada, o actualizar la lista de enlaces o tantos detalles son algunas de las tareas que el webmaster no puede olvidar. En este sentido una buena costumbre es colocar encuestas que permiotan a tus visitanes opinar o calificar algunos aspectos de tu sitio. El visitante siente que cuenta para el autor de las pginas y te puede ayudar a ver ese error en el que tu no habas cado. Tampoco est de ms mostar la fecha de la ltima modificacin que hicistes a tu pgina, el usuario sabe si la informacin de tu sitio es actual o ya est superada. Deja alguna zona de tu portada para publicar las novedades que vayas incorporando a tu sitio o para publicar las secciones ms interesantes, las que quieras difundir ms. Y recuerda que en el area principal de Creatuweb tienes una guia bastante ms completa que este pequeo resumen. arriba Enlaces de inters

Ms HTML Ms JavaScript Ms CSS Otras tecnologas arriba

Ms HTML W3C Comit que dicta las normas para un HTML estndard Lo Sublime Otro sencillo manual sobre HTML Metatags Un interesante artculo sobre las Metatags

arriba Ms Javascript JavascriptDesdeCero MundoJavascript DynamicDrive Un interesante manual repleto de scripts, trucos y soluciones Otro excelente lugar para obtener scripts Excelente lugar para HTML dinmico

(ingls)

arriba Ms CSS ASP tutor: CSS Por si quieres saber ms sobre las CSS Tejedores:CSS Ms sobre CSS esta vez en Tejedores del Web

arriba Otras tecnologas PHP El sitio oficial de PHP Programacin PHP Programacin PHP en castellano