Unidad1 Programweb

Temario:
1 Introduccin a las tecnologas Web.

1.1 Perspectiva histrica del Internet .
1.2 Protocolo http.
1.2.1 Arquitectura del WWW.
1.2.2 URLs.
1.2.3 Mtodos http. Persistencia en http Cookies.
1.3 Introduccin al HTML. Lenguaje de despliegue del web
1.3.1 HTML como un tipo SGML.
1.3.2 Elementos del lenguaje HTML.
1.3.3 Tablas en HTML.
1.3.4 Formularios.
1.4 Evolucin del desarrollo de aplicaciones Web.
1.5 Hojas de estilo en cascada e introduccin al XML.

1 Introduccin a las tecnologas Web.
1.1 Perspectiva histrica del Internet .

El objetivo era crear una red de comunicaciones militar capaz de seguir funcionando despus de un
ataque nuclear.
Los primeros pasos fueron:
En 1964 Paul Baran, de Rand Corporation propuso la utilizacin de una red de conmutacin de
paquetes.
En 1968 se puso en funcionamiento el NPL (National Physics Laboratory) en el Reino Unido.
En 1969 se cre ARPANET, una red para comunicar los distintos centros implicados en el proyecto
ARPA.
Los miembros de ARPANET fueron:
Stanford Research Institute (SRI).
Universidad de California, Santa Barbara.
Universidad de California, Los ngeles (UCLA).
Universidad de Utah.

Evolucin de ARPANET:
1973. Primera conexin internacional con Inglaterra y Noruega.
Surge el protocolo TCP/IP para estandarizar la comunicacin entre redes.
1986. Surge NSFNET (National Science Foundation Network) para interconectar 5 grandes centros
de supercomputacin.

Miembros de NSFNET:
Prinston
Pittsbourgh
UCSD
UIUC
Cornell

Evolucin:
1990. Desmantelamiento de ARPANET.
1992. Tim Berners-Lee, fsico del CERN European Organization for Nuclear Research (Suiza),
inventa la Word Wide Web (WWW).
1993. Surge InterNIC.
1995. Sun Microsystems presenta un nuevo lenguaje de programacin (J ava).

Internet naci a partir de una red denominada ARPANET, diseada y desarrollada en 1969 para el
Departamento de Defensa de Estados Unidos, creada para mantener la comunicacin entre
computadoras en caso de guerra. Segn el Pentgono supona un gran peligro el hecho de que
todas las comunicaciones dependieran de un gran centro neurlgico que podra ser destruido con
una sola bomba, quedando as sin posibilidades ante el enemigo. Debido a todas estas
circunstancias, la red fue diseada sin centro neurlgico.
Estados Unidos fue capaz de desarrollar una red que funcionara (la antecesora de la actual
Internet) y los usuarios acadmicos e investigadores que tenan acceso a ella rpidamente se
volvieron adictos. La demanda por la red muy pronto se esparci. Los desarrolladores de Internet
en Estados Unidos, el Reino Unido y Escandinavia, en respuesta a las presiones del mercado,
empezaron a poner el software de IP (Internet Protocol) en todo tipo de computadoras. Se lleg a
convertir en el nico mtodo prctico para comunicar computadoras de diferentes fabricantes. Al
mismo tiempo que Internet se consolidaba, al mismo tiempo, muchas compaas y otras
organizaciones empezaron a construir redes privadas usando los mismos protocolos de ARPAnet.
Pareca obvio que si estas redes podan comunicarse entre s, los usuarios de una red podran
comunicarse con usuarios de otra y todo el mundo sera beneficiado.
De estas nuevas redes, una de las ms importantes fue la NSFNET, auspiciada por la Fundacin
Nacional de la Ciencia (National Science Foundation), una agencia del gobierno de Estados
Unidos. Al final de los ochenta la NSF cre cinco centros de supercmputo en universidades
importantes. Hasta ese entonces, las computadoras ms rpidas del mundo slo estaban a
disposicin de los fabricantes de armamento y de algunos investigadores de compaas muy
grandes. Con la creacin de centros de supercmputo, la NSF pona stas a disposicin de
cualquier investigacin escolar. Al principio, la NSF trat de utilizar la red ARPAnet para la
comunicacin de los centros, pero esta estrategia fall debido a problemas burocrticos.En
respuesta a esto, la NSF decidi construir su propia red basada en la tecnologa IP de ARPAnet,
sta red conectaba los centros mediante enlaces telefnicos de 56,000 bits por segundo. El costo
de la lnea telefnica depende de la distancia por esta razn, se decidi crear redes regionales. En
cada regin del pas las escuelas podan conectarse a su vecino ms cercano. Cada cadena
estaba conectada a un centro de supercmputo en un solo punto.
El hecho de compartir supercomputadoras permiti a los centros de cmputo compartir recursos no
relacionados con los centros. Repentinamente, las escuelas que participaban en la red contaron
con un amplio universo de informacin y colaboradores al alcance de sus manos. El trfico en la
red se increment con el tiempo hasta que las computadoras que la controlaban y las lneas de
telfono conectadas a ellas se saturaron. . En 1987 se celebr un contrato para administrar y
actualizar la red, con la compaa Merit Network Inc., en colaboracin con IBM y MCI. La vieja red
fue mejorada con lneas telefnicas de mayor velocidad (por un factor de 20) y con computadoras
ms poderosas.

1.2 Protocolo http
El Protocolo de Transferencia de HiperTexto (Hypertext Transfer Protocol) es un sencillo protocolo
cliente-servidor que articula los intercambios de informacin entre los clientes Web y los servidores
HTTP. Fue propuesto por Tim Berners-Lee, atendiendo a las necesidades de un sistema global de
distribucin de informacin como el World Wide Web.
Desde el punto de vista de las comunicaciones, est soportado sobre los servicios de conexin
TCP/IP, y funciona de la misma forma que el resto de los servicios comunes de los entornos UNIX:
un proceso servidor escucha en un puerto de comunicaciones TCP (por default, el 80), y espera las
solicitudes de conexin de los clientes Web. Una vez que se establece la conexin, el protocolo
TCP se encarga de mantener la comunicacin y garantizar un intercambio de datos libre de
errores.
HTTP se basa en sencillas operaciones de solicitud/respuesta. Un cliente establece una conexin
con un servidor y enva un mensaje con los datos de la solicitud. El servidor responde con un
mensaje similar, que contiene el estado de la operacin y su posible resultado. Todas las
operaciones pueden adjuntar un objeto o recurso sobre el que actan; cada objeto Web
(documento HTML, Archivo multimedia o aplicacin CGI) es conocido por su URL.

HTTP se utiliza para transmitir recursos, que incluyen adems de archivos, el resultado de la
ejecucin de un programa, una consulta a una base de datos, la traduccin automtica de un
documento, etc. Para un servidor HTTP, los recursos son o bien archivos, o bien el resultado de la
ejecucin de un programa.

Los tipos MIME (Multipurpose Internet Mail Extensions) son un estndar para el envo de
informacin binaria a travs de caracteres alfanumricos. Este estndar permite que, a travs del
protocolo HTTP (que maneja informacin en modo texto), podamos transferir archivos no-textuales,
como pueden ser imgenes, audio, vdeo, programas ejecutables etc. Los tipos MIME definen
grupos (antes del carcter "/") y tipos (despus del carcter "/"). As el tipo MIME "text/html" define
a todos los archivos de texto que contienen cdigo HTML, el tipo "video/mpeg" define a todos los
archivos de vdeo almacenados en formato mpeg, etc. Para indicar cualquier tipo se puede utilizar
el carcter "*", tanto en el tipo como en el grupo. De este modo, el tipo MIME "image/*" representa
a todos los archivos de imagen, ya estn almacenadas en formato gif, jpeg, bmp, etc.

Para profundizar ms en el funcionamiento de HTTP, veremos primero un caso particular de una
transaccin HTTP; en los siguientes apartados se analizarn las diferentes partes de este proceso.
Cada vez que un cliente realiza una peticin a un servidor, se ejecutan los siguientes pasos:
Un usuario accede a una URL, seleccionando un enlace de un documento HTML o
introducindola directamente en el campo Location del cliente Web.
El cliente Web descodifica la URL, separando sus diferentes partes. As identifica el
protocolo de acceso, la direccin DNS o IP del servidor, el posible puerto opcional (el valor
por default es 80) y el objeto requerido del servidor.
Se abre una conexin TCP/IP con el servidor, llamando al puerto TCP correspondiente.
Se realiza la peticin. Para ello, se enva el comando necesario (GET, POST, HEAD,), la
direccin del objeto requerido (el contenido de la URL que sigue a la direccin del
servidor), la versin del protocolo HTTP empleada y un conjunto variable de informacin,
que incluye datos sobre las capacidades del browser, datos opcionales para el servidor,
El servidor devuelve la respuesta al cliente. Consiste en un cdigo de estado y el tipo de
dato MIME de la informacin de retorno, seguido de la propia informacin.
Se cierra la conexin TCP.

Este proceso se repite en cada acceso al servidor HTTP. Por ejemplo, si se recoge un documento
HTML en cuyo interior estn insertadas cuatro imgenes, el proceso anterior se repite cinco veces,
una para el documento HTML y cuatro para las imgenes.

1.2.1 Arquitectura del WWW.

La arquitectura del WWW se puede ver desde dos puntos de vista Arquitectura fsica y Arquitectura
lgica

Dentro de la arquitectura fsica podemos mencionar los diferentes tipos de redes:
Computadoras personales (PCs)
Redes de rea local (LANs)
Redes de rea global (WANs)

Las Computadoras personales tienen las siguientes caractersticas
Conexin espordica a Internet.
Necesaria la colaboracin de otra computadora que est conectada de forma continua a Internet
(ISP Proveedor de Servicios Internet).
Debe establecerse un dilogo con el ISP a travs de algn canal de comunicacin.

Las formas de conexin pueden ser:
1. Lnea telefnica estndar.
Necesario el uso de un hardware que acte de interfaz entre la computadora y la lnea
telefnica (mdem).
Modems internos o externos.
Velocidad baja

2. RDSI (Red Digital de Servicios Integrados).
Lnea digital.
Sigue siendo necesario un hardware especfico que acte de interfaz entre la lnea y la
computadora.
Hardware distinto del usado para la lnea telefnica estndar (mdem RDSI).
Posibilidad de conexin a Internet y al mismo tiempo disponibilidad de lnea telefnica.
Posibilidad de videoconferencia punto a punto.

3. ADSL (Asymmetric Digital Subscriber Line).
Lnea de comunicacin de alta velocidad.
Utiliza como soporte el par de cables de cobre de la lnea telefnica estndar.
Velocidad de comunicacin asimtrica

4. Cable.
Utiliza uno de los canales de vdeo de un suministrador de acceso a cable.
Suele suministrarse en unin de otros servicios (televisin, telfono, etc.).

5. Satlite.
Al igual que ADSL, se trata de un canal de comunicacin asimtrico.
Los datos de salida viajan generalmente a travs de telfono.
La recepcin se realiza a travs de uno o ms canales de vdeo emitidos por un satlite.

Redes de rea Local (LANs)
Sirve para unir ordenadores situados en general en un mismo edificio o grupo de edificios.
En la red pueden coexistir sistemas actuando como servidores y como clientes.
Las computadoras se unen formando topologas (lineales, anillo, estrella, ...).
Sigue siendo necesario un hardware dedicado que acte como interfaz entre la computadora y la
red (tarjeta de red).
Velocidades tpicas
1. Ethernet: 10 Mbaudios.
2. Token Ring: 4 y 16 Mbaudios.
3. Fast Ethernet: 100 Mbaudios.
4. Giga Ethernet: 1 Gbaudio.
Nuevas tendencias: redes inalmbricas

Redes de rea Global (WAN)
Unin de mltiples LANs.
La unin de mltiples WANs a nivel mundial es lo que se conoce como Internet.

Arquitectura lgica de Internet. Normalmente en Internet se usa la arquitectura cliente-servidor.
Este tipo de organizacin se basa en que: entre todas las computadores que estn en la red, unos
ofrecen servicios (los llamados servidores) y otros usan esos servicios (los denominados clientes).
Cuando el cliente esta viendo estas pginas, esta accediendo a un servicio que les ofrece el
servidor de pginas WEB. Los sistemas cliente-servidor estn construidos de tal modo que la base
de datos puede residir en el servidor y ser compartida entre todos los usuarios.
La arquitectura de Internet a nivel lgico esta estructurado por lo que se conoce como capas de
servicio.

