Introduccion Disenio Web

I

Introducción alDiseño Web.

Diseño de Sitios Web

Introducción al Diseño Web.

Conceptos Básicos.

Internet: es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial.

Http: HyperText Transfer Protocol (Protocolo de transferencia de hipertexto) es el método más común de intercambio de información en la world wide web, el método mediante el cual se transfieren las páginas web a un ordenador.

WWW: es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través 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 gráfica de explorar Internet.

Sitio web: En inglés website o web site, un sitio web es un sitio (localización) en la

World Wide Web que contiene documentos (páginas web) organizados

jerárquicamente. Cada documento (página web) contiene texto y o gráficos que

aparecen como información digital en la pantalla de un ordenador. Un sitio puede

contener una combinación de gráficos, texto, audio, vídeo, y otros materiales

dinámicos o estáticos.

Tipos de sitios web

Los sitios se pueden clasificar de muchas maneras. Cada tipo de sitio tiene unas características y limitaciones propias. Una buena organización es vital para conseguir los objetivos del Sitio.

Por su audiencia

Públicos: Es un WebSite normal, una página dirigida al público 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 organización, normalmente funcionan dentro de redes privadas, aunque no siempre es así.

Por su dinamismo

Aquí encontramos sitios interactivos y sitios estáticos:

Sitios Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de cada usuario y de los objetivos de éste. Normalmente, las


páginas se generan cuando el usuario las solicita, personalizando la información que se le ofrece.

Sitios estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se encargan exclusivamente sus diseñadores.

Sitios Dinámicos: El término programación dinámica, es un concepto nuevo con respecto a las páginas html conocidas hasta ahora. El mismo consiste en la formación de una página, tanto de gráficos como de contenidos, a partir de la lectura de determinados datos residentes en una base de datos. En otras palabras, una página dinámica 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 dirección y los usuarios pueden acceder a cualquier punto del WebSite.

Estructura cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno sólo). Un ejemplo sería un sitio que requiere un registro previo para entrar, el usuario siempre tendría que pasar primero por el registro antes de

poder acceder al resto de la página. Estructura semicerrada: A medio camino entre ambas, obliga a los usuarios

a acceder por unos puntos específicos, cómo por ejemplo sólo la página principal y las páginas de entrada a las secciones más importantes.

Por su profundidad

Basada en el número 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 más de 3 enlaces para encontrar lo que busca.

Por sus objetivos

Comerciales: Están creados para promocionar los negocios de una empresa. Su finalidad es económica. 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 comunicación. Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y Promocionales (promocionan productos).

Informativos: Su finalidad principal es distribuir información. La audiencia de este tipo de sitios depende del tipo de información que distribuyen.

Ocio: Aunque normalmente son sitios con una finalidad económica, son un caso especial. No son sitios fáciles de crear ni de mantener y a veces siguen reglas propias; puesto que a veces es más importante sorprender al usuario con innovaciones que mantener la consistencia y la estructura.


Navegación: Su finalidad es ayudar al usuario a encontrar lo que busca en Internet. Dentro de este grupo se sitúan los llamados portales, que intentan abarcar prácticamente todo dentro del propio sitio.

Artísticos: Son un medio de expresión artística 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 expresión de su creador o creadores. Sus objetivos y su audiencia pueden ser de lo más variopinto. Dentro de este grupo puede haber de todo desde colecciones de fotos de la familia hasta tratados científicos de primer orden.

Publicación de un sitio web. (Requerimientos Básicos)

Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas con el cliente generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente suele ser compilado y ejecutado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se utiliza el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El término también se emplea para referirse al ordenador que ejecuta el programa.

Alojamiento web: el alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

Protocolo FTP: siglas de File Transfer Protocol. Método muy común para transferir uno

o más ficheros de un ordenador a otro. FTP es un medio específico de conexión 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 localización 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.


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 página web de unan. Un solo servidor web puede servir múltiples páginas web de múltiples dominios, pero un dominio sólo 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 organización (unan) y el tipo de organización (edu).

Los tipos de organización más comunes son .COM, .NET, .EDU, y .ORG, que se refieren a

comercial, network, educación, y organización (originalmente sin ánimo de lucro,

aunque ahora cualquier persona puede registrar un dominio .org).

Estructura de una web

