Você está na página 1de 31

Fundamentos Web Mdulo II Ing. Msc.

Daniel Bojorge

Fundamentos Webs, Primera Parte Pgina 1 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Fundamentos Web

Portada ...............................................................................................................................1
Fundamentos Web ..............................................................................................................2
Introduccin .......................................................................................................................3
Partes de un documento HTML.......................................................................................4
Pginas Dinmicas..............................................................................................................6
Pginas Dinmicas de Cliente .............................................................................................7
Pginas dinmicas de Servidor ........................................................................................7
Qu es JavaScript? ........................................................................................................8
Qu es Visual Basic Script?...........................................................................................9
Qu es JAVA? ............................................................................................................10
Pasado y presente......................................................................................................10
Conclusin................................................................................................................11
Qu son los Applets de Java?...................................................................................11
Cmo es posible la multiplataforma en Java ..............................................................11
Qu es ASP? ...............................................................................................................12
Qu es PHP? ...............................................................................................................12
Qu es XML?..............................................................................................................14
Qu son Cookies?........................................................................................................15
Cmo se utilizan las cookies .....................................................................................16
Qu es SQL? ...............................................................................................................16
Tipos de Campos ......................................................................................................17
Aadir un nuevo registro...........................................................................................18
Borrar un Registro.....................................................................................................19
Actualizar un Registro...............................................................................................19
Seleccin de Tablas...................................................................................................20
Estructura general de un fichero HTML............................................................................23
Formato de prrafos ......................................................................................................23
Formato de texto...........................................................................................................24
Listas no ordenadas.......................................................................................................26
Listas ordenadas: ..........................................................................................................26
Listas de definiciones:...................................................................................................26
Tablas ...........................................................................................................................27
Anclas...........................................................................................................................27
Links ............................................................................................................................27
Insercin de imgenes...................................................................................................28
Imgenes clicables ....................................................................................................28
Imgenes sensibles....................................................................................................28
Frames ..........................................................................................................................29
Formularios ..................................................................................................................29
Layers...........................................................................................................................30
Una plantilla de ayuda...................................................................................................31

Fundamentos Webs, Primera Parte Pgina 2 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Introduccin

Podemos definir Internet como una red de redes a escala mundial de millones de
computadoras interconectadas con el conjunto de protocolos TCP/IP. Tambin se
usa este nombre como sustantivo comn y por tanto en minsculas para designar
a cualquier red de redes que use las mismas tecnologas que la Internet,
independientemente de su extensin o de que sea pblica o privada.

El Internet es todas las computadoras que se comunican entre s. El modelo que


ms prevalece del Internet es la nocin de clientes y servidores.

Para tener una mejor idea, puede relacionarlo con un restaurante de auto servicio:
Usted maneja al portavoz pequeo, una voz escasamente inteligible pide su
orden. Usted pregunta por su "la cholesto-hamburguesa supremo," y el
adolescente aburrido empaqueta su comida. Usted conduce, intercambia el dinero
por la comida del combo, y se va. Entretanto, el adolescente espera por otro
cliente.

El Internet trabaja mucho como este modelo. Las computadoras permanentemente


llaman a Servidores Web, los cuales alojan pginas Web y otra informacin.
Es muy similar al restaurante. Los usuarios "conducen" al servidor Web, usando
un Web browser. Se intercambian datos y el usuario puede leer la informacin del
Servidor Web.

Tcnicamente podemos definirlo como un programa que se ejecuta en un


computador que solicita servicios de otro programa que a menudo se encuentra en
un servidor y que frecuentemente funciona en un computador remoto. Es una
arquitectura de software y hardware adecuado para el proceso distribuido en el
que la comunicacin se establece de uno a varios. Es una aplicacin tpica de
servidor de base de datos al que varios usuarios realizan consulta
simultneamente. Son aplicaciones que utilizan una red donde todos pueden
acceder a la misma informacin. Es el modelo de base utilizado en la mayora de
las redes de computadores. El trmino servidor se aplica a cualquier programa
que ofrece un servicio y. que puede ser accesado a travs de la red. El cliente
trabaja con una computadora local, el servidor trabaja con un computador remoto,
este provee la autorizacin para obtener los archivos. Un servidor es una
computadora que contiene los archivos de uno o ms sitios.

La Web se encuadra dentro de Internet, no es ms que un servicio de los muchos


que presta la Red, entre los que podemos encontrar

Correo electrnico
IRC o Chat
FTP
El propio Web

Fundamentos Webs, Primera Parte Pgina 3 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

El sistema con el que est construido el Web se llama hipertexto y es un


entramado de pginas conectadas con enlaces.

Los sistemas de hipertexto se utilizan en otros contextos aparte del Web, como la
ayuda del Windows. Son muy fciles de utilizar y tambin es muy fcil encontrar lo
que buscamos rpidamente, gracias a que pulsando enlaces vamos accediendo a
la informacin que ms nos interesa.

La Web no solo se limita a presentar textos y enlaces, sino que tambin puede
ofrecernos imgenes, videos, sonido y todo tipo de presentaciones, llegando a ser
el servicio ms rico en medios que tiene Internet. Por esta razn, para referirnos al
sistema que implementa el Web (hipertexto), se ha acuado un nuevo trmino que
es hipermedia, haciendo referencia a que el Web permite contenidos multimedia.

Una pgina Web la vemos en nuestro navegador, o cliente Web, y parece una sola
entidad, pero no es as, est compuesta por multitud de diferentes ficheros, como
son las imgenes, los posibles vdeos y lo ms importante: el cdigo fuente.

El cdigo de las pginas est escrito en un lenguaje llamado HTML, que indica
bsicamente donde colocar cada texto, cada imagen o cada video y la forma que
tendrn estos al ser colocados en la pgina.

El HTML se cre en un principio con objetivos divulgativos. No se pens que la


Web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML
se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos
los colectivos de gente que lo utilizaran en un futuro.

El lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta
significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o
<P> significa un prrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su
correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe
de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de
escribir en negrita. As que el HTML no es ms que una serie de etiquetas que se
utilizan para definir la forma o estilo que queremos aplicar a nuestro documento.
<B>Esto est en negrita</B>.

Partes de un documento HTML

Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>.


Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de


ndole informativo como por ejemplo el titulo de nuestra pgina.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde

Fundamentos Webs, Primera Parte Pgina 4 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas


como las que hemos visto.

El resultado es un documento con la siguiente estructura:

<html>

<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero
que son importantes para catalogarla:
Titulo, palabras clave,...
</head>

<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el
navegador: Texto e imgenes
</body>

</html>

En la Web podemos encontrar, o construir, dos tipos de pginas:

Las que se presentan sin movimiento y sin funcionalidades ms all de los


enlaces
Las pginas que tienen efectos especiales y en las que podemos
interactuar.

Las primeras pginas son las que denominamos pginas estticas, se construyen
con el lenguaje HTML, que no permite grandes florituras para crear efectos ni
funcionalidades ms all de los enlaces.

Estas pginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a
los desarrolladores como a los visitantes, ya que slo se pueden presentar textos
planos acompaados de imgenes y a lo sumo contenidos multimedia como
pueden ser videos o sonidos.

El segundo tipo de pginas se denomina pgina dinmica. Una pgina es


dinmica cuando se incluye cualquier efecto especial o funcionalidad y para ello es
necesario utilizar otros lenguajes de programacin, aparte del simple HTML.