Modelo OSI de 7 capas:
1. Capa fsica: La Capa Fsica del modelo de referencia OSI es la que se encarga de las
conexiones fsicas de la computadora hacia la red, tanto en lo que se refiere al medio fsico
(medios guiados: cable coaxial, cable de par trenzado, fibra ptica y otros tipos de cables;
medios no guiados: radio, infrarrojos, microondas, lser y otras redes inalmbricas);
2. Capa de datos: La capa de enlace de datos se ocupa del direccionamiento fsico, de la
topologa de la red, del acceso a la red, de la notificacin de errores, de la distribucin
ordenada de tramas y del control del flujo.
3. Capa de red: El cometido de la capa de red es hacer que los datos lleguen desde el origen
al destino, an cuando ambos no estn conectados directamente. Los dispositivos que
facilitan tal tarea se denominan enrutadores, aunque es ms frecuente encontrar el nombre
ingls routers.
4. Capa de transporte: Su funcin bsica es aceptar los datos enviados por las capas
superiores, dividirlos en pequeas partes si es necesario, y pasarlos a la capa de red,
tambin se asegura que lleguen correctamente al otro lado de la comunicacin.
5. Capa de Sesin: Esta capa es la que se encarga de mantener el enlace entre los dos
computadores que estn trasmitiendo archivos, ofrece varios servicios que son cruciales
para la comunicacin, como son:
Control de la sesin a establecer entre el emisor y el receptor (quin transmite, quin
escucha y seguimiento de sta).
Control de la concurrencia (que dos comunicaciones a la misma operacin crtica no se
efecten al mismo tiempo).
Mantener puntos de verificacin, que sirven para que, ante una interrupcin de
transmisin por cualquier causa, la misma se pueda reanudar desde el ltimo punto de
verificacin en lugar de repetirla desde el principio.
6. Capa de presentacin: El objetivo de la capa de presentacin es encargarse de la
representacin de la informacin, de manera que aunque distintos equipos puedan tener
diferentes representaciones internas de caracteres (ASCII, Unicode, EBCDIC), nmeros
(little-endian tipo Intel, big-endian tipo Motorola), sonido o imgenes, los datos lleguen de
manera reconocible.
7. Capa de aplicacin: Ofrece a las aplicaciones (de usuario o no) la posibilidad de acceder a
los servicios de las dems capas y define los protocolos que utilizan las aplicaciones para
intercambiar datos, como correo electrnico (POP y SMTP), gestores de bases de datos y
servidor de archivos (FTP).

1.2.2 URLs.
En la Web existe un sinnmero de objetos, a los que se puede acceder mediante una variedad de
protocolos. Para poder abstraer la idea de "objeto genrico", se necesita disponer de conceptos
que den sentido a nombres y direcciones en la Web. Un Identificador Universal de Recursos (URI)
es un miembro de este conjunto universal de nombres, un Localizador Uniforme de Recursos
(URL), es bsicamente un caso particular de URI que expresa una direccin, mapeada a un
algoritmo de recuperacin del objeto que usa protocolos de comunicacin a travs de la red. Por
ltimo, un Nombre Uniforme de Recursos (URN) es algo que an est en debate y que pretende
definir un espacio de nombres para etiquetar objetos persistentes.
Un recurso es cualquier cosa distinguible. Por ejemplo, un documento electrnico, una imagen, un
servicio, etc. Un recurso es, bsicamente, un concepto que puede mapearse a una o a varias
entidades, y que puede permanecer constante a pesar de ver alterados sus contenidos.
La razn por la que es necesario uniformizar identificadores, localizadores y nombres, es la gran
cantidad de protocolos usados hoy en da para encontrar y recuperar recursos en la red. Los
sistemas en los que se distribuye toda la informacin alcanzable utilizan una variedad de
plataformas y formatos en constante evolucin, que de no ser por los protocolos y convertidores de
formato adecuados, no podran ofrecer el acceso global que se da hoy en da. Sin embargo, esto
no es posible de realizar al nivel de direcciones y nombres de los objetos, dado que son usados
para identificarlos y distinguirlos. Adems, estos nombres y direcciones son "transmitidos" de las
ms diversas maneras, desde memorndums hasta hipertextos, por lo que debe suponerse que
estos identificadores tendrn una larga existencia.
De todas las ideas desarrolladas en este aspecto, aparece una caracterstica comn mapeable a la
idea de un "objeto" y su correspondiente nombre/etiqueta/identificador. De esta manera se puede
definir un conjunto de espacios de nombres en los que se dice que existen los objetos.
URI: Identificadores Universales de Recursos. Corresponden a una forma de encapsular un
nombre en un espacio de nombres registrados, y etiquetarlo con el espacio de nombres,
produciendo un miembro del conjunto universal. La sintaxis universal permite el acceso a objetos
disponibles utilizando protocolos existentes, y es capaz de ser extendida con el tiempo
URL: Localizadores Uniformes de Recursos. Para los protocolos de acceso a Internet existentes,
en la mayora de los casos se hace necesario definir la codificacin del algortimo de acceso en
algo suficientemente conciso para llamarse "direccin". Las URIs que referencian objetos a los que
se accede mediante protocolos existentes se conocen como URLs.
URN: Nombres Uniformes de Recursos. Un URN difiere de una URL en que su propsito principal
es etiquetar persistentemente un recurso con un identificador. Este identificador es obtenido de un
conjunto de espacios de nombres definidos, cada uno de los cuales tiene establecida su propia
estructura de nombres y procedimientos de asignacin. El esquema "urn" se encuentra reservado
para establecer una estandarizacin de los requerimientos del espacio de nombres URN.

El formato de una URL bsica es el siguiente:
Protocolo://host.dominio.dominiodelprimernivel/directorio/recurso
Protocolo. Un protocolo es, bsicamente, un lenguaje que utilizan las mquinas
conectadas para comunicarse entre ellas. Con esto le indicamos a la mquina a la que nos
conectamos el protocolo que debe usar. Dependiendo de este, probablemente tengamos
que usar un programa distinto. Cada protocolo utiliza un puerto (una especie de "entrada" a
la mquina) por default, y es a ese al que, en principio nos conectar al indicarle ese
protocolo en la URL.
Host La palabra Host hace referencia a cualquier clase de mquina conectada a la red y,
por extensin, a su nombre.
Dominio Se llama dominio al nombre que tiene en Internet una mquina o red de ellos. Una
red puede contener a su vez a otras redes detro de ella (esto es lo que hace que se llame
a Internet "La red de redes"). Si este fuera el caso, podramos encontrarnos con nombres
como "subred.red.granred.com" que nos indicaran, de izquierda a derecha, qu red se
encuentra dentro de la siguiente.
Dominio de primer nivel. Todos los nombres de dominio, independientemente de si se
refieren a una mquina o a una red de ellas, acaban con el llamado "domino de primer
nivel". Este es el nombre que indica, en principio, cul es la ocupacin de la red (como son
los casos, por ejemplo, de .com para empresas o actividades comerciales y .org para
organizaciones) o a qu pas pertenecen las autoridades que han otorgado ese nombre
(por ejemplo, .es para Espaa, .mx para Mxico o .de para Alemania).
Directorio. Se utiliza para localizar el archivo concreto, dentro de esa mquina, que
queremos ver.
Recurso se llama recurso a cualquier cosa que puedas encontrar en una mquina.
Recurso es una pgina Web, una imagen o un programa para descargar. Pero tambin es
un recurso el resultado de ejecutar un programa en una mquina remota o la imagen de
una webcam. La mayora de recursos que se pueden encontrar en la Web son,
evidentemente, pginas.

Los protocolos utilizados ms comunes son los siguientes:
FTP (File Tranfer Protocol). El protocolo FTP es uno de los ms utilizados en Internet, ya
que permite transferir archivos entre dos mquinas utilizando una conexin Internet. El
protocolo dispone de una serie de formas estandarizadas por las que una mquina remota
puede crear y cambiar directorios en la mquina local, as como transferir, copiar, mover y
borrar Archivos. En realidad FTP utiliza comandos de texto plano para indicar las diversas
rdenes, pero existen multitud de programas que simplifican su utilizacin mediante una
interfaz grfica en la que las operaciones de transferencia se reducen a procesos de cortar
y pegar y en las que recorrer el rbol de directorios de la mquina remota es tan fcil como
utilizar el navegador en la propia mquina.
SMTP (Simple Mail Transfer Protocol). Protocolo encargado de transmitir los mensajes de
correo de un servidor a otro. Una vez que los mensajes estn en el servidor de destino se
utiliza otro protocolo (POP) para llevarlo a la mquina del cliente final.
POP (Post Office Protocol). Es el protocolo que permite a un usuario leer el correo que
llega a su servidor. Es un protocolo para las comunicaciones Servidor a Usuario. Cuando
recibimos un e-mail queda almacenado en el servidor hasta que conectamos con l
mediante el cliente de correo y nos autentificamos (proporcionamos un nombre de usuario
y contrasea correctos). Despus de esto POP es utilizado para transferir los datos desde
el servidor al buzn de correo entrante de nuestra propia mquina. Eventualmente una vez
recibida la copia es posible ordenar al servidor que borre los Archivos originales.
IRC (Internet Relay Chat). Es un protocolo de comunicacin en tiempo real basado en
texto, que permite debates en grupo o entre dos personas y que est clasificado dentro de
la Mensajera instantnea. Es un sistema de charlas ampliamente utilizado por personas
de todo el mundo. Los usuarios del IRC utilizan una aplicacin cliente para conectarse con
un servidor, en el que funciona una aplicacin IRCd (IRC Daemon o servidor de IRC) que
gestiona los canales y las conversaciones.
Telnet. Es un servicio que permite registrarse en un servidor y acceder a sus diferentes
recursos. Los investigadores aprecian mucho este servicio cuando buscan informacin
sobre libreras y archivos. Telnet es especialmente importante en la conexin con
informacin almacenada en macrocomputadoras. El servicio de Telnet tiene su propio
protocolo llamado: Telnet. No es posible buscar un servidor de Telnet a travs de los
proveedores de servicios en lnea. Para buscar a un servidor de Telnet, se debe establecer
una sesin.
WWW. El Wold Wide Web (WWW) fue creado por cientficos del CERN quienes necesitan
compartir y accesar informacin sobre investigaciones a travs de una interfaz comn. Al
usar una interfaz comn, los investigadores simplificaban los pasos necesarios para
acceder a los diferentes servicios disponibles en Internet.

Los programas de aplicacin raramente referencian a los hosts, buzones de correo y otros recursos
por su direccin de red en formato binario. En vez de esto utilizan cadenas de caracteres. A pesar
de esto la red por si misma solo entiende direcciones binarias, por lo que se requiere de algn
mecanismo para convertir las cadenas de caracteres en direcciones de red.
En sus inicios ARPANET, esto se realizaba mediante un simple Archivo, hosts.txt, que listaba todos
los hosts y sus respectivas direcciones IP. Como se puede suponer, cada da se tena que estar
verificando y actualizando este Archivo. Adems para un nmero razonable de mquinas, esta
solucin poda ser viable, pero el aumento de estaciones conectadas a la red aumentaba
considerablemente cada da, por lo que el tamao del Archivo poda llegar a ser muy grande. Para
solventar estos problemas se invento el DNS (Domain Name System tambin conocido como
Domain Name Server o Domain Name Service).
La esencia del DNS se basa en la invencin de un esquema jerrquico, asignando nombres que se
basan en dominios y en un sistema de base de datos distribuido para implementarlo. Su principal
funcin consiste en mapear nombres de hosts y direcciones e-mail en direcciones IP, aunque se le
puede dar otras muchas utilidades.
De una forma breve, su manera de trabajar es la siguiente Para mapear un nombre en una
direccin IP, un programa llama a un procedimiento pasndole el nombre como parmetro. Este
procedimiento entonces enva un paquete UDP (User Datagram Protocol) a su servidor DNS local,
que busca el nombre y retorna la direccin IP al procedimiento, que se lo devuelve a la aplicacin.
Una vez que el programa de aplicacin tiene la direccin IP puede establecer una conexin TCP
con el destino.
Conceptualmente, Internet esta dividida en numerosos dominios, que cada uno cubre cientos de
hosts, a su vez cada dominio esta dividido en subdominios, y estos a su vez subdivididos de forma
recursiva.
Existen dos tipos de dominios superiores, genricos y territoriales.
Los dominios territoriales son los dominios mantenidos por cada pas. Estos dominios territoriales
son utilizados por las organizaciones y empresas que desean establecerse en Internet o que
quieren proteger la identidad de su marca o su nombre comercial en un pas concreto. Los
dominios estn definidos en ISO 3166. Algunos ejemplos de dominios territoriales son los
siguientes:

es : Espaa
mx : Mxico
ar : Argentina
uk : Reino Unido
at : Austria
il : Israel
ch: Suiza

Los dominios genricos son los dominios bsicos en Internet. Cualquier empresa que realice
negocios a travs de Internet o que tenga intencin de hacerlo debe registrarse en uno de estos
dominios genricos, dada la popularidad que han adquirido. Los dominios genricos son:

com : Comercial
edu : Educational institutions
gov : U.S. Federal Government
int : International Organizations
mil : U.S. Armed Forces
net : Network Provider
org : Nonprofit Organizations

