Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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.
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.
Correo electrnico
IRC o Chat
FTP
El propio Web
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 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>.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde
<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>
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.
Mientras que las pginas estticas todo el mundo se las puede imaginar y no
merecen ms explicaciones, las pginas dinmicas son ms complejas y
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.
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 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.
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
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
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.
Qu es JavaScript?
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.
Qu es JAVA?
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.
Pasado y presente
general, cualquier aplicacin que deseemos hacer con acceso a travs Web se
puede hacer utilizando Java.
Conclusin
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.
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.
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.
Qu es ASP?
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.
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.
Qu es PHP?
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 PHP. Como la pgina resultante contiene nicamente cdigo HTML, es
compatible con todos los navegadores.
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.
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
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.
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.
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.
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.
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.
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.
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.
Tipos de Campos
Como sabemos una base de datos esta compuesta de tablas donde almacenamos
registros catalogados en funcin de distintos campos (caractersticas).
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
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.
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.
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:
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:
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:
Un ejemplo aplicado:
Mediante esta sentencia cambiamos el nombre Pepe por el de Jos en todos los
registros cuyo nombre sea Pepe.
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:
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:
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' Order By nombre, apellido
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:
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
Comodines
* Sustituye a todos los campos
% Sustituye a cualquier cosa o nada dentro de una cadena
_ Sustituye un solo carcter dentro de una cadena
Select * From clientes Where poblacion Like 'madrid' And Not nombre Like 'Pepe'
Select * From clientes Where apellidos like 'A%' And pedidos Between 20 And 40
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
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.
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:
<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>
Otros efectos:
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:
Listas de definiciones:
As se escribe: As se ve:
Las listas de definiciones:
<P>Las listas de definiciones: Primer trmino
Definicin del 1er trmino
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
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>
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>
<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>