La estructura de un conjunto de páginas web es muy importante, ya que una buena

estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara,

mientras que un conjunto de páginas web con una mala estructura producirá en el lector

una sensación de estar perdido, no encontrará rápidamente lo que busca.

Antes de crear un conjunto de páginas web uno ha de tener una idea clara de cómo va a ser la estructura de dichas páginas, es conveniente hacer algún esquema sencillo, para la mayoría de los casos una hoja de papel y un lapicero bastará.

Tipos de estructuras.

Jerárquica

La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.

Este tipo de organización permite al lector conocer en qué lugar de la estructura se

encuentra, además de saber que, con forme se adentra en la estructura obtiene

información más específica y que la información más general se encuentra en los

niveles superiores.

Lineal

La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior.


Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.

Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.

Lineal con jerarquía

Este tipo de estructura es una mezcla de la dos

anteriores, los temas y subtemas están organizados de

una forma jerárquica, pero uno puede leer todo el

contenido de una forma lineal si se desea.

Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura.

Red

La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde 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 páginas 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 páginas y con diversos recursos como imágenes, 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 páginas 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.


Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Este lenguaje se basa en tags1 (instrucciones que le dicen al texto como deben

mostrarse) y atributos (parámetros que dan valor al tag).

Lenguajes de etiquetas Uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo almacenar la información en los archivos digitales. Como los primeros archivos sólo contenían texto sin formato, la solución utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en números.

De esta forma, para almacenar un contenido de texto en un archivo electrónico, se utiliza una tabla de conversión que transforma cada carácter en un número. Una vez almacenada la secuencia de números, el contenido del archivo se puede recuperar realizando el proceso inverso.

El proceso de transformación de caracteres en secuencias de números se denomina codificación de caracteres y cada una de las tablas que se han definido para realizar la transformación se conocen con el nombre de páginas de código. Una de las codificaciones más conocidas (y una de las primeras que se publicaron) es la codificación ASCII. La importancia de las codificaciones en HTML se verá más adelante.

1Rótulo, etiqueta o identificador.


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, ¿cómo se almacena un texto en negrita? ¿y un texto de color rojo? ¿y otro texto azul, en negrita y subrayado? Utilizar una tabla de conversión similar a las que se utilizan para textos sin formato no es posible, ya que existen infinitos posibles estilos para aplicar al texto. Una solución técnicamente viable consiste en almacenar la información sobre el formato del texto en una zona especial reservada dentro del propio archivo. En esta zona se podría indicar dónde comienza y dónde termina cada formato.

No obstante, la solución que realmente se emplea para guardar la información con formato es mucho más sencilla: el archivo electrónico almacena tanto los contenidos como la información sobre el formato de esos contenidos. Si por ejemplo se quiere dividir el texto en párrafos y se desea dar especial importancia a algunas palabras, se podría indicar de la siguiente manera:

<parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo>

El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica mediante la palabra </parrafo>. De la misma manera, para asignar más importancia a ciertas palabras del texto, se encierran entre <importante> y </importante>.

El proceso de indicar las diferentes partes que componen la información se denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección 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: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >

▪ Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >

Así, la estructura típica de las etiquetas HTML es: <nombre_etiqueta> ... </nombre_etiqueta>

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están 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 inglés a los lenguajes de marcado. Además 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 electrónicos. La principal desventaja es que pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.


Estructura de un documento HTML

Tres son las tags que describen la estructura general de un documento y dan una

información 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 prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del título <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título 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 extensión html.

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

Primeros pasos en un documento HTML (Etiquetas básicas)

Existen tags que permiten hacer uso de estilos de títulos similares a los que se ven por

ejemplo en Microsoft Word, así mismo se cuenta con tags específico para editar párrafos de texto, crear saltos de línea y agregar comentarios a nuestro código 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


se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6>

2. <P>: Párrafos. En principio, sin entrar en detalles de alineación u otras

características, digamos que se definen por las tags <P>.....<P>. Esta tag, en un

principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de

un texto indicando que a continuación se quiere una línea en blanco aunque le

recomendamos que se acostumbre a utilizarla abriéndola y cerrándola.

3. <BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.

4. : Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento.

Ahora veamos un ejemplo de cómo aplicar estos nuevos elementos en un documento HTML.

<HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY>

<H1>Mi primera página</H1>



