I

Introduccin al
Diseo Web.

Diseo de Sitios Web

Introduccin al Diseo Web.

Conceptos Bsicos.
Internet: es un conjunto descentralizado de redes de comunicacin interconectadas
que utilizan la familia de protocolos TCP/IP, garantizando que las redes fsicas
heterogneas que la componen funcionen como una red lgica nica, de alcance
mundial.
Http: HyperText Transfer Protocol (Protocolo de transferencia de hipertexto) es el
mtodo ms comn de intercambio de informacin en la world wide web, el mtodo
mediante el cual se transfieren las pginas web a un ordenador.
WWW: es bsicamente un medio de comunicacin de texto, grficos y otros objetos
multimedia a travs de Internet, es decir, la web es un sistema de hipertexto que utiliza
Internet como su mecanismo de transporte o desde otro punto de vista, una forma
grfica de explorar Internet.
Sitio web: En ingls website o web site, un sitio web es un sitio (localizacin) en la
World Wide Web que contiene documentos (pginas web) organizados
jerrquicamente. Cada documento (pgina web) contiene texto y o grficos que
aparecen como informacin digital en la pantalla de un ordenador. Un sitio puede
contener una combinacin de grficos, texto, audio, vdeo, y otros materiales
dinmicos o estticos.
Tipos de sitios web
Los sitios se pueden clasificar de muchas maneras. Cada tipo de sitio tiene unas
caractersticas y limitaciones propias. Una buena organizacin es vital para conseguir los
objetivos del Sitio.
Por su audiencia
Pblicos: Es un WebSite normal, una pgina dirigida al pblico general, sin
restricciones de acceso en principio.
Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por
ejemplo los proveedores de una empresa determinada, o los clientes.
Intranet: Son sitios cuyo acceso est restringido a una empresa u
organizacin, normalmente funcionan dentro de redes privadas, aunque no
siempre es as.
Por su dinamismo
Aqu encontramos sitios interactivos y sitios estticos:
Sitios Interactivos: El usuario puede influir sobre el contenido del sitio que
variar en funcin de cada usuario y de los objetivos de ste. Normalmente, las

Diseo de Sitios Web

pginas se generan cuando el usuario las solicita, personalizando la informacin
que se le ofrece.
Sitios estticos: Los usuarios no pueden modificar o aadir nada al sitio, de
cuyos contenidos se encargan exclusivamente sus diseadores.
Sitios Dinmicos: El trmino programacin dinmica, es un concepto nuevo
con respecto a las pginas html conocidas hasta ahora. El mismo consiste en la
formacin de una pgina, tanto de grficos como de contenidos, a partir de la
lectura de determinados datos residentes en una base de datos. En otras
palabras, una pgina dinmica no se encuentra pre-armada, sino que se
diagrama "online" en el momento en que es solicitada por el navegador del
usuario.
Por su apertura
Estructuras abiertas, cerradas y semicerradas:
Estructura abierta: Todos los documentos disponen de su direccin y los
usuarios pueden acceder a cualquier punto del WebSite.
Estructura cerrada: Limita el acceso a unos pocos puntos de entrada (incluso
a uno slo). Un ejemplo sera un sitio que requiere un registro previo para
entrar, el usuario siempre tendra que pasar primero por el registro antes de
poder acceder al resto de la pgina.
Estructura semicerrada: A medio camino entre ambas, obliga a los usuarios
a acceder por unos puntos especficos, cmo por ejemplo slo la pgina
principal y las pginas de entrada a las secciones ms importantes.
Por su profundidad
Basada en el nmero de enlaces que hay que pulsar para llegar al contenido. En
general los usuarios prefieren sitios poco profundos. Una buena regla a seguir
es que el usuario no tenga que pulsar ms de 3 enlaces para encontrar lo que
busca.
Por sus objetivos
Comerciales: Estn creados para promocionar los negocios de una empresa.
Su finalidad es econmica. Su audiencia puede estar formada por clientes
(actuales y potenciales), inversores (actuales y potenciales), empleados
(actuales y potenciales) e incluso la competencia y los medios de comunicacin.
Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y
Promocionales (promocionan productos).
Informativos: Su finalidad principal es distribuir informacin. La audiencia de
este tipo de sitios depende del tipo de informacin que distribuyen.
Ocio: Aunque normalmente son sitios con una finalidad econmica, son un
caso especial. No son sitios fciles de crear ni de mantener y a veces siguen
reglas propias; puesto que a veces es ms importante sorprender al usuario con
innovaciones que mantener la consistencia y la estructura.

Diseo de Sitios Web

Navegacin: Su finalidad es ayudar al usuario a encontrar lo que busca en
Internet. Dentro de este grupo se sitan los llamados portales, que intentan
abarcar prcticamente todo dentro del propio sitio.
Artsticos: Son un medio de expresin artstica de su creador o creadores.
Este tipo de sitios suele saltarse todas las convenciones y las nicas normas a
aplicar son las que el propio artista o artistas deseen.
Personales: Al igual que los anteriores, son un medio de expresin de su
creador o creadores. Sus objetivos y su audiencia pueden ser de lo ms
variopinto. Dentro de este grupo puede haber de todo desde colecciones de
fotos de la familia hasta tratados cientficos de primer orden.

Publicacin de un sitio web. (Requerimientos Bsicos)

Un servidor web o servidor HTTP es un programa informtico que procesa una
aplicacin del lado del servidor realizando conexiones bidireccionales y/o
unidireccionales y sncronas o asncronas con el cliente generando o cediendo una
respuesta en cualquier lenguaje o Aplicacin del lado del cliente. El cdigo recibido por el
cliente suele ser compilado y ejecutado por un navegador web. Para la transmisin de
todos estos datos suele utilizarse algn protocolo. Generalmente se utiliza el protocolo
HTTP para estas comunicaciones, perteneciente a la capa de aplicacin del modelo OSI.
El trmino tambin se emplea para referirse al ordenador que ejecuta el programa.
Alojamiento web: el alojamiento web (en ingls web hosting) es el servicio que provee
a los usuarios de Internet un sistema para poder almacenar informacin, imgenes,
vdeo, o cualquier contenido accesible va web. Es una analoga de "hospedaje o
alojamiento en hoteles o habitaciones" donde uno ocupa un lugar especfico, en este
caso la analoga alojamiento web o alojamiento de pginas web, se refiere al lugar que
ocupa una pgina web, sitio web, sistema, correo electrnico, archivos etc. en internet
o ms especficamente en un servidor que por lo general hospeda varias aplicaciones o
pginas web.
Protocolo FTP: siglas de File Transfer Protocol. Mtodo muy comn para transferir uno
o ms ficheros de un ordenador a otro. FTP es un medio especfico de conexin de un
Sitio web para cargar y descargar ficheros. FTP fue desarrollado durante los comienzos
de Internet para copiar ficheros de un ordenador a otro. Con la llegada del World Wide
Web, y de los navegadores, ya no se necesitan conocer sus complejos comandos; se
puede utilizar FTP escribiendo el URL en la barra de localizacin que se encuentra en la
parte superior de la pantalla del navegador. Por ejemplo, al escribir
ftp://nombre.del.sitio/carpeta/nombredelfichero.zip
se
transfiere
el
fichero
nombredelfichero.zip al disco duro del ordenador.
Al escribir ftp://nombre.del.sitio/carpeta/ da una lista con todos los ficheros
disponibles en esa carpeta.

