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. Mira 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
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

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 le falta el contenido, pero todo llegar.</P> pgina web, aunque

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.

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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd"> Cumple el estndar HTML 4.0 <!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 servidor http://www.misitio.com relativas se encontrarn dentro del

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 KEYWORDS GENERATOR
Autor de la pgina.

Content

CLASSIFICATION Palabras que permite clasificar la pgina dentro de un buscador jerrquico (como Yahoo).
Palabras clave por las que encontrarn la pgina en los buscadores. Google no le hace mucho caso. 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:

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. Content-Language 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 Refresh automticamente y la pgina a la que debe ir. Ambos datos se separan con un punto y coma.

HTTP-EQUIV

expires pragma

Content-Type

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.

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
<P>

Significado
Sirve para delimitar un prrafo. Inserta una lnea en blanco antes del texto. Justificar el texto del prrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos mrgenes (JUSTIFY html4 )

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 Estoy en paso fijo

<p ALIGN=x> ... </p> <CENTER> ... </CENTER> <PRE WIDTH=x> ... </PRE>

Permite centrar todo el bloque de texto encerrado. Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parmetro WIDTH especifica el nmero mximo de caracteres en una lnea.

<BLOCKQUOTE> ... </BLOCKQUOTE>

Mete sangras de prrafo tanto a derecha como a izquierda. Suele usarse como tabulador

Si quieres ver el texto indentado por ambos mrgenes usa el Blockquote.

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> <H6> ... </H6>

Cabecera de nivel 4
Cabecera de nivel 6

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

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>

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.

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

<SMALL> ... </SMALL>

Disminuye el tamao del tipo de letra.
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>
Cdigo

Significado
Cita, por ejemplo de un texto

Efectos
Esta frase no es ma

int x=0;
Hay cosas importantes.

Fuerte, negrita.

<EM> ... </EM> <KBD> ... </KBD> <VAR> ... </VAR> <SAMP> ... </SAMP>

Enfasis. Teclado Representar variables de un cdigo. Para representar una serie de caracteres literalmente.

Para poner nfasis El usuario debe teclear Multivac es el mejor. La variable x, definida anteriormente... Estoy en un literal

<ABBR> ... </ABBR>

Abreviaturas. 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:

Etiqueta
<BR> <HR>

Significado
Barra horizontal.

Resultado

Cambio de lnea. Simple salto de linea

<!-- ... --> Comentarios.

No se ve el contenido

Caracteres especiales
Si habis estudiado o ledo algo acerca del modo de funcionamiento de los ordenadores y la informtica, casi seguro que sabis que la informacin que introduces en el ordenador est codificadaes decir, escrita de alguna manera que sea entendible para la mquina. En relacin con esto habris topado con unas siglas algo extraas cdigo ASCII, que no es ms que una forma de codificar los caracteres asignando a cada uno un valor numrico. Sin entrar en ms detalles resulta que el cdigo ASCII solo tiene 128 smbolos, pero existe una extensin del cdigo que llega a los 256 smbolos, aunque slo estn normalizados los 128 primeros, los restantes se usan para caracteres extraos como nuestra o la o el , o las letras acentuadas. Es decir que todo lo que no sean caracteres ingleses quedan codificados con cdigos ASCII por encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos de caracteres para mostrar las pginas, juegos que se adaptan a las particularidades de cada idioma.

Caracteres extendidos en HTML

Cualquier caracter, especial o no, puede mostrarse en una pgina usando su cdigo ASCII, es decir, el nmero que tiene asignado, encerrado entre &# y ;. Por ejemplo el smbolo @ tiene como cdigo ASCII el 64, as podemos representarlo como:

&#64; Si usasemos el nmero 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres especiales tienen sinnimos que nos facilitan su insercin en las pginas web:

Cdigo
&ntilde; y &Ntilde; &iquest; &iexcl; &ordm; &ordf; &trade; &copy; &reg;
y

Resultado

&aacute;, &Aacute;, &eacute;, &Eacute;,... , , , , , , , , y

&nbsp;

Espacio en blanco

Caracteres reservados
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parmetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente cdigos:

Cdigo Resultado
&lt; &gt; &amp;
< > &

&quot; "
Aqu tienes una tabla completa de caracteres especiales

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.

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.

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 mshumanos 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 https ftp

Es el protocolo para la transmisin de documentos HTML, es decir, el que habitualmente usamos para ver las pginas en nuestro navegador. Es similar al anterior pero con la particularidad de que la informacin viaja codificada mediante tcnicas de encriptacin. 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 news Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de correo. 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. 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.

telnet

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>

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.

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 <LI>Luisa </UL> se ver como

Pedro

Juan Pedro Luisa

A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:

Parmetro
COMPACT

Significado
Indica al navegador que debe representar la lista de la manera ms compacta posible.