<P>Hola mundo, esta es un página con titular, que tiene también un párrafo y unos cuantos saltos de línea.</P>

Uno<br> Dos<br> Tres<br> </BODY> </HTML>


E l t e x t o en c ó d i g o H T M L

Ahora veremos cómo 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 < >

Se representa con >

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 habría que escribir el nombre que los representa.

A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Carácter Representación< <> >á áÁ Áé éÉ Éí íÍ Íó óÓ Óú úÚ Úñ ñÑ Ñ™

Carácter Representación€ €ç çÇ Çü üÜ Ü& &¿ ¿¡ ¡" "• ·º ºª ª¬ ¬© ©® ®

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 .

Por ejemplo, para insertar el texto:

¡Bienvenidos, esta es mi 1ª página!

Habría que escribir:


¡Bienvenidos, esta es mi 1ª página!

Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a través 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 Significado Posibles valoresFace Fuente nombre de la fuente, o fuentesColor Color de texto número hexadecimal o texto predefinidoSize Tamaño de texto valores del 1 al 7, siendo por defecto el 3,

o desplazamiento respecto al tamaño pordefecto,añadiendo + o - delante del valor

EJEMPLO <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi página 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 según vayan asociados al tipo de letra o a la información 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 continuación se muestran algunas etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo<b> negrita Resaltando texto HTML<i> cursiva Resaltando texto HTML<u> subrayado Resaltando texto HTML<s> tachado Resaltando textoHTML<tt> teletipo (máquina de escribir) Resaltando texto HTML

<big> aumenta el tamaño de la fuente Resaltando texto HTML<small> disminuye el tamaño de la

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


L i s t as e n H T M L

Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:

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 línea nueva aunque todo seguido consiga en la presentación 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 Efecto visual1 1. Primera línea

2. Segunda líneaA A. Primera línea

B. Segunda línea

TYPEa a. Primera línea

b. Segunda línea

I I. Primera línea

II. Segunda línea

ii. Primera línea

ii. Segunda línea

STARTIndica en que numero o letra iniciara la lista.

<OL TYPE=A START=5>


Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

<HTML> <HEAD> <TITLE>Usando Listas2</TITLE> </HEAD> <BODY> <H1>Listas</H1> Una lista con viñeta <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 Efecto visual

CIRCLE o Primera líneao Segunda línea

SQUARE □ Primera línea□ Segunda línea

TYPE

Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas. 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 sintáxis del código 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 sintáxis del código donde en vez de

utilizar la marca <UL> se utiliza la marca <DIR>. La marca <DIR> admite los mismos

atributos que la marca <UL>.


Listas de definición: Una lista de definición es una lista no enumerada en la que se da una descripción de cada uno de sus elementos. Un ejemplo típico es un glosario. Las listas descriptivas están 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 función es caracterizar el elemento y definirlo. El atributo COMPACT está asociado a la marca DL (<DL COMPACT>) y permite mostrar en la misma línea el elemento y su descripción.

Elemento <DT>: precede a cada item de la lista, el cual no puede sobrepasar la longitud de una línea. Este elemento no resalta el texto de cada item por lo tanto si quiere algún 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 definición de cada item. El tamaño de esta zona no está limitado y cada línea se sangrará hacia la derecha. No tiene final de marca.

La estructura de este modelo de lista será la siguiente:

<DL> <DT> Identificación del elemento <DD> Descripción del elemento <DT> ... <DD> ...

</DL>

Por ejemplo: <HTML> <HEAD> <TITLE>Usando Listas de definición</TITLE> </HEAD> <BODY> <H1>GLOSARIO</H1> <dl compact> <dt>ASCII <dd> Juego de caracteres que asigna valores numéricos estándar a las letras, cifras y signos de puntuación. <dt>EPS <dd> Formato de descripción de ficheros PostScript. <dt>FUENTE <dd> Conjunto de estilos que posee una categoría 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 englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.


Tablas en HTML

Introducción

Las tablas son una de las herramientas más útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas.

Es por esta facilidad a la hora de organizar con tablas nuestras páginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque están "ocultas".

Estructura de una tabla

Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.

Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde 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 número 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 sería el siguiente:


Este es el esquema general de toda tabla simple, que traducido a código HTML

quedaría 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

Además de los atributos específicos de cada celda o línea, 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.