Diseo de Sitios Web

Dominio: Un dominio o nombre de dominio es el nombre que identifica un sitio web.
Cada dominio tiene que ser nico en Internet. Por ejemplo, "www.unan.edu.ni" es el
nombre de dominio de la pgina web de unan. Un solo servidor web puede servir
mltiples pginas web de mltiples dominios, pero un dominio slo puede apuntar a un
servidor.
Un dominio se compone normalmente de tres partes: en www.unan.edu.ni, las tres uves
dobles (www), el nombre de la organizacin (unan) y el tipo de organizacin (edu).
Los tipos de organizacin ms comunes son .COM, .NET, .EDU, y .ORG, que se refieren a
comercial, network, educacin, y organizacin (originalmente sin nimo de lucro,
aunque ahora cualquier persona puede registrar un dominio .org).

Estructura de una web

La estructura de un conjunto de pginas web es muy importante, ya que una buena
estructura permitir al lector visualizar todos los contenidos de una manera fcil y clara,
mientras que un conjunto de pginas web con una mala estructura producir en el lector
una sensacin de estar perdido, no encontrar rpidamente lo que busca.
Antes de crear un conjunto de pginas web uno ha de tener una idea clara de cmo va a
ser la estructura de dichas pginas, es conveniente hacer algn esquema sencillo, para
la mayora de los casos una hoja de papel y un lapicero bastar.

Tipos de estructuras.
Jerrquica
La estructura jerrquica, es la tpica estructura de rbol,
en el que la raz es la hoja de bienvenida, esta hoja se
puede tambin sustituir por la hoja de contenido, en la
que se exponen las diferentes secciones que contendr
nuestro sitio. La seleccin de una seccin nos conduce
asimismo a una lista de subtemas que pueden o no
dividirse.
Este tipo de organizacin permite al lector conocer en qu lugar de la estructura se
encuentra, adems de saber que, con forme se adentra en la estructura obtiene
informacin ms especfica y que la informacin ms general se encuentra en los
niveles superiores.
Lineal
La estructura lineal es la ms simple de todas, la manera de
recorrerla es la misma que si estuvisemos leyendo un libro, de
manera que estando en una pgina, podemos ir a la siguiente
pgina o a la anterior.

Diseo de Sitios Web

Esta estructura es muy til cuando queremos que el lector siga un camino fijo y guiado,
adems impedimos que se distraiga con enlaces a otras pginas. Por otra parte podemos
causar a lector la sensacin de estar encerrado si el camino es muy largo o poco
interesante.
Este tipo de estructura sera vlido para tutoriales de aprendizaje o tours de visita
guiada.
Lineal con jerarqua
Este tipo de estructura es una mezcla de la dos
anteriores, los temas y subtemas estn organizados de
una forma jerrquica, pero uno puede leer todo el
contenido de una forma lineal si se desea.
Esto permite tener el contenido organizado
jerrquicamente y simultneamente poder acceder a toda
la informacin de una manera lineal como si
estuvisemos leyendo un libro. Esta gua sigue bsicamente este tipo de estructura.

Red
La estructura de red es una organizacin en la que
aparentemente no hay ningn orden establecido, las pginas
pueden apuntarse unas a otras sin ningn orden aparente.
Este tipo de organizacin es la ms libre, pero tambin es la ms
peligrosa ya que si no se informa al lector de en dnde se
encuentra, puede perderse o puede no encontrar lo que anda
buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable
asociar la estructura de las pginas con alguna estructura conocida, como por ejemplo la
de una ciudad.
Nota: Es recomendable que los elementos se organicen en carpetas cuando se trabaja
con bastantes pginas y con diversos recursos como imgenes, videos, etc.

Documento HTML
Lenguaje de Marcado de Hipertexto
El HTML (Hyper Text Markup Language - Lenguaje para marcado de hipertexto) es el
lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir,
un lenguaje que permite escribir texto de forma estructurada, y que est compuesto
por etiquetas, que marcan el inicio y el fin de cada elemento del documento.

Diseo de Sitios Web

