Introducción al curso

El curso

Este curso ha nacido con la intención de que puedas terminar creando una página de calidad empezando desde cero.

Lo primero que hay que decir es que este curso no explica ningún estándar específico, ni examina exaustivamente todos los parámetros de las etiquetas HTML, sino que intenta ser una guía práctica.

El curso y sus ejemplos están probados con Explorer 4 y Netscape 4.

Este curso estará dividido en varias secciones. La primera (en la que estás ahora mismo) es una miscelánea con información sobre el curso y sobre HTML, pero sin entrar aún en materia. En Nociones básicas podrás aprender lo básico del HTML para así poder hacer tus primeras páginas inmediatamente.

La sección Etiquetas HTML examina a fondo las etiquetas HTML más comunes y en los Elementos avanzados estudiaremos esas cosas que dan a una página un aspecto profesional.
 

Requisitos

Tener acceso a Internet y un navegador. El otro requisito es un editor de textos con el que hacer las páginas. Podéis hacer páginas con algún editor específico de páginas web, pero no es necesario. Es más, algunos de esos editores esconden las etiquetas HTML al usuario, de modo que posiblemente lo que aprendas aquí te sería de poca utilidad.
 
 

HTML 2.0

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier navegador que encontremos será capaz de interpretarlo. Prácticamente todo lo que veamos en la sección Nociones básicas está contemplado por este estándar.
 

HTML 3.0 y 3.2

Aunque la versión 2.0 cumplía bien el objetivo para el que se creó, carecía de herramientas para tener un control mínimamente complejo de los documentos. No se consideró necesario que lo tuviera, ya que por aquel entonces Internet era un fenómeno más bien circunscrito a la actividad académica y el contenido primaba sobre el diseño. Debido a ello Netscape (líder del mercado de navegadores por aquel entonces) empezó a incluir etiquetas nuevas no incluidas en ningún estándar.

Por estos problemas, el IETF (el comité que suele decidir todos los estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resultó ser demasiado grande para la época, lo que dificultó su aceptación en el mercado

Esto llevó a una serie de compañias (entre ellas Netscape, Microsoft, IBM, Sun, etc...) a crear un nuevo comité llamado W3C, que es el que actualmente elabora las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador del HTML 3.2, que incluía muchas de las mejoras que los principales navegadores (Netscape y Explorer) habían introducido en Internet, como son las tablas, los applets, etc..

Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se puso a trabajar en la elaboración del siguiente estándar: el 4.0.
 

HTML 4.0

En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.
 

Este curso

En principio cualquier navegador debería ser capaz de interpretar el HTML 3.2, pero por si necesitais saber por alguna razón el estándar al que pertenece una etiqueta o parámetro en particular, se incluirá una de las siguientes indicaciones:
 

	Introducido con la versión 3.2 del HTML
	Introducido con la versión 4.0 del HTML
	Etiqueta o parámetro no estándar soportado sólo por el Netscape
	Etiqueta o parámetro no estándar soportado sólo por el Explorer

 

Otros manuales de HTML

Aquí tenéis una serie de enlaces a otros manuales y referencias de HTML que os pueden ser de interés.

Webmaestro, el mejor manual de HTML en la red
    http://www.wmaestro.com/webmaestro

Otro manual de HTML por Luis Mariñas
    http://www.geocities.com/SiliconValley/2915/manual.htm

Diseño de páginas en Internet
    http://www.geocities.com/SiliconValley/Heights/1779

Especificación del HTML 4.0
    http://www.w3.org/TR/REC-html40/

Especificación del HTML 3.2
    http://www.w3.org/MarkUp/Wilbur/

Especificación del HTML 3.0
    http://www.w3.org/MarkUp/html3/CoverPage.html

Especificación del HTML 2.0
    http://www.w3.org/MarkUp/html-spec/

La agenda, donde encontrarás todos los enlaces que necesites sobre HTML, Java, JavaScript, CGI, etc..
    http://www.areas.net/agenda.htm
 

Sobre JavaScript

Una vez conocido el HTML, puede que te interese mejorar tus páginas con el lenguaje de script más extendido por Internet:

Indice de recursos Java y JavaScript en castellano
    http://www.sitio.net/java

Ejemplos en JavaScript
    http://www.essex1.com/people/timothy/js-index.htm

Todos los enlaces del mundo relacionados con JavaScript
    http://javascript.developer.com
 

Sobre HTML dinámico

Si todo lo anterior se te ha quedado pequeño y no te importa diseñar páginas accesibles tan solo con Explorer 4 o Communicator, siempre puedes pasarte por estas direcciones:

Macromedia DHTML Zone: Tutorial de HTML dinámico
    http://www.dhtmlzone.com/tutorials/index.html
 

Sobre Java y CGI

El mejor tutorial de Java
    http://www.fie.us.es/info/internet/JAVA/

El mundo de Duke, índice y buscador de recursos Java
    http://www.mol.es/kiosko/duke/

Librería para hacer CGIs en C
    http://phonos.upf.es/~jordinas/esp/cgi.htm
 
 

El código

<HTML>
  <HEAD>
    <TITLE>Mi primera pagina</TITLE>
  </HEAD>

  <BODY>
    <CENTER><H1>Mi Primera pagina</H1></CENTER> 
    <HR>
    <P>Esta es mi primera pagina. Por el
    momento no se que tendra, pero dentro de poco
    pondre aqui muchas cosas interesantes.
  </BODY>
</HTML>

La explicación

Lo primero que conviene explicar es en qué consisten todos esos símbolos de mayor y menor. El lenguaje HTML se basa en la sintaxis SGML. Esto quiere decir que cualquier cosa que hagamos en HTML estará encerrada entre dos etiquetas de esta manera:

<ETIQUETA parámetros> ... </ETIQUETA>

<HTML> ... </HTML>

<HEAD>
  <TITLE>Mi primera página</TITLE>
</HEAD>

El cuerpo del documento

Ahora vamos a indicar el contenido. Lo primero será indicar que estamos en el cuerpo del documento:

<BODY> ... </BODY>

<CENTER><H1> ... </H1></CENTER>

<HR>

<P>Esta es mi primera pagina. Por el
momento no sé que tendrá, pero dentro de poco
pondré aquí muchas cosas interesantes.

Formateando el texto

Se pueden establecer varias categorías dentro de las etiquetas usadas para formatear el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar párrafos enteros y las que son capaces de formatear tiras de caracteres dentro del párrafo.
 

Formato del párrafo

Estas son las etiquetas más importantes (excluyendo algunas que veremos más adelante):
 

Etiqueta	Utilidad	Resultado
<P>	Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.	Soy un párrafo
<CENTER> ... </CENTER>	Permite centrar todo el texto del párrafo	Yo estoy normal Yo estoy centrado
<PRE WIDTH=x> ... </PRE>	Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy útil a la hora de representar código fuente. El parámetro WIDTH especifica el número máximo de caracteres en una línea.	Estoy en paso fijo
<DIV ALIGN=x> ... </DIV>	Permite justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY), pero no inserta ninguna línea antes de él.	Yo estoy a la izquierda Yo al centro Y yo a la derecha  Yo soy el mejor de todos, porque estoy en todos los lados.
<ADDRESS> ... </ADDRESS>	Para escribir direcciones (no electrónicas).	Daniel Rodríguez Herrera C/Ecuador 9, 1ºB 28220 Majadahonda
<BLOCKQUOTE> ... </BLOCKQUOTE>	Para citar un texto ajeno. Cada navegador lo puede implementar de forma distinta.	Cabecera de nivel 5

