Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.

com

Tipo MIME Video/quicktime Video/msvideo

Extensiones correspondientes Qt mov Avi

4. Los Uniform Resource Locators (URL)

En los documentos HTML las direcciones se indican como valores de atributos de los diferentes tags HTML. El nombre de estos atributos puede ser, por ejemplo, SRC o HREF. Los valores de los atributos son variables de carcter que representan lo que se denomina URL. Un URL (Uniform Resource Locator) se compone de varias partes que guardan una relacin entre s variable segn correspondan a un tipo de protocolo o a otro. Sin embargo, de manera general puede decirse que un URL consta de una serie de cinco componentes como mximo: Indicacin del protocolo de la aplicacin (simultneamente palabra clave respecto a la sintaxis). Indicacin de una direccin del ordenador remoto (host). Puerto de comunicacin a emplear. Ruta de acceso y nombre de archivo. Otros datos. Todos estos componentes deben estar separados entre s por algn carcter o conjunto de caracteres. El segundo componente del URL (direccin del host) puede indicarse tanto en forma de nmero IP como de nombre dominio. A veces puede ser obligatorio completar la direccin del host indicando tambin el nmero de puerto y el nombre de usuario con la correspondiente contrasea. En los siguientes componentes se especifican las particularidades sintcticas de los URL relacionados con los protocolos ms importantes. La URL de un documento ofrecido por un servidor HTTP empieza siempre indicando el protocolo que se ha de utilizar, esto es, "HTTP". A continuacin de este dato y separada por una doble barra transversal "//" se escribe la direccin del ordenador. Con el protocolo HTTP en principio consta simplemente del nmero IP o el nombre de dominio. Si se desea se puede indicar tambin un nmero de puerto, separado de la direccin en s del ordenador por dos puntos ":". Si se omite este ltimo dato, se utiliza el puerto estndar del protocolo HTTP, es decir, el puerto 80. El siguiente componente de la direccin est formado por la ruta de acceso y el nombre de archivo que se solicita por HTTP. La ruta se escribir separada de la direccin del ordenador por una barra transversal "/". Los nombres de los directorios de la ruta tambin se deben escribir separados por una barra transversal "/" y no por el conocido backlash o barra invertida de MS-DOS: "\". Si se omite la ruta
Pgina 10 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

de acceso puede suceder que como respuesta a la consulta se obtenga un documento estndar. Por ltimo, el URL de HTTP puede contener otros datos que o bien se han de transmitir a la direccin de destino o bien son indicaciones de posicin para el browser. En este ltimo caso se trata del nombre de un ancla en el documento solicitado. Este nombre debe ir separado del resto del URL por el carcter especial "#". No se transmite al servidor, ya que slo es importante para decidir qu parte del documento debe ser presentada por el browser. Tambin es posible indicar datos destinados a programas CGI que se desarrollen en el servidor. Este tipo de informaciones deben ir separadas del resto del URL con un signo de interrogacin. Con browsers WWW se puede acceder a informaciones transmitidas con otros protocolos diferentes de HTTP. La tabla siguiente contiene la descripcin de algunos URL permitidos en la WWW. Nombre FTP FILE Gopher mailto NNTP telnet Ejemplo-URL ftp://user:password@ftp.serc.es/dir/prg .exe File:///unid:\directorios\fichero.e xt Gopher://goph.edu mailto:user@host.es nntp://host.es/group telnet://user:password@host.es

Pgina 11 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

B. Diseo de documentos con HTML

1. Nociones fundamentales sobre la sintaxis HTML 2. Documentos sencillos. 3. Listas. 4. Imgenes y enlaces. 5. Formularios. 6. Tablas. 7. Mapas de imgenes. 8. Frames (marcos). 9. Meta elementos. 10. El futuro de HTML.

Pgina 12 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

B. Diseo de documentos con HTML

Los documentos fundamentales de la WWW son los hipertextos. Los archivos correspondientes tienen la extensin HTML o HTM. La especificacin HTML determina que estos archivos deben ser textos ASCII de 7 bits. Por eso no es posible "esconder" las informaciones que sirven para controlar el diseo del documento en caracteres no representables. Observando un documento HTML con un editor normal se puede ver tanto el contenido del documento como los comandos de formato. La sintaxis exacta de estos comandos de formato se define en las "Document Type Definitions" (DTD), basadas en el lenguaje de declaracin SGML. No obstante, hay que hacer hincapi en que todos los trabajos de la definicin de este tipo de normas siguen, en general, el desarrollo de los programas de casas como Netscape y Microsoft, de modo que la autntica realidad de HTML no puede estar recogida totalmente en los documentos DTD existentes. Puesto que una exposicin detallada de esta problemtica no es posible dentro del marco de este captulo de introduccin, si te interesa ms a fondo el tema, puedes consultar la bibliografa especializada sobre el tema HTML, as como las pginas web del Consorcio de las tres W1.