border Define el número 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 demás celdas que están en la misma columna

Para las filas y/o columnas se pueden aplicar las siguientes propiedades:

VALIGN:

ALIGN:

celda.

permite una alineación del texto en el sentido vertical de la celda. Admite los valores: TOP, BOTTOM, MIDDLE.

permite una alineación 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 alineación, Align y

VAlign</TH> <TR>

<TH>Alineación<BR>Vertical</TH> <TD VALIGN=top>Top</TD> <TD VALIGN=middle>Middle</TD> <TD VALIGN=bottom>Bottom</TD>

<TR> <TH>Alineación<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

número de columnas necesarias para una celda. Por lo general, para una

celda sólo se necesita una columna, y en ese caso no es necesario indicar

ningún 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.


ROWSPAN: Se encarga de unir celdas repartidas por varias líneas. Con ayuda de este atributo se pueden unir varias celdas de una tabla repartidas por varias líneas. Esta opción es necesaria por ejemplo, cuando una de las celdas de la tabla debe ser más alta que las demás. En lugar de definir varias celdas, indique una sola celda y asígnele el atributo ROWSPAN. Como valor, transmítale al atributo el número de líneas 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 línea.

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>Símbolos</TH> <TD>rojo</TD> <TD>verde</TD> </TABLE> </CENTER>


I m á g e n e s y e n l a c es

Imágenes <IMG> El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse 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 alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

ALT= Es la alternativa que se estableció cuando todavía existían 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 ratón 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 código 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 imágenes 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>


Imágenes como fondo de página

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 página. El valor que deberá tomar dicho atributo es la dirección donde se encuentra el fichero que contiene la imagen. La sintaxis será: <BODY BACKGROUND="direccion_del_fichero_grafico">

Ejemplo: <BODY BACKGROUND="images/blanco51.gif">

Imágenes como marcas de una lista Para obtener una lista adornada con algún tipo de icono se podrán utilizar las listas de definición de la siguiente forma:

<DL> <DT><IMG SRC="images/viñeta.gif"> Línea de texto <DT><IMG SRC="images/viñeta.gif"> Línea de texto <DT><IMG SRC="images/viñeta.gif"> Línea de texto </DL>

Hipervínculos Es uno de los más 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 impresión 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 ratón sobre las zonas activas definidas, denominadas hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una imagen, o bien una porción de imagen. En cualquier caso el principio es el mismo: asociar a la zona activa la dirección URL del documento que sustituirá al visualizado cuando se pulse con el ratón 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 físico, lógico o de párrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como tal: los enlaces activables se destacan automáticamente (color y subrayado), siempre y cuando el usuario no realice una parametrización especial del browser.

La definición 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 ratón para llamar a una nueva página. 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 dirección. Este ancla se define mediante el atributo NAME.

<A>


El elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML. Este elemento nunca se utiliza solo, por tanto siempre vendrá acompañado 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. Además permite el atributo TARGET para ordenar la apertura de una nueva ventana del browser con la página indicada por HREF. A continuación se detallan cada uno de estos atributos.

EL ATRIBUTO NAME

Este atributo define un punto de llegada en el documento destino asignándole 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 posición 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 sintáxis típica es: <A HREF="url_de_destino">zona activable con atributos visuales</A> Ejemplos: <A HREF="http://www.ieonline.unan.edu.ni/av/ "> Aula Virtual Informática 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.


Formularios en HTML

1. Introducción Los formularios son una característica del estándar HTML (lenguaje de marcas

hipertextual) que permite a los autores colectar información provista por los visitantes. Estos formularios pueden ser útiles para recolectar información personal, información 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 actúa como contenedor para todos los elementos de entrada (input). Toda la

información 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).

También puedes necesitar especificar cómo la información 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 método de envío del formulario.

De esta forma, un formulario simple puede tener la siguiente declaración:

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

<form> Sirve para insertar un formulario en una página web

Atributosespecíficos

▪ action = "url" - Indica la URL que se encarga de procesar los datos delFormulario.▪ method = "POST o GET" - Método HTTP empleado al enviar el formulario.▪ enctype = "application/x-www-form-urlencoded o multipart/form-data" - Tipo de codificación empleada al enviar el formulario alservidor(sólo se indica de forma explícita 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 (sólo para los formularios quepermitenadjuntar archivos)

Ejemplo 1.

Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y


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

El código HTML necesario para definir el formulario anterior se muestra a continuación: <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 mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y también del tipo de información 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 verificación o botones radio, será el contenido del atributo "value").