Las 6 cabeceras

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son estas:
 

Etiqueta	Resultado
<H1> ... </H1>	Cabecera de nivel 1
<H2> ... </H2>	Cabecera de nivel 2
<H3> ... </H3>	Cabecera de nivel 3
<H4> ... </H4>	Cabecera de nivel 4
<H5> ... </H5>	Cabecera de nivel 5
<H6> ... </H6>	Cabecera de nivel 6

No resulta recomendable utilizar estas etiquetas para aumentar o dismunuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal.
 

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 con tiras de caracteres dentro de un párrafo.
 

Etiqueta	Utilidad	Resultado
<B> ... </B>	Pone el texto en negrita	Soy un texto negro como el tizón
<I> ... </I>	Representa el texto en cursiva	Estoy en cursiva!!!
<U> ... </U>	Para subrayar algo	Como soy muy importante estoy subrayado
<S> ... </S>	Para tachar	A mí, en cambio, nadie me quiere
<TT> ... </TT>	Permite representar el texto en un tipo de letra de paso fijo.	No soy variable
<SUP> ... </SUP>	Letra superíndice	E=mc2
<SUB> ... </SUB>	Letra subíndice	ai,j=bi,j+1
<BIG> ... </BIG>	Incrementa el tamaño del tipo de letra	Soy GRANDE
<SMALL> ... </SMALL>	Disminuye el tamaño del tipo de letra	Creí ver un lindo gatito
<BLINK> ... </BLINK>	Hace parpadear el texto. Resulta algo irritante	¿Molesto?

Formato de frase

En estos elementos indicas el tipo de información que encierran las etiquetas, pero no como se representan:
 

Etiqueta	Utilidad	Resultado
<CITE> ... </CITE>	Para citar un texto ajeno	Esta frase no es mía
<CODE> ... </CODE>	Para representar en ejemplo de código	int x=0;
<STRONG> ... </STRONG>	La cosa es importante	Hay cosas importantes
<EM> ... </EM>	Para dar énfasis	Hay que poner énfasis en algunas cosas.
<KBD> ... </KBD>	Texto tecleado por el usuario	El usuario debe teclear Multivac es el mejor
<VAR> ... </VAR>	Representar variables de un código	La variable x, definida anteriormente...
<SAMP> ... </SAMP>	Para representar una serie de caracteres literalmente	Estoy en un literal
<ABBR> ... </ABBR>	Abreviaturas	La WWW usa el protocolo http

No son muy utilizados, ya que no permiten tener un control exacto de la manera en que la página se representará finalmente.
 

Otros elementos

Por último, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra página.
 

Etiqueta	Utilidad	Resultado
<HR>	Inserta una barra horizontal
<BR>	Salto de línea	Hay un antes y un después de saltar a otra línea
<!-- ... -->	Comentarios	Esto se escribe y <!-- esto no -->

Aquí tenemos en un ejemplo casi todas las etiquetas estudiadas.

cuyo código HTML es:

<HTML> <HEAD>   <TITLE>Mi segunda pagina</TITLE> </HEAD> <BODY> <DIV ALIGN=CENTER><H1>Mi segunda pagina</H1></DIV> <H2>La primera version de esta pagina, ahora actualizada</H2> <HR> <DIV ALIGN=CENTER>Esta es mi <STRONG>primera</STRONG> pagina (<I>chispas</I>). Por el momento no se que tendra, pero <S>dentro de poco</S> pondre <EM>aqui</EM> muchas cosas <B>interesantes</B>.</DIV> <BR><BR><H2>Y esta es la segunda versión</H2> <P>Ya tenemos aqui las cosas interesantes. Tenemos a mi amiga <BIG>Ruth</BIG> diciendo que <BLOCKQUOTE>Como me pongas en tu pagina te atizo.</BLOCKQUOTE> Tambien podemos a ver a su querido perro <I>fufu</I> diciendo <CITE>guau, guau</CITE> y, sobre todo, el codigo fuente de este ejemplo: <PRE> <!-- Aqui estaria el codigo fuente que no voy a poner porque    entrariamos en un circulo vicioso.--> </PRE> </BODY> </HTML>

 

¿Y los acentos?

Si os habeis fijado en los ejemplos habréis visto que en los textos de los mismos no hay acentos, ni eñes, ni símbolos de abrir interrogación o exclamación. Esto es debido a los distintos juegos de caracteres que manejan los ordenadores.

Las máquinas manejan la información en formato binario (es decir, en unos y ceros). Estos, a su vez, forman números, los cuales se traducen en letras. ¿Cómo? Mediante tablas. Podemos asignar el valor 64 a la letra a, el 65 a la b, etc..

El problema está en que cada ordenador es de un fabricante distinto y puede adoptar una tabla diferente al resto. Para evitarlo existen diversos estándares y el más extendido es el ASCII. De hecho, actualmente todos los ordenadores tienen la misma tabla ASCII para los primeros 127 caracteres. Pero esa tabla no contiene vocales con acento, ni eñes, ni símbolos de abrir interrogación o exclamación.

El HTML 2.0 eligió como tabla estándar la ISO-Latin-1, que comparte con la ASCII los 127 caracteres e incluye unos cuantos más hasta el número 255.
 

Los caracteres

La manera de incluir los caracteres extendidos (cuyo número está más allá del 127) consiste en encerrar el código entre los caracteres & y ;. Así pues, lo siguiente:

½

Código	Resultado
á, Á, é, É,...	á, Á, é, É, í, Í, ó, Ó, ú y Ú.
ñ y Ñ	ñ y Ñ
¿	¿
¡	¡
º	º
ª	ª
™ o ™	™ o ™
©	©
®	®
 	(espacio en blanco que no puede ser usado para saltar de línea)

Caracteres de control

En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente códigos:
Son estas:

Código	Resultado
&lt;	<
&gt;	>
&amp;	&
&quot;	"

Ahora podremos ver el ejemplo anterior corregido para incluir acentos y demás.

y el código:
 

<HTML> <HEAD>   <TITLE>Mi segunda p&aacute;gina</TITLE> </HEAD> <BODY> <DIV ALIGN=CENTER><H1>Mi segunda p&aacute;gina</H1></DIV> <H2>La primera versi&oacute;n de esta p&aacute;gina</H2> <HR> <P>Esta es mi primera p&aacute;gina (chispas). Por el momento no s&eacute; que tendr&aacute;, pero dentro de poco pondr&eacute; aqu&iacute; muchas cosas interesantes. <BR><BR><H2>La primera versi&oacute;n de esta p&aacute;gina, ahora actualizada</H2> <HR> <DIV ALIGN=CENTER>Esta es mi <STRONG>primera</STRONG> p&aacute;gina (<I>chispas</I>). Por el momento no s&eacute; que tendr&aacute;, pero <S>dentro de poco</S> pondr&eacute; <EM>aqu&iacute;</EM> muchas cosas <B>interesantes</B>.</DIV> <BR><BR><H2>Y esta es la segunda versi&oacute;n</H2> <P>Ya tenemos aqu&iacute; las cosas interesantes. Tenemos a mi amiga <BIG>Ruth</BIG> diciendo que <BLOCKQUOTE>Como me pongas en tu p&aacute;gina te atizo.</BLOCKQUOTE> Tambi&eacute;n podemos a ver a su querido perro <I>fufu</I> diciendo <CITE>guau, guau</CITE> y, sobre todo, el c&oacute;digo fuente de este ejemplo: <PRE> <!-- Aquí estaría el código fuente que no voy a poner    porque entraríamos en un circulo vicioso.--> </PRE> </BODY> </HTML>