1. Nociones fundamentales sobre la sintaxis HTML

Los comandos HTML se encuentran en los documentos (que, como ya se ha dicho, constan de puro texto ASCII de 7 bits) separados del texto por parntesis angulares. La expresin que se encuentra entre estos parntesis, es decir, entre el signo de "menor que" (<) y el signo de "mayor que" (>) se denomina tag HTML. El tag en s consta de una palabra clave y eventualmente, otras informaciones que forman los atributos del tag. Los tags, que sirven para el diseo de las diferentes partes del texto, suelen aparecer por parejas. En ese caso, se diferencia entre el tag inicial y el tag final correspondiente que contiene la misma palabra clave que el tag inicial pero precedida por el carcter "/". En los tags finales no tiene sentido introducir atributos y por lo mismo, no estn previstos en ellos. Cada elemento HTML formado por un tag inicial y un tag final del modo descrito se denomina continer, ya que puede contener texto y otros elementos HTML. Las definiciones sintcticas oficiales de HTML prevn que en algunos containers pueda suprimirse el tag final. Esta medida resulta especialmente adecuada para aquellos elementos que finalizan implcitamente con el inicio de un elemento similar, por ejemplo en los prrafos <P> o en las entradas de lista <LI>.
1

http://www.w3c.org Pgina 13 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

Adems del continer, HTML cuenta con otros elementos que aparecen siempre en solitario, es decir, sin tag final y que, por lo mismo, no pueden contener texto ni otros elementos HTML. Este es el caso de los saltos de lnea <BR> y de las imgenes vinculadas <IMG >. Los continers HTML deben formar un mosaico coherente. As no est permitido seleccionar una entrada de lista con <LI> si el texto correspondiente no forma parte de una lista que no pueda ser enmarcada, por ejemplo, con <UL></UL> o <LO></LO>. Las normas para el correcto anidamiento se encuentra asimismo en los documentos DTD. En los apartados siguientes se vern los aspectos fundamentales a travs de ejemplos tpicos.

2. Documentos sencillos
El marco externo de un documento HTML es siempre un elemento HTML que contiene un HEAD y un BODY. De ese modo la cabecera del documento, que al igual que el elemento TITLE puede contener otras informaciones no representables, queda separada del cuerpo del mismo. El contenido del elemento TITLE no se muestra como parte del documento sino que aparece en la barra de ttulos de la ventana principal de Internet Explorer o Netscape Navigator. Se pueden seleccionar seis tamaos diferentes de ttulos. Estos tamaos corresponden a los elementos H1 a H6. Con el elemento HR se crea una lnea horizontal. Los diferentes prrafos van sealados con el elemento P. Finalmente, con el elemento <BR> se pueden forzar saltos de lnea. El uso de los comandos bsicos HTML, que se acaba de mencionar queda ilustrado en el siguiente documento de ejemplo:
<HTML> <HEAD> <TITLE>documentos sencillos</TITLE> </HEAD> <BODY> <H3>documentos sencillos</H3> <H1>parte 1</H1> <HR> documentos sencillos de texto (H1 hasta H6), lneas horizontales (HR), saltos de lneas (BR) y saltos de prrafo (P). <P> Un carcter de prrafo provoca un salto vertical <BR> mientras que un salto de lnea slo provoca el inicio de una nueva lnea. <HR WIDTH="100" SIZE="10" ALIGN="CENTER"> Las lneas horizontales pueden ser personalizadas, definiendo la anchura, la longitud y la alineacin en la pgina Pgina 14 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

<HR WIDTH="25" SIZE="25" ALIGN="CENTER"> </BODY> </HTML>

Internet Explorer mostrar este documento tal como sigue:

Hay un a gran cantidad de tags para el diseo de la fuente. El siguiente ejemplo contiene los comandos ms importantes de este grupo.
<HTML> <HEAD> <TITLE>Sin ttulo</TITLE> </HEAD> <BODY> <H3>Documentos sencillos</H3> <H1>Parte 2</H1> <HR> Segmentos de textos individuales pueden resaltarse con escritura en <B>negrita</B> o <I>cursiva</I>. <P> Tambin es posible <SMALL>reducir</SMALL> o <BIG>aumentar</BIG> el tipo de letra. <P> Tambin pueden escribirse <SUB>subndices</SUB> y <SUP>superndices</SUP> <P> <CENTER> Pgina 15 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

Pantalla de textos <BR> pueden representarse centradas en la ventana de visualizacin. <BR> </CENTER> </BODY> </HTML>

En la tabla siguiente se muestran todos los tags HTML que sirven para disear la presentacin de la fuente. Algunos de los tags expuestos designan principalmente el contenido del textos seleccionado. La manera en que se representa el texto seleccionado puede variar ligeramente de un browser a otro. Tag U S TT I BIG SMALL B EM STRONG CODE Significado Texto subrayado Texto tachado Fuente no proporcional. Cursiva Texto en letra grande Texto en letra pequea Negrita Realzado Muy realzado Cdigo de programa
Pgina 16 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