Mientras que las pginas estticas todo el mundo se las puede imaginar y no
merecen ms explicaciones, las pginas dinmicas son ms complejas y

Fundamentos Webs, Primera Parte Pgina 5 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

verstiles. Para aclarar este concepto, veremos con detalle a continuacin qu son
las pginas dinmicas.

Pginas Dinmicas

Como hemos visto, una pgina es dinmica cuando realiza efectos especiales o
implementa alguna funcionalidad o interactividad.

Adems, hemos visto que para programar una pgina dinmica necesitaremos
otros lenguajes aparte del HTML. Sin embargo, nunca hay que olvidarse del
HTML, ya que ste es la base del desarrollo Web: generalmente al escribir una
pgina dinmica el cdigo de los otros lenguajes de programacin se incluye
embebido dentro del mismo cdigo HTML.

Una razn por la que construiremos una pgina dinmica es la simple vistosidad
que pueden alcanzar los trabajos, ya que podemos hacer presentaciones ms
entretenidas de las que se consiguen utilizando nicamente HTML. Pero vamos a
ver con calma algunas razones menos obvias pero ms importantes.

Supongamos que hemos decidido realizar un portal de televisin donde una de las
informaciones principales a proveer podra ser la programacin semanal.
Efectivamente, esta informacin suele ser dada por las televisiones con meses de
antelacin y podra ser muy fcilmente almacenada en una base de datos. Si
trabajsemos con pginas HTML, tendramos que construir una pgina
independiente para cada semana en la cual introduciramos "a mano" cada uno de
los programas de cada una de las cadenas. Asimismo, cada semana nos
tendramos que acordar de descolgar la pgina de la semana pasada y colgar la
de la actual. Todo esto podra ser fcilmente resuelto mediante pginas dinmicas.
En este caso, lo que haramos sera crear un programa (solo uno) que se
encargara de recoger de la base de datos de la programacin aquellos programas
que son retransmitidos en las fechas que nos interesan y de confeccionar una
pgina donde apareceran ordenados por cadena y por hora de retransmisin. De
este modo, podemos automatizar un proceso y desentendernos de un aspecto de
la pgina por unos meses.

Este hecho lo podramos aplicar a otras situaciones: podemos preparar el


horscopo de todos los das, las promociones de un sitio de e-comercio...

Podemos hacer una clasificacin a las pginas dinmicas en funcin de dnde se


lleva a cabo el procesamiento de la pgina, es decir, el computador que cargar
con el peso adicional que supone que la pgina realice efectos y funcionalidades.

Fundamentos Webs, Primera Parte Pgina 6 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Pginas Dinmicas de Cliente

Son las pginas dinmicas que se procesan en el cliente. En estas pginas toda la
carga de procesamiento de los efectos y funcionalidades la soporta el navegador.

Usos tpicos de las pginas de cliente son efectos especiales para Web como
rollovers o control de ventanas, presentaciones en las que se pueden mover
objetos por la pgina, control de formularios, clculos, etc.

El cdigo necesario para crear los efectos y funcionalidades se incluye dentro del
mismo archivo HTML y es llamado SCRIPT. Cuando una pgina HTML contiene
scripts de cliente, el navegador se encarga de interpretarlos y ejecutarlos para
realizar los efectos y funcionalidades.

Las pginas dinmicas de cliente se escriben en dos lenguajes de programacin


principalmente: Javascript y Visual Basic Script (VBScript), que veremos en detalle
ms adelante. Tambin veremos el concepto de DHTML y conoceremos las CSS.

Nota: Flash es una tecnologa, y un programa, para crear efectos


especiales en pginas Web. Con Flash tambin conseguimos hacer
pginas dinmicas del lado del cliente

Las pginas del cliente son muy dependientes del sistema donde se estn
ejecutando y esa es su principal desventaja, ya que cada navegador tiene sus
propias caractersticas, incluso cada versin, y lo que puede funcionar en un
navegador puede no funcionar en otro.

Como ventaja se puede decir que estas pginas descargan al servidor algunos
trabajos, ofrecen respuestas inmediatas a las acciones del usuario y permiten la
utilizacin de algunos recursos de la mquina local.

Pginas dinmicas de Servidor

El segundo tipo de pginas dinmicas, las que se ejecutan en el servidor: Las


pginas dinmicas del lado del servidor.

Podemos hablar tambin de pginas dinmicas del servidor, que son reconocidas,
interpretadas y ejecutadas por el propio servidor.

Las pginas del servidor son tiles en muchas ocasiones. Con ellas se puede
hacer todo tipo de aplicaciones Web. Desde agendas a foros, sistemas de
documentacin, estadsticas, juegos, chats, etc. Son especialmente tiles en
trabajos que se tiene que acceder a informacin centralizada, situada en una base

Fundamentos Webs, Primera Parte Pgina 7 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

de datos en el servidor, y cuando por razones de seguridad los clculos no se


pueden realizar en el ordenador del usuario.

Es importante destacar que las pginas dinmicas de servidor son necesarias


porque para hacer la mayora de las aplicaciones Web se debe tener acceso a
muchos recursos externos al ordenador del cliente, principalmente bases de datos
alojadas en servidores de Internet. Un caso claro es un banco: no tiene ningn
sentido que el cliente tenga acceso a toda la base de datos, slo a la informacin
que le concierne.

Las pginas dinmicas del servidor se suelen escribir en el mismo archivo HTML,
mezclado con el cdigo HTML, al igual que ocurra en las pginas del cliente.
Cuando una pgina es solicitada por parte de un cliente, el servidor ejecuta los
scripts y se genera una pgina resultado, que solamente contiene cdigo HTML.
Este resultado final es el que se enva al cliente y puede ser interpretado sin lugar
a errores ni incompatibilidades, puesto que slo contiene HTML

Luego es el servidor el que maneja toda la informacin de las bases de datos y


cualquier otro recurso, como imgenes o servidores de correo y luego enva al
cliente una pgina Web con los resultados de todas las operaciones.

Para escribir pginas dinmicas de servidor existen varios lenguajes. Common


Gateway Interface (CGI) comnmente escritos en Perl, Active Server Pages
(ASP), Hipertext Preprocesor (PHP), y Java Server Pages (JSP). En nuestro
caso, veremos PHP

Las ventajas de este tipo de programacin son que el cliente no puede ver los
scripts, ya que se ejecutan y transforman en HTML antes de enviarlos. Adems
son independientes del navegador del usuario, ya que el cdigo que reciben es
HTML fcilmente interpretable.

Como desventajas se puede sealar que ser necesario un servidor ms potente y


con ms capacidades que el necesario para las pginas de cliente. Adems, estos
servidores podrn soportar menos usuarios concurrentes, porque se requerir ms
tiempo de procesamiento para cada uno.

Qu es JavaScript?

Javascript es un lenguaje de programacin utilizado para crear pequeos


programitas encargados de realizar acciones dentro del mbito de una pgina
Web.

Se trata de un lenguaje de programacin del lado del cliente, porque es el


navegador el que soporta la carga de procesamiento. Gracias a su compatibilidad
con la mayora de los navegadores modernos, es el lenguaje de programacin del
lado del cliente ms utilizado.

Fundamentos Webs, Primera Parte Pgina 8 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Con Javascript podemos crear efectos especiales en las pginas y definir


interactividades con el usuario. El navegador del cliente es el encargado de
interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e
interactividades, de modo que el mayor recurso, y tal vez el nico, con que cuenta
este lenguaje es el propio navegador.