Un documento hipertexto no slo se compone de texto, puede contener imgenes,
sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento
multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser
visualizados en los navegadores (programas que permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de
mostrar a los usuarios las pginas web resultantes del cdigo interpretado.
Este lenguaje se basa en tags1 (instrucciones que le dicen al texto como deben
mostrarse) y atributos (parmetros que dan valor al tag).

Lenguajes de etiquetas
Uno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo
almacenar la informacin en los archivos digitales. Como los primeros archivos slo
contenan texto sin formato, la solucin utilizada era muy sencilla: se codificaban las
letras del alfabeto y se transformaban en nmeros.
De esta forma, para almacenar un contenido de texto en un archivo electrnico, se
utiliza una tabla de conversin que transforma cada carcter en un nmero. Una vez
almacenada la secuencia de nmeros, el contenido del archivo se puede recuperar
realizando el proceso inverso.

El proceso de transformacin de caracteres en secuencias de nmeros se denomina

codificacin de caracteres y cada una de las tablas que se han definido para realizar
la transformacin se conocen con el nombre de pginas de cdigo. Una de las
codificaciones ms conocidas (y una de las primeras que se publicaron) es la
codificacin ASCII. La importancia de las codificaciones en HTML se ver ms adelante.
1Rtulo,

etiqueta o identificador.

Diseo de Sitios Web

Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de

almacenar los contenidos de texto con formato. En otras palabras, cmo se almacena un
texto en negrita? y un texto de color rojo? y otro texto azul, en negrita y subrayado?
Utilizar una tabla de conversin similar a las que se utilizan para textos sin formato no es
posible, ya que existen infinitos posibles estilos para aplicar al texto. Una solucin
tcnicamente viable consiste en almacenar la informacin sobre el formato del texto en
una zona especial reservada dentro del propio archivo. En esta zona se podra indicar
dnde comienza y dnde termina cada formato.
No obstante, la solucin que realmente se emplea para guardar la informacin con
formato es mucho ms sencilla: el archivo electrnico almacena tanto los contenidos
como la informacin sobre el formato de esos contenidos. Si por ejemplo se quiere
dividir el texto en prrafos y se desea dar especial importancia a algunas palabras, se
podra indicar de la siguiente manera:
<parrafo>
Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma
especial.
</parrafo>

El principio de un prrafo se indica mediante la palabra <parrafo> y el final de un

prrafo se indica mediante la palabra </parrafo>. De la misma manera, para asignar ms
importancia a ciertas palabras del texto, se encierran entre <importante> y </importante>.
El proceso de indicar las diferentes partes que componen la informacin se denomina
marcar (markup en ingls). Cada una de las palabras que se emplean para marcar el
inicio y el final de una seccin se denominan etiquetas.
Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se
forman de la siguiente manera:
Etiqueta de apertura: carcter <, seguido del nombre de la etiqueta (sin espacios en
blanco) y terminado con el carcter >
Etiqueta de cierre: carcter <, seguido del carcter /, seguido del nombre de la
etiqueta
(sin espacios en blanco) y terminado con el carcter >
As, la estructura tpica de las etiquetas HTML es:
<nombre_etiqueta> ... </nombre_etiqueta>

HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las

pginas web habituales estn formadas por cientos o miles de pares de etiquetas. De
hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se
denominan en ingls a los lenguajes de marcado. Adems de HTML, existen muchos
otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y
escribir por parte de las personas y de los sistemas electrnicos. La principal
desventaja es que pueden aumentar mucho el tamao del documento, por lo que en
general se utilizan etiquetas con nombres muy cortos.

Diseo de Sitios Web

Estructura de un documento HTML
Tres son las tags que describen la estructura general de un documento y dan una
informacin sencilla sobre l. Estas tags no afectan a la apariencia del documento y
solo interpretan y filtran los archivos HTML.
1. <HTML>: Limitan el documento e indica que se encuentra escrito en este
lenguaje.
2. <HEAD>: Especifica el prlogo del resto del archivo. Son pocas las tags que van
dentro de ella, destacando la del ttulo <TITLE> que ser utilizado por los
marcadores del navegador e identificar el contenido de la pgina. Solo puede
haber un ttulo por documento, preferiblemente corto aunque significativo, y no
caben otras tags dentro de l. En head no hay que colocar nada del texto del
documento.
3. <BODY>: Encierra el resto del documento, el contenido.
Veamos el siguiente ejemplo que hace uso de estos elementos descritos
anteriormente. Para ejecutarlo en el navegador podemos crear un nuevo archivo de
Bloc de notas, copiar el texto y guardar el archivo con extensin html.

<html> <head>
<title>El primer documento HTML</title>
</head> <body>
<p>El
lenguaje
HTML
es
<strong>tan
sencillo</strong> que prcticamente se entiende sin
estudiar el significado de sus etiquetas
principales.</p>
</body> </html>

Primeros pasos en un documento HTML (Etiquetas bsicas)

Existen tags que permiten hacer uso de estilos de ttulos similares a los que se ven por
ejemplo en Microsoft Word, as mismo se cuenta con tags especfico para editar
prrafos de texto, crear saltos de lnea y agregar comentarios a nuestro cdigo HTML.
1. <H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se
pueden definir seis niveles de titulares, el texto que deseamos que sea un titular

Diseo de Sitios Web

se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags
<H1>.....</H1> hasta <H6>.....</H6>
2. <P>: Prrafos. En principio, sin entrar en detalles de alineacin u otras
caractersticas, digamos que se definen por las tags <P>.....<P>. Esta tag, en un
principio, se dise para saltar de prrafo por lo que puede ir sola "<P>" al final de
un texto indicando que a continuacin se quiere una lnea en blanco aunque le
recomendamos que se acostumbre a utilizarla abrindola y cerrndola.
3. <BR>: Saltos de lnea. Esta tag sirve para realizar un salto de linea, puede poner
tantas como desee y realizar un salto de lnea por cada una de ellas.
4. <!-- -->: Comentarios. Son directivas que nunca se mostrarn a travs del
navegador y que le servirn para recordatorios en futuras revisiones del
documento.

Ahora veamos un ejemplo de cmo aplicar estos nuevos elementos en un documento

HTML.
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<H1>Mi primera pgina</H1>
<!-- Aqu va un comentario que no es
interpretado por el navegador -->
<P>Hola mundo, esta es un pgina con
titular,
que tiene tambin un prrafo y unos cuantos
saltos de lnea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>

Diseo de Sitios Web

E l t e x t o en c d i g o H T M L
Ahora veremos cmo se trabaja con caracteres especiales y formato de texto.
Caracteres especiales y espacios en blanco
Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si
se desea insertar estos caracteres como texto hay que escribir el nombre que los
representa:
< Se representa con &lt;
Se representa con &gt;

>

Existen otra serie de caracteres que no se visualizan correctamente en algunos

navegadores, como es el caso de la y las letras acentuadas, por lo que al igual que
ocurre con los caracteres especiales < y >, para insertarlos como texto habra que
escribir el nombre que los representa.
A continuacin se muestra una lista con algunos caracteres y el nombre con el que han
de ser representados:
C
<
>

&

"

Representacin
&lt;
&gt;
&aacute;
&Aacute;
&eacute;
&Eacute;
&iacute;
&Iacute;
&oacute;
&Oacute;
&uacute;
&Uacute;
&ntilde;
&Ntilde;
&#153;
Representacin
&euro;
&ccedil;
&Ccedil;
&uuml;
&Uuml;
&amp;
&iquest;
&iexcl;
&quot;
&middot;
&ordm;
&ordf;
&not;
&copy;
&reg;

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben
varios espacios en blanco seguidos solamente se mostrar uno en el navegador. Para
conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada
uno de ellos por &nbsp;.
Por ejemplo, para insertar el texto:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:

Diseo de Sitios Web

&iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!

Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello,
podemos insertar el texto entre las etiquetas <font> y </font>, especificando
algunos de los atributos de la etiqueta:
Atributo
Face
Color
Size

Significado
Fuente
Color de texto
Tamao de texto

Posibles valores
nombre de la fuente, o fuentes
nmero hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamao
defecto,
aadiendo + o - delante del valor

por

EJEMPLO <font color="#993366" size="4" face="Comic Sans MS,

Arial, MS Sans Serif">Bienvenidos a mi pgina web</font>
Resaltado del texto <b>
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se
encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden
agruparse segn vayan asociados al tipo de letra o a la informacin que represente el
texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y
que pueden aplicarse varias etiquetas al mismo texto.
A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta
<b>
<i>
<u>
<s>
<tt>
<big>

Significado
negrita
cursiva
subrayado
tachado
teletipo (mquina de escribir)
aumenta el tamao de la fuente

<small>

disminuye el tamao de la
fuente

Ejemplo

Resaltando texto HTML

Resaltando texto HTML
Resaltando texto HTML
Resaltando textoHTML
Resaltando texto HTML

Resaltando texto HTML

Resaltando texto HTML

EJEMPLO

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS

Sans Serif">Bienvenidos a
<b><u><tt>HTML</tt></u></b></font>

Diseo de Sitios Web

L i s t as e n H T M L
Junto con encabezados y prrafos, son otro de los elementos HTML ms comunes.
Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con
alguna en comn:
Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada
elemento de la lista estar encabezado por la tag <li> que puede o no llevar la tag de
cierre </li>. Es conveniente que cada elemento de la lista est en una lnea nueva
aunque todo seguido consiga en la presentacin el mismo efecto. Cuando el navegador
interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial,
aunque se introduzcan modificaciones.

<HTML>
<HEAD>
<TITLE>Usando
Listas</TITLE>
</HEAD>
<BODY>
<H1>Listas</H1>
Una
lista
ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
</BODY>
</HTML>
Algunos atributos que pueden ser utilizados con las listas numeradas son los
siguientes:
Atributo

Valor
1
A

TYPE

a
I

START

Indica en que numero o letra iniciara la lista.

<OL TYPE=A START=5>

Efecto visual
1. Primera lnea
2. Segunda lnea
A. Primera lnea
B. Segunda lnea
a. Primera lnea
b. Segunda lnea
I. Primera lnea
II. Segunda lnea
i. Primera lnea
ii. Segunda lnea

Diseo de Sitios Web

Listas con vietas o sin orden: Se engloban por las tags <ul>.....</ul> y cada
elemento de la lista, tambin estar encabezado por la tag <li>. El resultado es que el
navegador inserta vietas (marcadores) delante de cada elemento.
<HTML>
<HEAD>
<TITLE>Usando
Listas2</TITLE>
</HEAD>
<BODY>
<H1>Listas</H1> Una
lista con vieta
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
Algunos atributos que pueden ser utilizados con las listas numeradas son los
siguientes:
Atributo

Valor
CIRCLE
SQUARE

o
o

Efecto visual
Primera lnea
Segunda lnea
Primera lnea
Segunda lnea

TYPE
Listas de men y de directorio: Estn en desuso puesto que su resultado suele ser,
prcticamente, idntico al de las listas con vietas. o Men: Englobadas por las tags
<menu>.....</menu> y cada elemento encabezado por la tag <li>.
Las listas de menu son similares a las listas sin orden. No se ve diferencia entre una y
otra. La nica diferencia es la sintxis del cdigo donde en vez de utilizar la marca <UL>
se utiliza la marca <MENU>. La marca <MENU> admite los mismos atributos que la
marca <UL>.
Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la
tag <li>.
Las listas de directorio son similares a las listas sin orden. En el Netscape no se ve
diferencia entre una y otra. La nica diferencia es la sintxis del cdigo donde en vez de
utilizar la marca <UL> se utiliza la marca <DIR>. La marca <DIR> admite los mismos
atributos que la marca <UL>.

Diseo de Sitios Web

Listas de definicin: Una lista de definicin es una lista no enumerada en la que se da
una descripcin de cada uno de sus elementos. Un ejemplo tpico es un glosario.
Las listas descriptivas estn definidas por los siguientes elementos:
Elemento <DL>: abre una lista descriptiva y finaliza con </DL>. Define el
inicio de la lista y englobar otras dos marcas (DT y DD) cuya funcin es
caracterizar el elemento y definirlo. El atributo COMPACT est asociado a la
marca DL (<DL COMPACT>) y permite mostrar en la misma lnea el elemento y su
descripcin.
Elemento <DT>: precede a cada item de la lista, el cual no puede sobrepasar
la longitud de una lnea. Este elemento no resalta el texto de cada item por lo
tanto si quiere algn formato especial como negrita o cursiva habr que
especificarlo con sus correspondientes marcas. No tiene final de marca.
Elemento <DD>: corresponde a la zona de definicin de cada item. El
tamao de esta zona no est limitado y cada lnea se sangrar hacia la
derecha. No tiene final de marca.
La estructura de este modelo de lista ser la siguiente:
<DL>
<DT> Identificacin del elemento <DD> Descripcin del elemento
<DT> ... <DD> ...
</DL>
Por ejemplo:
<HTML>
<HEAD>
<TITLE>Usando Listas de definicin</TITLE>
</HEAD>
<BODY>
<H1>GLOSARIO</H1>
<dl compact>
<dt>ASCII <dd> Juego de caracteres que asigna valores numricos estndar a las
letras, cifras y signos de puntuacin.
<dt>EPS <dd> Formato de descripcin de ficheros PostScript.
<dt>FUENTE <dd> Conjunto de estilos que posee una categora de caracteres
(negrita, cursiva, etc...).
</dl>
</BODY>
</HTML>
Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista
secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista
pero recuerde estructurar bien las tags: Las tags de la lista principal englobarn todo el
conjunto de las listas y las tags de las listas secundaras se cerraran antes de volver a la
lista principal. Ahora quiz le empiece a convenir sangrar el propio cdigo conforme lo va
escribiendo en HTML.

Diseo de Sitios Web

Tablas en HTML
Introduccin
Las tablas son una de las herramientas ms tiles de que disponemos en HTML, ya que
nos van a permitir en cierto modo "maquetar" nuestro documento, ayudndonos a situar
dentro del mismo los diferentes elementos que lo componen, siendo esta la nica forma
coherente que haba antes de la introduccin de las Hojas de Estilo y de las etiquetas.
Es por esta facilidad a la hora de organizar con tablas nuestras pginas el que el 99% de
las que veamos en Internet las usen, aunque muchas veces no las veamos
directamente porque estn "ocultas".

Estructura de una tabla

Las tablas estn formadas por filas, columnas y celdas. Cada espacio horizontal
continuado es una fila y cada espacio vertical continuado es una columna, definindose
una celda como el espacio formado por la interseccin de una fila y una columna.

Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al
navegador dnde empieza y dnde acaba esta; esto se consigue mediante la etiqueta de
inicio <TABLE> y su correspondiente de cierre </TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que
hacemos con las etiqueta de inicio de fila <TR> y su correspondiente de cierre de fila
</TR>, por lo que deberemos insertar una pareja de etiquetas por cada fila que
queramos que tenga la tabla.
Por ltimo, dentro de cada fila deberemos indicar cuantas celdas va a haber, que
inicialmente deben corresponderse con el nmero de columnas que deseemos tenga la
tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de
etiquetas sera el siguiente:

Diseo de Sitios Web

Este es el esquema general de toda tabla simple, que traducido a cdigo HTML
quedara de la forma:
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>

celda(1,1)
celda(1,2)
celda(1,3)

celda(2,1)
celda(2,2)
celda(2,3)

celda(3,1)
celda(3,2)
celda(3,3)

Atributos de la Tabla
Adems de los atributos especficos de cada celda o lnea, las tablas pueden ser
adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta
<TABLE>. He aqu aquellos que pueden parecernos en un principio importantes:
align

Alinea horizontalmente la tabla con respecto a su entorno. Los valores

que se le pueden asignar son: center, right, left.

background Nos permite colocar un fondo para la tabla a partir de un enlace a una
imagen.
bgcolor

Da color de fondo a la tabla.

Diseo de Sitios Web

border

Define el nmero de pixels del borde principal.

bordercolor Define el color del borde.

cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido
de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
scope

Indica las celdas para las que esta celda ser su cabecera. Ej:
scope="col" indica que esta celda es la cabecera de todas las dems
celdas que estn en la misma columna

Para las filas y/o columnas se pueden aplicar las siguientes propiedades:
VALIGN:
ALIGN:
celda.

permite una alineacin del texto en el sentido vertical de la celda.

Admite los valores: TOP, BOTTOM, MIDDLE.
permite una alineacin del texto en el sentido horizontal de la
Admite los valores: RIGHT, CENTER, LEFT.
<CENTER>
<TABLE BORDER>
<CAPTION>Titulo Superior (por defecto)</CAPTION>
<TR>
<TD></TD>
<TH COLSPAN=3>Atributos de alineacin, Align
VAlign</TH>
<TR>
<TH>Alineacin<BR>Vertical</TH>
<TD VALIGN=top>Top</TD>
<TD VALIGN=middle>Middle</TD>
<TD VALIGN=bottom>Bottom</TD>
<TR>
<TH>Alineacin<BR>Horizontal</TH>
<TD ALIGN=left>Left</TD>
<TD ALIGN=center>Center</TD>
<TD ALIGN=right>Right</TD>
</TABLE>
</CENTER>

Para las columnas podemos utilizar exclusivamente las siguientes propiedades extra:
COLSPAN:

Sirve para crear celdas que se extienden varias columnas. Se indica el

nmero de columnas necesarias para una celda. Por lo general, para una
celda slo se necesita una columna, y en ese caso no es necesario indicar
ningn valor. Pero si una celda se ha de extender, por ejemplo, en tres
columnas, deber asignar el valor COLSPAN="3". El uso de este atributo es
opcional.

Diseo de Sitios Web

ROWSPAN: Se encarga de unir celdas repartidas por varias lneas. Con ayuda de
este atributo se pueden unir varias celdas de una tabla repartidas por
varias lneas. Esta opcin es necesaria por ejemplo, cuando una de las
celdas de la tabla debe ser ms alta que las dems. En lugar de definir
varias celdas, indique una sola celda y asgnele el atributo ROWSPAN.
Como valor, transmtale al atributo el nmero de lneas que desea unir. El
uso de este atributo es opcional.
NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola lnea.
Por ejemplo:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN="bottom">Tabla 2.1.</CAPTION>
<TR ALIGN="center">
<TD></TD>
<TH>Ventana 1</TH>
<TH>Ventana 2</TH>
<TH>Ventana 3</TH> <TR
ALIGN="center">
<TH>Color<BR>Fondo</TH>
<TD>blanco</TD>
<TD>gris</TD>
<TD>amarillo</TD>
<TR ALIGN="center">
<TH>Color<BR>Texto</TH>
<TD>azul</TD>
<TD ROWSPAN=2> negro </TD>
<TD>negro</TD>
<TR ALIGN="center">
<TH>Color<BR>Smbolos</TH>
<TD>rojo</TD>
<TD>verde</TD>
</TABLE>
</CENTER>

Diseo de Sitios Web

I m g e n e s y e n l a c es
Imgenes <IMG>
El uso de imgenes es uno de los factores que ha popularizado tanto World Wide Web.
Incluir imgenes en una presentacin web es muy sencillo, solo debe de tener en
cuenta que las imgenes tienen que tener los formatos GIF, JPEG o PNG. Las imgenes en
lnea, se especifican a partir de la tag <img> que no tiene una tag correspondiente
de cierre pero que puede acompaarse de los siguientes atributos:
SRC= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre
comillas) o la URL que se va a representar.
ALIGN= Permite controlar la alineacin de una imagen con respecto a una lnea de
texto adyacente o a otras imgenes en esa lnea. Los tres valores posibles son los ya
conocidos left, right, top, middle y bottom.
ALT= Es la alternativa que se estableci cuando todava existan visualizadores de
solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no
se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratn por
encima.
WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al
navegador a representar la imagen, significa el ancho de la imagen que vamos a
representar.
HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este
significa el alto de la imagen.
BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un
beb">
Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el
texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>. En este
caso, lo que incluiremos dentro de esa etiqueta ser la imagen en lugar del texto:
Este cdigo mostrar la imagen en el centro:
<div align="center"><img src="logo.gif"></div>
El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en el caso
de darle los valores left o right, justificar la imagen del lado que deseamos a la vez que
rellenamos con texto el lado opuesto. De esta forma embebemos nuestras
imgenes dentro del texto de una manera sencilla. Por ejemplo:
<p>
<img src="imagen.gif" align="right">Texto tan extenso como queramos que cubrir la
parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla
bla bla bla bla...
</p>