Cada nombre de un dominio puede tener hasta 63 caracteres, y el nombre del dominio completo
no puede sobrepasar los 255 caracteres.
En la teora, un solo servidor puede tener la base de datos DNS completa, y responder a todas las
consultas. En la practica, este servidor podra estar sobrecargado o infrautilizado. Adems si este
servidor cayera, toda Internet quedara colapsada.
Para solucionar el problema asociado a tener una sola fuente de informacin, el espacio de
nombres DNS se divide en zonas. De forma que cada zona tiene un servidor principal con la
informacin en su disco, y uno o varios servidores secundarios, que consiguen la informacin del
servidor principal. Para una mejor eficiencia, algunos servidores de una zona pueden ser
colocados en otra.

El Network Information Center - Mxico, (NIC-Mxico) es la organizacin encargada de la
administracin del nombre de dominio territorial (ccTLD, country code Top Level Domain) .MX, el
cdigo de dos letras asignado a cada pas segn el ISO 3166. Entre sus funciones estn el proveer
los servicios de informacin y registro para .MX as como la asignacin de direcciones de IP y el
mantenimiento de las bases de datos respectivas a cada recurso.

Un ejemplo en que una mquina accesa una URL es el siguiente:
Un cliente pregunta por un dominio .MX (www.negocio.com.mx), esta respuesta tiene que ser
contestada por el servidor de nombres de la red a la que pertenece el cliente que pregunta. Como
primera instancia, el servidor de la red local, deber preguntar a los servidores raz por el dominio
que est buscando (negocio.com.mx). Estos servidores conocen la informacin de los diferentes
NICs en el mundo, as como de los dominios genricos, por lo que le indican al servidor de la red
local, dnde puede encontrar ms informacin de los dominios bajo .MX y lo dirigen con los
servidores de NIC Mxico. Los servidores de NIC Mxico son tambin los servidores para el
.com.mx, por lo que buscan en su base de datos la informacin relacionada al dominio
negocio.com.mx. En la informacin que se recaba, se tiene que el dominio negocio.com.mx tiene
como servidores registrados ns1.negocio.com.mx y ns2.negocio.com.mx, estos servidores conocen
la informacin referente al dominio negocio.com.mx, por lo que dan la respuesta a la pregunta de
dnde encontrar www.negocio.com.mx.
Cabe mencionar que quien realiz todo el proceso de la bsqueda fue el servidor de la red local.
Ya con la respuesta de dnde localizar a www.negocio.com.mx, el servidor le proporciona esta
respuesta al cliente, con esta informacin, el cliente, puede tener una comunicacin directa con el
host para solicitar algn servicio, que en este caso, es el servicio de web.
Con esto, se termina el proceso de resolucin de un nombre de dominio.

1.2.3 Mtodos http. Persistencia en http Cookies.
Los mtodos que utiliza el protocolo http son los siguientes:
1. GET: se utiliza para recuperar el contenido de un recurso esttico (pgina HTML, imgen,
vdeo, etc), o bien ejecutar un programa o script en el servidor (como programas CGI,
pginas ASP, J SP, PHP, etc.). Es la operacin ms comn, que se lanza cada vez que
pulsamos en un enlace y navegamos a una pgina web.
2. HEAD: es una operacin especial que tan slo nos recupera informacin del recurso, como
el tamao, la fecha de modificacin, tipo, etc. Lo suelen utilizar los navegadores o
servidores para comprobar el estado de su cach u otras operaciones.
3. POST: enva informacin desde el cliente al servidor web, como pueden ser los datos de
un formulario.
4. PUT: almacena recursos en el servidor.
5. DELETE: borra recursos del servidor.
Uno de los problemas clsicos en el desarrollo de web sites y aplicaciones web es la perdida de
persistencia cuando el usuario pasa de una pgina a otra. Debido a las caractersticas de diseo
del protocolo HTTP que fuerza una nueva conexin y desconexin por cada request no es posible
saber quien est accediendo a que pgina o en que lugar esta cada usuario del sitio. Mantener
persistencia a lo largo de la navegacin del sitio ha sido uno de los temas ms complejos e
importantes en el desarrollo de aplicaciones web,
Uno de los mecanismos ms usados para mantener persistencia es el mecanismo de cookies,
inventado por Netscape y hoy en da aceptado por casi todos los browsers, en especial los ms
populares. El concepto es que mediante un header del protocolo HTTP el server pueda almacenar
informacin en el cliente. A esta informacin que el server guarda en el cliente se la denomina
cookie. Las cookies pueden habilitarse o deshabilitarse desde el browser por lo que algunos
usuarios no lo soportan, son de uso bastante general en muchos sitios web a punto tal que en
algunos sitios si el usuario no tiene habilitadas las cookies prcticamente no puede utilizar la
mayora de los servicios del sitio. Cuando el server enva un header con un cookie el browser, si
acepta cookies, guarda la informacin enviada en un archivo de texto con un formato especial.
Cada vez que el browser solicita una pgina del dominio que envi la cookie reenvia la cookie al
sitio, de esta forma es posible mantener persistencia. La informacin que puede guardarse en una
cookie esta limitada por lo que habitualmente se utiliza la misma para mantener el identificador de
sesin del usuario almacenndose el resto de los datos necesarios en el servidor usando la
session id de la cookie como clave.
Los usos ms frecuentes de las cookies son:
Llevar el control de usuarios: cuando un usuario introduce su nombre de usuario y
contrasea, se almacena una cookie para que no tenga que estar introducindolas para
cada pgina del servidor. Sin embargo una cookie no identifica a una persona, sino a una
combinacin de computadora y navegador.
Ofrecer opciones de diseo (colores, fondos, etc) o de contenidos al visitante.
Conseguir informacin sobre los hbitos de navegacin del usuario, e intentos de spyware,
por parte de agencias de publicidad y otros.
Cuando las cookies han caducado, estas no son enviadas al navegador; por lo tanto, la caducidad
de las cookies puede ser pensada como un lmite de tiempo en el que una de ellas puede ser
usadas. La cookie puede luego ser renovada despus de que este lmite haya pasado. Algunos
sitios prefieren que las cookies caduquen en tiempos ms cortos por razones de seguridad. Las
cookies no se envan al navegador si ellas estn bajo estas condiciones:
Al finalizar una sesin de usuario: por ejemplo, cuando se cierra el navegador (si esta no
es persistente)
Se ha fijado una fecha de caducidad y esta ha pasado.
La fecha de caducidad es cambiada a una fecha anterior (por el servidor)
Esta se borra por orden del usuario.

1.3 Introduccin al HTML. Lenguaje de despliegue del web.
HTML(HipertText Markup Language) es el lenguaje con el que se escriben las pginas web. Las
pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador.
Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar
las pginas web al usuario, siendo hoy en da la interfaz ms extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto.
Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la
introduccin de referencias a otras pginas por medio de los enlaces hipertexto.

1.3.1 HTML como un tipo SGML.
SGML son las siglas de "Standard Generalized Markup Language" o "Lenguaje de Marcacin
Generalizado". Consiste en un sistema para la organizacin y etiquetado de documentos. La
Organizacin Internacional de Estndares (ISO) ha normalizado este lenguaje en 1986.
El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en s
algn conjunto de etiquetas en especial.
El lenguaje HTML es un subconjunto de SGML, que es un estndar de descripcin de pgina
independiente del dispositivo, lo que permite adaptar la visin del documento al tamao de la
pantalla en la que se muestra.
En un documento HTML hay etiquetas que indican los atributos del texto (negrita, centrado...).
Otras indican al sistema cmo debe responder a eventos que genere el usuario, por ejemplo, que
despus de que el usuario seale con el ratn un icono que representa una pelcula, se ejecute el
programa que reproduce vdeo en formato digital.
La etiqueta ms importante es la que indica un vnculo, que puede contener como destinatario otro
lugar del mismo documento o el URL de otro documento; este ltimo puede residir en el mismo
lugar de la Web que el documento actual o en cualquier otra computadora de WWW. A medida que
se ha ido avanzando, se han estandarizado distintas versiones del lenguaje HTML. Cada una de
ellas ampla el nmero de etiquetas, lo que permite nuevas posibilidades para los documentos; as,
se le ha dotado de marcas para rellenar formularios (forms) de manera interactiva, que permiten al
usuario enviar la informacin necesaria para realizar consultas en bases de datos, comprar o
solicitar un servicio.
Otras marcas permiten mejorar la presentacin de los documentos, por ejemplo, aadiendo fondos,
tablas de contenido o textos intermitentes. La versin HTML 4.0 se utiliza en combinacin con el
XML 1.0, otro subconjunto de SGML que permite al desarrollador definir sus propias etiquetas; el
resultado es un nuevo formato denominado XHTML, que se espera que constituya un nuevo
estndar de formato para pginas Web. Su principal ventaja estriba en que va a permitir desarrollar
pginas Web con diferentes conjuntos de datos, que se podran descargar en dispositivos de
mano, con pantallas de tamao reducido.
El software que permite al usuario consultar documentos en World Wide Web se denomina
explorador o navegador; los ms conocidos son Netscape Navigator y Microsoft Internet Explorer.
Se encarga de interpretar las etiquetas y de mostrar el documento en la pantalla.
La evolucin de las distintas versiones del lenguaje HTML ha estado determinada por un desarrollo
paralelo de los navegadores, que permitiese interpretar las nuevas etiquetas. El avance de unos y
otros ha contribuido al crecimiento exponencial que ha experimentado WWW.
Una definicin del tipo de documento SGML declara tipos de elementos que representan
estructuras o un comportamiento deseado. HTML incluye elementos que representan prrafos,
vnculos de hipertexto, listas, tablas, imgenes, etc.
Cada declaracin de tipo de elemento describe generalmente tres partes: una etiqueta inicial, un
contenido y una etiqueta final.
El nombre del elemento aparece en la etiqueta inicial (<nombre-del-elemento>) y en la etiqueta
final (</nombre-del-elemento>); en la etiqueta final muestra una barra que precede al nombre del
elemento para indicar que es el cierre de la etiqueta.
Los elementos pueden tener propiedades asociadas, llamadas atributos, que pueden tener valores
(por default o asignados por el autor o por un script). Las parejas atributo/valor aparecen antes del
final de la etiqueta inicial de un elemento. En la etiqueta inicial de un elemento puede aparecer
cualquier nmero de parejas atributo/valor, separadas por espacios. Pueden aparecer en cualquier
orden.
Por default, SGML requiere que todos los valores de atributo estn delimitados ya sea mediante
comillas dobles (ASCII decimal 34) o mediante comillas simples (ASCII decimal 39).
El valor del atributo slo puede contener letras (a-z y A-Z), dgitos (0-9), guiones (ASCII decimal
45), puntos (ASCII decimal 46), subguiones (ASCII decimal 95) y dos puntos (ASCII decimal 58).
Para los nombres de atributos no se distingue nunca entre maysculas y minsculas.
Para los valores de los atributos en general no se distingue entre maysculas y minsculas.
1.3.2 Elementos del lenguaje HTML.
Un documento HTML comienza con la etiqueta <html>, y termina con </html>.
Dentro del documento hay dos zonas principales: el encabezamiento, delimitado por las marcas
<HEAD>y </HEAD>, que sirve para definir algunos valores vlidos para todo el documento, y el
cuerpo, delimitado por las etiquetas <BODY> y </BODY>, donde reside la informacin del
documento.
El elemento <TITLE> contenido dentro del encabezamiento permite especificar el ttulo de un
documento HTML. Este ttulo no forma parte del documento en s pues no se ve en la pantalla
principal, sino que sirve como ttulo de la ventana del programa que la muestra.
Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la
estructura bsica del lenguaje HTML en su nivel bsico no son necesarios.
El cuerpo de un documento HTML contiene el texto, imgenes, etc. que, con la presentacin y los
efectos que se decidan, se presentarn ante el usuario. Dentro del cuerpo se pueden aplicar una
serie de efectos a travs de diferentes marcas o etiquetas (tambin otros autores las denominan
"directivas").
As pues, la estructura de un documento HTML es la siguiente:
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
</HEAD>
<BODY>
[Aqu se sitan otras etiquetas que hacen posible visualizar la pgina]
</BODY>
</HTML>

Manejo de Texto. Para definir y separar bloques de texto se emplean una serie de marcas que
definen prrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Marcas de bloques:
Prrafos. <P>
Saltos de lnea. <BR>
Lnea horizontal. <HR>
Divisiones. <DIV>
Texto preformateado. <PRE>
Direcciones. <ADDRESS>
Centrado de bloques. <CENTER>
P>se utiliza para separar prrafos. Dado que para el HTML todo el texto es continuo, necesitamos
algn mecanismo para indicar el principio y el fin de un prrafo. Las marcas inicial y final son <P> y
</P>.
Ejemplo:
<P>
Este texto est contenido dentro del primer prrafo
</P>
<P>
Este otro texto est contenido dentro del prrafo 2
</P>
Esto dar como resultado:
Este texto est contenido dentro del primer prrafo,
Este otro texto est contenido dentro del prrafo 2,