Javascript es el siguiente paso, despus del HTML, que puede dar un


programador de la Web que decida mejorar sus pginas y la potencia de sus
proyectos. Es un lenguaje de programacin bastante sencillo y pensado para
hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no
tengan una experiencia previa en la programacin podrn aprender este lenguaje
con facilidad y utilizarlo en toda su potencia con slo un poco de prctica.

Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos
vertientes. Por un lado los efectos especiales sobre pginas Web, para crear
contenidos dinmicos y elementos de la pgina que tengan movimiento, cambien
de color o cualquier otro dinamismo. Por el otro, javascript nos permite ejecutar
instrucciones como respuesta a las acciones del usuario, con lo que podemos
crear pginas interactivas con programas como calculadoras, agendas, o tablas de
clculo.

Javascript es un lenguaje con muchas posibilidades, permite la programacin de


pequeos scripts, pero tambin de programas ms grandes, orientados a objetos,
con funciones, estructuras de datos complejas, etc. Adems, Javascript pone a
disposicin del programador todos los elementos que forman la pgina Web, para
que ste pueda acceder a ellos y modificarlos dinmicamente.

Con Javascript el programador, que se convierte en el verdadero dueo y


controlador de cada cosa que ocurre en la pgina cuando la est visualizando el
cliente.

Qu es Visual Basic Script?

Es un lenguaje de programacin de scripts del lado del cliente y por defecto es el


lenguaje usado con ASP, pero slo compatible con Internet Explorer. Es por ello
que su utilizacin est desaconsejada a favor de Javascript.

Est basado en Visual Basic, un popular lenguaje para crear aplicaciones


Windows. Tanto su sintaxis como la manera de trabajar estn muy inspirados en
l. Sin embargo, no todo lo que se puede hacer en Visual Basic lo podremos hacer
en Visual Basic Script, pues este ltimo es una versin reducida del primero.

El modo de funcionamiento de Visual Basic Script para construir efectos


especiales en pginas Web es muy similar al utilizado en Javascript y los recursos
a los que se puede acceder tambin son los mismos: el navegador.

Fundamentos Webs, Primera Parte Pgina 9 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Como decimos, no debemos utilizar este lenguaje en la mayora de las ocasiones,


aunque un caso donde tendra sentido utilizar Visual Basic Script sera la
construccin de una Intranet donde sepamos con toda seguridad que los
navegadores que se van a conectar sern siempre Internet Explorer. En este caso,
un programador habitual de Visual Basic tendra ms facilidades para realizar los
scripts utilizando Visual Basic Script en lugar de Javascript.

Qu es JAVA?

Java es un lenguaje de programacin con el que podemos realizar cualquier tipo


de programa. En la actualidad es un lenguaje muy extendido y cada vez cobra
ms importancia tanto en el mbito de Internet como en la informtica en general.
Est desarrollado por la compaa Sun Microsystems con gran dedicacin y
siempre enfocado a cubrir las necesidades tecnolgicas ms punteras.

Una de las principales caractersticas por las que Java se ha hecho muy famoso
es que es un lenguaje independiente de la plataforma. Eso quiere decir que si
hacemos un programa en Java podr funcionar en cualquier ordenador del
mercado. Es una ventaja significativa para los desarrolladores de software, pues
antes tenan que hacer un programa para cada sistema operativo, por ejemplo
Windows, Linux, Apple, etc. Esto lo consigue porque se ha creado una Mquina de
Java para cada sistema que hace de puente entre el sistema operativo y el
programa de Java y posibilita que este ltimo se entienda perfectamente.

La independencia de plataforma es una de las razones por las que Java es


interesante para Internet, ya que muchas personas deben tener acceso con
ordenadores distintos. Pero no se queda ah, Java est desarrollndose incluso
para distintos tipos de dispositivos adems del ordenador como mviles, agendas
y en general para cualquier cosa que se le ocurra a la industria.

Pasado y presente

Java fue pensado originalmente para utilizarse en cualquier tipo de


electrodomstico pero la idea fracas. Uno de los fundadores de Sun rescat la
idea para utilizarla en el mbito de Internet y convirtieron a Java en un lenguaje
potente, seguro y universal gracias a que lo puede utilizar todo el mundo y es
gratuito. Una de los primeros triunfos de Java fue que se integr en el navegador
Netscape y permita ejecutar programas dentro de una pgina Web, hasta
entonces impensable con el HTML.

Actualmente Java se utiliza en un amplio abanico de posibilidades y casi cualquier


cosa que se puede hacer en cualquier lenguaje se puede hacer tambin en Java y
muchas veces con grandes ventajas. Para lo que nos interesa a nosotros, con
Java podemos programar pginas Web dinmicas, con accesos a bases de datos,
utilizando XML, con cualquier tipo de conexin de red entre cualquier sistema. En

Fundamentos Webs, Primera Parte Pgina 10 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

general, cualquier aplicacin que deseemos hacer con acceso a travs Web se
puede hacer utilizando Java.

Conclusin

La pgina de Java de Sun es sin duda la mejor referencia, aunque un poco


avanzada para los que empiezan, es la referencia ms til para los que necesitan
documentarse para algo en concreto.

Qu son los Applets de Java?

Es otra manera de incluir cdigo a ejecutar en los clientes que visualizan una
pgina Web. Se trata de pequeos programas hechos en Java, que se transfieren
con las pginas Web y que el navegador ejecuta en el espacio de la pgina.

Los applets de Java estn programados en Java y precompilados, es por ello que
la manera de trabajar de stos vara un poco con respecto a los lenguajes de
script como Javascript. Los applets son ms difciles de programar que los scripts
en Javascript y requerirn unos conocimientos bsicos o medios del lenguaje
Java.

La principal ventaja de utilizar applets consiste en que son mucho menos


dependientes del navegador que los scripts en Javascript, incluso independientes
del sistema operativo del ordenador donde se ejecutan. Adems, Java es ms
potente que Javascript, por lo que el nmero de aplicaciones de los applets podr
ser mayor.

Como desventajas en relacin con Javascript cabe sealar que los applets son
ms lentos de procesar y que tienen espacio muy delimitado en la pgina donde
se ejecutan, es decir, no se mezclan con todos los componentes de la pgina ni
tienen acceso a ellos. Es por ello que con los applets de Java no podremos hacer
directamente cosas como abrir ventanas secundarias, controlar Frames,
formularios, capas, etc.

Cmo es posible la multiplataforma en Java

Java es compatible con todos los sistemas porque basa su funcionamiento en los
Byte Codes, que no es ms que una precompilacin del cdigo fuente de Java.

Estos Byte Codes no son el programa en Java propiamente dicho, sino un archivo
que contiene un cdigo intermedio que puede manejar la Mquina Virtual de Java.
Cada sistema operativo dispone de una Maquina Virtual de Java que puede
interpretar los Byte Codes y transformarlos a sentencias ejecutables en el sistema
en cuestin.

Fundamentos Webs, Primera Parte Pgina 11 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Qu es ASP?

ASP (Active Server Pages) es la tecnologa desarrollada por Microsoft para la