Diseo de Sitios Web

Imgenes como fondo de pgina
Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una
imagen residente en el servidor, o en un fichero local, como fondo de pgina. El valor
que deber tomar dicho atributo es la direccin donde se encuentra el fichero que
contiene la imagen. La sintaxis ser:
<BODY BACKGROUND="direccion_del_fichero_grafico">
Ejemplo:
<BODY BACKGROUND="images/blanco51.gif">
Imgenes como marcas de una lista
Para obtener una lista adornada con algn tipo de icono se podrn utilizar las listas de
definicin de la siguiente forma:
<DL>
<DT><IMG SRC="images/vieta.gif"> Lnea de texto
<DT><IMG SRC="images/vieta.gif"> Lnea de texto
<DT><IMG SRC="images/vieta.gif"> Lnea de texto
</DL>

Hipervnculos
Es uno de los ms importantes del HTML, ya que es el que realmente permite
"navegar" por uno o varios documentos, que pueden residir en cualquier parte, dando,
sin embargo, la impresin de que se trata de un solo documento.
Esto se consigue definiendo enlaces hipertextuales del Web mediante el elemento <A> y
sus atributos: NAME, HREF y TARGET. El lector podr por tanto explorar el
documento picando con el ratn sobre las zonas activas definidas, denominadas
hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una
imagen, o bien una porcin de imagen. En cualquier caso el principio es el mismo:
asociar a la zona activa la direccin URL del documento que sustituir al visualizado
cuando se pulse con el ratn sobre esa zona. (Ver El protocolo de direccionamiento de
documentos: URL)
Un puntero puede colocarse en cualquier lugar del texto. Puede ser un elemento de una
lista, o texto normal; puede estar enriquecido con atributos de estilo fsico, lgico o de
prrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como
tal: los enlaces activables se destacan automticamente (color y subrayado), siempre y
cuando el usuario no realice una parametrizacin especial del browser.
La definicin por defecto del color de los enlaces de un documento puede ser
modificada mediante el elemento <BODY> y los atributos LINK, ALINK y VLINK.
Para especificar la partida y la llegada de un enlace hipertexto se define:
Ancla de partida: es la zona activa sobre la que el lector pulsar con el ratn para
llamar a una nueva pgina. Este ancla se define mediante el atributo HREF.
Ancla de llegada: es una zona inactiva que especifica el punto de llegada de un
enlace de hipertexto. Esta es pues una direccin. Este ancla se define mediante el
atributo NAME.
<A>