Normalmente no suele utilizarse la marca de fin de prrafo, </P>ya que el texto continuar hasta
que encuentre otro comienzo de prrafo <P>.
Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes valores:
LEFT: J ustifica el texto a la izquierda. (por default)
RIGHT: J ustifica el texto a la derecha.
CENTER: El texto aparece centrado.
Ejemplo:
<P ALIGN=LEFT>
Texto justificado a la izquierda
</P>
<P ALIGN=RIGHT>
Texto justificado a la derecha
</P>
<P ALIGN=CENTER>
Texto centrado
</P>
Texto centrado

El elemento <BR> es vaco por lo que slo tiene marca inicial. Indica un salto de lnea.
Ejemplo:
Texto 1. <BR>
Texto 2.
Con esto tendremos como resultado:
Texto 1.
Texto 2.

<HR>es un elemento vaco por lo que solo tiene marca inicial. Se emplea para separar bloques de
texto representando una lnea horizontal.
Se puede cambiar la apariencia de dicha lnea mediante los siguientes atributos:
NOSHADE: Elimina el efecto de sombra de la lnea.
WIDTH: Permite definir la longitud de la lnea.
SIZE: Permite definir el grosor de la lnea.
Ejemplos:
<HR NOSHADE>

<HR WIDTH=250 SIZE=3>

El elemento <DIV>se comporta de forma muy parecida al salto de lnea, <BR>, y a su vez admite
los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o sea, permite definir un bloque
con los atributos de <P>, pero dejando tan solo un salto de lnea entre un bloque y otro.
Ejemplo:
<DIV ALIGN=LEFT>
</DIV>
<DIV ALIGN=RIGHT>
</DIV>
<DIV ALIGN=CENTER>
Texto centrado
</DIV>
Texto centrado
El texto insertado entre las marcas <PRE> y </PRE> ser visualizado por el browser, respetando el
formateo tal como haya sido entrado en el Archivo fuente HTML, o sea, respetando los espacios y
los saltos de carro.
Ejemplo:
<PRE>
Esto es un texto preformateado, por tanto se
respetan los espacios y los saltos de

carro
</PRE>
El resultado ser:
Esto es un texto preformateado, por tanto se
respetan los espacios y los saltos de

carro

El elemento <ADDRESS> se emplea para indicar que un texto representa una direccin o una
firma mostrndolo, generalmente, en letra cursiva. Es muy utilizado para indicar toda la informacin
respecto al autor del documento (direccin, telfono, e-mail,...). Puede insertarse en cualquier lugar
del documento; lo habitual en WWW es incluir esta zona de direccin al final del documento.
Ejemplo:
<ADDRESS>
Tekin Tontu <BR>
77A Wellington Rd <BR>
Auburn 2144, NSW <BR>
Australia <BR>
e-mail tekin@cis.com <BR>
</ADDRESS>
Tekin Tontu
77A Wellington Rd
Auburn 2144, NSW
Australia
e-mail tekin@cis.com

El elemento <CENTER> centra los elementos situados entre sus marcas de apertura y cierre.
Dichos elementos podrn ser: bloques de texto, tablas, enlaces, imgenes, formularios.
Ejemplo:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Tabla centrada</CAPTION>
<TR><TD>Celda 1 <TD>Celda 2 </TR>
<TR><TD>Celda 3 <TD>Celda 4 </TR>
</TABLE>
</CENTER>
Celda 1 Celda 2
Celda 3 Celda4
Tabla centrada

El elemento <Hn>se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamao a
los caracteres, dependiendo del valor n, el cual vara de 1 a 6. Los ms grandes tienen valor 1 y los
ms pequeos valor 6. El texto entre estas marcas se trata en negrita. Se inserta automticamente
un salto de prrafo, como puede comprobar en el siguiente ejemplo:
Ejemplo:
Texto antes de la cabecera. <H3>Cabecera</H3>Ms texto.
Esto dar el siguiente resultado:
Texto antes de la cabecera.
Cabecera
Ms texto.

El elemento <FONT> permite definir el tamao, color y tipo de letra de un conjunto de caracteres
mediante los siguientes atributos:
El atributo SIZE: Regula el tamao de los caracteres (1 - 7).
El atributo COLOR: Especifica el color de los caracteres.
El atributo FACE: permite definir el tipo de letra: Algerian, Arial, Times New Roman,
Courier, MS Serif, Symbol, System, Times New Roman, Windsort, ...

Ejemplos:
<FONT SIZE=4 COLOR=#008000>Texto de color verde y tamao 4.<FONT>
Texto de color verde y tamao 4.
<FONT SIZE=6 COLOR=#FF0000>Texto de color rojo y tamao 6.<FONT>
Texto de color rojo y tamao 6.
El atributo SIZE del elemento <FONT> tiene la peculiaridad de poder indicar el tamao de letra
deseado en funcin del tamao definido por default para el documento.
Ejemplo:
Este texto tiene el tamao por default (3). <BR>
<FONT SIZE=-1>Este texto es del tamao 3-1=2.</FONT><BR>
<FONT SIZE=+2>Este texto es del tamao 3+2=5.</FONT>
Teniendo en cuenta que el valor por default definido inicialmente para un documento es 3, el
resultado ser:
Este texto tiene el tamao por default (3).
Este texto es del tamao 3-1=2.
Este texto es del tamao 3+2=5.
El valor del tamao por default puede ser modificado mediante el elemento <BASEFONT>

El elemento <BASEFONT>permite cambiar el tamao por default de toda la pgina mediante el
atributo SIZE.
Ejemplo:
<BASEFONT SIZE=5>
Con esta sentencia se conseguir que el tamao de letra por default del documento pase a ser 5,
hasta que aparezca otro elemento <BASEFONT> que lo restaure o lo cambie por otro valor
diferente.

Estilos de Caracteres: Los siguientes elementos llenos permitirn definir distintos estilos para el
grupo de caracteres que se defina entre sus marcas de inicio y cierre.
Ejemplo:
<i>Texto en cursiva (itlica) </i>
Texto en cursiva (itlica)
Los estilos fsicos indican explcitamente el tipo de caracteres a utilizar.
Estilos fsicos
Negrita
<b>
Cursiva
<i >
Subrayado
<u>
Tachado
<st r i ke>
A
Superndice
<sup>
BB
Subndice
<sub>
Parpadeo
<bl i nk>
Mqui na de escr i bi r
( Tel et i po)
<t t >
Texto grande
<bi g>
Texto pequeo <smal l >

Los estilos lgicos estn pensados para caracterizar determinadas porciones de texto, pero su
interpretacin es totalmente dependiente del browser.
Estilos lgicos
nfasis
<em>
Texto destacado
<st r ong>
Cdi go <code>
Citas
<ci t e>
Ent r ada por t ecl ado <kbd>
Ej empl os <samp>
Variables
<var >

Se pueden anidar distintos estilos obteniendo resultados como estos:
Negrita y cursiva
<b><i > Negr i t a y cur si va </ i ></ b>
Negrita y tachado
<b><st r i ke> Negr i t a y t achado </ st r i ke></ b>
Par padeo, t achado y t i po cdi go
<bl i nk><st r i ke><code>
Par padeo, t achado y t i po cdi go
</ code></ st r i ke></ bl i nk>

Manejo de Colores. Los colores se identifican mediante el nombre del color en ingls o bien
mediante un cdigo del tipo #rrggbb donde "rr" "gg" y "bb" son valores hexadecimales
comprendidos entre 00 y FF que especifican el grado de saturacin de los colores rojo, verde y
azul.
Mediante el elemento <FONT> se puede cambiar el color de un grupo definido de caracteres en un
texto.

A continuacin se muestran algunos ejemplos:
<FONT COLOR=" r ed" > ROJ O </ FONT>
ROJ O
<FONT COLOR=" bl ue" > AZUL </ FONT>
AZUL
<FONT COLOR=" navy" > AZUL MARI NO </ FONT>
AZUL MARINO
<FONT COLOR=" gr een" > VERDE </ FONT>
VERDE
<FONT COLOR=" ol i ve" > OLI VA </ FONT>
OLIVA
<FONT COLOR=" yel l ow" > AMARI LLO </ FONT>
AMARILLO
<FONT COLOR=" l i me" > LI MA </ FONT>
LIMA
<FONT COLOR=" magent a" > MAGENTA </ FONT>
MAGENTA
<FONT COLOR=" pur pl e" > PURPURA </ FONT>
PURPURA
<FONT COLOR=" cyan" > CYAN </ FONT>
CYAN
<FONT COLOR=" br own" > MARRON </ FONT>
MARRON
<FONT COLOR=" bl ack" > NEGRO </ FONT>
NEGRO
<FONT COLOR=" gr ay" > GRI S </ FONT>
GRIS
<FONT COLOR=" t eal " > TEAL </ FONT>
TEAL
<FONT COLOR=" whi t e" > BLANCO </ FONT>
BLANCO

En el siguiente ejemplo se muestra una combinacin de colores y tamaos de letra:

<FONT SIZE=6 COLOR="navy">C</FONT><FONT SIZE=4>aptulo </FONT><BR>
<FONT SIZE=5 COLOR="red">E</FONT><FONT SIZE=3>rase una vez un ...</FONT>
Resulta:
Captulo I
Erase una vez un ...
Los colores de entorno como los colores definidos por default para el fondo, el texto normal y los
enlaces se pueden cambiar mediante el elemento <BODY>. Este elemento tambin permite utilizar
una imagen como fondo de pgina.
<BODY atributo1 atributo2 atributo3 ... atributoN >