2.1. Entrada de texto

Existen tres tipos de entradas de texto que pueden recolectar información textual como

nombres, comentarios, etc.

2.1.1. Entrada de texto de línea

Este control recopila información textual en una sola línea, lo que significa que el

usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea. Este control es


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 vía css o javascript, para realizar algunas operaciones como aplicación de estilos o validaciones.

2.1.2. Entrada de texto contraseña (password)

Este control actúa exactamente como la entrada de texto de línea, con la excepción de que este control "esconde" los caracteres mostrándolos como puntos para evitar que los usuarios vean el texto ingresado. Es comúnmente usado para el ingreso de contraseñas.

Ejemplo 3:

<form method="post" action="manejador.php"> <p>Ingresa contraseñ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 configuración son las siguientes (También está disponible para el control texto.):

Propiedad Explicaciónsize Cantidad de caracteres que se muestran.maxlength Numero máximos de caracteres permitidosname Nombre del campo


2.1.3. Entrada de texto de múltiples líneas

Este control permite a los usuarios ingresar texto en una o más líneas. Es insertado

utilizando el tag HTML textarea y puede ser usado para recolectar párrafos, 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" rows="2" cols="30">...Tus comentarios aquí...</textarea></p> </form>

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

2.2. Opciones

Los autores también 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 verificación

La casilla de verificación es una opción simple que puede tomar uno de dos valores: "marcado" o "desmarcado". Las casillas de verificación pueden ser visualmente agrupadas como una lista de opciones, pero cada una de ellas es tratada individualmente. Este control es insertado mediante el tag HTML input con el valor "checkbox" para el atributo "type".

Ejemplo 5:

<form method="post" action="manejador.php"> <p>Selecciona tus intereses:<br /> <input name="cbipeliculas" type="checkbox" />Películas<br /> <input name="cbilibros" type="checkbox" />Libros<br /> <input name="cbiinternet" type="checkbox" />Internet </p> </form>


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

verificación de la opción. Dependiendo del agente procesador podría 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 verificación con pequeñas diferencias: los botones radio que comparten un mismo nombre conforman un grupo de opciones donde los usuarios no pueden seleccionar más de una opción a la vez. Esto significa que cuando el usuario selecciona una opción, el resto es automáticamente deseleccionado.

Ejemplo 6:

<form method="post" action="manejador.php"> <p>Selecciona tus intereses:<br /> <input name="intereses" type="radio" value="rbipeliculas" />Pelí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 sólo 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 (declaración de opción) 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 verificación, dependiendo de la presencia del atributo "multiple".

Ejemplo 6:


<form method="post" action="manejador.php"> <p>Selecciona una sola opción, como en los botones radio:<br /> <select name="entradaselect"> <optgroup label="Entradas de texto"> <option>De una sola línea</option> <option>Contraseña</option> <option>Multilínea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificación</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> </p> <p>Selecciona tantas opciones como desees, como en las casillas verificación (manteniendo presionada la tecla "Ctrl"):<br /> <select name="entradaselect" multiple="multiple"> <optgroup label="Entradas de texto"> <option>De una sola línea</option> <option>Contraseña</option>

<option>Multilínea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificación</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> </p> </form>

de


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 envío

Este tipo de botones envía automáticamente 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 envío con la única diferencia de que lo los botones de imagen son mostrados visualmente con la imagen apuntada en el atributo "src". Estos botones además envían las coordinadas donde el click ha ocurrido (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán 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 envío o de reestablecimiento, o pueden no tener ninguna acción preestablecida (dependiendo del valor del atributo "type"), pero sí permiten a los autores insertar contenido dentro de ellos. Esto dignifica que un trozo de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).

Estructura y layout Hasta ahora, se han estructurado y marcado con HTML los diferentes elementos

individuales que forman las páginas web (tablas, listas, enlaces, párrafos, imágenes, etc.). Una página web normal puede incluir decenas, cientos y hasta miles de estos elementos individuales.

Además, las páginas 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 código HTML para crear los diseños más avanzados.