Tag SAMP KBD VAR CITE Q LANG AU DFN PERSON ACRONYM ABBREV INS DEL SUB SUP

Significado Ejemplo Introduccin de datos por teclado Variable Cita Cita breve escrita entre comillas. Texto breve en otra lengua. Nombre del autor. Definicin. Nombre de una persona; este tag sirve principalmente para crear directorios de personas. Acrnimo Abreviatura Texto insertado Texto borrado o a borrar. Subndice. Superndice.

3. Listas
Con HTML se pueden realizar diferentes tipos de listas. En primer lugar mencionaremos la lista sin clasificar, marcada con el elemento UL. Cada elemento de la lista va marcado con el elemento LI e HTML.
<HTML> <HEAD> <TITLE>Listas</TITLE> </HEAD> <BODY> <H3>Listas</H3> <H1>Listas no clasificadas</H1> <HR> <H2>grupos de plantas</H2> <UL> <LI>rboles</LI> <UL> <LI>rboles con hoja de aguja</LI> <LI>rboles caducifolios</LI> <UL> <LI>Haya</LI> <LI>Roble</LI> <LI>Abedul</LI> <LI>Arce</LI> </UL> </UL> <LI> Arbustos</LI> <LI>Matorrales</LI> <LI>Flores</LI> </UL> </BODY> </HTML>

Pgina 17 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

Internet Explorer o Netscape Navigator agregan un punto, conocido como "bullet", delante de cada entrada de la lista.

Las listas cuyos elementos se numeran son listas numeradas, "ordered lists", y van sealizadas por el elemento LO de HTML. Cada una de las entradas de la lista se forma, nuevamente, con el elemento LI (List Item).
<HTML> <HEAD> <TITLE>Listas</TITLE> </HEAD> <BODY> <H3>Listas</H3> <H1>Listas no clasificadas</H1> <HR> <H2>grupos de plantas</H2> <OL> <LI>rboles</LI> <OL> <LI>rboles con hoja de aguja</LI> <LI>rboles caducifolios</LI> <OL> <LI>Haya</LI> <LI>Roble</LI> <LI>Abedul</LI> <LI>Arce</LI> </OL> </OL> <LI> Arbustos</LI> <LI>Matorrales</LI> Pgina 18 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

<LI>Flores</LI> </OL> </BODY> </HTML>

NS Navigator o MS Internet Explorer correspondiente a cada entrada de la lista:

agrega

el

nmero

En las listas de definiciones creadas con el elemento DL cada entrada de lista consta de dos partes: el elemento DT, que contiene el concepto que debe ser definido o explicado, y el elemento DD que proporciona la descripcin o la definicin.
<HTML> <HEAD> <TITLE>Listas</TITLE> </HEAD> <BODY> <H3>Listas</H3> <H1>Listas de definiciones</H1> <HR> <H2>algunos tags HTML</H2> <DL> <DT>B</DT><DD><B>Impresin en negrita</B></DD> <DT>I</DT><DD><I>Impresin en cursiva</I></DD> <DT>S</DT><DD><S>Texto tachado</S></DD> <DT>U</DT><DD><U>Texto subrayado</U></DD> <DT>TT</DT><DD><TT>Texto no proporcional</TT></DD> </DL> </BODY>

Pgina 19 de 213 www.francisco.hurtado.com

Diseo de pginas web Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com

</HTML>

4. Imgenes y enlaces
Una de las caractersticas fundamentales de HTML es el hecho de que se pueden vincular entre s diferentes documentos y tipos de documentos. Las imgenes vinculadas al texto, designadas tambin como imgenes in-line, son ya un ejemplo de este tipo de vnculo. La vinculacin se realizar mediante el tag <IMG> de HTML. En el tag <IMG> debe estar asignado el atributo SRC (Source, fuente) del URL del archivo de imgenes. As un tag <IMG> tpico podra ser el siguiente:
<IMG SRC="http://www.nombrepagina.es/imgenes/imagen1.jpg">

Los hiperenlaces se realizan con el tag ancla <A>. El elemento HTML correspondiente es un continer, es decir, debe cerrarse con el tag final de forma </A>. En el tag <A> se debe asignar al atributo HREF la direccin (que se activar pulsando el hiperenlace) en forma de un URL. En la siguiente lnea HTML, la frase "Universidad de Murcia" representa un hiperenlace al ordenador de nuestra Universidad:
El laboratorio de redes se encuentra en el stano de la Facultad de Informtica de la <A HREF=" http://www.um.es">Universidad de Murcia</A>.

Pgina 20 de 213 www.francisco.hurtado.com