También tenéis a vuestra disposición la tabla completa de caracteres del HTML 2.0.  Las siguientes definiciones de entidades SGML han sido extraidas del RFC original que define el HTML 2.0:

    <!ENTITY nbsp   CDATA "&#160;" -- no-break space -->
    <!ENTITY iexcl  CDATA "&#161;" -- inverted exclamation mark -->
    <!ENTITY cent   CDATA "&#162;" -- cent sign -->
    <!ENTITY pound  CDATA "&#163;" -- pound sterling sign -->
    <!ENTITY curren CDATA "&#164;" -- general currency sign -->
    <!ENTITY yen    CDATA "&#165;" -- yen sign -->
    <!ENTITY brvbar CDATA "&#166;" -- broken (vertical) bar -->
    <!ENTITY sect   CDATA "&#167;" -- section sign -->
    <!ENTITY uml    CDATA "&#168;" -- umlaut (dieresis) -->
    <!ENTITY copy   CDATA "&#169;" -- copyright sign -->
    <!ENTITY ordf   CDATA "&#170;" -- ordinal indicator, feminine -->
    <!ENTITY laquo  CDATA "&#171;" -- angle quotation mark, left -->
    <!ENTITY not    CDATA "&#172;" -- not sign -->
    <!ENTITY shy    CDATA "&#173;" -- soft hyphen -->
    <!ENTITY reg    CDATA "&#174;" -- registered sign -->
    <!ENTITY macr   CDATA "&#175;" -- macron -->
    <!ENTITY deg    CDATA "&#176;" -- degree sign -->
    <!ENTITY plusmn CDATA "&#177;" -- plus-or-minus sign -->
    <!ENTITY sup2   CDATA "&#178;" -- superscript two -->
    <!ENTITY sup3   CDATA "&#179;" -- superscript three -->
    <!ENTITY acute  CDATA "&#180;" -- acute accent -->
    <!ENTITY micro  CDATA "&#181;" -- micro sign -->
    <!ENTITY para   CDATA "&#182;" -- pilcrow (paragraph sign) -->
    <!ENTITY middot CDATA "&#183;" -- middle dot -->
    <!ENTITY cedil  CDATA "&#184;" -- cedilla -->
    <!ENTITY sup1   CDATA "&#185;" -- superscript one -->
    <!ENTITY ordm   CDATA "&#186;" -- ordinal indicator, masculine -->
    <!ENTITY raquo  CDATA "&#187;" -- angle quotation mark, right -->
    <!ENTITY frac14 CDATA "&#188;" -- fraction one-quarter -->
    <!ENTITY frac12 CDATA "&#189;" -- fraction one-half -->
    <!ENTITY frac34 CDATA "&#190;" -- fraction three-quarters -->
    <!ENTITY iquest CDATA "&#191;" -- inverted question mark -->
    <!ENTITY Agrave CDATA "&#192;" -- capital A, grave accent -->
    <!ENTITY Aacute CDATA "&#193;" -- capital A, acute accent -->
    <!ENTITY Acirc  CDATA "&#194;" -- capital A, circumflex accent -->
    <!ENTITY Atilde CDATA "&#195;" -- capital A, tilde -->
    <!ENTITY Auml   CDATA "&#196;" -- capital A, dieresis or umlaut mark -->
    <!ENTITY Aring  CDATA "&#197;" -- capital A, ring -->
    <!ENTITY AElig  CDATA "&#198;" -- capital AE diphthong (ligature) -->
    <!ENTITY Ccedil CDATA "&#199;" -- capital C, cedilla -->
    <!ENTITY Egrave CDATA "&#200;" -- capital E, grave accent -->
    <!ENTITY Eacute CDATA "&#201;" -- capital E, acute accent -->
    <!ENTITY Ecirc  CDATA "&#202;" -- capital E, circumflex accent -->
    <!ENTITY Euml   CDATA "&#203;" -- capital E, dieresis or umlaut mark -->
    <!ENTITY Igrave CDATA "&#204;" -- capital I, grave accent -->
    <!ENTITY Iacute CDATA "&#205;" -- capital I, acute accent -->
    <!ENTITY Icirc  CDATA "&#206;" -- capital I, circumflex accent -->
    <!ENTITY Iuml   CDATA "&#207;" -- capital I, dieresis or umlaut mark -->
    <!ENTITY ETH    CDATA "&#208;" -- capital Eth, Icelandic -->
    <!ENTITY Ntilde CDATA "&#209;" -- capital N, tilde -->
    <!ENTITY Ograve CDATA "&#210;" -- capital O, grave accent -->
    <!ENTITY Oacute CDATA "&#211;" -- capital O, acute accent -->
    <!ENTITY Ocirc  CDATA "&#212;" -- capital O, circumflex accent -->
    <!ENTITY Otilde CDATA "&#213;" -- capital O, tilde -->
    <!ENTITY Ouml   CDATA "&#214;" -- capital O, dieresis or umlaut mark -->
    <!ENTITY times  CDATA "&#215;" -- multiply sign -->
    <!ENTITY Oslash CDATA "&#216;" -- capital O, slash -->
    <!ENTITY Ugrave CDATA "&#217;" -- capital U, grave accent -->
    <!ENTITY Uacute CDATA "&#218;" -- capital U, acute accent -->
    <!ENTITY Ucirc  CDATA "&#219;" -- capital U, circumflex accent -->
    <!ENTITY Uuml   CDATA "&#220;" -- capital U, dieresis or umlaut mark -->
    <!ENTITY Yacute CDATA "&#221;" -- capital Y, acute accent -->
    <!ENTITY THORN  CDATA "&#222;" -- capital THORN, Icelandic -->
    <!ENTITY szlig  CDATA "&#223;" -- small sharp s, German (sz ligature) -->
    <!ENTITY agrave CDATA "&#224;" -- small a, grave accent -->
    <!ENTITY aacute CDATA "&#225;" -- small a, acute accent -->
    <!ENTITY acirc  CDATA "&#226;" -- small a, circumflex accent -->
    <!ENTITY atilde CDATA "&#227;" -- small a, tilde -->
    <!ENTITY auml   CDATA "&#228;" -- small a, dieresis or umlaut mark -->
    <!ENTITY aring  CDATA "&#229;" -- small a, ring -->
    <!ENTITY aelig  CDATA "&#230;" -- small ae diphthong (ligature) -->
    <!ENTITY ccedil CDATA "&#231;" -- small c, cedilla -->
    <!ENTITY egrave CDATA "&#232;" -- small e, grave accent -->
    <!ENTITY eacute CDATA "&#233;" -- small e, acute accent -->
    <!ENTITY ecirc  CDATA "&#234;" -- small e, circumflex accent -->
    <!ENTITY euml   CDATA "&#235;" -- small e, dieresis or umlaut mark -->
    <!ENTITY igrave CDATA "&#236;" -- small i, grave accent -->
    <!ENTITY iacute CDATA "&#237;" -- small i, acute accent -->
    <!ENTITY icirc  CDATA "&#238;" -- small i, circumflex accent -->
    <!ENTITY iuml   CDATA "&#239;" -- small i, dieresis or umlaut mark -->
    <!ENTITY eth    CDATA "&#240;" -- small eth, Icelandic -->
    <!ENTITY ntilde CDATA "&#241;" -- small n, tilde -->
    <!ENTITY ograve CDATA "&#242;" -- small o, grave accent -->
    <!ENTITY oacute CDATA "&#243;" -- small o, acute accent -->
    <!ENTITY ocirc  CDATA "&#244;" -- small o, circumflex accent -->
    <!ENTITY otilde CDATA "&#245;" -- small o, tilde -->
    <!ENTITY ouml   CDATA "&#246;" -- small o, dieresis or umlaut mark -->
    <!ENTITY divide CDATA "&#247;" -- divide sign -->
    <!ENTITY oslash CDATA "&#248;" -- small o, slash -->
    <!ENTITY ugrave CDATA "&#249;" -- small u, grave accent -->
    <!ENTITY uacute CDATA "&#250;" -- small u, acute accent -->
    <!ENTITY ucirc  CDATA "&#251;" -- small u, circumflex accent -->
    <!ENTITY uuml   CDATA "&#252;" -- small u, dieresis or umlaut mark -->
    <!ENTITY yacute CDATA "&#253;" -- small y, acute accent -->
    <!ENTITY thorn  CDATA "&#254;" -- small thorn, Icelandic -->
    <!ENTITY yuml   CDATA "&#255;" -- small y, dieresis or umlaut mark -->
 
 