Por este motivo, es necesario agrupar los contenidos de la página. La estrategia que se sigue es la de dividir la página en zonas en función de su finalidad: la zona de la


cabecera de la página, la zona de contenidos, una zona lateral para el menú y otras secciones menores, la zona del pie de página, etc.

La siguiente imagen muestra las zonas definidas en una página web real:

Para agrupar los elementos que forman cada zona de la página se utiliza la etiqueta <div>:

El nombre div viene de división, ya que esta etiqueta define zonas o divisiones dentro de una página HTML. En cualquier caso, casi todos los diseñadores 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 diseñadores.

Todas las páginas web complejas que están bien diseñadas utilizan decenas de

etiquetas <div>.

Con mucha diferencia, los atributos más 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 diseñar una página web mediante <div>, ya que no es posible diseñar una página web compleja utilizando elementos <div> pero sin utilizar hojas de estilos CSS.

Por último, si observas el código HTML de algunas páginas web complejas, verás que la mayoría utilizan los mismos nombres para identificar sus divisiones. Los nombres más comunes, y sus equivalentes en inglés, se muestran a continuación:


▪ contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se emplea para definir las características básicas de la página: su anchura, sus bordes, imágenes 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 página (logotipo, imagen o banner, cuadro de búsqueda superior, etc.)

▪ contenido (content) engloba el contenido principal del sitio (la zona de noticias, la zona de artículos, la zona de productos, etc. dependiendo del tipo de sitio web)

▪ menu (menu) se emplea para agrupar todos los elementos del menú lateral de

navegación de la página

▪ pie (footer) que incluye todos los elementos invariantes de la parte inferior de la

página (aviso de copyright, política de privacidad, términos de uso, etc.)

▪ lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y secundarias de la página.

De esta forma, el esqueleto de una página 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 páginas en inglés sería el siguiente:

...

<div id="wrapper">

<div id="header">

...

</div>

<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 utilización del DTD o Document Type Definition ("Definición 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 título y sólo uno, que tenga uno o más autores, que la información sobre el número de páginas 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 páginas y documentos XHTML también 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 versión 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 página.

De hecho, la declaración del doctype es lo primero que se debe incluir en una página web, antes incluso que la etiqueta <html>.


El uso de un doctype no es un concepto fácil de entender, pero es imprescindible para crear páginas web correctas y válidas, como se verá más adelante. Por el momento, lo único que debes tener en cuenta es que las páginas web deben indicar de forma clara las normas que se han seguido para crear su código HTML.

Aunque las páginas web creadas con XHTML siguen el estándar oficial XHTML definido por el W3C, existen tres variantes del mismo estándar. Por ese motivo las páginas web deben indicar la variante que están utilizando mediante la declaración del doctype.

Los tres DTD o modelos definidos para las páginas web XHTML se muestran a continuación:

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 más estrictas y las restricciones más severas. Las páginas web que incluyan este doctype, no pueden utilizar atributos relacionados con el aspecto de los contenidos, por lo que requiere una separación total de código 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 páginas que están formadas por frames, una práctica completamente desaconsejada y que hoy en día sólo utilizan los sitios web obsoletos.

Si no tienes claro el DTD que más te conviene, deberías utilizar el XHTML 1.0 transitorio, ya que es más fácil crear páginas web válidas. Si tienes conocimientos avanzados de XHTML, puedes utilizar XHTML 1.0 estricto.

Junto con el DOCTYPE apropiado, también es necesario que las páginas 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 más lenguajes derivados de XML (XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podría determinar a qué lenguaje pertenece cada etiqueta y por tanto, no se podría interpretar esa etiqueta o ese atributo. Los namespaces se indican mediante una URL.

El namespace que utilizan todas las páginas XHTML (independientemente de la versión y del DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:


<html xmlns="http://www.w3.org/1999/xhtml">

...

</html>

De esta forma, es habitual que las páginas XHTML comiencen con el siguiente código:

<!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 código anterior es mucho más complicado que una simple etiqueta <html>. Sin embargo, para crear páginas XHTML correctas y que superen el proceso de validación que se muestra en los capítulos siguientes, es obligatorio que comiencen de esa manera.

Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las páginas, todo el código anterior se incluye de forma automática. Si creas las páginas a mano, sólo tienes que copiar y pegar ese código en cada nueva página.

Documents

Introduccion Disenio Web