creacin de pginas dinmicas del servidor. ASP se escribe en la misma
pgina Web, utilizando el lenguaje Visual Basic Script o Jscript (Javascript
de Microsoft).

Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor Web,
justo antes de que se enve la pgina a travs de Internet al cliente. Las pginas
que se ejecutan en el servidor pueden realizar accesos a bases de datos,
conexiones en red, y otras tareas para crear la pgina final que ver el cliente. El
cliente solamente recibe una pgina con el cdigo HTML resultante de la ejecucin
de la pgina ASP. Como la pgina resultante contiene nicamente cdigo HTML,
es compatible con todos los navegadores. Podemos saber algo ms sobre la
programacin del servidor y del cliente en el artculo qu es DHTML.

El tipo de servidores que emplean este lenguaje son, evidentemente, todos


aquellos que funcionan con sistema Windows NT, aunque tambin se puede
utilizar en un PC con Windows 98 si instalamos un servidor denominado Personal
Web Server. Incluso en sistemas Linux podemos utilizar las ASP si instalamos un
componente denominado Chilisoft, aunque parece claro que ser mejor trabajar
sobre el servidor Web para el que est pensado: Internet Information Server.

Con las ASP podemos realizar muchos tipos de aplicaciones distintas. Nos
permite acceso a bases de datos, al sistema de archivos del servidor y en general
a todos los recursos que tenga el propio servidor. Tambin tenemos la posibilidad
de comprar componentes ActiveX fabricados por distintas empresas de desarrollo
de software que sirven para realizar mltiples usos, como el envo de correo,
generar grficas dinmicamente, y un largo etc.

Actualmente se ha presentado ya la segunda versin de ASP, el ASP.NET, que


comprende algunas mejoras en cuanto a posibilidades del lenguaje y rapidez con
la que funciona. ASP.NET tiene algunas diferencias en cuanto a sintaxis con el
ASP, de modo que se ha de tratar de distinta manera uno de otro.

Qu es PHP?

PHP es el acrnimo de Hipertext Preprocesor. Es un lenguaje de programacin


del lado del servidor gratuito e independiente de plataforma, rpido, con una
gran librera de funciones y mucha documentacin.

Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor Web,
justo antes de que se enve la pgina a travs de Internet al cliente. Las pginas
que se ejecutan en el servidor pueden realizar accesos a bases de datos,
conexiones en red, y otras tareas para crear la pgina final que ver el cliente. El

Fundamentos Webs, Primera Parte Pgina 12 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

cliente solamente recibe una pgina con el cdigo HTML resultante de la ejecucin
de la PHP. Como la pgina resultante contiene nicamente cdigo HTML, es
compatible con todos los navegadores.

Esquema del funcionamiento de las pginas PHP.

Una vez que ya conocemos el concepto de lenguaje de programacin de scripts


del lado del servidor podemos hablar de PHP. PHP se escribe dentro del cdigo
HTML, lo que lo hace realmente fcil de utilizar, al igual que ocurre con el popular
ASP de Microsoft, pero con algunas ventajas como su gratuidad, independencia
de plataforma, rapidez y seguridad. Cualquiera puede descargar a travs de la
pgina principal de PHP www.php.net y de manera gratuita, un mdulo que hace
que nuestro servidor Web comprenda los scripts realizados en este lenguaje. Es
independiente de plataforma, puesto que existe un mdulo de PHP para casi
cualquier servidor Web. Esto hace que cualquier sistema pueda ser compatible
con el lenguaje y significa una ventaja importante, ya que permite portar el sitio
desarrollado en PHP de un sistema a otro sin prcticamente ningn trabajo.

PHP, en el caso de estar montado sobre un servidor Linux u Unix, es ms rpido


que ASP, dado que se ejecuta en un nico espacio de memoria y esto evita las
comunicaciones entre componentes COM que se realizan entre todas las
tecnologas implicadas en una pgina ASP.

Fundamentos Webs, Primera Parte Pgina 13 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Por ltimo sealbamos la seguridad, en este punto tambin es importante el


hecho de que en muchas ocasiones PHP se encuentra instalado sobre servidores
Unix o Linux, que son de sobra conocidos como ms veloces y seguros que el
sistema operativo donde se ejecuta las ASP, Windows NT o 2000. Adems, PHP
permite configurar el servidor de modo que se permita o rechacen diferentes usos,
lo que puede hacer al lenguaje ms o menos seguro dependiendo de las
necesidades de cada cual.

Fue creado originalmente en 1994 por Rasmus Lerdorf, pero como PHP est
desarrollado en poltica de cdigo abierto, a lo largo de su historia ha tenido
muchas contribuciones de otros desarrolladores. Actualmente PHP se encuentra
en su versin 4, que utiliza el motor Zend, desarrollado con mayor meditacin
para cubrir las necesidades de las aplicaciones Web actuales.

Este lenguaje de programacin est preparado para realizar muchos tipos de


aplicaciones Web gracias a la extensa librera de funciones con la que est
dotado. La librera de funciones cubre desde clculos matemticos complejos
hasta tratamiento de conexiones de red, por poner dos ejemplos.

Algunas de las ms importantes capacidades de PHP son: compatibilidad con


las bases de datos ms comunes, como MySQL, mSQL, Oracle, Informix, y
ODBC, por ejemplo. Incluye funciones para el envo de correo electrnico,
upload de archivos, crear dinmicamente en el servidor imgenes en formato
GIF, incluso animadas y una lista interminable de utilidades adicionales.

Qu es XML?

XML es una tecnologa en realidad muy sencilla que tiene a su alrededor otras
tecnologas que la complementan y la hacen mucho ms grande y con unas
posibilidades mucho mayores.

XML, con todas las tecnologas relacionadas, representa una manera distinta de
hacer las cosas, ms avanzada, cuya principal novedad consiste en permitir
compartir los datos con los que se trabaja a todos los niveles, por todas las
aplicaciones y soportes. As pues, el XML juega un papel importantsimo en este
mundo actual, que tiende a la globalizacin y la compatibilidad entre los sistemas,
ya que es la tecnologa que permitir compartir la informacin de una manera
segura, fiable, fcil. Adems, XML permite al programador y los soportes dedicar
sus esfuerzos a las tareas importantes cuando trabaja con los datos, ya que
algunas tareas tediosas como la validacin de estos o el recorrido de las
estructuras corre a cargo del lenguaje y est especificado por el estndar, de
modo que el programador no tiene que preocuparse por ello.

Vemos que XML no est slo, sino que hay un mundo de tecnologas alrededor de
l, de posibilidades, maneras ms fciles e interesantes de trabajar con los datos
y, en definitiva, un avance a la hora de tratar la informacin, que es en realidad el
objetivo de la informtica en general. XML, o mejor dicho, el mundo XML no es un

Fundamentos Webs, Primera Parte Pgina 14 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

lenguaje, sino varios lenguajes, no es una sintaxis, sino varias y no es una manera
totalmente nueva de trabajar, sino una manera ms refinada que permitir que
todas las anteriores se puedan comunicar entre si sin problemas, ya que los datos
cobran sentido. Todo esto lo veremos con calma en la Introduccin a XML.

XML es interesante en el mundo de Internet y el e-bussiness, ya que existen


muchos sistemas distintos que tienen que comunicarse entre si, pero como se ha
podido imaginar, interesa por igual a todas las ramas de la informtica y el
tratamiento de datos, ya que permite muchos avances a la hora de trabajar con
ellos

Qu son Cookies?
En nuestros viajes por la Red visitamos gran cantidad de pginas, muchas de ellas
bastante complicadas que implementan distintos servicios de Internet. Estas
pginas tienen que guardar distintas informaciones acerca de un usuario, por
ejemplo su nombre, su edad o su color preferido. Para ello cuentan con una serie
de mecanismos en el servidor como bases de datos u otro tipo de contenedores,
pero hay un mecanismo mucho ms interesante de guardar esa informacin que
los propios recursos del servidor, que es el propio ordenador del usuario.