Hipertexto

Las siglas HTML significan HyperText Markup Language, lo que para nosotros quiere decir que es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en común es que todos poseen enlaces.

Un enlace es una zona de texto o gráficos que si son seleccionados nos trasladan a otro documento de hipertexto o a otro lugar dentro del documento actual. Siendo HTML el lenguaje de Internet, la diferencia con otros tipos de hipertexto es que ese otro documento puede estar físicamente en cualquier otro lugar del planeta. Son los enlaces lo que hacen de la telaraña o World Wide Web lo que es.
 

La etiqueta <A>

Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre <A> y </A>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:

1. Se visualizará de manera distinta en el navegador. El texto aparecerá subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace.
2. Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace.

<A HREF="direccion">Pulsame</A>

Las URLs

Una URL nos indica tanto una dirección de Internet como el servicio que esperamos nos ofrezca el servidor al que corresponde la dirección. Tiene el siguiente formato:

servicio://máquina:puerto/ruta/fichero@usuario

La dirección de la máquina puede ser, o bien una serie de cuatro números entre 0 y 255 (123.3.5.65) o bien algo más facil de recordar como es una serie de palabras separadas por puntos (www.ctv.es). El puerto generalmente no se indica, ya que el servicio predetermina uno.

La ruta es una serie de directorios separados por el símbolo /, que es el utilizado en UNIX (el sistema operativo más extendido en los servidores de Internet).

Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando podemos utilizar este formato:

ruta_relativa/fichero

Anclas

Como dijimos, es posible acceder a una parte del documento HTML. Para hacerlo, primero debemos especificar el lugar del documento al que queremos acceder:

<A NAME="ancla">

<A HREF="#ancla">Vamos arriba</A>

<A HREF="enlaces.html#ancla">Vamos al punto 3 de la otra página</A>

Introducción

Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando árboles. Todos los tipos siguen el siguiente formato:

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

Listas desordenadas

La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,

<UL>
  <LI>Primer elemento
  <LI>Segundo elemento
</UL>

• Primer elemento
• Segundo elemento

Parámetro	Utilidad	Resultado
COMPACT	Indica al navegador que debe representar la lista de la manera más compacta posible	Primer elemento Segundo elemento
TYPE=disc, circle o square	Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.	Tipo disc Tipo circle Tipo square

También son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>. En principio tenín como propósito representar una lista estilo directorio (multicolumna) o tipo menú (una sola columna). En la práctica los navegadores lo han implementado como sinonimos de <UL>, por lo que no los estudiaremos aquí.
 

Listas ordenadas

La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo,

<OL>
  <LI>Primer elemento
  <LI>Segundo elemento
</OL>

1. Primer elemento
2. Segundo elemento

Parámetro	Utilidad	Resultado
COMPACT	Indica al navegador que debe representar la lista de la manera más compacta posible	Primer elemento Segundo elemento
TYPE=1, a, A, i o I	Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.	Tipo 1 Tipo a Tipo A Tipo i Tipo I
START	Indica al navegador el número por el que se empezará a contar los elementos de la lista.	Primer elemento Segundo elemento
VALUE	Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.	Primer elemento Segundo elemento Tercer elemento

Listas de definiciones

Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>:

<DL>
  <DT>Primer elemento<DD>Es el elemento que aparece en primera posición.
  <DT>Segundo elemento<DD>Es el elemento que aparece en segunda posición.
</DL>

Primer elemento

Es el elemento que aparece en primera posición.

Segundo elemento

Es el elemento que aparece en segunda posición.

Etiqueta <IMG>

Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <IMG> de esta manera:

<IMG SRC="fichero_grafico" ALT="descripcion">

El parámetro ALT especifica el texto que se mostrará en lugar del gráfico 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 ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo.

Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y la anchura del gráfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto.
 

<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31>

Se ve así:

Imágenes y enlaces

Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniendolo a cero.
 

<A HREF="http://www.netscape.com">   <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31> </A>

Se ve así:

Se ve así:

Alineando respecto al texto

Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
 

Valor de ALIGN	Utilidad	Resultado
TOP	Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual	Este es el texto
MIDDLE	Alinea el punto medio (en altura) de la imagen con la base del texto	Este es el texto
BOTTOM Por defecto	Alinea el punto más bajo de la imagen con la base del texto	Este es el texto
LEFT	Coloca la imagen a la izquierda del texto	Este es el texto
RIGHT	Coloca la imagen a la izquierda del texto	Este es el texto

Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras excepto algunas como la p, la g o la j.
 
 

Formateo fino

La etiqueta <FONT>

Lo ideal cuando trabajas con texto sería poder cambiar el tamaño, color y el tipo de letra. Todo esto puedes hacerlo gracias a la etiqueta <FONT>.
 

Cambiar el color

Para hacerlo vamos a utilizar el parámetro COLOR. La manera de especificarle el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando el porcentaje de rojo, verde y azul (código 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

La primera componente en hexadecimal es el rojo, la segunda el azul y la tercera el verde (Red Green Blue, RGB).
 

El tamaño

El perámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para indicar tamaños absolutos:
SIZE=1SIZE=2SIZE=3SIZE=4SIZE=5SIZE=6SIZE=7

El tamaño por defecto es 3. También se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así, por ejemplo, si indicamos que queremos un tamaño de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces más pequeño.

Cambiando el tipo de letra

Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parámetro FACE. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que está viendo nuestras páginas, podemos indicar más de uno separado por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene por defecto:

De todos modos es recomendable no utilizar con fe ciega este atributo en Internet, ya que impide que todos puedan ver nuestras páginas como nosotros. E Internet, siempre que nos lo permitan Microsoft y Netscape, debe ser lo más estándar posible.
 
 

El tipo del documento

La estructura de un documento HTML se puede resumir así:

tipo de documento
<HTML>
<HEAD>
  <TITLE>titulo de la página
  cosas que afectan a la página pero no a su contenido
</HEAD>
<BODY parámetros>
  contenido de la página
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estándar HTML 2.0

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

Cumple el estándar HTML 3.2

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

Cumple el estándar HTML 4.0

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

Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables

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

Es una definición de marcos que cumple el estándar HTML 4.0

La cabecera

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Estas son las propiedades más comunes:
 

Propiedad	Utilidad
Author	Autor de la página
Generator	Herramienta utilizada para hacer la página
Classification	Palabras de clasificación de la página (para los buscadores)
Keywords	Palabras clave por las que encontrarán la página en los buscadores
Description	Descripción del contenido de la página

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

Ahora todas nuestras URLs relativas se referirán al directorio /music dentro del servidor http://www.hornet.org.
 

El cuerpo

Obviamente no voy a explicar lo que entra dentro del cuerpo (prácticamente todos los capítulos del curso intentan hacerlo) sino los parámetros que admite la etiqueta <BODY>:
 

Parámetro	Utilidad
BACKGROUND	Permite definir un gráfico de fondo para la página.
BGCOLOR	Permite definir el color de fondo de la página.
TEXT	Cambia el color del texto.
LINK	Cambia el color de un enlace no visitado (por defecto azul).
VLINK	Cambia el color de un enlace ya visitado (por defecto púrpura).
ALINK	Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo).

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