El atributo BGCOLOR. Este atributo permite establecer un color de fondo para el documento.
<BODY BGCOLOR="#C0C0C0">
Este ejemplo establecer el colos gris claro (#C0C0C0) como color de fondo de pgina.

El atributo BACKGROUND. Este atributo permitir se utilice una imagen residente en el servidor, o
en un Archivo local, como fondo de pgina.
<BODY BACKGROUND="Archivo_grfico.gif">

El atributo TEXT. Permite controlar el color del texto estndar, es decir, todo texto que no
especifique un enlace.
<BODY TEXT="darkblue">
Este ejemplo har que, por default, el texto del documento aparezca de color azul oscuro.

Los atributos LINK, VLINK y ALINK controlan el color de los enlaces:
LINK es el color de un enlace que an no ha sido visitado.
ALINK es un color muy fugaz que aparece cuando se hace clic sobre el enlace.
VLINK es el color de un enlace que ya ha sido visitado.
<BODY LINK="blue" ALINK="red" VLINK="navy">

Manejo de Imgenes. El elemento IMG permite incluir una imagen o una animacin en un
documento. Vendr siempre acompaado por el atributo SRC que indica la direccin del archivo
grfico que contiene la imagen:
<IMG SRC="direccin_URL_del_archivo_grfico">
Ejemplos:
Imagen situada en un archivo local:
<IMG SRC="images/wmelon.gif">

Si el archivo indicado no es encontrado el browser mostrar un smbolo en lugar de la imagen,
indicando el error.
Este elemento permite adems los siguientes atributos:
1. ALT: Define un texto alternativo que sustituir a la imagen en caso de que el browser no
sea capaz de tratar imagenes. Esto es importante sobretodo cuando la imagen soporta un
enlace. Por ejemplo:
<IMG SRC="images/toucan.gif" ALT="Imagen de un TUCAN">
2. ALIGN. Alinea la imagen, segn la posicin que se le indique, respecto a la lnea de texto
en la que est. Puede tomar los siguientes valores:
TOP: alinea la parte superior de la imagen con la lnea actual.
MIDDLE: alinea el centro de la imagen con la lnea actual.
BOTTOM: alinea la base de la imagen con la lnea actual.
Ejemplos:
<IMG SRC="flor.gif" ALIGN="top">
<IMG SRC="flor.gif" ALIGN="middle">
<IMG SRC="flor.gif" ALIGN="bottom">
Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen
residente en el servidor, o en un archivo local, como fondo de pgina. El valor que deber tomar
dicho atributo es la direccin donde se encuentra el archivo que contiene la imagen. La sintaxis
ser:
<BODY BACKGROUND="direccion_del_archivo_grafico">
Ejemplo:
<BODY BACKGROUND="images/blanco51.gif">
Esta sentencia es la utilizada para definir el fondo utilizado en este mismo documento.

Los enlaces hipertexto pueden ser tambin definidos sobre imgenes de tal forma que al picar con
el ratn sobre algn punto de la superficie de stas, se pase al documento correspondiente. Esto
suele ser utilizado sobre todo para introducir botones de navegacin en las pginas HTML.
Ejemplos:
<A HREF="forms.htm"><IMG SRC="images/boton1.gif"></A>
<A HREF="inicio.htm"><IMG SRC="images/boton2.gif"></A>
<A HREF="simbolos.htm"><IMG SRC="images/boton3.gif"></A>

Una imagen que acta de hiperenlace se distingue mediante un borde de color alrededor de sta.
Si en un enlace se indica la direccin de una imagen dicha imagen no ser cargada junto con la
pgina sino que ser cargada slo en el caso de que dicho enlace sea activado.
Ejemplo:
<A HREF="images/new.gif">Enlace a una imagen </A>

ENLACES. El elemento <A> se utiliza para definir enlaces hipertextuales del Web, y 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. Sus principales atributos son: NAME, HREF y
TARGET. Los enlaces hipertextuales 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. 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. La
definicin por default 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. Esta 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. Esta ancla se define mediante el atributo NAME.

Adems se utiliza el atributo TARGET para ordenar la apertura de una nueva ventana del browser
con la pgina indicada por HREF.
T
El atributo NAME 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 Archivo 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 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.itlalaguna.edu.mx">
Instituto Tecnolgico de la Laguna
</A>
Instituto Tecnolgico de la Laguna

El atributo TARGET ordena la apertura de una nueva ventana con el documento indicado por el
atributo HREF.
Ejemplo:
<A HREF="indice.htm" TARGET="ventana2">
Nueva ventana
</A>
Nueva ventana
Si pulsa con el ratn sobre este hiperenlace se visualizar el Indice en una nueva ventana del
browser.

LISTAS. Una lista permite organizar la totalidad o parte de un documento HTML estructurndolo de
la forma ms clara posible para hacerlo ms perceptible. Las listas se utilizan para dividir el
documento as como para efectuar numeraciones de objetos, pero la diferencia con los
procesadores de texto es que no permite la numeracin automtica para niveles jerrquicos
diferentes:
1. Archivos HTML
2. Archivos de texto
3. Archivos de imgenes
es posible automticamente...
1. Archivos de sonido
1.1 Archivos WAV
2. Archivos de imgenes
2.1 Archivos GIF
2.2 Archivos BMP
no es posible automticamente...

HTML define varios tipos de listas:
Listas sin orden, sin numeracin: <UL> , <LI>
Listas ordenadas, con numeracin: <OL> , <LI>
Listas de directorio, similares a las listas sin orden: <DIR> , <LI>
Listas de men , similares a las listas sin orden: <MENU> , <LI>
Listas de definicin, tpicamente un glosario: <DL> , <DT> , <DD>

Cualquiera de los tipos de listas nombrados puede ser anidado. En el caso de las listas ordenadas
no se consigue una numeracin escalonada al anidar una lista dentro de otra.
Los primeros cuatro tipos de listas, denominados listas regulares, hacen uso de la marca <LI>, la
cual es un elemento vaco, o sea, no requiere de marca de fin, y es comn a las denominadas
listas regulares. La sintxis general de estas listas ser:
<marca de comienzo>
<LI>Primer elemento de la lista
<LI>Segundo elemento de la lista
<LI>...
<marca de cierre>

La marca <UL>permite generar listas no ordenadas, cada uno de los elementos de la lista ir
precedido por un smbolo (fijo por default) que puede variar segn el nivel de anidamiento de la
lista.

Ejemplo:
Ejemplo de lista no ordenada
Archivo HTML
Archivo de imagen
Archivo de sonido
Archivo de vdeo
Archivo de ejemplo
<H3>Ej empl o de l i st a no or denada</ H3>
<UL>
<LI >Ar chi vo HTML</ LI >
<LI >Ar chi vo de i magen</ LI >
<LI >Ar chi vo de soni do</ LI >
<LI >Ar chi vo de v deo</ LI >
<LI >Ar chi vo de ej empl o</ LI >
</ UL>

Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres valores (el valor por
default es DISC). Con el valor CIRCLE se ver:
o Primera lnea
o segunda lnea
<UL TYPE=CIRCLE>
<LI >Pr i mer a l nea
<LI >Segunda l nea
</ UL>

Tambin puede usarse el valor SQUARE. As:
Primera lnea
segunda lnea
<UL TYPE=SQUARE>
<LI >Segunda l nea
</ UL>

La marca <OL>se utiliza para una lista ordenada o numerada. Cada marca </LI>incrementar el
nmero que se visualizar delante del elemento de la lista.
Ejemplo:
Ejemplo de lista ordenada
1. Archivo HTML
2. Archivo de imagen
3. Archivo de sonido
4. Archivo de vdeo
5. Archivo de ejemplo
<H3>Ej empl o de l i st a or denada</ H3>
<OL>
<LI >Ar chi vo HTML</ LI >
<LI >Ar chi vo de i magen</ LI >
<LI >Ar chi vo de soni do</ LI >
<LI >Ar chi vo de v deo</ LI >
<LI >Ar chi vo de ej empl o</ LI >
</ OL>

Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar letras y
numeracin romana tanto en maysculas como minsculas. Para esto se utiliza el atributo TYPE
del elemento <OL> con los siguientes valores:
TYPE=1
(por default) para nmeros,
TYPE=A
para letras maysculas,
TYPE=a
para letras minsculas,
TYPE=I
para numeracin romana en maysculas,
TYPE=i
para numeracin romana en minsculas.
Esto es una lista ordenada con letras maysculas:
<OL TYPE=A>
A. Primera lnea
B. Segunda lnea
C. Tercera lnea
D. Cuarta lnea
<LI >Segunda l nea
<LI >Ter cer a l nea
<LI >Cuar t a l nea
</ OL>
Esto es una lista ordenada con letras minsculas:
a. Primera lnea
b. Segunda lnea
c. Tercera lnea
d. Cuarta lnea
<OL TYPE=a>
<LI >Segunda l nea
<LI >Cuar t a l nea
</ OL>
Esto es una lista ordenada con numeracin romana
en maysculas:
I. Primera lnea
II. Segunda lnea
III. Tercera lnea
IV. Cuarta lnea
<OL TYPE=I>
<LI >Segunda l nea
<LI >Cuar t a l nea
</ OL>
Esto es una lista ordenada con numeracin romana
en minsculas:
i. Primera lnea
ii. Segunda lnea
iii. Tercera lnea
iv. Cuarta lnea
<OL TYPE=i>
<LI >Segunda l nea
<LI >Cuar t a l nea
</ OL>
En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es
una lista que contina en otra pgina). Se puede conseguir con el atributo START combinado con
TYPE.
Esto es una lista ordenada con letras maysculas y
que comienza por la E:
E. Primera lnea
F. Segunda lnea
G. Tercera lnea
H. Cuarta lnea
<OL TYPE=A START=5>
<LI >Segunda l nea
<LI >Cuar t a l nea
</ OL>
El nmero que se pone en el atributo START indica en que nmero o letra comenzar la lista. La E
es la quinta letra.

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 sintaxis 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>.
Ejemplo:
Ejemplo de lista de directorio
Espaol
Ingls
Francs
Alemn
<H3>Ej empl o de l i st a di r ect or i o</ H3>
<DI R>
<LI >Espaol </ LI >
<LI >I ngl s</ LI >
<LI >Fr ancs</ LI >
<LI >Al emn</ LI >
</ DI R>

Las listas de men son similares a las listas sin orden. En el Netscape no se ve diferencia entre
una y otra. La nica diferencia es la sintaxis 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>.
Ejemplo:
Ejemplo de lista de men
Opcin 1
Opcin 2
Opcin 3
<H3>Ej empl o de l i st a di r ect or i o</ H3>
<MENU>
<LI >Opci n 1</ LI >
</ MENU>

Tablas. La estructura de una tabla se define mediante:
una marca de inicio de la tabla (TABLE),
una marca de comienzo de una nueva lnea (TR) y
una marca de comienzo de una celda (TD).
Al final de cada uno de estos elementos se deber definir la marca de final correspondiente.
Esta estructura es bastante simple y muy fcilmente modificable.
Se pueden definir adems textos de cabecera en las celdas (TH) y ttulos para las tablas
(CAPTION).
Una celda puede contener algunos de los siguientes elementos:
texto
listas
otras tablas
imgenes
enlaces de hipertexto
elementos de formulario

La marca <TABLE>permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>.
Se puede indicar alguno de los siguientes atributos:
BORDER: define el grosor del marco exterior (puede ser cero).
CELLPADDING: define el espacio alrededor del texto de una celda.
CELLSPACING: define el espacio entre celdas.
El valor de estos atributos se especifica en pxeles. Cuando no se les asigna algn valor
explcitamente estos atributos tomarn valores definidos por default.
El valor por default del atributo BORDER es cero por lo que si ste atributo no se especifica se
obtendr una tabla sin bordes la cual suele ser muy til para la alineacin de elementos, uno al
lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastar nombrar
este atributo asignndole un valor, o no.
Se puede determinar el tamao de la tabla, bien forzndola a ocupar un cierto porcentaje de la
anchura de la ventana del browser o definiendo un tamao fijo en unidades, mediante los atributos:
WIDTH: define el ancho de la tabla, bien en % o en unidades.
HEIGTH: define el alto de la tabla, bien en % o en unidades.
Ejemplos:
celda 1 celda 2
celda 3 celda 4

<TABLE>
<TR><TD>cel da 1</ TD><TD>cel da 2</ TD></ TR>
</ TABLE>
celda 1 celda 2
celda 3 celda 4

<TABLE BORDER>
</ TABLE>
celda 1 celda 2
celda 3 celda 4

<TABLE BORDER=5 CELLSPACI NG=6 CELLPADDI NG=8>
</ TABLE>
Definiendo el ancho y alto de la tabla en %
Ancho (WIDTH) 50%
Alto (HEIGHT) 30%

<TABLE BORDER WIDTH=50% HEIGHT=30%>
<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>50%</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>30%</TD>
</TABLE>

Definiendo el ancho y alto de la tabla en
unidades.
Ancho (WIDTH) 300
Alto (HEIGHT) 80

<TABLE BORDER WIDTH=300 HEIGHT=80>
<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>300</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>80</TD>
</TABLE>

La marca <TR>inicia una lnea de la tabla que terminar con </TR>. Admite los atributos:
VALIGN: permite una alineacin del texto en el sentido vertical de la celda. Admite los
valores: TOP, BOTTOM, MIDDLE
ALIGN: permite una alineacin del texto en el sentido horizontal de la celda. Admite los
valores: RIGHT, CENTER, LEFT
Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de <TD>contradice esta
alineacin

La marca <TD>delimita el inicio de una celda. Admite los atributos:
VALIGN: permite una alineacin del texto en el sentido vertical de la celda. Admite los
valores: TOP, BOTTOM, MIDDLE.
ALIGN: permite una alineacin del texto en el sentido horizontal de la celda. Admite los
valores: RIGHT, CENTER, LEFT.
COLSPAN: define una celda con una anchura mltiplo de la columna bsica.
ROWSPAN: define una celda con una anchura mltiplo de la fila bsica.
NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola lnea.

En las tablas el ajuste es automtico, la anchura de una celda depende del texto ms largo inscrito
en una de las celdas de la columna. De modo predeterminado, si la lnea es demasiado larga, el
browser la cortar en varias lneas, a no ser que est presente el atributo NOWRAP.

La marca <TH> es idntica a <TD> pero el texto de las celdas se considera como texto de
cabecera. Este texto se centra automticamente y se pone en negrita. Admite los mismos
parmetros que la marca <TD>(VALIGN, ALIGN, COLSPAN, ROWSPAN, NOWRAP).

CAPTION. Esta marca permite poner un ttulo encima (atributo ALIGN=TOP) o debajo (atributo
ALIGN=BOTTOM) de la tabla.
Ejemplos:
Titulo Superior (por default)
Atributos de alineacin, Align y VAlign
Alineacin
Vertical
Top
Middle
Bottom
Alineacin
Horizontal
Left Center Right

<CENTER>
<TABLE BORDER>
<CAPTION>Titulo Superior (por default)</CAPTION>
<TR>
<TD></TD>
<TH COLSPAN=3>Atributos de alineacin, Align y 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>

Ventana 1 Ventana 2 Ventana 3
Color
Fondo
blanco gris amarillo
Color
Texto
azul negro
Color
Smbolos
rojo
negro
verde
Tabla 2.1.

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

Ejemplo:
Atributo
NOWRA
P
Aqu hay una lnea muy larga. Para que no sea cortada utilizamos el atributo
NOWRAP.

<TABLE BORDER>
<TR>
<TD>Ejemplo: Atributo NOWRAP</TD>
<TD NOWRAP>Aqu hay una lnea muy larga. Para que no sea cortada
utilizamos el atributo <I>NOWRAP</I>.</TD>
</TABLE>