En nuestros ordenadores se guardan muchos datos que necesitan conocer las


pginas Web cada vez que entramos en la pgina, estas pequeas informaciones
son las cookies: estados de variables que se conservan de una visita a otra en
el ordenador del cliente.

Como es un poco peligroso que las pginas Web a las que accedemos se
dediquen a introducir cosas en nuestro ordenador, las cookies estn altamente
restringidas. Para empezar, solamente podemos guardar en ellas textos, nunca
programas, imgenes, etc. Adems, los textos nunca podrn ocupar ms de 1
K, de modo que nadie podra inundarnos el ordenador a base de cookies. Estas
restricciones, unidas a la necesidad de poner una fecha de caducidad a las
cookies para que estas se guarden, hacen que el aceptar cookies no signifique un
verdadero problema para la integridad de nuestros sistemas.

Ejemplos de uso de las cookies

Un ejemplo tpico de las cookies podra ser un contador de las veces que
accede un usuario a una pgina. Podramos poner una cookie en el ordenador
del cliente donde tendramos una variable que lleva la cuenta de las veces que ha
accedido a la pgina y cada vez que se accede se incrementa en uno.

Como ejemplo de manejo de cookies est en desarrolloweb, igual que muchos


otros sitios, utilizan las cookies para guardar la personalizacin de un usuario
de la pgina. En el momento de escribir este reportaje se puede ver en el diseo
de desarrolloweb un botn que pone personalizacin y donde hay varios colores.

Fundamentos Webs, Primera Parte Pgina 15 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Pulsando cada color la pgina cambia, para verse con ese color. Para que el color
elegido se conserve de visita en visita se utilizan las cookies.

Otro ejemplo tpico es el que guarda el perfil del usuario. Si el usuario accede a
contenidos determinados se puede enviarle una cookie que le marca como
interesado en un tema. A medida que va accediendo a distintos sitios le van
encasillando como joven, adulto, hombre, mujer, o lo que proceda. Conociendo el
perfil de un usuario se le pueden ofrecer un tipo de productos o servicios
orientados a sus gustos o necesidades.

Cmo se utilizan las cookies

Para trabajar con cookies tenemos que utilizar un lenguaje de programacin


avanzado como Javascript o ASP, PHP, etc. No podemos entonces trabajar con
cookies si solamente nos dedicamos a utilizar el HTML, que ya sabemos que es
un poco limitado para cosas que se salgan de mostrar contenido en pginas
estticas.

Polmica de las cookies

Existe un problema con estas galletitas y es que nos cortan nuestra intimidad. Lo
que sealbamos anteriormente acerca de guardar el perfil de un usuario puede
llegar a ser un problema para nosotros, por que nos estn vigilando y apuntando
cada uno de nuestros movimientos, lo que puede convertirse en un abuso de
informacin que no tiene por qu pertenecer a nadie ms que nosotros. Las
empresas que ms utilizan esta clasificacin del personal son los AD-Servers
(servidores de banners) como el de Doubleclick. No queremos entrar aqu ms en
esta polmica, pero si despertar la inquietud de que posiblemente estn entrando
en nuestra intimidad.

Qu es SQL?
Las aplicaciones en red son cada da ms numerosas y verstiles. En muchos
casos, el esquema bsico de operacin es una serie de scripts que rigen el
comportamiento de una base de datos.

Debido a la diversidad de lenguajes y de bases de datos existentes, la manera de


comunicar entre unos y otras sera realmente complicada a gestionar de no ser
por la existencia de estndares que nos permiten el realizar las operaciones
bsicas de una forma universal.

Es de eso de lo que trata el Structured Query Language que no es ms que un


lenguaje estndar de comunicacin con bases de datos. Hablamos por tanto de un
lenguaje normalizado que nos permite trabajar con cualquier tipo de lenguaje (ASP

Fundamentos Webs, Primera Parte Pgina 16 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

o PHP) en combinacin con cualquier tipo de base de datos (MS Access, SQL
Server, MySQL...).

El hecho de que sea estndar no quiere decir que sea idntico para cada base de
datos. En efecto, determinadas bases de datos implementan funciones especficas
que no tienen necesariamente que funcionar en otras.

Aparte de esta universalidad, el SQL posee otras dos caractersticas muy


apreciadas. Por una parte, presenta una potencia y versatilidad notables que
contrasta, por otra, con su accesibilidad de aprendizaje.

Tipos de Campos

Como sabemos una base de datos esta compuesta de tablas donde almacenamos
registros catalogados en funcin de distintos campos (caractersticas).

Un aspecto previo a considerar es la naturaleza de los valores que introducimos


en esos campos. Dado que una base de datos trabaja con todo tipo de
informaciones, es importante especificarle qu tipo de valor le estamos
introduciendo de manera a, por un lado, facilitar la bsqueda posteriormente y por
otro, optimizar los recursos de memoria.

Cada base de datos introduce tipos de valores de campo que no necesariamente


estn presentes en otras. Sin embargo, existe un conjunto de tipos que estn
representados en la totalidad de estas bases. Estos tipos comunes son los
siguientes:

Contienen cifras y letras. Presentan una longitud limitada


Alfanumricos
(255 caracteres)
Existen de varios tipos, principalmente, enteros (sin
Numricos
decimales) y reales (con decimales).
Booleanos Poseen dos formas: Verdadero y falso (S o No)
Almacenan fechas facilitando posteriormente su
explotacin. Almacenar fechas de esta forma posibilita
Fechas
ordenar los registros por fechas o calcular los das entre
una fecha y otra...
Son campos alfanumricos de longitud ilimitada. Presentan
Memos el inconveniente de no poder ser indexados (veremos ms
adelante lo que esto quiere decir).
Son campos numricos enteros que incrementan en una
unidad su valor para cada registro incorporado. Su utilidad
Autoincrementables
resulta ms que evidente: Servir de identificador ya que
resultan exclusivos de un registro.

Fundamentos Webs, Primera Parte Pgina 17 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Aadir un nuevo registro

Los registros pueden ser introducidos a partir de sentencias que emplean la


instruccin Insert.

La sintaxis utilizada es la siguiente:

Insert Into nombre_tabla (nombre_campo1, nombre_campo2,...) Values


(valor_campo1, valor_campo2...)

Un ejemplo sencillo a partir de nuestra tabla modelo es la introduccin de un


nuevo cliente lo cual se hara con una instruccin de este tipo:

Insert Into clientes (nombre, apellidos, direccion, poblacion, codigopostal, email,


pedidos) Values ('Perico', 'Palotes', 'Percebe n13', 'Lepe', '123456',
'perico@dominio.com', 33)

Como puede verse, los campos no numricos o booleanos van delimitados por
apostrofes: '. Tambin resulta interesante ver que el cdigo postal lo hemos
guardado como un campo no numrico. Esto es debido a que en determinados
pases (Inglaterra, como no) los cdigos postales contienen tambin letras.

Nota: Si deseamos practicar con una base de datos que est vaca
primero debemos crear las tablas que vamos a llenar. Las tablas tambin
se crean con sentencias

Aunque, de todos modos, puede que sea ms cmodo utilizar un


programa con interfaz grfica, como Access, que nos puede servir para
crear las tablas en bases de datos del propio Access o por ODBC a otras
bases de datos como SQL Server o MySQL, por poner dos ejemplos.