Comunicarse con el usuario

Una de las mayores ventajas de la web es que resulta tremendamente interactiva. Los usuarios de una página no tienen más que escribir al autor de la misma para comentarle cualquier cosa de la misma. Sin embargo, si deseamos que nos digan sólo unas cosas concretas (responder a alguna pregunta, seleccionar entre opciones, etc..) deberemos utilizar formularios. Por ejemplo,

<FORM ACTION="" METHOD=POST>
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR>¿Cuantos son dos y dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>

El botón no hace nada porque no hemos definido qué debe hacer.

Todos los elementos de un formulario deben estar encerrados entre <FORM> y </FORM>. Como parámetros cabe destacar dos. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo pero es poco recomendable, ya que el formato en el que llega es bastante incómodo de leer. Por ello existen muchos programas CGI que traducen de ese formato a otro más legible. Debes averiguar si tu servidor te proporciona uno.

Por otro lado, tenemos el parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar POST.

Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un formulario. Veremos que todos ellos tienen algo en común. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.
 

Texto

Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>:

El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en él. Estos son los atributos para modificarlos:
 

Atributo	Utilidad
SIZE	Tamaño de la caja de texto.
MAXLENGTH	Número máximo de caracteres que puede introducir el usuario.
VALUE	Texto por defecto que contendrá la caja.

Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la siguiente etiqueta:
 

<TEXTAREA> Por defecto </TEXTAREA>

Por defecto

Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:

Atributo	Utilidad
ROWS	Filas que ocupará la caja de texto
COLS	Columnas que ocupará la caja de texto

 

Opciones

Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos modos. El primero es el que vimos en el ejemplo inicial:
 

<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>

3 4 5

Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:
 

Atributo	Utilidad
VALUE	Este es el valor que asignará a la variable
CHECKED	Si lo indicamos en una de las opciones esta será la que se active por defecto

Pero también tenemos una posibilidad que ocupa bastante menos: listas de selección. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION:
 

<SELECT NAME="Navegador">  <OPTION>Netscape  <OPTION>Explorer  <OPTION>Lynx  <OPTION>Otros  </SELECT>

Netscape Explorer Lynx Otros

Los parámetros que admite SELECT son las siguientes:
 

Atributo	Utilidad
SIZE	El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable.
MULTIPLE	Si lo indicamos podremos elegir más de una opción.

Y OPTION estos:
 

Atributo	Utilidad
VALUE	Este es el valor que asignará a la variable
SELECTED	Si lo indicamos en una de las opciones esta será la seleccionada por defecto.

 

Botones del formulario

Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:
 

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

Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro VALUE.
 

Otros

Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:
 

<INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero guapo/a

Me considero guapo/a

Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED. El formulario asignará a la variable NAME el valor on u off.

Por último, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable con un valor previamente asignado. Por ejemplo, en todos los cursos que tengo el formulario es el mismo. Y de alguna manera tendré que distinguirlos cuando me lleguen, digo yo. Así que incluyo algo como esto:

De este modo ya sé de que curso me están hablando.
 
 

Mapas

¿Qué es un mapa?

Hemos visto que podemos hacer enlaces de texto y de gráficos. Pero también existe otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:

• Mapas gestionados por el cliente (el navegador).
• Mapas gestionados por el servidor.

Mapas gestionados por el cliente

Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a declarar nuestro mapa:
 

<MAP NAME="mi_mapa">   <AREA SHAPE=... COORDS=... ALT="Enlace a..">   ... </MAP>

Dentro de la etiqueta MAP sólo podremos definir el nombre del mapa (algo imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas más interesantes:
 

Atributo	Utilidad
SHAPE	Define la forma de la zona, que podrá ser rectangular, circular o poligonal.
COORDS	Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la zona.
HREF	URL a donde irá el usuario si pulsa sobre esa zona.
NOHREF	Especifica que esa zona no tiene asignado enlace alguno.
ALT	Texto que se presentará en lugar de la imagen en navegadores no gráficos para acceder al enlace.

Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:
 

	SHAPE	COORDS
Rectangular	RECT	"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
Circular	CIRCLE	"x,y,radio" siendo (x,y) el centro del círculo.
Polígono irregular	POLY	"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono.
Toda la imagen	DEFAULT	No se indican

 

Usar un mapa

Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace del siguiente modo:

Siempre tenemos que añadir 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.netscape.com" ALT="Netscape">   <AREA SHAPE=RECT COORDS="26,0,53,31" HREF="http://www.microsoft.com" ALT="Microsoft">   <AREA SHAPE=DEFAULT NOHREF ALT="Nada"> </MAP> <IMG SRC="nav.gif" WIDTH=53 HEIGHT=31 BORDER=0 USEMAP="#navegadores">

Se ve tal que así:

Tablas

Introducción

Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.

Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:
 

Código	Resultado
<TABLE>   <TR>     <TD>1,1</TD>     <TD>1,2</TD>     <TD>1,3</TD>   </TR>   <TR>     <TD>2,1</TD>     <TD>2,2</TD>     <TD>2,3</TD>   </TR> </TABLE>	1,1 1,2 1,3 2,1 2,2 2,3

Como podéis ver, la tabla no tiene mucho aspecto de tabla. Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:
 

Atributo	Utilidad
BORDER	Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno.
CELLSPACING	Define el número de pixels que separarán las celdas.
CELLPADDING	Define el número de pixels que habrá entre el borde de una celda y su contenido.
WIDTH	Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe toda la anchura de la ventana).
ALIGN	Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).

Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
 

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

 

Definir las columnas

Ahora que hemos definido la tabla nos toca hacer lo mismo con las columnas. Cada columna se define con una etiqueta TR, que tiene los siguientes atributos:
 

Atributo	Utilidad
ALIGN	Alinea el contenido de las celdas de la columna horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN	Alinea el contenido de las celdas de la columna verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) .

 

Definir las filas

Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la última se utiliza para cabeceras, de modo que su interior se escribirá en negrita y centrado. Estos son los atributos de ambas:
 

Atributo	Utilidad
ALIGN	Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN	Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) .
WIDTH	Especifica la anchura de la celda con respecto a la anchura de la tabla. También se puede especificar tanto en pixels como en porcentaje.
NOWRAP	Impide que, en el interior de la celda, se rompa la línea en un espacio.
COLSPAN	Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha.
ROWSPAN	Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. Vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
 