Frames. El frame es un elemento que permite dividir la pantalla en varias reas independientes
unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. Cada una
de estas zonas es capaz de mostrar cdigo HTML, como en las celdas de una tabla. Sin embargo,
no hay que confundir paneles con tablas ya que existe una gran diferencia; en el caso de una tabla,
todas las celdas forman parte del mismo documento HTML, mientras que en el caso de los frames
cada zona de la pantalla es un documento HTML propio. Se ve pues, simultneamente, en la
misma ventana de un browser, la pgina correspondiente a varios Archivos.
El concepto de frame elimina una de las limitaciones del Web ya que hasta ahora, cada nuevo
documento destrua el anterior, y obligaba al usuario a usar demasiado el comando Back de los
browsers. Ahora es posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo tener
en una zona un men que casi nunca ser necesario recargar.
La estructura general de un documento dividido en varios frames difiere de la de un documento
clsico ya que en stos el cuerpo se inserta en las marcas <BODY>y </BODY>, mientras que en
los frames, el cuerpo del documento se inserta entre las marcas <FRAMESET>y </FRAMESET>;.
El elemento <FRAMESET>permitir precisar la forma de los diferentes paneles por medio de dos
atributos: ROWS y COLS. <FRAME> es la marca de definicin de los paneles creados con
FRAMESET.
La mayora de los visualizadores no soportan los frames. Para que nuestra pgina con frame no
resulte opaca a ellos se utilizar el elemento <NOFRAMES> que permite ofrecer un texto
alternativo en entorno normal.
Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza el
atributo TARGET que indica en qu panel debe mostrarse el documento asociado a un enlace de
hipertexto.

El elemento FRAMESET sustiye al elemento <BODY>y permite dividir una zona en subzonas,
bien verticalmente, bien horizontalmente. Si no hay ninguna zona todava, las divisiones se aplican
a la zona inicial formada por el conjunto de la ventana del browser. Esta marca posee dos
atributos:
ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
ROWS es una lista de valores enteros separados por comas. El nmero de elementos de la lista
corresponde al nmero de subzonas horizontales a crear. Cada uno de los valores de la lista
puede darse segn uno de los tres formatos siguientes, donde n es un entero:
1. n: indica la altura de la subzona en pxels.
2. n%: indica la altura de la subzona expresada en porcentajes del tamao de la zona madre.
3. n*: n es opcional. El carater * indica al browser que debe dar a la zona todo el espacio an
disponible.

COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo
ROWS.
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
Ejemplo: A continuacin se muestra dos maneras idnticas de dividir una zona en tres. Las dos
subzonas superiores son de tamao idntico y la ltima es el doble de las anteriores.

<FRAMESET ROWS="25%,25%,50%">...<FRAMESET>
<FRAMESET ROWS="*,*,2*">...<FRAMESET>