Otra posibilidad en una base de datos como MySQL, sera crear las tablas
utilizando un software como PhpMyAdmin.

Por supuesto, no es imprescindible rellenar todos los campos del registro. Eso s,
puede ser que determinados campos sean necesarios. Estos campos necesarios
pueden ser definidos cuando construimos nuestra tabla mediante la base de
datos.

Nota: Si no insertamos uno de los campos en la base de datos se


inicializar con el valor por defecto que hayamos definido a la hora de
crear la tabla. Si no hay valor por defecto, probablemente se inicialice
como NULL (vaco), en caso de que este campo permita valores nulos. Si
ese campo no permite valores nulos (eso se define tambin al crear la
tabla) lo ms seguro es que la ejecucin de la sentencia SQL nos de un
error.

Fundamentos Webs, Primera Parte Pgina 18 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Resulta muy interesante, ya veremos ms adelante el por qu, el introducir


durante la creacin de nuestra tabla un campo autoincrementable que nos permita
asignar un nico nmero a cada uno de los registros. De este modo, nuestra tabla
clientes presentara para cada registro un nmero exclusivo del cliente el cual nos
ser muy til cuando consultemos varias tablas simultneamente.

Borrar un Registro
Para borrar un registro nos servimos de la instruccin Delete. En este caso
debemos especificar cual o cuales son los registros que queremos borrar. Es por
ello necesario establecer una seleccin que se llevara a cabo mediante la clusula
Where.

La sintaxis utilizada para efectuar estas supresiones:

Delete From nombre_tabla Where condiciones_de_seleccin

Nota: Si deseamos practicar con una base de datos que est vaca
primero debemos crear las tablas que vamos a llenar. Las tablas tambin
se crean con sentencias SQL.

Si queremos por ejemplo borrar todos los registros de los clientes que se llamen
Perico lo haramos del siguiente modo:

Delete From clientes Where nombre='Perico'

Hay que tener cuidado con esta instruccin ya que si no especificamos una
condicin con Where, lo que estamos haciendo es borrar toda la tabla:

Delete From clientes

Actualizar un Registro
Update es la instruccin que nos sirve para modificar nuestros registros. Como
para el caso de Delete, necesitamos especificar por medio de Where cules son
los registros en los que queremos hacer efectivas nuestras modificaciones.
Adems, obviamente, tendremos que especificar cules son los nuevos valores de
los campos que deseamos actualizar. La sintaxis es de este tipo:

Fundamentos Webs, Primera Parte Pgina 19 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Update nombre_tabla Set nombre_campo1 = valor_campo1, nombre_campo2 =


valor_campo2,... Where condiciones_de_seleccin

Un ejemplo aplicado:

Update clientes Set nombre='Jos' Where nombre='Pepe'

Mediante esta sentencia cambiamos el nombre Pepe por el de Jos en todos los
registros cuyo nombre sea Pepe.

Aqu tambin hay que ser cuidadoso de no olvidarse de usar Where, de lo


contrario, modificaramos todos los registros de nuestra tabla.

Seleccin de Tablas
La seleccin total o parcial de una tabla se lleva a cabo mediante la instruccin
Select. En dicha seleccin hay que especificar:

-Los campos que queremos seleccionar


-La tabla en la que hacemos la seleccin

En nuestra tabla modelo de clientes podramos hacer por ejemplo una seleccin
del nombre y direccin de los clientes con una instruccin de este tipo:

Select nombre, direccin From clientes

Si quisisemos seleccionar todos los campos, es decir, toda la tabla, podramos


utilizar el comodn * del siguiente modo:

Select * From clientes

Resulta tambin muy til el filtrar los registros mediante condiciones que vienen
expresadas despus de la clusula Where. Si quisisemos mostrar los clientes
de una determinada ciudad usaramos una expresin como esta:

Select * From clientes Where poblacion Like 'Madrid'

Adems, podramos ordenar los resultados en funcin de uno o varios de sus


campos. Para este ultimo ejemplo los podramos ordenar por nombre as:

Select * From clientes Where poblacion Like 'Madrid' Order By nombre

Teniendo en cuenta que puede haber ms de un cliente con el mismo nombre,


podramos dar un segundo criterio que podra ser el apellido:

Select * From clientes Where poblacion Like 'Madrid' Order By nombre, apellido

Fundamentos Webs, Primera Parte Pgina 20 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Si invirtisemos el orden nombre,apellido por apellido, nombre , el resultado


sera distinto. Tendramos los clientes ordenados por apellido y aquellos que
tuviesen apellidos idnticos se subclasificaran por el nombre.

Es posible tambin clasificar por orden inverso. Si por ejemplo quisisemos ver
nuestros clientes por orden de pedidos realizados teniendo a los mayores en
primer lugar escribiramos algo as:

Select * From clientes Order By pedidos Desc

Una opcin interesante es la de efectuar selecciones sin coincidencia. Si por


ejemplo buscsemos el saber en qu ciudades se encuentran nuestros clientes sin
necesidad de que para ello aparezca varias veces la misma ciudad usaramos una
sentencia de esta clase:

Select Distinct poblacion From clientes Order By poblacion

As evitaramos ver repetido Madrid tantas veces como clientes tengamos en esa
poblacin.

Hemos querido compilar a modo de tabla ciertos operadores que pueden resultar
tiles en determinados casos. Estos operadores sern utilizados despus de la
clusula Where y pueden ser combinados hbilmente mediante parntesis
para optimizar nuestra seleccin a muy altos niveles.

Operadores matemticos:
> Mayor que
< Menor que
>= Mayor o igual que
<= Menor o igual que
<> Distinto
= Igual

Operadores lgicos
And
Or
Not

Otros operadores

Fundamentos Webs, Primera Parte Pgina 21 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Selecciona los registros cuyo valor de campo se asemeje, no


Like
teniendo en cuenta maysculas y minsculas.
Da un conjunto de valores para un campo para los cuales la
In y Not In
condicin de seleccin es (o no) valida
Is Null y Is Not Selecciona aquellos registros donde el campo especificado esta
Null (o no) vaco.
Between...And Selecciona los registros comprendidos en un intervalo
Distinct Selecciona los registros no coincidentes
Desc Clasifica los registros por orden inverso

Comodines
* Sustituye a todos los campos
% Sustituye a cualquier cosa o nada dentro de una cadena
_ Sustituye un solo carcter dentro de una cadena

Veamos a continuacin aplicaciones prcticas de estos operadores.

En esta sentencia seleccionamos todos los clientes de Madrid cuyo nombre no es


Pepe. Como puede verse, empleamos Like en lugar de = simplemente para evitar
inconvenientes debido al empleo o no de maysculas.

Select * From clientes Where poblacion Like 'madrid' And Not nombre Like 'Pepe'

Si quisiramos recoger en una seleccin a los clientes de nuestra tabla cuyo


apellido comienza por A y cuyo nmero de pedidos esta comprendido entre
20 y 40:

Select * From clientes Where apellidos like 'A%' And pedidos Between 20 And 40

El operador In, lo veremos ms adelante, es muy prctico para consultas en varias


tablas. Para casos en una sola tabla es empleado del siguiente modo:

Select * From clientes Where poblacion In ('Madrid','Barcelona','Valencia')

De esta forma seleccionamos aquellos clientes que vivan en esas tres


ciudades.