Diseo de Sitios Web

El elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML.
Este elemento nunca se utiliza solo, por tanto siempre vendr acompaado por,
al menos, uno de sus dos atributos principales:
El atributo HREF que define un ancla de partida. El
atributo NAME que define un ancla de llegada.
Adems permite el atributo TARGET para ordenar la apertura de una nueva ventana del
browser con la pgina indicada por HREF.
A continuacin se detallan cada uno de estos atributos.
EL ATRIBUTO NAME
Este atributo define un punto de llegada en el documento destino asignndole un
nombre o etiqueta:
<A NAME="etiqueta"> Zona no activable </A>
Luego mediante el atributo HREF desde el fichero de partida se indicar el documento
y la posicin dentro de dicho documento a la que se quiere acceder:
<A HREF="documento#etiqueta"> Zona activable </A>
Hay que tener en cuenta que la etiqueta debe estar compuesta por un texto sin
espacios en blanco, caracteres especiales ni caracteres codificados. Dicha etiqueta no
deber estar repetida dentro del mismo documento destino.
EL ATRIBUTO HREF
Este atributo define un ancla de partida hacia un enlace externo o interno, o sea, crea un
enlace hacia un nuevo documento propuesto por dicho servidor o hacia un punto
determinado dentro del documento actual. La sintxis tpica es:
<A HREF="url_de_destino">zona activable con atributos visuales</A>
Ejemplos:
<A HREF="http://www.ieonline.unan.edu.ni/av/ "> Aula Virtual Informtica Educativa
</A>
EL ATRIBUTO TARGET
Este atributo ordena la apertura de una nueva ventana con el documento indicado por el
atributo HREF.
Ejemplo:
<A HREF="http://www.ieonline.unan.edu.ni/av/ " TARGET="_blank">Nueva ventana
</A>
Los valores que puede adquirir el target son:
_blank, para una nueva ventana
_self, para abrir el enlace en la misma ventana/frame
_top, para abrirlo en toda la ventana y eliminando frames
_parent, ventana padre
Nombre del marco o ventana, marco o ventana cuyo nombre coincida con el
especificado.