Frame Es la marca utilizada para caracterizar las subzonas definidas mediante la marca
<FRAMESET>. Esta caracterizacin se realiza mediante los siguientes atributos:
SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se
indica, entonces la zona estar vaca.
SCR="url"
NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de
cualquier enlace de hipertexto. La sintaxis del atributo es:
NAME="nombre_de_la_zona"
MARGINWIDTH: Se utiliza para precisar el nmero de pxeles entre los bordes izquierdo y
derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen
izquierdo. La sintaxis es :
MARGINWIDTH="n"
MARGINHEIGHT: Se utiliza para precisar el nmero de pxeles entre los bordes superior e
inferior de la zona y el documento HTML a visualizar. La sintaxis es:
MARGINHEIGHT="n"
SCROLLING: Indica si la zona debe poseer una barra de desplazamiento
(SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si esta eleccin se
deja en manos del browser (SCROLLING="auto"). La sintaxis es:
SCROLLING="yes/no/auto"
NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamao de
la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su
frontera mediante el ratn.

Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al
usuario en lugar de los paneles. Dicho texto ir entre las marcas <NOFRAMES> y </NOFRAMES>.
En realidad dichos browsers ignorarn las marcas FRAMESET y NOFRAMES pero casualmente
no el texto comprendido entre stas ltimas. Por el contrario un browser capaz de gestionar
paneles interpretar las marcas <NOFRAMES> y </NOFRAMES> y sabr que debe ignorar el texto
comprendido entre ellas.

El atributo TARGET o atributo afecta a las marcas que caracterizan los enlaces de hipertexto, en
particular a las marcas <A> y <FORM>. TARGET permite precisar el nombre de la zona que debe
recibir el documento correspondiente al enlace.
El atributo TARGET existe para indicar al browser que, en respuesta a un clic, mostrar sus
resultados en el panel cuyo nombre es "zonascript".
<FORM ACTION="cgi_bin/test" TARGET="zonascript" METHOD="POST">
...
</FORM>

TARGET puede tomar uno de los siguientes cuatro valores:
_blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el
documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el
destino de otro enlace de hipertexto.
_self, indica que el documento se cargar en la misma zona donde se encuentra el enlace
de hipertexto. Se trata del valor predeterminado cuando no se indica el atributo TARGET.
_top, indica al browser que suprima todos los paneles existentes y visualice el documento
de modo normal.
_parent, indica al browser que visualice el documento ocupando toda la superficie de la
zona en la que se ha visualizado el documento que contiene el enlace. Esta nocin solo
tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de
documentos y no del anidamiento de marcas <FRAMESET>.
Ejemplos:
Un frame bsico. Sintaxis general. En general, todas las pginas que contengan un frame debern
ser ms o menos as:
<HTML>
<HEAD><TITLE>Mi titulo ></TITLE></HEAD>

<FRAMESET COLS=*,*>
<NOFRAMES>
<BODY>
Su visualizador no soporta frames. Pulse
<A HREF="indice.htm">aqui</A>para volver.
</BODY>
</NOFRAMES>

<FRAME SRC="doc_a.htm" >
<FRAME SRC="doc_b.htm" >

</FRAMESET>

</HTML>

Un frame de 3 reas verticales (COLS)
A B C
Y se escribira; as:
<FRAMESET COLS=30%, 20%, 50%>
<FRAME SRC=" doc_a. ht m" >
<FRAME SRC=" doc_b. ht m" >
<FRAME SRC=" doc_c. ht m" >
</ FRAMESET>

Un frame de 3 reas horizontales (ROWS)
A
B
C
Y se escribira as:
<FRAMESET ROWS=25%, 25%, 50%>
<FRAME SRC=" doc_b. ht m" >
<FRAME SRC=" doc_c. ht m" >
</ FRAMESET>

Un frame combinado de un rea vertical y dos horizontales.
El frame A, no podr ser redimensionado (NORESIZE).
B
A
C
Y se escribira as:
<FRAMESET COLS=20%, *>
<FRAME SRC=" doc_a. ht m"
NORESIZE>
<FRAMESET ROWS=40%, *>
<FRAME
SRC=" doc_b. ht m" >
<FRAME
SRC=" doc_c. ht m" >
</ FRAMESET>
</ FRAMESET>

Un frame con dos reas verticales. Una normal, la otra con mrgenes forzados para el texto
(MARGINWIDTH MARGINHEIGHT)
AAAA
AA
AA
Y se escribira as:
<FRAMESET COLS=50%, 50%>
<FRAME SRC=" doc_a. ht m"
MARGINWIDTH 50 =
MARGINHEIGHT=50>
</ FRAMESET>

Un frame con referencias cruzadas (NAME TARGET)
A B
Y se escribira as:
<FRAMESET COLS=50%, 50%>
<FRAME SRC=" doc_aa. ht m" >
<FRAME SRC=" doc_bb. ht m"
NAME=" VENTANA" >
</ FRAMESET>

Formularios. Los formularios generan en la pantalla cuadros de dilogo permitiendo as la
interaccin con el usuario para consultas de bases de datos, solicitudes de documentacin, etc
Como en un formulario en papel, se podrn tener zonas en las que se introducir un texto, casillas
de verificacin, listas de seleccin, etc... El usuario rellenar estas zonas en su formulario las
cuales se identifican con un nombre simblico. Cuando el formulario se enva al programa que lo
va a tratar, ste recibe el identificador de cada zona y el valor introducido. A dichos programas se
les suele denominar scripts, y se han de ejecutar en un espacio del servidor reservado a este
efecto: el CGI o Common Gateway Interface.
El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla
de conversin hexadecimal que utilizan la mayora de los visualizadores. Dentro de un mismo
parmetro las palabras aparecern, en el destino, separadas por el signo +, y los parmetros entre
s por el smbolo &. Las letras acentuadas y otros caracteres especiales sern valores
hexadecimales precedidos del smbolo.
Para la creacin de formularios se utilizarn las siguientes marcas, que permiten generar una
interfaz de edicin:
la marca FORM que delimita el comienzo y fin de la definicin del formulario.
la marca INPUT que permite crear diferentes tipos de entradas: campos de edicin y
diversos tipos de botones;
la marca SELECT que permite crear listas: mens despegables y listas con barras de
desplazamiento;
la marca TEXTAREA que genera una zona de edicin de texto libre.

Los siguientes atributos son comunes a las marcas que se definen en este apartado para
generar formularios:
El atributo NAME define el nombre que permitir al script identificar el origen de los datos.
Este nombre debe ser nico.
NAME=nombre_de_la_variable_asociada
El atributo VALUE puede ser definido para un campo de:
1. Texto: permite definir el contenido del campo.
2. Botn SUBMIT: indica el texto a escribir en el botn.
3. Botn RADIO, Botn CHECKBOX: valor que se le asocia al botn cuando ste
est pulsado. El valor especificado por NAME identifica el bloque de botones.

La marca <FORM>y </FORM>definen un formulario y entre ellas se situarn todas las marcas
que generan los diversos elementos que componen un formulario. Esta marca debe ir acompaada
obligatoriamente por dos atributos:
El atributo METHOD est dirigido al programador que codifica el script. Al que puede darse
el valor POST o el valor GET que define el modo de transferencia de los datos hacia el
script. El optar por uno u otro obedece a complejas cuestiones de programacin basadas
en la mxima longitud de registro que puede enviarse; cada uno usa un canal de salida
distinto.
El atributo ACTION define la accin a ejecutar cuando se pulse el botn de sumisin,
indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el
formulario.
<FORM METHOD=tipo_de_metodo ACTION=URL_del_script>
<FORM METHOD="post" ACTION=" cgi_bin/inscripcion">

La marca <INPUT> servir para definir campos para entrar un texto y botones que permiten
escoger opciones.
Permite varios atributos adems de los ya comentados de modo general:
El atributo SIZE define la longitud de la ventana de texto.
El atributo MAXLENGTH define la mxima longitud de la cadena que se puede escribir
dentro de la ventana.
Ejemplo:
Definir una zona de entrada de texto simple de longitud 10 y longitud mxima de la cadena 15.

<input name="identidad" size=10 maxlength=15>
Como se puede observar en este ejemplo, el nmero mximo de caracteres puede ser mayor que
el tamao de la ventana y viceversa.

El atributo TYPE asociado a la marca INPUT permite la seleccin del elemento de entrada. Puede
tomar los siguientes valores:
TEXT: es la opcin seleccionada por default. Define una zona de entrada de texto simple.
El texto definido en VALUE aparecer en dicha zona, para poder ser completado o
modificado por el usuario.
Championes

<f or m>
<i nput t ype=" t ext " val ue=" Champi ones" >
</ f or m>
SUBMIT: desencadena el envo del formulario hacia el script; el texto definido en VALUE
se escribir en el botn:
Salida

<f or m>
<i nput t ype=" submi t " val ue=" Sal i da" >
</ f or m>
RESET: permite borrar los datos ya entrados:
Borrar

<f or m>
<i nput t ype=" r eset " val ue=" Bor r ar " >
</ f or m>
PASSWORD: permite entrar una palabra clave de forma confidencial:

<f or m>
<i nput t ype=" passwor d" name " pwd" >
</ f or m>
CHEKBOX: crea un bloque de botones que permiten una seleccin mltiple de opciones:
<f or m>
<i nput t ype=" checkbox" name=" mi cr o"
val ue=" mac" >Maci nt osh
<i nput t ype=" checkbox" name=" mi cr o" val ue=" pc" >PC
Macintosh
PC
</ f or m>
RADIO: crea un bloque de botones que permiten una seleccin exclusiva entre varias
opciones
CD-
ROM
Disquete

<f or m>
<i nput t ype=" r adi o" name=" medi a" val ue=" cd" checked>CD-
ROM
<i nput t ype=" r adi o" name=" medi a" val ue=" dk" >Di squet e
</ f or m>
HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada
en la pantalla.
<input type="hidden" name=nombre_de_variable value=valor_de_la_variable>
IMAGE: hace que el visualizador presente una imagen que es sensible al ratn. Lo que el
formato enva al servidor es un registro cuyos campos son el nombre definido para la
imagen seguido de los parmetros x=n y y=m donde n y m son los nmeros de las
coordenadas x, y del punto en el que estaba el ratn en el momento del envo. Para
representar la imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:
<form method="post" action=" http:// www.itlalaguna.edu.mx">
<input type=image name="imagen" src="sugeren.gif">
</form>

La marca <SELECT> permite generar listas de seleccin simple o de seleccin variable. Se
programa con una lista en la que los items se especifican mediante la marca <OPTION>. La
presentacin de la lista depende del atributo SIZE; si su valor es inferior a 2 o est ausente, la lista
se interpreta como un men desplegable (pop-list). En caso contrario la lista se visualiza en una
ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el
nmero de lneas visibles en la ventana. La opcin de seleccin mltiple se deriva de la presencia
del atributo MULTIPLE.
Ejemplos:
Men despegable:
Entrada directa

<f or m>
<sel ect NAME=" sede" >
<opt i on>Ent r ada i ndi r ect a
<opt i on>Ent r ada l at er al
<opt i on SELECTED>Ent r ada di r ect a
</ sel ect >
</ f or m>

Ventana con barra de desplazamiento: ( con opcin de seleccin mltiple )
Ada
C++
Cliper

<f or m>
<sel ect MULTI PLE NAME=" l enguaj e" SI ZE=" 3" >
<opt i on SELECTED>Ada
<opt i on>C++
<opt i on>Cl i per
<opt i on>Pascal
<opt i on>For t r an
<opt i on>Cobol
</ sel ect >
</ f or m>

La longitud de la ventana de seleccin se autoajusta al valor ms largo de la lista. Se debe de
procurar que los contenidos de los campos sean lo ms cortos posibles; una excesiva longitud
implica mayor trfico por la red, pero se deben construir las listas de forma clara, y que resulten de
fcil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este
dilema se utiliza el parmetro VALUE asociado al atributo OPTION, el cual permite enviar un valor
diferente al que aparece en la lista.
A continuacin se muestra una lista contenida en una ventana con barras de desplazamiento.
Pista 1
Pista 2
Pista 3

Bottom of Form
<form>
<select name="lista" size=3>
<option>Pista 1
<option>Pista 2
<option>Pista 3
<option value="Pista 4">Pista 4
<option>Pista 5
<option>Pista 6
</select>
</form>

La marca <TEXTAREA> permite crear una ventana con barras de desplazamiento horizontales y
verticales en la que se podr escribir texto. El valor dado a los atributos ROWS (lneas) y COLS
(columnas) delimita el tamao de esta ventana.
Es posible predefinir un texto (entre las marcas <TEXTAREA>y </TEXTAREA>) que el usuario
podr reemplazar o completar con su propio texto.
Ejemplos:
<f or m>
<t ext ar ea name=" comment " r ows=5 col s=40>
I nt r oduzca aqu sus coment ar i os
</ t ext ar ea>
</ f or m>
Estas lneas de cdigo muestran la siguiente ventana:
Introduzca aqu sus comentarios

A continuacin se muestra un tpico y complejo formulario que contiene cada uno de los elementos
estudiados anteriormente organizados mediante el uso de una tabla.
Nombre:
F.Nac.: DNI:
Apellidos:

Calle y nmero:

Cdigo Postal:
Ciudad:
Provincia:
Telfono:
Estado Civil:
Hombre Mujer
Soltero
Idiomas:
Espaol Alemn Frances Ingls
Comentarios
personales:

Pulse aqu:
Enviar datos Borrar los datos

<FORM METHOD=POST>

<CENTER>
<TABLE BORDER>

<TR>
<TD>Nombre:</TD>
<TD><INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18>F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8>DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>

<TR>
<TD>Apellidos:</TD>
<TD><INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>

<TR>
<TD>Calle y nmero:</TD>
<TD><INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>

<TR>
<TD>Cdigo Postal:</TD>
<TD><INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>

<TR>
<TD>Provincia: </TD>
<TD><INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20> Telfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>

<TR>
<TD>Estado Civil:</TD>
<TD><SELECT NAME="OPCION">
<OPTION>Soltero
<OPTION>Casado
<OPTION>Divorciado
<OPTION>Otro
</SELECT>
<INPUT TYPE="radio" NAME="sexo" VALUE="H">Hombre
<INPUT TYPE="radio" NAME="sexo" VALUE="M">Mujer </TD>

<TR>
<TD>Idiomas:</TD>
<TD><INPUT TYPE="checkbox" NAME="idiomas" VALUE="E">Espaol
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="A">Alemn
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="F">Frances
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="I">Ingls </TD>

<TR>
<TD>Comentarios<BR>personales:</TD>
<TD><TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>

<TR>
<TH>Pulse aqu:</TH>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>

</TABLE>
</CENTER>
</FORM>

Mapas.Un mapa es una imagen que permite realizar diferentes hiperenlaces en funcin de la
"zona" de la imagen que se pulse.
Las directivas para crear mapas son <MAP></MAP>y <AREA>.
La directiva <MAP>identifica al mapa y tiene el parmetro name para indicar el nombre del mapa.
La directiva <AREA>define las reas sensibles de la imagen. Tiene los siguientes parmetros
obligatorios:
Shape. Indica el tipo de rea a definir.
coords. Indica las coordenadas de la figura indicada con shape.
href. Indica la direccin a la que se accede si se pulsa en la zona delimitada por el rea
indicada.
Los tipos de rea pueden ser los siguientes:
Rect. rea rectangular. Se deben especificar las coordenadas de la esquina superior
izquierda y las de la esquina inferior derecha.
Poly. Polgono. Se deben especificar las coordenadas de todos los vrtices del polgono. El
visor se encarga de "cerrar" la figura.
Circle. Circulo. Se debe especificar en primer lugar las coordenadas del centro del crculo y
a continuacin el valor del radio (en puntos).
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada
por un mapa.
Si dos reas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del
mapa. Es importante definir una ltima rea que abarque la totalidad del grfico para direccionar a
una URL por default, con el objeto de contemplar el caso de que no se pulse sobre un rea
definida.
Ejemplo

<IMG SRC="Imagenes/Imagen1.jpg" WIDTH="140" HEIGHT="210" BORDER="0" ALT="Imagen1"
USEMAP="#Map1">
<MAP NAME="Map1">
<AREA SHAPE="CIRCLE" COORDS="60,56,47" HREF="pagina1" ALT="Imagen2">
<AREA SHAPE="POLY"
COORDS="3,182,36,178,0,44,165,60,169,66,184,62,196,0,43,201,35,190,0,193,0,183"
HREF="pagina2" ALT="Imagen3">
</MAP>

Evolucin de las aplicaciones web
En un principio la web era sencillamente una coleccin de pginas estticas, documentos, etc.,
para su consulta o descarga. El paso inmediatamente posterior en su evolucin fue la inclusin de
un mtodo para elaborar pginas dinmicas que permitieran que lo mostrado tuviese carcter
dinmico (es decir, generado a partir de los datos de la peticin). Este mtodo fue conocido como
CGI ("Common Gateway Interface") y defina un mecanismo mediante el que se poda pasar
informacin entre el servidor y ciertos programas externos. Los CGIs siguen utilizndose
ampliamente; la mayora de los servidores web permiten su uso debido a su sencillez. Adems,
dan total libertad para elegir el lenguaje de programacin que se desea emplear.
El funcionamiento de los CGIs tena un punto dbil: cada vez que se reciba una peticin, el
servidor deba lanzar un proceso para ejecutar el programa CGI. Como la mayora de CGIs
estaban escritos en lenguajes interpretados, como Perl o Python, o en lenguajes que requeran
"run-time environment", como J ava o VisualBasic, el servidor se vea sometido a una gran carga.
La concurrencia de mltiples accesos al CGI poda comportar problemas graves.
Por eso se empiezan a desarrollar alternativas a los CGIs que solucionaran el problema del
rendimiento. Las soluciones llegan bsicamente por dos vas: 1) se disean sistemas de ejecucin
de mdulos mejor integrados con el servidor, que evitan la instanciacin y ejecucin de varios
programas, y 2) se dota a los servidores un intrprete de algn lenguaje de programacin que
permita incluir el cdigo en las pginas de forma que lo ejecute el servidor, reduciendo el intervalo
de respuesta.
Entonces se experimenta un aumento del nmero de arquitecturas y lenguajes que permiten
desarrollar aplicaciones web. Todas siguen alguna de estas vas. Las ms tiles y las ms
utilizadas son las que permiten mezclar los dos sistemas: un lenguaje integrado que permita al
servidor interpretar comandos "incrustados" en las pginas HTML y, adems, un sistema de
ejecucin de programas mejor enlazado con el servidor, que no implique los problemas de
rendimiento propios de los CGIs.
Una de las ms potentes es la seguida por Sun Microsystems con su J ava, integrado por dos
componentes; un lenguaje que permite la incrustacin de cdigo en las pginas HTML que el
servidor convierte en programas ejecutables, J SP ("J ava Server Pages" o "Pginas de Servidor de
J ava"), y un mtodo de programacin muy ligado al servidor, con un rendimiento superior a los
CGIs, denominado "J ava Servlet".
Otra tecnologa de xito y una de las ms utilizadas es el lenguaje PHP. Se trata de un lenguaje
interpretado que permite la incrustacin de HTML en los programas, con una sintaxis derivada de C
y Perl. El hecho de ser sencillo y potente ha contribuido a hacer de PHP una herramienta muy
apropiada para determinados desarrollos.

1.5 Hojas de estilo en cascada e introduccin al XML.
Una hoja de estilo es un conjunto de instrucciones que definen la apariencia de diversos elementos
de un documento HTML. En otras palabras una hoja de estilo nos permite indicar por ejemplo el
tamao de la fuente, color y estilo de cierto prrafo que nosotros indiquemos, mediante la
definicin de estilos y aplicacin de los mismos.
Las hojas de estilo se usan porque tienen muchas ventajas sobre los tags tradicionales, ya que por
ejemplo es posible crear una sola hoja de estilo que compartan muchos documentos, y al hacer un
cambio en la hoja de estilo todos los documentos que la usan tendrn la apariencia deseada.
Tambin se puede tener control sobre ciertos aspectos que antes no se tenia, por ejemplo se
pueden definir los mrgenes de un documento o prrafo, o definir el espacio entre caracteres.
Las hojas de estilo son la innovacin ms importante al HTML, ya que le dan capacidades que
nunca tuvo, por ejemplo:
El uso de diversas unidades de medicin pxeles, puntos, picas, mm, en los principales
elementos del HTML, como son tablas, fuentes, bordes y en general los elementos que
tenan atributos como "size" "height" "width".
El posicionamiento de bloques de texto en cualquier parte del documento HTML, ya que es
posible definir en diversas unidades la posicin de un bloque de texto.
Mejor control sobre las fuentes que es necesario para otras tecnologas relacionadas como
las fuentes dinmicas.

Para crear una hoja de estilo dentro de un documento se usa el tag <STYLE>, este tag se usa en
la cabeza del documento, es decir despus del tag <HEAD>y antes del tag </HEAD>, este tag
tiene un atributo llamado type que deben usarse para un mejor funcionamiento de la hoja de estilo
que le dice al navegador que tipo de sintaxis usa la hoja de estilo.
Su sintaxis es la siguiente:
<STYLE type=text/css">
Ejemplo:
<HTML>
<HEAD>
Diversos datos de la cabeza del documento.....
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
Contenido del documento...
</BODY>
</HTML>

Para definir las caractersticas o apariencia de un tag en una hoja de estilo, se debe usar el nombre
del tag acompaado de los smbolos "{" y "}" de la siguiente forma:
<STYLE>

</STYLE>

Como se puede ver la definicin del estilo para el tag debe incluirse entre los tags <STYLE>y los
signos de comentario, luego se escribe el nombre del tag (sin usar los smbolos "<" y ">"), un
espacio despus o junto se abren las llaves "{" y "}" dentro de las cuales se incluirn los atributos
de estilo que se indiquen. Se pueden definir varios estilos para diversos tags, en el ejemplo anterior
los estilos que se definieran se aplicaran a los tags <H1>y <P>.
Ejemplo

<STYLE>

</STYLE>
Luego en el documento se usa el tag por ejemplo de la siguiente forma:
<H3>Tag headline 3 color rojo y centrado.</H3>
el navegador interpreta el tag usando la definicin de la hoja de estilo de la siguiente forma.
Tag headline 3 color rojo y centrado.
El navegador usa algunas caractersticas predeterminadas del tag <H3>adems de usar las que
se definieron en la hoja de estilo.
En el ejemplo hay un comentario escrito entre los smbolos "/*" y "*/", estos smbolos sirven para
incluir comentarios dentro de una hoja de estilo, todo lo que se escriba dentro de estos smbolos se
considerara comentario y no tendr ningn efecto dentro del estilo.
Lo que se incluye entre las llaves "{" y "}" son las propiedades del estilo, en este ejemplo
"color:#ff0000" se refiere al color del texto, "font-style:italic" indica que la fuente ser cursiva, "text-
align:center" indica que el texto va centrado.
A continuacin explicaremos como deben escribirse las propiedades de un estilo
estilo {propiedad:valor; propiedad:valor; }

El nombre de la propiedad debe escribirse en minsculas, a continuacin deben usarse dos puntos
":", el valor del atributo debe escribirse a la derecha del smbolo ":" y cuando se termine de indicar
el valor se debe usar el smbolo ";" punto y coma, cuando se usen varias propiedades, estas deben
separarse con espacios o ponerse en otro rengln.

Ejemplo:
<HTML>
<HEAD>
<TITLE>Un simple ejemplo</TITLE>

</STYLE>
</HEAD>
<BODY>
<H1>Tag Headline 1 con texto rojo.</H1>
<BLOCKQUOTE>Aplicacin del tag "blockquote" con texto azul.</BLOCKQUOTE>
<CENTER>Texto centrado de color verde oliva.</CENTER>
</BODY>
</HTML>
El navegador interpreta el documento anterior as:
Tag Headline 1 con texto rojo.
Aplicacin del tag "blockquote" con texto azul.
Texto centrado de color verde oliva.

El tag <SPAN>es uno de los nuevos tags que se han agregado al HTML para poder manejar y
aplicar estilos, este tag se usa para marcar bloques de texto.
El tag <SPAN>por si mismo no tiene ningn efecto, hasta que se usa alguno de sus atributos,
estos son los atributos del tag <SPAN>:
id. El nombre del estilo <SPAN id="nombre de estilo">
class. Nombre de la clase de estilo <SPAN class="nombre de la clase">
style. Diversos atributos <SPAN style="color:red; text-align:center;">
El tag <DIV>tambin funciona con los atributos "id", "class" y "style", el tag <DIV>se puede usar
como alternativa al tag <SPAN>, la nica diferencia entre estos dos tags es que el tag <DIV>
provoca un salto de lnea al terminar de definir un prrafo, y el tag <SPAN>deja el texto que va
despus de su uso inmediatamente despus que este termina.
A veces es necesario definir un estilo que solo se aplicar en una parte del documento y no a todos
los tags de cierto tipo u otras partes del documento. Para solucionar el problema anterior se
definen estilos particulares de la siguiente forma:
1. #Nombre_de_estilo{diversos atributos del estilo... }
2. Se usa el smbolo "#" antes del nombre de estilo e inmediatamente despus (sin espacios)
el nombre del estilo.
3. Se puede usar cualquier nombre de estilo de una sola palabra, siempre y cuando no exista
ya un estilo con ese nombre.
4. Se usan las llaves "{" y "}" de la misma forma que en los ejemplos anteriores.
Para aplicar el estilo se debe de usar un tag con el atributo "id" cuyo valor sea el nombre del estilo,
para un estilo particular no se puede usar el atributo "class".
Por ejemplo
<STYLE>

</STYLE>

Luego se aplica el estilo en el documento.
<SPAN id="mi_estilo">Este prrafo usa un estilo definido</SPAN>
Como se puede ver se define el estilo en la hoja de estilo y posteriormente se debe aplicar a travs
de un atributo "id" en cualquier tag solo una vez.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Otro estilo</TITLE>

</STYLE>
</HEAD>
<BODY>
<SPAN id="estilouno">Este texto esta definido usando un estilo</SPAN>
<DIV id="estilodos">Este texto tambin esta definido usando un estilo.</DIV>
<P id="estilotres">Este texto tambin.</P>
</BODY>
</HTML>
El navegador interpretara el documento anterior as:
Este texto esta definido usando un estilo.
Este texto tambin esta definido usando un estilo.
Este texto tambin.

Se puede definir un estilo que no se aplicar solo a cierta parte del documento o a ciertos tags, si
no a muchos otros elementos de un documento, esto se logra definiendo una clase de estilo de la
siguiente forma:
.mi_estilo{caracteristicas del estilo...}
Una clase de estilo se define usando un punto e inmediatamente despus el nombre que tendr la
clase de estilo, tambien se puede usar un "*" antes del punto. Se usan las llaves y propiedades de
la misma forma que en los ejemplos anteriores.
El estilo se aplica en diversas partes del documento a travs del atributo "class" usado en varios
tags, el valor del atributo "class" ser el nombre de la clase de estilo.
Ejemplo:

</STYLE>
Luego se aplica el estilo usando el atributo "class" en uno o mas tags.
<DIV class="nuestro_estilo">Nuestro estilo aplicado aqui</DIV>
<P class="nuestro_estilo">Estilo aplicado otra vez.</P>
<H1 class="nuestro_estilo">Otra vez aplicamos el estilo.</H1>

Ejemplo
<HTML>
<HEAD>
<TITLE>Un ejemplo mas</TITLE>
<STYLE>
<!- -
BODY{background-color:red;}
.nuestro_estilo{color:white; text-align:center;}
#titulo{color:yellow;}
.otro{color:aqua;}
-->
</STYLE>
</HEAD>
<BODY>
<DIV id="titulo">TITULO</DIV>
<SPAN class="nuestro_estilo">Nuestro Estilo </SPAN>
<p class="otro">Otro estilo</p>
<SPAN class="nuestro_estilo">Otra vez aplicamos nuestro estilo</span>
<DIV class="otro">Aplicar estilos</DIV>
</BODY>
</HTML>

El navegador interpretar el documento anterior as:
TITULO
Nuesto Estilo
Otro estilo
Otra vez aplicamos nuestro estilo
Aplicar estilos

Es posible crear un hoja de estilo en un archivo externo y mediante un tag aplicarla a cierto
documento, esta caracterstica de las hojas de estilo ofrece muchas ventajas, ya que es posible
que diversos documentos compartan la misma hoja de estilo.
Para definir en un archivo externo una hoja de estilo se usa el siguiente procedimiento.
Se crea un archivo de texto sin formato.
Se omite el tag <STYLE>y los smbolos de comentario , as como cualquier tag HTML
Se nombra el documento con cualquier nombre, se recomienda que el documento tenga la
extensin "css" que es la caracterstica de los archivos de hoja de estilo en cascada.

Ejemplo
/*newstyle.css*/
.textnecio{font-family:helvetica; text-align:justify;}
.fecha{font-family:helvetica;
font-weight:bold;
font-size:9pt;
color:#ffffff;
background-color:#000070;
padding:3,2,3,2;
width:485;
float:top;
text-align:center;}
.lateral{font-family:helvetica;
text-align:center;
font-size:8pt;
color:#ffffff;
padding:3,10,3,10;}
.credits{
font-family:helvetica;
font-size:8pt;
text-align:center;}
.titulo2{
color:#ff0000;
font-size:14pt;}
.cuerpos{
text-align:justify;}

Para incluir esta hoja de estilo dentro del documento HTML, se usa el tag <LINK>en la cabeza del
documento, junto con ciertos atributos de la siguiente manera:
<LINK rel="stylesheet" type="text/css" href="url de la hoja de estilo">
El tag <LINK>tiene diversos usos, por lo que es importante definir que se esta usando para
insertar un estilo, por eso siempre se debe usar el atributo "rel" con el valor "stylesheet" cuando se
usa para insertar una hoja de estilo, el atributo type con el valor "text/css" (para el caso de las hojas
de estilo CSS), y el atributo "href" que especificara la ubicacin y nombre de la hoja de estilo.
Ejemplo.
<HTML>
<HEAD>
<TITLE>Otro ejemplo</TITLE>
<LINK rel=" stylesheet" type=" text/css" href=" estilos/newstyle.css" >
</HEAD>
<BODY>
Contenido del cuerpo del documento...
</BODY>
</HTML>
Es posible usar varias hojas de estilo externas e internas en un documento HTML, esto se hace de
la siguiente forma.
<STYLE type="text/css" src="estilos/newstyle.css"></STYLE>
<STYLE type="text/css" src="estilos/mainstyle.css"></STYLE>

</STYLE>
Como se puede ver se pueden especificar archivos externos usando el atributo "src" (cuyo valor
ser el nombre y la ubicacin de la hoja de estilo) dentro del tag <STYLE>, tambin se pueden
crear una hoja de estilo dentro del documento. Cuando se usa una sola hoja de estilo se debe usar
el tag <LINK>.
Lo que sucede al usar varias hojas de estilo es que las caractersticas de las hojas de estilo
pierden importancia de abajo hacia arriba, es decir la ultima definicin de la hoja de estilo,
sobreescribe las caractersticas de las hojas que se insertan antes de ella.

Introduccin al XML:
XML es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que juega un papel
fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML
pero su funcin principal es describir datos y no mostrarlos como es el caso de HTML. XML es un
formato que permite la lectura de datos a travs de diferentes aplicaciones.
Las tecnologas XML son un conjunto de mdulos que ofrecen servicios tiles a las demandas ms
frecuentes por parte de los usuarios. XML sirve para estructurar, almacenar e intercambiar
informacin.
Entre las tecnologas XML disponibles se pueden destacar:
XSL: Lenguaje Extensible de Hojas de Estilo, cuyo objetivo principal es mostrar cmo
debera estar estructurado el contenido, cmo debera ser diseado el contenido de origen
y cmo debera ser paginado en un medio de presentacin como puede ser una ventana
de un navegador Web o un dispositivo de mano, o un conjunto de pginas de un catlogo,
informe o libro. Funciona como un lenguaje avanzado para crear hojas de estilos. Es capaz
de transformar, ordenar y filtrar datos XML, y darles formato basndolo en sus valores.
XPath: Lenguaje de Rutas XML, es un lenguaje para acceder a partes de un documento
XML. Identifica partes de un documento XML concreto, como pueden ser sus atributos,
elementos, etc.
XLink: Lenguaje de Enlace XML, es un lenguaje que permite insertar elementos en
documentos XML para crear enlaces entre recursos XML. Describe un camino estndar
para aadir hipervnculos en un archivo XML. Es decir, es un mecanismo de vinculacin a
otros documentos XML. Funciona de forma similar a un enlace en una pgina Web, es
decir, funciona como lo hara <a href="">, slo que a href es un enlace unidireccional. Sin
embargo, XLink permite crear vnculos bidireccionales, lo que implica la posibilidad de
moverse en dos direcciones. Esto facilita la obtencin de informacin remota como
recursos en lugar de simplemente como pginas Web.
XPointer: Lenguaje de Direccionamiento XML, es un lenguaje que permite el acceso a la
estructura interna de un documento XML, esto es, a sus elementos, atributos y contenido.
Funciona como una sintaxis que apunta a ciertas partes de un documento XML, es como
una extensin de XPath. Se utiliza para llegar a ciertas partes de un documento XML.
Primero, XLink permite establecer el enlace con el recurso XML y luego es XPointer el que
va a un punto especfico del documento. Su funcionamiento es muy similar al de los
identificadores de fragmentos en un documento HTML ya que se aade al final de una URI
y despus lo que hace es encontrar el lugar especificado en el documento XML. Al ser
XPointer una extensin de XPath, XPointer tiene todas las ventajas de XPath y adems
permite establecer un rango en un documento XML, es decir, con XPointer es posible
establecer un punto final y un punto de inicio, lo que incluye todos los elementos XML
dentro de esos dos puntos.
XQL: Lenguaje de Consulta XML, es un lenguaje que facilita la extraccin de datos desde
documentos XML. Ofrece la posibilidad de realizar consultas flexibles para extraer datos de
documentos XML en la Web. Se basa en operadores de bsqueda de un modelo de datos
para documentos XML que puede realizar consultas en infinidad de tipos de documentos
como son documentos estructurados, colecciones de documentos, bases de datos,
catlogos, etc.

Aqu se presentan algunos ejemplos.
Ejemplo de documento XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<libro>
<titulo></titulo>
<capitulo>
<titulo></titulo>
<seccion>
<titulo></titulo>
</seccion>
</capitulo>
</libro>

Ejemplo de transformacin XSL:

<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:strip-space elements="libro capitulo titulo"/>
<xsl:output
method="xml"
indent="yes"
encoding="iso-8859-1"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>


<xsl:template match="libro">
<html>
<head>
<title>
<xsl:value-of select="titulo"/>
</title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>


<xsl:template match="libro/titulo">
<h1>
</h1>
</xsl:template>


<xsl:template match="capitulo/titulo">
<h2>
</h2>
</xsl:template>


<xsl:template match="seccion/titulo">
<h3>
</h3>
</xsl:template>
</xsl:stylesheet>

Ejemplo de cdigo XPath:

/doc/capitulo/titulo | /doc/capitulo/autor

Ejemplo de cdigo XLink:
<my:crossReference
xlink:href="libro.xml"
xlink:role="http://www.ejemplo.com/linkprops/listalibros"
xlink:title="Lista de libros">
Lista actual de libros
</my:crossReference>
Ejemplo de cdigo XPointer:
documento.xml#xpointer(
/libro/capitulo[@public])xpointer(/libro/capitulo[@num="1"])

Ejemplo de cdigo de XQuery:

<bib>
{
for $b in doc("http://libro.ejemplo.com/bib.xml")/bib/libro
where $b/autor ="Vargas Llosa" and $b/@anio >1991
return
<libro anio="{$b/@anio }">
{$b/titulo }
</libro>
}
</bib>

Unidad1 Programweb

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Unidad1 Programweb

Caricato da

Copyright:

Formati disponibili

Temario:

1 Introduccin a las tecnologas Web.

Potrebbero piacerti anche