Fundamentos Webs, Primera Parte Pgina 22 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Estructura general de un fichero HTML

HTML (HyperText Markup Language) es el lenguaje utilizado en la Internet para definir


las pginas del WORLD WIDE WEB. Los ficheros HTML son ficheros puramente ASCII,
que pueden ser escritos con cualquier editor bsico, tal como Notepad en Windows o vi en
Unix. Tambin se pueden utilizar procesadores de texto ms complicados como Microsoft
Word, pero en este caso hay que asegurarse que el fichero es guardado en disco como "text
only". En este fichero de texto se introducen unas marcas o caracteres de control llamadas
TAGs, que son interpretadas por el browser. Cuando ste lee un fichero ASCII con
extensin *.htm o *.html interpreta estas TAGs y formatea el texto de acuerdo con ellas.

Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <) y mayor que
( >), como por ejemplo <HTML>. Adems, la mayor parte de ellas son dobles, en el
sentido de que hay una TAG de comienzo y otra de final; entre ambas est el texto afectado
por dichas TAGs. La marca de final es como la de comienzo, pero incluyendo una barrra
(/). Por ejemplo, la marca de final de <HTML> es </HTML>. De la misma forma, la TAG
de final de <P> es </P>, y as con otras TAGs.

<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>

<BODY>
...
</BODY>
</HTML>

Formato de prrafos
As se escribe: As se ve:
<P>Este es un ejemplo de cmo se
formatean los prrafos en lenguaje
HTML. Este es un ejemplo de cmo se formatean los
En esta celda de la Tabla se prrafos en lenguaje HTML. En esta celda de
incluyen dos
prrafos</P>
la Tabla se incluyen dos prrafos

<P>El resultado puede verse en la El resultado puede verse en la celda vecina


celda vecina incluida en la columna incluida en la columna de la derecha
de la
derecha</P>
<P>Los prrafos se separan con un
espaciado
Los prrafos se separan con un espaciado
superior al correspondiente superior al correspondiente a una nueva

Fundamentos Webs, Primera Parte Pgina 23 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

a una nueva lnea. <BR> lnea.


Para tener un espaciado ms Para tener un espaciado ms compacto puede
compacto
puede utilizarse el Line Break, utilizarse el Line Break, como en este
como en este ejemplo.</P> ejemplo.
Lneas horizontales:
<P>Lneas horizontales:</P>

<HR><HR WIDTH=80%><HR SIZE=4><HR


NOSHADE>

<P>Los prrafos pueden indentarse.

<BLOCKQUOTE>Block quote indenta un


prrafo. Se Los prrafos pueden indentarse.
Block quote indenta un prrafo. Se
deshace esta indentacin con el fin deshace esta indentacin con el fin de
de la la TAG Block quote,
como se ve en el ejemplo.
TAG Block quote,</BLOCKQUOTE>

como se ve en el ejemplo.</P>
<PRE>La TAG Preformatted permite La TAG Preformatted permite
respetar la forma respetar la forma
original original

en que se ha en que se ha
escrito el
texto.</PRE>
escrito el texto.
<ADRESS>
Escuela Superior de Ingenieros Industriales
<P>Escuela Superior de Ingenieros
Industriales P Manuel de Lardizbal, 13
E-20009 San Sebastin
<P>P Manuel de Lardizbal, 13
<P>E-20009 San Sebastin (Esto aparece al principio del documento, a la
izquierda)
</ADRESS>

Formato de texto
Una idea importante de HTML es la de definir lo que se desea hacer (resaltar una palabra o
un prrafo, utilizar un espaciado constante, etc.), pero no decir cmo se desea hacerlo,
dejando que esta funcin la realice el browser de acuerdo con sus posibilidades. Por
ejemplo, se le puede decir al browser que se quiere remarcar una palabra sin decirle que la
ponga en bold; de ordinario la remarcar ponindola en bold, pero si el browser se est
ejecutando en un ordenador que no permite texto en bold, el propio browser buscar una
forma alternativa de remarcar esa palabra.

Fundamentos Webs, Primera Parte Pgina 24 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

De todas formas, los autores quieren muchas veces determinar ms en concreto cmo va a
aparecer su texto en la pantalla del browser. Adems, cada vez es ms infrecuente ejecutar
un browser que no tenga las amplias posibilidades de formatear texto de Mac o Windows.
La consecuencia es que HTML se ha extendido y permite tanto definir de modo general la
funcin del texto como determinar en concreto el formato con que se debe representar. A
continuacin se muestran algunos ejemplos de ambas formas de definir los formatos.

As se escribe: As se ve:

<FONT SIZE="+1" COLOR="red"


FACE="Arial">
Define tipo de letra,
Define tipo de letra, tamao y color
a tu gusto
tamao y color a tu
</FONT>
gusto
<P>Una palabra o un fragmento de
texto se
puede resaltar con el tag STRONG Una palabra o un fragmento de texto se
o con el tag EM, que en la mayor puede resaltar con el tag STRONG o con el
parte de los browsers se tag EM, que en la mayor parte de los
corresponden browsers se corresponden con bold e italic.
con <STRONG>bold</STRONG> e
<EM>italic</EM></P>
<P>En cualquier caso, tambin se
pueden utilizar los tags En cualquier caso, tambin se pueden utilizar
<B>bold</B> (B) e <I>italic</I> los tags bold (B) e italic (I).
(I).</P>
<P>Para escribir con una <TT>letra
de paso Para escribir con una letra de paso
constante (estilo teletipo)</TT> se constante (estilo teletipo) se emplea
emplea la la Tag TeleType.
Tag TeleType</P>
<P>Para que el texto
<BLINK>parpadee</BLINK>
Para que el texto parpadee se emplea la Tag
se emplea la TAG Blink.</P> Blink.
<P>Ttulos:
<H1>1</H1><H2>2</H2><H3>3</H3>

<H4>4</H4><H5>5</H5><H6>6</H6></P>
Ttulos: 123 456

<P>Alineados:</P>
Alineados:
<P ALIGN="LEFT">Izquierda</P>
Izquierda
<P ALIGN="RIGHT">Derecha</P>
Derecha
<P ALIGN="CENTER">Centrado</P> Centrado
</P>

Fundamentos Webs, Primera Parte Pgina 25 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Otros efectos:

Otros efectos: subrayado


<P><U>subrayado</U>
<P><STRIKE>tachado</STRIKE> tachado
<P><BIG>letra ms grande que el
estndar</BIG> letra ms grande que el estndar
<P><SMALL>letra ms pequea que el
estndar</SMALL> letra ms pequea que el estndar
<P>Texto tipo<SUB>subndice</SUB>
<P>Texto tipo<SUP>superndice</SUP> Texto tiposubndice

Texto tiposuperndice

Listas no ordenadas
As se escribe: As se ve:
<P>Las listas no ordenadas: Las listas no ordenadas:
<UL>
<LI>Van precedidas por "bullets"
<LI>Se entiende que no importa el
Van precedidas por "bullets"
orden Se entiende que no importa el orden
<LI>Se utilizan con mucha frecuencia Se utilizan con mucha frecuencia
</UL>

Listas ordenadas:
As se escribe: As se ve:

Las listas ordenadas: Las listas ordenadas:


<P>Las listas ordenadas:
<OL>
<LI>Van precedidas por nmeros
1. Van precedidas por nmeros
<LI>La numeracin es automtica 2. La numeracin es automtica
<LI>Son tambin muy utilizadas 3. Son tambin muy utilizadas
</OL>

