Qu es Internet?

Es una red mundial de redes de computadoras, que

permite la comunicacin directa y transparente para
compartir informacin y servicios entre usuarios.
Un computador que forme parte de esta red de redes
puede comunicarse con otro en cualquier parte del mundo,
con tal que este otro computador tambin este conectada
a Internet en ese momento.
Qu es Protocolo ?
Para que la comunicacin entre dos computadoras sea
posible es indispensable que ambas hablen el mismo
idioma, es decir usen el mismo protocolo de comunicacin.
Protocolo entonces es el conjunto de reglas que
determinan cmo se realizar el intercambio de
informacin entre dos computadores.
Qu es TCP/IP ?
Transmission Control Protocol/Internet Protocol. Dos
protocolos de comunicaciones diseado originalmente
para la red ARPA, proyecto de comunicacin de
computadoras del Departamento de Defensa de USA que
posteriormente ha adoptado Internet.
Transmission Control Protocol (TCP): Divide la informacin
en paquetes de tamao adecuado, los numera, aade
cierta informacin para su posterior decodificacin y para
detectar posibles errores luego de ser transmitidos.
Internet Protocol (IP): Este protocolo se encarga de la
transmisin de los paquetes previamente preparados por
el TCP, proporcionando la direccin de origen y destino.
Dos variaciones de este protocolo son SLIP (Serial
Line/Internet Protocol) y PPP (Point to Point Protocol).
Direcciones IP
Para establecer la comunicacin es necesario que cada
computador sea identificado de forma nica en la red,
1

para ello se usa la direccin o nmero IP que esta formado

por cuatro nmeros que pueden tomar valores entre 0 y
255, separados por puntos. Estos nmeros son asignados
por una organizacin internacional, para evitar cualquier
duplicidad.
Dominio
Las computadoras necesitan el nmero IP para
establecer contacto entre s, pero ese nmero es muy
difcil de recordar para nosotros los humanos y es por eso
que usamos el dominio.
Un dominio es un conjunto de cdigos literales, separados
por puntos, llamados subdominios. Cada subdominio
identifica un grupo de computadoras. Si leemos el dominio
de izquierda a derecha, cada subdominio ser ms vasto
que el subdominio ubicado a su izquierda. Por ejemplo el
dominio [Link], identifica a la Universidada ALAS
Peruanas en internet, donde: uap es el nombre que hemos
elegido, edu identifica a las organizaciones educativas y
pe a nuestra ubicacin geogrfica, el Per. Para ver una
lista de dominios clic
Id
com
edu
org
gob
mil
net

Descripcin
Comercial
Educacin
Organizacin sin fines de lucro
Gobierno no militar
Militar
Recurso de red

Id
es
cl
pe
mx
co

Descripcin
Espaa
Chile
Per
Mxico
Colombia
USA

Servidor DNS - Domain Name Server

Son unas computadoras cuya misin es traducir los
nombres de dominio (ej: [Link]) a sus
correspondientes nmeros IP.
Servicios de Internet
Existen muchos servicios a disposicin de los usuarios en
Internet, los ms importantes son:
a. Hipertexto: WWW
El World Wide Web o simplemente Web (telaraa) fue
desarrollado por el Laboratorio Europeo de Fsica de
Partculas, para facilitar el manejo de informacin.
Est basado en el Hyper Text Transport Protocol
(HTTP) que permite el intercambio de documentos de
texto en un formato especial llamado Hyper Text
Markup Language (HTML), el cual posee la
caracterstica de poder formatear el texto (Tipos,
tamas y colores de letras, atributos como negrita,
itlica, subrayado, estilos, listas, tablas, formularios,
marcos etc), fcil enlace de documentos de forma que
un simple clic de mouse sobre una palabra nos
muestra otro documento asociado, adems soporta
multimedia (imagenes, audio y video) y aplicaciones
en lnea.
Para poder acceder a estos documentos se requiere
un navegador, software de cliente que es capas de
interpretar el lenguaje HTML.
b. Correo electrnico: E-MAIL
Este es uno de los servicios ms importantes y se
trata de el intercambio de documentos (en texto
puro) usando el protocolo SMTP (Simple Mail Transfer
3

Protocol) que define el formato del mensaje y la

manera como ser menajado en la red. Para usar el
correo cada usuario debera tener asignado un buzn
en algn servidor de correo, ya que el intercambio es
solo entre servidores y no entre clientes. Para leer su
buzn el usuario debe acceder a su servidor de correo
va un programa cliente de correo y luego
identificarse ante el servidor.
c. Listas de inters: USENET
Son foros de debate sobre algun tema en comn,
donde se puede dicutir e intercambiar informacion
sobre algun tema. Cada usurio envia al servidor su
correo dirigido al grupo y este es almacenado para
que en cualquier momento este y otros mensajes
sean recogidos por los interesados en la lista.
d. Noticias: NEWS
Uno se inscribe es una lista (normalmente son
servicios pagados), cada nueva noticia o articulo
sobre el tema es transferido al servidor quien se
encarga de la distribucion enviando el material como
mensaje de correo a cada uno de los usuarios
inscritos en la lista.
e. Transferencia de archivos: FTP
Servicio con el que puedo transferir todo tipo de
archivos usando el File Transfere Protocol, el cual
permite que computadores con sistemas operativos
distintos intercambien informacion sin problemas.
Ademas de tener la direccion del servidor FTP
debemos tener un codigo de acceso aunque muchos
aceptan el modo anonimo (anonymous) el cual es un
modi de acceso publico.
f. Acceso remoto: Telnet
El protocolo TErminaL EmulaTion fue creado por ARPA
y permite accesar a una computadora situada en un
lugar remoto, como si estuviesemos frente a ella.
Ademas de conocer la direccion de dicha
camputadora, tendremos que tener un codigo de
acceso a ella, aunque muchos aceptan el modo
invitado (guest).
4

g. Chat o IRC - Internet Relay Channel

Un servicio en el cual los usuarios establecen
comunicacion en tiempo real, las cuales pueden ser
privadas o entre un grupo de personas. Los metodos
de comunicacion pueden ser el teclado, el audio y el
video.
En el mas comun y sencillo de los casos los usarios
acceden a un servidor IRC que les presentara una
pizarra donde podran leer lo que escriba cualquier
persona del grupo en forma instantanea,
estableciendose casi una conversacion escrita.
Logicamente la comunicacion es limitada (no
transmite tonos ni inflexiones de voz), un poco
impersonal ya uno no ve a sus interlocutores y lenta
por la velocidad de escritura.
h. Gopher:
Dise en la Universidad de Minesota es el primer
intento de facilitar la consulta de documentos por un
sistema de menus. Solo soprta texto y actualmente
esta dejando de usarse dandole paso a la Web.
File Transfer Protocol (FTP): Permite el intercambio de
archivos. Simple Mail Tranfer Protocol (SMTP): Permite el
intercambio de correo. El protocolo TELNET: permite la
emulacion de terminal para todo tipo de computadoras.
Que es Word Wide Web ?
El mas poderoso servicio de Internet llamada la telaraa
mundial tambien conocida como WWW, W3 o simplemente
Web, apoya el hipertecto y la multimedia via lo que
llamamos paginas Web.
Que son paginas Web ?
Son paginas de hipertexto que pueden ser consultadas
mediante un navegador (Browser) en modo grafico y
contienen texto formateado, imagenes, sonido, video y
5

conexiones para manejar de forma facil e interactiva la

informacion.
Que es hipertexto ?
Son basicamente archivos tipo texto, que mediante
comandos HTML, que son interpretados por el navegador
como comandos de formateo de texto, es decir, texto
presentado de forma estructurada y agradable, con
enlaces (hyperlinks) que conducen a otras fuentes de
informacin relacionadas y con objetos multimedia
(imagenes, sonido, video...).
Que son codigos HTML ?
HTML (Hypertext Markup Language = lenguaje con marcas
de hipertexto) es un lenguaje muy sencillo que permite
disear hipertexto.
La descripcin se basa en especificar en el texto la
estructura lgica del contenido (ttulos, prrafos de texto
normal, enumeraciones, definiciones, citas, etc) as como
los diferentes efectos que se quieren dar (especificar los
lugares del documento donde se debe poner cursiva,
negrita, un enlase, una imagen o un sonido determinado)
y dejar que luego la presentacin final de dicho hipertexto
se realice por un programa especializado, llamado
navegador (como Netscape, Explorer o Mosaic).
La mayoria de efectos se especifican poniendo comandos
al rededor de lineas de texto, para indicar al navegador
como debe lucir cierta parte del texto.
Ejemplo: Hola <B>Tiburn</B> como estas hoy ?
Se vera asi: Hola Tiburon como estas hoy ?
Todos los comandos estn encerrados entre los signos < y
>, y con la barra / cuando se trata del fin de un comando,
aunque algunos comandos no requieren cierre.
A veces es necesario ofrecer datos adicionales a cada
comando en forma de parametros. Por ejemplo, cuando se
define un hiperenlace hay que especificar su destino.
Estos parametros siempre se ponen en la apertura del
6

comando y tienen el formato <comando parmetro1