Diseo de Sitios Web

Formularios en HTML
1. Introduccin
Los formularios son una caracterstica del estndar HTML (lenguaje de marcas
hipertextual) que permite a los autores colectar informacin provista por los visitantes.
Estos formularios pueden ser tiles para recolectar informacin personal, informacin de
contacto, preferencias u opiniones, o cualquier tipo de entrada por parte del visitante
que el autor pueda necesitar.
Un formulario puede ser insertado en un documento HTML mediante el tag <form> el
cual acta como contenedor para todos los elementos de entrada (input). Toda la
informacin recolectada por un formulario puede ser entregada a un agente
procesador que es usualmente especificado en el atributo "action" (el cual puede ser
suprimido mediante el uso de JavaScript).
Tambin puedes necesitar especificar cmo la informacin ser enviada en el valor del
atributo "method": "post" (los datos son adjuntados al cuerpo del formulario) o "get"
(los datos son adjuntados a la URL (Localizador Uniforme de Recursos)). Se
supone que el agente procesador conoce y maneja el mtodo de envo del formulario.
De esta forma, un formulario simple puede tener la siguiente declaracin:
<form method="post" action="manejador.php">
...Controles...
</form>

<form>

Sirve para insertar un formulario en una pgina web

Atributos
especficos

action = "url" - Indica la URL que se encarga de procesar los datos del
Formulario.
method = "POST o GET" - Mtodo HTTP empleado al enviar el
formulario.
enctype = "application/x-www-form-urlencoded o multipart/
form-data" - Tipo de codificacin empleada al enviar el formulario al
servidor
(slo se indica de forma explcita en los formularios que permiten adjuntar
archivos).
accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos
de archivos aceptados por el servidor (slo para los formularios que
permiten
adjuntar archivos)

Ejemplo 1.
Los formularios ms sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y

Diseo de Sitios Web

<input>. Si se considera el formulario que muestra la siguiente imagen:

El cdigo HTML necesario para definir el formulario anterior se muestra a continuacin:

<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:<input type="text" name="nombre" value="" />
<br/>
<input type="submit" value="Enviar" />
</form>
</body> </html>

2. Elementos de entrada
La mayora de los elementos de entrada son visuales y pueden interactuar con el
usuario. Su uso depende del tipo de control y tambin del tipo de informacin que
pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos
usando los siguientes tags: el tag HTML input, el tag HTML button, el tag HTML select y
el tag HTML textarea.
El atributo "name" de cada control ser el nombre utilizado para identificar los datos
para el agente procesador, y el valor depender de la naturaleza del control (algunas
veces, como en las casillas de verificacin o botones radio, ser el contenido del
atributo "value").

2.1.

Entrada de texto

Existen tres tipos de entradas de texto que pueden recolectar informacin textual como
nombres, comentarios, etc.
2.1.1. Entrada de texto de lnea
Este control recopila informacin textual en una sola lnea, lo que significa que el
usuario no podr utilizar la tecla "enter" para ir a la siguiente lnea. Este control es

Diseo de Sitios Web

insertado en documentos HTML usando la etiqueta input con el valor "text" para el
atributo "type".

Ejemplo 2:
<form method="post" action="manejador.php">
<p>Ingresa texto: <input name="textoentrada" type="text" /></p>
</form>

El valor pasado al agente procesador ser el texto ingresado por el usuario, o sea el
contenido dentro de la caja de texto.
El atributo name es importante, ya que es el nombre del campo bajo el cual se accede
va css o javascript, para realizar algunas operaciones como aplicacin de estilos o
validaciones.
2.1.2. Entrada de texto contrasea (password)
Este control acta exactamente como la entrada de texto de lnea, con la excepcin de
que este control "esconde" los caracteres mostrndolos como puntos para evitar que los
usuarios vean el texto ingresado. Es comnmente usado para el ingreso de
contraseas.
Ejemplo 3:
<form method="post" action="manejador.php">
<p>Ingresa contrase&ntilde;a: <input name="contrasena" type="password" /></p>
</form>