Código	Resultado
<TABLE BORDER=1>   <TR>     <TD ROWSPAN=2>1,1 y 1,2</TD>     <TD>1,3</TD>   </TR>   <TR>     <TD COLSPAN=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,1 y 3,1 2,2 2,3 3,2 3,3

Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas absorbidas o la tabla se nos liará.
 

Título de la tabla

Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en la declaración de la tabla anterior:
 

Código	Resultado
<TABLE BORDER=1>   <CAPTION>     Ejemplo de tablas   </CAPTION> ... </TABLE>	Ejemplo de tablas 1,1 y 1,2 1,3 2,1 y 3,1 2,2 2,3 3,2 3,3

Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el título se colocará al final de la tabla en lugar del comienzo.
 
 

Marcos

¿Qué son los marcos?

Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.

Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:
 

<HTML> <HEAD>   <TITLE>Mi primera página con marcos </HEAD> <FRAMESET COLS="20%,80%">   <FRAME NAME="indice" SRC="indice.html">   <FRAME NAME="principal" SRC="introduccion.html">   <NOFRAMES>     <P>Lo siento, pero sólo podrás ver esta página     si tu navegador tiene la capacidad de visualizar     marcos.</P>   </NOFRAMES> </FRAMESET> </HTML>

El resultado sería:

Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas por el parámetro COLS o ROWS. En este, separado por comas, se define el número de marcos y el tamaño de cada uno.

Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un nombre y especificando qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
 

Etiqueta <FRAMESET>

Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más.

En general, los navegadores dibujan un borde de separación entre los marcos. Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>.

Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0.

Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:

• Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible.
• Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño especificado en pixels.
• Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se repartirán el espacio equitativamente como buenos hermanos. si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero que tiene un asterisco sólo.

Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco.

Hay que tener cuidado usando valores absolutos en la definición de marcos, debemos tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la página.

Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
 

<FRAMESET COLS="20%,80%">   <FRAME NAME="indice" SRC="indice.html">   <FRAMESET ROWS="*,80">     <FRAME NAME="principal" SRC="introduccion.html">     <FRAME NAME="ejemplos" SRC="ejemplo.html">   </FRAMESET> </FRAMESET>

El resultado del anidamiento lo podréis contemplar aquí.

Etiqueta <FRAME>

Esta etiqueta define tan sólo las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite:
 

Atributo	Utilidad
NAME	Asigna un nombre a un marco para que después podamos referirnos a él.
SRC	Indica la dirección del documento HTML que ocupará el marco.
SCROLLING	Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO.
NORESIZE	Si lo especificamos el usuario no podrá cambiar de tamaño el marco.
FRAMEBORDER	Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero.
MARGINWIDTH	Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT	Igual al anterior pero con márgenes verticales.

Accediendo a otros marcos

Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET.

Este parámetro 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.

Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. 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:

También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:

_top

Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.

_blank

Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self

Muestra la nueva página en el marco donde está declarado el enlace.

_parent

Muestra la nueva página 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 parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.

Hojas de estilo

Introducción

Las hojas de estilo intentan separar el contenido de un página 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 párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además 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 estándar más 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 sólo podrá estar situada en la cabecera de la página. Su parámetro 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>. Después, 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 mayásculas y minúsculas. Conviene tener cuidado.

El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremos su filosofía 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 más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:
 

<LINK REL="stylesheet" SRC="estilos.css" TYPE="text/css">

Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior

Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30 pixels. Por lo que he dicho hasta ahora la personalización de una etiqueta debería ser general y en esta página sólo este párrafo está modificado. No os preocupéis demasiado, ahora os cuento como se hace.

Clases

Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también 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;}

sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <P CLASS="verde">. Así de sencillo.

Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro ID. Por ejemplo:
 

all.verde {color: green; margin-left: 10px;} #ej1 { color: blue;}

Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10 pixels. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será azul:

Este párrafo es muy verde.

Y anda que este...

Sin embargo, este no, fíjate que curioso.

Etiquetas <SPAN> y <DIV>

Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <SPAN> y <DIV>.

El método es simple. Definimos una clase rojo que simplemente modifique el color (que será rojo). Ahora, si queremos que una sección de texto esté en rojo lo encerraremos entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV CLASS="rojo"> y </SPAN>.

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 línea tanto al comienzo como al final). Veremos en el siguiente capítulo que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo 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 código HTML:
 

<DIV ALIGN=CENTER CLASS="sombra">El maravilloso curso de HTML <DIV ALIGN=CENTER CLASS="titulo">El maravilloso curso de HTML

obtendremos este bello efecto:

Hojas de estilo: referencia

Propiedades de bloque

En este capítulo vamos a ver todas (o casi todas) las propiedades que se pueden alterar por medio de las hojas de estilo. Hay que indicar que algunos de ellos no los soporta el Explorer y en cambio otros no los entiende el Communicator. Así que es recomendable probarlos en ambos exploradores antes de incorporarlos a nuestras páginas.

Vamos a empezar con las propiedades de bloque, que definen cosas como los márgenes o la colocación de bloques de contenido HTML:
 

Propiedad	Descripción	Posibles valores
margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left	Distancia mínima entre un bloque y los demás elementos. Tanto margin como margins() se utilizan para cambiar todos estos atributos a la vez.	tamaño, porcentaje o auto. Por defecto es cero.
padding-top, padding-right, padding-bottom, padding-left, padding: top right bottom left	Distancia entre el borde y el contenido de un bloque.	tamaño, porcentaje o auto. Por defecto cero.
border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: top right bottom left	Anchura del borde de un bloque.	numérico
border-style	Estilo del borde de un bloque.	none, solid o 3D, por defecto ninguno (none).
border-color	Color del borde de un bloque.	cualquier color
width, height	Tamaño de un bloque. Su mayor utilidad está en su aplicación a un elemento gráfico.	tamaño, porcentaje o auto, automático por defecto.
float	Justificación del contenido de un bloque.	left, right o none, por defecto ninguna.
clear	Permiso para que otro elemento se pueda colocar a su izquierda o derecha.	left, right, both o none, por defecto ninguno.

 

Propiedades de tipo de letra

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:
 

Propiedad	Descripción	Posibles valores
font-family	Tipo de letra (que puede ser genérico) que vamos a usar.	lista de tipos, ya sean genéricos o no, separados por comas.
font-size	Tamaño del tipo de letra.	xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium.
font-weight	Grosor del tipo de letra (negrita).	normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal.
font-style	Estilo del tipo de letra (cursiva).	normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal.

Cabe recordar que los tipos genéricos son serif, sans-serif, cursive, fantasy y monospace. Cada uno de estos tipos serán equivalentes a alguno que pueda tener instalado el ordenador del usuario. Así, por ejemplo, en un PC con Windows instalado serif puede equivaler a Times New Roman o monospace a Courier.
 

Propiedades de formato del texto

Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de textos nos permite cambiar.
 

Propiedad	Descripción	Posibles valores
line-height	Interlineado	número o porcentaje
text-decoration	Efectos variados sobre el texto	none, undeline, overline, line-through o blink; por defecto ninguno.
vertical-align	Posición vertical del texto	baseline, sub, super, top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline
text-transform	Pone el texto a mayúsculas o minúsculas, o sólo la primera letra a mayúsculas	capitalize, uppercase, lowecase o none, por defecto no hace nada.
text-align	Justificación del texto	left, right, center o justify
text-indent	Tabulación con que aparece la primera línea del texto	tamaño o porcentaje, por defecto cero.

 

Propiedades de color y fondo

También es posible cambiar los colores y el gráfico de fondo de un elemento.
 