parametro2 ...>, el texto afectado se encontrara
inmediantamente despues hasta encontrar el comando de
cierre, con el formato </comando>.
Ms adelante en este DEMO mostrare el efecto de los
comandos ms usados en la creacin de un documento
HTML. Como un ejemplo es mejor que mil palabras en
muchos comandos casi no explico nada y voy de frente al
ejemplo del efecto que produce dicho comando.
Como funciona el hipertexto ?
La tecnologia hipertexto funciona gracias a que para
especificar de manera uniforme el objeto al que apunta
nuestro enlace, se usa una forma estandarizada que se
denomina URL, asi cada archivo tiene una direccion unica,
de forma que puede ser ubicado.
Que es URL ?
URL (Uniform Resource Locator=localizador uniforme de
recursos), es la direccion de un archivo escrito en un
formato que el servidor de Web puede interpretar, para
lograr acceder al archivo. Usualmente esta esta formado
de la siguiente manera:
[protocolo://][dominio][:puerto][/ruta/]archivo
Protocolo:// Es opcional, por omision se asume [Link] es
el protocolo usado para transmitir archivos en Internet.
Para el acceso a servidores Web, el protocolo suele ser
http, pero se admiten otros protocolos (ftp, gopher, news,
file...).
Dominio Es opcional y define el nombre del servidor que
contiene el objeto buscado (como: [Link]). Por
omision asume el mismo que el de la ultima direccion
usada.
:puerto Es opcional y solo es necesaria cuando se usa un
numero de puerto TCP no estandar.
/ruta/ Es opcional y define la ruta por donde debera
buscarse el archivo. Por omision se asume el mismo que el
7

de la ultima direccion usada. Nota que es necesario usar la

/ como en UNIX y no \ como en DOS.
La razn de este convenio es precisamente que la mayor
parte de los servidores de Web que hay en Internet estan
basados en UNIX. Esto se nota tambin en que por lo
general los nombres de los archivos son largos y pueden
contener varios puntos. Tambien debemos tener en cuenta
que en UNIX las maysculas y las minsculas son distintas
en los nombres de archivo.
archivo Este parametro es obligatorio e indica el nombre
del archivo que quieres abrir.
URL relativa
Es una URL incompleta, en la que por ejemplo falta el
protocolo, dominio y hasta parte de la ruta, que el
navegador puede deducir segun las definidas para el
documento en uso.
Que tipos de archivo soporta HTML
Eso depende del navegador que use cada cliente en
particular. Netscape y Explorer traen una tecnica que se
denomina plug-in que permite al usuario configurar los
manejadores (drives) necesarios para manejar cualquier
tipo de archivo.
TXT
texto
HTM
Pagina Web
PS
Script
JPG, XBM, TIP
imagenes
GIF
8

Imagenes y animaciones
WAV, AU, AIF
Sonidos
AVI, MOV, MPG, JPEG
Videos
Tambien debes tener en cuenta que para que se pueda
mostar un cierto tipo de letra, esta debe estar cargada en
el Windows del cliente.
Algo mas...
Conviene que nos detengamos momentneamente en la
estructuracin habitual de un servidor Web. Para empezar,
siempre hay una pgina de bienvenida (home page) que
podra compararse con la caratula de una revista, si no
sabemos exactamente qu es lo que buscamos, o no
sabemos dnde encontrarlo, la caratula es lo primero que
vemos. Para acceder al HOME PAGE de cualquier servidor
de Web, basta con escribir una barra en el lugar de la ruta
(es decir, reclamamos al servidor el directorio raz).
El resto de la informacin que se puede encontrar en un
servidor de Web se distribuye a partir de ese directorio
raz en distintos subdirectorios y archivos. Un convenio
muy habitual relativo al nombre de los ficheros es hacer
que los archivos que contengan documentos HTML
terminen en htm.
Hits, cookies y visitantes
Es muy interesante saber para el que tiene una pagina
Web, el numero de visitantes de la pagina, que hacen ellos
en la pagina etc.
HIT
Se denomina asi a un pedido del navegador respecto a
un archivo, dicho de otra manera el clic de un usuario
9

en un enlace. Inmediatamente despues del clic el

navegador contacta la URL y transfiere el archivo HTML
(el texto) y luego transfiere los otros archivos como
imagenes, sonido Appletes de JAVA etc y en las
estadisticas cada uno de estos archivo transferido es un
HIT.
VISITA
Se denomina asi a un unico navegante que genera
multiples pedidos de carga sobre el mismo sitio desde
una unica ubicacion, en un tiempo prudencial (por lo
gereal 30 minutos).
VISITANTE
Es el hecho de registrar el numero de visitantes
distintos, lo que implica que hay que identificarlos para
no contar un navegante que regresa. Normalmente esta
identificacion se hace con un COOKIE o pidiendo
registro.
COOKIE
Es un pequeo archivo de identificacion que le envia un
servidor y se graba en su disco duro, para poder
identificarlo, lo que le permitira posteriormente
rastrearlo, para determinar como se mueve en la
pagina.
HTML = HyperText Markup Language
Formato de documento estandar para manejo de paginas
Web. HTML es una aplicacion de SGML.
SGML
Estandar internacional para describir la estructura de un
documento Markup. La idea basica del SGML es hacer la
informacion independiente de cualquier software o
hardware particular. Esto se logra guardando todos los
documentos como texto puro y hacer referencia a otros
documentos en otros formatos como formatos, estilos,
10

imagenes, sonido etc cuando se requieran. SGML fue

definido por el estandar ISO 8879 en 1986.
Markup
Codigo especial en un documento que especifica que parte
del documento debe ser procesado por una aplicacion. En
un procesador de palabras, Markup especifica como el
texto debera ser formateado; en un documento HTML,
Markup especifica la estructura del documento
(encabezado, titulos, parrafos, etc)
Hypertext = hipertexto
Texto que contiene conexiones con otros documentos. Los
documentos HTML son un ejemplo de hipertexto.
Browser = navegador
Un programa visualizador cliente que trabaja en modo
grafico comunmente usado en Web, para ver y manejar
documentos HTML. Estos programas por ser graficos solo
funcionan bajo Win 3.1, 95 o 98. Ej: Netscape Navegator,
Internet Explorer, Mosaic, Lynx, Cello etc
Line-mode browser
Navegador HTML que puede ser usado en el modo de
terminal como VT100 o una PC con un software de
comunicaciones. Los mas comunes son Lynx y WWW de
CERN.
Home page = pagina principal
Documento de presentacion o caratula de un servicio o
grupo de paginas HTML en un servidor Web.
CERN
Laboratorio Europeo para Fisica de Particulas, ubicado en
Ginebra, donde se invento el World Wide Web. Para mas
informacion consulta: [Link]
NCSA = National Center for Supercomputing Applications
Localizado en la Universidad de Illinois en UrbanaChampaign. El NCSA fue fundado por el gobierno de U.S.
para hacer mas accesible las computadoras. Aqui fue
11

creado el Mosaic el primer navegador para paginas Web y

en el que estan basados todos los navegadores modernos.
CGI = Common Gateway Interface
Es una caracteristica de los servidores Web, que permite a
los navegadores cliente correr aplicaciones instaladas
como scripts en el servidor. Los scripts CGI pueden ser
creados en cualquier lenguaje de programacin que corra
en el servidor.
POP - Post Office Protocol
Un protocolo usado para mensajes de correo. La antigua
version POP2 (1980) era solo para recibir mensajes y era
necesario el uso de SMTP para el envio de mensajes de
correo. Hoy tenemos la POP3 que ya supero este problema
y se puede usar en conjunto con SMTP o sola.
SMTP - Simple Mail Transfer Protocol
Protocolo estandar Internet usado para el envio de
mensajes de correo. Un intento de expandirlo para
envio/recepcion se frusto, por lo que es muy comun que
trabaje en pareja con el POP. Soportado por Pegasus Mail
2.4, MS Internet Mail 3.0, Eudora Pro 2.2 etc
IMAP - Internet Mail Access Protocol
Nuevo estandar similar al POP, pero con caracteristicas de
busqueda entre los mensajes del servidor usando palabras
claves sin necesidad de almacenarlos localmente. La
version IMAP4 soporta envio de archivos no ASCII y MIME.
Aun no soportado por la mayoria. Lo soportan Embla 1.2 y
Simeon 4.0
IMSP - Interactive Mail Support Protocol
Un protocolo aun en desarrollo en la Carnegie-Mellon, que
ha prometido superar a IMAP4 para suscribirse a listas de
interesa, buzones de correo y buscar direcciones en
agendas.
MIME - Multipurpose Internet Mail Extensions (RFC-1510)
Codificacion usada para transportar archivos no ASCII
(ejecutables, Word, Excel, imagenes, video etc). Soporta
12

multiparte, es decir que puedes dividir el archivo y

enviarlo en varios mensajes. Actualmente soportado por
IMAP4. Es tambien el formato usado por los servidores
Web y navegadores (browser) para transferir archivos.
MIME le dice a los navegadores el tipo de archivo y como
procesarlo.
UUencode/UUdecode
Unix to Unix. Es un algoritmo de
codificacion/decodificacion para el envio de archivos no
ASCII a traves del correo. El remitente convierte el archivo
en ASCII y luego el receptor lo decodifica reconstruyendo
los datos originales.
MailTo
Esquema que permite a un navegador (browser) enviar un
formulario (form) a una direccion de correo electronico (Email) o generar la ventana de edicion de correo.
HTTP= HyperText Transfer Protocol
Protocolo usado para transferir documentos HTML por la
red, entre el servidor Web y el navegador cliente.
Servidor Web
Programa de red que responde a los requerimientos
locales o remotos de documentos HTML. Solo hay que
proporcionar el nombre del archivo en el formato URL y el
servidor responde el archivo que puede estar en cualquier
formato como texto, binario etc.
Firewall
En redes, es un computador dedicado a prevenir el acceso
de intrusos a traves de Internet hacia la red interna o
intranet. Si tu tienes un Firewall en tu sitio, normalmente
no podras conectar directamente a un servidor en
Internet. Necesitaras de un agente llamado servidor
proxy, que haga la conexion por ti. La mayoria de firewalls
tiene un proxy asociado a cada protocolo ej: HTTP, FTP y
Telnet.
13

Servidor Proxy
Los proxys tipicos aceptan conexiones de usuarios, toman
decisiones y completan, a nombre del usuario, una
conexion en un destino remoto.
FTP = File Transfer Protocol
Uno de los esquemas que puede ser especificado en las
direcciones URL. Tradicionalmente el mas usado de los
servicios y te permite obtener una copia del archivo desde
la computadora remota o conectarte a esta usando TCP/IP.
W3O
La organizacion WWW en el MIT es una organizacion sin
fines de lucro que promueve el X Windows proporcionando
codigos de ejemplo. Para mas informacion consulta:
[Link]
IETF = Internet Engineering Task Force
Responsables del manejo tecnico de Internet. El IETF
coordina con los diseadores los estandares HTML.
ICADD = International Committee for Accessible Document
Design
Tecnica creada por ICADD y documentada en las
especificaciones ISO 12083, que transforma de forma
automatica archivos SGML (incluso archivos HTML) a
Braille o sistemas de sintetizacion de voz. Todos los
documentos HTML creados con HoTMetaL son compatibles
ICADD y pueden ser leidos por conversores usando las
tecnicas ICADD.
ISO = International Organization for Standardization
ISO 8859/1 character set
This is the character set for `special' or `accented'
characters supported by HTML. This character set is also
called `ISO Latin 1'. It includes characters required for
most western European languages: Dutch, English, French,
German, Italian, Irish, the `Iberian' languages, and the
`Nordic' languages. This character set is one of several in
the ISO 8859 standard: others support, for example,
14

eastern European languages and Cyrillic-based languages.

Only ISO 8859/1 is currently supported by HTML, however.
Netscape
Empresa de software propietaria del mas popular de los
navegadores usados para manejar documentos HTML.
URI = Uniform Resource Identifier
Es el nombre generico para cualquier clase de
identificador de recipiente en Internet. Hay tres tipos
basicos:
URL (Uniform Resource Locator)
URC (Uniform Resource Classification)
URN (Uniform Resource Name)
La implementacion de URC y URN estan aun en etapa
experimental.
La idea basica es que la fuente (por ejemplo un
documento) es identificado por un URN, un tipo de
identificador publico en el SGML. El URN esta sujeto al
URC, que es una coleccion de informacion sobre la fuente
(que puede incluir, por ejemplo, el precio y uno o mas
URL).
Estructura bsica del documento
Todo documento HTML debe tener una estructura con los
siguientes elementos:
1. Prlogo identificador
Esta debe ser necesariamente la primera lnea del
documento, es la identificacin del tipo de documento y su
versin segn la definicin de la RFC. Ej para referirse a
un documento HTML de nivel 3.2 conforme a las
especificaciones es as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
De omitir esta lnea, de hecho muchos autores lo hacen, el
navegador cliente, herramientas de validacin y otros
softwares tendr dificultades para identificar la versin
HTML del documento y despus de todo a nosotros no nos
cuesta nada declararla, no ?.
15

2. Conjunto de elementos <HTML>

Un documento HTML comienza con el comando <HTML>, y
termina con </HTML>. Esto identifica al documento como
contenedor de cdigos HTML. Se pone inmediatamente
despus del prlogo identificador y sirve para exponer
todos los elementos del texto, pero no sern visibles a no
ser que estn contenidos en <BODY> o <FRAME>.
Dentro del documento, entre las etiquetas de principio y
fin de HTML, hay dos zonas bien diferenciadas: el
encabezamiento HEAD, que sirve para definir diversos
valores genricos para todo el documento y el cuerpo
BODY, donde reside la informacin del documento.
3. Encabezado <HEAD>
Es una coleccin de comandos de informacin sin orden
particular, que no afectan directamente la forma de
mostrar el documento, pero s son usados; dan importante
informacin al navegador cliente (el browser que intenta
interpretar la pgina).
Estos comandos son:
<BASE> - Proporcina una direccin bsica especfica para
el doc
<ISINDEX> -Habilita la bsqueda desde teclado
<LINK> - Indica la relacin entre doc
<NEXTID> - Crea una identificacin nica del doc
<TITLE> - Especifica el ttulo del doc (obligatorio)
<META> - Especifica la informacin usable por el
cliente/servidor en documentos dinmicos.
NOTA: El comando ttulo es obligatorio, los dems son
opcionales, como parte del encabezado de un documento
HTML.
Cada documento HTML debe tener un ttulo <TITLE> que
identifique su contenido y este NO debe contener
elementos de control como centrado, negritas, subrayado
etc
La longitud del ttulo no tiene lmite, pero los ttulos
largos son cortados en ciertas aplicaciones. Para
16

minimizar este problema te recomiendo que el ttulo no

pase de 64 caracteres.
Tambin ten en cuenta de que en Internet los ttulos son
jalados a listas de bsqueda (como Yahoo) y ttulos como
"Introduccin" mandarn a muchos al desvo. En lugar de
eso te sugiero:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HEAD>
<TITLE>Introduccin al uso de HTML</TITLE>
</HEAD>
4. Cuerpo <BODY>
El cuerpo es el que contiene todo el texto e imgenes de
la pgina, que junto a los elementos HTML te dan el
control del formato.
Debo hacerte notar que NO TODOS estos elementos son
soportados por todos los navegadores (Browsers) y eso
depende de la versin de HTML que manejen (Ej 1, 2, 3 o
3.2) incluso Netscape y Explorer estn "creando" cada uno
sus propias especificaciones.
Dichos efectos se especifican exclusivamente a travs de
los comandos. Es decir los espacios, tabulaciones y
retornos de carro que metas en el archivo fuente no
tienen ningn efecto a la hora de la presentacin final del
documento. Por ejemplo, escribiendo:
Todas
estas
palabras
forman
una frase.
Obtendremos exactamente lo mismo que con:
Estas palabras forman una frase.
En resumen, la estructura bsica de un documento HTML
es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Ttulo</TITLE>
</HEAD>
<BODY>
17

Texto del documento, comando de formateo, enlaces,

imgenes, sonido, video, aplicaciones en JAVA, JAVA Script,
VBScript, AcntiveX, CGI's...
</BODY>
</HTML>
BGCOLOR parmetro usado para especificar el color del
fondo sin imagen. #rrggbb representa la trica RGB (RedGreen-Blue) en hexadecimal. color representa uno de los
16 colores de la paleta bsica predefinida. Por default el
texto es negro sobre fondo gris.
Sintxis: <BODY BGCOLOR=#rrggbb> o <BODY
BGCOLOR=color>
Una buena ayuda para la seleccin de colores con #rrggbb
la puedes encontrar en: Paleta de Colores
TEXT parmetro usado para definir el color del texto por
omisin. Su formato es el mismo que el de BGCOLOR. Por
default es negro.
LINK, VLINK, y ALINK parmetros usados para especificar
el color por omisin de: texto con enlace, enlace ya
visitado y enlace activo.
Los colores por omisin son LINK=blue, VLINK=purple y
ALINK=red. El formato es el mismo que BGCOLOR.
LEFTMARGIN y TOPMARGIN: Margen izquierdo y superior
del documento en pixels.
Sintxis: <BODY LEFTMARGIN=60> o <BODY
TOPMARGIN=60>
BACKGROUND parmetro usado para especificar la ruta y
nombre de archivo (URL) de la imagen que ser usada
como fondo del documento, que ser mostrada,
dependiendo de su tamao como mosaico para cubrir toda
la ventana, como el papel tapiz en Windows. Para mas
informacin consulta el comando BACKGROUND en este
mismo DEMO.
Sintxis: <BODY BACKGROUND=ruta/[Link]>
Consideraciones:
Cada elemento de color en <BODY> solo puede ser
especificado una sola vez para todo el documento, no
18

puede ser cambiado para parte del documento. Para

cambiar el color de un texto en particular debes usar el
comando <FONT COLOR...>.
Al especificar una imagen como fondo, se requiere que
dicha imagen sea cargada completamente, esto reduce la
velocidad de carga del documento y ninguna parte podr
ser mostrada hasta que la imagen termina de ser cargada
y decodificada. Por lo que es muy importante que las
imgenes de fondo sean pequeas y simples. Esta imagen
de fondo es repetida hasta llenar toda la pantalla (como
mosaico).
Si la opcion de "Auto Load Images" esta off, no podrs
cargar la imagen de fondo y BGCOLOR no ser
especificado y todos los controles de color de texto como
TEXT, LINK, VLINK o ALINK son ignorados, dejando el
fondo gris y texto negro. :-(
Otro aspecto a tener en cuenta cuando usas imgenes de
fondo es el contraste entre el fondo y el color del texto de
manera que an sea posible leer sin mayor dificultad.
Las pginas Web dicen mucho de su autor. Crear un buen
sitio Web, hermoso, elegante y fcil de navegar, requiere
de habilidades en tipografa, geometra, psicologa, cdigo
HTML y mucho sentido comn.
Quien quiere una pgina web ?
En el Web, la propaganda est bien vista. De hecho, tener
un WebSite atractivo se est convirtiendo en una
obligacin para las empresas, sin importar su tamao.
Adems seguro que tu tienes algo que puedes compartir
con todos nosotros, ya sea una ancdota, cuento, chiste,
informacin o conocimientos sobre cualquier tema.
Hasta podras promocionarte a t mismo, tu empresa,
ciudad u organizacin preferida.
Personal:
Cuando publiques tu pagina Web permitiras a millones de
personas al rededor del mundo observar informacion
sobre ti.
Puedes:
19

 Mostrar tu curriculum vitae a empleadores

potenciales y hasta puedes incluir tu foto.
Mostrar informacion de interes: Muchas personas
usan la Web para mostar informacion sobre su tema
de interes, este puede ser dedicada a tu estrella de
cine, equipo deportivo o celebridad favorita.
Mostrar tus fotos favoritas: Algunos usan su pagina
Web para mostrar la ultima foto del bebe o la nueva
mascota de la familia.
Aprender una nueva destreza: Aprender a crear
paginas Web podria ser valioso en tu profesion actual
o futura.
Divertirte: Puedes crear tu pagina solamente por
diversion.
Comercial:
Una empresa puede poner paginas Web para informar al
publico sobre sus actividades, productos o servicios que
ofrece.
Compras: Las paginas Web permiten mostrar
descripciones y fotos de los productos y servicios que
ofrecen y hasta poner ordenes de compra.
Anuncios: Para mantener informado al publico sobre
nuevos productos, mejoras y noticias interesantes.
Soporte tecnico: Muchas empresas ponen a
disposicion metodos de contactar con su
departamento tecnico, para consultas o sugerencias.
Retroalimentacion de clientes: Se pueden poner
formularios que permiten al cliente manifestar su
opinion, lo que permite a la empresa mejorar su
producto o servicio.
Asuntos especificos:
Promocionar una organizacion: Puedes mostar
informacion sobre una organizacion o club al cual
perteneces, incluir sus metas y proximos eventos.
Compartir pasatiempos: Es posible usar la Web para
compartir informacion sobre su pasatiempo favorito
20

con gente de todo el mundo. Muchas personas visitan

las paginas de personas con intereses similares.
Compartir conocimientos: Muchos cientificos y
profesionales ponen su trabajo a dsposicion en la
Web. Si eres experimentado en cierta area en el que
el comun de las personas no estan familiarizados, o si
tienes informacion que puede ayudar a otros, puedes
poner esta informacion en la Web.
Crear un club de admiradores: Puedes crear tu propio
club de admiradores de celebridades, una estrella de
cine, TV, deportes, etc.
Entretener a tus visitantes: Puedes crear una pagina
Web para entretener, contar chistes, historias
graciosas, adivinansas, juegos, comentarios de
peliculas, etc.
Audiencia especifica:
Puedes disear tu pagina para atraer una audiencia
especifica. Esto reducira el numero de posibles visitantes,
pero quienes lo hagan probablemente regresaran
regularmente. Cuando disees paginas de este tipo,
asegurate de ser consecuente con el tema general para
mantener el interes del autor.
Audiencia general:
Puedes disear tu pagina para atraer una audiencia
general. Esto atraera muchos visitantes, pero la mayoria
de ellos visitara tu pagina una sola vez. Cuando disees
paginas para audiencia general, examina las estadisticas
de personas que usan la Web.
Estadisticas Web
Edad promedio: 33 aos
Sexo: 68% son hombres
Idioma: 88% hablan ingles
Ingresos: US $ 59,000 al ao
Educacion: 57% tienen secundaria completa
Nota: Estas estadisticas fueron compiladas por el Instituto
Tecnologa de Georgia en abril de 1996.
Pasos para publicar:
21

 Definir tema: De ser posible escoja un tema unico.

Metas: Defina las metas
Reunir contenido: Puedes escribirlo tu mismo,
escanearlo o copiarlo.
Vinculos: refiere direcciones de otras paginas de tema
afines.

Navegadores en Internet
Un navegador o explorador es un pasaporte para viajar
por la Word Wide Web. El viajar a un nuevo sitio en la red
puede ser una aventura interactiva, donde t puedes ir
seleccionando el contenido que quieres ver y or.
Hasta hace no mucho una docena de navegadores
competan para llevarlo a los cientos de miles de sitios
que forman la red. Pero despus de un duro ao de
batalla, todos usamos los dos ms importantes y hasta
muchos creen que no hay ms contendores.
Netscape Comunicator
Ya no es un simple navegador, ahora es un grupo de
aplicaciones que incluye el navegador, un lector de
noticias, correo electrnico (Meesenger), herramienta de
creacin de HTML (Composer) y caractersticas de
conferencias (Collabra). Para navegar puedes usar los
marcadores de libro, cache, historial. Fue el primero en
incorporar FRAMES (cuadros), PLUG-INS (adiciones) y
soporte para JAVA, adems de CHAT, MAIL, telefona. Tiene
ms tiempo en el mercado y ostenta el 75% de los
exploradores hoy usados. Precio: en su versin estndar
de US $ 59.00 en su versin Pro US $ 79.00
Microsoft Explorer 5.0
Yo no es un simple navegador ahora es un grupo de
aplicaciones que incluye el navegador, un lector de
noticias, correo electrnico (Outlook), herramienta de
creacin de HTML (FrontPad) y caractersticas de
22

colaboracin (Channel), conferencias (NetMeeting) y push

& pull (NetShow) Para navegar puede usar los sitios
favoritos, cache, historial. Tiene el 10% de los usuarios de
Internet, aunque gana terreno rpidamente debido a su
precio: Es gratis y viene con Windows 95, Plus, Office etc.
Tambin lo puedes bajar del servidor de Microsoft va
Internet.
NCSA Mosaic 2.1.1
Este fue el programa que inici todo este fenmeno de los
navegadores. El Centro Nacional de Aplicaciones de
Supercomputacin NCSA deliberadamente espera hasta
que las nuevas caractersticas sean estndares aceptados
antes de integrarlos en su navegador. Si quieres ver las
pginas que incorporan las tcnicas ms avanzadas usa
otro explorador.
OPERA 3.21
Este es un programa creado por una empresa Noruega
llamada Opera Software, el cdigo es muy compacto por lo
que es un navegador muy rpido.
Cello 1.01a
No hay indicios an de la prometida versin 2.0, pero el
Instituto de Informacin Legal de la Universidad de Cornell
an ofrece la versin 1.01a gratis. Es anticuado, sin apoyo
a JAVA, FRAMES etc.
SuperHighway Access 2
Incluye casi tantas caractersticas como los mejores pero
an no puedes almacenar los documentos de sesiones
previas. Disponible en Fontier Tech
Internet Chameleon 4.5
Es parte del NetManager para Windows 3.1 y 95, tiene
capacidad de llamada a 18 diferentes servicios de
Internet.

23

Mosaic in a Box
CompuServe (antes Spry) present en agosto del 95 esta
versin para Windows 95, pero desde esa fecha no se
actualiz ms.
Internet Works 1.0
Incluido en el servicio GNN de AOL (America OnLine) no es
comercial.
NetCruiser 2.1
Esta disponible en Netcom
Linx
Esta disponible en Linx
Buscadores en Internet
Navegar por el Web, una gran forma de perder el tiempo !
Sabes por qu ? Porque el 90% es basura.
Si quieres encontrar algo, tienes que buscarlo y navegar,
es la peor forma de intentarlo.
Directorios
Los directorios del Web como Yahoo, Magallan o A2Z en
Lycos, son como ndices por categoras tales como
deportes, computadoras etc. Una vez que encuentras el
tema que buscas, ya tienes algunos sitios para comenzar.
Fjate en las breves descripciones de cada uno para
analizar el sitio antes de ir a el. Adems, normalmente
llegars al home page lo que te dar un panorama claro de
dnde ests pisando.
Este mtodo es bastante bueno si el tema que buscas es
general y lo puedes clasificar, pero intil si lo que buscas
no es clasificable como 'repuestos electrnicos'.
Buscadores
Como Yahoo, AltaVista, InfoSeek, HotBot, DejaNews,
WebCrawler o Lycos. Uno le dice lo que quiere buscar y la
respuesta es todas las pginas que en su contenido
cumplen esa condicin. Aqu un consejo es probar la
misma pregunta en varios buscadores,
sorprendentemente obtendrs resultados completamente
24

diferentes. Piensa que cuanto ms especfica tu pregunta

ms especfico ser el resultado de la bsqueda, no te
preocupes por la redundancia, los sinnimos ayudan
mucho y elimina las preposiciones y artculos. (de, para, a,
y, el, la etc.)
Tambin son muy tiles los operadores booleanos...
Si obtienes muchos aciertos, especifica ms tu pregunta,
seguro que es demasiado vaga y si por el contrario tienes
muy pocos aciertos, aumntale sinnimos o trata de
eliminar alguna palabra irrelevante.
Metabsqueda
Son las que someten de forma automtica la misma
pregunta a varios buscadores y cruzando informacin
construyen una pgina. A este grupo pertenece la pgina
Web SavvySearch donde uno puede seleccionar los
buscadores a usar y el nmero de aciertos con un mximo
de 50 por buscador. Otras opciones son Arf de Bitsafe y
WebSeeker de ForeFront.
Asistentes
Que te ayudan a administrar las bsquedas ms
eficientemente, corriendo las mismas preguntas una y
otra vez y notificndote solo cuando encuentran algo
nuevo. Agunos ejemplos son: More Like This de Knowledge
Discovery, Internet FastFind de Symantec y WebCompass
2.0 de Quarterdeck.
Exploradores fuera de lnea
Una vez que encontraste las pginas que necesitabas, es
muy probable que quieras vigilarlas, pero sera una locura
entrar a todas ellas da tras da. Este tipo de software
chequea las pginas Web en busca de cambios, te informa
cuando los hay. En este rubro destaca FreeLoader 2.0
([Link] y PointCast
([Link] ambos a nuestro precio favorito =
gratis. Tambin tienes Smart Bookmarks 2.0 de FirstFloor
y WeseWire de Empirical Media.

25

Pagar por ver

Aunque va contra mis principios:) es una buena opcin.
InfoSage de IBM, Quate, Lexis-Nexis de Knight-Ridder o
Britannica Online de la Enciclopedia Britnica, te
proporcionan artculos bien investigados, noticias sobre
negocios, cotizaciones de bolsa, perfiles de compaas,
registros pblicos, archivos de leyes, bibliografas etc.
T llenas un formulario con los temas que te interesan y
ellos te envan por correo electrnico automticamente
todo el material del tema que te interesa de forma
automtica.
Operadores booleanos
Para realizar bsqueda en AltaVista, Excite, InfoSeek o
Lycos.
Simple ( )(AND)(&)
Combina trminos que deben de aparecer en cada uno de
las pginas de resultado. Buscar (falcon maltese), (falcon
AND maltese) o (falcon & maltese), daran el mismo
resultado, todas las pginas que contengan esas palabras
no necesariamente en ese orden ni juntas.
Exacto (")
Indica exactamente frases. Si no encierras la frase el
buscador asumir la frase como una lista de trminos por
separado.
Buscar ("read my lips") retornar las pginas que
contengan esa frase exactamente mientras que (read my
lips) busca pginas que contengan las palabras read, my y
lips, no necesariamente en ese orden ni juntas.
Incluir (+)
Palabra que debe aparecer en cada pgina del Web como
requisito indispensable.
Buscar (+falcon maltese peregrine) retornar solo las
pginas que contengan falcon y adems la palabra
maltese o peregrine.

26

Excluir (-)(NOT)(!)
Palabra que no debe aparecer en cada pgina del Web.
Buscar (-train "orient express") retornar las pginas que
contengan la frase 'orient express' pero no la palabra
'train'.
Buscar (bogart -casablanca), (bogart AND NOT casablanca)
o (bogart !Casablanca) entregan pginas que hacen
referencia a otras pelculas que no sean Casablanca.
OR (|)
Al menos una de las palabras debe aparecer en cada una
de las pginas de resultado.
NEAR (~)([])
Especifica dos palabras que no debern estar separadas
ms de 10 palabras entre ellas.
Buscar (hillary NEAR clinton), (hillary ~ clinton) o ([hillary
clinton]), entregarn pginas que contengan 'hillary and
bill clinton'.
Agrupar ()
Agrupa operadores.
Buscar: detective AND (marlow OR spade) entregar
pginas que se refieran a uno o ambos detectives.
Comodin (*)
Simboliza cualquier cantidad de caracteres.
Buscar (elvi*) devolver pginas que contengan Elvis,
Elvises, Elvira etc
Formateo de textos
Los comandos HTML son cdigos que se ponen alrededor
de las lneas de texto en forma de comandos, usando el
formato general:
<COMANDO> texto afectado </COMANDO>
para indicar al navegador como debe lucir cierta parte del
texto.
Lo primero que hay que tener en cuenta, es que al
presentar el documento se har caso omiso de los
27

espacios, tabulaciones y retornos de carro que se

encuentren en el texto fuente.
Mediante los comando HTML estratgicamente colocados
en el texto tu puedes determinar el estilo, tamao y color
que tendr la presentacin del documento final.
Nota: Los comandos HTML no son sencibles a
maysculas/minsculas. Si un elemento no es soportado
por el navegador, simplemente es ignorado y son
interpretados en orden de izquierda a derecha,
pudindose traslaparse entre ellos.
Ejemplo: normal negrita negrita itlica itlica normal
Texto normal
Lo primero que tenemos es el texto normal, entendiendo
como tal el que no tiene ninguna caracterstica especial y
est libre para que el asuario lo fomatee a su gusto desde
su navegador en el momento de visualizar. Al igual que en
cualquier procesador de texto se producirn los saltos de
lnea necesarios para mantener el texto dentro de la
ventana del navegador, dependiendo del ancho de la
ventana, tamao de letra etc.
Para definir un prrafo como normal no es necesario poner
ningn comando.
Salto de lnea <BR>
Con este comando fuerzas un salto de lnea simple, es
decir la siguiente lnea empieza en la lnea
inmediatamente inferior, respetando la misma sangra.
Esto es muy usado para rodear las imgenes flotantes y
puedes especificar el parmetro CLEAR= para indicar que
la lnea deber saltar hasta encontrar la condicin
adecuada.
<BR CLEAR=left>
busca una lnea que tenga libre el margen izquierdo
<BR CLEAR=right>
busca una lnea que tenga libre el margen derecho
<BR CLEAR=all>
28

busca una lnea que tenga ambos mrgenes libres.

Fin de prrafo <P>
Con este comando fuerzas un salto de lnea doble, es decir
dejando una lnea en blanco.

Especificar el parmetro CLEAR= indica que la lnea

deber saltar hasta encontrar la condicin adecuada.
<P CLEAR=left>
busca una lnea que tenga libre el margen izquierdo
<P CLEAR=right>
busca una lnea que tenga libre el margen derecho
<P CLEAR=all>
busca una lnea que tenga ambos mrgenes libres
Especificar el parmetro ALIGN= indica que la prxima
lnea estar alineada. Aqu es posible usar el cierre del
comando </P> para indicar el fin de alineado.
<P ALIGN=center> centra lnea entre ambos mrgenes.
<P ALIGN=right> corre la lnea al margen derecho.
<P ALIGN=justify> justifica la lnea entre ambos
mrgenes.
<P ALIGN=indent> indenta la lnea.
Adems se pueden usar el parmetro ID=nombre un
identificador de prrafo en lugar de usar el comando <A
NAME=#nombre> para hacer enlaces en la misma pgina.
Tambin se puede introducir el parmetro NOWRAP=off
usado para impedir el salto de lnea automtico.
29

Si queremos obtener mltiples lneas en blanco no basta

con repetir el comando <P>, sino que hay que combinarlo
con otro comando, por ejemplo con <BR>. As por ejemplo,
si queremos obtener cuatro lneas en blanco, pondramos
poner:
<BR><P><BR><P><BR><P><BR><P>
No producir saltos <NOBR>
Este comando es usado para obligar al navegador a no
producir saltos, a pesar de que corresponda, es decir si el
texto es largo se saldr por el lado derecho y ser
necesario usar la barra de desplazamiento horizontal del
visualizador para leerlo.
Aadir espacios &nbsp;
Al escribir el texto, si ponemos ms de un espacio en
blanco entre dos palabras observamos que el navegador
slo reconoce uno de ellos. Si queremos forzarle a que lo
haga, debemos usar el comando &nbsp; (non-breaking
space).
Tabulacin horizontal <TAB>
El comando TAB es usado cuando se quiere un control fino
posible la posicin horizontal. Para definir el tabulador
solo hay que poner el comando <:TAB ID=nombre> en el
sitio correcto como si fuera un TABulador y luego con el
comando <TAB TO=nombre> puedes llegar a ese sitio.
Ejemplo: <TAB ID=t1> <TAB TO=t1> sera la forma de
llegar a ese mismo punto.
Es fcil y todo queda alineado donde t quieres. No se te
desarregla nada...
Cada marca de TAB debe ser nica en el documento, su
nombre debe comenzar con una letra y puede estar
seguido de letras y nmeros. Una vez definido el TAB ser
vlido para el resto del documento.
Otra manera de usarlo es <TAB INDENT=n> donde n es
medio punto tipogrfico.
Tambin se puede hacer alineamientos:
<TAB ALIGN=left>
30

El texto hasta la prxima marca <TAB>, <BR> o <P>

quedar alineado a la izquierda (default).
<TAB ALIGN=center>
Centrado respecto a la marca TAB.
<TAB ALIGN=right>
Alineado a la derecha de la marca TAB o si no se puso el
parmetro TO alineado respecto al margen derecho de
la pgina.
<TAB ALIGN=decimal>
Alineado respecto al separador decimal que por omisin
es el . pero puedes cambiarlo con el atributo DP=, por
ejemplo.
NOTA: Si el alineamiento especificado causa un traslape
de texto, para evitarlo el navegador tratar el TAB como
un simple caracter de espacio.
Texto formateado
Hay dos estilos de comandos HTML para formateo de
texto:
Lgicos:
Los cuales dependen de las especificaciones que cada
usuario tenga en su navegador, como son: FONT SIZE
relativos, Hn, DFN, EM, CITE, CODE, KBD, SAMP, STRONG
y VAR.
Fsicos:
Que son directos, osea obligan al navegador a funcionar
de cierta manera, por lo que estn siendo cada vez
menos usados y es posible que en prximas
especificaciones del estndar HTML no figuren ms,
estos son: B, I y, TT y FONT SIZE absolutos.
Cada uno de estos comandos es usado para formatear
texto, es decir para indicarle al navegador como deber
31

mostrar el texto encerrado entre los comandos. Los

comandos son interpretados de izquierda a derecha y
pueden solaparse, por ejemplo:
normal negrita negrita-itlica itlica normal
1. Tamao de letra base <BASEFONT SIZE...>
Este comando cambia el tamao de la letra base, que
afecta a todos los comando <FONT SIZE...> relativos. Por
default se usa 3 y el rango de valores permitidos van de 1
a 7.
Sintxis: <BASEFONT SIZE=n>
2. Estilo de letra <FONT>
Con este comando genrico se gobierna los estilos de
texto osea: tipos, tamaos y colores de texto, usando una
serie de parmetros, como:
2.1 Tamao de letra - SIZE
Mediante este parmetro se puede variar el tamao de las
letras a cierto texto en particular. Por default est en 3 y
es determinado por el comando <BASEFONT SIZE...>. Se
permiten valores desde 1 a 7. Tambin es posible hacer
referencias relativas usando el smbolo + o - delante del
valor especificado.
Esto est en el tamao 1
Esto est en <BASEFONT SIZE ...> + 2
Ejemplos: 123 456 765 432 1
2.2 Colores de letras - COLOR
Mediante este parmetro es posible cambiar el color a
cierta porcin del texto. Se puede especificar la trica
rrggbb en hexadecimal o usar uno de los 16 colores
predefinidos:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.
Ejemplos: FONT COLO RS
Nota: Estos colores predefinidos tambin los puedes usar
en los atributos BGCOLOR, TEXT, LINK, y VLINK en
32

<BODY>. Una buena ayuda para la seleccin de colores

con "#rrggbb" la puedes encontrar en: Tabla de Colores
2.3 Tipos de letra - FACE
Con este atributo se pueden definir el tipo de letra en el
que ser mostrado cierta porcin de texto en el
documento. El tipo de letra deber estar instalado
previamente en el Windows del cliente para ser mostrada,
por lo que es posible especificar tipos alternativos en un
mismo comando. Si no tiene ninguno de los tipos
especificados se mostrar en el texto por omisin, que es
tipo Times New Roman.
Sintxis: FACE=nombre [,nombre] [,nombre]
Este texto ser mostrado en ARIAL y si no tiene el cliente
ese tipo de letra usar LUCIDA SANS o TIMES ROMAN,
segn el tipo de letra instalado en el Win del cliente.
Ejemplos:
Times New Roman
Arial
Comic Sans MS
Script
(WingDings)
3. Estilo de ttulos <Hx>
Es un conjunto de formatos que incluyen: atributo de
letras (negrita, itlica), tamao (muy grande, grande,
normal) y adems aade un fin de prrafo, es decir obliga
un salto dejando una lnea en blanco.
Tpicamente se definen 6 niveles de titulo, as:
Esto es <H1>
Negrita, letra muy grande, centrada. Una o dos lneas en
blanco sobre y bajo el ttulo.
Esto es <H2>
Negrita, letra grande, flush-left. Una o dos lneas en
blanco sobre y bajo el ttulo.

33

Esto es <H3>
Itlica, letra grande, ligeramente indentado desde el
margen izquierdo. Una o dos lneas en blanco sobre y bajo
el ttulo.
Esto es <H4>
Negrita, letra normal, mayor indentacin que H3. Una
lnea en blanco sobre y otra bajo el ttulo.
Esto es <H5>
Itlica, letra normal, indentado como H4. Una lnea en
blanco sobre el ttulo.
Esto es <H6>
Negrita, indentado igual que el texto normal, ms que H5.
Una lnea en blanco sobre el ttulo.
Adems es posible asignar el parmetro ALIGN= que
puede tomar los valores left, center o right.
4. Otros
Comando
<B>
<STRONG
>
<I>
<EM>
<U>
<SUB>
<SUP>
<BIG>
<SMALL>
<Q>
<BLINK>
<VAR>
<TT>

Muestra
Esto est en negrita
Esta letra es gruesa
Itlica
Esto est enfatizado
Subrayado
H2O
a2=b2+c2
Letra grande
Letra pequea
Esto est entre comillas
Texto parpadeante, solo Netscape
Para mostrar una variable
Letra tipo teletipo

34

5. Centrar objetos <CENTER>

Usado para centrar cualquier cosa entre los mrgenes
izquierdo y derecho. Este comando es muy poco usado ya
que muchos comandos como P, Hx, HR, etc tiene un
atributo de alineado. Sin embargo es la nica forma de
centrar con otros comandos como: IMG y TABLE.
Este texto est centrado
NOTA: Tambin se puede centrar con los comandos <P> o
<DIV>.
6. Lnea horizontal <HR>
Define una lnea horizontal del ancho de la pgina o t
puedes definir su ancho con WIDTH, grueso con SIZE,
alineamiento con ALIGN y color con COLOR.
Este comando causa un fin de prrafo, es decir obliga un
salto a la prxima lnea.
WIDTH=nmero|porcent%. Largo en pixels o % de ancho
pantalla
SIZE=nmero. Grosor de la lnea en pixels
ALIGN=left|right|center (omisin). Posicin de la lnea
respecto a los mrgenes.
COLOR=color|#rrggbb. Color de la lnea
NOSHADE Sin sombra
Ejemplo 1: <HR>
Ejemplo 2: <HR WIDTH=80%>
Ejemplo 3: <HR WIDTH=80% SIZE=12 ALIGN=right
COLOR=red>
Ejemplo 4: <HR WIDTH=50% SIZE=20 ALIGN=left
COLOR=navy NOSHADE>
7. URL base <BASE>
Con este comando se puede especificar el URL que se
usar como la direccin por omisin para las direcciones
RELATIVAS.
Con HREF especificas el URL a definir igual que el comando
35

<A>.
Con TARGET asocias una ventana. Al hacer el clic si no
est abierta aun dicha ventana esta se abre y se muestra
en ella el enlace.
Ejemplo: <BASE HREF=[Link]
Notas finales:
Es importante mencionar que los comandos HTML no
diferencian maysculas y minsculas, osea que puedes
escribir los comandos y parmetros con cualquiera o con
una mezcla de ambas, si lo prefieres.
Si un navegador no puede interpretar un comando y/o
parmetro, simplemente lo ignora, es decir no produce
ningn tipo de error.
Asimismo las lneas en blanco y los espacios son ignoradas
por los navegadores, por lo tanto, para dejar una lnea en
blanco debes usar <P>.
Tambin quiero hacerte notar que no todos los
navegadores presentan de la misma forma las pginas y la
nica manera de ver realmente el resultado es probando.
Por ejemplo algunos solapes de comandos no funciona en
todos los navegadores y en otros s, por lo que te
recomiendo evitar hacerlo en lo posible, unos ejemplos:
<H1><A HREF="...">...</A></H1> -->funciona
<A HREF="..."><H1>...</H1></A> --> no funciona
<LI><B>... --> funciona
<LI><H1>...</H1> --> no funciona
<H1><LI>...</H1> --> no funciona

Comando de formateo de bloques

Son usados para formatear bloques enteros dentro del
documento, los debes usar dentro del <BODY> y los
principales son:
1. Texto pre-formateado <PRE>
Este comando es usado para mostrar bloques de texto
pre-formateado en un tamao de letra fijo. El parmetro
WIDTH=40|80|132 especifica el nmero mximo de
36

caracteres por lnea, si no se incluye este parmetro se

asumir 80 caracteres por lnea.
El texto preformateado se usa cuando quieres que en la
presentacin final del documento se respeten los espacios
y retornos de carro que pusiste en el texto fuente.
Adems se utilizar un tipo de letra de espaciado fijo
(monoespacio), parecido al de una mquina de escribir,
ms pequeo que el del texto normal. Este estilo de texto
puede ser adecuado, por ejemplo, para un grfico en ASCII
,-~~-.___.
/| '
\
( )
.0
\_/-, ,----'
===
//
/ \-'~; /~~~~(O)
/ __/~| /
|
==(_______| (________|
Este texto fue pre-formateado.
Tambin puedes usar el comando <PLAINTEXT> si es que
el resto del documento ser del tipo preformateado, ya
que este comando no tiene la opcin de cerrado.
2. Alinear texto <DIV>
Texto alineado a la izquierda,
logrado va el comando <DIV ALIGN=left>.
Texto al centro,
logrado va el comando <DIV ALIGN=center>.
Texto alineado a la derecha,
logrado va el comando <DIV ALIGN=right>.
Texto alineado por ambos mrgenes, respetando los saltos
de lnea impuestos con el comando <BR> y los fines de
prrafo va el comando <P> que se hicieran. Es importante
notar la elegancia de esta forma de alineacin, muy usada
en los procesadores de palabras. Este efecto fue logrado
va el comando <DIV ALIGN=justify>.
Nota: Tambin puedes centrar usando los comandos
<CENTER> o <P ALIGN=center> y alinear a la derecha con
el comando <P ALIGN=right>.
37

3. Indentar texto <DIR>

Es posible indentar el texto como lo est este prrafo
sin problema de cambio de lnea BR o fin de prrafo P.
Con doble DIR simplemente corre dos veces
Con triple DIR simplemente corre tres veces
4. <ADDRESS>
Especifica una direccin o firma de autor, normalmente en
el principio o final del documento, tpicamente en italicas
e indentadas. Las direcciones de correo electrnico se
suelen marcar con este comando.
All That Jazz BBS
Sysop: Javier Geigner (Bull)
Mdem: 438-1493
5. Texto tomado de otra fuente <BLOCKQUOTE>
Este comando es usado para mostrar texto tomado de otra
fuente. Tpicamnete se usa con sangra en ambos
mrgenes y en itlica. Adems este formato causa una
rotura de prrafo y un espacio despus de este texto para
resaltarlo.
Ms vale un archivo disponible que 100 con password.
Tiburn en ATJ BBS
6. Definicin <DFN>
Este texto est como una definicin.
7. Cita textual <CITE>
Tpicamente se usa para formatear un texto con letra
distinta para que el lector note que es una cita.
8. Texto de usuario <KBD>
Texto en caracteres monoespacio (que todos ocupan el
mismo espacio, osea no es espacio proporcional)
9. Cdigo <CODE>
Es un ejemplo de cdigo en un tipo de fuente
monoespacio.
38

10. Ejemplo <SAMP>

Secuencia literal usando fuente monor espaciada.
11. Letra tipo mquina de escribir <TT>
Para hacer una cita textual dentro de nuestro documento,
se puede utilizar la directiva <blockquote> es un tipo de
letra similar al de una mquina de escribir.
12. Comentario <!-- ... -->
Usado para poner un comentario en un documento HTML
que no ser visible desde el usuario normal con un
visualizador, solo en el cdigo fuente. Tipo REM en un
BATCH. Para poner un comentario en un documento HTML,
es decir, una aclaracin que no aparece en la presentacin
final del documento, se encierra el texto que formar el
comentario entre los smbolos <!-- ... -->. Por ejemplo, un
caso tpico podra ser:
<!-- Modificado por Tiburn el mircoles 16 de abril -->
Caracteres especiales en HTML
Los caracteres entre dos elementos en los documentos
HTML representan texto. Los documentos HTML son
codificados usando caracteres especiales. El texto por su
parte esta restringido al US ASCII (ISO 8859-1) que consta
de 25 caracteres de control 93 caracteres graficos y 8
caracteres no asignados.
Caracteres de control
Son caracteres no imprimibles que son usados tipicamente
para comunicaciones, formateo de efectos, controlar
dispositivos y como separadores de informacion.
En aplicaciones SGML el uso de caracteres de control esta
limitado para minimizar los cambios necesarios para
intercambios entre redes de diversas plataformas y
sistemas operativos.
En HTML solo se usan 3 caracteres de control:
Tab Horizontal (HT) ASCII 9
Retorno de carro (CR)
39

 Salto de linea (LF)

El HT es interpretado como espacio entre palabras, con la
sola excepcion del texto preformateado en el que el HT
representa un salto de 8 columnas.
Caracteres especiales
Hay ciertos caracteres que tienen un significado especial
en HTML, ellos son:
El espacio, que representa la separacion de dos palagras,
el sitio donde se puede cortar una linea y los simbolos <,
>, & y ".
Es evidente que estos smbolos no los podremos usar
directamente en un texto HTML, ya que dichos smbolos
tienen un significado en HTML y es necesario diferenciar
claramente cundo poseen ese significado y cundo
queremos que aparezcan literalmente en el documento
final. Por ejemplo, como ya sabemos, < indica el comienzo
de una directiva y por ello, si queremos que aparezca en el
texto como tal, tendremos que dar un rodeo escribiendo
algo que no de lugar a confusin.
Para mostrar estos caracteres como texto sera necesario
usar un formateo especial que debera siempre empezar
con & y terminado con ;
Hay dos maneras de representar un caracter segun la
tabla ISO 8859-1:
Por su nombre. ej: &lt;
Por su numero. ej: &#60;
tabla1
Clyph
Name Syntax Descripcion
<
lt
&lt;
Simbolo menor que
>
gt
&gt;
Simbolo mayor que
&
amp &amp; Ampersand
"
quot &quot; Doble comilla
Nota: Los comandos en general no son sencibles a
mayusculas/minusculas pero si lo son los comandos tras &
es decir &LT; no es lo mismo que &lt;
El otro caso especial se da cuando en un texto HTML se
quiere escribir ciertas letras en nuestro idioma:
40

1. Para acentuar las vocales, usamos el acento agudo el

que se obtiene aadiendo el sufijo acute a la vocal sin
acentuar.
2. Para el diresis se usa uml tras una o o u.
3. Para ponerle el sombrerito (virgula) a la se usan
tilde.
4. A falta de algo mas evidente, tenemos que usar el
valor numrico para representar cualquier otro
caracter segun la tabla ISO 8859-1.
5. Para separar dos palabrar pero prohibir que se
separen se usa nbsp, es decir las palabras siempre
quedaran en la misma linea. (&#137)
La manera mas practica de solucionar este problema es no
preocuparse por esta limitacin y escribir literalmente los
caracteres afectados y posteriormente usar un software
de conversion a codigo HTML que haga el trabajo por
nosotros o en todo caso usaremos el comando buscar y
reemplazar todo de nuestro editor de textos.
Tabla de caracteres especiales
Segun la tabla ISO 8859-1 se puede representar los todos
los caracteres validos en HTML con el formato &#n; donde
n es un numero que segun la tabla representa un caracter.
Solo es posible usar los codigos 9, 10 y de 32-126 y 161255 ojo no estan permitidos del 0-8, 11-31 ni 127-160.
Nota: Ojo que no es el ASCII extendido usado comunmente
en nuestros teclado o impresoras compatibles con Epson.
Son direferentes los codigos entre el 161-255.
tabla2

Synta Syntax
x

Descripcion

#09

Horizontal tab

#10

Line feed

Muestr
a

41

#32

Space

#33

Exclamation mark

Quotation mark

"

#35

Number sign

#36

Dollar sign

#37

Percent sign

Ampersand

&

#39

Apostrophe

'

#40

Left parenTDesis

#41

Right parenTDesis

#42

Asterisk

#43

Plus sign

#44

Comma

#45

Hyphen

#46

Period (fullstop)

#47

Solidus (slash)

#4857

Digitos 0-9

#58

Colon

#59

Semi-colon

Less TDan

<

#34

#38

#60

quot

amp

lt

42

#61

Equals sign

Greater TDan

>

#63

Question mark

#64

Commercial at

#6590

Letras A-Z

#91

Left square bracket

#92

Reverse solidus
(backslash)

#93

Right square bracket

#94

Caret

#95

Horizontal bar

#96

Acute accent

#97122

Letas a-z

#123

Left curly brace

#124

Vertical bar

#125

Right curly brace

#126

Tilde

#161

Inverted exclamation

#162

Cent sign

#163

Pound sterling

#62

gt

43

#164

General currency sign

#165

Yen sign

#166

Broken vertical bar

#167

Section sign

#168

Umlaut (dieresis)

#169 copy

Copyright

#170

Feminine ordinal

#171

Left angle quote, guillemot

left

#172

Not sign

#173 nbsp
#174 reg

Soft hyphen (nonbreaking)

Registered trademark

#175

Macron accent

#176

Degree sign

#177

Plus or minus

#178

Superscript two

#179

Superscript TDree

#180

Acute accent

#181

Micro sign

#182

Paragraph sign

#183

Middle dot

44

#184

Cedilla

#185

Superscript one

#186

Masculine ordinal

#187

Right angle quote,

guillemot right

#188

Fraction one-fourTD

#189

Fraction one-half

#190

Fraction TDree-fourTDs

#191

Inverted question mark

#192 Aacute
#193 Agrave

Capital A, acute accent

Capital A, grave accent
Capital A, circumflex
accent
Capital A, tilde
Capital A, dieresis or
umlaut mark
Capital A, ring
Capital AE dipTDong
(ligature)
Capital C, cedilla
Capital E, acute accent

#194 Acirc
#195 Atilde
#196 Auml
#197 Aring
#198 AElig
#199 Ccedil
#200 Eacute
Egrave
#201 Capital E, grave
accent
#202 Ecirc
#203 Euml
#204 Iacute

Capital
accent
Capital
umlaut
Capital

E, circumflex
E, dieresis or
mark
I, acute accent

45

#205 Igrave
#206 Icirc
#207 Iuml
#208
#209
#210
#211

ETD
Ntilde
Oacute
Ograve

#212 Ocirc
#213 Otilde
#214 Ouml

Capital
Capital
Capital
umlaut
Capital
Capital
Capital
Capital
Capital
accent
Capital
Capital
umlaut

I, grave accent

I, circumflex accent
I, dieresis or

mark
ETD, Icelandic

N, tilde

O, acute accent

O, grave accent

O, circumflex

O, tilde
O, dieresis or
mark

#215

Multiply sign

#216 Oslash
#217 Uacute
#218 Ugrave

Capital O, slash
Capital U, acute accent
Capital U, grave accent
Capital U, circumflex
accent
Capital U, dieresis or
umlaut mark
Capital Y, acute accent
Capital TDORN, Icelandic
Small sharp s, German (sz
ligature)
Small a, acute accent
Small a, grave accent
Small a, circumflex accent
Small a, tilde
Small a, dieresis or umlaut
mark
Small a, ring
Small ae dipTDong
(ligature)
Small c, cedilla

#219 Ucirc
#220 Uuml
#221 Yacute
#222 TDORN
#223 szling
#224
#225
#226
#227

aacute
agrave
acirc
atilde

#228 auml
#229 aring
#230 aelig
#231 acedig

&acedi
46

#232 eacute
#233 egrave
#234 ecirc
#235 euml
#236 iacute
#237 igrave
#238 icirc
#239 iuml
#240
#241
#242
#243
#244
#245

eTD
ntilde
oacute
ograve
ocirc
otilde

#246 ouml
#247
#248
#249
#250
#251

Small
Small
Small
Small
mark
Small
Small
Small
Small
mark
Small
Small
Small
Small
Small
Small
Small
mark

g;
acute accent

grave accent

circumflex accent
dieresis or umlaut

e,
e,
e,
e,
i,
i,
i,
i,

acute accent

grave accent

circumflex accent
dieresis or umlaut

eTD, Icelandic
n, tilde
o, acute accent
o, grave accent
o, circumflex accent
o, tilde
o, dieresis or umlaut

Division sign
oslash
uacute
ugrave
ucirc

#252 uuml
#253 yacute
#254 TDorn
#255 yuml
trade

Small
Small
Small
Small
Small
mark
Small
Small
Small
mark

o,
u,
u,
u,
u,

slash

acute accent

grave accent

circumflex accent
dieresis or umlaut

y, acute accent

TDorn, Icelandic

y, dieresis or umlaut

TradeMark

47

Conexiones de hipertexto o enlaces

Adems de los muchos estilos y capacidades de presentacin de
texto que nos ofrece HTML para estructurar el documento en s,
disponemos del comando <A> que nos permite definir relaciones
entre diferentes objetos y estructurar todo un conjunto de
documentos para crear una unidad lgica. La facilidad para definir
este tipo de enlaces es una de las razones de la potencia y
versatilidad de HTML.
Los enlaces en HTML se expresan rodeando con el comando
<A>...</A> el objeto, que puede ser una palabra, frase o imagen,
la cual nos enlaza con otra seccin del mismo documento, otro
documento HTML, mostrar una texto plano (TXT), una imagen
(GIF o JPG), un sonido (AU o WAV), un video (AVI), o cualquier otro
objeto que pueda ser manejado desde nuestro Windows. Adems
se puede enviar mensajes de corre y transferir archivos
empaquetados (ZIP).
No importa que tan cerca o lejos est el enlace, siempre sera
igual de sencillo ir a l. Si queremos referirnos a otro lugar del
mismo documento solo hay que poner HREF=#top o el nombre
de un destino predefinido con el parmetro <A NAME=> o el
parmetro ID= introducido en muchos comandos como <P>,
<TAB>, etc. Si se trata de otro documento en el mismo directorio
usaremos HREF=[Link], si se trata de otro directorio o
servidor solo hay que incluir la direccin completa URL incluyendo
el protocolo.
NOTA: Despus de hacer clic en un enlace, el color del mismo
permanece modificado durante 24 horas, para recordarte que el
enlace ha sido visitado.
1. Anclas <A>...</A>
Este es un comando usado para establecer una conexin de
hypertexto o enlace. Acepta muchos parmetros opcionales, pero
solo es obligatorio el HREF= o NAME= segn el caso.
1.1. Ancla destino - NAME
Si est presente permite a esta ancla ser destino de una conexin
de hypertexto, al cual debe ser referido con la cadena
48

especificada, que debe ser nica en el documento (no debes

repetir el nombre).
Sintxis: <A NAME=nombre>titulo</A>
Nota: Tambin es posible identificar un prrafo con <P
ID=nombre>, funciona igual.
1.2. Ancla de salida - HREF
Si este parmetro est presente, el texto entre <A>... </A> es un
enlace y cuando es seleccionado desde el visualizador, mueve el
puntero hacia otro documento u otra parte del mismo documento,
cuya localizacin est especificada con una direccin URL.
Puedes especificar direcciones URL relativas, es decir las que
estn referidas al directorio en uso por el documento actual, en
cuyo caso no es necesario especificar protocolo. Tambin se
puede especificar URL absolutas, es decir dando el protocolo,
nombre del servidor y luego ruta completa de ubicacin y nombre
del documento.
Ejemplo 1: <A HREF=#top>Arriba</A>
En este ejemplo un clic en Arriba nos lleva a la parte superior de
este mismo documento.
Ejemplo 2: <A HREF=[Link]>Referencias</A>
En este ejemplo un clic en Referencias nos presentar el
documento "[Link]" que se encuentra en el mismo directorio.
Ejemplo 3: <A HREF=../peru/[Link]>Lima-Per</A>
Aqu mostramos una direccin relativa, un clic en Lima-Per nos
presentar el documento "[Link]" que se encontrara en otro
directorio.
Ejemplo 4: Consulta <A HREF=[Link] para
ms informacin.
Aqu mostramos una direccin URL absoluta, un clic en el objeto
definido como ATJ, te lleva al documento "[Link]" localizado en
la ruta "c:\wc" localmente en la PC del cliente.
Ejemplo 5: <A HREF=[Link]#Mas>M</A>
En este ejemplo nos referimos a una posicin especfica sobre el
documento "[Link]" que contiene por ejemplo una serie de
definiciones y un clic en el objeto "Mas" te lleva a esa ancla es
decir donde se defino el ancla <A NAME="M">Letra M</A>
Pero hay muchas maneras de hacer referencia incluso a otros
objetos, ej:
49

HREF=[Link]
Hace una conexin con otro documento localizado en la PC
cliente.
HREF=[Link]
Hace una conexin con otro documento localizado en el mismo
servidor.
HREF=[Link]
Hace una conexin "anonymous" con un sitio FTP.
HREF=gopher://...
Hace una conexin a un servidor gopher.
HREF=telnet://...
Hace una conexin va telnet a un servidor para correr una
aplicacin externa.
HREF=[Link]
Permite dejar un mensaje a una direccin de mail.
Ejemplo 6: <A HREF=[Link] de
sugerencias</A>
En este ejemplo activamos la opcin de correo.
TITLE Este atributo es solo informativo, si est presente nos
informa sobre el ttulo del documento cuya direccin est definida
por el atributo HREF, pero esta cadena debe ser nica en el
documento.
Una razon para esto es que el visor deber mostrar el ttulo del
documento antes de jalarlo cuando t apuntas una determinada
ancla (es el rectangulito de texto que normalmente se le conoce
como help sensitivo) y el otro motivo es para que el usuario sepa
que no se trata de un texto, sino de un grfico o men gopher.
Este parmetro es soportado solo por Mosaico por ahora
Sintxis: <A HREF=[Link] TITLE>Aqu</A>
REL o REV Estos parmetros dan la relacin entre el hipertexto y
el ancla destino y viceversa.
50

Ejemplo: REL=X REV=X

URN Si est presente especificar el nombre de la fuente para el
doc destino.
METHODS Este parmetro da informacin sobre la funcin que el
usuario obtendr con este objeto. Por ejemplo para especificar
que es un cono.
TARGET Los navegadores modernos pueden manejar ms de una
pgina HTML a la vez, cada una en una ventana, con este
atributos consultas si la respectiva ventana est abierta, si no es
as la abre en ese momento.
Ejemplo: <A HREF="[Link]" TARGET="window_name">Click aqu
para abrir una nueva ventana</A>
2. Enlaces con otros objetos
Se puede hacer enlace con cualquier otro objeto soportado por el
navegador, es decir imgenes, sonido, video...
Ejemplo 1: <A HREF=[Link]>Ver el archivo texto plano</A>
Un clic en ver archivo texto plano me mostrar el contenido del
archivo texto. Muy poco usado porque comparado al HTML es
muy poco atractivo.
Ejemplo 2: <A HREF=[Link]>Accin</A>
En este ejemplo cuando haces clic en la palabra Accin se
mostrar "[Link]"
Ejemplo 3: <A HREF=[Link]><IMG SRC=[Link]></A>
Se muestra la imagen "[Link]" y cuando hagas clic se mostrar
la imagen "[Link]", un buen mtodo para dejar al usuario la
decisin de ver o no una imagen ms detallada que demorar en
cargar. Es normal en este caso la sea en realidad la misma
imagen en dos resoluciones o tamas distintos.
Ejemplo 4: <A HREF=[Link];>Toca</A>
Un clic en la palabra Toca sonar el archivo "[Link]".
Ejemplo 5: <A HREF=[Link]>Win</A>
En este ejemplo cuando haces clic en la palabra Win vers el
video "[Link]".
Ejemplo 6: <A HREF=[Link]>DEMO de HTML</A>. En este
ejemplo cuando haces clic en DEMO de HTML bajars este archivo
demo.

51

Imgenes en lnea
Ya hemos explicado como se puede hacer un enlace a una imagen
va el comando A, con el que se presenta una imagen en una
nueva ventana y no sobre el mismo documento HTML.
Ejemplo: <A HREF=[Link]>Logo de UAP</A>
En este ejemplo cuando haces clic en la palabra Logo de UAP se
muestra la imagen "[Link]" en una nueva ventana.
Imgenes <IMG>
Este comando es usado para incluir una imagen en un documento
HTML. Las imgenes pueden ser del tipo GIF de hasta 256 colores
o tipo JPG de hasta 16 millones de colores.
Sintaxis: <IMG SRC=[Link]>
El parmetro SRC identifica el archivo a mostrar y se usa igual
que HREF en el comando A.
Esto pone a nuestra disposicin una gran flexibilidad, ya que
podemos complementar el contenido de nuestro documento tanto
con imgenes que se encuentren disponibles en nuestro servidor
de Web como con una imagen situada en otro servidor. Pero tenga
cuidado de que se trate de material de dominio pblico o de
obtener el permiso respectivo o tendr problemas con INDECOPI.
Existe alguna limitacin respecto a los formatos grficos que los
visualizadores pueden mostrar sin problemas. Los formatos
fundamentales son: GIF y JPG, que cualquier navegador debera
poder mostrar directamente sobre nuestro documento. Si usamos
otro formato diferente, lo ms probable es que cuando un cliente
est accediendo al documento, su navegador no comprenda ese
formato y se tenga que solicitar la ayuda de otro programa, con lo
cual al final la imagen no se insertar en el lugar estratgico de
nuestro documento, sino que aparecer en otra ventana diferente
y todo el asunto pierde su encanto.
SRC: Parmetro obligatorio que indica el URL (o ruta/nombre) de
la imagen a mostrar. Su sintaxis es idntica a HREF
ALT: Es un parmetro opcional para indicar un texto alternativo
en el modo no grfico (ejemplo: Lynx, antiguo navegador que slo
trabaja con texto) o cuando el cliente tenga desconectada la
52

presentacin de imgenes por razones de velocidad. Adems en

los navegadores modernos este texto aparece como un recuadro
de ayuda del men de Windows 95.
ALIGN:Este es un parmetro opcional usado para alinear la
imagen respecto al texto que la acompaa en la misma lnea
convirtindola en lo que se llama una imagen flotante. Hay dos
tipos bsicos de alineacin:
Vertical:
TOP, MIDDLE y BOTTOM.
Horizontal:
LEFT, RIGHT, TEXTTOP, ABSMIDDLE, BASELINE y ABSBOTTOM.
Nota: Debo tener presente que para alinear una imagen en
nuestra pgina tambin se debe usar el comando <P
ALIGN=>...</P>, <CENTER>..</CENTER> o meter la imagen en
una tabla.
VSPACE y HSPACE: Para las imgenes flotantes, las que van
rodeadas de texto, estos parmetros controlan el espacio vertical
y horizontal entre la imagen y el texto a su alrededor.
WIDTH y HEIGHT: Este parmetro opcional fue incluido para
mejorar la velocidad de presentacion de las imagenes. Ocurre que
si no es proporcionado este atributo el navegador se ve obligado
a bajarse toda la imagen antes de poder presentar partes de ella,
debido a que hasta el final no conocera su tamao real.
En los navegadores modernos tambien se usa estos datos como
la escala de la imagen (es decir que puedes determinar el tamao
en el que la imagen se presentara). Para prevenir deformaciones
de la imagen se incluyo el parametro "aspect ratio" es decir que
en realidad la imagen crecera en alto y ancho en forma
proporcional hasta que se cumpla uno de los parametros, bien
WIDTH o HEIGHT.
BORDER: Permite definir el grosor del borde o recuadro en la
forma no grfica, aunque algunos navegadores tambin lo toman
como borde de imagen.
Nota: Si pones BORDER=0 no obtendrs ningn borde, lo que
puede confundir a algunos navegadores y desfigurar toda la
pgina.
53

LOWSRC: Este parmetro te permite mostrar una imagen,

digamos, en dos etapas: una primera imagen de baja resolucin y
despus se carga la segunda imagen en resolucin ms alta.
Ejemplo: <IMG SRC=[Link] LOWSRC=[Link]>
Los navegadores que no reconozcan LOWSRC simplemente lo
ignoran y presentarn de frente la especificada en SRC.
Cualquier tipo de imagen GIF (86a, 89a, normal, interlazada,
transparente o animada) y JPEG, puede ser combinada
libremente.
Si las imgenes no son del mismo tamao, la segunda (SRC) se
rescata al tamao de la primera (LOWSCR)
Resumen de ejemplos
Ejemplo 1: <IMG SRC="[Link]" ALT=Icono ALIGN=middle>
Se muestra la imagen "[Link]" o el texto "Icono" si el
navegador no es capaz de mostrar la imagen, alineando una lnea
de texto en el centro de la imagen.
Ejemplo 2: <A HREF=[Link]>Foto</A>.
Un clic en la palabra Foto muestra la [Link] en una nueva
ventana.
Ejemplo 3: <A HREF=[Link];><IMG SRC=[Link]></A>.
En este caso la imagen es presentada y un clic sobre ella nos
lleva al documento "[Link]"

[Link]
Ejemplo 4: <A HREF=[Link]><IMG SRC=[Link]></A>
En este caso se muestra la imagen "[Link]" y un click sobre ella
nos mostrar la imagen "[Link]" en una nueva ventana.
Ejemplo 5: <IMG SRC=[Link] LOWSRC=[Link]>
Si el navegador no reconoce el parmetro LOWSRC mostrara de
frente la imagen "[Link]", si conoce el parmetro muestra la
imagen "[Link]" y un click sobre ella nos mostrar la imagen
"[Link]" en el mismo recuadro, es decir que si las imgenes
no son del mismo tamao, la segunda imagen, osea "[Link]"
se reescala al tamao de la primera, osea "[Link]".
54

Comentarios finales
Cuando vas navegando por el Web, vers en ocasiones que todo
se detiene. Esto es algo que por desgracia ocurre muy a menudo
y el causante podra ser: conexiones de la red defectuosas,
servidores lentos o exceso de trfico y no nos queda ms remedio
que soportar.
Pero hay una causa particularmente irritante y es que hayamos
ido a parar a una pgina con una imagen gigantesca o demasiado
recargada de imgenes, sonido y vdeo, lo que se traduce en
demasiados KBytes que cargar.
Como referencia, una imagen no debe pasar de 50 KB, aunque
cuanto ms pequea mejor.
Tampoco conviene que el tamao de la imagen en la pantalla sea
mayor a unos 400x400 pixeles, para no obligar al usuario a tener
que desplazarla con los cursores.
Hay varias maneras de evitar caer en esta trampa:
Reducir el tamao de la imagen con un programa grfico
(ver recomendaciones ms adelante). Esto har que haya
menos pixeles que almacenar y por lo tanto menos kilobytes
que cargar.
Reducir el nmero de colores usados en la imagen. Una
imagen GIF puede tener un mximo de 256 colores, pero
podemos a veces reducir este nmero. Por ejemplo, se
puede conseguir un logo atractivo para encabezar las
pginas con slo dos colores o en todo caso 16 colores.
Retocar la imagen: El formato GIF comprime la imagen
buscando las secuencias repetidas en los datos y
abrevindolas. Esto quiere decir que las zonas grandes de un
slo color se comprimen muy bien, al contrario de las que
tienen muchos tonos o degrads. De manera que es muy
buena idea retocar las zonas de degrad cambindolas a un
color entero.
Si a pesar de todo, las imgenes que queremos poner siguen
teniendo un tamao de archivo demasiado grande, lo mejor
es no ponerlas sobre la pgina sino sobre un enlace dejando
al usuario que decida si cargar o no dicha imagen. Es
conveniente que le informes su tamao en KBytes. Ej: <IMG
SRC=[Link] ALT=&quote;Logo de UAP (320 KB)&quote;>
55

 Una solucin ms fina sera crear una segunda imagen muy

pequea y presentarla, haciendo a su vez que sta sea un
enlace a la imagen ms grande as: <A HREF=[Link]
><IMG SRC=[Link] ALT=&quote;Click para ver imagen
grande de x KB&quote;></A>
Cuando se carga una imagen, sta queda almacenada en el
cach. Por tanto, si esta misma imagen se usa en otras
pginas no ser requerida al servidor para ser cargada de
nuevo. Por ello, siempre que se pueda, es conveniente
repetir la misma imagen en otras pginas, como por ejemplo
para los botones, iconos, barras de separacin, etc.
Otra prctica muy aconsejable, es la de dimensionar todas
las imgenes con los comandos WIDTH y HEIGHT. Esto evita
extraos reacomodos y saltos del texto durante la carga de
la pgina.
El formato GIF
El formato grfico GIF (Graphics Interhange Format) es el
estndar (no oficial) de las imgenes en documentos HTML. Fue
creado por Compuserve y puede manejar hasta un mximo de 8
bits de color (256 colores) y usa el mtodo de compresin LZW
que comprime entre 1.5:1 a 2:1.
Este mtodo de compresin es muy conveniente para comprimir
reas monocolor, como las que puede haber por ejemplo en un
diagrama sencillo. Pero no es tan conveniente para cosas ms
complicadas, como por ejemplo fotografas de objetos de la vida
real o personas.
a. GIFs transparentes
Una caracterstica muy til del formato GIF es la opcin de hacer
transparente un color determinado, es decir, que un color
concreto no se vea, siendo reemplazado por el fondo de la
pgina, aparentando flotar sobre el fondo.
Hay otro aspecto que hay que tener en cuenta y es que el
formato GIF tiene dos subformatos diferentes. El ms comn es el
GIF 87a, con el que no se pueden conseguir colores
transparentes. El formato adecuado para ello es el GIF 89a. Por
tanto, el programa grfico debe tener la posibilidad de convertir
las imgenes a este subformato.
56

b. GIFs entrelazados
Normalmente, un GIF contiene los datos de cada lnea de la
imagen de una manera ordenada, de tal manera que al ser
cargada por el navegador aparecer dibujada lnea a lnea de
arriba hasta abajo.
Se puede cambiar este comportamiento si se ha guardado la
imagen como un GIF entrelazado (interlaced GIF) del subformato
89a. En este caso, las lneas quedan guardadas no de una manera
consecutiva, sino en saltos de cuatro en cuatro y al llegar al final
recomienza nuevamente pero esta vez desde la lnea 2, tambin
de cuatro en cuatro, as hasta completar la imagen.
El propsito de esto es que al ser cargada esta imagen, se ver la
imagen completa desde el principio, comenzando con una
definicin muy gruesa que luego se va afinando poco a poco.
El tiempo total de carga de una imagen entrelazada es el mismo
que la misma imagen en formato no entrelazada, pero en el
primer caso nos hacemos rpidamente una idea del contenido de
dicha imagen, lo cual puede ser muy conveniente a veces: -)
Lamentablemente no todos los navegadores la soportan.
c. GIFs animados
En el subformato GIF 89a (se llamo as porque este estndar
apareci en 1989) se estableci la posibilidad de la existencia un
color transparente, as como que un GIF pudiera contener
internamente mltiples imgenes, visibles durante un tiempo
determinado, con lo que se poda obtener una animacin.
Pero esta interesante caracterstica permaneci prcticamente en
el olvido hasta finales de 1995, cuando Netscape la implemento
en su navegador, adquiriendo muy pronto una gran popularidad.
Hay otros tipos de animaciones, como las obtenidas con:
Con los formatos Quicktimes, FLIC, AVI, etc., que tienen el
gran inconveniente de que requieren, para poder ser
contempladas, de programas auxiliares previamente
instalados ya que no son soportados directamente por los
navegadores va PlugIn.
Java, que requiere un nivel de conocimientos de este
lenguaje de programacin que no est al alcance de
cualquiera.
57

 Las animaciones basadas en los servidores, que tienen el

inconveniente de que consumen el ancho de banda e
incrementan el trfico de datos, debido a que deben estar
alimentando continuamente la animacin desde el servidor.
Las animaciones basadas en el formato GIF 89a eliminan todos
estos problemas, pues:
Son soportados por los navegadores.
Son tan fciles de usar en una pgina Web como cualquier
otra imagen.
No incrementan el trfico de la red, pues el usuario la carga
de una sola vez y se ejecutan luego desde el cach del
navegador.
Para crear una animacin, en primer lugar, hay que crear una a
una las distintas imgenes que van a constituirla. Cualquier
programa grfico capaz de guardar en formato GIF es vlido para
este propsito.
En segundo lugar, es necesario un programa que ensamble estas
imgenes individuales de una manera apropiada para crear la
animacin. Los programas ms usados para ello son: GIF
Construction Set (para Win 3.1x o 95), Microsoft Gif Animator (Win
95), GifBuilder o WhirlGIF.
El formato JPG
JPG en realidad es la extensin (limitado a 3 caracteres por DOS)
de JPEG (Joint Photographic Expert Group) quienes crean este
estndar para comprimir imgenes usando transformadas
discretas de coseno. Es independiente de la imagen y la
compresin puede llegar a 100:1, pero cuanto ms se comprime
ms fidelidad se perder.
En la prctica se usan compresiones de 20:1 y la distorsin no es
muy notoria.
La primera ventaja del JPG es su mxima cantidad de colores:
16.7 millones (24 bits), que es mucho ms de lo que el ojo
humano puede distinguir y el uso de complicados algoritmos
matemticos para comprimir el tamao de los archivos hasta en
la dcima parte de su tamao original.
58

Su nico inconveniente es que al tratarse de una imagen

comprimida, sta deber ser transferida totalmente antes de
empezar a descomprimir y luego mostrarla, esto sin contar la
carga de trabajo extra al uP al manejar el complicado algoritmo
de descompresin.
Tampoco maneja los conceptos de transparencia, interlazado ni
animacin, pero tiene una contraparte de vdeo llamada MPEG
(Moving Picture Expert Group).
El formato PNG = Portable Network Graphics
Un formato grfico creado en mayo de 1995, por el grupo PNG
formado por: Compuserve, Netscape, Spyglass y el corsorcio
W3C, para reemplazar al formato GIF y solucionar el problema de
patente que tiene el GIF, por el uso del algoritmo de compresin
LZW, reclamado por UNYSYS.
Una de sus ventajas respecto al GIF es mejor soporte de color (48
bits) y mejor compresin. Visita PNG para mas informacin.
Imgenes en la Web

GifAnima
250,000 imgenes gratis
Media Link's
Icon Browser
?
Lines form Microsoft
?
Fondos
Fondos
Fondos y texturas

Las herramientas grficas

Editores grficos
Photo Shop 3.05 Adobe
Paint Shop Pro 4.12 Jasc
Photo Paint 7 Corel
59

 Photo Styler 2.0 Aldus

LView
Editores de GIF animados
Permiten unir dos o ms imgenes en una nueva imagen
aadiendo intervalos de tiempo entre imgenes, transicin,
morphing, crear banners, aadir texto, convertir AVI en GIF.
Web Maestro Teora bsica del GIF animado.
Gallery of GIF Animation Consejos sobre manejo y creacin
de GIF animados y vnculos a colecciones de GIF animados.
Stepping Stones GIF Animation Gallery Coleccin de GIF
animados.
Microsoft Animator GIF 1.0 Software para crear GIF
animados, Gratis.
GIF Construction Set Software para crear GIF animados.
Animagic GIF 0.91
Photo Impact GIF Animator 1.2
Video Craft GIF Animator
Web Image 2.1
Gif Master
Optimizadores de tamao de imagen y paleta de colores
Permiten reducir el tamao en pixeles de la imagen sin
distorcionarla, para hacerla ms manejable en Internet. Tambin
permite limitar la paleta, reduciendo el nmero de colores, con
filtros de anti-alising y suavizado de colores. En lugar de
verdadero color de 24 bits. Es normal en la web el uso de paletas
de 256 colores (8 bits)
De Babelizar Pro para Win 9x/NT
Hi Jaak PRO 4.0
HVS Color 1.2.2
Photo Impact GIF/JPEG SmartSaver 1.1
Smooth Scaling 2.0
Mapeo de imgenes
Permiten crear imgenes sensibles, con reas de cualquier forma
y generar los cdigos HTML.
60

Mapeo de imgenes
1. Mapeo de imagen por servidor - ISMAP
Este es un parmetro que se puede aadir al comando de
hipertexto <A> para identificar una imagen como la base para la
captura de un clic de mouse, de forma que se genera un enlace
condicional dependiendo del lugar donde el usuario hace el clic.
Sintaxis: <A HREF=[Link]><IMG SRC=[Link]
ISMAP></A>
Esta tcnica de implementar imgenes mapeadas requiere la
comunicacin con un servidor HTTP para producir las coordenadas
de la posicin del clic y generar la direccin URL.
Tiene la ventaja de no requerir nada del navegador cliente, por lo
que funcionar con cualquier navegador.
Nota: Para que sea posible el uso de este comando, el servidor
HTML debe controlar el acceso a los documentos va un software
"cgi-bin" que interpretar la posicin de clic usando los datos que
contiene el archivo "[Link]" y es por esto que a este atributo
se le llama SSIM (Server Side Imagen Map)
2. Mapeo de imagen por cliente - USEMAP
Este parmetro permite al navegador procesar las coordenadas
del clic internamente, por lo que es ms rpido, se puede usar
con cualquier servidor HTML, incluso en pginas locales o accesos
va FTP.
Tiene la desventaja de requerir que el navegador cliente haga
todo el trabajo, pero si el navegador del cliente no es capaz de
interpretar el atributo USEMAP nada ocurrir, pero por ser un
proceso local es ms rpido.
Es por eso que si el servidor HTML donde est tu pgina, tiene
instalado un cgi apropiado, ser mejor usar tambin el atributo
ISMAP y si el navegador cliente no es capaz de interpretar el
mapa, le pasa la chamba al servidor.
USEMAP lleva un argumento con las mismas caractersticas que
HREF del comando <A> y si lleva el "#" se trata de una seccin
en la pgina especificada.
Ej: <IMG SRC=[Link] USEMAP=#map1>
61

Muestra la imagen y si el navegador soporta USEMAP, las

coordenadas del clic son interpretadas usando el mapeo en la
misma pgina en la que se encuentra la imagen, en la posicin
marcada como "map1", si no lo puede interpretar mostrar un
error.
Ej: <A HREF=[Link]><IMG SRC=[Link]
USEMAP=[Link]#map2 ISMAP></A> Mostrar la imagen
[Link], si el navegador soporta USEMAP procede como ejemplo
anterior, si no es el servidor quien interpreta las coordenadas
usando el archivo [Link]
Las regiones son descritas en aun archivo usando el comando
<MAP> con el siguiente formato:
Sintaxis:
<MAP NAME=nombre>
<AREA [SHAPE=forma] COORDS=x,y,x,y [HREF=referencia]
[NOHREF]>
</MAP>
Esta definicin puede estar en el mismo u otro archivo.
Existen varias deficiones de forma para SHAPE y estas son:
RECT x,y,w,h
Donde X e Y definen la esquina superior izquierda, y con W y H
la esquina opuesta del rectngulo.
CIRCLE x,y, r
Donde X e Y definen el centro del circulo y R el radio del
circulo.
POLYGON x1,y1,x2,y2,...
Donde los pares X1 e Y1 son las coordenadas del primer punto
X2 e Y2 las coordenadas del segundo etc...
Por ejemplo para una imagen de 100x100 se tendra "0,0,99,99".
NOHREF Define la regin neutral, donde un clic no hace nada.
Por omisin todo lo que est fuera de AREA est en NOHREF.
Si dos reas se sobreponen, la que se defina primero queda sobre
la otra y es la que se activar en la regin de solape. Esto lo
entendern rapidito con un grafiquito :)
62

Un ejemplo prctico:
<MAP NAME=map1> <AREA SHAPE=rect
COORDS="10,10,49,49" HREF="[Link]"> <AREA
SHAPE=rect COORDS="60,10,99,49" HREF="[Link]">
<AREA SHAPE=rect COORDS="110,10,149,49"
HREF="[Link]"> </MAP> <IMG SRC=[Link]
USEMAP="#map1"> Un uso muy comn es el de una barra con
botones o una pantalla bien bacn que te capturas desde
cualquier programa en Windows y la editas con algn editor
grfico.
Aqu quiero detenerme un momento para compartir con ustedes
mis experiencias en este campo. Buscando un software que me
ayudara en esta chamba y consultando con algunos usuarios de
ATJ me top con un excelente software shareware.
Se trata de Paint Shop Pro v5.01 de Jasc Software un
programa para Windows 95 que permite ver, crear, capturar,
manipular, retocar (tiene brochas, rodillo, balde, plumones, spray
etc.), puede cambiar el tamao (tambin tiene 12 tipos de
deformacin), nmero de colores, arreglar tonos (tiene 20 filtros,
pero le puedes aadir ms en una opcin llamada plug-in),
soporta scanner y convertir imgenes (soporta ms de 30
formatos) en masa como todos los *.BMP.
Prepara un lbum, escaneando los directorios de tu HD, ZIP-Drive
o DC-ROM en busca de imgenes de cualquier tipo, guardando la
ruta de cada archivo original y jalar una pequea muestra para
pegarla en un lbum, para que no pierdas tiempo a la hora de
pegar una imagen en tu pgina HTML, usa el Browser ACDSee
32 que puedes encontrar en ACD Systems tambin shareware.
Un programa especial para hacer mapas de imgenes de cliente
se llama Live Image de Media Teach Inc, tambin shareware

63

Imagen de fondo
BACKGROUND Es un parametro del comando BODY usado para
especifica la ruta URL donde estara la imagen que sera usanda
como fondo del documento, normalmente se trata de un archivo
GIF, como papel tapiz en Windows.
Sintaxis: <BODY BACKGROUND="URL o ruta/[Link]">
BGPROPERTIES Fixed, con este parametro se fija el fondo.
Consideraciones:
Solo se puede definir una imagen de fondo por pagina la cual sera
repetida tantas veces como sea necesario para cubrir la pantalla.
Al especificar una imagen como fondo, se requiere que dicha
imagen sea cargada completamente, esto reduce la velocidad de
carga del documento y ninguna parte podra ser mostrada hasta
que la imagen termina de ser cargada y decodificada. Por lo que
es muy importante que las imagenes de fondo sean pequenas y
simples.
Si la opcion de "Auto Load Images" esta off, no podras cargar
imagen de fondo y BGCOLOR no sera especificado y todos los
controles de color de texto como TEXT, LINK, VLINK o ALINK son
ignorados, dejando el fondo y texto del mismo color y por lo tanto
invisibles. :(
Cuidado con el contraste, en muy incomodo leer sobre imagenes
de tonos muy fuertes.

64

Video
1. In-line Video - DYNSRC
DYNamic SouRCe es un parametro recientemente incluido en los
comandos <A> e <IMG> por el Explorer, se trata de la
reproduccion de video clips AVI (Audio Video Interleave) en
documentos HTML.
Tiene el mismo formato que HREF en <A> o SRC en <IMG>
Ademas tiene una serie de parametros adicionales para mayor
control:
START Con esto parametro especificas cuando se arrancara el
archivo. Sus valores pueden ser FileOpen o MouseOver.
FileOpen indica que el video debe empezar tan pronto como se
termine la transferencia (es el default) y MouseOver indica que el
video arrancara cuando el usuario mueva su mouse sobre la
animacion. Incluso puedes especificar ambos parametros al
mismo tiempo.
CONTROLS Esta bandera indica que el usuario puede manejar
(Pause, Restart o Skip) el video.
LOOP=n Especifica cuentas veces se activara el video. Si n=-1 o
si LOOP=Infinite no parara nunca.
LOOPDELAY=n Especifica el tiempo en miliseguntos que el video
se detiene antes de recomenzar.
Ejemplo 1: <A HREF=[Link]">Windows 95</A>
El video "[Link]" sera mostrado cada vez que el usuario haga un
clic en JAVA.
Ejemplo 2: <IMG SRC=[Link] DYNSRC=[Link]
START=Fileopen LOOP=5 LOOPDELAY=1000>
El video "[Link]" arrancara un segundo despues de terminar de
cargarlo (1000 milisegundos) y se repetira 5 veces de forma
automatica.
Ejemplo 3: <IMG SRC=[Link] DYNSRC=[Link]>
65

Se prepara un recuadro de 250x250 pixels y si el navegador no es

capaz de mostrar video clips, solamente mostrara la imagen
"[Link]". El video "[Link]" arrancara cada vez que el usuario
mueva su mouse sobre la imagen "[Link]".

Ejemplo 4: <IMG SRC=[Link] WIDTH=50 HEIGHT=50

ALIGN=right DYNSRC=[Link] START=FileOpen LOOP=-1
LOOPDELAY=5000>
Si el navegador no es capaz de mostrar el video, solo mostrara
"[Link]", si es capaz de mostrar el "[Link]" lo hara en cuanto
termine de cargarlo y se repetira de forma infinita con pausas de
5 segundos, si no mostrara la imagen "[Link]" en 50x50 alineado
a la derecha.
2. In-line VRML Worlds
Este es un parametro del comando IMG introducido por Explorer
desde su version 2, instalando los modulos plug-in disponibles en
Microsoft
Archivos VRML tipo .WRL y .XAF son soportados y se pueden
manipular libremente en el espacio 3D.
Ejemplo: <IMG SRC="[Link]" VRML="[Link]"
HEIGHT=250 WIDTH=300>
Nota: Netscape tambien soporta VRML usando su plug-in llamado
WebFX.
3. Incrustacion de Objectos <EMBED>
MS esta empeado en convertir esto en el proximo estandar. Se
trata de un comandoo de incrustacion de objetos con un
elemento tipo <EMBED> directamente desde cualquier aplicacion
que soporte OLE hacia una pagina HTML. Un paso adelante en
este sentido es el Microsofts Internet Assistant.
Ejemplo 1: <EMBED SRC=images/[Link]>
Si un parametro WIDTH y HEIGHT es especificado, el objeto se
escala al espacio especificado.
66

Ejemplo 2: <EMBED SRC=[Link] WIDTH=250

HEIGHT=50> Un objeto incrustado puede ser activado haciendo
un doble clic en el de mode que se usa la aplicacion original en la
que fue creado el objeto. Un doble clic en una imagen BMP,
arrancaria el Paint Brush o la aplicacion que asociaste via el plugin, permitiendote editar el objeto.
4. Netscape Plug-ins
Este es una definicion introducida por Netscapes. El plug-ins es
basicamente la deficion de como debe ser tratado un objeto
incrustado segun su tipo MIME.
Un ejemplo de esto es el archivo FDF (Portable Document Format)
de Adobe Acrobat, que puede ser mostrado simplemente
configurando el plug-in respectivo en el navegador.
Otro ejemplo es el archivo WebFX de Paper Software Inc.
Muchos plug-in oueden usar el elemento <EMBED>, con atributos
como BORDER, ALIGN, WIDTH, HEIGHT y SRC.

Texto en movimiento <MARQUEE>

Este nuevo comando introducido en Explorer, permite crear texto
en movimiento, al estilo del salva pantalla con el mismo nombre
de Win 3.x.
ALIGN Este atributo alinea el texto al rededor del marco en una
de las siguientes posiciones: TOP, MIDDLE o BOTTOM.
BEHAVIOR Este atributo define la forma de mostrar el texto. Los
valores aceptados son: SCROLL, SLIDE o ALTERNATE. El SCROLL
(default) hace que cuando termine de desaparecer la ultima letra
aparecera la primera letra nuevamente. Con SLIDE empieza a
aparecer el texto y se para cuando llega al margen opuesto. Con
ALTERNATE se logra que el texto rebote entre ambos margenes.
BGCOLOR Con este atributo se especifica el color del fondo de
marco.
DIRECTION El texto puede correr hacia LEFT (default) o RIGHT.
67

HEIGHT y WIDTH Es el alto y ancho del marco, puede estar en

pixels o en % de la imagen total.
HSPACE y VSPACE Es el margen horizontal y vertical en pixels.
LOOP Especifica cuantas veces se activara. n=-1 o
LOOP=INFINITE.
SCROLLAMOUNT Espesifica el numero de pixels entre dos textos
sicesivos dentro de un marco.
SCROLLDELAY Especifica los milisegundos entre cada letra. Es
un control de velocidad.
Aqui algunos ejemplos:

Hola a todos!

GIF animado
Otro metodo para conseguir texto en movimiento es el de
confeccionar un GIF animado. Se puede conseguir que el texto se
desplace realmente, emulando el comportamiento de las
marquesinas, pero no es facil conseguirlo y puede ser bastante
laborioso.
Un procedimiento un poco mas sencillo es crear el texto con el
tipo, tamao y color de letra que escojas, con un programa
grafico y luego procedemos a borrar una a una cada palabra (o
cada letra si se quiere) y vamos guardando cada imagen con un
nombre distinto. Luego procedemos a montar la secuencia de
imagenes GIFs animados.
Javascript
Otra manera de conseguir texto en movimiento es haciendo uso
de Javascript. Vamos a ver dos ejemplos: un scroll (deslizamiento)
68

de un texto en la barra de estado del navegador y un scroll en

una ventana dentro de la pagina

Tablas
Delimitador de tabla <TABLE>
Este es el comando principal que limita la tabla y lo debes usar
dentro del BODY, cualquier comando de tabla fuera de este
delimitador no sera interpretado como tal.
Este comando introduce un salto de linea automaticamente, tanto
al principio de la tabla como al final.
WIDTH=valor o porcentaje Con este parametro opcional se
controla el ancho de la tabla en pixels o en % del ancho de la
ventana.
HEIGHT=valor o porcentaje Con este parametro opcional se
controla el alto de la tabla en pixels o en % del alto de la ventana.
ALIGN Con este parametro opcional, se logra una tabla flotante,
osea se alinea el texto al rededor de la tabla. Al igual que en las
imagenes flotantes, se puede usar el comando <BR CLEAR=...>,
69

para organizar el texto fuera de la tabla mas comodamente.

Puede tomar los valores LEFT (omision), CENTER, RIGHT.
VALIGN Con este parametro es posible manejar el alineamiento
del texto dentro de las celdas en si. Puedes usar: TOP, CENTER,
BOTTOM o BASELINE. Por omision este valor esta en CENTER.
BORDER=valor Por omision las tablas se presentan sin borde,
pero con este parametro opcional se les puede aadir uno al
rededor de cada celda. Con el se puede dar mas enfasis a una
tabla poniendole un valor de 4 y una subtabla dentro con un valor
de 1, por ejemplo.
Otro bonito efecto es darle un valor de 0, de manera que el
espacio originalmente reservado al borde entre celdas es
eliminado, obteniendose asi una tabla mas compacta.
BORDERCOLOR Con este parametro seleccionas el color del
borde, siempre que este tambien presente el atributo BORDE.
BORDERCOLORLIGHT u BORDERCOLORDARK Con estos
parametros puedes seleccionar un borde de color claro u oscuro
muy especial, que proporciona una apariencia 3D. Tambien aqui
debera estar presente el comando BORDER.
CELLSPACING=valor Con este parametro opcional se controla el
espacio entre dos celdas de una tabla. Por omision esta en 2.
Poner este valor en 0 nos proporciona una tabla mas compacta.
CELLPADDING=valor Con este parametro opcional se controla el
espacio entre el borde y su contenido. Por omision este valor esta
en 1. Poniendolo en 0, se tendra que el contenido llaga a tocar el
borde, algo no muy agradable.
BGCOLOR Con este parametro es posible poner un color de fondo
diferente al del documento para resaltar la tabla. Se usa la misma
sintaxis que en el parametro del mismo nombre en BODY.
BACKGROUND Con este parametro es posible poner una imagen
de fondo dentro de la tabla. Se usa la misma sintaxis que en el
parametro del mismo nombre en BODY. La imagen sera puesta en
forma de mosaico el numero de veces necesario para cubrir todo
el fondo de la tabla y solo funciona en Explorer.
Nota: Los atributos BGCOLOR, BORDERCOLOR,
BORDERCOLORLIGHT y BORDERCOLORDARK tambien puedes
usarlos en los comandos <TR>, <TD> y <TH> logicamnete
afectando en este caso solo a una fila o celda en particular.
70

1. <CAPTION>
Con este comando se asigna un titulo a la tabla. Debe aparecer
dentro de los limites del comando TABLE pero fuera del comando
TR.
Este comando acepta los atriburos ALIGN (por omision en TOP),
VALIGN y BGCOLOR.
2. Fila <TR>
Este comando debe estar dentro del limite del comando TABLE y
se usa para especificar una fila de la tabla. El numero de filas de
la tabla es exactamente el numero de comando TR usados.
ALIGN Con este parametro opcional, puedes alinear
horizontalmente el texto contenido en todas las celdas de la fila.
Puede tomar los valores LEFT (omision), CENTER, RIGHT.
VALIGN Con este parametro es posible manejar el alineamiento
del texto dentro de todas las celdas de la fila. Puedes usar: TOP,
CENTER (omision), BOTTOM o BASELINE.
Como ya se menciono tambien puedes usar los atributos
BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT y
BORDERCOLORDARK.
No funciona aqui los parametros WIDTH, HEIGHT, BACKGROUND,
ROWSPAN ni COLSPAN.
3. Celda <TD>
Este comando debe estar entre los limites del comando TR y
define una celda normal. Cada fila debe tener el mismo numero
de columnas, determinadas por este comando o celdas en blanco
seran a&ntiulde;adidas al final para completar las columnas. Ten
mucho cuidado al expandir filas o columnas de reducir el numero
de celdas correspondientes en las otras filas o se te descuadra
todo.
Cada celda puede contener cualquier comando HTML y por
omision la alineacion de horizontal sera left y la vertical center.
Las lineas dentro de la celda pueden ser rotas con <BR> pero el
parametro NOWRAP previene esto.
WIDTH=valor o porcentaje Con este parametro opcional se
controla el ancho de la celda (en realidad de la columna
correspondiente ya que tambien afectara a las demas celdas de
la misma columna) en pixels o en % del ancho de la tabla.
71

HEIGHT=valor o porcentaje Con este parametro opcional se

controla el alto de la celda (en realidad de la fila correspondiente
ya que tambien afecta a las demas celdas de la misma fila) en
pixels o en % del alto de la ventana.
ROWSPAN Con este atributo especificas cuantas filas debe
espandirse esta celda sobre las otras. Por omision este valor es
uno.
COLSPAN Con este atributo especificas cuantas columnas se
puede expandir una celda sobre las demas. Por omision es uno.
NOWRAP Con este atributo se especifica que el contenido en la
celda no sera roto, pero hay que tener cuidado porque puede
causar que las celdas crescan demaciado.
Como ya se menciono tambien puedes usar los atributos ALIGN,
VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR,
BORDERCOLORLIGHT y BORDERCOLORDARK.
4. Encabezado <TH>
Es muy parecido al comando TD solo que este es usado para
titulos y encabezados, ya que pone el texto en negrita y lo alinea
horizontalmente al centro de la celda.
Aqui se puede usar los mismos parametros que en TD.
Algunas consideraciones sobre el uso de tablas
Celdas en blanco no tendran borde. Si quieres que aparesca el
borde tendras que poner algo como un espacio en la celda. Ej
&nbsp; o <BR>.
Puedes incluso incluir un enlace, una imagen, un sonido o un
video como contenido de una celda.
No es necesario (aunque tampoco es un error) cerrar los
comandos <TR>, <TH> y <TD>. No asi <TABLE> y <CAPTION>
que son obligatorios.
Algunos ejemplos
Ejemplo 1
<TABLE BORDER=1 BORDERCOLOR=purple CELLSPACING=0>
<CAPTION ALIGN=left>Ejemplo 1</CAPTION>
<TR><TD ROWSPAN=2 COLSPAN=2><TH COLSPAN=2
BGCOLOR=gray>Promedio
72

<TR><TH>Alto<TH>Ancho
<TR><TH ROWSPAN=2 BGCOLOR=gray>Sexo<TH
BGCOLOR=silver>Machos<TD>1.9<TD>0.003
<TR><TH BGCOLOR=silver>Hembras<TD>1.7<TD>0.002
</TABLE>
Ejemplo 1
Alto Ancho
Machos 1.9
0.003
Sexo
Hembras 1.7
0.002
Ejemplo 2
<TABLE BORDER=1 BGCOLOR=#FEE7BD>
<CAPTION>Ejemplo 2</CAPTION>
<TR>
<TD>1</TD><TD>2<TD>3
<TABLE BORDER BORDERCOLOR=Black>
<TR><TD>A<TD>B
<TR><TD>C<TD>D
</TABLE>
<TR><TD>4<TD><5<TD6>
</TABLE>
Ejemplo 2
A B
1 2
C D
4 5 6
Ejemplo 3
<CENTER>
<TABLE BORDER=4 WIDTH=70% HEIGHT=15%>
<CAPTION ALIGN=RIGHT VALIGN=BOTTOM>Ejemplo
3</CAPTION>
<TR><TH>Este sera el Item 1<TH>Item 2
<TR><TD>3<TD>4
<TR ALIGN=CENTER><TD>5<TD>6
<TR ALIGN=RIGHT><TD>7<TD>8
73

</TABLE>
</CENTER>
Ejemplo 3
Este sera el Item 1

Item 2

3
5

4
6
7

Ejemplo 4
<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black
WIDTH=50%>
<CAPTION BGCOLOR=WHITE>Ejemplo 4</CAPTION>
<TR>
<TD>Esta es la primera celda<TD>Esta es la segunda celda
<TR BORDERCOLOR=TEAL BGCOLOR=OLIVE><TD>Eta es la
tercera celda<TD>Esta es la cuarta celda
<TR BORDERCOLOR=NAVY BGCOLOR=AQUA>
<TD BORDERCOLOR=Yellow>Esta es la quinta celda</TD><TD
BGCOLOR=White>Esta es la sexta celda
</TABLE>
Ejemplo 4
Esta es la
Esta es la
primera celda
segunda celda
Eta es la tercera Esta es la
celda
cuarta celda
Esta es la quinta Esta es la sexta
celda
celda
Ejemplo 5
<TABLE ALIGN=left BORDER WIDTH=50%>
<CAPTION>Ejemplo 5</CAPTION>
<TR><TD><FONT COLOR=PURPLE>Esta tabla tiene dos
filas</FONT>
<TR><TD>Esta alineada a la izquierda
</TABLE>
Ejemplo 5
74

Esta tabla tiene dos filas

Esta alineada a la izquierda

Estas lineas de texto estan a la

derecha de la tabla que es
flotante y la pueden rodear

completamente sin problemas.

Ejemplo 6
<TABLE ALIGN=right BORDER=1 WIDTH=50%>
<CAPTION>Ejemplo 6</CAPTION>
<TR><TD HEIGHT=30%><FONT COLOR=red>Esta tabla tiene
dos filas</FONT>
<TR><TD>Esta alineada a la derecha de la pagina
</TABLE>
Ejemplo 6
Estas lineas de texto estan a la Esta tabla tiene dos filas
izquierda de la tabla que es
Esta alineada a la derecha de la
flotante y la pueden rodear
pagina
completamente sin problemas.
Ejemplo 7

75

Tablas
Delimitador de tabla <TABLE>
Este es el comando principal que limita la tabla y lo debes usar
dentro del BODY, cualquier comando de tabla fuera de este
delimitador no sera interpretado como tal.
Este comando introduce un salto de linea automaticamente, tanto
al principio de la tabla como al final.
WIDTH=valor o porcentaje Con este parametro opcional se
controla el ancho de la tabla en pixels o en % del ancho de la
ventana.
HEIGHT=valor o porcentaje Con este parametro opcional se
controla el alto de la tabla en pixels o en % del alto de la ventana.
ALIGN Con este parametro opcional, se logra una tabla flotante,
osea se alinea el texto al rededor de la tabla. Al igual que en las
imagenes flotantes, se puede usar el comando <BR CLEAR=...>,
para organizar el texto fuera de la tabla mas comodamente.
Puede tomar los valores LEFT (omision), CENTER, RIGHT.
VALIGN Con este parametro es posible manejar el alineamiento
del texto dentro de las celdas en si. Puedes usar: TOP, CENTER,
BOTTOM o BASELINE. Por omision este valor esta en CENTER.
BORDER=valor Por omision las tablas se presentan sin borde,
pero con este parametro opcional se les puede aadir uno al
rededor de cada celda. Con el se puede dar mas enfasis a una
tabla poniendole un valor de 4 y una subtabla dentro con un valor
de 1, por ejemplo.
Otro bonito efecto es darle un valor de 0, de manera que el
espacio originalmente reservado al borde entre celdas es
eliminado, obteniendose asi una tabla mas compacta.
BORDERCOLOR Con este parametro seleccionas el color del
borde, siempre que este tambien presente el atributo BORDE.
BORDERCOLORLIGHT u BORDERCOLORDARK Con estos
parametros puedes seleccionar un borde de color claro u oscuro
muy especial, que proporciona una apariencia 3D. Tambien aqui
debera estar presente el comando BORDER.

76

CELLSPACING=valor Con este parametro opcional se controla el

espacio entre dos celdas de una tabla. Por omision esta en 2.
Poner este valor en 0 nos proporciona una tabla mas compacta.
CELLPADDING=valor Con este parametro opcional se controla el
espacio entre el borde y su contenido. Por omision este valor esta
en 1. Poniendolo en 0, se tendra que el contenido llaga a tocar el
borde, algo no muy agradable.
BGCOLOR Con este parametro es posible poner un color de fondo
diferente al del documento para resaltar la tabla. Se usa la misma
sintaxis que en el parametro del mismo nombre en BODY.
BACKGROUND Con este parametro es posible poner una imagen
de fondo dentro de la tabla. Se usa la misma sintaxis que en el
parametro del mismo nombre en BODY. La imagen sera puesta en
forma de mosaico el numero de veces necesario para cubrir todo
el fondo de la tabla y solo funciona en Explorer.
Nota: Los atributos BGCOLOR, BORDERCOLOR,
BORDERCOLORLIGHT y BORDERCOLORDARK tambien puedes
usarlos en los comandos <TR>, <TD> y <TH> logicamnete
afectando en este caso solo a una fila o celda en particular.
1. <CAPTION>
Con este comando se asigna un titulo a la tabla. Debe aparecer
dentro de los limites del comando TABLE pero fuera del comando
TR.
Este comando acepta los atriburos ALIGN (por omision en TOP),
VALIGN y BGCOLOR.
2. Fila <TR>
Este comando debe estar dentro del limite del comando TABLE y
se usa para especificar una fila de la tabla. El numero de filas de
la tabla es exactamente el numero de comando TR usados.
ALIGN Con este parametro opcional, puedes alinear
horizontalmente el texto contenido en todas las celdas de la fila.
Puede tomar los valores LEFT (omision), CENTER, RIGHT.
VALIGN Con este parametro es posible manejar el alineamiento
del texto dentro de todas las celdas de la fila. Puedes usar: TOP,
CENTER (omision), BOTTOM o BASELINE.

77

Como ya se menciono tambien puedes usar los atributos

BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT y
BORDERCOLORDARK.
No funciona aqui los parametros WIDTH, HEIGHT, BACKGROUND,
ROWSPAN ni COLSPAN.
3. Celda <TD>
Este comando debe estar entre los limites del comando TR y
define una celda normal. Cada fila debe tener el mismo numero
de columnas, determinadas por este comando o celdas en blanco
seran a&ntiulde;adidas al final para completar las columnas. Ten
mucho cuidado al expandir filas o columnas de reducir el numero
de celdas correspondientes en las otras filas o se te descuadra
todo.
Cada celda puede contener cualquier comando HTML y por
omision la alineacion de horizontal sera left y la vertical center.
Las lineas dentro de la celda pueden ser rotas con <BR> pero el
parametro NOWRAP previene esto.
WIDTH=valor o porcentaje Con este parametro opcional se
controla el ancho de la celda (en realidad de la columna
correspondiente ya que tambien afectara a las demas celdas de
la misma columna) en pixels o en % del ancho de la tabla.
HEIGHT=valor o porcentaje Con este parametro opcional se
controla el alto de la celda (en realidad de la fila correspondiente
ya que tambien afecta a las demas celdas de la misma fila) en
pixels o en % del alto de la ventana.
ROWSPAN Con este atributo especificas cuantas filas debe
espandirse esta celda sobre las otras. Por omision este valor es
uno.
COLSPAN Con este atributo especificas cuantas columnas se
puede expandir una celda sobre las demas. Por omision es uno.
NOWRAP Con este atributo se especifica que el contenido en la
celda no sera roto, pero hay que tener cuidado porque puede
causar que las celdas crescan demaciado.
Como ya se menciono tambien puedes usar los atributos ALIGN,
VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR,
BORDERCOLORLIGHT y BORDERCOLORDARK.

78

4. Encabezado <TH>
Es muy parecido al comando TD solo que este es usado para
titulos y encabezados, ya que pone el texto en negrita y lo alinea
horizontalmente al centro de la celda.
Aqui se puede usar los mismos parametros que en TD.
Algunas consideraciones sobre el uso de tablas
Celdas en blanco no tendran borde. Si quieres que aparesca el
borde tendras que poner algo como un espacio en la celda. Ej
&nbsp; o <BR>.
Puedes incluso incluir un enlace, una imagen, un sonido o un
video como contenido de una celda.
No es necesario (aunque tampoco es un error) cerrar los
comandos <TR>, <TH> y <TD>. No asi <TABLE> y <CAPTION>
que son obligatorios.
Algunos ejemplos
Ejemplo 1
<TABLE BORDER=1 BORDERCOLOR=purple CELLSPACING=0>
<CAPTION ALIGN=left>Ejemplo 1</CAPTION>
<TR><TD ROWSPAN=2 COLSPAN=2><TH COLSPAN=2
BGCOLOR=gray>Promedio
<TR><TH>Alto<TH>Ancho
<TR><TH ROWSPAN=2 BGCOLOR=gray>Sexo<TH
BGCOLOR=silver>Machos<TD>1.9<TD>0.003
<TR><TH BGCOLOR=silver>Hembras<TD>1.7<TD>0.002
</TABLE>
Ejemplo 1
Alto Ancho
Machos 1.9
0.003
Sexo
Hembras 1.7
0.002
Ejemplo 2
<TABLE BORDER=1 BGCOLOR=#FEE7BD>
<CAPTION>Ejemplo 2</CAPTION>
<TR>
79

<TD>1</TD><TD>2<TD>3
<TABLE BORDER BORDERCOLOR=Black>
<TR><TD>A<TD>B
<TR><TD>C<TD>D
</TABLE>
<TR><TD>4<TD><5<TD6>
</TABLE>
Ejemplo 2
A B
1 2
C D
4 5 6
Ejemplo 3
<CENTER>
<TABLE BORDER=4 WIDTH=70% HEIGHT=15%>
<CAPTION ALIGN=RIGHT VALIGN=BOTTOM>Ejemplo
3</CAPTION>
<TR><TH>Este sera el Item 1<TH>Item 2
<TR><TD>3<TD>4
<TR ALIGN=CENTER><TD>5<TD>6
<TR ALIGN=RIGHT><TD>7<TD>8
</TABLE>
</CENTER>
Ejemplo 3
Este sera el Item 1
Item 2
3
4
5
6
7
8
Ejemplo 4
<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black
WIDTH=50%>
<CAPTION BGCOLOR=WHITE>Ejemplo 4</CAPTION>
<TR>
<TD>Esta es la primera celda<TD>Esta es la segunda celda
<TR BORDERCOLOR=TEAL BGCOLOR=OLIVE><TD>Eta es la
80

tercera celda<TD>Esta es la cuarta celda

<TR BORDERCOLOR=NAVY BGCOLOR=AQUA>
<TD BORDERCOLOR=Yellow>Esta es la quinta celda</TD><TD
BGCOLOR=White>Esta es la sexta celda
</TABLE>
Ejemplo 4
Esta es la
Esta es la
primera celda
segunda celda
Eta es la tercera Esta es la
celda
cuarta celda
Esta es la quinta Esta es la sexta
celda
celda
Ejemplo 5
<TABLE ALIGN=left BORDER WIDTH=50%>
<CAPTION>Ejemplo 5</CAPTION>
<TR><TD><FONT COLOR=PURPLE>Esta tabla tiene dos
filas</FONT>
<TR><TD>Esta alineada a la izquierda
</TABLE>
Ejemplo 5
Estas lineas de texto estan a la
Esta tabla tiene dos filas
derecha de la tabla que es
Esta alineada a la izquierda
flotante y la pueden rodear
completamente sin problemas.
Ejemplo 6
<TABLE ALIGN=right BORDER=1 WIDTH=50%>
<CAPTION>Ejemplo 6</CAPTION>
<TR><TD HEIGHT=30%><FONT COLOR=red>Esta tabla tiene
dos filas</FONT>
<TR><TD>Esta alineada a la derecha de la pagina
</TABLE>
Ejemplo 6

81

Estas lineas de texto estan a la

izquierda de la tabla que es
flotante y la pueden rodear
completamente sin problemas.

Esta tabla tiene dos filas

Esta alineada a la derecha de la
pagina

Ejemplo 7

Sonidos
Al fin bienvenida la multimedia, es lo primero que se me ocurre
cuando veo estos comandos... pero cuidado para que nuestro
lector de paginas Web aprecie los magnificos sonidos que ahora
podemos poner en nuestras paginas, el debera tener una tarjeta
de sonido y un juego de parlantes o por lo menos activado el
parlante de su PC, sino solo conseguiras un silencio total.
El siguiente problema es que los archivos de sonido usan un
formato de compresion al vuelo, es decir que no solo hay que
transferir el archivo desde el servidor Web hasta la PC del cliente,
sino que ademas el micropocesador del cliente tendra que
82

procesar la informacion, un algoritmo matematico de

descompresion antes de reproducir el sonido y si no es
suficientemente veloz (Pentium) o esta demasiado cargado de
trabajo no podra hacerlo a la velocidad necesaria para reproducir
en forma continua y escucharemos varias interrupciones a lo
largo del audio.
Tipo de sonido
Hay cuatro tipos basicos de archivos de sonido que se les puede
reconocer por su extension.
Tipo Extension
WAVE WAV
ULAW AU
MIDI MID
MPEG MP2
Existen programa conversores de formato en: GoldWave para
Windows
SoundApp Para Macintoch
Dos diferentes elementos existen actualmente para poner sonidos
en linea en documentos HTML.
1. Sonido de fondo <BGSOUND> - Explorer
Te permite poner un sonido de fondo en tu pagina para los
clientes que usen el Microsoft Internet Explorer. BGSOUND
soporta los parametros:
SRC="URL" Especifica la ruta URL de ubicacion del archivo de
sonido en formato WAV, AU, AIF o MID.
LOOP=n LOOP especifica cuentas veces se activara el sonido. Los
valores INFINITE o -1, hacen repetir el evento en forma
indeterminada.
DELAY=n Es el tiempo en milisegundos de retardo antes de
activarse el sonido nuevamente.
Sintaxis: <BGSOUND SRC=[Link]>
2. Sonido de fondo <EMBED> - Netscape
Te permite poner un sonido de fondo en tu pagina para los
clientes que usen el Netscape Navigator o tambien los que tengan
Explorer si tienen cargado el ActiveX. EMBED soporta los
parametros:
83

SRC="URL" Especifica la ruta URL de ubicacion del archivo de

sonido en formato WAV, AU o MID.
HIDDEN=true No muestra los controles de pause, retroceso y
play.
AUTOSTART=true Autoarranque cuando termine de cargar la
pagina.
LOOP=n LOOP especifica cuentas veces se activara el sonido. Los
valores INFINITE o -1, hacen repetir el evento en forma
indeterminada.
<EMBED SRC=[Link] HIDDEN=true AUTOSTART=true>
3. Sonido en un <A>
Una forma mas simple de activar un sonido sea con el comando
<A>, pero trae el inconveniente de que se presenta en pantalla el
software asociado al sonido en Windows.
<A HREF=[Link];>Musica (332K)</A>
Musica (332K)
<A HREF=[Link];><IMG SRC=[Link] ALT="Musica (332K)"
BORDER=0></A>

[Link]
Nota
Para poder escuchar los sonidos es necesario disponer, como es
logico, de una tarjeta de sonido con sus correspondientes
parlantes. Pero esto no es suficiente, pues no todos los programas
navegadores estan capacitados en la misma medida.

84

Formateo avanzado de paginas

Los Frames o marcos aumentan aun mas la flexibilidad de las
paginas web permitiendo dividir el area visible en mas de una
subregion.
Cada subregion, Frame o cuadro, tiene las siguientes
propiedades:
1. Puede tener su propio URL, independiente.
2. Se le puede asignar un nombre, permitiendo ser destino de
un enlase de hypertexto, direccionada con URL.
3. Pueda cambiarse sus dimenciones de forma dinamica en
respuesta a cambios en el tamao del area visible del
cliente.
4. Se puede habilitar o desabilitar que el cliente manipule su
tamao manualmente.
Estas propiedades dan paso a una serie de escenarios:
1. Informacion que el autor puede querer que permanesca todo
el tiempo visible y constante, como una barra de
herramientas, mensajes confidenciales, titulos graficos o
logos. Mientras el usuario de desplaza por el sitio en el
Frame "vivo" el otro Farame "estatico" esta siempre visible y
no se redibuja.
2. Las tablas de contenido son asi mucho mas claras. Un Frame
"izquierdo" que puede contener un juego de las principales
conexiones de hipertexto, que al ser seleccionados muestan
una porcion de pagina en el Frame "derecho".
3. Un Frame "query" que contiene un formulario que al ser
llenado y procesado por el servidor se pone su resultado en
el Frame "resultado"
Los Frames son generados con tres etiquetas: FRAMESET,
FRAME y NOFRAMES.
Sintaxis de documento Frame
Un documento Frame tiene una estructura basica muy parecida al
documento HTML normal, excepto porque la etiqueta BODY es
reemplazada por FRAMESET, que describe un subdocumento o
Frame y estan diseadas para ser procesadas muy rapidamente
por el navegador del cliente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
85

<HEAD>
<TITLE>Titulo del documento</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
1. <FRAMESET>
Un documento Frame no tiene BODY y ningun otro atributo puede
aparecer antes que el FRAMESET o este sera ignorado. Dentro del
FRAMESET puedes anidar otros FRAMESET, FRAME o NOFRAMES.
Cuando un FRAMESET es anidado dentro de otro, el marco
completo es puesto en el espacio reservado para el Frame
principal.
Este es el contenedor principal y tiene 2 parametros: ROWS y
COLS.
ROWS=valores El numero de filas esta determinado por el
numero de elementos en la lista separados por comas y el alto de
cada fila por el valor mismo. El alto total de todas las filas debe
ser igual a la altura total de la ventana.
COLS=valor1[,valor2,valor3...] El numero de columnas esta
determinado por el numero de elementos de la lista separados
por comas y el ancho de cada columna por el valor mismo. El
ancho total de todas las columnas debe ser igual al ancho total de
toda la ventana.
Donde valor, separados por comas, pueden estar en pixel
absolutos, porcentajes o valores relativos.
Pixel absolutos
Un simple valor numerico es asumido como el tamao fijo en
pixels. Esta es la forma mas peligrosa de asignar un valor a tu
Frame, ya que su tamao puede varias sustancialmente
dependiendo de la resolucion de pantalla (VGA o SVGA) que
este usando en ese momento el cliente. Si valores fijos de pixel
son usados, es recomendable y necesario que se mezcle ese
valor con uno o mas tamaos relativos. De otra manera el visor
sobreencribira tu definicion para hacer que el 100% de la
ventana disponible del cliente sea usada.
86

Porcentaje entre 1 y 100%

Si el total es superior/inferior a 100%, todos los porcentages
son proporcionalmente reducidos/aumentados para llegar a
este 100%.
Relativo
Un simple "*" se interpreta como un Frame de tamao relativo
que ocupara el resto del espacio disponible. Si hay varios "*" el
especio es dividido entre ellos. Un valor como 2*,* le indicaria
dividir el estacio en 2/3 y 1/3.
Ejemplos:
<FRAMESET ROWS="20%,60%,20%">
<FRAMESET COLS="100,*,100"> <FRAMESET
ROWS="*,30%,80">
2. <FRAME>
Define un Frame simple dentro del FRAMESET.
Tiene 6 parametros:SRC, NAME, MARGINWIDTH, MARGINHEIGHT,
SCROLLING, y NORESIZE.
SRC="url" Es la ruta del documeto a ser mostrado en un Frame
particular. Frames sin atributo SRC es mostrado en blanco.
NAME="nombre" Usado para signar un nombre, de manera que
puede ser direccionada desde otra ventana. Es opcional. El
nombre debe empezar con un caracter alfabetico.
_blank
Siempre carga en una nueva ventana, sin nombre.
_self
Siempre carga esta ventana sobre la del usuario.
_parent
Siempre carga esta ventana sobre su padre o sobre la del
usuario si no hay padre definido.
_top

87

Siempre carga esta ventana en el nivel mas alto o sobre la del

usuario si estas en el nivel superior.
Nota: Siempre hay nombres reservados para el atributo NAME del
comando <FRAME>, solo se podran referir a enlaces de llegada.
MARGINWIDTH="valor" Usado para controlar un margen en el
Frame. El valor debe ser en pixels y nunca podra ser menos a 1,
es decir tocar el marco. Es opcional.
MARGINHEIGHT="valor" Funciona igual al anterior solo que es
para controlar el margen superior/inferior.
SCROLLING="yes|no|auto" Usado para definir si el Frame
debera tener barra de desplazamiento o no. Yes resultara en una
barra siempre visible, No en una barra nunca visible y Auto
instrulle al navegardor que debe decidir. Por omision es Auto. Es
opciolnal.
NORESIZE Es una bandera que indica si el usuario podra o no
cambiar el tamao del Frame. Por omision esta es RESIZE y es
opcional.
3. <NOFRAMES>
Este atributo es para ser usado por los autores que quieran craer
alternativas para los visializadores de clientes que no puedan
visualizar los Frames. Los que son capaces ignorararn todas las
etiquetas aqui puestas.
4. Parametro TARGET
Usado para hacer que el resultado de un enlace se produsca en
otro frame de la misma ventana, pondriamos TARGET=nombre,
siendo "nombre" el nombre de un segundo frame. Pero hay unos
nombres reservados (es decir, que no se pueden usar para
denominar a un frame), que hacen que este parametro efectue
unas funciones especiales.
_self
Hace que el enlace se cargue en el propio frame. (default)
blank
Hace que se abra una nueva ventana y el enlace activado se
carga en ella, a pantalla completa.
88

_top
Hace que el enlace se cargue a pantalla completa, suprimiendo
todos los frames, pero sin que se cargue una nueva ventana.
Un error muy comun es olvidar poner este parametro en los
enlaces que estan en un frame, con lo que resulta que al ser
activados, la pagina llamada se carga dentro del propio frame,
algo muy molesto si esa pagina pertenece a otro sitio del Web y
aun mas grave si esa pagina tiene a su vez frames.
Algunos ejemplo:
<FRAMESET ROWS="85,*,65">
Con este comando se divide la pantalla en 3 regiones la superior
de 85 pixels de alto, una inferior de 65 pixels de alto y la media
ocupa el resto de la ventana.
<FRAME SCROLLING="no" NAME="titulo" NORESIZE
SRC="[Link]">
Con estos comnado se define la ventana superior (la de 85
pixels), sin barra de desplazamiento, no reajustable por el usuario
en su tamao y con un nombre "titulo".
<FRAMESET COLS="40%,60%">
Con este atributo se divide la ventana media en dos regiones de
40 a la izquierda y 60 % a la derecha.
<FRAME SCROLLING="yes" NAME="toc" SRC="[Link]">
<FRAME SCROLLING="yes" NAME="main page"
SRC="[Link]">
Con estos dos comandos se definen dos ventanas en la parte
media, llamadas "toc" y "main", que tiene asociadas una pagina
cada una, [Link] y [Link] respectivamente.
</FRAMESET>
Aqui cerramos el Frame anidado, el de las dos ventanas.
<FRAME SCROLLING="no" NAME="HLP buttons" NORESIZE
SRC="[Link]">
Aqui definimos las propiedades de la ventana inferior, la de 65
pixels de alto, sin barra de desplazamiento, no cambiable su
tamao. Ideal para la barra de herramientas de navegacion

89

Indice
Tabla de colores Hex
Bajar este manual completo en formato ZIP (1.06 MB)
Bajar el manual de JavaScript completo en formato ZIP (113 KB)
Comentarios, sugerencias, criticas, preguntas y pedidos al autor.
Para leer mi libro de visitas
HTML 0
<A>
<ADDRESS>
<BASE>
<BLOCKQUOTE>
<BODY>
<BR>
<DD>
<DIR>
<DL>
<DT>
<Hn>
<HEAD>
<HR>
<HTML>
<IMG>
<ISINDEX>
<LI>
<LINK>
<MENU>
<META>
<NEXTID>
<OL>
<P>

Anchor
Address
Base
Block Quote
Body
Line Break
Definition Item
Directory Link
Definition List
Definition Title
Headings
Head
Horizontal Line
HTML
Image
Is Index
List Term
Links
Menu List
Meta
Next ID
Ordered List
Paragraph
90

<PRE>
<TITLE>
<UL>
<!-- -->
<!DOCTYPE>

Preformatted
Title
UnOrdered List
Comment
Document Type

HTML 1
<B>
<CITE>
<CODE>
<EM>
<I>
<KBD>
<SAMP>
<STRONG>
<TT>
<VAR>

Bold
Citation
Code
Enphasis
Italic
Keyboard
Sample
Strong Emphasis
Typewriter Text
Variable

HTML 2
<FORM>
<INPUT>
<P>
<SELECT>
<TEXTAREA>

Form
Input
Paragraph
Select
Text Area

HTML 3
<ABBREV>
<ACRONYM>
<ARG>
<BYLINE>
<DFN>
<LIT>
<PERSON>
<Q>
<RANGE>
<SPOT>
<STYLE>
<TAB>

Abbreviation
Acronym
Argument
Byline
Defining Instance
Literal
Person
Inline Quote
Range
Spot
Style
Tab

91

HTML 3.2
<APPLET>
<BIG>
<CAPTION>
<CENTER>
<DIV>
<FONT>
<FRAME>
<FRAMESET>
<MAP>
<NOFRAMES>
<PARAM>
<SMALL>
<STRIKE>
<SUB>
<SUP>
<TABLE>
<TH>
<TD>
<TR>
<U>

Applet
Big
Table Caption
Center
Alineacion
Font
Frame
Frame Set
Client Side Mapping
No Frame
Param
Small
Strikethrough
Subscript
Superscript
Table
Table Header
Table Data
Table Row
Underline

NETSCAPE 1.1
<BASEFONT>
<BLINK>
<NOBR>
<WBR>
<ENBED>

Base Font
Blink
No Break
Word Break
Incrustar un OLE

EXPLORER 2
<BGSOUND>
<MARQUEE>

Background Sound
Marquee

EXPLORER 3
<ALIAS>
<OBJECT>
<PARAM>

Alias
Object
Param

92

Historia del HTML

Desde que aparece el HTML se forma un comit de trabajo en la
IETF, que deba regular el estndar oficial, pero Netscape, que era
en esa poca el lder indiscutible de los navegadores, introduca
con cada nueva versin comandos y parmetros no contemplados
en el estndar oficial.
Debido a su amplia difusin y aceptacin, otros navegadores
intentaban copiar esas innovaciones, pero debido a que Netscape
no especificaba completamente sus nuevos comandos, los
resultados no eran siempre los deseados. Todo ello provocaba una
gran confusin y numerosos problemas, cuando los autores
usaban estos elementos y comprobaban que no funcionaban de
forma adecuada en otros navegadores.
HTML 2.0
Para solucionar este problema el comit de HTML el IETF (Internet
Enginnering Task Force) propuso el borrador de un nuevo estndar
oficial. Cumpla su funcin perfectamente, pero muchos usuarios
del HTML queran tener un control mayor sobre sus documentos,
tanto en el formateo del texto como en la apariencia de la pgina.
HTML 3.0
El comit de trabajo del HTML de la IETF, propuso un borrador de
un nuevo estndar, el HTML 3.0 que inclua numerosas mejoras.
Pero debido a que era excesivamente extenso y ambicioso, los
navegadores solo implementaron una pequea parte del nuevo
estndar, lo que produca an mayor confusin y por lo que acab
finalmente siendo abandonado.
W3C
Cada vez era ms evidente la necesidad de un nuevo estndar
que fuera aceptado por todos. As se form otro comit el W3C
(World Wide Web Cummite), apoyado por los principales
vendedores de software (entre ellos, IBM, Microsoft, Novell,
Netscape, Sun, etc.).
Wilbur
Desarrollado durante todo el ao 1996 por el W3C, finalmente en
enero del 97 fue aprobado como el estndar HTML 3.2 El HTML
3.2 es totalmente compatible con el estndar anterior, pero
93

incorpora muchas de las innovaciones de los navegadores

comerciales (Netscape y Explorer principalmente), tales como
tablas, applets, texto que bordea las imgenes, etc., aunque no
todas an, como son: los frames, texto en moviento Marquee etc.
Cougar
A fines de julio del 97 se present el primer borrador pblico del
COUGAR (prximo estndar HTML 4.0). En el se incorporan las
nuevas especificaciones sobre tablas, frames, scripts, hojas de
estilo en cascada, accesibilidad por distintos medios e
internacionalizacin.

16 Colores estandar (4 bits)

BLACK NAVY
SILVER GRAY

BLUE

TEAL

AQUA

YELLO
GREEN OLIVE LIME
W

MAROO
FUCHSI PURPL
WHITE
N
A
E

RED

256 Colores RGB (8 bits)

CC330
0
CC333
FF3333
3
RED
FF0000
CC003
FF0033
3
CC000
000000
0
FF3300

FFCCC
990033
C
CC006
FFCC99
993300 MAROO
6
N
FF9966FF6699660000 990000
FF9999

663333990066330000

LIME
OLIVE
CCFFC GREEN
33FF3366FF66
99FF99
66FF00
66FF00
C
00FF00
00CC0
009900
006600003300
0
00CC0 009900
006600003300
94

0
009900006600

66FF00009900

00FFFF 3333FF
6666FF 9999FF
33FFFF 66FFFF
99FFFF CCFFFF
CCCCF 0000C
AQUA
TEAL 000099000099 BLUE
F
C
00FFFF
006666
0000FF
CCCCF
000066
000033000099
F

00CCC
009999006666003333
C
FFFF33 FFFF66 FFFF99 FFFFCC
YELLO
CCCC0
W
999900666600333300
0
FF33FF FF66FF FF99FF FFCCFF
FUCHSI
CC00C
A
990099660066330033
C

TEAL

7D337 7D667 7D997 7DCC7

D
D
D
D
CC00C AF00A
E100E1
990099
C
F

FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99

FFCCC
FFCCFF
C

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCCFFFFFF

95

CC000 CC003 CC006 CC009 CC00C

CC00FF
0
3
6
9
C
CC330 CC333 CC336 CC339 CC33C
CC33FF
0
3
6
9
C
CC660 CC663 CC666 CC669 CC66C
CC66FF
0
3
6
9
C
CC990 CC993 CC996 CC999 CC99C
CC99FF
0
3
6
9
C
CCCC0 CCCC3 CCCC6 CCCC9 CCCCC CCCCF
0
3
6
9
C
F
CCFF00CCFF33CCFF66CCFF99

CCFFC
CCFFFF
C

990000990033990066990099

9900C
9900FF
C

993300993333993366993399

9933C
9933FF
C

996600996633996666996699

9966C
9966FF
C

999900999933999966999999

9999C
9999FF
C

99CC0 99CC3 99CC6 99CC9 99CCC

99CCFF
0
3
6
9
C
99FF0099FF3399FF6699FF9999FFCC99FFFF
666600666633666666666699

6666C
6666FF
C

669900669933669966669999

6699C
6699FF
C
96

66CC0 66CC3 66CC6 66CC9 66CCC

66CCFF
0
3
6
9
C
66FF0066FF3366FF6666FF9966FFCC66FFFF
336600336633336666336699

3366C
3366FF
C

339900339933339966339999

3399C
3399FF
C

006600006633006666006699

0066C
0066FF
C

009900009933009966009999

0099C
0099FF
C

33CC0 33CC3 33CC6 33CC9 33CCC

33CCFF
0
3
6
9
C
00CC0 00CC3 00CC6 00CC9 00CCC
00CCFF
0
3
6
9
C
33FF0033FF3333FF6633FF9933FFCC33FFFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
663300663333663366663399

6633C
6633FF
C

660000660033660066660099

6600C
6600FF
C

333300333333333366333399

3333C
3333FF
C

003300003333003366003399

0033C
0033FF
C
97

330000330033330066330099

3300C
3300FF
C

0000C
0000FF
C
Para poner el fondo de la pagina de algun color uniforme, solo
debes aadir el parametro BGCOLOR en el comando BODY
(situada al principio del documento), ya sea usando el nombre de
uno de los 16 colores basicos o el codigo hexadecimal de la trica
rojo-verde-azul.
Los nmeros hexadecimales, se caracteriza por tener 16 dgitos
(en lugar de los diez de la numeracin decimal habitual o dos en
la binaria). Estos dgito son: 0 1 2 3 4 5 6 7 8 9 A B C D E F
As:, por ejemplo, el color rojo se representa como #FF0000,
porque tiene el toda la intensidad de rojo y nada de verde y azul.
Los colores basicos son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Para hacer un color ms oscuro, simplemente reduce la
intensidad del componente, dejando los otros dos iguales. As, el
rojo (#FF0000) se hace ms oscuro asi: #CC0000, #990000,
#660000, #330000 etc
Para hacer que un color ms pastel, simplemente variar los otros
dos colores dejando igual el principal. As, el rojo (#FF0000) se
hace ms claro asi: #FF3333, #FF6666, #FF9999, #FFCCCC etc
Ejemplo 1: <FONT SIZE=+2 COLOR=#33FF33>Esto esta en color
verde perico</FONT>
Esto esta en color verde perico
Ejemplo 2: Este fondo es #00CCCC
000000000033000066000099

98

Incrustaciones
NOTE: Este comando es reconocido por Netscape Navigator desde
la version 1.1
El comnado <EMBED> permite poner documentos directamente
en la pagina HTML, justamente como la capacidad OLE de
Windows.
La sintaxis es: <EMBED SRC="images/[Link]">
Tu puedes incrustar cualquier tipo de documento con este
comando pero el cliente tendra que tener instalada en su
maquina la aplicacion correspondiente.
Si un tamao es especificado (width y height), El objeto se
reescalara para entrar en dicha ventana. Por ejemplo es el caso
de una imagen tipo BMP seria:
<EMBED SRC=[Link] WIDTH=250 HEIGHT=50>
El objeto incrustado podra ser activado con un doble clic y
aparecera la aplicacion asociada (Paint Brush) en la ventana de
50 por 250 y ya estaras lista a editarla.
Netscape Plug-ins:
Con Netscapes un objeto incrustado podria hacer un llamado a un
plug-ins en lugar de una aplicacion externa al procesar el
comando <EMBED>. Esencialmente los plug-ins son modulos de
codigo dinamico asociados a un tipo de dato que el Netscape no
soporta de forma nativa.
Plug-ins can have one of three modes of operation. They can be
embedded, full-screen or hidden.
An embedded plug-in is a part of a larger HTML document, where
the plug-in is to be visible as a rectangular sub-part of an HTML
page. This is similar to an embedded GIF or JPG image, or an AVI
video (see In-Line video) today. Indeed, an example of such a
plug-in could be an AVI video player, where the video is played in
a viewing rectangle in the HTML document and can be made to
respond to user actions. (An example of an AVI playing plug-in is
currently available as beta code from the Netscape web site [Link] [Link])
A full-screen plug-in would be the viewer for a particular data type
that was not part of an HTML document. In this mode, a plug-in
will completely fill the inner frame of a Netscape window with its
representation of some data type. An example of this type of
99

plug-in would be an Adobe Acrobat viewer to view .PDF (portable

document format)
A hidden plug-in is one that needs no user visible elements. An
example of this might be a MIDI player, or a decompression
engine.
At the time of writing, only a few plug-in modules had been
released for Netscape. Paper Software Inc. released WebFX, a
VRML plug-in for Netscape 2.0. This plug-in uses the <EMBED>
element, together with the BORDER, ALIGN, WIDTH, HEIGHT y
SRC attributes, allowing the embedding of VRML 'world' objects
into HTML documents.
ALIGN soporta los valores left o right.
BORDER sets the border width to be displayed, defaulting with no
border.
WIDTH y HEIGHT funcionan de forma similar en el comando
<IMG>, excepto que que si son usados separadamente, el objeto
VRML sera escalado de forma uniforme de acuerdo al valor dado.
Es posible crear pantallas tipo 'post box' en un mundo VRML.
Simplemente usa <EMBED SRC="[Link]"> y el objeto se
presentara en una pequea ventana de 50x50 pixels. Para
emplear la pantalla completa es necesario incluir el objeto en un
enlace <A HREF=...>
Hojas de estilo en cascada.
Introduccin
Las hojas de estilo son un gran avance en el diseo de pginas
Web, ya que permiten un mejor manejo de la apariencia.
Hasta el momento era necesario recurrir a diversos trucos para
suplir las limitaciones del HTML y mejorar la presentacin de las
pginas. Estos trucos normalmente usados han tenido efectos
secundarios ya que suelen funcionar solo para algunas
navegadores o plataformas, aumentan la complejidad de la
pagina, tienen poca flexibilidad y tienden a aumentar el peso de
la pagina (mas Kbs).
Agunos de estos trucos son:
Uso de comandos no estndar.
Convertir el texto en imagen.
Usar imgenes transparentes para crear espacios en blanco.
100

 Uso de tablas para forzar determinadas presentaciones.

Uso programas o lenguajes ajenos al HTML para conseguir
determinados efectos. (JavaScrip, JAVA, CGIs, etc)
Las hojas de estilo en cascada nos devuelven el controlar de la
presentacin. Por ejemplo, nos permiten determinar margenes,
espacio interlneal, tipo y tamao de las fuentes, colores de texto
y fondo, as como la redefinicion a voluntad de cualquier
comando.
Adems hay otro aspecto muy importante en las hojas de estilo y
es que separan por completo la informacin para la
presentacin de una pgina de su contenido, con lo que se
facilita mucho el diseo y revisin de las pginas, pues se puede
variar la presentacin de una pgina, o de todo el conjunto de
ellas, sin cambiar una sola lnea del cdigo del HTML.
Como veremos ms adelante, se pueden definir variaciones de
diseo por medio de las "clases". Por ejemplo, si se necesitan
cinco estilos de prrafos diferentes, se pueden definir cinco
subcomandos <P>: [Link], [Link], [Link], [Link] y
[Link].
NOTA: Las hojas de estilo en cascada solo son soportadas por
Explorer 3.0 y Netscape 4.0 en adelante. Otros navegadores, o
versiones anteriores simplemente lo ignorarn.
Cmo funcionan ?
Las hojas de estilo en cascada nos permiten redefinir las reglas
que usa el navegador para presentar una pgina del Web.
Todos los navegadores tienen sus reglas. As, por ejemplo se
define H1 como un texto alineado a la izquierda, un par de puntos
mayor que el resto y en negrita.
Cada comando define sus propias reglas para mostrar el texto
que engloba. Con las hojas de estilo podemos cambiar cada una
de estas reglas si lo deseamos. Es decir, podemos modificar a
nuestro antojo el comportamiento de cada comando.
Hay tres maneras de aadir estilos a nuestras pginas Web.
1. Aadiendo instrucciones de estilo slo a comandos
concretos o a un grupo de ellos.
2. Incluyendo las instrucciones de estilo en el documento
HTML de una pgina concreta, permite cambiar la apariencia
de una hoja entera.
101

3. Enlazando varias paginas con un archivo de estilo, de

modo que se puede cambiar la apariencia de mltiples
pginas retocando dicho archivo .CSS
Podemos usar en nuestras pginas uno, dos o los tres mtodos
descritos, como se ver ms adelante.
1. Estilo para camandos concretos o grupos de comandos
Este mtodo es el apropiado si slo se desea cambiar el estilo en
unas secciones determinadas de una pgina. Con l podemos
manipular las propiedades de alguna comando o de algn grupo
de comandos.
Se hace aadiendo el parametro STYLE, que contiene una serie
de propiedades, dentro del comando correspondiente. Veamos el
siguiente ejemplo: <P>
"Este es un prrafo normal, sin mrgenes a la izquierda ni a la
derecha, con el color de su texto en negro".
<P STYLE="margin-left: 0.5in; margin-right: 0.5in; color:green">
"Quiero que este otro prrafo tenga un margen izquierdo de
media pulgada, al igual que el margen derecho. Adems quiero
que su texto sea de color verde".
Que se ver (en los navegadores que soportan hojas de estilo) de
esta manera:
"Este es un prrafo normal, sin mrgenes a la izquierda ni a la
derecha, con el color de su texto en negro". "Quiero que este otro
prrafo tenga un margen izquierdo de media pulgada, al igual que
el margen derecho. Adems quiero que su texto sea de color
verde".
Como se ve en este ejemplo, hemos variado la manera de cmo
se comporta habitualmente la comando <P>. Podamos haber
conseguido otras muchas ms cosas, como se ver ms adelante.
Obsrvese la sintaxis del parametro STYLE. Se ponen entre
comillas una serie de propiedades (por ejemplo, margin-left), y
despus de dos puntos se pone el valor de esa propiedad (en este
caso, 0.5in o sea, 0.5 pulgadas). Las distintas propiedades
debern estar separadas por punto y coma.
Si queremos cambiar la apariencia de una seccin entera (que
agrupe un conjunto de comandos), se puede usar el comando
<DIV>, con lo que definimos el estilo globalmente para esa
seccin.
102

En el siguiente ejemplo cambiamos el color (a rojo) y el tamao

de la fuente (a 16 puntos) de un bloque de comandos por medio
del comando <DIV>, lo que tiene el mismo efecto que si
hubiramos asignado este estilo separadamente a cada una de
las comandos englobados (<P>, <UL> y <LI>):
<DIV STYLE="font-size: 16pt; color: red">
<P>La definicin del estilo (rojo y 16 puntos), afecta a todo el
bloque de comandos.
<P>Este texto tambin es rojo y tiene 16 puntos de altura.
<P>Al igual que esta lnea.
</DIV>
Que se ve de la siguiente manera:
La definicin del estilo (rojo y 16 puntos), afecta a todo el bloque
de comandos.
Este texto tambin es rojo y tiene 16 puntos de altura.
Al igual que esta lnea.
Qu ocurre si a una de los comandos englobados por DIV le
introducimos un estilo distinto ? Comprobmoslo introduciendo un
estilo propio al segundo comando <P>:
<DIV STYLE="font-size: 16pt; color: red">
<P>
Veamos si la definicin del estilo (rojo y 16 puntos), afecta a todo
el bloque de comandos, hasta el comando de cierre de DIV.
<P STYLE="color: blue">Esta lnea es azul, a pesar de estar
englobada dentro de DIV, porque tiene su propio estilo.
<P>Esta otra cumple con el estilo de DIV, porque no tiene estilo
propio.
</DIV>
Este es el resultado:
Veamos si la definicin del estilo (rojo y 16 puntos), afecta a todo
el bloque de comandos. Esta lnea es azul, a pesar de estar
englobada dentro de DIV, porque tiene su propio estilo.
Esta otra cumple con el estilo de DIV, porque no tiene estilo
propio.
Como se comprueba en este caso, el estilo dentro de un comando
concretaotiene preferencia sobre el estilo del bloque, impuesto
por DIV.
La preferencia de unos mtodos sobre otros, se debe al orden en
que estos son activados por el navegador, por este motivo es que
103

se llamen Hojas de estilo en cascada ya que hay una cascada

de mtodos para aplicar los estilos, teniendo un orden de
preferencia riguroso de unos sobre otros.
Este mtodo de introducir el estilo en comandos concretas o en
conjuntos de comandos es sencillo de aplicar y es el adecuado si
slo se desea hacer algn cambio puntual en una pgina. Sin
embargo no es la verdadera potencia de los hojas de estilo.
2. Inclusin global del estilo en un documento HTML
Se hace poniendo un bloque de instrucciones dentro de los
comandos <STYLE> y </STYLE>, que deber estar dentro de la
cabecera del documento, despus del ttulo, entre las comandos
</TITLE> y </HEAD>.
Este comando <STYLE> tiene un parametro, TYPE, que
especifica el tipo de medio en que va a ser publicado en Internet,
en nuestro caso ser "text/css", que permitir a los navegadores
que no soporten estilos ignorarlos. Por tanto, la estructura ser la
siguiente:
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
[bloque de instruciones de estilo]
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las comandos que componen la pgina]
</BODY>
</HTML>
Veamos ahora con un ejemplo, cmo se escribe el bloque de
instrucciones del estilo, incluido dentro de la comando <STYLE>
(en el captulo siguiente se ve con detalle cada uno de los
atributos):
<STYLE TYPE="text/css">
BODY {background: yellow ;font-size: 10pt; font-family: Arial;
margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color:
red}
104

H2 {font-size: 12pt;font-weight: bold; color: red}

DIV {background: URL([Link])}
</STYLE>
Como se ve en este ejemplo, se ponen las distintas comandos a
las que se quiere atribuir un estilo (en este caso BODY, H1, H2 y
DIV, pero podran haber sido otras cualesquiera); a continuacin
del nombre de cada comando, y englobadas por los signos "{" y
"}" van las distintas propiedades con sus respectivos valores,
separadas unas de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML,
donde se ha indicado antes, veremos que cada vez que se usa
una de las comandos que tienen una definicin de estilo, no se
comportar de la forma habitual, sino tal como la hemos definido.
El resto de los comandos, que no estn incluidas en el bloque de
definicin del estilo, se comportarn de la forma habitual.
3. Enlazando distintos documentos a una hoja de estilo
Si nuestro sitio del Web est compuesto por muchas pginas, y
queremos darles un estilo uniforme a unas cuantas, en vez de
incluir un bloque de definicin de estilo repetido en cada una de
ellas (como se ha visto en la seccin anterior), se puede
establecer un enlace a un archivo de texto que contiene el
bloque de definicin del estilo.
Supongamos que queremos aplicar a unas cuantas pginas el
estilo visto en el ejemplo anterior. Tendramos que crear un
archivo de texto como este:
BODY {background: yellow ;font-size: 10pt; font-family: Arial;
margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color:
red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL([Link])}
Obsrvese que no tiene ningun comando, pues no es un
documento normal HTML, sino que es un archivo de texto que
slo contiene el bloque de definicin del estilo.
Se guarda con el nombre que se quiera, pero tiene que tener
necesariamente la extensin .css Supongamos que lo guardamos
con el nombre de [Link]
105

En todas las pginas que queremos que tengan este estilo

concreto, slamente deberemos de aadir (en el mismo sitio de la
cabecera que para el caso anterior, es decir entre </TITLE> y
</HEAD>, el siguiente comando:
<LINK REL=stylesheet HREF=[Link] TYPE="text/css">
Aqu se ha supuesto que el archivo [Link] se ha dejado en el
mismo directorio donde estn los documentos HTML. Si no es as,
es decir, si est en otro subdirectorio en el servidor, habra que
indicar la ruta (por, ejemplo: HREF=ruta/[Link]).
Un ejemplo de este mtodo lo constituye este manual, en donde
todos los captulos estn enlazados con un archivo que contiene
la hoja de estilo para todos ellos, llamado [Link].
Mezclando los mtodos
Como se ha visto anteriormente, hay tres mtodos de aplicar las
hojas de estilo en cascada.
Se pueden aplicar ms de uno a la vez en una misma
pgina ?
S. Por ejemplo, en la confeccin de este manual se utilizan
simultneamente algunos de ellos. En las pginas del ndice y de
la portada se utilizan el segundo mtodo (inclusin de la hoja de
estilo en el documento HTML) y tambin el primero (inclusin del
estilo en comandos concretas). Y en la totalidad de los captulos
se usan el tercero (enlace a la hoja de estilo) y el primero.
Qu ocurre si hay informacin contradictoria entre ellos ?
Para evitar conflictos entre los distintos mtodos usados
simultneamente, existe un orden de preferencia, es decir, cul
prevalecer sobre el otro si dan rdenes contradictorias sobre un
aspecto concreto.
El orden de preferencia es el siguiente (de mayor a menor):
1. Estilo dentro de una comando.
2. Bloque de estilo en la cabecera del documento.
3. Enlace a un archivo que contiene la hoja de estilo .CSS
Esto quiere decir que una orden de estilo, por ejemplo el color del
texto, puesta dentro de un comando, prevalecer sobre la que
106

est indicada en los otros dos mtodos, si es que se usan en esa

pgina.
Lo ms prctico es usar el tercer mtodo (enlace a una hoja de
estilo), para dar una apariencia consistente a todas las pginas, y
si es necesario modificar un aspecto concreto en alguna de ellas,
usar el primero o el segundo metodo.
Hojas de estilo en cascada.
Atributos
A continuacin se muestra una tabla con el resumen de los
parametros que se pueden incluir en las hojas de estilo. Pulsando
el enlace con el nombre del atributo nos lleva a la seccin donde
se comenta con m s detalle.
Atrib
Descripcin
Valores
Ejemplo
uto
{font-size:
12pt}
Puntos (pt)
{font-size:
Pixels (px)
Font- Establece el
24px}
centmetros
Size tamao de texto.
{font-size:
(cm)
5cm}
pulgadas (in)
{font-size:
1in}
Nombre de la {font-family:
FontEstablece el tipo
fuente o
"Comic Sans
Famil
de fuente.
familia de
MS",Sansy
fuente
Serif}
Extra-Light
Light
Font- Establece el peso
Demi-Light
{font-weight:
Weig de la fuente, pero Medium
bold}
ht
dependen de ella. Demi-Bold
Bold
Extra-Bold
Normal
Font- Establece el texto Italic
{font-style:
Style como letra cursiva. Minusculas
italic}
oblicuas
107

puntos (pt)
pixels (px)
Line- Establece la
centmetros
Heig distancia entre
(cm)
ht
lneas.
pulgadas (in)
porcentaje
(%)
Nombre del
Establece el color
Color
color
del texto.
valores RGB
None
(ninguna)
TextUnderline
Deco Subraya o remarca
(Subratado)
ratio el texto.
Italic (cursiva)
n
Line-Through
(Tachado)
Puntos (pt)
Establece el
pixels (px)
Margi
mrgen izquierdo
centmetros
n-left
de la p gina
(cm)
pulgadas (in)
Puntos (pt)
Margi Establece el
pixels (px)
nmrgen derecho de centmetros
right la p gina.
(cm)
pulgadas (in)
Puntos (pt)
Establece el
pixels (px)
Margi
mrgen superior
centmetros
n-top
de la p gina.
(cm)
pulgadas (in)
Establece la
Left
Textalineacion del
Center
align
texto.
Right
Text- Establece la
Puntos (pt)
Inden indentacin del
pixels (px)
t
texto.
centmetros

{Line-Height:
24pt}

{color: blue}

{textdecoration:
underline}

{margin-left:
3cm}

{margin-right:
3cm}

{margin-top:
-20px}
{text-align:
right}
{text-indent:
1.5cm}
108

(cm)
pulgadas (in)
Back Establece la
grou imagen o el color
nd
del fondo.

URL,
nombre del
color
valor RGB

{background:
#33CC00}
{background:
red}
{background:
URL([Link])}

Hojas de estilo en cascada.

Consejos de uso
En este captulo se amplaan los conceptos vistos en los dos
captulos anteriores, y se introducen algunos nuevos sobre las
hojas de estilo en cascada.
Agrupando distintos atributos
Supongamos que se quieren atribuir los mismos atributos a
diferentes comandos, como por ejemplo:
H1 {font-size: 15pt;
font-weight: bold;
color: maroon}
H2 {font-size: 15pt;
font-weight: bold;
color: maroon}
H3 {font-size: 15pt;
font-weight: bold;
color: maroon}
Se pueden agrupar de esta manera:
H1, H2, H3 {font-size: 15pt;
font-weight: bold; color: maroon}
Agrupacin de los atributos del texto
En el capmtulo anterior se han visto una serie de atributos
relacionados con la apariencia del texto. Se pueden simplificar
agrupandolos de una manera determinada. Asm, por ejemplo, en
lugar de:
P {font-weight: bold; font-style: italic; font-size: 12pt;
line-height: 20pt; font-family: Times, serif; }
Se pueden agrupar en un znico atributo llamado font:
109

P {font: bold italic 12pt/20pt Times, serif}

Nota: El orden de los atributos es significativo. Los atributos
Font-Weight y Font-Style se deben especificar antes que los
demas.
Agrupacin de los atributos de los mrgenes
Tambiin se pueden agrupar los tres distintos atributos para los
margenes (superior, derecho e izquierdo) en un znico atributo
llamado margin.
As, por ejemplo, en lugar de:
BODY {margin-top: 20px; margin-right: -10px; margin-left: -10px}
Se puede poner:
BODY {margin: 20px -10px-10px}
El orden de colocacisn es significativo. Debe ser: superior (top),
derecho (right) e izquierdo (left). Si se pone un znico valor, sera
aplicado a los tres margenes.
Variaciones por medio de clases
En el capmtulo 23 vimos que uno de los mitodos era la inclusisn
global del estilo, en el que se definman los estilos de un bloque de
distintas comandos. Vimos allm este ejemplo:
<STYLE TYPE="text/css"> BODY {background: yellow ; font-size:
10pt;
font-family: Arial; margin-left: 0.5in; margin-right: 0.5in} H1
{background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red} DIV
{background:
URL([Link])} </STYLE>
Como se puede ver, se define para la comando H2, por ejemplo,
que su texto sea de color rojo (red). Pero esto hace que,
obligatoriamente, todas las cabeceras de nivel H2 sean de este
color en toda la p gina.
Pero nos podrma interesar, por el motivo que sea, que unas veces
tenga el color rojo y otras veces sea de otros colores. Para
conseguirlo, se pueden emplear unas clases (variantes de esta
comando). Para ello, se define separadamente la comando H2,
seguida de un punto y un nombre que queramos, como por
ejemplo:
[Link] {font-size: 12pt; font-weight: bold; color:
110

red} [Link] {font-size: 12pt; font-weight: bold; color: green}

H2.
azul {font-size: 12pt; font-weight: bold; color: blue}
y en la pagina, podremos utilizar, segn nos convenga, una u otra
de estas variantes de la siguiente manera:
<H2 CLASS=rojo>Esta cabecera sera de color rojo</H2>
<H2 CLASS=verde>Esta cabecera sera de color verde</H2>
<H2 CLASS=azul>Esta cabecera sera de color
azul</H2>
Como se ve, esto nos da una flexiblidad azn mayor para obtener
la apariencia que queramos en nuestra paginas.
Aplicacisn de estilo a los enlaces
Las hojas de estilo tambiin permiten modificar a voluntad la
apariencia de los enlaces, asignando cualquiera de los atributos
vistos (color del texto, tamaqo de la fuente, existencia o no del
subrayado, etc.).
Hay dos tipos de enlaces que se pueden modificar:
A:link enlaces que todavma no han sido visitados (pulsados)
A:visited enlaces que ya han sido visitados (pulsados)
Por ejemplo:
A:link {color: red} A:visited {color: green}
hace que los enlaces sin visitar sean de color rojo, y una vez
visitados se pongan de color verde.
Si se les aplica el atributo text-decoration visto en el Capmtulo
anterior, ajustado al parametro none (ninguno), hace que los
enlaces no estin subrayados. Ejemplo:
A:visited {color: fuchsia; text-decoration: none}
hace que los enlaces visitados sean de color fucsia y no estn
subrayados.
Comentarios
Se pueden aadir comentarios propios a las hojas de estilo,
que pueden servir de recordatorio posterior. Se pueden colocar en
cualquier sitio de la especificacisn, siempre que vayan
englobados entre los caracteres /* y */. Ejemplo:
111

H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las

cabeceras de nivel 1 */
Diseando para todos los navegadores
Si se usa el metodo de incluir un bloque de estilo en la cabecera,
que consiste en poner las distintas instrucciones de estilo entre
las comandos <STYLE> y </STYLE>, tal como en el ejemplo que
se visalisara:
<STYLE TYPE="text/css"> BODY
{background: yellow ; font-size: 10pt; font-family: Arial;
margin-left: 2cm; margin-right: 2cm} H1 {background: blue;
font-size: 14pt; font-weight: bold; color: red} H2 {font-size: 12pt;
font-weight: bold; color: red} DIV {background: URL([Link])}
</STYLE>
en los navegadores que no implementen las hojas de estilo se
ignoraran las comandos <STYLE> y </STYLE>, pero podr
ocurrir que aparezca como texto el bloque de definicin del estilo.
Para evitar esto, es conveniente englobar dicho bloque de
informacin entre los smbolos <!-- y -->. Por tanto, es
conveniente poner el bloque de definicin del estilo de esta
manera:
<STYLE TYPE="text/css"> <!-- BODY {background: yellow
; font-size: 10pt; font-family: Arial; margin-left: 2cm;
margin-right: 2cm} H1 {background: blue; font-size: 14pt;
font-weight: bold; color: red} H2 {font-size: 12pt; font-weight:
bold; color: red} DIV {background: URL([Link])} -->
</STYLE>
Aprovechando la herencia entre comandos
Como sabemos, las comandos de un documento HTML tienen una
estructura definida, que de manera muy resumida se puede poner
de esta forma:
<HTML> <BODY> (conjunto de
comandos que conforman la pagina) </BODY> </HTML>
Como se puede ver, el comando <BODY> engloba a todas las
demas. Si se la asigna un estilo determinado a esta comando,
todos los elementos que estin dentro de la pagina (tablas, listas,
parrafos, etc.) heredaran este estilo.
112

Por tanto, para establecer un estilo global a la pagina entera, lo

mas apropiado es atribumserlo a la comando <BODY>. Por
ejemplo:
BODY {font: 10pt/11pt
Arial, Helvetica, sans-serif; background: url([Link]);
margin-left: 2cm; margin-right: 2cm}
Establece para la pagina entera la fuente, separacin entre lneas,
imagen de fondo y espesor de los margenes. Si se precisa que
ciertos elementos concretos dentro de la pagina tengan otras
caractermsticas distinta a la general, entonces hay que definirlas
por separado.

Hojas de estilo en cascada.

Introduccin
Las hojas de estilo son un gran avance en el diseo de pginas
Web, ya que permiten un mejor manejo de la apariencia.
Hasta el momento era necesario recurrir a diversos trucos para
suplir las limitaciones del HTML y mejorar la presentacin de las
pginas. Estos trucos normalmente usados han tenido efectos
secundarios ya que suelen funcionar solo para algunas
navegadores o plataformas, aumentan la complejidad de la
pagina, tienen poca flexibilidad y tienden a aumentar el peso de
la pagina (mas Kbs).
Agunos de estos trucos son:
Uso de comandos no estndar.
Convertir el texto en imagen.
Usar imgenes transparentes para crear espacios en blanco.
Uso de tablas para forzar determinadas presentaciones.
Uso programas o lenguajes ajenos al HTML para conseguir
determinados efectos. (JavaScrip, JAVA, CGIs, etc)
Las hojas de estilo en cascada nos devuelven el controlar de la
presentacin. Por ejemplo, nos permiten determinar margenes,
espacio interlneal, tipo y tamao de las fuentes, colores de texto
113

y fondo, as como la redefinicion a voluntad de cualquier

comando.
Adems hay otro aspecto muy importante en las hojas de estilo y
es que separan por completo la informacin para la
presentacin de una pgina de su contenido, con lo que se
facilita mucho el diseo y revisin de las pginas, pues se puede
variar la presentacin de una pgina, o de todo el conjunto de
ellas, sin cambiar una sola lnea del cdigo del HTML.
Como veremos ms adelante, se pueden definir variaciones de
diseo por medio de las "clases". Por ejemplo, si se necesitan
cinco estilos de prrafos diferentes, se pueden definir cinco
subcomandos <P>: [Link], [Link], [Link], [Link] y
[Link].
NOTA: Las hojas de estilo en cascada solo son soportadas por
Explorer 3.0 y Netscape 4.0 en adelante. Otros navegadores, o
versiones anteriores simplemente lo ignorarn.
Cmo funcionan ?
Las hojas de estilo en cascada nos permiten redefinir las reglas
que usa el navegador para presentar una pgina del Web.
Todos los navegadores tienen sus reglas. As, por ejemplo se
define H1 como un texto alineado a la izquierda, un par de puntos
mayor que el resto y en negrita.
Cada comando define sus propias reglas para mostrar el texto
que engloba. Con las hojas de estilo podemos cambiar cada una
de estas reglas si lo deseamos. Es decir, podemos modificar a
nuestro antojo el comportamiento de cada comando.
Hay tres maneras de aadir estilos a nuestras pginas Web.
1. Aadiendo instrucciones de estilo slo a comandos
concretos o a un grupo de ellos.
2. Incluyendo las instrucciones de estilo en el documento
HTML de una pgina concreta, permite cambiar la apariencia
de una hoja entera.
3. Enlazando varias paginas con un archivo de estilo, de
modo que se puede cambiar la apariencia de mltiples
pginas retocando dicho archivo .CSS
Podemos usar en nuestras pginas uno, dos o los tres mtodos
descritos, como se ver ms adelante.
114

1. Estilo para camandos concretos o grupos de comandos

Este mtodo es el apropiado si slo se desea cambiar el estilo en
unas secciones determinadas de una pgina. Con l podemos
manipular las propiedades de alguna comando o de algn grupo
de comandos.
Se hace aadiendo el parametro STYLE, que contiene una serie
de propiedades, dentro del comando correspondiente. Veamos el
siguiente ejemplo: <P>
"Este es un prrafo normal, sin mrgenes a la izquierda ni a la
derecha, con el color de su texto en negro".
<P STYLE="margin-left: 0.5in; margin-right: 0.5in; color:green">
"Quiero que este otro prrafo tenga un margen izquierdo de
media pulgada, al igual que el margen derecho. Adems quiero
que su texto sea de color verde".
Que se ver (en los navegadores que soportan hojas de estilo) de
esta manera:
"Este es un prrafo normal, sin mrgenes a la izquierda ni a la
derecha, con el color de su texto en negro". "Quiero que este otro
prrafo tenga un margen izquierdo de media pulgada, al igual que
el margen derecho. Adems quiero que su texto sea de color
verde".
Como se ve en este ejemplo, hemos variado la manera de cmo
se comporta habitualmente la comando <P>. Podamos haber
conseguido otras muchas ms cosas, como se ver ms adelante.
Obsrvese la sintaxis del parametro STYLE. Se ponen entre
comillas una serie de propiedades (por ejemplo, margin-left), y
despus de dos puntos se pone el valor de esa propiedad (en este
caso, 0.5in o sea, 0.5 pulgadas). Las distintas propiedades
debern estar separadas por punto y coma.
Si queremos cambiar la apariencia de una seccin entera (que
agrupe un conjunto de comandos), se puede usar el comando
<DIV>, con lo que definimos el estilo globalmente para esa
seccin.
En el siguiente ejemplo cambiamos el color (a rojo) y el tamao
de la fuente (a 16 puntos) de un bloque de comandos por medio
del comando <DIV>, lo que tiene el mismo efecto que si
hubiramos asignado este estilo separadamente a cada una de
las comandos englobados (<P>, <UL> y <LI>):
115

<DIV STYLE="font-size: 16pt; color: red">

<P>La definicin del estilo (rojo y 16 puntos), afecta a todo el
bloque de comandos.
<P>Este texto tambin es rojo y tiene 16 puntos de altura.
<P>Al igual que esta lnea.
</DIV>
Que se ve de la siguiente manera:
La definicin del estilo (rojo y 16 puntos), afecta a todo el bloque
de comandos.
Este texto tambin es rojo y tiene 16 puntos de altura.
Al igual que esta lnea.
Qu ocurre si a una de los comandos englobados por DIV le
introducimos un estilo distinto ? Comprobmoslo introduciendo un
estilo propio al segundo comando <P>:
<DIV STYLE="font-size: 16pt; color: red">
<P>
Veamos si la definicin del estilo (rojo y 16 puntos), afecta a todo
el bloque de comandos, hasta el comando de cierre de DIV.
<P STYLE="color: blue">Esta lnea es azul, a pesar de estar
englobada dentro de DIV, porque tiene su propio estilo.
<P>Esta otra cumple con el estilo de DIV, porque no tiene estilo
propio.
</DIV>
Este es el resultado:
Veamos si la definicin del estilo (rojo y 16 puntos), afecta a todo
el bloque de comandos. Esta lnea es azul, a pesar de estar
englobada dentro de DIV, porque tiene su propio estilo.
Esta otra cumple con el estilo de DIV, porque no tiene estilo
propio.
Como se comprueba en este caso, el estilo dentro de un comando
concretaotiene preferencia sobre el estilo del bloque, impuesto
por DIV.
La preferencia de unos mtodos sobre otros, se debe al orden en
que estos son activados por el navegador, por este motivo es que
se llamen Hojas de estilo en cascada ya que hay una cascada
de mtodos para aplicar los estilos, teniendo un orden de
preferencia riguroso de unos sobre otros.
Este mtodo de introducir el estilo en comandos concretas o en
conjuntos de comandos es sencillo de aplicar y es el adecuado si
116

slo se desea hacer algn cambio puntual en una pgina. Sin

embargo no es la verdadera potencia de los hojas de estilo.
2. Inclusin global del estilo en un documento HTML
Se hace poniendo un bloque de instrucciones dentro de los
comandos <STYLE> y </STYLE>, que deber estar dentro de la
cabecera del documento, despus del ttulo, entre las comandos
</TITLE> y </HEAD>.
Este comando <STYLE> tiene un parametro, TYPE, que
especifica el tipo de medio en que va a ser publicado en Internet,
en nuestro caso ser "text/css", que permitir a los navegadores
que no soporten estilos ignorarlos. Por tanto, la estructura ser la
siguiente:
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
[bloque de instruciones de estilo]
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las comandos que componen la pgina]
</BODY>
</HTML>
Veamos ahora con un ejemplo, cmo se escribe el bloque de
instrucciones del estilo, incluido dentro de la comando <STYLE>
(en el captulo siguiente se ve con detalle cada uno de los
atributos):
<STYLE TYPE="text/css">
BODY {background: yellow ;font-size: 10pt; font-family: Arial;
margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color:
red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL([Link])}
</STYLE>
Como se ve en este ejemplo, se ponen las distintas comandos a
las que se quiere atribuir un estilo (en este caso BODY, H1, H2 y
117

DIV, pero podran haber sido otras cualesquiera); a continuacin

del nombre de cada comando, y englobadas por los signos "{" y
"}" van las distintas propiedades con sus respectivos valores,
separadas unas de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML,
donde se ha indicado antes, veremos que cada vez que se usa
una de las comandos que tienen una definicin de estilo, no se
comportar de la forma habitual, sino tal como la hemos definido.
El resto de los comandos, que no estn incluidas en el bloque de
definicin del estilo, se comportarn de la forma habitual.
3. Enlazando distintos documentos a una hoja de estilo
Si nuestro sitio del Web est compuesto por muchas pginas, y
queremos darles un estilo uniforme a unas cuantas, en vez de
incluir un bloque de definicin de estilo repetido en cada una de
ellas (como se ha visto en la seccin anterior), se puede
establecer un enlace a un archivo de texto que contiene el
bloque de definicin del estilo.
Supongamos que queremos aplicar a unas cuantas pginas el
estilo visto en el ejemplo anterior. Tendramos que crear un
archivo de texto como este:
BODY {background: yellow ;font-size: 10pt; font-family: Arial;
margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color:
red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL([Link])}
Obsrvese que no tiene ningun comando, pues no es un
documento normal HTML, sino que es un archivo de texto que
slo contiene el bloque de definicin del estilo.
Se guarda con el nombre que se quiera, pero tiene que tener
necesariamente la extensin .css Supongamos que lo guardamos
con el nombre de [Link]
En todas las pginas que queremos que tengan este estilo
concreto, slamente deberemos de aadir (en el mismo sitio de la
cabecera que para el caso anterior, es decir entre </TITLE> y
</HEAD>, el siguiente comando:
<LINK REL=stylesheet HREF=[Link] TYPE="text/css">
118

Aqu se ha supuesto que el archivo [Link] se ha dejado en el

mismo directorio donde estn los documentos HTML. Si no es as,
es decir, si est en otro subdirectorio en el servidor, habra que
indicar la ruta (por, ejemplo: HREF=ruta/[Link]).
Un ejemplo de este mtodo lo constituye este manual, en donde
todos los captulos estn enlazados con un archivo que contiene
la hoja de estilo para todos ellos, llamado [Link].
Mezclando los mtodos
Como se ha visto anteriormente, hay tres mtodos de aplicar las
hojas de estilo en cascada.
Se pueden aplicar ms de uno a la vez en una misma
pgina ?
S. Por ejemplo, en la confeccin de este manual se utilizan
simultneamente algunos de ellos. En las pginas del ndice y de
la portada se utilizan el segundo mtodo (inclusin de la hoja de
estilo en el documento HTML) y tambin el primero (inclusin del
estilo en comandos concretas). Y en la totalidad de los captulos
se usan el tercero (enlace a la hoja de estilo) y el primero.
Qu ocurre si hay informacin contradictoria entre ellos ?
Para evitar conflictos entre los distintos mtodos usados
simultneamente, existe un orden de preferencia, es decir, cul
prevalecer sobre el otro si dan rdenes contradictorias sobre un
aspecto concreto.
El orden de preferencia es el siguiente (de mayor a menor):
1. Estilo dentro de una comando.
2. Bloque de estilo en la cabecera del documento.
3. Enlace a un archivo que contiene la hoja de estilo .CSS
Esto quiere decir que una orden de estilo, por ejemplo el color del
texto, puesta dentro de un comando, prevalecer sobre la que
est indicada en los otros dos mtodos, si es que se usan en esa
pgina.
Lo ms prctico es usar el tercer mtodo (enlace a una hoja de
estilo), para dar una apariencia consistente a todas las pginas, y
si es necesario modificar un aspecto concreto en alguna de ellas,
usar el primero o el segundo metodo.
119

Hojas de estilo en cascada.

Atributos
A continuacin se muestra una tabla con el resumen de los
parametros que se pueden incluir en las hojas de estilo. Pulsando
el enlace con el nombre del atributo nos lleva a la seccin donde
se comenta con m s detalle.
Atrib
Descripcin
Valores
Ejemplo
uto
{font-size:
12pt}
Puntos (pt)
{font-size:
Pixels (px)
Font- Establece el
24px}
centmetros
Size tamao de texto.
{font-size:
(cm)
5cm}
pulgadas (in)
{font-size:
1in}
Nombre de la {font-family:
FontEstablece el tipo
fuente o
"Comic Sans
Famil
de fuente.
familia de
MS",Sansy
fuente
Serif}
Extra-Light
Light
Font- Establece el peso
Demi-Light
{font-weight:
Weig de la fuente, pero Medium
bold}
ht
dependen de ella. Demi-Bold
Bold
Extra-Bold
Normal
Font- Establece el texto Italic
{font-style:
Style como letra cursiva. Minusculas
italic}
oblicuas
puntos (pt)
pixels (px)
Line- Establece la
centmetros
{Line-Height:
Heig distancia entre
(cm)
24pt}
ht
lneas.
pulgadas (in)
porcentaje
(%)
120

Nombre del
color
valores RGB
None
(ninguna)
TextUnderline
Deco Subraya o remarca
(Subratado)
ratio el texto.
Italic (cursiva)
n
Line-Through
(Tachado)
Puntos (pt)
Establece el
pixels (px)
Margi
mrgen izquierdo
centmetros
n-left
de la p gina
(cm)
pulgadas (in)
Puntos (pt)
Margi Establece el
pixels (px)
nmrgen derecho de centmetros
right la p gina.
(cm)
pulgadas (in)
Puntos (pt)
Establece el
pixels (px)
Margi
mrgen superior
centmetros
n-top
de la p gina.
(cm)
pulgadas (in)
Establece la
Left
Textalineacion del
Center
align
texto.
Right
Puntos (pt)
Text- Establece la
pixels (px)
Inden indentacin del
centmetros
t
texto.
(cm)
pulgadas (in)
Back Establece la
URL,
grou imagen o el color
nombre del
nd
del fondo.
color
valor RGB
Establece el color
Color
del texto.

{color: blue}

{textdecoration:
underline}

{margin-left:
3cm}

{margin-right:
3cm}

{margin-top:
-20px}
{text-align:
right}
{text-indent:
1.5cm}
{background:
#33CC00}
{background:
red}
{background:
121

URL([Link])}
Hojas de estilo en cascada.
Consejos de uso
En este captulo se amplaan los conceptos vistos en los dos
captulos anteriores, y se introducen algunos nuevos sobre las
hojas de estilo en cascada.
Agrupando distintos atributos
Supongamos que se quieren atribuir los mismos atributos a
diferentes comandos, como por ejemplo:
H1 {font-size: 15pt;
font-weight: bold;
color: maroon}
H2 {font-size: 15pt;
font-weight: bold;
color: maroon}
H3 {font-size: 15pt;
font-weight: bold;
color: maroon}
Se pueden agrupar de esta manera:
H1, H2, H3 {font-size: 15pt;
font-weight: bold; color: maroon}
Agrupacin de los atributos del texto
En el capmtulo anterior se han visto una serie de atributos
relacionados con la apariencia del texto. Se pueden simplificar
agrupandolos de una manera determinada. Asm, por ejemplo, en
lugar de:
P {font-weight: bold; font-style: italic; font-size: 12pt;
line-height: 20pt; font-family: Times, serif; }
Se pueden agrupar en un znico atributo llamado font:
P {font: bold italic 12pt/20pt Times, serif}
Nota: El orden de los atributos es significativo. Los atributos
Font-Weight y Font-Style se deben especificar antes que los
demas.
Agrupacin de los atributos de los mrgenes
Tambiin se pueden agrupar los tres distintos atributos para los
margenes (superior, derecho e izquierdo) en un znico atributo
122

llamado margin.
As, por ejemplo, en lugar de:
BODY {margin-top: 20px; margin-right: -10px; margin-left: -10px}
Se puede poner:
BODY {margin: 20px -10px-10px}
El orden de colocacisn es significativo. Debe ser: superior (top),
derecho (right) e izquierdo (left). Si se pone un znico valor, sera
aplicado a los tres margenes.
Variaciones por medio de clases
En el capmtulo 23 vimos que uno de los mitodos era la inclusisn
global del estilo, en el que se definman los estilos de un bloque de
distintas comandos. Vimos allm este ejemplo:
<STYLE TYPE="text/css"> BODY {background: yellow ; font-size:
10pt;
font-family: Arial; margin-left: 0.5in; margin-right: 0.5in} H1
{background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red} DIV
{background:
URL([Link])} </STYLE>
Como se puede ver, se define para la comando H2, por ejemplo,
que su texto sea de color rojo (red). Pero esto hace que,
obligatoriamente, todas las cabeceras de nivel H2 sean de este
color en toda la p gina.
Pero nos podrma interesar, por el motivo que sea, que unas veces
tenga el color rojo y otras veces sea de otros colores. Para
conseguirlo, se pueden emplear unas clases (variantes de esta
comando). Para ello, se define separadamente la comando H2,
seguida de un punto y un nombre que queramos, como por
ejemplo:
[Link] {font-size: 12pt; font-weight: bold; color:
red} [Link] {font-size: 12pt; font-weight: bold; color: green}
H2.
azul {font-size: 12pt; font-weight: bold; color: blue}
y en la pagina, podremos utilizar, segn nos convenga, una u otra
de estas variantes de la siguiente manera:
<H2 CLASS=rojo>Esta cabecera sera de color rojo</H2>
<H2 CLASS=verde>Esta cabecera sera de color verde</H2>
123

<H2 CLASS=azul>Esta cabecera sera de color

azul</H2>
Como se ve, esto nos da una flexiblidad azn mayor para obtener
la apariencia que queramos en nuestra paginas.
Aplicacisn de estilo a los enlaces
Las hojas de estilo tambiin permiten modificar a voluntad la
apariencia de los enlaces, asignando cualquiera de los atributos
vistos (color del texto, tamaqo de la fuente, existencia o no del
subrayado, etc.).
Hay dos tipos de enlaces que se pueden modificar:
A:link enlaces que todavma no han sido visitados (pulsados)
A:visited enlaces que ya han sido visitados (pulsados)
Por ejemplo:
A:link {color: red} A:visited {color: green}
hace que los enlaces sin visitar sean de color rojo, y una vez
visitados se pongan de color verde.
Si se les aplica el atributo text-decoration visto en el Capmtulo
anterior, ajustado al parametro none (ninguno), hace que los
enlaces no estin subrayados. Ejemplo:
A:visited {color: fuchsia; text-decoration: none}
hace que los enlaces visitados sean de color fucsia y no estn
subrayados.
Comentarios
Se pueden aadir comentarios propios a las hojas de estilo,
que pueden servir de recordatorio posterior. Se pueden colocar en
cualquier sitio de la especificacisn, siempre que vayan
englobados entre los caracteres /* y */. Ejemplo:
H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las
cabeceras de nivel 1 */
Diseando para todos los navegadores
Si se usa el metodo de incluir un bloque de estilo en la cabecera,
que consiste en poner las distintas instrucciones de estilo entre
las comandos <STYLE> y </STYLE>, tal como en el ejemplo que
se visalisara:
<STYLE TYPE="text/css"> BODY
124

{background: yellow ; font-size: 10pt; font-family: Arial;

margin-left: 2cm; margin-right: 2cm} H1 {background: blue;
font-size: 14pt; font-weight: bold; color: red} H2 {font-size: 12pt;
font-weight: bold; color: red} DIV {background: URL([Link])}
</STYLE>
en los navegadores que no implementen las hojas de estilo se
ignoraran las comandos <STYLE> y </STYLE>, pero podr
ocurrir que aparezca como texto el bloque de definicin del estilo.
Para evitar esto, es conveniente englobar dicho bloque de
informacin entre los smbolos <!-- y -->. Por tanto, es
conveniente poner el bloque de definicin del estilo de esta
manera:
<STYLE TYPE="text/css"> <!-- BODY {background: yellow
; font-size: 10pt; font-family: Arial; margin-left: 2cm;
margin-right: 2cm} H1 {background: blue; font-size: 14pt;
font-weight: bold; color: red} H2 {font-size: 12pt; font-weight:
bold; color: red} DIV {background: URL([Link])} -->
</STYLE>
Aprovechando la herencia entre comandos
Como sabemos, las comandos de un documento HTML tienen una
estructura definida, que de manera muy resumida se puede poner
de esta forma:
<HTML> <BODY> (conjunto de
comandos que conforman la pagina) </BODY> </HTML>
Como se puede ver, el comando <BODY> engloba a todas las
demas. Si se la asigna un estilo determinado a esta comando,
todos los elementos que estin dentro de la pagina (tablas, listas,
parrafos, etc.) heredaran este estilo.
Por tanto, para establecer un estilo global a la pagina entera, lo
mas apropiado es atribumserlo a la comando <BODY>. Por
ejemplo:
BODY {font: 10pt/11pt
Arial, Helvetica, sans-serif; background: url([Link]);
margin-left: 2cm; margin-right: 2cm}
Establece para la pagina entera la fuente, separacin entre lneas,
imagen de fondo y espesor de los margenes. Si se precisa que
ciertos elementos concretos dentro de la pagina tengan otras
125

caractermsticas distinta a la general, entonces hay que definirlas

por separado.

JAVA es un lenguaje de programacion de caracter general, basado

en C, desarrollado por Sun Microsystems y lanzado al mercado en
agosto del 95.
Principales caracteristicas:
Orientado a objetos:
Maneja encapsulado, herencia y polimorfismo.
Independiente de la plataforma:
Su codigo objeto, llamado APPLET lleva la extension CLASS, es
independiente de la plataforma (Win, Mac, Unix etc) debido a
que este objeto es interpretado por un modulo Run-Time que si
depende de la plataforma. Esto lo hace muy adecuado para
Internet y hoy los principales navegadores pueden ejecutar
aplicaciones en JAVA. La desventaja es que las aplicaciones se
interpretan que es mas lento que cuando las aplicaciones se
ejecutan como en C. En realidad dependiendo de la aplicacion
puede llegar a ser hasta 30 veces mas lento que C.
Seguro:
Debido a que no corre directamente en el computador cliente,
sino que lo hace en una maquina virtual (Java Virtual Machine),
quedando ademas confinado dentro de ella y no puede acceder
a otros recursos de nuestro computador.
Pequeo:
El interprete (Run Time) para Windows solo toma algo mas de
200 KB de RAM al ejecutar una aplicacion.
Aunque el lenguaje JAVA es mas facil que el C++, ya que lo
simplificaron mucho, se trata de un lenguaje de programacion de
alto nivel y por tanto es muchisimo mas dificil (para quien no
tiene conocimientos previos) que el HTML por ejemplo, que en
126

realidad no es mas que una sencilla manera de formatear la

presentacion del texto en las paginas del Web.
Pero una cosa es programar en Java y otra mucho mas sencilla es
usar programas ya existentes.
En resumen los Applets son pequeos programas escritos en
lenguaje Java, que podemos colocar en nuestro servidor, junto
con el resto de archivos que componen un sitio del Web y si el
navegador cliente es capaz de interpretar JAVA, el archivo sera
transferido e interpretado en el computador cliente.
Se conoce un Applet por su extension .class Debo mencionar
ahora algu muy importante y es que debes respetar
escrupulosamente la disposicion de las mayusculas y minusculas
en su nombre (en este caso se debe poner [Link] y no
[Link], por ejemplo).
Si en una de nuestras paginas hemos incrustado un Applet,
cuando un usuario cargue la pagina, recibira del servidor el Applet
correspondiente (al igual que ocurre con una imagen, sonido o
video) y se ejecutara en su navegador, si este soporta JAVA.
Soportan JAVA el Netscape 2.x o superior, Explorer 3.0 o superior,
o HotJava (navegador desarrollado por Sun, y escrito totalmente
en Java). Quien use un navegador no compatible, no vera la
ejecucion del programa (ni siquiera lo cargara), aunque podemos
informarle de este hecho con un mensaje.
Como prueba inmediata para comprobar si tu navegador es
compatible con Java, observa lo que ves a continuacion:
Si ves el lema: WebMaestro Crea tu pagina del Web!"
desplazandose en una linea sinusoidal, es que tu navegador es
compatible con Java. (Pulsando con el raton, se invierte el sentido
del desplazamiento).
Si, por el contrario, ves el mensaje estatico "[Aqui deberia haber
un applet de Java]", es que tu navegador no es compatible con
Java, o que siendolo, tiene inhabilitada la carga de programas de
Java.
Con un Applet se pueden conseguir efectos visuales y sonoros
(incluso ambos a la vez), textos en movimiento, utilidades (por ej:
relojes), pequeos programas educativos, juegos interaractivos,
presentaciones multimedia, etc. En definitiva, cualquier cosa que
se pueda conseguir con un programa pequeo.
127

No es que haya ninguna limitacion teorica en el tamao de estos

programas. La razon de que sean pequeos es la misma por la
que no es razonable colocar en una pagina gigantescos archivos
de imagen o sonido, es decir, no hay que alargar en exceso su
tiempo de carga. (Un Applet normalmente mide entre 1 y 10
KBytes).
Aqui la sintaxis completa del comando APPLET:
<APPLET>
CODE = nombre del Applet
WIDTH = pixels HEIGHT = pixels
[CODEBASE = URL basico]
[]
[ALT = Text alternativo]
[NAME = appletInstanceName]
[ALIGN = alineamiento]
[HSPACE = pixels][VSPACE = pixels]
[texto HTML alternativo]
</APPLET>
CODE = nombre del Applet
El nombre del archivo class con su ruta relativa si es necesario.
No se pueden especificar rutas absolutas.
WIDTH = pixels HEIGHT = pixels
Ancho y alto en pixels del area que sera mostrada.
CODEBASE = ruta base
Parametro opcional que indica la ruta donde se encuentra el
Applet.
Este para,etro opcional puede ser repetido el numero de veces
que sea necesario y define los parametros y les asigna un
valor. En la mayoria de los casos es necesario pasarle algunas
parametros (aunque esto depende del autor del Applet) y en
otros casos los tomara por defecto, por lo que hay que leer la
documentacion de cada Applet distinto.
ALT = Texto alternativo
128

Parametro opcional es usado para mostrar un texto cuando el

vavegador soporta JAVA, pero no puede correrlo.
NAME = Nombre
Este parametro opcional especifica un nombre para la instancia
Applet que da la posiblidad de comunicarse entre dos Applets.
ALIGN = alineamiento
Especifica el alineaminto de la ventana. Puedes usar: left, right,
top, texttop, middle, absmiddle, baseline, bottom, absbottom.
VSPACE = pixels HSPACE = pixels
Especifica el espacio al rededor de la ventana en pixels.
[texto HTML alternativo]
Especifica el texto alternativo que sera mostrado en caso el
navegador cliente no soporte JAVA. Si estas usando un
navegador que no soporta Java, no podra ver el efecto del
Applet y este mensaje es mostrado. Es invisible para los que si
estan viendo ejecutarse el Applet.
Lo primero de todo, es necesario tener el Applet, luego colocar el
comando <APPLET CODE=[Link]>... </APPLET> que se
coloca donde queramos dentro del cuerpo del documento.
Ejemplo 1: [Link] (4,6 KB) de Mattias Tollet
Se trata de un Applet que hace que un texto (elegido por el
usuario) se desplace formando una onda sinusoidal, en direccion
reversible con un click del raton. Se pueden escoger los colores
del fondo y de las letras, elegir entre algunos tipos de fuentes, su
tamao, velocidad de desplazamiento, etc.
En este applet, su autor ha definido los siguientes parametros:
Text
Texto que se va a ver.
Rate
Numero de imagenes por segundo.
129

Font
Fuente: Helvetica (defecto), TimesRoman o Courier.
FontSize
Tamao de la fuente.
TextStyle
Estilo de la fuente: Plain, Bold (defecto) o Italic.
Speed
Velocidad de desplazamiento 1-10 (5 es por defecto)
Direction
Direccion inicial del desplazamiento. Left (defecto) o Right.
Background
Color del fondo. (negro es por defecto)
ForeGround
Color del texto. (rojo es por defecto)
<APPLET CODE=[Link] WIDTH=500 HEIGHT=100>
</APPLET>
Con esto se le indica al navegador que cargue el applet, cuyo
codigo compilado es [Link], que se encuentra en el
mismo directorio que el propio documento HTML, y que le reserve
un area de 500x100 pixels. Como no hemos a definir ningun
parametros todos seran los que ha escogido su autor por defecto.
Aqui aadimos algunos parametros al ejemplo anterior (el orden
en el que se colocan es indiferente) y tambien variaremos el
tamao del area de la ventana a 600x75.
Lo siento, pero no puedes ver este Applet funcionando porque tu
navegador no es compatible con JAVA. Actualizate !!! Se puede
poner un mensaje para que lo lean los que usan un navegador no
compatible JAVA y este mensaje es invisible para los que si estan
viendo ejecutarse el Applet.
130

Ejemplo 2: [Link] (4,6 KB) de William Ogle Jr

Aqui habria un reloj si tu navegador soportase JAVA
Hay veces que el Applet requiere de archivos adicionales para
funcionar (generalmente archivos de imagen o sonido). En este
reloj necesita las imagenes de los digitos. Por lo que ademas de
instalar el archivo [Link], hay que instalar los archivos de
imagen de los digitos en un directorio que se debe llamar
necesariamente dcimages (porque asi lo ha dispuesto el autor del
applet).
Ejemplo 3: [Link] de Sun
<APPLET CODE=[Link] width=400 height=75
align=center>
<PARAM NAME="text" VALUE="This is the Applet Viewer.">
</APPLET>
Donde se pueden conseguir applets de Java ?
Pequeo tutor de JAVA
Tutorial de JAVA Augustin Froufe
Catalogo de Applets muy bien organizado y documentado
(Mexico).
The Java(TM) Boutique Donde se pueden encontrar mas de cien
applets, distribuidos en categorias y con con sus correspondientes
instrucciones.
Gamelan Otro sitio muy interesante con un catalogo de recursos
muy extenso.
Mercado del Plata Argentina
Apuntes varios sobre JAVA
Instituto tecnologico de informatica
Earth Web
Quien esta interesado en iniciarse en el aprendizaje del lenguaje
JAVA podra encontrar direcciones de manuales en espa en:
La Agenda, de Manuel Barbern, en la seccion JAVA
Lanzador Internet, de Daniel Lopez Avellaneda
2. Common Gateway Interface - CGI
El CGI permite procesar programas escritos en cualquier lenguaje,
aunque los mas usados en Internet son el Perl y el C. Estos
131

programas corren en el servidor y tienen la ventaja de no cargar

al cliente.

132