Listas de definiciones:
As se escribe: As se ve:
Las listas de definiciones:
<P>Las listas de definiciones: Primer trmino
Definicin del 1er trmino

Fundamentos Webs, Primera Parte Pgina 26 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

<DL> Segundo trmino


<DT>Primer trmino Definicin del 2 trmino
<DD>Definicin del 1er trmino
<DT>Segundo trmino
<DD>Definicin del 2 trmino
</DL>

Tablas
Las tablas son uno de los elementos ms interesantes de HTML. Permiten, por ejemplo,
escribir texto en varias columnas, hacer listas de equivalencias, tablas propiamente dichas,
etc. Este documento es un ejemplo de las posibilidades ofrecidas por las tablas.
As se escribe: As se ve:
<TABLE BORDER=1>
<TR><TD>celda (1,1)</TD><TD>celda celda (1,1) celda (1,2)
(1,2)</TD></TR>
<TR><TD>celda (2,1)</TD><TD>celda celda (2,1) celda (2,2)
(2,2)</TD></TR>
</TABLE>
<CENTER><TABLE BORDER=1>
<TR><TD>celda (1,1)</TD><TD>celda celda (1,1) celda (1,2)
(1,2)</TD></TR>
<TR><TD>celda (2,1)</TD><TD>celda celda (2,1) celda (2,2)
(2,2)</TD></TR>
</TABLE></CENTER>

Anclas
Las anclas son referencias que se emplean en el archivo con el fin de ser el punto de destino
de un link. En el archivo son invisibles pero al clicar sobre una palabra sealada como link,
la visualizacin de la pgina pasa a ser el punto donde se haba definido el ancla.
As se escribe: As se ve:
<P><A NAME "ancla">

Links
Los links son palabras diferenciadas en un archivo HTML, y tienen la funcin de enviar al
usuario a algn ordenador remoto, o a algn sitio de la pgina, que est sealada por un
ancla. Los links forman lo que se llama hipertexto.
As se escribe: As se ve:
<P>Este link enva al Web de la Este link enva al Web de la Universidad
Universidad<P>
<A HREF="http://193.145.249.23">Al
Web</A> Al Web
<P>Este link enva al ancla<P>
<A HREF="#ancla">Al ancla</A> Este link enva; al ancla

Fundamentos Webs, Primera Parte Pgina 27 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Al ancla

Insercin de imgenes
Un recurso que da mucha vida a una pgina hecha con HTML es la insercin de elementos
grficos. La forma de insertar una imagen es la siguiente:
As se escribe: As se ve:

<IMG SRC="todo.gif">

Imgenes clicables
Se pueden unir los dos apartados anteriores, es decir, se puede crear una imagen que a la
vez sea un link. Al clicar sobre la imagen, sta te enviar a un documento o un ancla
destino.
As se escribe: As se ve:

<P><A HREF="#ancla">
<IMG SRC="todo.gif">
</A>

Imgenes sensibles
Imgenes sensibles son un tipo de imgenes las cuales detectan la zona en la que se ha
clicado y segn el punto realizan un link a una zona del documento u a otra (o entre
archivos). Hay que definir los puntos de la imagen y la zona a la que hay que ir si se clica.
Se pueden definir zonas rectangulares, circulares y poligonales. El ejemplo crea dos zonas
rectangulares definiendo los puntos segn las coordenadas del punto superior izquierdo y el
del punto inferior derecho.
As se escribe: As se ve:
<P><IMG USEMAP="#mapadirec"
SRC="mapa.gif">
<MAP NAME="mapadirec">
<AREA COORDS=0,0,47,46
HREF="http://193.145.249.23">
<AREA COORDS=47,0,96,46
HREF="#ancla">
</MAP>

Fundamentos Webs, Primera Parte Pgina 28 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

Frames
As se escribe: As se ve:

<FRAMESET
ROWS="50%,50%,*">
<FRAME
SCR="ejemplo.htm">
<FRAME
SCR="ejemplo.htm">
</FRAMESET>

<FRAMESET
COLS="40%,60%">
<FRAME
SCR="ejemplo.htm">
<FRAME
SCR="ejemplo.htm">
</FRAMESET>

Formularios
As se escribe: As se ve:
<FORM>
Nombre: <INPUT NAME="nombre"> Nombre:
</FORM>

Fundamentos Webs, Primera Parte Pgina 29 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

<FORM> Nombre:
Nombre: <INPUT NAME="nombre"><P>
<INPUT TYPE="radio" NAME="boton"
CHECKED> boton radio 1
boton radio 1<P>
<INPUT TYPE="radio" NAME="boton"
CHECKED> boton radio 2
boton radio 2<P>
<INPUT TYPE="checkbox" NAME="check">
checkbox checkbox
</FORM>

Layers
Antes que nada, hay que decir que las layers slo son compatibles con Netscape
Communicator por el momento. As que si no es este tu navegador, no vers esta parte
como debera ser en la realidad. Las capas permiten jugar con contenidos situados en capas
distintas, escondindolos o hacindolos visibles, situndolos en la parte deseada de las
ventanas... pero con el handicap de la compatibilidad. Para browsers que no soportan
layers, est la tag pareada<NOLAYER>
Hay dos tipos de layers: las definidas por <LAYER> son posicionadas de una forma
absoluta. Las definidas por <ILAYER> son posicionadas con relacin a otra layer.

As se escribe: As se ve:
<LAYER NAME="uno" VISIBILITY="HIDE">
Esta es la capa uno </LAYER>
<LAYER NAME="dos" VISIBILITY="SHOW"> Esta otra es la capa dos
Esta otra es la capa dos </LAYER>

A continuacin se listan los atributos que soporta la tag pareada <LAYER>:

Todo tipo de eventos de JavaScript.


NAME: especifica el nombre de la capa para poder referirse a ella desde JavaScript,
por ejemplo.
LEFT, TOP: indica la posicin (izquierda y arriba) en la que empieza la layer (si es
una tag LAYER) o la posicin relativa para las definidas con ILAYER.
PAGEX, PAGEY: especifica la posicin relativa de la layer a la ventana del
documento
SRC="nombrearchivo.ext" carga en la layer el arhivo especificado
(nombrearchivo.ext)
Z-INDEX, ABOVE, BELOW: especifican en orden de amontonamiento de las
layers entre s. Estos tres atributos son mutuamente exclusivos, emplese slo uno
de ellos.

Fundamentos Webs, Primera Parte Pgina 30 de 31


Fundamentos Web Mdulo II Ing. Msc. Daniel Bojorge

WIDTH, HEIGHT: especifican la anchura y la altura de la layer. Limitan el rea en


la que se muestra el contenido de la layer.
CLIP=x1,y1,x2,y2 delimita el area visible (definida por el rectngulo de las
coordenadas indicadas) de la layer.
VISIBILITY: SHOW hace la layer visible, HIDE la oculta.
BGCOLOR: especifica el color de fondo de la layer. Por defecto, una layer es
transparente para que puedan verse las que estn por debajo. Si se pone color de
fondo, no podrn verse las layers inferiores.
BACKGROUND="archivo.ext" es lo mismo que BGCOLOR pero poniendo como
fondo la imagen del archivo.ext

Una plantilla de ayuda


As se escribe: As se ve:
<P>Texto aqu Texto aqu
<P>Texto aqu Texto aqu

Fundamentos Webs, Primera Parte Pgina 31 de 31

Você também pode gostar