Propiedad	Descripción	Posibles valores
color	Color del texto.	un color (en el formato habitual).
background	Modifica tanto el gráfico el color de fondo.	dirección del fichero que contiene la imagen o un color.

Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente modo:

Propiedades de clasificación

Hasta ahora habíamos distinguido a la hora de ver las propiedades de un elemento en si estos eran tratados como bloques o no. Pero el ser bloques o no... ¿no es acaso otra propiedad? Estas y otras formas de clasificar los elementos se pueden cambiar usando las siguientes propiedades:
 

Propiedad	Descripción	Posibles valores
display	Decide si un elemento es interior (como <I>), un bloque (<P>) o un elemento de una lista ( <LI>).	inline, block, list y none (que 'apaga' el elemento)
list-style	Estilo del elemento de una lista, pudiendo incluir un gráfico al comienzo del mismo.	disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico
white-space	Decide como se manejan los espacios, si de manera normal o como sucede dentro de la etiqueta <PRE>	normal y pre

Y ahora... ya no hay más... ¡por fín acabamos!
 
 

Lenguajes de script

Introducción

Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace.

Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas CGI.

El primer lenguaje de script que vió la luz fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.

El máximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0. Fue también entonces cuando introdujo el único rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script: el VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusión en Internet debido a la previa implantación del JavaScript y a que son de parecida funcionalidad, pero sí es utilizado dentro de Intranets basadas en el Explorer.
 

JavaScript

Como este curso está orientado a Internet, no vamos a ver nada de VBScript aquí por las razones comentadas anteriormente. Pero para ilustrar la utilidad de los lenguajes de script.

Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el famoso mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje. El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.
 

<HTML> <HEAD>   <SCRIPT LANGUAGE="JavaScript"> <!---     function HolaMundo() {       alert("¡Hola, mundo!");     }   ---> </SCRIPT> </HEAD> <BODY> <FORM>   <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"> </FORM> </BODY> </HTML>

Y aquí está nuestro ejemplo funcionando:

Ahora vamos a ver, paso por paso, que significa cada uno de los elementos que tiene la página anterior:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Esta es nuestra primera función en JavaScript. En el código de la misma vemos una llamada al método alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales en una función: no los reconoce. Así que pondremos directamente "¡" arriesgándonos a que salga de otra manera en ordenadores con un juego de caracteres distinto al del nuestro.
 

<FORM>   <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"> </FORM>

Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: onClick. Es un evento. Cuando el usuario pulsa el botón, el evento onClick se dispara y ejecuta el código que tenga entre comillas, en este caso la llamada a la función HolaMundo(), que tendremos que haber definido con anterioridad.

Este ejemplo muestra una pequeña parte de las funcionalidades del JavaScript. De hecho, su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un vistazo a las referencias a JavaScript que parecen al comienzo de este documento.
 
 

Capas

Introducción

Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre deberá ser especificado dentro de la parte principal de la página. Como se puede ver, de nuevo estamos siguiendo la filosofía de separar el contenido y la forma de representarlo.

En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La denominación oficial podría traducirse como "contenido HTML posicionable dinámicamente". Tampoco se las puede considerar dentro de ningún estándar HTML, pero son la base de lo que se ha dado en llamar HTML dinámico.

Sin duda, lo más importante de las capas es la posibilidad que presentan de ser movidas y modificadas desde un lenguaje de script. Desgraciadamente, las implementaciones de Netscape y Explorer son incompatibles entre sí, por lo que resulta complicado escribir código que funcione en ambas plataformas. Estos temas los estudian en profundidad los cursos de HTML dinámico.
 

Definición

La única manera común de definir capas en Explorer y Netscape (versiones 4 y superiores cuandos las haya) es mediante hojas de estilo en sintaxis CSS, por lo que será la que usemos de aquí en adelante.

La definición de una capa sigue la misma estructura que la que usabamos para decidir las características de una etiqueta con el parámetro ID:
 

<STYLE TYPE="text/css"> #micapa {position:absolute; top:100px; left:20px;} </STYLE>

Esto colocaría a la capa que hemos denominado micapa a 20 pixels de la izquierda de la página y a 100 del comienzo de la misma. Pero... ¿donde escribimos lo que queremos que contenga la capa? Utilizaremos para ello la etiqueta <SPAN>:
 

<DIV ID="micapa"> <H1>El título de la capa</H1> <P>Aquí es donde iría el texto. ... </DIV>

Las capas que hemos definido hasta ahora se colocan en una posición determinada de la página. Pero existe otro tipo de capas llamadas flotantes cuya colocación depende, en cambio, de la posición dentro del código fuente de la página donde las hayamos colocado. Se definen así:
 

<STYLE TYPE="text/css"> #flotante {position: relative; left: 20px; top: 100px;} </STYLE>

Puedes ver un ejemplo que te mostrará las diferencias entre capas absolutas y relativas.

 

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    <meta name="GENERATOR" content="Mozilla/4.51 [en] (WinNT; I) [Netscape]">    <title>Ejemplo de capas</title> <style TYPE="text/css">     #normal { position: absolute; top: 200px; left: 100px; width:200px; height:200px; visibility: visible;}     #flotante { position: relative; left: 100px; visibility: visible;}   </style> </head> <body bgcolor="#FFFFFF" onLoad="window.defaultStatus='Ejemplo de capas';return true"> Esto no es ninguna capa. Es la p&aacute;gina "normal".<span ID="normal">Esta capa es normal, y est&aacute; a 100 pixels a la izquierda del margen del documento y a 200 m&aacute;s abajo del comienzo del mismo.</span><span ID="flotante">Esta capa relativa, se coloca exactamente 100 pixels a la izquierda de lo &uacute;ltimo que hayamos escrito en la p&aacute;gina "normal". Podemos ver c&oacute;mo se sit&uacute;a tambi&eacute;n a 100 pixels del margen izquierdo en cuanto se corta la primera l&iacute;nea.</span> <p>Esto tampoco est&aacute; en ninguna capa. Se supone que debe aparecer justo debajo de la capa relativa </body> </html>

Propiedades

Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estas:
 