Resultado

Primer elemento Segundo elemento

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>.

Tipo disc Tipo circle Tipo square

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. 2. Primer elemento Segundo elemento

El HTML 3.2 admite estos parmetros para la etiqueta <OL> :

Parmetro
COMPACT

Significado
Indica al navegador que debe representar la lista de la manera ms compacta posible.

Resultado
1. 2. Primer elemento Segundo elemento Tipo 1 Tipo a Tipo A Tipo i Tipo I Primer elemento Segundo elemento

TYPE="1", "a", "A", "i", "I"

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

1. b. C. iv. V. 3. 4.

START="num"

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

1.

Primer elemento Segundo elemento Tercer elemento

VALUE="num"

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

4. 5.

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 Java

Es un lenguaje de definicin de pginas web. 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>.

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">

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 <img alt="Tema </a> Se ve as: 1"

href="tema1.htm"> src="/imgs/im_crear/indice2.png" width="45" height="30">

Sin embargo, <a href="tema1.htm"> <img alt="Tema 1" width="45" height="30" BORDER="0"> </a> Se ve as:

src="/imgs/im_crear/indice2.png"

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.

Muestra

Este es el texto

MIDDLE

Alinea el punto medio (en altura) de la imagen con la base del texto. Este es el texto

BOTTOM

Alinea el punto ms bajo de la imagen con la base del texto. Este es el texto Coloca la imagen a la izquierda del texto. Este es el texto y esta es otra lnea

LEFT RIGHT

Coloca la imagen a la derecha del texto.

Este es el texto y esta es otra lnea

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.

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 Ests Si No
Enviar Borrar

nombre: registrado?

<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 parmetroENCTYPE="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.

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:

Parmetro
SIZE VALUE

Significado
Tamao en columnas de la caja de texto.

MAXLENGTH Nmero mximo de caracteres que se pueden teclear.

Texto por defecto que aparecer en el campo.

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.

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

Significado
Este es el valor que asignar a la variable.

CHECKED

Si lo indicamos en una de las opciones esta ser la que est activada por defecto.

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:

Espaol

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

Significado
Este es el valor que asignar a la variable.

SELECTED

La opcin con esta propiedad ser la que aparezca seleccionada por defecto.

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:

Enviar

<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

Restablecer

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.

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 parmetro CHECKED.

control

est

activado

por

defecto

le

aadiremos

el

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.

Controles avanzados en formularios

Con lo que has visto en la seccin anterior de formularios podrs perfectamente incoiporar estos elementos de interaccn a tu pgina web, pero los navegadores modernos (MSIE 5+ y Netscape 6+) permiten el uso de algunas caractersticas extras aladidas por el estandard HTML 4.0, caractersticas que bsicamente mejoran la esttica y facilitan el uso de estos elementos.

Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite enriquecer la etiqueta de texto que hasta ahora tenan los botones de formulario. Ahora estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con un texto. POr ejemplo el siguiente cdigo

<BUTTON TYPE="button"> Inicio <img src="imgs/im_crear/bolamas.gif" nicio width="10" height="10"> </BUTTON> Los parmetros de dicha etiqueta son TYPE, defecto), RESET y BUTTON, NAMEy VALUE. que podr tomar los valores SUBMIT (por

Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir ahora el texto que suele acompaar a los campos que debe rellenar el usuario son solo eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y podemos seleccionar ste pulsando sobre la etiqueta. Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el mismo valro que este for <INPUT ID="Curso" TYPE=CHECKBOX> <LABEL for="Curso"> Me gusta este curso </LABEL> Compara con este otro ejemplo aparentemente igual al anterior.

Me gusta este curso

<INPUT NAME="Curso" TYPE=CHECKBOX> Me gusta este curso/a

Me gusta este curso

En el primer caso el click sobre la etiqueta actua igual que sobre el control.

Agrupando elementos
HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrndolos dentro de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un rectngulo con el ttulo que le demos mediante la etiqueta LEGEND. <FIELDSET> <LEGEND>Tus datos</LEGEND> <LABEL> Tus datosNombre: Nombre: <INPUT TYPE="text" name="nombre"> <br>Edad: Edad: <INPUT TYPE="text" name="edad"> </LABEL> </FIELDSET> La posicin del ttulo (LEGEND) puede controlarse usando el parmetro ALIGN, que por defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT (derecha) .

Desactivando elementos
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario que los sobreescriba. Se seguirn mostrando en pantalla, aunque con un aspecto distinto para indicar que no son editables. Para ello slo tenemos que indicarle el parmetro DISABLED: <LABEL DISABLED>Origen: <INPUT TYPE=TEXT DISABLED> </LABEL>

Origen:

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.

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

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.

RECT CIRC POLY

Toda la imagen

DEFAULT No se necesitan

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.