El valor pasado al agente procesador ser el texto ingresado por el usuario, o sea el
contenido dentro de la caja de texto.
Las propiedades validas para su configuracin son las siguientes (Tambin est
disponible para el control texto.):
Propiedad
size
maxlength
name

Explicacin
Cantidad de caracteres que se muestran.
Numero mximos de caracteres permitidos
Nombre del campo

Diseo de Sitios Web

2.1.3. Entrada de texto de mltiples lneas
Este control permite a los usuarios ingresar texto en una o ms lneas. Es insertado
utilizando el tag HTML textarea y puede ser usado para recolectar prrafos,
comentarios, cartas, etc. En este tag, el contenido ser el valor inicial del texto.
Ejemplo 4:
<form method="post" action="manejador.php">
<p>Ingresa tus comentarios:<br /><textarea name="comentarios"
cols="30">...Tus comentarios aqu&iacute;...</textarea></p>
</form>

rows="2"

Note que los atributos "rows" y "cols" establecen las dimensiones de la caja de texto.

2.2.

Opciones

Los autores tambin pueden permitir a sus visitantes escoger opciones preestablecidas de
una lista. Esto puede ser logrado usando uno de los tres controles siguientes, que
pueden construir diferentes tipos de listas de opciones.
2.2.1. Casillas de verificacin
La casilla de verificacin es una opcin simple que puede tomar uno de
"marcado" o "desmarcado". Las casillas de verificacin pueden ser
agrupadas como una lista de opciones, pero cada una de ellas
individualmente. Este control es insertado mediante el tag HTML input
"checkbox" para el atributo "type".
Ejemplo 5:
<form method="post" action="manejador.php">
<p>Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Pel&iacute;culas<br />
<input name="cbilibros" type="checkbox" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
</p>
</form>

dos valores:
visualmente
es tratada
con el valor

Diseo de Sitios Web

En este caso, el valor pasado ser un valor booleano y representar el estado de

verificacin de la opcin. Dependiendo del agente procesador podra ser "on/off",
"checked/unckecked", "true/false", etc.
2.2.2. Botones radio
Los botones radio funcionan en la misma forma que las casillas de verificacin con
pequeas diferencias: los botones radio que comparten un mismo nombre conforman un
grupo de opciones donde los usuarios no pueden seleccionar ms de una opcin a la
vez. Esto significa que cuando el usuario selecciona una opcin, el resto es
automticamente deseleccionado.
Ejemplo 6:
<form method="post" action="manejador.php">
<p>Selecciona tus intereses:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Pel&iacute;culas<br />
<input name="intereses" type="radio" value="rbilibros" />Libros<br />
<input name="intereses" type="radio" value="rbiinternet" />Internet
</p>
</form>

Para los botones radio el valor pasado al agente procesador es el contenido del
atributo "value", lo que significa que una lista de opciones con varias opciones slo
pasar un valor.
2.2.3. Listas
Estas lista pueden ser insertadas usando tres tags: el tag HTML select (contenedor
principal), el tag HTML option (declaracin de opcin) y el tag HTML optgroup (grupo de
opciones). Este tipo de lista puede ser usado como una lista de botones radio o como
una lista de casillas de verificacin, dependiendo de la presencia del atributo "multiple".
Ejemplo 6:

Diseo de Sitios Web

<form method="post" action="manejador.php">