Propiedad	Descripción	Posibles valores
left y top	Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa.	distancia en pixels, por defecto cero
width y height	Determinan la anchura y altura de la capa.	un tamaño en pixels
clip	Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de 30-10 de ancho y 40-20 de alto.	un área
z-index	Las capas con un mayor z-index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index.	número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba.
visibility	Especifican si la capa debe verse o estar oculta.	visible, hidden o inherit (hereda la visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a show.
background-image	Gráfico de fondo de la capa.	una dirección
background-color y layer-background-color	Color de fondo de la capa.	un color

Introducción

A lo largo de mi deambular por Internet, he ido desarrollando pequeñas manías y visto o creido ver defectos en las páginas web. Sin embargo, después de leer un par de cursos de HTML y alguna que otra guía de estilo, me he dado cuenta de que la mayoría de la gente parece pensar como yo.

Así pues, este capítulo consiste en una serie de consejos que te pueden servir para hacer tu página más atractiva y de mayor calidad. Es recomendable leerla aunque luego no la sigas al pie de la letra: te pueden dar una idea de lo que debe ser una web.
 

Contenido

Cualquier página será visitada si su contenido es interesante. Casi da lo mismo su estructura y diseño si la información es lo suficientemente interesante. Así que quizá sea conveniente detenernos un poco en qué es lo que debe tener nuestra página web.

En Internet uno visita lo que quiere, y la mayoría de las veces lo que a la gente le interesa y lo que a nosotros nos interesa que vean no es lo mismo. Así pues, el mejor modo de conseguir que vean lo que queremos es ofrecerles lo que quieren.

De todas maneras no hay que engañarse: los contenidos que te interesa que la gente conozca y que no sean "populares" no serán visitados más que por una pequeña parte de los interesados por los contenidos "populares". Pero siempre lo serán más que si no lo hubiéramos hecho.

El averiguar qué poner es fácil. Prácticamente todo el mundo tiene algún hobby, alguna pasión, o domina algún tema bastante por encima de la media. Sobre ese tema deberá estar enfocada su página. Porque, para qué engañarnos: a nadie le interesan esas páginas personales que sólo contienen tres fotos del autor, una de su novia y otra de su perro, junto con la historia de su vida y un curriculum y una serie de enlaces a páginas de sus amigos.

Conviene también, sabiendo que el usuario ha acudido a tu página por el interés hacia un tema específico, facilitarle enlaces a páginas similares. Te lo agradecerá.
 

Navegación

Es muy importante que sea sencilla e intuitiva la navegación por las páginas que componen tu web. Dependiendo del tamaño de la página no se debería tardar más de tres toques de ratón en ir de una página a otra. Sin embargo, esto no se debe conseguir por medio de una saturación de enlaces porque el usuario podría perderse.

Hay muchas maneras de conseguirlo. La primera es utilizar un marco como índice, que siempre nos permitiría acudir a las seciones principales en nuestra web. También resulta útil incluir enlaces a la página principal y a la página principal de la sección que el usuario está consultando.

En definitiva, no hay receta única, pues el éxito de tu sistema de navegación depende en buena medida de los contenidos y estructura de tu web. Resulta útil ver a alguien ajeno a su desarrollo navegar por ella sin darle ninguna clase de pistas: en general se pueden ver con facilidad los mayores problemas que pueda tener.

Sin embargo, hay algo que siempre irrita al usuario: enlaces a páginas vacías o con un gráfico que señale que esa página está en construcción. Si te lleva tiempo desarrollar una sección pero quieres que los usuarios sepan que estará ahí colocala con las demás en la lista de enlaces, pero que ella no tenga. Que se vea el nombre aunque no lleve a ninguna parte.
 

Estructura de las páginas

Es fundamental a la hora de ponerte a crear páginas el pensar en una estructura común y consistente, porque facilita la navegación y le confiere personalidad propia. Esa estructura puede estar dada por una manera común de titular las secciones, un fondo, un logo, una manera común de colocar gráficos y texto, o una combinación de todo esto.

Hay que cuidar la longitud de las páginas: que no sean ni demasiado cortas ni demasiado largas. La página debe contener información suficiente para resultar interesante y no tanta como para desanimar al posible lector.

Recuerda que el título que le pones a tu página es por lo que se conocerá tu página. Es lo que guarda el navegador en su índice de marcadores, favoritos o bookmarks. Por ello, es conveniente que sea significativo y pueda ser entendido fuera de contexto.

Conviene que el primero párrafo o las primeras frases de todas las páginas contengan un resumen o idea del contenido del resto de la misma. Eso ayuda al usuario a localizar más fácilmente la información.

A su vez, resulta bastante útil indicar la fecha de la última modificación de la página, aunque es aún mejor si esa fecha hace referencia a la última modificación del contenido, que al fin y al cabo es lo que le interesa el usuario.

Por último, uno de los aspectos más importantes de Internet como medio es la facilidad de comunicación entre creadores y usuarios: facilitala incluyendo tu dirección de correo. Si crees que puede ser interesante, ayuda y anima al usuario con formularios o libros de visita.
 

Accesibilidad

Hay que tener en cuenta que, en general, no sabes con qué navegador visitarán tus páginas. Ni cómo estará configurado. Ni la resolución del monitor. Ni la potencia de su CPU. Ni siquiera si el navegador es capaz de ver gráficos. Y como se supone que la red es algo de lo que debe poder disfrutar todo el mundo conviene hacerla accesible.

Para ello hay que tener en cuenta algunas cosas. Para empezar, que las páginas siempre se ven distintas dependiendo del navegador que usemos. Conviene no usar elementos que sólo funcionen con un navegador, como puede ser el texto parpadeante o las marquesinas. Y siempre será bueno probar con más de un navegador las páginas: no siempre representan igual las mismas etiquetas.

Hay gente que viaja por la red con navegadores en modo texto o que, debido a la lentitud de su conexión, configuran su navegador para que no cargue los gráficos. Por ello, conviene añadir siempre el parámetro ALT a todas nuestras imágenes. También, y por la misma causa, conviene dar una alternativa en texto de nuestros mapas.

Es aconsejable probar nuestras páginas a la resolución mínima de 640x480 y comprobar que se puede ver y navegar con relativa comodidad. Es desgraciadamente frecuente ver marcos índice diseñados para verse a 800x600 y que impiden cambiarlos de tamaño y se han eliminado las barras de desplazamiento.

Es convieniente no abusar de los applets Java ni hacer de ellos un elemento imprescindible en nuestra web. A gente con pocos recursos en potencia de CPU o usuarios de Windows 3.1 no les resulta muy agradable estas aplicaciones.

En definitiva, eliminar barreras arquitectónicas.
 

Diseño

Una página atractiva, con gráficos bonitos y bien escogidos y colocados es algo siempre recomendable. Pero no si, debido a ello, la página tarda dos días y medio en terminar de cargarse. Hay que tener en cuenta que estamos trabajando en un medio llamado Internet que, aunque denominado autopista de la información, en realidad suele parecerse más bien a una carretera comarcal. Así pues, a la hora de diseñar nuestras páginas, deberemos cuidar el equilibrio entre belleza gráfica y tiempo de carga.

Recuerda que el gráfico de fondo no debe dificultar la lectura del texto. Si utilizamos uno oscuro que el color del texto sea claro y viceversa.

Los gráficos animados, en general, resultan muy entretenidos para el autor pero poco útiles para el usuario. No deberían usarse más que para cosas sobre las que realmente quieres llamar la atención (como el uso del texto parpadeante) o en aquellos casos en que su tamaño no sea excesivo.

Mientras puedas, evita los gráficos grandes meramente ornamentales. Que tengan algo de utilidad, sea como título, enlace, aportación al documento, etc. Luego procura que, además, sean bonitos.

Procura evitar el exceso de líneas horizontales: dan la sensación de una página inconexa y troceada.

Evita la proliferación de marcos. Si pones muchos es posible que el usuario se pierda y no sepa en cuál está cada cosa. Recuerda que sólo puede haber uno con información y todos los demás deben ser auxiliares de este. El marco principal debe destacar sobre los otros por su mayor tamaño.
 

Mantenimiento y pruebas

Resulta conveniente que el código sea claro y fácilmente comprensible: así evitas los problemas de no entender cómo hiciste una página en un momento dado, o de no encontrar esa parte que tienes que modificar entre tanto texto.

Resulta conveniente que otras personas prueben tus páginas. Y que cuando las prueben ya están en la red, aunque no sean accesibles más que para los probadores. Hay que cuidar que estos no conozcan previamente las páginas ni hayan tenido que ver con su desarrollo.

Y esto es todo. Que disfruteis creando páginas.
 

Este Curso de HTML ha sido básicamente creado por ©Multivac Software 1998 y ligeramente modificado por R.M.Carro.