<p>Selecciona una sola opci&oacute;n, como en los botones radio:<br />
<select name="entradaselect">
<optgroup label="Entradas de texto">
<option>De una sola l&iacute;nea</option>
<option>Contrase&ntilde;a</option>
<option>Multil&iacute;nea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificaci&oacute;n</option>
<option>Botones radio</option>
<option>Listas select</option>
</optgroup>
</select>
</p>
<p>Selecciona tantas opciones como desees, como en las casillas
verificaci&oacute;n (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradaselect" multiple="multiple">
<optgroup label="Entradas de texto">
<option>De una sola l&iacute;nea</option>
<option>Contrase&ntilde;a</option>
<option>Multil&iacute;nea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificaci&oacute;n</option>
<option>Botones radio</option>
<option>Listas select</option>
</optgroup>
</select>
</p>
</form>

de

Diseo de Sitios Web

2.3.

Botones

Los botones son tiles en formularios para enviarlos, reestablecerlos o para ejecutar
funciones personalizadas. Pueden ser insertados usando el tag HTML input (submit,
reset e image) o el tag HTML button (botones con contenido).
2.3.1. Botones de envo
Este tipo de botones enva automticamente el formulario al ser presionados. Son
insertados usando el tag HTML input con el valor "submit" para el atributo "type".
2.3.2. Botones de reestablecimiento
Este tipo de botones reestablecen los controles de un formulario a sus valores iniciales al
ser presionados. Son insertados usando el tag HTML input con el valor "reset" para el
atributo "type".
2.3.3. Botones de imagen
Los botones de imagen funcionan exactamente como los botones de envo con la nica
diferencia de que lo los botones de imagen son mostrados visualmente con la imagen
apuntada en el atributo "src". Estos botones adems envan las coordinadas donde el
click ha ocurrido (por ejemplo, para un botn de imagen llamado "boton1" las
coordenadas sern enviadas con el formulario como "boton1.x" y "boton1.y"). Son
insertados usando el tag HTML input con el valor "image" para el atributo "type".
2.3.4. Botones con contenido
Los botones con contenido pueden ser usados como botones de envo o de
reestablecimiento, o pueden no tener ninguna accin preestablecida (dependiendo del
valor del atributo "type"), pero s permiten a los autores insertar contenido dentro de
ellos. Esto dignifica que un trozo de cdigo HTML puede ser mostrado dentro del botn
(vnculos, prrafos, texto en negrita, imgenes, etc.).

Estructura y layout
Hasta ahora, se han estructurado y marcado con HTML los diferentes elementos
individuales que forman las pginas web (tablas, listas, enlaces, prrafos, imgenes,
etc.). Una pgina web normal puede incluir decenas, cientos y hasta miles de estos
elementos individuales.
Adems, las pginas web habituales suelen tener una estructura compleja creada con
columnas y otro tipo de divisiones. Utilizando exclusivamente HTML no es posible crear
estas estructuras complejas. No obstante, las hojas de estilos CSS necesitan la ayuda del
cdigo HTML para crear los diseos ms avanzados.
Por este motivo, es necesario agrupar los contenidos de la pgina. La estrategia que se
sigue es la de dividir la pgina en zonas en funcin de su finalidad: la zona de la

Diseo de Sitios Web

cabecera de la pgina, la zona de contenidos, una zona lateral para el men y otras
secciones menores, la zona del pie de pgina, etc.
La siguiente imagen muestra las zonas definidas en una pgina web real:

Para agrupar los elementos que forman cada zona de la pgina se utiliza la etiqueta
<div>:
El nombre div viene de divisin, ya que esta etiqueta define zonas o divisiones dentro
de una pgina HTML. En cualquier caso, casi todos los diseadores web utilizan la
palabra "capas" en vez de "divisiones". Aunque se trata de un error grave (las capas se
crean mediante una propiedad de CSS llamada z-index) es preferible seguir llamando
"capas" a las zonas definidas con la etiqueta <div> para poder entenderse con el resto de
diseadores.
Todas las pginas web complejas que estn bien diseadas utilizan decenas de
etiquetas <div>.
Con mucha diferencia, los atributos ms utilizados con esta etiqueta son id (para
identificarlo de forma nica) y class (para aplicarle estilos mediante CSS).
No se va a profundizar en el proceso de disear una pgina web mediante <div>, ya
que no es posible disear una pgina web compleja utilizando elementos <div> pero sin
utilizar hojas de estilos CSS.
Por ltimo, si observas el cdigo HTML de algunas pginas web complejas, vers que la
mayora utilizan los mismos nombres para identificar sus divisiones. Los nombres
ms comunes, y sus equivalentes en ingls, se muestran a continuacin:

Diseo de Sitios Web

contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la pgina y se
emplea para definir las caractersticas bsicas de la pgina: su anchura, sus bordes,
imgenes laterales, si se centra o no respecto de la ventana del navegador, etc.
cabecera (header) que incluye todos los elementos invariantes de la parte superior de
la pgina (logotipo, imagen o banner, cuadro de bsqueda superior, etc.)
contenido (content) engloba el contenido principal del sitio (la zona de noticias, la
zona de artculos, la zona de productos, etc. dependiendo del tipo de sitio web)
menu (menu) se emplea para agrupar todos los elementos del men lateral de
navegacin de la pgina
pie (footer) que incluye todos los elementos invariantes de la parte inferior de la
pgina (aviso de copyright, poltica de privacidad, trminos de uso, etc.)
lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y
secundarias de la pgina.
De esta forma, el esqueleto de una pgina HTML compleja suele ser similar al
siguiente:
...
<div id="contenedor">
<div id="cabecera">
...
</div>
<div id="contenido">
<div id="menu">
..
</div>
...
</div>
<div id="pie">
...
</div>
</div>
...
El equivalente para las pginas en ingls sera el siguiente:
<div id="wrapper">
<div id="header">
...

...

</div>

Diseo de Sitios Web

<div id="content">
<div id="menu">
..
</div>
...
</div>
<div id="footer">
</div>
</div>

DOCTYPE
Los documentos XHTML siguen una estructura similar al resto de documentos creados
con el lenguaje XML. Uno de los conceptos fundamentales de XML es la utilizacin del
DTD o Document Type Definition ("Definicin del Tipo de Documento").
Un DTD es el conjunto de normas y restricciones que se definen para fijar la sintaxis
que deben cumplir los documentos de un determinado tipo. Si por ejemplo se define un
DTD para los documentos relacionados con libros, se puede fijar como norma que cada
libro tenga un ttulo y slo uno, que tenga uno o ms autores, que la informacin sobre el
nmero de pginas pueda ser opcional, etc.
El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un
documento de un determinado tipo, se recogen en su correspondiente DTD.
Para las pginas y documentos XHTML tambin se ha definido un DTD, en el que se
definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de
valores que puede tener cada atributo.
En realidad, existen varios DTD diferentes definidos para crear documentos HTML y
XHTML.
Para la versin XHTML 1.0 existen tres DTD definidos, que se indican mediante un
etiqueta especial llamada doctype.
La etiqueta doctype es el nico elemento que se incluye fuera de la etiqueta <html> de
la pgina.
De hecho, la declaracin del doctype es lo primero que se debe incluir en una pgina
web, antes incluso que la etiqueta <html>.

Diseo de Sitios Web

El uso de un doctype no es un concepto fcil de entender, pero es imprescindible para
crear pginas web correctas y vlidas, como se ver ms adelante. Por el momento, lo
nico que debes tener en cuenta es que las pginas web deben indicar de forma clara
las normas que se han seguido para crear su cdigo HTML.
Aunque las pginas web creadas con XHTML siguen el estndar oficial XHTML definido por
el W3C, existen tres variantes del mismo estndar. Por ese motivo las pginas web deben
indicar la variante que estn utilizando mediante la declaracin del doctype.
Los tres DTD o modelos definidos para las pginas web XHTML se muestran a
continuacin:
XHTML 1.0 Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Se trata de la variante con las normas ms estrictas y las restricciones ms severas.
Las pginas web que incluyan este doctype, no pueden utilizar atributos relacionados
con el aspecto de los contenidos, por lo que requiere una separacin total de cdigo
HTML y estilos CSS.
XHTML 1.0 Transitorio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se trata de una variante menos estricta que la anterior, ya que permite el uso de
algunos atributos HTML relacionados con el aspecto de los elementos.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta ltima variante la utilizan las pginas que estn formadas por frames, una prctica
completamente desaconsejada y que hoy en da slo utilizan los sitios web obsoletos.
Si no tienes claro el DTD que ms te conviene, deberas utilizar el XHTML 1.0
transitorio, ya que es ms fcil crear pginas web vlidas. Si tienes conocimientos
avanzados de XHTML, puedes utilizar XHTML 1.0 estricto.
Junto con el DOCTYPE apropiado, tambin es necesario que las pginas web indiquen el
namespace asociado. Un namespace en un documento XML permite diferenciar las
etiquetas y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o ms lenguajes derivados de
XML (XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podra
determinar a qu lenguaje pertenece cada etiqueta y por tanto, no se podra
interpretar esa etiqueta o ese atributo. Los namespaces se indican mediante una URL.
El namespace que utilizan todas las pginas XHTML (independientemente de la versin y
del DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:

Diseo de Sitios Web

<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De esta forma, es habitual que las pginas XHTML comiencen con el siguiente cdigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
El cdigo anterior es mucho ms complicado que una simple etiqueta <html>. Sin
embargo, para crear pginas XHTML correctas y que superen el proceso de validacin
que se muestra en los captulos siguientes, es obligatorio que comiencen de esa
manera.
Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las
pginas, todo el cdigo anterior se incluye de forma automtica. Si creas las pginas a
mano, slo tienes que copiar y pegar ese cdigo en cada nueva pgina.