Programación en HTML

L
a mayora de las pginas

Web que visitamos en la
red Internet pertenecen
a las empresas, que utilizan
este medio para vender o
promocionar sus productos
y servicios. Pero Internet es
un medio que puede ser uti-
lizado por todos. Dominan-
do el lenguaje HTML se
pueden crear pginas Web
propias y publicarlas en In-
ternet. El HTML es el len-
guaje que se utiliza en las
pginas Web y debe ser in-
terpretado por los navega-
dores para mostrar los
textos y las imgenes con-
tenidos en las pginas.
Aprender el lenguaje
HTML no es demasiado di-
fcil. En Computer Hoy he-
mos dividido este curso en
trece captulos donde ex-
plicaremos paso a paso to-
das las herramientas nece-
sarias para disear atractivas
pginas de inicio .
En esta primera entrega
del curso vamos a crear un
pequeo archivo HTML que
cargaremos con el navega-
dor. As aprenderemos a in-
troducir los textos e imge-
nes de nuestra pgina. Poco
a poco aprenderemos a dar
formato a los elementos y
complicaremos las cosas
con hipervnculos , ta-
blas y formularios.
Qu es HTML?
La abreviatura HTML sig-
nifica Hypertext Markup
Language, traducido al cas-
tellano Lenguaje para cre-
ar hipertextos. Con el len-
guaje HTML se puede dar
formato al texto de las p-
ginas Web y lo ms impor-
tante, permite interrelacio-
nar unas pginas con otras
utilizando hipervncu-
los para navegar a tra-
vs de la informacin y
saltar de pgina en p-
gina para localidar la in-
formacin deseada.
As es el HTML
El texto HTML que se
oculta detrs de una p-
gina Web se puede ver
sin ms. Para echar tu
primer vistazo al cdi-
go HTML de una pgina
Web de Internet puedes
utilizar el navegador Ex-
plorer de Microsoft y seguir
los pasos siguientes:
1
Inicia el navegador ha-
ciendo click en ,
y .
Tambin se puede acceder
directamente haciendo do-
ble click sobre el icono:
que normalmente estar en
el escritorio .
2
Una vez dentro del
navegador haz click en
cualquier parte de la barra
, de
forma que la direccin ac-
tual quede seleccionada en
azul: .
A continuacin escribe la
direccin y
pulsa la tecla $.
3
Tendrs que esperar
unos instantes hasta que
aparezca la pgina principal
de Yahoo Espaa:
05 (Pg. 68)
04
03
02
01
N 35 64
Programacin en HTML, 1 Parte Profesional
La palabra Web significa en ingls tela de araa y se utiliza por su similitud
con la estructura de las pginas de Internet. Nosotros no nos vamos a convertir
en el hombre araa pero vamos a aprender a crear nuestra propia pgina Web.
F
o
t
o
:

S
u
p
e
r

S
t
o
c
k
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
NDICE DEL CURSO
Para
principiantes
Para
expertos
Para
profesionales
Fundamentos: crear el primer archivo HTML N 35
Cmo disear y dar formato a los textos N 37
Listas, barras y vnculos N 39
Insertar imgenes N 41
Distintos formatos de escritura N 43
Divisin de pginas con tablas N 45
Insertar y dimensionar marcos N 47
Ejemplo de formulario N 49
Qu son y para qu sirven los identificadores N 51
Conceptos bsicos del estilo en cascada N 53
HTML con Java N 55
Probando las pginas HTML N 57
Principios legales de las pginas de Internet N 59
Qu es el HTML? 66
As funciona el HTML 66
Mi primer documento HTML 67
Ver mi primera pgina HTML 68
Los navegadores ms importantes 68
SUMARIO
65
N 35
Qu es...?
HTML
Significa Hypertext
Markup Language y es
el lenguaje de progra-
macin utilizado para
crear las pginas de In-
ternet. En l se definen
las imgenes, los textos
y los hipervnculos que
tendr la pgina. En el
HTML se permite la utili-
zacin de dos formatos
de imagen: el GIF y el
JPEG. En algunas varia-
ciones de este lenguaje
se han incluido otros
formatos grficos como
el PNG. Tambin permi-
te la introduccin de
otros contenidos como
vdeo y sonido.
Navegadores
Estos programas permi-
ten visualizar el conteni-
do de las pginas Web
de Internet. Tambin se
utilizan para descargar
ficheros o visualizar
contenidos multimedia.
En la actualidad los na-
vegadores ms utiliza-
dos son el Explorer de
Microsoft y el Navigator
de Netscape. El sistema
operativo Windows 98
incorpora el navegador
de Internet como uno de
los accesorios bsicos
del sistema.
Pgina
de Inicio
Tambin llamada Home
o Homepage. La presen-
tacin de personas o
empresas en Internet
consiste en varias pgi-
nas conectadas entre s.
La pgina de inicio es la
principal y la que da ac-
ceso a las dems.
Hipervnculos
Tambin se conocen co-
mo enlaces. Son re-
ferencias entre varias
pginas que se encuen-
tran en la red Internet.
Se suelen distinguir por
tener un color distinto al
resto del texto, estar su-
brayados o representa-
dos por una imagen. Al
hacer click sobre ellos,
el navegador carga la
pgina correspondiente.
Los hipervnculos per-
miten que el usuario se-
leccione la informacin
que desea visualizar.
04
03
02
01
Si quieres ver el texto
HTML que se esconde de-
trs de esta pgina tendrs
que hacer click sobre y
. Aparecer una
ventana con mucho texto:
A primera vista, lo que ms
llama la atencin de este
texto son las palabras que
se encuentran entre y
Estos elementos son iden-
tificadores que
permiten dar formato al tex-
to. Por ejemplo: el identifi-
cador hace que el tex-
to que se escriba a
continuacin aparezca en
negrita. No te preocupes si
no entiendes nada de lo que
pone. Cuando hayas termi-
nado con todos los captu-
los del curso podrs desci-
frar sin problemas este texto
HTML.
4
Cierra el Bloc de notas y
el Internet Explorer ha-
ciendo click sobre .
Que se necesita?
Para programar en HTML
tan slo necesitas un orde-
nador con Windows 95 98
y un navegador para ver las
pginas. El Internet Explo-
rer que viene con Windows
95 y 98 puede servirnos per-
fectamente.
Tambin necesitas el pro-
grama Bloc de notas que
viene con Windows 95 y 98.
Para iniciarlo tienes que ha-
cer click sobre ,
, y
.
A continuacin vers la
ventana del editor
que utilizars para escribir
tu primer ejemplo.
Nuestro primer
documento
1
Escribe en la
primera fila y pulsa la te-
cla $.
2
Introduce las tres lneas
de texto
pulsando la tecla $al final
de cada una.
Con estas lneas estamos
dando un ttulo a nuestra p-
gina. Este ttulo ser el que
aparece en la barra superior
de la ventana del navegador
cada vez que se muestre la
pgina:
3
Escribe la cuarta, quinta
y sexta filas:
No olvides pulsar la tecla
$despus de cada una de
ellas. Con este paso hemos
conseguido introducir el
texto
que en la pgina
Web que tendr el
aspecto
cuando sea mostra-
da en el navegador.
4
Para terminar tu primer
archivo HTML escribe
en la ltima fila. El
cdigo
completo
debe ser:
5
Haciendo click en las op-
ciones y
aparece la ventana:
6
Para guardar el texto en
la carpeta
puedes seguir con el paso
7. Si quieres guardarlo en
otro sitio haz click en:
y elige la ruta deseada.
06 (Pg. 68)
Editores HTML
!
La forma ms sencilla de
crear una pgina Web es
utilizar un editor especial de
HTML. Este tipo de progra-
mas permiten colocar fcil-
mente los textos e im-
genes que se desean pre-
sentar en la pgina Web y
genera el cdigo HTML au-
tomticamente.
Pero estos editores tambin
tienen sus inconvenientes.
Los programas econmicos
suelen ser poco eficaces y
los ms caros tienen un ma-
nejo muy complicado.
Adems, muchos de estos
editores crean un cdigo
HTML poco depurado. En
muchos casos se repiten
instrucciones que no sirven
para nada y ralentizan el
funcionamineto de la p-
gina. Para solucionar este
problema hay que conocer
el lenguaje HTML y optimi-
zar las instrucciones de las
pginas manualmente.
En Computer Hoy hemos
preferido centrarnos en el
diseo de pginas con un
editor de texto normal. Es-
to te permitir aprender la
sintaxis y funcionamiento
de este lenguaje y crear
pginas mucho ms efi-
cientes. Si despus de este
curso dominas el HTML,
podrs utilizar cualquier
editor sin problemas. Ade-
ms, tendrs una gran ven-
taja: dispondrs de amplios
conocimientos sobre el len-
guaje HTML. Esto te per-
mitir optimizar el funcio-
namiento de tu pginas in-
troduciendo parte de cdi-
go manualmente.
No es programacin
!
Aunque escuches una y otra
vez la frase programar en
HTML, el HTML no es un
lenguaje de programacin.
En HTML no se pueden cre-
ar
Bucles
ni
evaluar las
condiciones
de las
varia-
bles
.
Al HTML tambin le falta
otra caracterstica: no per-
mite evaluar los datos in-
troducidos por el usuario.
En HTML slo se pueden in-
sertar datos a travs de los
campos de un formulario.
Pero la evaluacin de esta
informacin se debe reali-
zar posteriormente con un
programa adicional.
La realidad es que el HTML
es un lenguaje para pre-
sentar textos. Su estructu-
ra es sencilla y resulta muy
adecuado para mostrar di-
ferentes tipos de conteni-
dos de texto e imgenes.
La idea bsica de funciona-
miento de este lenguaje co-
menz a surgir a principios
de la era de la informtica.
En esa poca se estaba em-
pezando a procesar textos
con ordenadores y todava
no exista nada que se
pareciera a
WYSIWYG
.
En aquella poca, cuando se
quera presentar una pala-
bra determinada en cursiva,
se colocaba delante y detrs
de la palabra una orden que
indicaba a la impresora:
escribe el siguiente texto
en cursiva. En HTML se si-
gue el mismo principio de
funcionamiento para mos-
trar los textos.
10 (Pg. 70)
09 (Pg. 70)
08 (Pg. 68)
07(Pg. 68)
7
Sobreescribe el nombre
de archivo con
.
Si no aparece so-
bre fondo azul, haz click con
en botn izquierdo en la
parte derecha, junto a la o
y sin soltar el botn, des-
plaza el puntero hacia la iz-
quierda hasta que toda la pa-
labra aparezca seleccionada
sobre fondo azul . Y
escribe el nombre del ar-
chivo .
Para guardar el documen-
to tienes que pulsar sobre
el botn . La exten-
sin del archivo
puede ser htm o html in-
distintamente.
8
Cierra el editor hacien-
do click en .
Ver nuestra prime-
ra pgina HTML
1
Para ver tu primera pgi-
na HTML tendrs que ini-
ciar el navegador repitien-
do el paso 1 del apartado
As es el HTML que se en-
cuentra en la pgina ante-
rior.
2
Haz click en las opcio-
nes y .
3
En el siguiente cuadro
de dilogo
tendrs que pulsar el botn.
4
Entonces aparecer una
ventana de dilogo en la
que debes seleccionar la
carpeta donde se encuentra
el archivo.
Primero haz click sobre la
pestaa .
5
Haz click en la carpeta
Si no consigues ver esta
carpeta haz click en las fle-
chas
hasta que puedas verlo.
6
Ahora podrs ver el con-
tenido de la carpeta
Haz click en y
en la casilla
aparecer el nombre
.
7
Haciendo click en
y
podrs visualizar el archivo
en el navegador:
Se trata de una pgina
muy sencilla. Pero en los
prximos captulos tus p-
ginas irn tomando ms co-
lorido.
8
Haz click en y en
para ver de
nuevo el texto HTML de la
pgina:
Si se compara el texto
HTML con la pgina Web,
nos damos cuenta que los
nicos elementos que se re-
piten en ambos sitios son:
y
.
quiere decir que
el texto que aparece a con-
tinuacin es una pgina
Web.
y signi-
fican cabeza y cuerpo.
Con ellos se divide el c-
digo HTML en dos partes: la
cabeza o cabecera es la
primera parte del texto
HTML y se utiliza para defi-
nir algunos valores que se
refieren a toda la pgina.
Por ejemplo, en la seccin
se puede definir
el ttulo de la pgina para
que posteriormente este
aparezca en la barra supe-
rior del navegador.
En la seccin se
suelen introducir los textos
y las imgenes que se mos-
trarn en el navegador.
Si te fijas un poco en el
texto HTML te dars cuenta
de que todas las expresio-
nes que se encuentran en-
tre parntesis de flecha apa-
recen por duplicado.
12 (Pg. 70)
11 (Pg. 70)
N 35 66
Navegadores para disear HTML
!
Quin desee es-
cribir documen-
tos HTML necesi-
ta un navegador
para comprobar
el resultado de
sus trabajos. Los
navegadores ms
utilizados son el Microsoft In-
ternet Explorer y el Netscape
Comunicator. El Explorer viene
incluido en el sistema operati-
vo Windows 95 y 98. Tambin
se puede descargar gratuita-
mente desde Internet para ins-
talar la ltima versin en el or-
denador. Basta con visitar la
direccin -v y acceder al rea
de descarga. El navegador
Netscape Comunicator tambin
est disponible de forma gra-
tuita. Para encontrarlo tienes
que acceder a Internet y visitar
la pgina - donde tambin
tienes que visitar la zona de
descarga. Estos navegadores
tambin se encuentran dispo-
nibles en numerosos CD-ROM
que vienen con las revistas.
Los CDs de proveedores de In-
ternet (Por ejemplo: Alehop, Po-
bladores y CTV) que han sido in-
sertados en Computer Hoy in-
cluan estos programas. Si editas
en HTML lo ideal es disponer de
ambos navegadores, ya que,
aunque el HTML es
estndar, los navega-
dores tienen algunas
diferencias en sus
instrucciones. Algu-
nos identificadores
pueden ser irrecono-
cibles por el navega-
dor. Tambin se pue-
de dar el caso de
distintas interpreta-
ciones para la misma
orden.
Adems, debes procurar tener
siempre instalada en tu orde-
nador la versin ms actual del
navegador. Internet Explorer
tiene ahora mismo la versin 5
y Netscape Comunicator la 4.6.
Qu es...?
Escritorio
Es la superficie de tra-
bajo de Windows 95 y
98. En ella podemos de-
jar todo tipo de ficheros
y aplicaciones para que
estn accesibles en
cualquier momento. En
el escritorio se encuen-
tran los iconos ms im-
portantes del sistema
como el de Mi PC, la Pa-
pelera de reciclaje o Mis
documentos. El escrito-
rio se puede personali-
zar a nuestro gusto con
colores, grficos o in-
cluso sonidos y anima-
ciones. Tambin puede
ser configurado para
verse como si fuese una
pgina Web.
Identificador
El lenguaje HTML se es-
cribe utilizando identifi-
cadores. Los identifica-
dores son rdenes que
damos al navegador pa-
ra que muestre la pgina
Web tal y como desea-
mos. Cada identificador
es una orden y pueden
indicar atributos del tex-
to, posicin de imge-
nes, hipervnculos o
cualquier otra propiedad
de la pgina.
Bucles
En programacin se en-
tiende por bucle una se-
cuencia de instruccio-
nes que se repite varias
veces. Pero las instruc-
ciones slo se introdu-
cen una vez en el cdigo
de programa. El nmero
de repeticiones depende
del valor de una variable
que se llama contador.
Cada vez que se ejecuta
el cdigo, el contador
aumenta su valor hasta
alcanzar un valor deter-
minado en el que se de-
tiene el bucle.
Condiciones
En programacin se uti-
lizan mucho las condi-
ciones para tomar deci-
siones en el flujo de
programa. Por ejemplo:
si el usuario pulsa el bo-
tn x entonces se cie-
rra la ventana activa y si
pulsa el botn z, se
abre una nueva ventana
con ms opciones que
se pueden seleccionar.
08
07
06
05
El navegador Internet Explorer viene in-

tegrado en Windows 95 y 98.
El navegador Netscape Comunicator
se puede obtener gratis en la red.
N 35 68
Programacin en HTML, 1 Parte Experto
Qu es...?
Variables
En programacin, las
variables son unos ele-
mentos que se utilizan
para contener datos de
distintos tipos: nme-
ros, letras, palabras,
textos, valores lgicos,
etctera. El valor conte-
nido en una variable
puede cambiar a lo largo
de la ejecucin de un
programa. Existen otros
elementos llamados
constantes que tienen
un valor fijo que no se
puede cambiar durante
toda la ejecucin del
programa.
WYSIWYG
Es la abreviatura de la
frase en ingls what
you see is what you
get, en castellano: Lo
que hay es lo que ves.
En informtica se utiliza
para indicar que lo que
aparece en pantalla es lo
mismo que saldr por la
impresora. Esta tecnolo-
ga es relativamente re-
ciente y se emplea en la
mayora de programas
editores de textos y di-
seo grfico que se uti-
lizan en la actualidad.
Extensin
Todos los archivos tie-
nen un nombre que indi-
ca su contenido y lo di-
ferencia de los dems. A
continuacin tienen una
coletilla de tres letras
que indica su tipo. La
extensin de un archivo,
son estas tres ltimas
letras. Por ejemplo, las
terminaciones: .txt (ar-
chivo de texto), .bat (ar-
chivo de proceso por lo-
tes, .exe y .com
(archivos ejecutables),
.doc (documento de tex-
to, normalmente Word).
Estas terminaciones son
utilizadas por el usuario
y por el sistema operati-
vo para averiguar rpi-
damente cul es el tipo
de archivo.
Cuadro de
dilogo
Son ventanas de Win-
dows que muestran un
mensaje donde se soli-
cita una respuesta del
usuario para una deter-
minada situacin.
12
11
10
09
Primero aparece
y despus . Con
pasa lo mismo y
aparece . A estos
identificadores que van pre-
cedidos de una lnea oblicua
se les llama identificadores
de cierre. Gracias a esta
metodologa podemos divi-
dir el documento HTML en
varias secciones indepen-
dientes y todos los elemen-
tos que estn entre dos
identificadores del mismo
tipo estarn relacionados.
Por ejemplo: todo lo que se
encuentre entre los identi-
ficadores y
es el ttulo de la
pgina. En HTML todas las
funciones tienen un identi-
ficador de inicio y otro de
cierre que permiten indicar
al ordenador donde empie-
za y donde acaba una de-
terminada funcin. Si has
terminado de visualizar tu
primer documento HTML,
cierra las ventanas del na-
vegador y block de notas ha-
ciendo click sobre sus .
Ms texto para
nuestra pgina
Antes de pasar a otros ca-
ptulos de este curso pue-
des ampliar un poco el con-
tenido de la pgina que
hemos creado.
1
Abre el editor de textos
haciendo click en
, , y
.
2
Haz click en y
. Aparecer la ven-
tana de dilogo:
De momento no podrs
ver tu archivo, ya que el edi-
tor slo muestra los archi-
vos con extensin .txt.
3
Haciendo click en el bo-
tn
se desplegar la lista
donde debemos selec-
cionar la entrada
4
Ahora ya puedes ver tu
archivo
Haz click sobre l de for-
ma que en el campo nombre
aparezca el nombre de tu
pgina:
.
5
Para abrir el archivo haz
click en .
6
Haz click justo detrs de
7
Escribe y pulsa la
tecla $. Este identifica-
dor dice al navegador que
debe saltar a la siguiente l-
nea antes de mostrar el tex-
to siguiente.
8
Despus de esta accin
aparecer otra lnea en
blanco
En esta lnea puedes es-
cribir la frase siguiente
Despus de introducir el
texto la ventana del editor
tendr este aspecto
9
Guarda el archivo ha-
ciendo click en y
en .
10
Para
com-
probar el
cambio, re-
pite los pa-
sos 1 a 7
del aparta-
do Ver
nuestra pri-
mera pgi-
na HTML.
El navega-
dor nos
mostrar los cambios
11
Para cerrar el navega-
dor Internet Explorer
puedes pulsar sobre .
Cargar la pgina
rpidamente
Si sabes en que carpeta se
encuentra el archivo HTML
puedes abreviar el proceso
de carga ahorrndote los pa-
sos donde seleccionas la
carpeta del archivo.
1
Inicia el navegador Mi-
crosoft Internet Explorer
haciendo click en ,
y .
2
Haz click en cualquier
posicin de la lnea de
direccin:
, de
manera que aparezca selec-
cionada sobre fondo azul:
.
3
Ahora debes escribir la
ruta donde se encuentra
el archivo. En nuestro caso
tendras que escribir: La uni-
dad del disco duro , el
nombre de la carpeta
y el nombre
del archivo
.
Despus de escri-
bir la ruta completa:
tendrs que pulsar la
tecla $y tu archi-
vo HTML se cargar.
4
Cuando termines de vi-
sualizar la pgina cierra
el navegador pulsando .
En los prximos captulos
del curso aprenders las or-
denes HTML que permiten
estructurar el texto.
Lo ms importante
!
Al final de cada captulo te
repetimos los conceptos
ms importantes:
HTML: es el lenguaje de las
pginas Web. Indica al na-
vegador como se debe pre-
sentar el texto y las imge-
nes de la pgina. Existen
muchos programas que ge-
neran cdigo HTML auto-
mticamente. Pero generan
pginas que no suelen es-
tar optimizadas.
IDENTIFICADOR: es una
instruccin en HTML. Se re-
conoce por los parntesis
de flecha y . Casi to-
dos los identificadores tie-
nen un identificador de cie-
rre que comienza con una
lnea oblicua. Por ejemplo:
y .
CABEZA Y CUERPO: cada
documento HTML se com-
pone de cuerpo y cabeza.
Los identificadores de cuer-
po son y
Los identificadores de ca-
beza son y
.
En la cabeza aparecen in-
formaciones bsicas sobre
el documento. En el cuerpo
aparecen los textos y las
imgenes que se presentan
en el navegador.
SALTO DE LNEA: el identi-
ficador indica al na-
vegador que tiene que sal-
tar una lnea y poste-
riormente continuar con la
presentacin de texto o
imgenes. El identificador
no necesita un iden-
tificador de cierre.
Direcciones online
-vwww.microsoft.com
-www.netscape.com
E
n la primera entrega
del curso de creacin
de pginas Web con
HTML aprendimos los
principios bsicos de este
lenguaje y creamos nuestra
primera pgina web. Para
comprobar el resultado de
nuestros ejercicios, tuvimos
que recurrir a la utilizacin
de un navegador .
En esta segunda entrega
aprenderemos algunas ins-
trucciones que nos permi-
tirn dar un formato ms
atractivo a nuestros textos.
Hemos recibido una aba-
lancha de cartas, emails y fa-
xes en los que nos pediais
que este curso apareciera
en todos los nmeros. Por
eso, a partir de esta entrega
el curso se publicar en to-
dos los nmeros.
Disear una
plantilla de trabajo
Los que utilizamos HTML
para crear nuestras pginas
Web sabemos que la mayora
de nuestras pginas tienen
una estructura muy similar.
Por esta razn, normalmente
creamos una plantilla en la
que se incluyen todos los co-
mandos comunes a nuestras
pginas. Si sigues los pasos
que te indicamos a conti-
nuacin, obtendrs una
plantilla que te servir de
estructura bsica para to-
dos los documentos HTML
que creemos en los prxi-
mos captulos del curso. Es-
to nos permitir no tener
que introducir las mismas
lneas cada vez que crea-
mos una pgina.
1
Inicia el editor hacien-
do click sucesivamente
en: , ,
y .
2
Haz click en cualquier
parte del rea blanca de
la ventana del editor .
3
En la primera lnea de tex-
to tendrs que escribir
y pulsar la tecla $. El cur-
sor se situar en la segunda
lnea
del documento. Este identi-
ficador sirve para indicar al
navegador que todo lo que
viene a continuacin es c-
digo HTML.
4
Escribe y pulsa
la tecla $. Despus es-
cribe y vuelve a
pulsar la tecla $. Estos
identificadores confirman
que a continuacin viene el
texto de cabecera y el ttu-
lo de la pgina.
5
Ahora puedes escribir al-
go que te permita recor-
dar que debes escribir el
texto de esta seccin. Por
ejemplo o
cualquier otro texto que
posteriormente aparecer
en la barra de ttulo de
la ventana del navegador.
6
Pulsa la tecla $y escri-
be
.
$al final de cada lnea.
Las dos primeras lneas
que hemos escrito cierran
las secciones de cabecera y
ttulo de la pgina. La lnea
indica el comienzo
del texto. Si quieres repasar
03
02
01
N 37 74
Programacin en HTML, 2
a
Parte Profesional
F
o
t
o
:

P
I
C
T
O
R

u
n
i
p
h
o
t
o
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
Disear una plantilla de trabajo 74
Proteccin de la plantilla 75
Salto de lnea 75
Trabajar con prrafos 78
Abrir archivos HTML rpidamente 78
Lo primero que debe aprender un diseador de pginas
web es a organizar el texto. En Computer Hoy
te lo vamos a explicar muy claro, para que tus pginas
se conviertan en autnticas obras de arte.
Debido a la avalancha de cartas de los lectores hemos decidido modificar la programacin
del curso HTML. A partir de este nmero publicaremos una entrega cada 15 das.
75
a
Parte Profesional
N 37
HTML
Significa Hypertext
estarn incluidos en la
pgina. En HTML se per-
mite la utilizacin de
dos formatos de ima-
gen: el GIF y el JPEG. En
algunas variaciones de
este lenguaje se han in-
cluido otros formatos
grficos como el PNG.
Tambin permite la in-
troduccin de otros
contenidos como vdeo,
sonido o incluso progra-
mas que se ejecutan en
nuestro ordenador al
abrir la pgina.
Navegador
Es un programa que
permite visualizar el
contenido de las pgi-
nas web de Internet.
Tambin se utilizar para
descargar ficheros o vi-
sualizar contenidos mul-
timedia. En la actualidad
los navegadores ms
utilizados son el Explo-
rer de Microsoft y el Na-
vigator de Netscape. El
sistema operativo Win-
dows 98 incorpora el
navegador de Internet
como uno de los acce-
sorios bsicos.
Barra
de ttulo
Es la barra azul que apa-
rece en la mayora de las
ventanas de Windows
95 y 98 en la parte su-
perior. En la parte iz-
quierda aparece el icono
correspondiente al pro-
grama, seguido del
nombre de la aplicacin
y el fichero que se en-
cuentra abierto en ese
momento. En los nave-
gadores tambin apare-
ce el ttulo de la pgina
web que se est visitan-
do en cada momento.
En la esquina derecha
de la barra encontramos
tres iconos que sirven
para abrir, cerrar y mi-
nimizar la ventana sin
tener que recurrir a las
opciones del men del
programa.
03
02
01
las secciones de las pginas
HTML puedes consultar el
primer captulo de este cur-
so, que apareci en la pgi-
na 64 del nmero 35 de
Computer Hoy.
7
Puedes rellenar la si-
guiente lnea con
para recordar
que en esta seccin debes
escribir el texto de la pgi-
na. Posteriormente tendrs
que sustituir este texto por
el texto real de la pgina.
8
Para completar las lneas
de la plantilla tienes que
introducir las lneas:
El contenido de la ventana
del editor tendr que tener
el siguiente aspecto: .
9
Para guardar la plantilla
haz click en y en
. Aparecer un cuadro
de dilogo don-
de se indica el nombre del
archivo .
Si el nombre de archivo
Sin ttulo aparece sobre
fondo blanco debes selec-
cionarlo haciendo click a la
derecha .
Mantn pulsado el botn
izquierdo del ratn y des-
plaza el puntero hacia la iz-
quierda hasta que la palabra
se vuelva azul:
10
Introduce un nombre
de archivo. Por ejem-
plo:
11
Haz click en el botn
. El editor guar-
dar la plantilla en la carpe-
ta Mis documentos.
Si deseas guardar la plan-
tilla en otra carpeta, tendrs
que hacer click sobre
y seleccionar una unidad de
disco. Posteriormente podrs
acceder a la carpeta deseada
haciendo click sobre ella.
En nuestros ejemplos he-
mos guardado todos los ar-
chivos en la carpeta Mis do-
cumentos.
12
Despus de guardar
el archivo, cierra el
editor haciendo click en el
smbolo .
Proteccin
de la plantilla
La plantilla que acabamos
de crear nos puede resultar
muy til. Pero es muy im-
portante que se mantenga
intacta y no se borre. Para
conseguir esto, lo mejor es
proteger contra escritura el
archivo de la plantilla.
1
Haz doble click sobre el
icono
que se encuentra en el
Escritorio .
2
En la siguiente ventana
tendrs que hacer click
con el botn derecho sobre
el icono .
3
Aparecer un men en
el que tienes que selec-
cionar la opcin .
4
Para activar la opcin de
proteccin contra escri-
tura del archivo haz click so-
bre la casilla .
5
Cierra la ventana hacien-
do click en el botn
. Si quieres desactivar la pro-
teccin, repite los pasos del
1 al 4 y haz click en la casilla
para que desapa-
rezca la marca de seleccin
. Despus, haz click
sobre el botn para
guardar los cambios realiza-
dos sobre el archivo.
6
Por ltimo, cierra la ven-
tana con un
click sobre .
Salto de lnea
En la primera entrega de
este curso, te explicamos el
funcionamiento del identi-
ficador . En esta oca-
sin vamos a profundizar un
poco ms sobre el funcio-
namiento de este comando
que se utiliza para provocar
un salto de lnea. Los pasos
que te indicamos a conti-
nuacin te permitirn apren-
der a insertar lneas con el
comando :
1
Inicia el editor tal y co-
mo te indicamos en el
paso 1 del apartado Dise-
ar una plantilla de trabajo.
Para comenzar a utilizar el
comando tendrs que
abrir tu plantilla.
2
Haz click sobre las op-
ciones y pa-
ra abrir el archivo.
05 (Pg 76)
04 (Pg. 76)
Resumen de este captulo

!
En este apartado se resumen
los contenidos ms importan-
tes que han sido tratados en es-
te captulo del curso.
Estructura bsica
Cuando se generan pginas
web escribiendo sus instruc-
ciones HTML, lo ms lgico es
crear una pgina con los co-
mandos que son comunes a to-
das las pginas. Esto permite
aprovechar este archivo para
crear todas las pginas que di-
seemos, evitando tener que
introducir los mismos coman-
dos una y otra vez. Lo mejor es
proteger el archivo de la plan-
tilla contra escritura para evi-
tar que pueda ser sobreescrito
accidentalmente.
El comando <br>
El comando se utiliza
para generar un salto de lnea.
Si se omite, el navegador slo
realizar un salto de lnea cuan-
do sea estrictamente necesario
para poder mostrar todo el tex-
to. Hay que tener en cuenta que
pulsar la tecla $en el cdi-
go fuente de la
pgina web no significa que el
navegador vaya a interpretar
esta orden. La unica forma de
forzar al navegador para que se
produzca un salto de lnea es
utilizar el comando . El
salto de lnea se utiliza con mu-
cha frecuencia cuando se de-
sea ajustar el margen derecho
del texto de un documento o
cuando se desea dividir el tex-
to en varios prrafos.
Los prrafos
Cuando se presentan textos
muy largos en una pgina Web,
lo mejor es dividir el texto en
varios prrafos. Gracias a esto
se consigue una mayor fcili-
dad en la lectura. En el lengua-
je HTML los prrafos se gene-
ran mediante el comando
antes del prrafo deseado y el
comando al final de p-
rrafo que se desea definir.
Aunque pueden parecer poco
tiles, lo mejor es que comien-
ces a familiarizarte inmedia-
tamente con estos formatos de
prrafo, ya que los utilizars
con mucha frecuencia en los
captulos posteriores. 06 (Pg. 76)
3
En la siguiente ventana
de dilogo aparecer el
contenido de la carpeta
Si aparece el contenido de
otra carpeta que no sea Mis
documentostendrs que ha-
cer click en la pestaa
,
que se encuentra situada en
la parte derecha de .
Aparecer una lista en la que
tienes que seleccionar la
entrada
Si la lista es demasiado lar-
ga puedes desplazarte por
las opciones con los con-
troles y
,
que se en-
cuentran a la derecha de la
lista hasta que puedas vi-
sualizar la carpeta
.
4
En el cuadro de dilogo
aparecern todos los ar-
chivos con extensin
txt. Para ver tu plantilla
HTML, haz click en
y selecciona la opcin
De esta forma tambin se
mostrarn tus archivos
HTML .
5
Haz click en el archivo
y en el botn
para que aparezca
el cdigo de nuestra planti-
lla en la ventana del editor.
6
Ahora tienes que guar-
dar este archivo con
distinto nombre para evi-
tar reescribirlo. Haz click
en las opciones y
,
Despus repite el
paso 10 y del apartado Di-
sear una plantilla de tra-
bajo pero dando el nom-
bre
al archivo y haz click sobre
el botn .
7
Selecciona la lnea
moviendo
el puntero al final de la pa-
labra texto, y sin soltar el
botn del ratn, desplaza el
puntero hacia la parte iz-
quierda, hasta que las dos
palabras aparezcan resalta-
das sobre fondo azul
.
8
Escribe como nuevo tex-
to e introdu-
ce un salto de lnea .
A continuacin pulsa la te-
cla $. El resultado debe ser
ste: .
9
Puedes seguir escribien-
do en la lnea siguiente.
Por ejemplo:
Cuando introduzcas un co-
mando de salto de lnea de-
bes pulsar la tecla $.
10
A continuacin intro-
duce las lneas si-
guientes:
Seguro que te llama la aten-
cin que despus de un ni-
co en una lnea sigan
tres lneas sin utilizar este
comando. El cdigo fuente
completo debe tener un as-
pecto similar a este .
11
Para poder ver el re-
sultado de estas modi-
ficaciones tienes que hacer
click en la opcin .
12
Cierra el editor ha-
ciendo click en .
13
Abre tu navegador y
carga el documento.
Si no recuerdas cmo se ha-
ce puedes consultar el apar-
tado Ver nuestra primera
pgina HTML que se en-
cuentra en el primer cap-
tulo del curso, que se pu-
blic en el nmero 35 de
Computer Hoy. No olvides
seleccionar el nombre co-
rrecto de archivo. En nues-
tro ejemplo es . Si
quieres acelerar la carga de
tu pgina Web puedes leer
el cuadro Abrir rpidamen-
te un archivo HTML que se
encuentra en la pgina 78.
Con esto hemos termina-
do de disear nuestra pgi-
na de inicio. Ahora puedes
distinguir claramente los lu-
gares donde has insertado
un . Los tres primeros
se corresponden con .
Tambin podrs distinguir
el efecto del aislado.
La ltima lnea se muestra
sin saltos a pesar de que en
el cdigo fuente se haya pul-
sado la tecla $.
De este modo puedes
comprobar que sin no
hay salto de lnea.
14
Si quieres forzar el sal-
to de lnea puede se-
guir los pasos siguientes.
Haz click en , y
15
Inserta un al fi-
nal de cada lnea que
no lo tenga. Primero haz
click detrs de
y escribe . Repite este
paso en las dos lneas si-
guientes. El texto debe ter-
minar con un aspecto simi-
lar a ste . En este caso,
despus de escribir cada l-
nea no es necesario que pul-
ses la tecla $.
16
Repite los pasos del
11 al 13. Los saltos de
07
N 37 76
a
Parte Profesional
Cuadro
de dilogo
minada situacin.
Escritorio
98. En ella podemos de-
jar todo tipo de ficheros
y aplicaciones para que
estn accesibles en
el Escritorio se encuen-
portantes del sistema
documentos. El Escrito-
zar a nuestro gusto con
colores, grficos o in-
cluso sonidos y anima-
ciones. Tambin puede
ser configurado para
verse como si fuese una
pgina Web.
Cdigo fuente
Son una serie de ins-
trucciones y comandos
de programacin que se
utilizan para indicar al
navegador lo que debe
hacer cuando muestra
un archivo que tiene for-
mato HTML. Este trmi-
no tambin se utiliza por
los programadores para
referirse al archivo que
tiene las instrucciones
de un programa.
Extensin
tes, .exe y .com
Estas terminaciones son
utilizadas por el usuario
y por el sistema operati-
vo para averiguar rpi-
damente cul es el tipo
de archivo.
07
06
05
04
N 37 78
a
Parte Profesional
lnea deben concordar aho-
ra con las lneas .
17
Para poder seguir tra-
bajando con la planti-
lla debes cerrar el navegador
haciendo click en .
Trabajar
con prrafos
Ahora ya sabes cmo se
pueden crear saltos de lnea
en un texto. Pero en los tex-
tos de prrafos muy largos es-
to resulta demasiado com-
plicado. En estos casos es
mejor dejar que el navegador
d un formato al texto auto-
mticamente para que el tex-
to se pueda leer en toda la su-
perficie de la ventana del
navegador.
De todas formas, es impor-
tante que organices el texto
para que se pueda leer ms
fcilmente. Para conseguirlo,
lo ms cmodo es que sepa-
res el texto en varios prra-
fos individuales para obtener
una presentacin ms clara
y legible. Para marcar el co-
mienzo de prrafo tienes que
utilizar el comando y pa-
ra terminar el prrafo, el co-
mando .
1
Abre el archivo de la
plantilla tal y como se ha
descrito en los pasos del 1
al 5 del apartado Salto de
lnea.
2
Para dar un nombre al ar-
chivo tienes que repetir
el paso 6 del apartado Sal-
to de lnea. Pero en esta
ocasin debes asignar el
nombre
al archivo y hacer click so-
bre el botn para
guardarlo.
3
Repite el paso 7 del
apartado Salto de lnea.
4
Escribe el siguiente tex-
to .
5
Despus de introducir
, pulsa $y escribe
algo ms de texto. Por ejem-
plo: .
6
El documento completo
tendr el aspecto si-
guiente.
Repite los pasos 11, 12 y
13 del apartado Salto de l-
nea. El resultado debe ser
similar a ste .
7
Coloca el puntero de ra-
tn en el borde derecho
de la ventana del navegador
de manera que tome la for-
ma Pulsa el botn iz-
quierdo del ratn, y sin sol-
tarlo, desplaza el puntero
hacia la izquierda. De este
modo la ventana del nave-
gador quedar ms peque-
a. Pero el texto se ajustar
automticamente al ancho
de la ventana.
Para terminar, cierra la
ventana del navegador ha-
ciendo click en . Puede
parecer que los comandos
y no son muy im-
portantes. Sin embargo de-
bemos acostumbrarnos a
utilizarlos, ya que con ellos
podemos conseguir que
nuestros textos sean mucho
ms claros.
En la prxima entrega del
curso de programacin en
HTML podrs mejorar an
ms el aspecto de tus textos
utilizando varios tamaos y
tipos de letra. Pero lo ms
importante, aprenders a
crear vnculos que te per-
mitirn enlazar unas pginas
con otras para conseguir
que tu sitio web sea total-
mente interactivo.
Direcciones online
-vwww.microsoft.com
-www.netscape.com
Abrir archivos HTML rpidamente
!
En el captulo anterior te ense-
amos a abrir un archivo HTML
con Internet Explorer -v. Pe-
ro existen otros mtodos. El
ms rpido es hacer doble click
sobre el archivo deseado:
1
Para ver un archivo HTML
con el navegador tienes que
abrir la carpeta correspondien-
te. Haz doble click en la carpeta
2
Si ya has completado las
prcticas del curso, en-
contrars algunos archivos
HTML
.
3
Para ver una de estas pgi-
nas en el navegador, haz
doble click en el archivo co-
rrespondiente. Por ejemplo.
En algunos ordenadores el lo-
gotipo aparece como .
Esto se debe a que el navega-
dor instalado por defecto es
Netscape Navigator -, lo que
no supone ninguna molestia, ya
que todos los ejemplos que uti-
lizamos en el curso se pueden
ver a la perfeccin con cual-
quiera de los dos navegadores.
Existe otra forma de abrir los
archivos HTML rpidamente.
4
Inicia el navegador desea-
do siguiendo la ruta co-
rrespondiente. Por ejemplo:
, , y
.Si el navegador
ocupa toda la superficie de la
pantalla, haz click sobre . De
esta forma conseguiras reducir
el tamao de la ventana.
5
Abre la ventana con los ar-
chivos HTML tal y como he-
mos descrito en el paso 2.
6
Haz click sobre:
y, sin soltar el bo-
tn del ratn, despla-
za el icono hasta la ventana del
navegador .
Despus suelta el botn del ra-
tn y el navegador mostrar el
archivo seleccionado .
7
Para terminar, debes cerrar
el navegador y la carpeta.
Haz click sobre el smbolo
de cada una de las ventanas que
tenemos abiertas.
E
n la segunda entrega
del curso de creaccin
de pginas web con
HTML has creado una
plantilla que te servir co-
mo base para tus docu-
mentos y has aprendido a
utilizar el identificador
para el salto de lnea
y para definir los p-
rrafos del documento.
En esta tercera entrega
aprenders a mejorar el as-
pecto de tus pginas cam-
biando el tamao y tipo de
letra de los textos, utilizan-
do listas e introduciendo l-
neas de separacin. Ade-
ms, nos referiremos a los
hipervnculos , que te
servirn para que el conte-
nido de tus pginas web
puedan servir de enlace
con otras pginas HTML.
Utiliza ttulos para
resaltar el texto
Todos los textos que se pu-
blican en Internet o en cual-
quier otro medio de comu-
nicacin suelen tener un
ttulo y estar divididos en va-
rios captulos que permiten
diferenciar las cuestiones que
tratan. En HTML se dispone
de seis tamaos de ttulo di-
ferentes. Los ms grandes se
utilizan para encabezar el do-
cumento y los ms pequeos
para diferenciar sus distintos
apartados.
1
Para practicar con el pri-
mer ttulo tienes que
arrancar el editor haciendo
click sucesivamente en:
, ,
, .
A continuacin aparecer
la ventana del editor:
2
En el captulo anterior
del curso creaste una
plantilla que te puede ser-
vir de base para la creacin
de tus documentos HTML.
Para abrir este archivo
de plantilla haz click en
y . Se desple-
gar el cuadro de dilogo
:
3
Si la carpeta
no est seleccionada, haz
click en
y selecciona la
entrada .
Si no puedes ver la car-
peta
haz click en las flechas
o mueve el control
hasta que aparezca y
puedas seleccio-
narla.
De momento no podrs
ver tu plantilla, ya que slo
se muestran los archivos
que tengan extensin
.TXT. 05 (Pg 60)
04
03
02
01
N 38 58
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
Una de las opciones ms interesantes que puedes hacer
con una pgina web es enlazar sus contenidos con otras
pginas. En Computer Hoy te enseamos la forma ms
fcil de dar vida propia a tus pginas web.
Utiliza ttulos para resaltar el texto 58
Varios formatos de ttulo diferentes 59
Ejemplo con ttulos de varios tamaos 60
Separacin del texto con lneas 60
Organiza tu texto con listas 60
Enlaza unas pginas con otras 61
4
Pulsa la pestaa
.
5
archivo y la
ventana del editor se abrir
con la plantilla:
.
Para no correr el riesgo de
escribir sobre la plantilla ori-
ginal es mejor que guardes
el archivo con otro nombre.
6
Haz click en y
. En la si-
guiente ventana aparecer
seleccionada la lnea con el
nombre de archivo:
.
Escribe el nuevo nombre
y haz click sobre
el botn .
7
Selecciona
colocando el puntero a
la derecha de la palabra
, haz click y sin soltar
el botn del ratn desplaza
el puntero hasta la parte iz-
quierda pa-
ra que la frase quede selec-
cionada en color azul.
8
Escribe la lnea
y pulsa la tecla $. con
y ordenars
al navegador
que muestre un ttulo.
9
Escribe las lneas si-
guientes:
En el captulo anterior del
curso te explicamos que las
marcas y se utili-
zan para indicar al navegador
el comienzo y final de cada
prrafo. El comando
indica un salto de lnea. El
cdigo fuente
completo de la pgina debe
ser ste .
10
Haz click en las op-
ciones y
para salvar los
cambios.
11
Cierra el editor ha-
ciendo click en .
12
Para abrir el docu-
mento que acabas de
crear debes hacer click so-
bre la carpeta
que se encuentra en el
Escritorio .
13
Haz doble click sobre
y el navegador mostrar la
pgina
donde puedes apreciar el
efecto del identificador
. La lnea
hace que aparezca el titular
.
14
Cierra el navegador y la
ventana de la carpeta
haciendo
click en sus correspon-
dientes.
Varios formatos
de ttulo diferentes
Cuando utilices ttulos pa-
ra resaltar el texto de tus p-
ginas puedes seleccionar en-
tre seis tamaos de letra
diferentes.Vamos a practicar
un poco con todos los for-
matos de ttulo que se pue-
den aplicar al texto de una
pgina web escrita en HTML:
1
Repite los pasos del 1 al
5 del apartado anterior.
2
Tambin tienes que re-
petir el paso 6, pero en
esta ocasin tendrs que es-
cribir como nom-
bre de archivo. A continua-
cin haz click sobre el
botn .
3
Repite el paso 7 del pri-
mer apartado e introdu-
ce estas lneas de texto
$al final de cada lnea.
En esta ocasin hemos uti-
lizado el identificador
que genera la orden
de presentar el ttulo con ta-
mao 2. Al contrario que en
las tallas de ropa, un valor
ms grande indica que el t-
tulo se mostrar ms pe-
queo. As, es ms
pequeo que .
4
Para probar con todos
los tamaos de ttulo
tambin puedes introducir
las lneas:
.
Cuando termines el cdigo
fuente debe tener este as-
pecto:
Para guardarlo ejecuta las
opciones y
del men principal. A con-
tinuacin cierra el editor ha-
5
apartado anterior y haz
doble click sobre el icono
A continuacin se abrir una
ventana del navegador en la
que se muestra el resultado
del cdido HTML que acabas
de introducir:
Los ttulos que has escri-
to en el ejemplo anterior se
representan en el navegador
con un tamao de letra que
se va reduciendo a medida
08 (Pg. 60)
07 (Pg. 60)
06 (Pg. 60)
59
a
Parte Profesional
N 38
HTML
Significa Hypertext
estarn incluidos en la
pgina. En HTML se per-
mite la utilizacin de
dos formatos de ima-
gen: el GIF y el JPEG. En
algunas variaciones de
este lenguaje se han in-
cluido otros formatos
grficos como el PNG.
Tambin permite la in-
troduccin de otros
contenidos, como vdeo,
sonido o incluso progra-
mas que se ejecutan en
tu ordenador al abrir la
pgina web.
Identificador
cadores. Estos son r-
denes que das al
navegador para que
muestre la pgina web
tal y como deseas. Cada
identificador es una or-
den y puede indicar atri-
butos del texto, posicin
de imgenes, hipervn-
culos o cualquier otra
propiedad de la pgina.
Hipervnculos
mo enlaces. Son re-
Los hipervnculos per-
miten que el usuario se-
leccione la informacin.
Cuadro
de dilogo
minada situacin. Por
ejemplo, los cuadros
que aparecen al abrir un
archivo y te permiten
seleccionar la carpeta.
04
03
02
01
que aumenta el valor del t-

tulo. Los valores ms pe-
queos que se pueden usar
son y .
6
Cierra el navegador y la
carpeta
haciendo click en sus
correspondientes.
Ejemplo con ttulos
de varios tamaos
Ya sabes cmo funcionan
los ttulos. Sin embargo, la
mejor forma de compren-
derlos es realizar un ejemplo
prctico como el que te ex-
ponemos a continuacin:
1
Repite los pasos 1 a 5 del
primer apartado de este
artculo. Pero cuando tengas
que elegir el archivo haz
click sobre . As
recuperars el primer docu-
mento que has creado.
2
Haz click exactamente
aqu
y pulsa $.
3
En la lnea que acabas de
crear ,
escribe , pulsa $, y
escribe
en la nueva lnea.A continua-
cin pulsa la tecla $para in-
sertar otra nueva lnea.
4
Haz click en las opcio-
nes y .
Despus cierra el editor ha-
5
Repite los pasos 12 y 13
del primer apartado y
comprueba el resultado de
tu trabajo. Debe tener un as-
pecto similar a ste:
6
Cierra el navegador ha-
ciendo click en .
Separacin
del texto con lneas
Con los ttulos, los prrafos
y los saltos de lnea puedes
hacer un montn de cosas
para cambiar el aspecto de
tus textos. Pero existen otras
formas de delimitar y orga-
nizar los textos. Una de las
ms atractivas es la lnea ho-
rizontal, es decir, una lnea
que recorre el texto de iz-
quierda a derecha. El identi-
ficador encargado de gene-
rar esta lnea es .
Cuando utilicemos el identi-
ficador no hace falta
ningn identificador de cie-
rre con una barra oblicua.
1
primer apartado. Pero
cuando realices el paso 5
tendrs que hacer doble
click sobre el archivo
. De esta forma
abrirs el documento que
has utilizado a lo largo de
los ltimos apartados.
2
Haz click en la ante-
penltima lnea, justo de-
trs de
y pulsa la tecla $ de mo-
do que aparezca una nueva
lnea en blanco.
3
Teclea y pulsa de
nuevo la tecla $. Ahora
escribe la lnea siguiente:
El cdigo fuente tendr un
aspecto similar a este .
Con se introduce una
lnea y se separa la parte in-
ferior del texto del resto del
documento. Esto puede re-
sultar ideal para introducir
una nota a pie de pgina. En
este ejemplo, la nota con-
siste en un nmero de tel-
fono de informacin que se
presenta en pantalla apli-
cando el comando de ttulo
para que el texto apa-
rezca con un tamao de letra
bastante ms pequeo que el
resto del documento.
4
Para comprobar el resul-
tado de los cambios que
acabas de realizar, haz click
sobre y .
A continuacin cierra el edi-
tor haciendo click en .
Repite los pasos 12 y 13 del
primer apartado y com-
prueba el resultado de tu tra-
bajo. Si has seguido todos los
pasos correctamente tendr
un aspecto similar a ste:
5
ciendo click en .
Organiza
tu texto con listas
La pgina que acabas de
terminar funciona correcta-
mente. Pero an se puede
mejorar escribiendo una lis-
ta con el men.
El lenguaje HTML propor-
ciona los identificadores
y para crear listas.
N 38 60
a
Parte Profesional
Extensin
tes, .exe y .com
Navegador
Es un programa que
Tambin se utiliza para
descargar ficheros o vi-
sualizar contenidos mul-
timedia. En la actuali-
dad, los navegadores
ms utilizados son el
Explorer de Microsoft y
el Navigator de Netsca-
pe. El sistema operativo
Windows 98 incorpora
el navegador de Internet
como uno de los acce-
sorios bsicos.
Cdigo fuente
Son una serie de ins-
trucciones y comandos
de programacin que se
mato HTML. Este trmi-
no tambin lo utilizan
los programadores para
referirse al archivo que
tiene las instrucciones
de un programa.
Escritorio
98. En ella puedes dejar
todo tipo de ficheros y
aplicaciones para que
estn accesibles en
el Escritorio se encuen-
portantes del sistema,
documentos. El Escrito-
zar a tu gusto con colo-
res, grficos o incluso
sonidos.
08
07
06
05
Experimentos propios
X
Despus de estos tres captu-
los del curso ya sabes mucho
sobre HTML. Es lgico que ten-
gas ganas de experimentar con
los conocimientos que tienes.
Pero es muy importante que
antes de aventurarte tengas en
cuenta estos puntos:
Procura organizar todo tu tra-
bajo en una misma carpeta. De
esta forma dispondrs de un
acceso ms cmodo a todos los
documentos HTML y podrs
realizar una copia de seguridad
de todos tus archivos mucho
ms fcilmente.
Procura utilizar siempre la
extensin .HTML para todos
los documentos.
Cada vez que cambies algo
en un documento procura guar-
dar una copia del documento
anterior. As podrs volver al
documento original cuando te
equivoques y visualizar los dos
archivos en el navegador para
comprobar los resultados de las
modificaciones.
Procura realizar las modifi-
caciones poco a poco. Tendrs
que llevar a cabo los cambios
detalle a detalle y comprobar
los resultados en el navegador.
De esta forma tus experimen-
tos sern ms didcticos y po-
drs detectar los errores ms
fcilmente en el caso de que al-
go no funcione correctamente.
61 N 38 61
a
Parte Profesional
Los identificadores de cie-
rre correspondientes son los
mismos pero precedidos de
lnea oblcua: y
.
indica la insercin
de una lista no ordenada
donde los elementos estn
diferenciados con varios
smbolos de separacin.
Por el contrario, enu-
mera los distintos elementos
de la lista. El ejemplo si-
guiente te vendr muy bien
para practicar un poco:
1
Repite el paso 1 del apar-
tado anterior. Aparecer
la ventana del editor con el
archivo en el que has esta-
do trabajando durante este
captulo.
2
Haz click en este punto
y sin soltar el botn del
ratn, desplaza el puntero
hasta
de forma que el texto que-
de seleccionado sobre fon-
do azul.
3
be las lneas . Para defi-
nir los elementos que for-
man la lista hemos utilizado
el identificador .
Cuando el navegador en-
cuentra este identificador
en el cdigo HTML dibuja
un punto de enumeracin.
El identificador de cierre co-
rrespondiente es .
4
Haz click en y
y cierra el edi-
tor haciendo click en .
Para ver el aspecto que ten-
dr la pgina web despus
de realizar los cambios tie-
nes que repetir los pasos 12
y 13 del primer apartado.
5
El comando te per-
mite crear una lista don-
de se enumeran los elemen-
tos. Repite el paso 1 de este
apartado y haz click en
No sueltes el botn y mue-
ve el puntero hasta
de forma que el texto que-
de seleccionado en azul.
6
be las lneas .
$al final de cada lnea pa-
ra saltar a la lnea siguiente.
En esta ocasin hemos uti-
lizado el identificador
que te permite crear una lis-
ta numerada. Repite el paso
4 para comprobar el resul-
tado de las modificaciones.
La lista numerada debe te-
ner un aspecto como este:
7
Para terminar cierra el
navegador haciendo
click sobre .
Enlazar unas
pginas con otras
Hasta ahora los documen-
tos HTML que has creado es-
taban totalmente aislados. Sin
embargo, una de las mayores
ventajas de los documentos
que se publican en Internet
es la posibilidad de relacio-
nar unas pginas con otras.
Pero antes tendrs que apren-
der a usar hipervnculos.
1
primer apartado. Pero en
el paso 6 cuando tengas que
debers escribir
como nombre del
documento.
2
Escribe . El identificador
viene de la palabra in-
glesa anchor, en castellano
ancla y se utiliza para in-
sertar un hipervnculo.
indica al navegador
que el texto que viene a con-
tinuacin es la direccin o el
nombre de archivo que se
mostrar al activar el hiper-
vnculo. En este caso es el
ejemplo con el que acabas
de practicar en el apartado
anterior
.
3
Vas a crear un segundo
hipervculo. Antes de na-
da escribe detrs de
y pulsa la tecla $. Despus
escribe .
El cdigo fuente completo
debe tener este aspecto:
4
Haz click en y
.
Despus cierra el editor ha-
ciendo click en y repite
los pasos 12 y 13 del pri-
mer apartado de forma que
aparezca la ventana del na-
vegador con el resultado de
la prctica: .
El texto azul subrayado in-
dica que las dos lneas son
hipervnculos. Cuando pases
el puntero del ratn sobre
uno de estos elementos se
convertir en una mano pa-
ra indicar que son hipervn-
culos. Por ejemplo, coloca el
puntero sobre y
observa el aspecto que toma
el puntero: .
Si aprietas el botn del ra-
tn en este momento, el na-
vegador saltar a la pgina
correspondiente:
Si quieres ir de nuevo a la
pgina de hipervnculos, haz
click en la barra de del na-
vegador sobre .
5
Por ltimo cierra el na-
vegador Internet Explo-
rer y la carpeta
haciendo click sobre . En
la prxima entrega del curso
aprenders ms sobre los hi-
pervculos y cmo insertar
imgenes en las pginas.
Dar ttulo a la pgina

!
En todos los ejemplos que
has visto nos hemos cen-
trado en la modificacin del
documento HTML entre los
identificadores y
. Ahora aprende-
rs a modificar la lnea de t-
tulo. En este caso realizars
el cambio sobre el archivo
curso3.html.
1
Para cargar el archivo
tienes que repetir el pa-
so
1
del apartado separa-
cin del texto con lneas.
2
Haz click con el botn iz-
quierdo justo en esta
posicin:
Sin soltar el botn del ratn,
muvelo hacia la izquierda
para que la lnea quede se-
leccionada en color azul:
.
3
Introduce un texto cual-
quiera, por ejemplo:
4
Haz click en y
. Cierra el edi-
tor haciendo click en y re-
pite los pasos
12
a
14
del
primer apartado. Cuando la
pgina aparezca en el
navegador tambin se mos-
trar su nombre en la barra
de ttulos:
.
!
Estos son los contenidos ms im-
portantes que has visto en este
captulo:
Ttulos
En HTML se introducen con iden-
tificadores que van desde
hasta . Cada uno de
ellos requiere un identificador de
cierre, por ejemplo . El ta-
mao del ttulo depende del n-
mero que acompae a la letra h.
es el ttulo de ms tama-
o y es el ms pequeo.
Lneas
El identificador sirve pa-
ra crear lneas sencillas y es uno
de los pocos que no requiere iden-
tificador de cierre con lnea obl-
cua. Las lneas son un elemento
que se utiliza con mucha fre-
cuencia para separar las partes
del texto.
Listas
Pueden ser de dos tipos:
- Con los elementos se
diferencian gracias a un smbolo.
- Con los elementos van
precedidos de un nmero de orden.
Para definir los puntos individua-
les de una lista est el identifica-
dor con su identificador
de cierre .
Hipervnculos
Cuando una pgina hace referen-
cia a otra. En nuestro ejemplo has
introducido la lnea
que hace referencia a otro docu-
mento HTML que se encuentra en
la misma carpeta.
E
n la anterior entrega del
curso de creacin de
pginas web HTML
has aprendido a crear ttu-
los que mejoran el aspecto
de tus pginas e hipervn-
culos para relacionar
unas con otras.
En esta ocasin, aprende-
rs ms aspectos sobre el
funcionamiento de los hi-
pervnculos y utilizars im-
genes que dotarn a tu p-
gina de un aspecto mucho
ms atractivo.
Hipervnculos
en Internet
Hasta ahora has empleado
hipervnculos para hacer re-
ferencia a archivos que se
encuentran ubicados en tu
ordenador. El cdigo fuen-
te de un hipervnculo tie-
ne un aspecto similar a ste
Para hacer que un hiper-
vnculo haga referencia a
una pgina de la World Wi-
de Web tendrs que se-
guir estos pasos:
1
Inicia el Bloc de notas
haciendo click en la ruta
, , y
.
A continuacin aparecer
la ventana del editor
2
Ahora tienes que abrir el
archivo de plantilla que
has creado en el segundo ca-
ptulo del curso.
Haz click en las opciones
y . Se abrir el
cuadro de dilogo
3
Si no aparece la carpeta
, tendrs
que hacer click en
y
seleccionar la entrada
Si no consigues ver esta
entrada utiliza las flechas
para desplazarte por la lista
hasta que la encuentres.
Cuando la selecciones, no
podrs ver tu plantilla, ya
que slo aparecen los ar-
chivos que tengan exten-
sin .TXT.
4
Para poder ver todos los
archivos tienes que ha-
cer click en
y seleccionar la opcin
5
archivo y la ven-
tana del editor se abrir con
la plantilla:
06 (Pg. 68)
05
04
03
02
01
N 39 66
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
La combinacin de imgenes y texto dar a tus pginas un
aspecto mucho ms agradable. Con un poco de buen gusto
y siguiendo los pasos que te indicamos en este captulo te
puedes convertir en un autntico artista del HTML.
Hipervnculos en Internet 66
Consigue tus imgenes en la Red 67
Inserta fotos en tu pgina HTML 67
Hipervnculos con imgenes 68
Utiliza una imagen de fondo 70
Inicio rpido del Bloc de notas 70
6
Guarda el archivo de
plantilla con otro nom-
bre haciendo click en
y . En la
siguiente ventana aparece-
r el nombre del archivo
selec-
cionado en azul.
Escribe
y haz
click en el botn .
7
Para seleccionar la ante-
penltima lnea tienes
que colocar el puntero en la
parte derecha de
, hacer
click con el botn izquier-
do del ratn y, sin soltar, des-
plazar el puntero hacia la
parte izquierda
, de forma
que la frase quede seleccio-
nada en color azul.
8
Teclea
y pulsa $. Te acuerdas de
los dos identificadores
que acabas de
utilizar? se utiliza para
sealar los prrafos y
indica al navegador
que debe realizar
un salto de lnea.
9
Escribe la lnea .
.Si no comprendes su
significado, conviene que
repases la parte final del an-
terior captulo del curso. Se
trata de un hipervnculo
normal donde hemos cam-
biado el valor del parme-
tro por la
direccin de Internet
:
El texto que aparece es la
direccin del buscador
Yahoo.
10
Haz click en las op-
ciones y
para guardar los
cambios. Cierra el editor
pinchando en . En el Es-
critorio , haz do-
ble click en:
y se abrir la ventana
donde de-
bes hacer doble click sobre:
11
El navegador se abri-
r, y mostrar el resul-
tado de la pgina que aca-
bas de escribir .
Si tu ordenador est co-
nectado en este momento a
Internet, puedes hacer click
sobre de forma
que el navegador salte hasta
la pgina correspondiente
Esto te permite vincular
tus pginas con cualquier
otra web que se encuentre
en Internet.
12
Cierra el navegador y
la carpeta de Mis do-
cumentos haciendo click
en sus correspondientes.
Consigue tus
imgenes en la Red
Incluyendo imgenes en
tu pgina web conseguirs
que sta resulte mucho ms
atractiva. Lo primero que ne-
cesitas son los archivos de
imagen que vas a insertar.
Una de las formas ms f-
ciles de obtener los archi-
vos es visitar las pginas de
algn servidor que ofrezca
imgenes gratuitas.
1
Arranca tu navegador ha-
ciendo doble click sobre
el icono:
El programa se abrir con
la pgina de inicio
que tengas pre-
determinada. En este caso,
se trata de la pgina del bus-
cador Yahoo Espaa.
Haz click en la barra de di-
recciones
para seleccionarla
y escribe la
direccin de la pgina de In-
ternet que hemos elegido
en Computer Hoy para este
curso -v (pg. 70) y
pulsa la tecla $.
2
Es un sitio web
con un banco de
imgenes gratuitas
que se pueden copiar
y distribuir libre-
mente. Ahora slo
vas a utilizar un par de im-
genes. Pulsa con el botn
derecho del ratn en
.
3
El navegador suele indi-
car la carpeta donde se
guardar la imagen correc-
tamente. Si no ves la carpe-
ta , repite el
paso 3 del apartado ante-
rior. Para terminar haz click
en el botn .
4
Repite los pasos 2 y 3
con esta otra imagen:
5
Ahora tienes que conse-
guir una imagen para uti-
lizala como fondo de tu p-
gina. Haz click en la barra de
direcciones
de forma que quede selec-
cionada en color azul
y escribe la direccin - y
pulsa la tecla $.
Al cabo de unos instantes
el navegador mostrar la p-
gina web:
Haz click en
con el botn derecho del ra-
tn y selecciona la opcin
.
6
Repite el paso 3 de este
apartado para guardar el
archivo y haz click sobre
para cerrar la ventana del na-
vegador Internet Explorer.
Inserta fotos
en tu pgina HTML
Da los pasos siguientes pa-
ra practicar un poco con las
imgenes.
1
Abre el Bloc de notas y
el archivo de plantilla re-
pitiendo los pasos 1 a 5 del
primer apartado. Sigue el pa-
so 6 para guardar la pgina.
Pero en este caso utiliza el
nombre de archivo
.
2
Selecciona la cuarta l-
nea siguiendo las indi-
caciones del paso 7
del primer apartado
y escri-
be .
Marca despus la lnea
y teclea
las siguientes lneas .
13 (Pg. 70)
12 (Pg. 70)
11 (Pg. 70)
10 (Pg. 68)
09 (Pg. 68)
08 (Pg. 68)
07 (Pg. 68)
67
a
Parte Profesional
N 39
HTML
Significa Hypertext
el lenguaje de programa-
cin utilizado para crear
las pginas de Internet.
Con l se definen la posi-
cin, forma y funciona-
miento de las imgenes,
textos e hipervnculos
incluidos en la pgina.
En HTML se permite uti-
lizar dos formatos grfi-
cos: GIF y JPEG.
Hipervnculos
mo enlaces. Son re-
Cdigo fuente
Es una serie de instruc-
ciones y comandos de
programacin que se
utiliza para indicar al na-
vegador lo que debe ha-
cer cuando muestra un
archivo que tiene forma-
to HTML. Este trmino
tambin lo emplean los
programadores para re-
ferirse al archivo que
posee las instrucciones
de un programa.
World Wide
Web
Es la red mundial de da-
tos de Internet. Aqu
puedes encontrar infor-
macin sobre innumera-
bles temas. Lo ms im-
portante es que toda la
informacin est inte-
rrelacionada para que
todos los datos se en-
cuentren fcilmente.
Cuadro
de dilogo
Es una ventana de Win-
dows que muestra un
mensaje donde se te so-
licita una respuesta para
una determinada situa-
cin. Por ejemplo, los
cuadros que aparecen al
abrir un archivo y te
permiten seleccionar la
carpeta donde se en-
cuentra el documento.
05
04
03
02
01
El texto es un poco largo

y tienes que prestar especial
atencin cuando escribas
los identificadores, ya que
una equivocacin puede ha-
cer que la pgina se mues-
tre incorrectamente.
3
Antes de analizar las l-
neas de cdigo que aca-
bas de escribir, te conviene
guardar el archivo. Haz click
sobre y .
4
La lnea no necesita
muchas explicaciones.
Se trata de un ttulo bastan-
te sencillo. Si no entiendes
bien su significado debers
repasar el tercer captulo
del curso que publicamos
en el nmero 38 de Com-
puter Hoy.
Ocho lneas ms abajo es-
t el apartado donde apare-
ce la primera imagen
El identificador in-
forma al navegador que de-
be prepararse para mostrar
una imagen.
sirve
para indicar cul es la que
se debe presentar. En este
caso, la imagen se encuen-
tra en la misma carpeta que
la pgina HTML. Este par-
metro es ms que suficien-
te para mostrar una imagen
en un navegador.
Sin embargo, hay varios
parmetros adicionales que
permiten modificar el mo-
do en que se presenta la
imagen en el navegador. Con
indicas que la
imagen se debe situar a la
izquierda y el texto se debe
escribir en la parte derecha.
A esta tcnica se le llama
texto f lotante. Si omites
este parmetro el texto se
mostrar en las lneas que
estn situadas justo debajo
de la imagen.
Para que lo escrito no es-
t pegado a la imagen hay
que darle una separacin
utilizando el parmetro
. Esta instruccin
deja un espacio libre a la iz-
quierda y derecha de la ima-
gen a modo de marco.
Cuando la ilustracin se
muestre en el navegador la
vers as
servar
Sin hspaceno habra nin-
guna separacin
5
Un poco ms adelante
aparece una forma bas-
tante inusual del comando
. En esta ocasin se ha
utilizado el parmetro
, que indica
al navegador que el texto
que viene a continuacin se
debe escribir debajo de la
imagen
Sin este comando, el p-
rrafo estara junto a la pri-
mera imagen y su aspecto
no sera muy atractivo
Despus aparece la lnea
de la segunda imagen
Descifrar el significado de
esta lnea no es muy difcil.
Los nicos parmetros que
se han cambiado son el
nombre del archivo y
.Right signifi-
ca en castellano derecha,
e indica al navegador que
debe situar la imagen en el
margen derecho de la pan-
talla. El resto del texto apa-
recer a la izquierda de la
ilustracin. Dentro de este
texto se ha insertado un hi-
pervnculo
que enlaza la pgina con la
web de ComStock.
6
Cuando termines de leer
todo el cdigo, cierra el
Bloc de notas ha-
ciendo click en
y doble
click sobre .
Despus sobre
para que pue-
das ver tu pri-
mera pgina
web con imge-
nes:
N 39 68
a
Parte Profesional
Extensin
continuacin llevan in-
corporada una coletilla
de tres letras que indica
su tipo. La extensin de
un archivo, son estas
tres ltimas letras. Por
ejemplo: .txt (archivo de
texto), .exe y .com (ar-
chivos ejecutables).
Identificador
denes que das al
navegador para que
Navegador
Es un programa que
descargar ficheros o ver
En la actualidad, los na-
vegadores ms utiliza-
dos son Explorer, de Mi-
crosoft y el Navigator,
de Netscape. El sistema
operativo Windows 98
incorpora el navegador
de Internet como uno de
los accesorios bsicos.
Parmetros
Son informaciones que
determinan el funciona-
miento de un programa.
mo argumentos.
Direccin
de Internet
Todas las pginas de la
red Internet se encuen-
tran organizadas en di-
recciones. Cuando dese-
as visitar una pgina
web bastar con que es-
cribas la direccin co-
rrespondiente en el
campo de direcciones
de tu navegador. Las di-
recciones de Internet
empiezan por http:// y
terminan con el nombre
de la pgina web.
10
09
08
07
06
Hipervnculos con imgenes

!
Las imgenes y los hipervn-
culos se pueden comple-
mentar muy bien. Al hacer
click sobre una imagen que
hace referencia a una direc-
cin de Internet, la pgina co-
rrespondiente se abrir auto-
mticamente en el navegador.
Para poder hacer este ejer-
cicio es necesario que tengas
en tu disco duro las dos im-
genes del apartado Consigue
tus imgenes de la red.
1
Utiliza el archivo de plan-
tilla de la sengnuda parte
del curso. Para abrirlo tienes
que repetir los pasos 1 a 6
del primer apartado. En el pa-
so 6 debes utilizar el nombre
para guardar
el archivo.
2
mer apartado e introduce
estas tres lneas
Su funcionamiento es muy
simple. Escribe un hipervcu-
lo normal, pero en lugar de
teclear un texto entre <a
href...> y </a>, inserta una
imagen con <img...>.
Adems, si olvidas el par-
metro border=0, el navegador
presentar un borde azul al-
rededor de la imagen.
3
Para dejar clara la dife-
rencia que existe entre un
vnculo normal y uno que fun-
ciona con una imagen escri-
be estas tres lneas a conti-
nuacin
La construccin es la misma,
pero se omite la orden
<img...>. De esta forma el tex-
to que se encuentra en su lu-
gar funciona como hipervn-
culo.
4
Antes de ver el resultado
del cdigo que acabas de
escribir haz click sobre
y .
Despus cierra el Bloc de no-
tas pinchando sobre .
En el escritorio, haz doble
click en:
y en:
El navegador mostrar el hi-
pervnculo de imagen y el de
texto. Para probarlo, despla-
za el puntero sobre
y sobre
y observa que en cualquiera
de los dos casos toma el as-
pecto siguente:
Si haces click sobre cual-
quiera de ellos acceders a la
pgina correspondiente. Pa-
ra cerrar el navegador haz
click sobre .
N 39 70
a
Parte
Buscador
Son sitios web que te
permiten buscar infor-
macin en Internet. Su
funcionamiento es bas-
tante fcil. Basta con
que introduzcas las pa-
labras del tema sobre el
que deseas obtener in-
formacin y pulses el
botn buscar. En po-
cos segundos te apare-
cern los resultados en
la pantalla, con una bre-
ve descripcin de las
pginas que te permitir
seleccionar la que ms
te interese.
Escritorio
estn accesibles en
cualquier momento.
En el Escritorio se en-
cuentran los iconos ms
importantes del sistema,
documentos. Y se puede
personalizar a tu gusto
con colores, grficos o
incluso sonidos.
Pgina
de inicio
Es la primera pgina
web que se muestra
cuando se inicia el nave-
gador. Normalmente es
la de un buscador cono-
cido o aquella que te
permite acceder a otras
pginas.
URL
Siglas correspondientes
a Uniform Resource
Locator (en castellano
Localizador homog-
neo de recursos). Una
URL es una direccin de
Internet donde se en-
cuentra una pgina web.
Pxeles
Las imgenes con las
que trabaja el ordenador
se componen de much-
simos puntos de varios
colores que al ser ob-
servados en conjunto
forman una imagen. Ca-
da uno de estos puntos
es un pixel. Cuantos
ms pxeles tenga la
imagen, mejor, ya que
ofrecer ms calidad.
15
14
13
12
11
7
Cuando quieras cerrar el
navegador tendrs que
hacer click sobre .
Utiliza una
imagen de fondo
Las imgenes que has in-
sertado en tu pgina web
han mejorado mucho su as-
pecto. Sin embargo, sta
puede seguir mejorando en
muchos aspectos. Por ejem-
plo en el fondo. Para conse-
guirlo sigue estos pasos:
1
Ejecuta el Bloc de notas
y preprate para abrir un
archivo siguiendo los pasos
1 a 4 del primer
apartado.
2
Cuando tengas
que seleccio-
nar el archivo, haz
click sobre
y des-
pus sobre .
3
Ahora busca la
lnea que co-
mienza por y haz
click exactamente detrs de
la palabra
4
Pulsa la barra espacia-
dora y escribe el si-
guiente texto:
. La
lnea completa tendr este
aspecto:
.
Con el parmetro back-
ground, el navegador coge
el archivo de imagen que se
le indique y lo utiliza como
fondo de la pgina. La ilus-
tracin se repetir varias ve-
ces como si fuera un mosai-
co que cubre todo el fondo
de la pantalla.
5
Para ver el resultado de
los cambios haz click en
y . Despus
cierra la ventana del Bloc
de notaspulsando sobre
y abre la carpeta de docu-
mentos haciendo doble
click sobre:
6
archivo:
para ejecutar el navegador y
ver el resultado de tu pgina:
Con esto damos por ter-
minado este captulo donde
has aprendido a trabajar con
imgenes en HTML. En la
prxima entrega sabrs c-
mo dar formato al texto de
tu pgina web, alineando,
justificando y tabulando los
prrafos y lneas.
!
En este apartado te explica-
mos los puntos ms impor-
tantes de este captulo.
Hipervnculos
en Internet
Para referirse a una direccin
de Internet desde una pgina
HTML hay que especificar la
URL completa de la pgi-
na deseada.
Por ejemplo, la orden
-Ves la direccin de una p-
gina web que puedes intro-
ducir en el recuadro de di-
recciones de tu navegador
Insertar
imgenes
Para insertar imgenes en tus
pginas HTML tienes que uti-
lizar el identificador
Adems, debes utilizar el pa-
rmetro
para indicar el nombre del fi-
chero de imagen. Por ejem-
plo: .
Posicin
de las imgenes
El parmetro se utili-
za para indicar si la imagen
se sita en el margen derecho
o en el margen izquierdo
.
Colocacin
del texto
El texto se amolda automti-
camente al espacio que queda
libre entre las imgenes. Para
dejar un borde alrededor de
ellas se utiliza , que
indica cuntos pxeles se
separa el texto de la imagen.
Por ejemplo:
distancia el texto de la ima-
gen en 20 pxeles.
Utilizar una
imagen de fondo
En este caso, el navegador
muestra el archivo de imagen
especificado en forma de mo-
saico en el fondo de la pan-
talla. El comando se introdu-
ce en la seccin , que
tomar el aspecto siguiente
.
15
14
Inicio rpido del Bloc de notas
!
Cuando diseas pginas
web en HTML tienes que
ejecutar constantemente el
Bloc de notaspara escri-
bir el cdigo de las pginas.
Abrir el editor una y otra vez
desde el men pue-
de resultar algo pesado. Pa-
ra evitarlo, lo mejor es co-
locar un acceso directo en
el Escritorio. De esta forma
te bastar con hacer click
sobre un icono para que el
Bloc de notas se abra r-
pidamente.
1
Haz doble click sucesi-
vamente sobre:
(En algunos ordenadores la
unidad C: puede tener un
aspecto algo distinto o uti-
lizar otro nombre).
2
Haz click en
pa-
ra que los iconos de la ven-
tana se hagan visibles y de-
pus pulsa varias veces
sobre la flecha
hasta que veas el icono
3
Haz click con el botn
derecho del ratn en
y, sin soltarlo, mueve el
puntero hacia un lugar va-
co del Escritorio
4
Suelta el botn derecho
y haz click sobre la op-
cin
El resultado debe ser un ac-
ceso directo con este as-
pecto:
5
En el futuro podrs eje-
cutar el Bloc de notas
haciendo doble
click sobre el
icono
6
Cierra la
carpeta
ha-
ciendo click en
.
Direcciones online
- vwww.comstock.com/web
- www.dimpres.com/fonbeig3.htm
-V
www.altavista.com
Profesional
E
n la cuarta entrega del
curso sobre HTML
aprendiste a insertar
imgenes en tus pginas
web para hacerlas ms lla-
mativas. En esta ocasin tra-
taremos un tema que tam-
bin est muy relacionado
con el diseo: el formato del
texto. Utilizando letras de
distintos colores, tamaos y
tipos puedes conseguir que
tus pginas resulten mucho
ms claras y fciles de leer.
Formato de texto
negrita y cursiva
La forma ms rpida y sen-
cilla de dar formato a los tex-
tos es mostrarlos en negrita
o cursiva. En HTML existen
dos identificadores pa-
ra este fin. Para realizar este
ejemplo utilizars de nuevo
el archivo de plantilla que
creaste en el segundo cap-
tulo del curso (ver Computer
Hoy n37, pg. 74).
1
haciendo click en
y llevando el puntero hacia
, y
. Haz click de
nuevo. Si has seguido todos
los pasos del anterior cap-
tulo del curso, te bastar con
hacer doble click sobre el
icono:
que se debe encontrar en el
Escritorio . Cualquiera de
los dos mtodos puede ser
vlido. Al final tienes que ver
la ventana del Bloc de notas:
2
y .
A continuacin se abrir el
cuadro de dilogo que
te permitir seleccionar el
archivo de la plantilla:
3
Si no aparece la carpeta
haz
click sobre y selecciona
la lnea
Si ves que la carpeta
no apare-
ce en la lista, haz click so-
bre los controles
hasta que aparezca y pul-
sa sobre ella.
4
Para ver la plantilla haz
click sobre
y despus sobre la opcin
5
Si no ves , haz
click en hasta que apa-
rezca. Para abrir el archivo
haz doble click en y
se mostrar en pantalla
04
03
02
01
N 40 72
F
o
t
o
:

S
t
o
c
k

P
h
o
t
o
s
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
Formato de texto negrita y cursiva 72
Cambia el tipo de letra 73
Utiliza varios colores en el texto 73
Modifica el tamao de letra 77
Cdigo fuente completo 77
Si quieres conseguir que tus pginas dejen de ser monto-
nas y aburridas tendrs que jugar un poco con el formato
del texto. Prueba a cambiar tus letras con varios tamaos,
colores y formas buscando el resultado ms divertido.
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
L
40_72_77_PROFESIONAL 5/4/00 19:32 Pgina 72
73
a
Parte
N 40
HTML
Significa Hypertext
la posicin, forma y fun-
cionamiento de las im-
genes, los textos y los
hipervnculos incluidos
en la pgina web.
Identificador
denes que das al
navegador para que
Escritorio
estn accesibles en
cualquier momento.
documentos.
Cuadro
de dilogo
Es una ventana de Win-
dows que muestra un
mensaje donde se te so-
licita una respuesta para
una determinada situa-
cin. Por ejemplo, los
cuadros que aparecen al
abrir un archivo y te
permiten seleccionar la
carpeta donde se en-
cuentra el documento.
Navegador
Es un programa que
vegadores que se utili-
zan ms frecuentemente
son el Explorer, de Mi-
crosoft, y el Navigator,
de Netscape.
05
04
03
02
01
M
6
Para dar un nombre al ar-
chivo haz click en
y .
En el lugar de , de-
bes escribir el nombre
. Despus haz
click sobre el botn .
7
Mueve el puntero hasta
la parte derecha de
.
Haz click con el botn iz-
quierdo y, sin soltarlo, des-
plzate hacia la parte iz-
quierda hasta que el texto
aparezca seleccionado:
.
8
Escribe las siguientes l-
neas:
Adems del conocido iden-
tificador que se utili-
za para generar un salto de
lnea, aparecen dos nuevos
comandos: muestra el
texto que aparezca a conti-
nuacin en negrita hasta el
identificador de cierre
. Con aplicas el
formato cursiva hasta que
escribas .
9
Para ver los resultados,
guarda el documento
con las opciones y
. Despus cierra el
Bloc de notas haciendo
click en y abre el docu-
mento haciendo doble click
sobre el icono:
que se encuentra en el Es-
critorio. Aparecer una ven-
tana con todos tus docu-
mentos HTML.
Haz doble click sobre:
(Es posible que en tu orde-
nador el archivo aparezca
con un tamao ms reduci-
do. En ese caso haz doble
click sobre ).
10
El navegador
mostrar el resultado
con letra en negrita
y cursiva .
Para cerrar la ventana haz
click sobre .
Cambia
el tipo de letra
Hasta el momento, el texto
de todas las pginas que has
creado durante el curso se vi-
sualizan con el tipo de letra
Times New Roman.
Para cambiarlo, te bastar
con hacer una breve indica-
cin al principio y final del
texto que desees modificar.
Para transformar una pgina
completa al tipo de letra
Arialtendrs que dar los pa-
sos siguientes:
1
Para este ejemplo utiliza-
rs la pgina HTML que
has creado en el captulo an-
terior de este curso
Si no tienes el archivo,
puedes realizar el ejercicio
con cualquier otra pgina,
pero debes prestar mucha
atencin, porque algunos pa-
sos pueden variar un poco.
Lo mejor es que utilices la
pgina indicada, que mos-
tramos en el nmero 39 de
Computer Hoy.
2
Repite los pasos del 1al
3
Haz click en el archivo .
y en el botn
4
Cuando tengas abierto el
archivo, haz click justo
detrs de
y pulsa la tecla $para
insertar una nueva lnea
5
Escribe ahora el texto:
.
El identificador
se utiliza para indicar al na-
vegador un formato de tex-
to y se acompaa de varios
parmetros .
En esta ocasin, slo vas a
utilizar uno de ellos. Con
se consi-
gue que el texto escrito a
continuacin se muestre
con letra Arial hasta que
aparezca el identificador de
cierre .
6
Pulsa las teclas y N
simultneamente para
que el cursor se
coloque justo al final del c-
digo fuente .
y pulsa $. Ahora escribe la
lnea .
7
Haz click en y
para almacenar
los cambios. Cierra el Bloc
de notas haciendo click en
el botn .
Despus haz doble click
sobre la carpeta:
y el archivo:
8
El navegador mostrar el
documento con el tipo
de letra que acabas de se-
leccionar:
9
ciendo click en .
Utiliza varios
colores en el texto
Algunos elementos de tex-
to tienen mejor aspecto y re-
sultan ms llamativos cuando
utilizan un color distinto del
resto. Empleando el identifi-
cador Fonttambin puedes
dar el color que desees a le-
tras, palabras o prrafos en-
teros. Para practicar un poco,
sigue estos consejos:
1
2
El texto del principio de-
be aparecer en un color
distinto. Por ejemplo, ma-
rrn. Para conseguirlo haz
click en esta posicin
08 (Pg. 76)
07 (Pg. 76)
06 (Pg. 76)
05
L
Profesional
76
a
Parte Profesional
N 40
Parmetros
Son informaciones que
determinan el funciona-
mo argumentos.
Cursor
Es la marca que indica
en que punto del docu-
mento tendr lugar la si-
guiente introduccin de
datos. En la mayora de
casos se representa con
una pequea lnea verti-
cal negra que parpadea.
Cdigo fuente
Es una serie de instruc-
programacin que se
utiliza para indicar al na-
vegador lo que debe ha-
cer cuando muestra un
archivo que tiene forma-
to HTML. Este trmino
de un programa.
W3C
Es el World Wide
Web Consortium.
Este consorcio es la uni-
dad de control ms im-
portante para las nor-
mas en Internet y posee
filiales en Estados Uni-
dos y Europa. Se ocupa
de definir el estndar del
lenguaje HTML para
conseguir una normali-
zacin mundial. Tambin
se encarga de coordinar
las tecnologas que sur-
gen para Internet.
World Wide
Web
Es la red mundial de da-
tos de Internet. Aqu
puedes encontrar infor-
macin sobre innumera-
bles temas. Lo ms im-
portante es que toda la
informacin est rela-
cionada para facilitar la
bsqueda de datos.
Hojas
de estilo
en cascada
Son plantillas de forma-
to para los textos de las
pginas Web. Determi-
nan, por ejemplo el ta-
mao y tipo de letra o el
ancho de prrafos o el
color de fondo.
11
10
10
09
08
07
06
M
3
Pulsa la barra de espacio
( ) y escribe el texto
. Las pri-
meras lneas del archivo ten-
drn ste aspecto: .
4
esta posicin .
Si no ves esta parte del tex-
to, utiliza la tecla &para des-
plazarte hacia abajo hasta
que aparezca.
5
Escribe la orden
.
Despus haz click en la
misma lnea, justo detrs de
e inserta
el texto . Pulsa la
tecla (. Despus $ y por
ltimo #. El resto del tex-
to se mover hasta la lnea
siguiente para mostrarse con
ms claridad.
La lnea completa debe ter-
minar con un aspecto simi-
lar a ste:
Su funcionamiento es bas-
tante sencillo. Primero has
introducido un comando
que cambia el texto a color
azul y despus el identifica-
dor de cierre que
lo devuelve al color que te-
na anteriormente. Esta pro-
piedad suele recibir el nom-
bre de anidacin.
Para comprender el prin-
cipio de la anidacin puedes
pensar en varias cajas de di-
ferentes tamaos y colores
que estn contenidas unas
dentro de otras. Imagina que
la ms grande es marrn y
contiene a todas las dems.
Si la comparamos con la p-
gina web que ests creando
en este ejemplo se corres-
pondera con el primer iden-
tificador . Ahora
piensa que dentro de la ca-
ja grande hay otra ms pe-
quea que est pintada de
azul. En este caso se corres-
ponde con el segundo iden-
tificador del cdigo
fuente. Cuando se ejecuta la
orden de la lnea
coges la caja ms grande y la
pintas de color marrn. Des-
pus viene la
instruccin
con la que co-
locas en el in-
terior una una
caja ms pe-
quea que pre-
viamente has
pintado de co-
lor azul. El co-
mando te sirve pa-
ra cerrar las cajas con su
tapa correspondiente.
6
Ahora puedes compro-
bar el resultado del ejer-
cicio. Haz click en ,
y para guardar
los cambios y cerrar el Bloc
de notas. Abre la pgina web
haciendo doble click sobre
el icono del escritorio:
y despus en:
El texto del documento
aparece en color marrn
pero algunas palabras resal-
tan por el color azul .
El polmico <font>
X
Muchos diseadores de pgi-
nas web huyen del identifica-
dor . La razn es que
su manejo puede llegar a re-
sultar bastante complejo. Por
ejemplo, cuando hay que cam-
biar el color de letra en cada
apartado o si todas las prime-
ras letras de cada prrafo de-
ben aparecer con un tamao
ms grande y un tipo de letra
determinado.
En estos casos hay que utilizar
el identificador tantas
veces que al final se pierde la
perspectiva de la pgina y re-
sulta menos comprensible.
Este es el motivo por el que el
W3C - v, organismo
responsable de la normaliza-
cin del lenguaje HTML, reco-
mienda no utilizar el identifi-
cador . En su lugar
se debe recurrir a las Hojas
de estilo en cascada
. Sin embargo, aunque esta so-
lucin pueda resultar vlida,
tiene el inconveniente de no
funcionar correctamente con
los navegadores que son algo
antiguos. Por el contrario, el
identificador puede
trabajar sin problemas con las
primeras versiones de los na-
vegadores. Adems, en mu-
chas ocasiones el comando
es la forma ms
cmoda y rpida de dar for-
mato al texto. Por ejemplo,
cuando se fija un mismo ta-
mao y tipo de letra para todo
el documento. No obstante,
conviene que aprendas a utili-
zar las hojas de estilo en cas-
cada, que sern tratadas en el
nmero 45 de Computer Hoy.
11
09
Resumen de este captulo X
Negrita y cursiva
Si quieres dar formato ne-
grita a una parte del texto tie-
nes que utilizar el identifica-
dor . Todas las palabras
que aparezcan a continua-
cin se mostrarn en negri-
ta, cuando escribas el iden-
tificador de cierre .
La escritura en cursiva fun-
ciona de la misma forma, pe-
ro utiliza los identificadores
y .
Uso del identifi-
cador <font>
Se utiliza para dar un forma-
to continuo a los textos. Es-
te identificador aparece
siempre con uno o varios pa-
rmetros adicionales. Para
concluir un formato de es-
critura hay que utilizar
.
Otros tipos
de letras
Existe la posibilidad de de-
terminar un tipo concreto de
letra para todo o una parte
del documento. Por ejemplo,
es
una orden con la que se co-
mienza a escribir utilizando
la fuente Arial.
El parmetro que escribas
detrs de de-
signa el tipo de letra elegido
y siempre debe ir escrito en-
tre comillas, ya que en caso
contrario el navegador pue-
de encontrar problemas con
los nombres de fuentes de
letra que tienen varias pala-
bras. Por ejemplo, Times
New Roman.
Color de la fuente
Utilizando el comando
establece el color del texto
como marrn. Detrs de co-
lor aparece el nombre del
color en ingls, por ejemplo
red (rojo) o green (ver-
de). En el cuadro de la pgi-
na 72 tienes los colores ms
importantes con sus nom-
bres correspondientes.
Tamao de letra
Viene indicado por el par-
metro , por ejemplo
en . El valor
3 indica un tamao de fuen-
te normal, mientras que los
valores ms altos se corres-
ponden con un tamao ms
grande y los inferiores con
una fuente ms pequea de
lo habitual. Los valores vli-
dos van del 1 al 7.
77
a
Parte
N 40
7
Para cerrar el navegador
debes hacer click en
Modifica
el tamao de letra
Hasta ahora utilizabas
a para cambiar
el tamao de letra. Pero esto
tiene sus limitaciones. Es me-
jor utilizar el identificador
. En el ejemplo si-
guiente transformars dos le-
tras a un mayor tamao para
mejorar el aspecto de la p-
gina. Para hacerlo, utilizars
de nuevo la pgina con la que
has trabajado anteriormente.
1
3 del apartado Cambia
el tipo de letra.
2
Haz click en la segunda
lnea del segundo apar-
tado, justo delante de
3
Introduce el texto
.
4
Pulsa la tecla ( de forma
que el cursor parpadee a
la derecha de la letra ma-
yscula E
. Ahora
escribe el identificador de
cierre . La lnea de-
be tener este aspecto
.
5
Desplaza el cursor hacia
abajo pulsando la tecla &
varias veces hasta que apa-
rezca la lnea
Haz click justo delante de
la letra Ey repite los pasos
3 y 4 de este mismo aparta-
do. El resultado debe tener
un aspecto similar a ste
Con el parmetro
asignas el tamao que a to-
das las letras que escribas a
continuacin. Los valores
que introduzcas no tienen
nada que ver con el tamao
de letra de tu procesador de
texto, y pueden ir desde el
1 hasta el 7.
Por norma general,
se corres-
ponde con un tamao de le-
tra normal, de forma que los
valores superiores aparece-
rn ms grandes y los infe-
riores ms pequeos.
6
Para ver el resultado, haz
click en la opcion
y
y . Posteriormente haz
doble click en el icono del
Escritorio:
y en:
.
7
El resultado debe tener
este aspecto:
8
ciendo click en .
El cdigo
fuente completo
El documento HTML con el
que has trabajado en estos
dos ltimos captulos del cur-
so empieza a tener muchas l-
neas y te puede resultar algo
complicado. Si te has equi-
vocado en alguno de los pa-
sos es posible que los resul-
tados sean muy distintos de
los que te indicamos. Para evi-
tar problemas con los errores
de escritura, puedes com-
probar todo el cdigo fuen-
te, tal y como te indicamos a
continuacin.
1
3 del apartado Cambia
el tipo de letra.
2
Ahora vers el cdigo
completo de la pgina
HTML imagenes.htmly po-
drs compararla con el tex-
to fuente correcto:
3
Si encuentras algn error,
corrgelo y haz click en
y . Despus
cierra el Bloc de notas pul-
sando sobre .
En la siguiente entrega del
curso de HTML aprenders a
utilizar tablas para presentar
cifras y dar a tus pginas web
un aspecto mucho ms or-
denado y atractivo.
Direcciones online
- vwww.w3.org
-selfhtml.com.ar/tcae.htm
Gama de colores
X
En HTML se puede indicar el
color que se desea utilizar me-
diante combinaciones de ci-
fras o con nombres. Pero es-
tos nombres estn en ingls
y para algunos pueden resul-
tar difciles de comprender. El
cuadro inferior muestra los
nombres ms importantes
junto a sus colores corres-
pondientes. En la direccin de
Internet - se ofrece infor-
macin muy detallada acerca
de los colores. Por ejemplo,
I
Profesional
no que traducido del ingls
significa mesa o tabla.
En esta primera parte de
esta entrega vers cmo uti-
lizar correctamente este tag
para mostrar texto y nme-
ros en tu pgina. En la se-
gunda, pondrs en prctica
estos nuevos conocimientos
utilizando la pgina ejemplo
de la entrega anterior del
curso. Despus descubrirs
lo bien que funciona
como ayuda en el
layout .
Empezars construyendo
una sencilla tabla de tem-
peraturas. Esta tabla contie-
ne el nombre de tres meses,
sus temperaturas medias y
una pequea observacin.
Una tabla sencilla
Con tus conocimientos ac-
tuales de HTML puedes es-
cribir todos los datos con-
juntamente
Sin embargo, escritos de
esta forma el resultado no es
el esperado .
Con la ayuda de una tabla
obtendrs un resultado p-
timo.
1
Abre el editor con un do-
ble click sobre
(si todava no tienes este ico-
no en el Escritorio, puedes
ver cmo crearlo en la p-
gina 74 del nmero 37 de
Computer Hoy).
2
Carga la plantilla que
utilizaste en la segunda
entrega del curso. Una vez lo-
calizado, lo tienes que guar-
dar haciendo click sobre
y sobre .
En este caso selecciona el si-
guiente nombre
para
el fichero.
3
Haz click justo a la dere-
cha de esta lnea
y, mientras mantienes pre-
sionado el botn izquierdo
del ratn, arrastra el cursor
hacia la izquierda hasta que
todo el texto quede selec-
cionado con un fondo azul.
04
03
E
n la ltima entrega de
este curso deHTML
aprendiste a configurar
el tipo de letra. En la prxi-
ma entrars de lleno en el di-
seo de una pgina com-
pleta, y para ello, las tablas
son una herramienta funda-
mental. Con ellas podrs
mostrar en tu web todo tipo
de informaciones perfecta-
mente ordenadas y de un
modo mucho ms atractivo.
Las tablas son algo realmen-
te prctico que te permitir
sacarle el mximo jugo a tus
pginas.
El nombre del tag para
disear tablas es fcil de re-
cordar: y su termi-
nacin es , trmi-
02
01
N 41 62
F
o
t
o
:

F
o
t
o
t
e
c
a

9
x
1
2

S
.
L
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
Una tabla sencilla 62
Tablas ms espaciadas 63
Cmo colorear la tabla 63
Solucin de problemas 64
Mejorar el layout con la ayuda de las tablas 64
Te parece impresionante lo que hacen estos chicos con
sus tablas? T puedes hacerlo mucho mejor. Con la sexta
entrega del curso de HTML sers, en muy poco tiempo, un
as de las tablas. Eso s, aqu ni te mojars ni tragars agua.
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
63
a
Parte
N 41
HTML
Significa Hypertext
en la pgina web.Se
puede decir que es la
base misma de las pgi-
nas web.
Tag
cadores, tambin llama-
dos tags, trmino que
proviene del ingls eti-
quetas. Estos identifi-
cadores son rdenes
que das al navegador y
que l interpreta para
mostrar la pgina web
culos, as como cual-
quier otra propiedad de
la pgina.
Layout
Es la ordenacin y colo-
cacin de todos los ele-
mentos que componen
una pgina web, es de-
cir textos, imgenes, ta-
blas, grficos, etctera.
Tambin son elementos
del layout los colores y
el tipo de letra.
A la hora de realizar tus
diseos ten en cuenta
que un layout claro per-
mitir una navegacin
mucho ms facil.
Fichero
plantilla
Seguro que recordars
aquellas hojas rayadas
que, puestas bajo una
hoja en blanco, permi-
tan escribir sin torcer-
se. Pues bien, el con-
cepto es similar, un fi-
chero que incorpora los
componentes estndar
del cdigo de una pgi-
na web, y que al mismo
tiempo sirve como re-
cordatorio de la estruc-
tura de este tipo de fi-
cheros, te permite
ahorrar tiempo a la hora
de introducirla.
04
03
02
01
4
Introduce estas lneas de
cdigo .
Con
le indicas al navegador
que a continua-
cin viene una tabla. Aqu,
adems, tendrs que definir
el parmetro
. Esta orden di-
vide las celdas
por medio de unas lneas
muy finas. Si te decides por
el valor cero, no aparecern
las lneas divisorias.
A continuacin aparece el
tag . ste indica al na-
vegador que todas las en-
tradas que se encuentran
hasta se deben in-
cluir en una nica fila.
En ingls las filas de las ta-
blas se conocen por row.
se puede traducir
por table row, en castella-
no, fila de la tabla.
A continuacin aparece
. Esta lnea
y las dos siguientes se en-
cargan de los ttulos de la co-
lumna. Despus vers que s-
tos aparecen en negrita:
es la abreviacin en in-
gls de table header, o sea,
cabecera de la tabla.
Tras , que cierra la l-
nea, vienen otras tres lneas
como la siguiente:
.
stas contienen los datos que
vas a introducir en la tabla.
Por este motivo se conoce
como table data o, traduci-
do, datos de la tabla.
Puedes ver que siempre
aparecen tres lneas con
o que se com-
plementan con sus respecti-
vos o . Con
estos tags, el navegador sabe
que se trata de una tabla con
tres columnas. Al final del
texto puedes observar tam-
bin , que le indi-
ca al navegador que termina
la tabla.
5
Ya es hora de que des un
vistazo al resultado. Haz
click sobre y sobre
. Seguidamente cie-
rra el editor con un click so-
bre y abre la carpeta con
un doble click sobre
.Vista con el nave-
gador, la tabla tendr el si-
guiente aspecto:
En el siguiente apartado
podrs ver cmo mejorar el
aspecto de las tablas en tus
pginas. Pero antes de ello
cierra el navegador con un
click en .
Tablas ms
espaciadas
Ya sabes cmo se cons-
truyen las tablas. En este
apartado y en los siguientes
vas a ver la manera de me-
jorar su aspecto.
1
Inicia el editor . Haz click
sobre y luego en
y selecciona el fiche-
ro con las tablas que has
creado antes .
2
Primero vas a solucionar
las estrecheces de tu ta-
bla y a separar un poco las
lneas. Para ello haz
exactamente click sobre
3
Despus pulsa la ba-
rra de espacio ( )
y escribe este texto:
.
La lnea al completo de-
be tener este aspecto:
El parmetro
se encar-
ga de separar el texto de
los bordes de la tabla.
4
Guarda el fichero con un
click sobre y so-
bre .
Seguidamente cierra el edi-
tor pinchando sobre y
abre la carpeta
Ahora haz doble click sobre
. La tabla aparecer
ms desahogada .
que en la versin anterior. Pe-
ro el aspecto de tu pgina
web an se puede mejorar.
Cmo colorear
la tabla
Si lo deseas pue-
des colorear cada
columna o fila de la
tabla e incluso cada celda
individualmente.
En el siguiente ejemplo
colorears la fila con los t-
tulos y resaltars las celdas
con los mximos de tem-
peratura utilizando un fon-
do rosa.
1
Inicia el editor y carga el
fichero del paso 1 del
apartado Tablas ms espa-
ciadas, . En el tex-
to tendrs que introducir
unos comandos adicionales.
2
A continuacin click
exactamente sobre este
punto
3
Presiona la barra espa-
ciadora ( ) y escribe el
texto .
La lnea al completo debe
tener el siguien-
te aspecto
El parmetro
le in-
dica al navega-
dor que la fila
de la tabla co-
rrespondiente
se tiene que re-
presentar con el
color indicado.
En este ejem-
plo, el color es
el amarillo (en
ingls yellow).
4
Para colo-
rear sola-
mente una cel-
da de la tabla,
tendrs que
desplazarte
hasta el final
del cdigo
fuente. En la l-
nea donde se define la cel-
da que quieres modificar
debers hacer click en
08 (Pg. 64)
07 (Pg. 64)
06 (Pg. 64)
05 (Pg. 64)
Profesional
64
a
Parte Profesional
Cdigo
Consiste en una serie de
instrucciones y coman-
dos de programacin
que se utilizan para indi-
car al navegador lo que
debe hacer cuando
muestra un archivo que
tiene formato HTML.
Este trmino tambin lo
emplean los programa-
dores para referirse al
archivo que contiene las
instrucciones de un
programa.
Navegador
Es un programa que
vegadores que se utili-
zan ms frecuentemente
son el Explorer, de Mi-
crosoft, y el Navigator,
de Netscape.
Parmetro
Cierta informacin que
determina el funciona-
Tambin se le denomina
argumento.
Celda
La unidad ms pequea
de una tabla es la cel-
das. En los ficheros de
HTML las tablas se pue-
den utilizar para intro-
ducir datos numricos,
textos, imgenes, etc-
tera. Las tablas se com-
ponen de columnas (l-
neas de celdas verti-
cales) y filas (lneas de
celdas horizontales).
A diferencia de las ta-
blas que se pueden en-
contrar en otras aplica-
ciones, las de HTML no
permiten realizar clcu-
los con su contenido.
Frame
Sirve para presentar en
un mismo documento
varias pginas a la vez,
quedando limitadas por
unos bordes que, en al-
gunos casos, pueden
ser modificados por el
usuario. Es un compo-
nente muy utilizado ya
que permite presentar la
informacin de un modo
claro y ordenado.
08
08
07
06
05
5
Pulsa la tecla espacio
( ) y escribe a conti-
nuacin . La
lnea al completo tendr el
siguiente aspecto:
En este caso el
tambin se encargar de mo-
dificar el color. Pero este
cambio slo afecta a una cel-
da. El color de la celda es el
pink, es decir, rosa.
6
Guarda los cambios con
un click sobre y
sobre . Seguidamen-
te cierra el editor pinchan-
do sobre y abre la car-
peta con un doble click
sobre el icono
Dentro de la carpeta de-
bers hacer doble click so-
bre y as podrs
comprobar los cambios de
colores en tu tabla.
Texto completo?
Si el resultado no ha sido
igual al que puedes observar
sobre estas lneas, conviene
que compares tu cdigo con
el cdigo completo que pue-
des encontrar aqu .
Mejorar el layout
con la ayuda
delas tablas
Las tablas no slo son ti-
les para presentar resultados.
En este apartado vers cmo
utilizarlas para mejorar el as-
pecto de tus pginas.
Insertars en la pgina, den-
tro de una columna adicio-
nal, informacin general as
como una direccin y un n-
mero de telfono.
Para ello tendrs que utili-
zar el fichero con
el que ya has trabajado en an-
teriores entregas de este cur-
so. Si no lo tienes, podrs en-
contrarlo en la pgina 77 del
nmero 40 de Computer Hoy
1
Inicia el editor y carga, ha-
ciendo previamente click
sobre y en ,
el fichero .
2
Para mejorar el aspecto
de la pgina haz click jus-
to sobre
y, a continuacin debers
pulsar Cy '.
3
Como puedes compro-
bar, el cursor se va a si-
tuar dentro de una lnea en
blanco
Teclea el siguiente texto
y presiona la tecla C. Esto
hace que el navegador in-
troduzca en este punto una
tabla. El parmetro
(en castellano ancho) de-
be ser de 600 puntos. Ade-
ms, vas a alinear la tabla en
el centro de la pgina. Esto
se hace con el comando
(alineacin) y con
el valor para cen-
tro. El ltimo parmetro,
,
se encarga
de separar el texto de los
bordes dentro de la tabla.
4
Presiona la tecla Cy es-
cribe el siguiente cdigo
Comienza una nueva fila de
la tabla. En este ejemplo uti-
lizars una fila con dos cel-
das. Empieza con la
primera. En sta uti-
lizars uno de los pa-
rmetros ms impor-
tantes de las tablas: el
,
que se
encarga de situar el
contenido de la cel-
da en su parte supe-
rior. Si no haces uso
de este parmetro el
contenido de la cel-
da se situara a media
altura y no se dife-
renciara de la celda
contigua. ste sera el
resultado:
Por el contrario, con el co-
mando el as-
pecto resultante ser el si-
guiente:
A continuacin vas a co-
lorear la columna de la iz-
quierda para resaltarla del
resto. Para ello debes usar el
comando
,
que ya debera resultarte fa-
miliar y que en este caso co-
lorea la celda con un marrn
claro. Finalmente slo te
queda asignar a la celda una
anchura de 150 puntos. Por
tanto, para la segunda co-
lumna, quedan 600 puntos
menos 150 puntos, es decir
450 puntos. El mismo nave-
gador ya calcula ese valor,
por lo que no tendrs que
introducir ningn valor pa-
ra la segunda columna.
5
Si deseas que el texto de
la columna sea algo ms
pequeo y prefieres otro ti-
po de letra, tendrs que
N 41
N 41 66
a
Parte Profesional
pulsar la tecla Cy escribir
el siguiente texto:
Puedes leer ms sobre el
tag en la anterior
entrega de este curso.
6
Pero a la columna toda-
va le falta algo de con-
tenido.
Pulsa la tecla C e intro-
duce las lneas de cdigo
exactamente tal y como te
indicamos a continuacin.
Encontrars un enlace que
es muy comn en Internet.
ste hace posible que cual-
quiera que visite tu pgina
te pueda mandar un correo
electrnico con slo hacer
click sobre l. Si el visitante
hace click sobre esta lnea,
automticamente se abrir
su programa de correo elec-
trnico con un nuevo men-
saje que tendr en la barra
de destinatario tu direccin,
es decir, aquella que has
puesto tras : (la di-
reccin que has puesto en
este ejemplo es la de Com-
puter Hoy. Evidentemente,
cuando realices tu propia
pgina tendrs que introdu-
cir tu direccin de correo y
no la de Computer Hoy).
7
Despus viene la segun-
da celda, que debe con-
tener todo lo que ya se en-
contraba en la pgina. Pulsa
dos veces la tecla C y es-
cribe el texto siguiente:
El parmetro slo
lo pondrs por precaucin
en el caso de que la colum-
na de la derecha sea ms lar-
ga, para que el contenido de
la celda se quede en la par-
te superior. Con esta ins-
truccin le asignars un fon-
do a la celda.
En este ejemplo el fondo
de la celda se corresponde
con el fondo de la pgina.
8
Para que el texto dentro
de la celda aparezca con
el tipo
de letra adecuado, pulsa C
y escribe:
9
Con respecto al conte-
nido de la celda de la
derecha no tienes que mo-
dificar nada. Slo te queda
desplazar el cursor con la
ayuda de la tecla & hasta el
final del cdigo fuente.
Para que el navegador se-
pa que vas a terminar con
la tabla, tendrs que hacer
click exactamente en este
punto
10
Presiona la tecla C
y escribe el siguien-
te texto:
. Con
ello cerrars la celda e indi-
cars al nave-
gador que has alcanzado el
final de la tabla.
11
Haz click sobre
y sobre
. Para cerrar el editor
tan solo tendrs que pinchar
sobre . Seguidamente haz
doble click sobre la carpeta
en la que se encuentre guar-
dado el fichero, que en este
caso ser
y despus haz click sobre
.
12
Aqu puedes ver el
resultado final con
el navegador .
13
Cierra el navegador
Internet Explorer
con un click sobre . Con
esto termina esta entrega del
curso.
En las prximas entregas
dars un repaso a los frames
, ya que con
estos elementos orga-
nizars mejor los con-
tenido de tus propias
pginas
web.
09 (Pg. 64)

!
Elementos bsicos
de las tablas
que indica al
navegador que a continua-
cin viene una tabla, mien-
tras que se en-
cuentra al final de la misma
para indicrselo al nave-
gador.
Las etiquetas o tags, para
construir las filas de la ta-
bla, son para iniciar
una fila, y para
marcar el final de la misma.
Los tags para delimitar cada
una de las celdas que for-
man la tabla son para
su comienzo, y
para indicar su final.
Tu tabla puede contener en-
cabezados, facilitando as la
lectura de los datos conteni-
dos en ella, los tags que ten-
drs que utilizar sern
, que indicar al na-
vegador el principio del en-
cabezado, y que
seala el final de la misma.
Parmetros
de las tablas
Con definirs
los bordes de la tabla. En
caso de que desees no in-
corporarlos, bastar con
que omitas este parme-
tro, y as no se dibujarn.
es el pa-
rmetro que permite indicar
al navegador la distancia
que, dentro de cada celda,
debe establecerse entre el
texto y los bordes.
El color de fondo de la tabla,
de una fila, o de una sola
celda, se indica mediante el
parmetro .
Con podrs fijar el
ancho de una tabla o de
una celda.
es el par-
metro que tendrs que utili-
zar para indicar que deseas
que el contenido de una cel-
da se site en la parte supe-
rior de la misma.
Tambin puedes asignar un
fondo a cada celda con el
parmetro .
E
n el anterior captulo
de pginas web en
HTML aprendiste a uti-
lizar tablas para mejorar el
apecto de tus pginas cuan-
do escribes texto. En esta
entrega te explicaremos el
funcionamiento de los fra-
mes , que en castellano
se puede traducir como
bordes o marcos.
Los frames dividen la ven-
tana del navegador en
varias zonas donde se mues-
tran distintos documentos al
mismo tiempo. En el si-
guiente ejemplo vers como
se pueden exhibir a la vez
dos pginas HTML. En la par-
te izquierda de la pantalla vas
a presentar una lista de hi-
pervnculos que te per-
mitirn acceder a los docu-
mentos que aparecern en la
parte derecha.
Para realizar esta prctica
utilizars las pginas que has
creado en los captulos an-
teriores. Si no tienes estos
ficheros, no te preocupes.
Tambin puedes hacer el
ejercicio con otras pginas,
pero tendrs que realizar al-
gunos cambios, como en el
nombre de los ficheros en
los hipervnculos.
Preparacin
Antes de comenzar a
crear frames debes prepa-
rar las pginas que van a
quedar dentro de los bor-
des o marcos. En esta oca-
sin, slo debes organizar
la pgina gua, ya que todas
las dems son las que has
creado en anteriores cap-
tulos del curso.
Para disear esta pgina
gua utilizars de nuevo el ar-
chivo de plantilla que creas-
te en el segundo captulo del
curso (ver Computer Hoy
n37, pg. 74).
1
Ejecuta el editor hacien-
do click en el men
y llevando el pun-
tero hacia ,
y . Haz click de
nuevo.
Si has seguido las anterio-
res entregas del curso, tal vez
tengas el icono
en el Escritorio , que te
permitir acceder directa-
mente al editor.
2
Para abrir la plantilla haz
click en las opciones
y de la ventana
del editor. Pulsa sobre y
selecciona la opcin
del me-
n desplegable.
Despus haz click sobre
y el botn .
El archivo se cargar en el
editor .
Con unos simples clicks so-
bre las opciones y
podrs guardar
el fichero con el nombre
.
3
Primero haz click a la de-
recha de
y, sin soltar el botn, arras-
05
04
03
02
01
N 42 66
Preparacin 66
Definicin de los frames 67
Frames en cascada 68
Algunos diseadores web enmarcan sus pginas
para que sean ms vistosas y fciles de usar. Por eso,
enComputer Hoy te indicamos paso a paso cmo insertar
marcos y te damos consejos para colocarlos correctamente.
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
67
a
Parte Profesional
N 42
HTML
Significa Hypertext
en la pgina web.
Frames
Son marcos o cuadros
que se utilizan para
mostrar varias pginas a
la vez dentro de la mis-
ma ventana. Cada frame
puede contener un do-
cumento HTML distinto
u otros frames. Lo ms
habitual es colocar un
frame en la parte iz-
quierda con los hiper-
vnculos de la pgina.
Navegador
Programa que permite
visualizar el contenido
de las pginas web de
Internet. Tambin se uti-
liza para descargar fi-
cheros o ver contenidos
multimedia. En la actua-
lidad, los navegadores
que se utilizan ms fre-
cuentemente son el Ex-
plorer, de Microsoft, y el
Navigator, de Netscape.
Hipervnculo
Tambin se conoce co-
mo enlace. Es una re-
ferencia a otra pgina
que se encuentra en la
red Internet. Se suele
distinguir por tener un
color distinto al resto
del texto, estar subraya-
do o representado por
una imagen. Al hacer
click sobre l, el navega-
dor carga la pgina co-
rrespondiente.
Escritorio
Superficie de trabajo de
Windows 95 y 98. En
ella puedes dejar todo
tipo de ficheros y aplica-
ciones para que estn
accesibles en cualquier
momento.
pelera de reciclaje, Mis
documentos o la barra
del men inicio.
05
04
03
02
01
tra el puntero hacia la par-
te izquierda, de forma que
la lnea quede seleccionada:
.
4
A continuacin escribe
las siguientes lneas de
cdigo fuente :
Como puedes ver, se trata
de un documento que slo
tiene enlaces que te llevan a
los ejemplos de las entregas
anteriores del curso. El ni-
co parmetro
nuevo que has utilizado es s-
te: . En
el siguiente apartado te ex-
plicaremos detalladamente
su funcionamiento.
5
Guarda el fichero ha-
ciendo click sobre las op-
ciones y .
Despus cierra la ventana
pulsando en .
Definicin
de los frames
Ahora vas a crear un Fra-
me-Set . Este ele-
mento, adems de dividir la
ventana del navegador en di-
ferentes reas, determina en
qu zona debe aparecer ca-
da uno de los documentos.
1
Si tienes abierto el Bloc
de notas puedes empezar
directamente por el paso 2.
En caso contrario, tendrs
que abrirlo haciendo doble
click sobre el icono
critorio.
2
En esta ocasin no te ha-
ce falta abrir el fichero
de plantilla. Simplemente
debes escribir esto: .
Seguro que las cuatro pri-
meras lneas de cdigo te re-
sultan muy familiares. Son las
mismas que aparecen en to-
dos los archivos HTML. Pero
no has utilizado el identifi-
cador , ya
que en este tipo de docu-
mento no tiene ningn sen-
tido. En su lugar aparece la
entrada para in-
dicar al navegador cmo se
debe dividir la ventana. El pa-
rmetro es-
pecifica que en la parte iz-
quierda se debe construir
una columna con un ancho
fijo de 150 puntos y que la
segunda columna ocupar el
resto de la pgina. Si quieres,
puedes insertar ms colum-
nas escribiendo su anchura
separada por comas. Por
ejemplo:
introduce una columna de
100 puntos de ancho en la
parte izquierda y otra de 200
puntos en la derecha. Los
puntos sobrantes quedarn
asignados a una columna
central que puede tener una
anchura variable.
En este ejemplo tienes su-
ficiente con dos columnas.
Adems debes escribir un se-
gundo parmetro. Con
indicas al nave-
gador que se eliminen las se-
paraciones entre los bordes
de cada marco.
3
Con la lnea anterior has
definido el aspecto de la
ventana del navegador. Pero
todava faltan algunos deta-
lles. Pulsa la tecla $y escri-
be las lneas .
La entrada
se encarga de definir
con qu se rellenar
cada marco. El par-
metro , que vie-
ne de source, indica el fi-
chero HTML que debe
insertarse en el marco. En es-
te ejemplo se trata del fiche-
ro que
creaste en el primer aparta-
do. A continuacin se escri-
be el parmetro .
Echa un vistazo a la segun-
da lnea de cdigo:
. Gra-
cias a este nombre el nave-
gador reconoce la ubicacin
de los ficheros cuyos enla-
ces se encuentran en la p-
gina
que has creado en el primer
apartado. Si te fijas en los hi-
pervnculos de este fichero
vers que tienen el parme-
tro: .
La traduccin de Target al
castellano es Destino. Es de-
cir, el enlace apunta al mar-
co que tiene como nombre
contenido (el de la dere-
cha) para mostrar la pgina.
De forma que el contenido
del marco derecho se define
realmente en la pgina
que es
la que se muestra en el mar-
co izquierdo. Tambin has
utilizado el parmetro
que
define el valor inicial de ca-
da marco cuando se presen-
ta la pgina en el navegador.
Cuando hagas click sobre
los enlaces que aparecern
en el marco izquierdo del
navegador, el contenido de
la parte derecha desapare-
cer para ser reemplazado
por el documento HTML de
la seleccin.
4
Slo te faltan un par de l-
neas para terminar y co-
menzar a probar la pgina.
Pulsa la tecla $y escribe el
cdigo .
La primera lnea es el iden-
tificador de cierre del frame
y la segunda cierra todo el
documento.
5
Para terminar debes guar-
dar el fichero. Haz click
en las opciones y
. Se abrir una
ventana en la que debes es-
cribir el nombre de fichero
y pulsar el botn
. Para cerrar el Bloc
de notas haz click en .
6
Si deseas ver el resulta-
do haz doble click en la
carpeta:
critorio y en el archivo:
.
7
Puede que el resultado
no sea espectacular, pe-
ro es muy prctico .
Para comprobar el fun-
cionamiento de los marcos
haz click sobre
y vers como aparece la p-
gina
en la parte derecha de la
ven-
tana.
09 (Pg 68)
08 (Pg 68)
07 (Pg 68)
06 (Pg 68)
8
Cierra el navegador In-
ternet Explorer con un
click sobre . Si lo deseas
puedes mejorar el aspecto de
la pgina realizando algunos
cambios en el fichero nave-
gacion.html. Por ejemplo,
puedes cambiar el color de
los caracteres o poner una
imagen
de fondo siguiendo los pasos
que te hemos indicado en las
entregas anteriores.
Frames
en cascada
Un frame se puede guardar
a su vez dentro de otro fra-
me. Esto quiere decir que
dentro de un marco podrs
incluir otros. El resultado son
unas estructuras que pueden
llegar a ser bastante comple-
jas. En el siguiente ejemplo
vers cmo se hace.
1
Inicia el Bloc de notas ha-
ciendo doble click sobre:
.
2
y . Se abri-
r una ventana en la que tie-
nes que pulsar sobre la pes-
taa de la parte inferior y
seleccionar la entrada
. A conti-
nuacin debes hacer doble
click sobre el icono del fi-
chero .
3
A continuacin se abrir
el fichero .
Haz click sobre y
sobre . Escribe
el nombre de archivo
y pulsa el botn
.
4
y pulsa la tecla $.
5
Presiona la tecla y es-
cribe estas lneas de c-
digo:
Esta lnea crea un nuevo
Frame-Set. En este caso apa-
rece la expresin que
indica al navegador que el
nuevo marco debe dividir la
ventana horizontalmente.
6
Pulsa las teclas $y
y escribe .
Ya sabes lo que significa.
Coge el fichero exter-
no.html y lo inserta en el
marco de nombre exter-
no que acabas de crear.
7
Seguidamente, y en este
orden, presiona las teclas
N, ( y . As pasas a la si-
guiente lnea e introduces
un tabulador.
8
Pulsa las teclas N, $y
para crear otra lnea
donde debes escribir el
identificador de cierre
.
9
Cuando termines, el do-
cumento al completo de-
be tener un aspecto similar
a este:
Y el resultado debe ser el
siguiente: la ventana del na-
vegador se divide primero
verticalmente y despus el
rea derecha se parte hori-
zontalmente. Cuando el na-
vegador interprete el fiche-
ro lo har de la siguiente
manera:
v Divide la ventana del nave-
gador en dos marcos vertica-
les.El de la parte izquierda tie-
ne un ancho de 150 puntos y
el de la derecha todo el espa-
cio que sobre.
Rellena el primer frame
(el de 150 puntos de ancho)
con el contenido del fiche-
ro navegacion.html y lo
llama nav.
VDentro del segundo mar-
co se abre otro frame-set que
divide horizontalmente la
zona de la derecha asignan-
do una altura de 50 puntos
para el marco superior. La
parte inferior tendr el resto
de espacio disponible.
Estas dos lneas de cdigo
rellenan los dos marcos hori-
zontales.
Para terminar se completan
las dos secciones de frame-set
con sus identificadores de cie-
rre correspondientes.
Algunas lneas han sido des-
plazadas hacia la derecha uti-
lizando la tecla . Esto no
es imprescindible para que
el cdigo funcione correcta-
mente, pero es una prctica
bastante habitual en los pro-
gramadores, ya que permite
hacer el cdigo ms legible.
10
Para guardar el fiche-
ro haz click sobre
y .
11
Finalmente tienes que
crear el fichero ex-
terno.html. Para hacerlo
repite el paso 2 del aparta-
do anterior. Pero al guar-
darlo utiliza el nombre
.
12
A continuacin repite
el paso 3 del apartado
Preparacin y escribe las
instrucciones siguientes:
13
En la barra de men
haz click sobre las op-
ciones y .
N 42 68
a
Parte Profesional
Cdigo fuente
Serie de instrucciones y
comandos de programa-
cin que se utiliza para
indicar al navegador lo
que debe hacer cuando
tiene formato HTML. Es-
te trmino tambin lo
emplean los programa-
dores para referirse a
los archivos que poseen
las instrucciones de un
programa.
Parmetro
Informacin que deter-
mina el funcionamiento
de un programa. Tam-
bin se conoce como ar-
gumento. Los parme-
tros pueden tener
valores de todo tipo. Por
ejemplo: nmeros, tex-
tos, expresiones o inclu-
so el nombre de un ar-
chivo. Estos valores
siempre van acompaa-
dos de una instruccin o
un identificador HTML
que indica qu es lo que
se debe hacer con ellos.
Frame-set
Archivo donde se defi-
nen los frames que ten-
dr la pgina. Debe es-
pecificar el tamao y
posicin de cada marco
e indicar los documen-
tos HTML que sern
presentados en ellos.
Tambin puede contener
otros frame-sets.
Identificador
denes que das al
navegador para que
Webmaster
A los diseadores de p-
ginas web tambin se
les llama webmasters.
Cuando completes este
curso de programacin
en HTML tendrs todos
los conocimientos nece-
sarios como para consi-
derarte un webmaster
profesional.
10
09
08
07
06
Conviene usar frames?

X
No todos los diseadores de
pginas HTML utilizan los fra-
mes. Para algunos son una
herramienta imprescindible,
mientras que para otros re-
sultan superfluos.
Cada uno tiene su parte de ra-
zn. Por un lado, si se utilizan
con moderacin, pueden ser
muy tiles porque simplifican
mucho el diseo de las pgi-
nas web y hacen que sean mu-
cho ms claras. Pero si se
abusa de ellos pueden llegar a
resultar molestos. Las pginas
con muchos frames favorecen
que el visitante se pierda en-
tre tantas opciones. Adems,
la creacin de este tipo de p-
ginas resulta ms compleja pa-
ra el diseador.
A algunas empresas no les gus-
ta nada que enmarquen sus p-
ginas dentro de un frame (ver
apartado Frames en cascada).
Para evitarlo, utilizan unos
destructores de frames que
eliminan todos los marcos de
la pgina para que sus conte-
nidos aparezcan ocupando to-
da la ventana del navegador. En
la undcima parte del curso
aprenders a programar estos
destructores de frames.
v
V
N 42 70
a
Parte Profesional
Cierra el Bloc de notas
pulsando sobre .
14
Para terminar haz do-
ble click sobre la car-
peta
y el icono .
15
El resultado debe ser
ste .
Si haces click sobre el en-
lace mientras ests
conectado a Internet, vers
como el marco derecho de
la ventana de tu navegador
muestra la pgina del po-
pular buscador .
Si por el contrario haces
click sobre apare-
cer el fichero de ejemplo
que utilizaste en la anterior
entrega del curso .
16
Puedes seguir pro-
bando con el resto
de enlaces que aparecen el
el marco izquierdo. Cuan-
do termines cierra la ven-
tana del navegador hacien-
do click sobre .
Si consigues dominar el
funcionamiento de los fra-
mes puedes considerarte
un autntico experto en
programacin HTML. Pero
todava te quedan muchas
opciones interesantes por
aprender. Por ejemplo, de-
bes saber cmo se puede
introducir un formulario en
un documento web. De es-
ta forma, los visitantes po-
drn escribir datos en tus
pginas para mandarlos al
webmaster . 10 (Pg. 68)
Consejos con los frames
!
Ya sabes cmo insertar frames.
Ahora te daremos unos cuan-
tos consejos para que los utili-
ces correctamente:
Consejo 1: los frames son muy
prcticos para simplificar la na-
vegacin dentro de pginas, pe-
ro no hay que utilizarlos para
mucho ms. Si por razones es-
tticas deseas dividir tu pgina,
te recomendamos utilizar las ta-
blas. En la sexta entrega del cur-
so (Computer Hoy n 41 pg. 62)
viste cmo disear una pgina
utilizando tablas.
Consejo 2: no dividas tu p-
gina con ms de tres marcos.
Un nmero mayor puede hacer
hace que la pgina se convier-
ta en un autntico caos. Ten en
cuenta que cada frame debe ser
lo suficientemente grande para
presentar el documento HTML
que deseas meter dentro.
Consejo 3: en vez de es-
cribir pue-
des indicar el valor en tanto
por ciento. Por ejemplo, con
el navega-
dor asignar un diez por cien-
to de la ventana para el primer
frame y dejar el noventa por
ciento restante para el segun-
do marco.
!
Aqu encontrars un peque-
o resumen de esta entrega
del curso.
Frame-set
Los frames (marcos) se de-
finen en un fichero propio
que se llama frame-set. Es-
te debe hacer referencia a
los documentos HTML que
contiene.
Divisin
Los frames se pueden divi-
dir de dos formas:
verticalmente con:
horizontalmente con:
Tras estos dos parmetros hay
que indicar los valores que es-
pecifican el ancho del frame.
Estos argumentos se pueden
expresar en puntos de pantalla
o en tanto por ciento.
El smbolo especial sirve
para asignar al frame corres-
pondiente todo el espacio de
la ventana que deja libre el
frame anterior.
El nmero de frames debe ser
igual al nmero de valores se-
parados por una coma que se
hayan introducido. Por ejem-
plo,
genera tres frames.
Frames
encadenados
Los frames pueden contener
a otros frames a la vez. Esto
significa que, dentro de un
frame, en vez de un docu-
mento HTML, se puede in-
sertar otro frame-set. Este
frame-set vuelve a dividir el
espacio del marco dentro de
los bordes que lo delimitan.
En general, el uso de frames
puede resultar muy til para
organizar tus pginas, pero
no debes abusar de ellos, ya
que complican mucho el di-
seo y manejo de las pginas.
E
n la anterior entrega del
curso HTML apren-
diste a utilizar los fra-
mes , que te permiten
mostrar varios documentos
a la vez en una misma ven-
tana del navegador . En
esta ocasin nos centrare-
mos en el tema de los for-
mularios. Para hacerlo vas a
comenzar escribiendo el
cdigo fuente de un
ejemplo sencillo que per-
mitir a los visitantes de tu
pgina enviarte un mensaje
de correo electrnico .
Definir un diseo
Lo primero que hars es
analizar la estructura bsica
de un archivo HTML con un
formulario. Despus inserta-
rs dos campos donde los vi-
sitantes de tu pgina podrn
escribir datos para mandarte
un mensaje de correo elec-
trnico.
1
haciendo click en
y llevando el pun-
tero hacia ,
y .
Haz click de nuevo.
Si has seguido las anterio-
res entregas del curso, tal vez
tengas el icono
en el Escritorio ,
que te permitir acceder di-
rectamente.
2
Para disear el formula-
rio te va a hacer falta la
plantilla que creaste en la
segunda entrega del curso
(ver Computer Hoy n 37,
pg. 74). Si no la tienes pue-
des optar por teclear el tex-
to que aparece en el si-
guiente punto.
3
Abre la plantilla haciendo
click en la ventana del
editor sobre y .
Seguidamente pulsa sobre la
pestaa
.
Finalmente haz doble click
sobre . El fiche-
ro de la plantilla aparecer
en la ventana del editor .
Haz click sobre y
. Aparecer una
ventana en la que debes re-
llenar el apartado
escribiendo
y pulsar sobre el
botn .
4
Haz click con el botn
izquierdo del ratn jus-
to en este punto .
Mantn presionado el bo-
tn y desplaza el puntero ha-
cia la izquierda, de forma que
la lnea de cdigo quede se-
leccionada: .
5
Escribe el identificador
y pul-
sa la tecla $. Este coman-
do indica al navegador que
las siguientes lneas de c-
digo, hasta el identificador
de cierre , son un
formulario.
07 (Pg. 78)
06 (Pg. 78)
05
04
03
02
01
N 43 76
F
o
t
o
:

S
t
o
c
k

F
o
t
o
s

S
.
L
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
Definir un diseo 76
Formulario activo 78
Formularios ms avanzados 78
Resumen de este captulo 80
Insertar un formulario en tu pgina web es la forma ms
fcil de conseguir que los visitantes puedan ponerse en
contacto contigo y mandarte cualquier tipo de informacin
o sugerencia a travs de un mensaje de correo electrnico.
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
77
N 43
HTML
Significa Hypertext
ternet. Con l se definen
en la pgina web.
Frames
Marcos o cuadros que
se utilizan para mostrar
varias pginas a la vez
dentro de la misma ven-
tana. Cada frame puede
contener un documento
HTML distinto u otros
frames. Lo ms habitual
es colocar un frame en
la parte izquierda con
todos los hipervnculos
de la pgina.
Navegador
Internet. Tambin se uti-
liza para descargar fi-
cheros o ver contenidos
multimedia. En la actua-
lidad, los navegadores
que se utilizan ms fre-
cuentemente son Explo-
rer, de Microsoft, y Na-
vigator, de Netscape.
Cdigo fuente
comandos de progra-
macin que se utiliza
para indicar al navega-
dor lo que debe hacer
cuando muestra un ar-
chivo que tiene formato
HTML. Este trmino
de un programa.
Correo
electrnico
Sistema que permite en-
viar y recibir textos a
travs de la red Internet.
Los mensajes de correo
electrnico tardan unos
pocos segundos en lle-
gar al buzn del destina-
tario desde donde pue-
den ser descargados en
cualquier momento, y
pueden llevar adjuntos
ficheros de todo tipo:
fotos, msica, pelculas.
05
04
03
02
01
6
Escribe estas dos lneas
de texto .
Con la primera das la or-
den de mostrar el ttulo del
primer elemento del for-
mulario en negrita. En la se-
gunda utilizas el identifica-
dor para definir el
formato del campo de en-
trada . El navega-
dor sabe que en este punto
debe mostrar un recuadro
para introducir datos. El ar-
gumento in-
dica que se trata de una ni-
ca lnea de texto.
El parmetro
te sirve para especificar la
variable donde
se almacenar el valor de en-
trada del campo. Finalmente
con indicas al
navegador que el ancho del
campo es de 30 caracteres.
Por cierto, no nece-
sita identificador de cierre.
7
De momento slo has
creado un pequeo cam-
po que permitir introducir
una direccin de correo elec-
trnico. El campo que per-
mitir introducir el texto del
mensaje debe tener un ta-
mao bastante ms grande.
Para crearlo debes pulsar la
tecla $ y escribir las si-
guientes lneas de cdigo .
La primera instruccin
realiza un salto de l-
nea. Despus escribes el t-
tulo del elemento en negri-
ta y vuelves a saltar una
lnea para que el documen-
to sea ms legible.
A continuacin viene un
bloque de texto que est de-
finido con la orden
. Los siguientes
dos parmetros:
para el nmero
de columnas y
para el nmero de filas, te
deben resultar familiares, ya
que fueron tratados en la an-
terior entrega de este curso.
En este caso, sus valores sir-
ven para determinar el ta-
mao del recuadro donde se
podr escribir el mensaje. Es
decir, el navegador reserva-
r un ancho de 40 caracteres
y una altura de 10 para este
campo de entrada de texto.
An queda el parmetro
, que per-
mitir asignar el texto que
se introduzca en el campo
del mensaje a una variable.
8
be el identificador de
cierre .
9
Todava te falta una par-
te que se encargue de in-
dicar al navegador cundo
se han introducido todos los
datos del formulario. Pre-
siona la tecla $y escribe
estas dos lneas de cdigo .
Con ellas se realiza un salto
de lnea y se dibuja un bo-
tn. Cuando los usuarios que
visiten tu pgina escriban en
ella un mensaje tendrn que
pulsar este botn para man-
dar los datos. Para crearlo
has utilizado el identificador
acompaado del pa-
rmetro .
Submit se puede traducir
al castellano como enviar.
Despus aparece el argu-
mento
que determina el texto que
se ver escrito dentro del
botn.
10
Pulsa la tecla $e in-
troduce el identifica-
dor de cierre . El
cdigo fuente al completo
tiene el siguiente aspecto .
11
Haz click sobre las
opciones y
. A continuacin
cierra el Bloc de notas pul-
sando sobre .
12
la carpeta
critorio. Dentro de ella haz
otra vez doble click sobre el
icono
13
ste es el aspecto fi-
nal que tendr la p-
gina .
Si lo deseas, puedes rellenar
los campos y hacer click so-
bre el botn . En la
lnea de direccin aparece-
r, por ejemplo .
Tras el signo de interro-
gacin aparecern el nom-
bre y el contenido de cada
campo. Por ejemplo,
se habr convertido en
y, depen-
diendo de lo que hayas te-
cleado con anterioridad en
el formulario, aparecer un
texto u otro a continuacin.
En realidad esta indicacin
de la barra de direcciones
est pensada para ser pro-
cesada por un
programa que
debe ser indicado junto al
identificador . En
este ejemplo no lo has he-
cho y el resultado de las en-
tradas aparece en el campo
de direcciones. En el si-
guiente apartado vas a ver
cmo puedes enlazar tu for-
mulario con un programa.
14
Antes de comenzar
debes cerrar la venta-
na del Explorer haciendo
click sobre .
10 (Pg. 78)
09 (Pg. 78)
08 (Pg. 78)
Formularios y Javascript
!
Los formularios no slo son
tiles para recopilar y enviar
datos, tambin puedes hacer
otras muchas cosas. Te resul-
tarn perfectos para visualizar
en tus pginas aquellos datos
que piensas modificar con
Javascript. Por ejemplo, pue-
des programar los botones de
tal manera que al hacer click
sobre ellos aparezcan determi-
nados datos en la ventana del
navegador. Los conocimientos
de Javascript necesarios para
realizar este tipo de aplicacio-
nes los vers en la undcima
entrega del curso HTML (Com-
puter Hoy n 46).
Formulario activo
Las siguientes lneas de
cdigo darn vida a tu for-
mulario. Slo necesitas una
direccin de correo elec-
trnico y un programa que
gestione los datos. En nues-
tro ejemplo vas a utilizar un
servicio de libre acceso que
permite gestionar gratuita-
mente los formularios. Lo
puedes encontrar en la di-
reccin de Internet - v.
Su funcionamiento es muy
simple: el visitante de tu p-
gina de Internet rellena tu
formulario.Tras hacer click
en el botn , tu p-
gina web se pone en con-
tacto con el servidor. Este
servidor utiliza un programa
que recoge los datos del for-
mulario y los remite, va co-
rreo electrnico, en el mis-
mo orden que han sido
introducidos, a tu direccin
de e-mail.
1
Inicia el Bloc de notas
con un doble click sobre:
.
2
Haz click sobre
y . Despus pulsa
la pestaa
. Final-
mente haz do-
ble click sobre el fichero
para abrirlo.
3
Haz click justo detrs del
comando . Pulsa
la tecla de la barra de espa-
cio ( ) e introduce el si-
guiente texto: .
El parmetro in-
dica al navegador dnde tie-
ne que remitir los datos del
formulario y
especifica
que se trata de un correo
electrnico.
4
Para que el formulario
llegue a tu direccin de
correo debes escribir otra
lnea de cdigo. Haz click
justo en este punto
y pulsa la tecla $. A conti-
nuacin escribe el siguien-
te texto .
El identificador es
un campo de entrada. Pero
en esta ocasin aparece con
el parmetro .
en castellano signi-
fica oculto. Esto implica
que los campos no van a apa-
recer en el formulario, ya
que el remitente no ha de co-
nocer cul es tu direccin de
correo electrnico.
Tambin es muy impor-
tante el parmetro .
Esta indicacin es utilizada
por el programa para poder
saber en qu lnea se espe-
cifica tu direccin de co-
rreo electrnico. Esta in-
formacin se aade justo
detrs de . Ten en
cuenta que en este caso
es un dato de ejemplo. Para
que todo funcione correc-
N 43 78
Escritorio
Windows 95 y 98. En
accesibles fcilmente en
cualquier momento.
documentos.
Identificador
denes que das al
navegador para que
Campo
de entrada
Recuadro que aparece
en algunas pginas web
para que los usuarios
que las visitan puedan
cumplimentarlo con da-
tos. Posteriormente to-
da la informacin que se
introduzca en la pgina
se procesa por un pro-
grama que enva las en-
tradas a una direccin
de correo electrnico.
Parmetro
Es una informacin que
determina el funciona-
Tambin se conoce co-
mo argumento. Los pa-
rmetros pueden tener
valores de todo tipo. Por
ejemplo: nmeros, tex-
tos, expresiones o inclu-
so el nombre de un ar-
chivo. Estos valores
siempre van acompaa-
dos de una instruccin o
un identificador HTML
que indica qu es lo que
se debe hacer con ellos.
Variable
Elemento de un progra-
ma que contiene un da-
to que puede variar en
tiempo de ejecucin.
Por ejemplo un nme-
ro, texto, fecha o cual-
quier otro tipo de infor-
macin.
10
09
08
07
06
Formularios con CGI

!
Para gestionar un formulario
hace falta un programa que
procese los datos. Esta labor la
realizan los programas CGI, si-
glas de Common Gateway In-
terface, que se puede traducir
al castellano como Interface
comn para la transmisin de
datos. El CGI es un programa
que recoge la informacin del
usuario y la prepara para en-
viarla por e-mail.
Da igual de qu tipo de pro-
grama se trate o en qu len-
guaje est programado. Puede
tratarse de una base de datos,
un programa que mande men-
sajes o que calcule los tipos de
inters. Slo tiene que ser ca-
paz de entenderse con la pgi-
na web que enva los datos.
A su vez, el programa devuel-
ve un resultado al usuario que
cumplimenta el formulario. Es-
te resultado se muestra en el
navegador utilizando una pgi-
na web. Puede ser un mensaje
de error, la confirmacin del en-
vo de un correo electrnico, el
resultado de una consulta a una
base de datos o una operacin
matemtica. No no todos los
servidores de Internet ofrecen
a sus usuarios un interface CGI
y por tanto no todos permiten
utilizar formularios.
Formularios ms avanzados
!
Adems de los campos de tex-
to que has visto en el formu-
lario de este ejemplo, existen
otros sistemas que permiten
introducir datos. Por ejemplo,
las listas despegables que fa-
cilitan al usuario seleccionar
un valor determinado entre las
opciones de una lista o los
controles de seleccin con los
que podrs presentar en pan-
talla varios elementos que se
pueden seleccionar pulsando
sobre ellos. El cdigo fuente
de una lista despegable tiene
el siguiente aspecto .
Con le indicas al
navegador que lo que viene a
continuacin es una lista des-
plegable que contiene varios
elementos entre los que se
debe seleccionar uno.
El nombre
es muy im-
portante.
Este parmetro es el que se-
r utilizado como nombre de
variable para devolver el re-
sultado de la seleccin.
son las distintas po-
sibilidades que aparecern en
la lista para poder escoger. A
continuacin viene
, que es el
valor que ser almacenado en
la variable en el caso de que
la opcin sea seleccionada y
, que es el texto
que aparecer en el men pa-
ra que puedas seleccionarla
con el ratn.
Si realizas este ejemplo co-
rrectamente obtendrs el si-
guiente resultado
.
Estas listas desplegables son
muy prcticas cuando deseas
que los visitantes de tu pgina
puedan seleccionar entre las
opciones que les ofreces.
Otro elemento importante en
los formularios son las cajas
de seleccin, unas pequeas
casillas que el usuario
puede activar con un simple
click de ratn .
El cdigo fuente de estos ele-
mentos tiene el aspecto si-
guiente .
Como ya sabes, el identifica-
dor sirve para indicar
que a continuacin hay un
campo para introducir datos.
El siguiente parmetro es
y se utili-
za para determinar el aspec-
to del campo. Con esta indi-
cacin ests generando una
casilla vaca, mientras que
con y vuel-
ves a determinar con qu va-
lor y con qu nombre se pa-
sa la variable al programa que
procesa el formulario.
El resultado obtenido con es-
te ejemplo debe ser similar a
este:
.
N 43 80
tamente debes introducir
tus datos reales. Si no lo ha-
ces, no recibirs ningn for-
mulario. Para evitar que te
bombardeen con molestos
mensajes publicitarios, pue-
des crear una direccin de
correo gratuita y utilizarla
para realizar este ejemplo.
Para crear una cuenta e-mail
de este tipo puedes con-
sultar las pginas web -
o 3V (existen cientos de
pginas similares) donde
encontrars toda la infor-
macin necesaria.
5
El texto completo tiene
el siguiente aspecto .
Haz click sobre las opciones
y . Cierra el
Bloc de notas pulsando so-
bre .
6
Para ver el resultado haz
doble click sobre la car-
peta
y el fichero
.
7
A primera vista no pare-
ce que existan muchas
diferencias con la versin
del apartado anterior .
Pero si rellenas los dos
campos
y haces click en el botn
, mientras ests co-
nectado a Internet, el par-
metro entrar en
funcionamiento y los datos
sern remitidos a tu buzn
de correo electrnico.
8
Unos instantes ms tar-
de aparecer un texto in-
dicando que el mensaje es
correcto y se encuentra en
camino .
9
Cierra Internet Explorer
haciendo click en .
10
Conviene que unos mi-
nutos ms tarde eches
un vistazo a la bandeja de en-
trada de tu correo electrni-
co. Debes encontrar un men-
saje de este tipo ,
que podrs abrir haciendo
doble click sobre l.
11
En el mensaje de co-
rreo electrnico apa-
recern los datos que has
introducido. Como puedes
ver, el servidor ha incluido
la direccin de correo elec-
trnico .
Esto te permitir contes-
tar el mensaje inmedia-
tamente. Tambin aparece
el texto del mensaje .
Los formularios hacen po-
sible que los visitantes de tu
pgina se pongan directa-
mente en contacto contigo.
curso se har un repaso a
los identificadores ocultos,
ya que, aunque estos co-
mandos no se ven en la p-
gina, resultan muy tiles.
Resumen de este captulo X
Como en otras ocasiones, a
continuacin te mostramos
un pequeo resumen con
los contenidos ms impor-
tantes que han sido descri-
tos en este captulo del cur-
so de programacin HTML:
Formularios
Los formularios son pginas
web con varios campos que
deben ser rellenados por el
usuario a travs del navega-
dor. Posteriormente se debe
pulsar un botn para que to-
dos estos datos sean pre-
sentados o enviados a la di-
reccin de correo electrnico
que especifiques. El cdigo
fuente de los formularios se
escribe entre los identifica-
dores y .
Para que el formulario fun-
cione correctamente necesi-
tas utilizar un programa que
gestione los resultados. El
programa que vas a utilizar
debe estar definido con el pa-
rmetro .
Entrada de datos
Para presentar un campo de
entrada de datos debes utili-
zar el identificador .
Si lo acompaas del parme-
tro indicars
al navegador que a continua-
cin se presentar una pe-
quea caja donde se podr in-
troducir una lnea de texto.
Cajas de texto
Cuando utilizas la orden
puedes
crear una caja para introdu-
cir varias lneas de texto. Con
especificas la
anchura en caracteres y con
el nmero de
lneas que tendr la caja de
texto para escribir datos.
Enviar los datos
Por ltimo debes crear un bo-
tn que permita enviar los da-
tos cuando se termine de re-
llenar el formulario. Para
hacerlo debes utilizar el iden-
tificador acompa-
ado del parmetro
.
Direcciones online
- vwww.melodysoft.com
- www.hotmail.es
-V
www.latinmail.com
E
de pginas web en
HTML aprendiste a di-
sear formularios para
que los visitantes de tus p-
ginas puedan enviarte datos
a tu direccin de correo
electrnico. En esta ocasin
aprenders a usar identifi-
cadores ocultos que te
permitirn programar algu-
nas rutinas. Estas se ejecu-
tan automticamente cada
vez que se cargue tu pgina
y permiten definir algunas
palabras clave que ayu-
darn a los buscadores
a catalogar tu pgina web.
Los identificadores ocul-
tos son instrucciones espe-
ciales de HTML. Al contra-
rio que los identificadores
que ya conoces, estos tienen
funciones invisibles que
no son mostradas directa-
mente cuando se visualiza
la pgina. Con ellos no po-
drs presentar textos ni es-
tablecer colores o tipos de
letra, pero te permitirn dar
algunas rdenes especiales
al navegador .
El identificador oculto ms
importante es . Con
l podrs realizar las fun-
ciones que te indicamos a
continuacin.
Abrir pginas
automticamente
Con la ayuda del identi-
ficador podrs,
por ejemplo, abrir un do-
cumento HTML a partir de
otro documento HTML des-
pus de un tiempo deter-
minado.
Puede que en un principio
esto no te parezca intere-
sante, pero te ofrece muchas
posibilidades. Por ejemplo:
hacer una presentacin (a
modo de diapositivas), mos-
trar un mensaje de bienve-
nida en tu pgina de inicio
durante unos ins-
tantes o llevar a todos los vi-
sitantes a la direccin de In-
ternet que t quieras.
El siguiente ejemplo mues-
tra una pgina HTML que
tras cinco segundos presen-
ta una segunda.
Como es habitual, para re-
alizar la prctica necesitas el
archivo de plantilla que
creaste en la segunda entre-
ga del curso. Si no lo tienes,
puedes copiar el cdigo
fuente que apa-
rece en el paso 2.
1
Para iniciar el editor haz
doble click en .
Tambin puedes hacerlo si-
guiendo la siguiente ruta:
, , y
.
08 (Pg. 78)
07 (Pg. 78)
06
05
04
03
02
01
N 44 76
Para este captulo del curso no hace falta que compres
una bola de cristal. Te bastar con aplicar los comandos
ocultos del HTML que te explicamos a continuacin
y conseguirs algunos efectos mgicos para tus pginas.
F
o
t
o
:

S
t
o
c
k

F
o
t
o
s

S
.
L
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
Para
principiantes
Para
expertos
Para
profesionales
Para qu sirven los identificadores ocultos N 44
HTML con Java N 46
77
N 44
HTML
Significa HyperText
en la pgina web.
Formularios
Algunas pginas web
disponen de campos
donde los visitantes
pueden introducir datos
para ser procesados por
un programa que pre-
senta un resultado o los
enva a travs de correo
electrnico al responsa-
ble de la pgina.
Identificador
denes que das al
navegador para que
muestre una pgina web
Palabras
clave
Trminos que se introdu-
cen cuando se desea
buscar un registro en
una base de datos. Por
ejemplo cuando deseas
encontrar informacin en
un buscador de Internet.
Buscadores
Sitios web que permiten
buscar informacin en
Internet. Para utilizarlos
debes introducir las pa-
labras clave con las que
deseas realizar la bs-
queda. Posteriormente
aparecer una pgina
con los resultados orde-
nados por importancia.
Navegador
Internet. Tambin se
puede utilizar para des-
cargar ficheros de la
Red o ver contenidos
multimedia.
06
05
04
03
02
01
2
Haz click en la ventana
del Bloc de notas sobre
las opciones y .
Despus pulsa el botn
y selec-
ciona el tipo de fichero
. Haz do-
ble click sobre el archivo
. La ventana
mostrar la plantilla .
3
y . Es-
cribe y pulsa so-
bre el botn .
4
Ahora vas a presentar un
breve texto y dos imge-
nes que has utilizado varias
veces en anteriores entregas
del curso. Si no las tienes pue-
des utilizar otras, pero ase-
grate de que se encuentran
en la misma carpeta que la
pgina HTML. Haz click con
el botn izquierdo en .
Sin soltar el botn, mueve el
puntero a la izquierda hasta
que la lnea aparezca selec-
cionada .
5
guientes: .
Con conseguirs
que las imgenes aparezcan
centradas en la pgina. A con-
tinuacin hay tres saltos de
lnea, dos imgenes y un t-
tulo corto. Con la expresin
introducirs un hipervncu-
lo que apunta al
documento HTML creado en
la cuarta entrega del curso
(puede ser cualquier otro).
Este enlace puede resultar
til para los visitantes que
utilicen un navegador anti-
guo que sea incapaz de en-
tender el identificador
. Con
cierras la orden de alineacin
central.
6
Para que la pgina fun-
cione debes utilizar el
comando . Pulsa la
tecla y, sin soltarla, pre-
siona H. A continuacin
pulsa varias veces & hasta
que el cursor
quede situado justo delante
de .
7
Pulsa la tecla $y des-
pus . A continuacin
inserta la lnea .
El identificador es-
t acompaado por dos ar-
gumentos :
in-
forma al navegador que de-
be refrescar el contenido
de su ventana y
indica cundo se producir
el cambio y cul ser la p-
gina utilizada.
significa conte-
nido. Despus del signo
aparecen dos elementos en-
tre comillas y separados por
punto y coma. Primero se in-
dica el tiempo en segundos
que el navegador debe es-
perar antes de abrir la nue-
va pgina, en este caso .
Despus aparece el archivo
HTML que debe utilizar. En
esta ocasin se trata de
, que es
una pgina local almacena-
da en el disco duro, pero
puede tratarse de cualquier
otra pgina de Internet.
8
Con esto has terminado
de disear la pgina. El
cdigo fuente completo de-
be tener este aspecto: .
Haz click en y
para guardar los
cambios. A continuacin cie-
rra la ventana del Bloc de no-
tas haciendo click en .
9
icono
del Escritorio y despus en
.
10
El navegador se abrir
y mostrar la pgina .
Al cabo de cinco segundos de
espera accionar automti-
camente y presentar el se-
gundo documento .
11
Cierra el navegador In-
ternet Explorer ha-
ciendo click en .
Direccionamiento
inmediato
Imagina que no te queda
ms remedio que desplazar-
te con tu pgina de inicio
completa de un servidor de
Internet a otro. O
deseas cambiar el nombre
de todas tus pginas para se-
guir un esquema concreto.
Qu pasar entonces con
los visitantes que busquen
tus pginas? Muy fcil, utili-
zando el identificador ocul-
to podrs llevarles
rpidamente hasta la pgina
que desees. En el siguiente
ejemplo te mostramos lo
que debes hacer para seguir
este procedimiento.
1
Tendrs que utilizar de
nuevo el archivo de plan-
tilla. Repite los pasos 1 y 2
del primer apartado.
2
A continuacin haz click
en y .
Aparecer otra ventana. En
la casilla es-
cribe y pulsa el
botn .
12 (Pg. 78)
11 (Pg. 78)
10 (Pg. 78)
09 (Pg. 78)
N 44 80
World
Wide Web
Red mundial de datos
de Internet. En ella pue-
des encontrar informa-
cin sobre innumerables
temas. Lo ms impor-
tante es que toda la in-
formacin est relacio-
nada para facilitar la
bsqueda de datos.
Indexar
Organizar una base de
datos utilizando un crite-
rio determinado. Por
ejemplo, los buscadores
de Internet indexan y or-
ganizan las pginas web
por su contenido e im-
portancia.
Proxy
Ordenador que acta
como intermediario en-
tre tu ordenador y la red
Internet. Puede ofrecer
algunos servicios adi-
cionales de seguridad,
administracin y cach.
Normalmente se en-
cuentra en el ISP, pero
las empresas suelen te-
ner un servidor proxy
para conectar todos sus
equipos a Internet utili-
zando una red interna.
ISP
Proveedor de servicios
de Internet. Ofrecen a
sus clientes una cone-
xin a la red Internet, co-
rreo electrnico, chat,
news y un telfono de
consultas. Los gratuitos
tienen algunas limitacio-
nes y los de pago ofrecen
ms servicios con mayor
calidad.
Cach
Parte del disco duro que
utiliza el navegador para
almacenar las pginas
ms visitadas. De esta
forma se evita el tener
que transmitirlas a tra-
vs de la Red cada vez
que quieres visitarlas y
se muestran mucho ms
rpido.
Meta-
generador
Programa o pgina web
en la que se introducen
algunos datos para que
genere el cdigo HTML
de los identificadores
<meta>.
18
17
16
15
14
13
de tus pginas de Internet

puedes seguir las instruc-
ciones siguientes:
1
mer apartado.
2
A continuacin haz click
en y . Pul-
sa sobre la pestaa
. Para abrir
el documento haz doble
click sobre el fichero
.
3
y pulsa $.
4
Escribe la siguiente lnea
de programa: .
Con , el navega-
dor reconoce que a conti-
nuacin aparece una orden
de configuracin para la p-
gina que est cargando.
significa expi-
ra, lo que indica que la p-
gina tiene una fecha de ca-
ducidad. Con ,
estableces que sta es in-
mediata. Si un navegador lee
la pgina, recibir la orden
de actualizarla con el con-
tenido del
servidor original la prxima
vez que la busque.
5
Haz click en y
. Cierra el Bloc de
notas pulsando sobre .
En la siguiente entrega ha-
blaremos de nuevo sobre la
edicin de pginas web y
aprenders a mejorarlos uti-
lizando plantillas.
Generar identificadores <meta> automticamente
!
Algunos servidores de Inter-
net te pueden ayudar a gene-
rar identificadores <meta>.
Uno de ellos es: -V.
1
Inicia el navegador de In-
ternet haciendo doble click
sobre: .
2
Para saltar hasta la lnea
de direcciones del nave-
gador pulsa la tecla %y sin
soltar presiona la R.
3
Escribe la direccin
.
y pulsa $.
4
Aparecer la pgina del
metagenerador . In-
troduce los datos en los cam-
pos unos detrs de otros, por
ejemplo: .
Si no deseas rellenar alguna
casilla puedes dejarla vaca.
Para acceder a la parte infe-
rior de la pgina debes pulsar
en el de la barra de des-
plazamiento del navegador.
5
Haz click sobre el botn
que se
encuentra al final de la pgi-
na. En unos pocos segundos
aparecer un texto con los
identificadores correspon-
dientes .
Con esta pgina se pueden
generar algunos identifica-
dores extra, aparte de los que
te hemos explicado en este
captulo.
6
Para seleccionar los iden-
tificadores, haz click con
el ratn al principio de la pri-
mera lnea
y, sin soltar, desplaza el pun-
tero hacia la parte inferior de-
recha. Pusa y al mismo
tiempo C para copiar el tex-
to. Despus, abre el archivo de
plantilla tal y como te hemos
descrito anteriormente e in-
serta el texto haciendo click en
y . Los iden-
tificadores deben quedar en-
tre las lneas de comando
y .
18
!
Este es el resumen de los
contenidos ms importantes
de este captulo:
Meta-identificador
El identificador tie-
ne varias utilidades.
Entre otras, se encarga de abrir
automticamente documentos
o ayuda a los buscadores a en-
contrar pginas. Si lo deseas,
tambin ordena al navegador
que abra un documento desde
el servidor original en lugar de
cargarlo desde la memoria in-
termedia. Entre los identifica-
dores y
puedes colocar una gran can-
tidad de instrucciones del ti-
po .
Bsqueda
automtica
se puede utilizar
para abrir pginas automti-
camente. Con el comando
indicas al navegador que de-
be volver automticamente al
contenido actual .
Indica el tiempo, en este ca-
so cinco segundos, y especi-
fica el documento que debe
abrirse. Un en lugar de
activar el proceso de
apertura de forma inmediata.
Ayudas
de bsqueda
Los buscadores tienen en
cuenta los identificadores
para indexar las p-
ginas. Para hacerlo breve-
mente se utiliza .
Las palabras clave se pueden
indicar con .
Tambin puedes registrar tu
nombre .
Bsquedas
sin rodeos
Si actualizas con frecuencia
los contenidos de tus pgi-
nas, puedes ordenar al nave-
gador que, cada vez que la
abra, elija la pgina directa-
mente del servidor y no de la
memoria intermedia.
Para hacerlo debes utilizar .
Online
- vwww.yahoo.com
- www.excite.es
-Vwww.webservicio.com
E
de pginas web en
HTML aprendiste a uti-
lizar algunos identificado-
res ocultos que te han
permitido programar deter-
minadas rutinas. Estas se eje-
cutan automticamente ca-
da vez que se carga tu pgina
en un navegador y te
permiten definir algunas pa-
labras clave que ayu-
darn a los buscadores
a catalogar tu pgina web.
En esta ocasin vamos a
tratar las hojas de estilo en
cascada que te
ayudarn a mejorar el as-
pecto de tus documentos y
conseguir una buena orga-
nizacin de tus pginas. Su
funcionamiento es similar al
de las plantillas
que se utilizan en los proce-
sadores de texto, por ejem-
plo en Microsoft Word. Estos
archivos contienen algunos
aspectos relativos a la pre-
sentacin final de los docu-
mentos. As, por ejemplo,
puedes guardar bajo el
nombre de Arial-negrita
una configuracin que
utiliza el tipo de letra
Arial combinado con el
formato Negrita y un tama-
o de 14 puntos .
Cuando quieras recuperar es-
ta configuracin, tan slo
tendrs que seleccionar el
nombre de la plantilla y
podrs dar formato al
texto automticamen-
te. Esta herramienta re-
sulta muy prctica ya
que te evita el tener
que configurar una a
una todas las propie-
dades cada vez que quieras
mostrar un texto.
Tu primera
hoja de estilo
Para realizar este primer
ejercicio debes recuperar la
plantilla que creaste en la se-
gunda entrega del curso. Si
no la tienes, puedes dise-
arla introduciendo el c-
digo fuente que
aparece en el paso 2.
1
Para iniciar el Bloc de no-
tas pulsa en:
Si no encuentras este icono
en el Escritorio ,
puedes seguir la ruta
, ,
y .
2
Haz click en y
.
Para ver todos los ficheros
pulsa sobre el botn
y selecciona
. A conti-
nuacin haz doble click so-
bre . En la ven-
tana aparecer el cdigo
fuente de la plantilla:
3
Antes de ponerte manos
a la obra, tendrs que
guardar el fichero con otro
nombre. Haz click en
y .
10 (Pg. 64)
09 (Pg. 64)
08 (Pg. 64)
07 (Pg. 64)
06 (Pg. 64)
05
04
03
02
01
N 45 62
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
Tan slo debes elegir la que ms te guste. Las hojas
de estilo en cascada te permiten disear formatos de
texto con distintos tamaos, colores y tipos de letra.
Para usarlas, te bastar indicar la que necesites y
conseguirs escribir muchas menos lneas de cdigo.
Tu primera hoja de estilo 62
Variaciones de estilo 63
Construccin de clases 64
Resumen de este captulo 66
F
o
t
o
:

F
o
t
o
t
e
c
a

9
x
1
2

S
.

L
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
63 N 45
HTML
Significa HyperText
en la pgina web.
Identificador
El lenguaje HTML se
escribe utilizando identi-
ficadores. Estos son r-
denes que das al nave-
gador para que muestre
una pgina web tal y co-
mo deseas. Cada identi-
ficador es una orden y
puede indicar atributos
del texto, posicin de
imgenes, hipervnculos
o cualquier otra
propiedad de la pgina
que quieras aplicar.
Navegador
Internet. Tambin se
puede utilizar para
descargar ficheros de la
Red o visualizar algunos
contenidos multimedia
comos sonidos, imge-
nes o incluso vdeos.
Palabras
clave
Trminos que se introdu-
cen cuando se desea
buscar un registro en
una base de datos. Por
ejemplo cuando deseas
encontrar informacin en
un buscador de Internet.
Los trminos introduci-
dos deben definir lo ms
exactamente posible el
trmino que se busca.
Buscador
Sitio web que te permite
localizar pginas de In-
ternet relacionadas con
el tema que desees. Pa-
ra utilizarlo debes intro-
ducir las palabras clave
con las que deseas reali-
zar la bsqueda. Poste-
riormente aparecer una
pgina con los resulta-
dos en orden de impor-
tancia desde donde po-
drs acceder a ellos
pulsando sobre su enla-
ce correspondiente.
05
04
03
02
01
Escribe
y pulsa .
4
Haz click justo detrs de...
.....
y pulsa la tecla $.
5
Despus introduce la si-
guiente lnea de cdigo:
.
El identificador indi-
ca al navegador que a conti-
nuacin aparece una planti-
lla de formato, y el
parmetro
que se trata de una hoja de
estilo en cascada,CSS, son
las siglas inglesas de Casca-
ding Style Sheet.
6
Seguidamente, pulsa la te-
cla $y escribe . Se
trata del smbolo que indica
el inicio de un comentario.
De esta forma impides que
los navegadores que no co-
nocen los CSS representen
el cdigo que viene a conti-
nuacin en pantalla. En el
cuadro Utilizacin de co-
mentarios de la pgina 64
puedes encontrar ms infor-
macin sobre este tema.
7
Vuelve a pulsar la tecla
$ e introduce las si-
guientes lneas de cdigo:
Con fijas la configura-
cin del identificador
. Esto significa que ms ade-
lante, en el documento, to-
dos los apartados que co-
miencen por y
terminen por ten-
drn esta configuracin. Las
instrucciones de formato
van siempre precedidas por
una llave y cada una de
ellas separadas por punto y
coma . Despus de la l-
tima tendrs que escribir la
llave de cierre .
La primera instruccin de
formato es
, con
ella especificas el tipo de le-
tra. En este caso hemos uti-
lizado la fuente ,
aunque puedes usar cual-
quier otra. Debes recordar
que siempre se debe escri-
bir entrecomillada, incluso
cuando el nombre est for-
mado por varias palabras.
Por ejemplo, el tipo de letra
Truetype
.
La segunda lnea de cdigo
fija el tamao de letra. Con
indicas
que ste es de 14 puntos.
El parmetro
fija el color de
la fuente. En este caso vas a
utilizar el color azul.
8
be . Con esta lnea
cierras el comentario que
iniciaste en el paso 6.
Pulsa de nuevo la tecla $
y escribe el identificador de
cierre .
9
Con esto has introducido
todas las caractersticas
de un nuevo formato.
Para ejecutarlas, selecciona
la lnea del
cdigo fuente.
10
Escribe las siguientes
lneas de cdigo:
La parte del texto que est
delimitada por los identifi-
cadores y apare-
cer con el formato que has
definido anteriormente. El
resto del prrafo debe mos-
trarse sin que se aplique nin-
guna plantilla. El cdigo
fuente completo es el si-
guiente:
11
Haz click en y
. Despus cie-
rra la ventana del editor pul-
sando sobre .
12
el icono:
que se encuentra en el Escri-
torio y luego en:
13
El navegador se abrir
y mostrar la pgina
Como puedes ver, slo el pri-
mer prrafo tiene el tipo de
letra, tamao y color que has
fijado con anterioridad.
El segundo prrafo es el que
no has escrito
entre los iden-
tificadores
y , por
eso no ha ex-
perimentando
variaciones.
14
Para cerrar el navega-
dor, haz click en .
Variaciones
de estilo
Si has seguido todas las ins-
trucciones del apartado an-
terior debes tener claro el
funcionamiento de las
hojas de estilo. Resu-
miendo, al principio
del cdigo fuente de-
fines un nuevo identi-
ficador que podrs uti-
lizar ms adelante para
fijar un tamao, tipo y
color de letra espec-
ficos. Las hojas de es-
tilo en cascada te brin-
dan muchas ms
posibilidades. Siguien-
do los pasos que te va-
mos a indicar a conti-
nuacin podrs
ampliar las propieda-
des de los identifica-
dores de forma global
o individual.
1
primer apartado.
2
Haz click sobre y
. Despus pulsa
y selecciona
.
3
Para abrir el fichero haz
doble click sobre la op-
cin .
4
Ahora, vas a asignar las
propiedades del identifi-
cador a uno nuevo que
llamars . Para conse-
guirlo, debes hacer click jus-
to en este punto
5
Simplemente tienes que
escribir . De esta for-
ma puedes asignar un for-
mato a todos los identifica-
dores que quieras.Tan slo
debes introducirlos uno de-
trs de otro separndolos por
una coma. Es decir, el identi-
ficador tiene asigna-
dos el mismo tipo, tamao y
color de letra que el identifi-
cador . En un principio,
esto puede ser absurdo, pe-
ro si realizas las modifica-
ciones que te indicamos a
continuacin conseguirs de-
finir dos identificadores dis-
tintos utilizando muy pocas
lneas de cdigo.
6
Haz click justo al final de
la lnea y
pulsa la tecla $.
7
Escribe las siguientes l-
neas de cdigo:
En un principio has fijado el
tamao de letra
para el
identificador y ahora
lo has cambiado con
. Esto
puede parecer un poco ex-
trao, pero es uno de los prin-
cipios bsicos de las hojas de
estilo en cascada. Las planti-
llas se pueden construir unas
dentro de otras.
12 (Pg. 66)
11 (Pg. 64
Esto significa que puedes dar

formato a los identificadores
tantas veces como desees, pe-
ro el nico vlido ser el l-
timo que escribas.
La razn principal para em-
plear esta metodologa es que
puedes asignar un formato
bsico para todos los identi-
ficadores y posteriormente
cambiar las propiedades par-
ticulares de cada uno de
ellos.
Gracias a esta opcin podrs
complementar fcilmente el
diseo de unas plantillas con
otras.
8
Para comprobar el resul-
tado, debes escribir algn
texto utilizando el identifi-
cador .
y pulsa la tecla $.
A continuacin escribe la si-
guiente lnea:
El cdigo fuente completo
tiene el siguiente aspecto:
9
Haz click sobre y
. Cierra el Bloc de
notas pulsando sobre .
10
apartado anterior.
El resultado muestra un t-
tulo con las mismas pro-
piedades que el texto que
aparece, pero con un ta-
mao de letra ms grande
y en negrita
11
Cierra el navegador
con un click en .
Construccin
de clases
De momento has aprendi-
do a utilizar plantillas de es-
tilo creando identificadores
al principio del cdigo
HTML. En este apartado, ha-
rs lo mismo definiendo una
clase que podrs
utilizar en combinacin con
otros identificadores. Sigue
estos pasos:
1
mer apartado.
2
Repite los pasos 2 y 3 del
apartado Variaciones de
estilo.
3
Debes tener en pantalla
el fichero HTML con el
que has trabajado durante es-
te captulo. Pulsa justamen-
te delante de y presio-
na las teclas $ y . Con
esto has creado una lnea en
blanco:
13 (Pg. 66)
N 45 64
Hojas
de estilo
en cascada
Tambin se llaman CSS.
Son plantillas que se
pueden utilizar para
crear documentos HTML
y dar formato a los tex-
tos que se presenten en
pantalla. Por ejemplo,
determinar el tipo, tama-
o y color de la letra.
Las hojas de estilo en
cascada resultan muy
prcticas, ya que permi-
ten ahorrar lneas de c-
digo y gestionar mejor la
presentacin de texto.
Plantillas
Son elementos del len-
guaje HTML que permi-
ten definir y guardar ca-
ractersticas concretas
para la presentacin de
textos en la pantalla que
podrs aplicar en cual-
quier parte del docu-
mento. Tambin se utili-
zan mucho en los
procesadores de texto.
Puntos
Unidad de medida que
permite establecer el ta-
mao de un tipo de le-
tra. Un punto equivale a
0,35 milmetros.
Cdigo fuente
comandos de programa-
cin que se utilizan para
indicar al navegador lo
que debe hacer cuando
tiene formato HTML.
usan los programadores
para referirse al archivo
que contiene las instruc-
ciones de un programa.
Escritorio
Windows 95 y 98. En
fcilmente accesibles en
cualquier momento.
Truetype
Tipo de letra escalable
que se puede imprimir o
presentar en pantalla a
cualquier tamao sin
que se produzcan prdi-
das de calidad. Se utiliza
tanto en ordenadores
PC como Macintosh.
11
10
09
08
07
06
Utilizacin de los comentarios

!
Si el cdigo de tus pginas
HTML comienza a ser dema-
siado grande es muy conve-
niente que te acostumbres a
utilizar comentarios, ya que
te ayudarn mucho a com-
prender el funcionamiento de
cada una de las partes del do-
cumento y cualquier otra per-
sona podr realizar modifica-
ciones en tus pginas sin
perderse entre los comandos.
El navegador ignora todo lo
que aparece entre las marcas
y , as que dentro
podrs escribir todo lo que te
d la gana. Por ejemplo:
es un comentario tpico que
puedes usar al principio de
los enlaces a p-
ginas que se encuentran en
otro servidor .
Los comentarios tienen otra
gran utilidad, pueden desac-
tivar los fragmentos de cdi-
go que los navegadores anti-
guos no son capaces de
comprender, por ejemplo las
instrucciones relativas a ho-
jas de estilo en cascada. Un
navegador anticuado no es
capaz de procesar correc-
tamente el identificador
y
por tanto lo ignora.
Es muy posible que a conti-
nuacin se encuentre con al-
go similar a esto:
Entonces se creer que se tra-
ta de un texto que debe re-
presentar en pantalla y el re-
sultado de la pgina ser
errneo. Pero si utilizas unas
marcas de comentario al prin-
cipio y al final de
las instrucciones,
el navegador anti-
guo ignorar todo el bloque
de cdigo y el moderno ser
capaz de identificarlo como
las lneas que definen una ho-
ja de estilo en cascada. Los
comentarios tambin sirven
para inutilizar temporalmen-
te grandes bloques de cdi-
go HTML.
Esto te puede resultar muy
prctico cuando depuras fa-
llos en tus pginas. Slo tie-
nes que insertar al principio
del bloque el identificador
y al final.
Como por ejemplo en
Si practicas con este ejem-
plo concreto podrs obser-
var como se desactiva el ti-
po de letra.
16 (Pg. 66)
15 (Pg. 66)
!
El esfuerzo que exige dominar
los procedimientos de hojas de
estilo en cascada (CSS) mere-
ce la pena. Las plantillas
de estilo son utilizadas por
muchos webmasters
y van a se-
guir existiendo durante
mucho tiempo. Sin embargo,
las instrucciones bsicas de
formato, como por ejemplo el
identificador , tienen
los das contados.
La razn es que las hojas de es-
tilo en cascada son mucho ms
flexibles y ocupan menos es-
pacio en el cdigo fuente.
As, por ejemplo, si deseas
asignar a una tabla un deter-
minado tipo de letra, tienes que
introducir en cada celda un
identificador .
Imagina que quieres resaltar un
texto con letra Arial en negrita.
El cdigo correspondiente se-
ra el siguiente
Por el contrario, si al principio
del fichero has insertado una
plantilla de estilo
siempre podrs recurrir a ella:
Y si ms adelante decides que
el aspecto de tu documento re-
sulta mejor con otro tipo de le-
tra, te bastar con realizar un
pequeo cambio al principio
del cdigo. En otro caso ten-
dras que revisar todas las l-
neas realizando los cambios
oportunos una por una.
14 (Pg. 66)
Las ventajas de CSS
N 45 66
Parmetro
Informacin que deter-
mina el funcionamiento
de un programa. Tam-
bin se conoce
como argumento.
Clase
En relacin con las hojas
de estilo en cascada, se
entiende como un
conjunto de instruccio-
nes de formato que se
pueden aplicar a cual-
quier identificador.
Webmaster
A los diseadores de
pginas web tambin se
les llama webmasters.
Cuando completes este
curso de programacin
en HTML tendrs todos
los conocimientos nece-
sarios como para consi-
derarte un webmaster
profesional.
Enlace
Tambin se conoce
como link. Es una
referencia a otra pgina
que se encuentra en la
red Internet. Se suele
distinguir por tener un
color distinto al resto
del texto, estar subraya-
do o representado por
una imagen. Al hacer
click sobre l, el navega-
dor carga la pgina
correspondiente.
Servidor
Las pginas web de
Internet se encuentran
almacenadas en el disco
duro de unos ordenado-
res desde donde se
pueden leer a travs de
la Red. Estos ordenado-
res se llaman servidores
y alquilan el espacio de
su disco duro a los
usuarios que desean pu-
blicar sus pginas. Al-
gunos son gratuitos.
Java
Lenguaje de programa-
cin que se emplea en
muchas pginas de In-
ternet. Utilizando unos
pequeos mdulos es-
critos en Java, llamados
applets, las pginas web
pueden incluir funciones
de animacin, vdeo,
calculo, etctera. Este
lenguaje fue creado por
Sun Microsystems.
17
16
15
14
13
12

!
Las plantillas de estilo se de-
finen al principio del docu-
mento HTML y se pueden uti-
lizar en cualquier momento
que se desee presentar texto
en pantalla. Para indicar al
navegador que vas a crear
una plantilla de estilo debes
utilizar el siguiente comando:
.
Plantillas con
Identificadores
Lo primero que debes hacer
para definir un identificador
que funcione como una plan-
tilla es escribir su nombre sin
utilizar los parntesis espe-
ciales, por ejemplo . El for-
mato se escribe inmedia-
tamente despus y debe ir en-
tre los smbolos y .
Insertar
comentarios
No te olvides de escribir las
marcas de comentario
y cada vez que
definas una hoja de estilo en
cascada. Gracias a ellas, con-
seguirs que los navegado-
res antiguos pasen por alto
las lneas de cdigo que no
comprenden. Si no utilizas
los comentarios pueden apa-
recer smbolos errneos en
la pantalla cuando se visua-
liza la pgina.
Los formatos
ms importantes
El tipo de letra se fija con
.
Para el tamao se utiliza
, mientras que el
color se determina con
. No olvides poner
detrs de cada indicacin los
dos puntos.
Formatos
complementarios
Las hojas de estilo en casca-
da se pueden construir unas
dentro de otras. Por ejemplo,
puedes asignar propiedades
globales a los identificadores
y despus fijar con una se-
gunda instruccin propieda-
des especficas a cada uno.
Utilizacin
de clases
Las hojas de estilo se pueden
definir sin utilizar identifica-
dores. Para hacerlo se em-
plean las clases que deben
ser definidas precedidas de
un punto: .
Para utilizarlas dentro del c-
digo debes escribir:
.
4
guientes:
La mayor parte de instruc-
ciones te deben resultar fa-
miliares. En la primera lnea
resalta la indicacin
. El punto que la
precede avisa al navegador
de que a continuacin vie-
ne una clase y es impres-
cindible para que la planti-
lla funcione correctamente.
Otro de los parmetros nue-
vos es .
En este caso toma el va-
lor para que
subraye el texto.
La plantilla que acabas
de crear se puede utilizar pa-
ra representar todos los ele-
mentos de texto importan-
tesdestacndolos del resto
con una fuente Arial de 14
puntos en color rojo, escri-
tos en negrita y subrayados.
Para comprobar el resultado
debes escribir algn texto
utilizando esta clase.
5
y pulsa la tecla $.
6
Introduce la siguiente l-
nea de cdigo:
Con aso-
cias el identificador a
la clase .
Observa que en este caso el
nombre de la clase se debe
escribir sin un punto que la
preceda. Aqu tienes el c-
digo fuente completo .
7
Va siendo hora de com-
probar los resultados.
Haz click en y
para guardar todos
los cambios que has realiza-
do. Despus, cierra el Bloc
de notas pulsando sobre el
botn .
8
Abre la carpeta: .
.
que se encuentra en
el Escritorio con un doble
click de ratn.
Dentro de ella, vuelve a ha-
cer doble click en:
El navegador te mostrar la
siguiente pgina
En la ltima lnea puedes
comprobar el efecto de la
plantilla .
curso aprenders algunos as-
pectos de la programacin
en Java que podrs
combinar con tus conoci-
mientos de HTML para con-
vertirte en un maestro del
diseo de pginas web.
17
S
eguro que ya has odo
hablar de Java , el
lenguaje de programa-
cin de moda. Parece que
si eres programador y no
sabes Java te has quedado
anclado en el pasado.
Pues bien, esta entrega del
curso de HTML estar
dedicada a ver cmo inser-
tar sencillos programas en
javascript dentro de tu
pgina web. Estas aplica-
ciones te permitirn con-
trolar o iniciar determina-
das acciones, como por
ejemplo la gestin de los
datos introducidos dentro
de un formulario incluido
en tu pgina web. Un inte-
resante ejercicio para ini-
ciarte en Javascript, un len-
guaje que dar mayor f le-
xibilidad a tus pginas web.
Javascript
para formularios
con un programa de ejem-
plo, y la ayuda del Javascript,
vas a comprobar los datos
de un formulario. Para ello
te bastar con un formulario
bastante sencillo. Puedes en-
contrar ms informacin so-
bre stos en la octava en-
trega del curso sobre HTML
del nmero 43 de Computer
Hoy.
El siguiente programa veri-
fica que el remitente ha in-
troducido realmente todos
los datos solicitados antes
de enviarlo, y as evitar que
te manden un formulario
con alguno o todos sus cam-
pos en blanco.
1
Empezars cargando el fi-
chero de la plantilla. Para
ello, haz doble click sobre:
2
Dentro del editor haz
click sobre y des-
pus en .
En , pulsa y
selecciona la opcin
. A conti-
nuacin haz click en
y pincha en
. En el Bloc de notas, la
plantilla tendr el siguiente
aspecto .
3
Antes de comenzar a tra-
bajar, y al igual que en las
entregas precedentes, debes
guardar el fichero de la p-
gina que vas a crear con un
nombre distinto al de la
plantilla (evitando as so-
brescribirla). Para ello, haz
click sobre y selec-
ciona .
Lo mejor ser que lo nom-
bres como y pul-
ses .
4
En el codigo fuente
haz click justo en la se-
gunda fila, tras
y pulsa C.
5
Introduce la siguiente l-
nea de cdigo:
sta le indica al navegador
que las siguientes lneas has-
ta pertenecen al
programa en Javascript. En
castellano, se tra-
duce por lenguaje e indica al
navegador que las siguientes
04
03
02
01
N 46 66
Programacin en HTML 11 parte Profesional
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
Al igual que los pequeos Curris se encargan de realizar
las tareas duras en Fraggle Rock, sencillos programas
insertados en tu pgina web te quitarn mucho trabajo.
Quieres saber cmo? Pues bienvenido a Javascript.
JavaScript para formularios 66
Javascript o VB script 67
Consejos de programacin 70
Control de presencia 70
67 N 46
Java
cin que permite ejecu-
tar ciertas funciones en
cualquier sistema que
tenga un intrprete de
dicho lenguaje. Los
navegadores de Internet
modernos disponen de
este intrprete, con lo
que pueden ejecutar
programas en este len-
guaje que se encuentren
en pginas de Internet.
Existen aplicaciones en
Java de todo tipo, desde
juegos hasta programas
para charlar.
HTML
cin de pginas web. Se
escribe utilizando identi-
ficadores. Estos son
rdenes que das al
navegador para que
muestre una pgina web
propiedad de la pgina
que quieras aplicar.
Javascript
Versin reducida del
lenguaje Java, desarro-
llada exclusivamente
para su uso en la crea-
cin y diseo de pginas
web. Permite dotar a
stas de funciones im-
posibles de aplicar ha-
ciendo uso exclusivo del
lenguaje HTML.
Cdigo fuente
Serie de instrucciones de
programacin desarrolla-
da por un programador.
Un ejemplo de cdigo
fuente es la codificacin
de una pgina web
Comentario
Lneas de texto que se
introducen dentro de un
programa para facilitar
su lectura por parte de
aquellas personas que no
hayan participado en su
desarrollo.
Por norma general, los
programadores acompa-
an de comentarios las
funciones ms complejas
incluidas en sus progra-
mas, facilitando as su
lectura y comprensin.
05
04
03
02
01
Programacin en HTML 11 parte Profesional
lneas de cdigo estn pro-

gramadas en .
6
Tras pulsar C tendrs
que continuar con los si-
guientes smbolos: . Es-
tos enmarcan el cdigo co-
mo comentario . As
podrs evitar que los nave-
gadores que no son capaces
de interpretar Javascript
muestren dicho cdigo en la
pantalla.
7
A continuacin introdu-
ce las siguientes dos l-
neas de cdigo:
Con estas lneas comienza el
programa propiamente di-
cho. En este caso, el cdigo
es una funcin .
sta se puede activar desde
cualquier punto de la pgina
haciendo una llamada a su
nombre . La llave
(para obtenerla presiona las
teclas Ay a la vez), sir-
ve para unir los apartados co-
rrespondientes, como las fun-
ciones o las sentencias IF
. Al final del apar-
tado debe aparecer el cierre
de parntesis ( presiona
las teclas Ay simult-
neamente).
8
Vuelve a presionar la te-
cla C y escribe la si-
guiente lnea de cdigo:
. La indi-
cacin seala al pro-
grama que debe preparar
una variable de
nombre . En
programacin, a esto se le
llama declarar una varia-
ble. Ms adelante, y si que-
da alguno de los campos va-
cos, con
conseguirs que en tu for-
mulario aparezca un men-
saje de error. Las siguientes
dos lneas de cdigo son las
que se encargarn de com-
probar los campos del for-
mulario.
9
Introduce las siguientes
lneas de cdigo
En castellano es SI (con-
dicional). A ste le siguen
unas condiciones
e instrucciones .
En la vida real no es muy dis-
tinto. Por ejemplo, si llueve
(condicin), entonces me
voy a la calle con un para-
guas (instruccin).
El programa sigue el mismo
principio. En este caso pri-
mero slo aparece el si (con-
dicional) y la condicin. Las
instrucciones vienen a con-
tinuacin. La condicin com-
prueba si uno o dos de los
campos estn vacos. A pri-
mera vista, el acceso a estos
campos puede parecer algo
complicado, porque Javas-
cript numera, comenzando
la cuenta por cero, los for-
mularios.
El primero de una pgina se
llama .
En este caso, se trata del for-
mulario ejemplo que vas a
programar. Dentro de ste
est previsto que introduz-
cas dos campos. El primero
para el apellido lleva la in-
dicacin . Para
Javascript se trata, por tan-
to, del primer elemento den-
tro del primer formulario.
Con se pasa al
segundo campo. En el ejem-
plo que se va a tratar a con-
tinuacin reservars este
campo para el nombre. Para
comprobar que aparece tex-
to dentro de un campo de-
bes comparar su contenido,
en ingls , con el con-
tenido que viene a conti-
nuacin . Las dos co-
millas se refieren a que no
hay texto. La primera parte
de la condicin de este pro-
grama presenta el siguiente
aspecto .
O traducido: si el valor del
primer elemento del primer
formulario est vaco. Con
esto se cierra la primera con-
dicin parcial. En la prime-
ra lnea aparecen, adems,
dos barras verticales que
se obtienen presionando si-
multneamente las teclas A
y 1. En este caso se trata de
una unin, es decir,; un ne-
xo entre las dos condicio-
nes. Estas dos barras repre-
sentan un o. El programa
lo interpreta de la siguiente
manera: si se cumple la pri-
mera o la segunda condi-
cin, el programa debe eje-
cutar las lneas de cdigo
que en-
contrar a
continuacin. As, si ocurre
que el primer campo, el se-
gundo o los dos se encuen-
tran no contienen datos, en-
tenders la segunda lnea de
cdigo:
Esto significa:si est vaco
el segundo campo del pri-
mer formulario. Si uno de
los dos campos se encuentra
vaco, el programa ejecuta las
instrucciones siguientes . A
continuacin volvern a apa-
recer los parntesis espe-
ciales para que el programa
sepa dnde est el principio
y el fin.
10
Tras pulsar C, teclea
y presiona de nue-
vo la tecla C.
11
Escribe la siguiente l-
nea de cdigo:
En este caso, la variable
se complemen-
ta con algo de texto. Los dos
se encargan de insertar
antes y despus de un
salto de lnea . En
Javascript la instruccin
funciona igual que la etique-
ta en HTML. Debes uti-
lizar otra instruccin pa-
ra que el programa sepa cual
de los campos de tu formu-
lario est vaco.
12
Seguidamente, intro-
duce la siguiente lnea
de cdigo: .
La primera fila ya te debe re-
sultar familiar. El programa
comprueba de nuevo si el
primer campo del formula-
rio est vaco. Si es ste el ca-
so, entra en accin la se-
gunda lnea de cdigo. En
este caso es al-
go ms complejo. Con
y la ayuda del signo se
aade a las variables de tex-
to un texto adicional:
. La instruc-
cin acorta algo el tex-
to, mientras que se en-
carga del cambio de prrafo.
13
Introduce las dos l-
neas de cdigo si-
guientes: .
Con esta instruccin el pro-
grama comprueba el segun-
do campo y saca la conclu-
sin correspondiente. Si los
dos campos estn vacos el
mensaje que aparece es el si-
guiente:
Tal vez te ests preguntan-
do dnde se encuentran, en
estas dos lneas de cdigo,
los parntesis especiales. Es-
tos no son necesarios, ya
que tras slo hay una l-
nea ms. El programa ya sa-
be qu es lo que falta y pue-
de dejar un mensaje.
14
Para ello teclea:
.
significa en castella-
no alarma o alerta.
El navegador mostrar un
mensaje
que indicar lo que falta por
introducir. Ahora le debes in-
dicar al programa que, en el
caso de no estar relleno al-
guno de los campos, detenga
la ejecucin del
formulario.
11 (Pg. 70)
10 (Pg. 68)
09 (Pg. 68)
08 (Pg. 64)
07 (Pg. 68)
06 (Pg.68)
05
Javascript o VB script
!
Adems de Javascript, exis-
te otro lenguaje pensado pa-
ra desarrollar sencillos pro-
gramas para pginas web.
Este lenguaje se llama VB
Script y ha sido desarrollado
por Microsoft. VB Script es
un lenguaje de programacin
estrechamente relacionado
con Visual Basic, otro len-
guaje tambin desarrollado
por la empresa Microsoft.
Todos los programadores
que estn familiarizados con
Visual Basic o con VBA (Vi-
sual Basic for Aplications,
pequea versin de VB in-
corporada en Microsoft Offi-
ce), no debern tener ningn
problema con VB Script.
Puedes aprender ms sobre
el VBA en los nmeros 9, 11,
13, 15, 17 y 19 de Computer
Hoy, dentro de esta misma
seccin. Para los principian-
tes, el VBA no es ms com-
plicado que el Javascript. Pe-
ro las aplicaciones escritas
en VB Script slo funcionan
con el navegador Internet Ex-
plorer de Microsoft. Si dese-
as que los usuarios de Nets-
cape Navigator puedan ver
tus pginas sin problemas,
te recomendamos que escri-
bas el cdigo en Javascript.
N 46 68
Programacin en HTML 11 parte
Funcin
Elemento que el progra-
ma puede utilizar reite-
radas veces, descargan-
do as al programador
de tener que reescribirlo
cada vez que ste es ne-
cesario dentro del pro-
grama. Dentro de una
funcin se encuentra un
grupo de instrucciones
bajo un mismo nombre.
En algunos casos, las
funciones devuelven un
valor, como por ejemplo
al realizar un calculo.
Sentencia IF
If se puede traducir
por "cuando". Las sen-
tencias "if" sirven para
diferenciar entre varias
posibilidades. Si se da el
primer caso entonces se
ejecuta la instruccin
correspondiente.
Las sentencias if son
muy comunes en pro-
gramacin, por ejemplo
para diferenciar si se ha
hecho click sobre un bo-
tn o se ha alcanzado un
determinado valor.
Variable
En los programas, las
variables son reservas
de espacio" a las que se
les asigna un valor.
ste puede ser el resul-
tado de un clculo mate-
mtico o un texto.
En Javascript las varia-
bles pueden tener cual-
quier nombre. ste in-
cluso puede contener
cifras, pero con la salve-
dad de que debe comen-
zar con una letra, como
por ejemplo "a1234".
Condicin
Constituye el factor de
toma de decisin dentro
de una sentencia if,
siendo, por lo tanto, la
necesaria primera parte
de sta.
Instruccin
Orden que se da a un
programa de ordenador
o al sistema operativo.
En el caso de una sen-
tencia if, se trata de la
segunda parte de sta,
es decir, la accin que
se realizar en caso de
darse la condicin
indicada en la primera
parte de la misma.
10
09
08
07
06
15
Vuelve a pulsar C e
introduce el siguien-
te cdigo: .
, que en castellano
se puede traducir por vol-
ver, y por falso. Es
decir, el programa recibe la
indicacin Vuelve al re-
mitente e indcale que hay
algo incorrecto. Esta noti-
ficacin interrumpe la eje-
cucin del formulario.
16
Finalmente, vuelve a
pulsar C y a conti-
nuacin teclea y C. Con
estos smbolos marcars la
parte del programa que se
ejecuta cuando uno de los
campos est vaco. A conti-
nuacin falta poner otro
para cerrar toda la funcin.
17
Ahora slo te queda in-
sertar el smbolo de
cierre del comentario .
El smbolo evita
que Javascript interprete el
final del comentario como
cdigo propio y te alerte con
un mensaje de error. Con la
linea cerrars el
programa.
18
ste es el momento de
continuar con el for-
mulario propiamente dicho.
Selecciona la lnea de cdigo
e introduce
las siguientes lneas .
Con este cdigo programa-
rs un sencillo formulario
con dos campos y un botn
para mandarlo. Se ha puesto
un ejemplo sencillo para
que veas las posibilidades
que ofrece la programacin
en Javascript. Slo te debe
resultar extraa la siguiente
lnea de cdigo .
Se trata de la llamada a una
funcin en Javascript que
vas a programar ms ade-
lante. inicia la
funcin
en el momento que presio-
nes el botn , y a
continuacin espera una
contestacin. Si sta es
, el formulario no se
sigue ejecutando. El visitan-
te de tu pgina tiene ahora
la posibilidad de seguir re-
llenando el formulario o am-
pliar los datos. La pgina es-
t lista. El cdigo fuente al
completo tiene el siguiente
aspecto: .
19
Haz click sobre
y en .
Cierra el Bloc de notas ha-
Resumen del captulo
!
Javascript es un lenguaje pa-
ra desarrollar funciones sen-
cillas y programas de aplica-
cin para tus pginas web. Un
script en java se encuentra en-
tre estas etiquetas y
.
Comentarios
Para iniciar un programa en
Javascript tienes que indicr-
selo primero al navegador
Inserta las lneas de cdigo
dentro de un comentario
HTML y . No
olvides identificar dentro de
Javascript el final del progra-
ma como un comentario. Pa-
ra ello utiliza los caracteres
.
Funciones
Las funciones sirven para ge-
nerar instrucciones del pro-
grama y despus llamarlas
desde cualquier punto
de la pgina en HTML. Cada
bloque de la funcin o las ins-
trucciones tiene que ir en-
tre estas llaves y .
Si ... entonces
La instruccin se utiliza
para comparar distintas con-
diciones. Si cumple una de
ellas, el programa ejecuta
una instruccin determinada.
Estas construcciones condi-
cionales se pueden enlazar.
Si entre dos condiciones po-
nes dos rayas verticales ,
indicas al programa que se
tiene que cumplir al menos
una de las dos que se han in-
dicado en la sentencia If pa-
ra que se ejecute la instruc-
cin correspondiente.
Alarma
La instruccin mues-
tra un mensaje en pantalla.
Este mensaje consistir en un
texto que debers haber in-
troducido previamente en el
cdigo en javascript.
Profesional
S
i ya has ledo las once
primeras entregas del
Curso de HTML , ests
preparado para editar tu pri-
mera pgina. Pero cuidado:
en cada pgina se suelen
"colar" algunos errores. Tu
atractiva pgina web no apa-
rece correctamente al abrir-
la con el navegador , o en
el peor de los casos ni si-
quiera sale algo.Y an peor
es esto otro: los programas
de acceso Internet Explorer
y Netscape Navigator fun-
cionan igual en su mayor
parte. Eso es lo malo: slo
en su mayor parte!
En algunos casos, Netsca-
pe Navigator se muestra cla-
ramente ms estricto con el
cumplimiento de las reglas,
lo que afecta al funciona-
miento y presenta de forma
defectuosa pginas que fun-
cionan perfectamente con
Internet Explorer.
En esta parte del curso
aprenders a depurar
errores tpicos, y a probar
tus pginas antes de publi-
car tu trabajo en Internet.
Una regla bsica es que de-
bes probar necesariamente
tus documentos HTML con
los dos navegadores ms uti-
lizados. Uno de ellos, Inter-
net Explorer, ya est instala-
do en la mayora de los
ordenadores con Windows.
Si no tienes Netscape
Navigator, te lo puedes
bajar desde Internet. Po-
drs ver como hacerlo
en el cuadro Descargar
e instalar Netscape en
la pgina 66.
La prueba
del navegador
A lo largo de este curso, se-
guro que ya has probado tus
pginas con Internet Explo-
rer, pero ahora viene la prue-
ba de fuego.
Funciona tambin todo con
Netscape Navigator? Para
confirmarlo, utiliza el archi-
vo de los cap-
tulos anteriores. Si ya no tie-
nes este archivo y sus im-
genes correspondientes:
en la carpeta:
consulta esta misma seccin
en el nmero 39 para ver c-
mo crearlo y de donde ob-
tenerlas.
1
Para probar tus pginas
con Netscape Navigator,
lo primero que tienes que
hacer es click en ,
pulsa , selecciona
y pin-
cha en .
04
03
01
N 47 62
Para
principiantes
Para
expertos
Para
profesionales
HTML con Java N 46
Hoy en da cada vez ms gente tiene su propia pgina
web. Sin embargo, algunas personas descuidan el
correcto funcionamiento de sta. Si quieres que tu web
pase victoriosa por cualquier test, aqu te enseamos
cmo solucionar los problemas ms habituales.
I
l
u
s
t
r
a
c
i
n
:

A
l
e
x
a
n
d
e
r

H
e
b
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
La prueba del navegador 62
Comprobar la ortografa 63
Bsqueda de errores 64
Descargar e instalar Netscape 66
63
N 47
HTML
cin de pginas web.
Se escribe haciendo uso
de identificadores
. Creado en 1989 en
el CERN (laboratorio eu-
ropeo de fsica de part-
culas), su objetivo era
ser un mtodo nico de
bsqueda de informa-
cin y acceso universal
a la misma, eliminando
la necesidad de usar
distintas aplicaciones
con este fin.
Identificador
cadores o etiquetas
(tags).stas son rde-
nes que das al navega-
dor para que muestre
mo deseas. Cada tag es
una orden y puede indi-
car atributos del texto,
posicin de imgenes,
hipervnculos, etctera.
Navegador
Internet. Tambin se
puede utilizar para
descargar ficheros de la
Red o visualizar algunos
contenidos multimedia
como sonidos, imge-
nes o incluso vdeos.
Depuracin
Fase posterior al testeo.
Consiste en buscar y
aplicar soluciones a los
fallos y problemas que
puedan surgir en un
programa o pgina web.
Marcos
Se utilizan en el diseo
de pginas web para or-
ganizar la informacin y
facilitar el acceso a ella.
Cuando se divide una
web en secciones que
pueden mostrar pginas
web independientes, a
cada una de estas sec-
ciones se la denomina
marco o frame. Al con-
tenedor que incluye el
grupo de marcos se le
llama pgina de marcos.
Tambin se suele utilizar
para crear tablas de con-
tenido, que permanecen
en pantalla mientras te
desplazas por la web.
05
04
03
02
02
01
2
Una vez abierto Netsca-
pe Navigator, haz click
en y .
3
En la ventana que se abri-
r , haz click
en .
4
Con ello se mostrar el
cuadro de dilogo Abrir
Haz click en y elige de la
lista:
la carpeta .
Haz click en ella para abrir-
la. Si no encuentras ense-
guida este campo, haz click
en
hasta que aparezca.
5
Haz doble click en
y despus
pulsa
6
En la pantalla aparecer
la pgina
Aqu todo tiene un aspecto
excelente.
7
Repite los pasos 2 a 5
con todos los archivos
HTML que has escrito du-
rante este curso. En la revi-
sin, ten especial cuidado
con los siguientes puntos:
Tienen todas las tablas el
aspecto que deben tener?
Todos los datos estn co-
rrectos?
Se encuentran bien ajus-
tados los marcos ?
Las imgenes estn inser-
tadas en el lugar adecuado?
Si aparece algn error, es-
cribe el nombre del archivo
en una hoja e investiga des-
pus la causa. Encontrars
ms informacin, en el apar-
tado Bsqueda de errores
en la pgina 64.
8
Cuando hayas terminado
de probar todas las pgi-
nas, cierra Netscape Navi-
gator haciendo click en
y pulsando .
Comprobar
la ortografa
Al escribir archivos en
HTML se cuelan habitual-
mente faltas de ortografa.
En el laberinto de identifi-
cadores y texto, stas se ha-
cen difciles de descubrir. El
siguiente truco es eficaz pa-
ra encontrar errores: utiliza
simplemente un procesador
de texto, por ejemplo Mi-
crosoft Word, como ayuda
ortogrfica. Despus corre-
05
girs las faltas que localices
en el texto fuente
Hazlo de esta forma:
1
Abre haciendo doble
click en la carpeta:
2
Busca el archivo que de-
sees probar, por ejemplo
. Haz doble click
en l para abrirlo.
3
Selecciona con el ratn
el apartado que desees
revisar, por ejemplo
06 (Pg.64)
Recomendaciones
!
Puede que no veas las pgi-
nas HTML. En la mayora de
estos casos se esconde un
error.
Ten en cuenta las siguientes
reglas que te mostramos:
Imprime cada documento
antes de editarlo en Internet
Si has publicado una p-
gina en la red, comprueba
enseguida los errores. Mira
la pgina de nuevo dos das
despus. Es muy probable
que an encuentres errores
que no viste el primer da.
Pdele a algn conocido
que revise los errores de tus
pginas, algo que puede ser
de gran utilidad sobre todo
en la ortografa.
Escribe un vnculo con tu
direccin de e-mail en tu p-
gina, por ejemplo:
As le das al visitante de tu
web la oportunidad de que te
informe sobre los posibles
errores que pueda encontrar.
Consejos prcticos
!
Antes de situar tus pginas
HTML en Internet, tienes que
comprobar todos los hiper-
vnculos internos (es decir,
los que componen tu web).
Para ello, haz click en uno
tras otro y observa si apare-
ce la pgina correspondien-
te.Es suficiente iniciar el na-
vegador y cargar la pgina
de inicio. En este caso no ne-
cesitars una conexin a In-
ternet. Si estas pruebas no
dan errores, puedes insertar
la pgina en la Red. Cmo
hacerlo es algo que est re-
gulado por cada servidor. In-
frmate del sistema de fun-
cionamiento de ellos. Vuelve
a probar despus todas las
referencias cruzadas inter-
nas y accede, esta vez como
visitante, a tus pginas en
Internet. Si de repente algo
no funciona, puede ser de-
bido a un nombre de archi-
vo incorrectamente escrito.
Algunos servidores distin-
guen entre escritura con ma-
yscula y con minscula,
mientras que a Windows no
le importa si escribes pagi-
na.html o Pagina.html. Si
el archivo se llama algo as
como pagina.html, pero se
encuentra en un hipervncu-
lo Pagina.html, todo fun-
cionar bien en tu ordena-
dor, pero en el servidor
puede provocar algn error,
por ejemplo cuando funcio-
na bajo Linux.
Comprueba los
vnculos externos
Confirma tambin las re-
ferencias cruzadas que te
llevan desde tu pgina hacia
otras pginas ajenas. En
cuanto sites tu web en In-
ternet, haz click en todos los
vnculos externos y obser-
va si funcionan. Repite esta
comprobacin habitual-
mente, ya que a menudo se
modifican las direcciones y
pueden ser distintas o in-
cluso haber desaparecido de
la Red.
N 47 64
Texto fuente
Tambin llamado cdigo
fuente. Serie de instruc-
programacin que se
mato HTML.
usan los programadores
para referirse al archivo
que contiene las instruc-
ciones de un programa.
Cursiva
Cuando escribes, lo ha-
ces con una letra que, si
bien vara de tipo, pre-
sentar un aspecto nor-
mal. Adems, ese mis-
mo tipo de letra puede
presentarse en Negrita
en Cursiva o Subrayado.
Estos efectos se usan
para resaltar frases o
palabras o para darles
un significado especial.
Link
Tambin se conoce
como enlace o vnculo.
Es una referencia a otra
pgina que se encuentra
en la red Internet. Se
suele distinguir por te-
ner un color distinto al
brayado o representado
por una imagen. Al ha-
cer click sobre l, el na-
vegador carga la pgina
correspondiente.
CSS
Son plantillas que se
pueden utilizar para
crear documentos HTML
y dar formato a los tex-
tos que se presenten en
pantalla. Por ejemplo,
determinar el tipo, tama-
o y color de la letra.
Las hojas de estilo en
cascada resultan muy
prcticas, ya que permi-
ten ahorrar lneas de c-
digo y gestionar mejor la
presentacin de texto.
Javascript
Versin reducida del
lenguaje Java, desarro-
llada exclusivamente
para su uso en la crea-
cin y diseo de pginas
web. Permite dotar a
stas de funciones im-
posibles de aplicar ha-
ciendo uso de HTML.
10
09
08
07
06
4
Haz click en y
pulsa .
5
Deja Internet Explorer
abierto e inicia tu pro-
cesador de textos, por ejem-
plo Word 2000, para ello pul-
sa , pincha
y selecciona .
6
En Word, haz click en el
men y seleccio-
na .
7
El texto se puede ver en
pantalla:
8
Inicia la revisin orto-
grfica pulsando 7, o
pinchando en y
seleccionando
. Si te
encuentras con una falta,
apunta la posicin del texto
correspondiente en un pa-
pel y despus corrgela en
el texto fuente.
9
Cuando ya hayas revisa-
do la ortografa de tu p-
gina, y tras anotar los erro-
res, haz doble click en:
y abrirs el editor. Carga el
cdigo fuente correspon-
diente y corrige los errores
manteniendo abierto Word
por si necesitaras asegurar-
te de alguno.
10
Cuando la correccin
haya acabado y las fal-
tas estn corregidas, cierra
Word, Internet Explorer y el
Editor haciendo click en
en cada una de las ventanas.
Bsqueda de errores
Casi ms difcil que en-
contrar faltas de ortografa
es descubrir etiquetas err-
neas.Y a menudo las conse-
cuencias de las faltas no se
descubren enseguida. A con-
tinuacin vers algunos pro-
blemas habituales de la pro-
gramacin en HTML y su
solucin:
Has programado una ta-
bla que tiene el siguiente as-
pecto en el navegador In-
ternet Explorer:
Pero en Netscape Navigator
no se ve nada:
El motivo es que aqu
falta el identificador de cie-
rre de la tabla. Lo que ten-
drs que hacer en este caso
es introducir el texto fuen-
te correspondiente. Sitate
en esa posicin e inserta
.
Si ves que parte del texto
tiene este aspecto:
ya ha aparecido el culpable:
se trata de un hipervnculo
introducido incorrectamen-
te. En este punto
falta un .
A menudo aparece este
error
De repente, todo est en le-
tra cursiva , aunque slo
la palabra:
debera aparecer en este for-
mato. Solucin: al introducir
el tag has olvidado una lnea
diagonal antes del identifi-
cador de cierre.
Echando un vistazo al cdi-
go fuente la podrs ver:
Introduce una
lnea diagonal
antes de la se-
gunda , de
modo que que-
de as .
Hecho esto, el texto apare-
cer correctamente:
07
Dos caminos de prueba
!
Examen general
Antes de insertar pginas
HTML en Internet, tienes que
comprobarlas sin falta con los
navegadores ms utilizados.
En cada caso, prueba las p-
ginas con los navegadores In-
ternet Explorer y Netscape Na-
vigator.
Dos navegadores,
dos pruebas
Internet Explorer y Netscape
Navigator tienen en parte cri-
terios distintos en lo que se
refiere a la presentacin del
texto fuente. As, Netscape
Navigator evita hacer el tra-
bajo si hay errores por des-
cuido, mientras que Explorer
puede presentar las pginas
a pesar de todo.
Encontrar
fuentes de error
Si te encuentras con un fallo,
comprueba el texto fuente del
archivo. Ten cuidado sobre to-
do con los identificadores que
no sean de cierre, es decir,
aquellos que no llevan lnea
diagonal .
Comprobar
los hipervnculos
Cada link debe funcionar
correctamente. Para ello com-
prueba regularmente las re-
ferencias cruzadas dentro de
tus propias pginas y los hi-
pervnculos con otras webs
de Internet.
08
N 47 66
Hay ms navegadores
!
Internet Explorer y Netscape
Navigator son, con diferen-
cia, los navegadores ms uti-
lizados en Internet. Pero es-
to no significa que sean los
nicos. Cada vez aparecen
ms navegadores que pre-
tenden destacar por ser ms
rpidos, por alguna funcio-
nalidad especial e, incluso,
por ofrecer un un bonito di-
seo. As puedes encontrar
por ejemplo el navegador
Opera -v, que ocupa muy
poco espacio en tu disco du-
ro y ofrece una navegacin
bastante rpida.
Neoplanet - destaca por
su diseo, ya que haciendo
uso de las skins tan de mo-
da, permite que el navegador
adopte el aspecto que dese-
es.
Por su parte, Broadcast -V
te ofrece la posibilidad de di-
vidir la ventana, mostrndo-
te mltiples pginas simul-
tneamente.
Y stos son slo una mnima
muestra de todos los nave-
gadores que puedes encon-
trar. Dando una vuelta por
la Red descubrirs muchos
ms.
El siguiente fallo suele
confundir a los programa-
dores que hacen uso de las
CSS en sus crea-
ciones. Una pgina aparece
correctamente en Explorer:
si bien en Netscape Naviga-
tor sale sin los formatos pre-
vistos:
La causa de ello est en un
descuido. En lugar de los dos
puntos : antes de la asig-
nacin de una plantilla de
estilo, se ha colocado un sig-
no igual:
Explorer acepta este carc-
ter, sin embargo Navigator
es bastante ms estricto y no
muestra las plantillas de for-
mato con este tipo de error.
09 (Pg.64)
Tambin los programado-
res de javascript
se ponen a s mismos tram-
pas (accidentalmente, por
supuesto) de vez en cuando.
En este caso Explorer tam-
poco se inmuta por el pro-
blema. El sencillo programa
de control de presencia de
tu web en frames (consulta
esta misma seccin en el n
46) funciona sin problemas
y elimina en este caso los
marcos:
Sin embargo en Netscape
Navigator se mantienen:
El error est en un lugar in-
sospechado. En los caracte-
res que indican que se trata
de un comentario en HTML,
la indicacin al navegador
de que ste se cierra no
est completa
Netscape Navigator se
tropieza con el proble-
ma y ejecuta el programa,
mientras que a Internet
Explorer le da igual.
Elimina el error insertan-
do una doble lnea diago-
nal de modo que el texto
fuente tenga este aspecto:
Con estos errores tpicos y
sus soluciones, Computer
Hoy te sumerge en el mun-
do de la programacin en
HTML. Ahora ya eres casi un
profesional de HTML y pue-
des no slo programar, sino
tambin encontrar errores
con precisin y eliminarlos
10 (Pg.64)
siguiendo unos sencillos y
rpidos pasos.
Ten en cuenta que, aunque
aqu se han planteado casos
concretos, siguiendo los
consejos dados, as como
aplicando las soluciones de
stos a otros problemas, ten-
drs casi ganada la guerra
contra los duendes que
intenten colarse en tu web.
La siguiente y ltima parte
del Curso de HTML tratar
sobre cuestiones jurdicas
en y sobre Internet.
Y es que la Red
no es, en contra
de la opinin ma-
yoritaria, un espa-
cio sin leyes, don-
de cualquiera
puede violar las le-
gislaciones de los
pases con la ms
absoluta impuni-
dad. Pese a que to-
dava quedan bas-
tantes asuntos
pendientes de ser
legislados, la justi-
cia est avanzando
a pasos agigantados para evi-
tar que Internet se convier-
ta en la autopista del delito.
-vwww.opera.com
-www.neoplanet.com
-Vwww.broadcast.com
-www.netscape.com/es
Direcciones online
Descargar e instalar Netscape Navigator
!
Aunque cada da es ms nor-
mal encontrar CD-ROMs de co-
nexin a Internet en los cuales
se suele encontrar una copia
de este navegador, tambin
puedes conseguirlo a travs de
la Red de redes.
Si esto es lo que quieres, sigue
estos pasos:
1
Inicia una conexin a In-
ternet del modo habitual y
escribe -.
2
Con ello se abrir la pgi-
na principal de Netscape
en espaol. En ella pulsa:
3
En la pgina que se abrir
busca el siguiente link:
y pincha en
l con el ratn.
4
La siguiente web te pre-
senta las opciones que has
elegido para la descarga. Si
son correctas, pulsa .
5
Desplzate hacia abajo en
la siguiente web y busca:
Una vez encontrado debers
hacer click en l.
6
En la siguiente y ltima!
pgina tendrs que buscar
y hacer click en ste enlace
7
En unos segundos se abri-
r automticamente la ven-
tana .
En ella marca la opcin
y
pulsa .
8
En , selec-
ciona donde deseas guar-
darlo y pulsa .
9
Con ello comenzar el pro-
ceso de descarga de Nets-
cape Comunicator a tu PC co-
mo se te indica en la ventana
En ella asegrate de tener sin
seleccionar la siguiente opcin:
10
Finalizada la descarga,
la ventana cambiar,
, indicn-
dotelo. Cuando esto ocurra,
haz click en , para iniciar
la instalacin.
11
Durante unos segun-
dos, aparecern en pan-
talla unos mensajes informn-
dote de que la instalacin se
est preparando. En breve es-
ts desaparecern y, tras mos-
trarse una ventana de fondo
azul, aparecer una ventana
dndote la bienvenida al pro-
ceso de instalacin.
Para proceder, haz click en
.
12
A continuacin se te in-
formar sobre los tr-
minos de la licencia de uso.
Revsalos y, si ests de acuer-
do, pulsa .
13
En la siguiente venta-
na, deja las opciones
que se te ofrecen por defecto
y pulsa .
14
Ahora, Netscape te
pregunta por varias op-
ciones de configuracin. Se-
lecciona las que te resulten ti-
les o interesantes y, seguida-
mente, haz click en .
15
Lo siguiente es indi-
carle al programa dn-
de deseas que se muestre en
el men inicio. Conserva la op-
cin predeterminada y pulsa el
botn .
16
En ,
pincha en pa-
ra realizar la instalacin.
17
Cuando sta haya fina-
lizado, se te pregunta-
r si quieres leer el archivo de
texto README. Si no lo lees
ahora puedes hacerlo mas ade-
lante, as que pulsa .
18
Y ya est, haz click en
y reinicia tu
ordenador.
N 46 70
Programacin en HTML 11 parte
Salto de lnea
Tambin conocido como
retorno de carro, consis-
te en finalizar una lnea
de texto y saltar autom-
ticamente a la siguiente.
Testear
Proceso que comprueba
el correcto funciona-
miento de un programa
o de una web.
Constituye un elemento
fundamental dentro del
desarrollo de una web y
ha de ser completo, ya
que evita fallos y proble-
mas que suelen ocasio-
nar una psima imagen.
Depurar
Fase posterior al testeo.
Consiste en buscar e
implementar soluciones
a los fallos y problemas
que puedan surgir en un
programa o pgina web.
Frame
Se utiliza en el diseo de
pginas web para orga-
nizar la informacin y
facilitar el acceso a ella.
Cuando se divide una
web en secciones que
pueden mostrar pginas
web independientes, a
cada una de estas sec-
ciones se la denomina
marco o frame. Al con-
tenedor que incluye el
grupo de marcos se le
llama pgina de marcos.
Tambin se suele utilizar
para crear tablas de con-
tenido, que permanecen
en pantalla mientras te
desplazas a diferentes
pginas del sitio web.
URL
Siglas correspondientes
a Uniform Resource Lo-
cator, lo que traducido
sera localizador homo-
gneo de recursos. Una
URL es una direccin de
pgina web de Internet.
Tag
cribe utilizando tags o
etiquetas. Estas son r-
denes que das al nave-
gador para que muestre
mo deseas. Cada tag es
una orden y puede indi-
car atributos del texto,
posicin de imgenes,
hipervnculos, etctera.
16
15
14
13
12
11
20
Para visualizar el re-
sultado haz doble
click sobre el icono
que encontrars en tu Es-
critorio. Seguidamente haz
doble click sobre .
21
En Internet Explorer
aparecer .
Si haces click sobre enviar
dejando uno de los
campos sin rellenar,
aparecer el si-
guiente mensaje .
Con un click sobre
cerrars la
ventana con el men-
saje de error. Pero, si
rellenas los dos cam-
pos correctamente, no se
mostrar el mensaje de error.
En la ventana no hay cambios
apreciables a excepcin de la
direccin. Con la entrada de
unos datos, por ejemplo
y
en la lnea de direccin, tras
hacer click sobre
aparece .
Como podrs comprobar, en
principio este ejemplo no
realiza ninguna operacin
con los datos. Si quieres
aprender como gestionarlos,
puedes ver otro ejemplo en
esta misma seccin, en el n-
mero 43 de Computer Hoy.
22
Ya puedes cerrar In-
ternet Explorer con
un click sobre .
Y con esta entrega finaliza
este apasionante viaje a tra-
vs de la programacin en
HTML y Javascript. En la si-
guiente podrs ver cmo
testear los documentos
en HTML y cmo encontrar
y depurar los errores
ms comunes, ya que no hay
nada ms desagradable que
una pgina plagada de erro-
res y que adems no funcio-
ne correctamente. La im-
presin que da es muy ne-
gativa.
En la ltima entrega cono-
cers los aspectos legales de
las pginas web, evitando as
el riesgo de cometer sin que-
rer algn tipo de delito.
13
12
Consejos de programacin
!
Siempre
al principio
Si programas en Javascript,
conviene que te acostum-
bres a incluir el cdigo al
principio del documento en
HTML. Esto te asegura que
el programa se ejecute sin
problemas. La razn la en-
contrars en el propio fun-
cionamiento del navegador.
Los navegadores leen el c-
digo fuente de una pgina
HTML lnea a lnea. En cuan-
to encuentra datos los re-
presenta en pantalla como
imgenes, textos o tags. Si
entre estos datos hay una
accin que llama a un pro-
grama en Javascript, ste
ya tiene que estar cargado.
En caso contrario no fun-
ciona.
Javascript
es transparente
Si programas en Javascript
tienes que ser consciente de
que cualquier persona que
accede a tu pgina puede
ver el cdigo del programa.
Muchos usuarios simple-
mente visitan otras pginas
para sacar ideas para sus
propios programas en Ja-
vascript. Pero no olvides
que la propiedad intelectual
est protegida. Esto tambin
es vlido para las aplicacio-
nes en Javascript.
Controlar la presencia de tu web dentro de unos marcos ajenos
!
Algunos usuarios pueden in-
sertar un enlace a tu pgina,
pero a veces slo permiten
que sta aparezca dentro de
un frame haciendo que
permanezcan los dems ele-
mentos de su pgina. As, los
visitantes creen que tu web es
un elemento ms de una p-
gina extraa. Un visitante de
tu web, por ejemplo, no pue-
de ver tu URL , lo que le
impide recordar tu direccin.
Esto tiene solucin. Un senci-
llo programa en Javascript que
debes insertar en el docu-
mento, concretamente entre
las tags y
.
Escribe las siguientes lneas
de cdigo: .
Si has ledo esta entrega del
curso ya te deben resultar fa-
miliares las dos primeras l-
neas de cdigo. En la tercera
lnea vuelves a encontrar un
comando .
Con la instruccin:
el programa comprueba si en
la ventana del navegador
aparecen frames. La aplica-
cin utiliza para ello un con-
tador que est en todos los
navegadores. Este contador
registra
el nmero de frames que se
encuentran abiertos en ese
preciso instante. se
puede traducir al castellano
por longitud. Es decir, de-
termina la cantidad de
que se encuentran
en la parte superior( ).
Los dos caracteres indi-
can desigualdad. Toda la l-
nea se puede
traducir por:
si el nmero
que da la su-
ma de todos
los frames que
se encuentran
en la parte superior no es
igual a 0 entonces ejecuta la
siguiente accin. Ms cla-
ro: si encuentras un frame,
que por cierto aqu no pinta
nada (ya que t no has ins-
talado ninguno), pues haz al-
go. Esta accin se encuen-
tra en la misma lnea de
cdigo. se puede
traducir por ubicacin e
identifica la URL de la pgi-
na que se encuentra en la ba-
rra de direcciones, como por
ejemplo:
Si tu pgina se inserta dentro
de un frame de otra web, aqu
aparecer la direccin de la p-
gina. Para cambiar esta direc-
cin, entra en accin
al modificar la
primera direccin por tu
propia direccin dentro del
frame. Esto es lo que hace
esta lnea de cdigo. En ca-
so de que se d esta cir-
cunstancia, primero podrs
comprobar que la pgina se
carga dentro de un frame .
Pero esta pgina slo apare-
ce unos instantes, ya que
despus, tras una breve in-
terrupcin, la web con el pro-
grama en Javascript aparece
sola en pantalla .
Esta aplicacin slo la pue-
des utilizar si no tienes fra-
mes en tu pgina. En caso
contrario el resultado no se-
r el deseado, ya que tam-
bin los cerrar.
16
15
14
Profesional
E
n las doce entregas an-
teriores del curso de
HTML de
Computer Hoy has dado un
repaso a la construccin de
pginas para que funcionen
sin problemas y tengan un as-
pecto profesional.
As entrars con buen pie
en la World Wide Web
. Pero no basta slo
con programar y redactar los
textos. El da a da en la Red
tambin te enfrenta con
cuestiones legales que no
puedes obviar. En esta ltima
entrega del curso vas a co-
nocer todo lo que hay que te-
ner en cuenta a la hora de pu-
blicar una pgina en Internet
y as no te buscars ningn
problema.
Propiedad
intelectual
La propiedad intelectual
tambin tiene validez en In-
ternet y garantiza al autor,
artista o msico los dere-
chos sobre su obra, permi-
tindole decidir dnde y en
qu forma se publican sus
textos, libros, etctera
Pero, desgraciadamente, en
la Red resulta bastante ha-
bitual que no se respeten es-
tos derechos. En especial no
se respetan con los archivos
creados en formato MP3
. Estas canciones
digitalizadas se
pueden bajar de muchas p-
ginas web.Y en muchos ca-
sos se trata de obras sobre
las que existen derechos de
autor. Entre stas, puedes en-
contrar tanto los temas mu-
sicales de mxima actuali-
dad, como piezas clsicas
interpretadas por una or-
questa filarmnica.
Si te compras un compac-
to puedes hacer con total li-
bertad copias en MP3 para
tu uso particular sin ningn
problema (recuerda que s-
lo para uso exclusivamente
PARTICULAR). Pero si tu in-
tencin es utilizar estas co-
pias para publicarlas en In-
ternet y as permitir a los
visitantes de tu pgina que
se las bajen libremente, en-
tonces ests lesionando los
derechos del autor.
Esto tambin vale para un
simple fragmento. No hagas
caso del rumor que dice que
se pueden colgar en Inter-
net tres compases o siete se-
04(Pg.56)
03 (Pg.56)
02 (Pg.56)
01 (Pg.56)
N 48 54
Respeta siempre los
derechos de autor
Para
principiantes
Para expertos
Para
profesionales
HTML con Java N 46
Pero si yo no he hecho nada! Por qu me encierran? Si no te
apetece acabar as, lo mejor ser que leas de arriba a abajo la
decimotercera y ltima entrega de este curso sobre programacin
en HTML. Luego no digas que no te avisamos.
Propiedad intelectual 54
Proteccin para programas 55
No pongas links a
pginas piratas 55
No copies enlaces sin ms 55
Cuidado con los frames 56
Sin faltar al respeto! 56
Meta Tags 57
F
o
t
o
:

C
o
r
d
o
n

P
r
e
s
s
.

M
o
n
t
a
j
e
:

C
o
m
p
u
t
e
r

H
o
y
.
gundos de una pieza musi-
cal sin vulnenar los dere-
chos de autor. La nica ex-
cepcin es que el autor te
permita distribuir sus tra-
bajos desde tu pgina web.
Esto tambin es vlido pa-
ra los dibujos y los textos.
As, por ejemplo, te puedes
buscar problemas si decides
insertar en tu homepage
un artculo de
otra publicacin.
Ni los fans estn a salvo de
los abogados de las estrellas
de televisin y del mundo
musical cuando deciden pu-
blicar, sin su permiso, sus
piezas en la red. Si tienes in-
tencin de insertar en tu
web imgenes de persona-
jes o escenas de tu serie fa-
vorita, debes saber que esta
prctica no es del agrado de
muchos productores.
Grupos musicales como
Oasis, as como la cadena de
televisin americana Fox,
han ganado recientemente
pleitos contra usuarios que
incluyeron en sus pginas,
sin su consentimiento, im-
genes o canciones de stos.
Si quieres usar algn do-
cumento de este tipo, te re-
comendamos que te pongas
en contacto con el autor pa-
ra que te d su consenti-
miento. Slo cuando lo ob-
tengas podrs usarlos.
Los documentos que con-
tienen datos de caracter ge-
neral (pblico), como por
ejemplo los nmeros de la
Lotera Primitiva o los ndi-
ces burstiles, se pueden pu-
blicar en la Red sin tener
que pedir permiso a nadie .
Pero evita copiar sin ms ba-
ses de datos completas o
parte de ellas.
Tambin los documentos
pblicos, como sentencias
judiciales, no estn sujetos
a la propiedad intelectual.
Puedes publicar estos tex-
tos en la Red, pero debes in-
dicar su fuente.
Proteccin
para programas
A la hora de colgar pro-
gramas en Internet para que
los visitantes de tu pgina
web puedan descargarlos
, pon especial cui-
dado. Distribuir copias pi-
ratas de programas en la
Red es un delito que est pe-
nado, incluso aunque no se-
pas que la aplicacin en
cuestin es una copia ilegal
(recuerda que el descono-
cimiento de las leyes no exi-
me de su cumplimiento).
Cuidado con las copias de
distribucin gratuita. Inclu-
so los programas sharewa-
re que estn a li-
bre disposicin de los
usuarios, como Internet Ex-
plorer, estn sujetos a de-
terminadas reglas. stas te
indican dnde y cmo se
pueden distribuir. Repasa
con detenimiento la licen-
cia del contrato de cada uno
de estos. Si dudas, ponte en
contacto con el fabricante
del programa.
No pongas links
a pginas piratas
Una buena pgina web
tambin se caracteriza por
disponer de links
a otras pginas. Pero, cuida-
do, algunos enlaces te pue-
den crear problemas, en es-
pecial si llevan a pginas
ilegales. Un enlace a una de
stas tambin te puede cau-
sar problemas. Lo mismo
ocurre cuando los enlaces
se dirigen a pginas que
contienen copias ilegales de
ficheros MP3 o material que
contraviene cualquier nor-
ma legal (pedofilia, racismo,
etctera). Un enlace ilegal
no tiene porque significar
una condena, pero las posi-
bilidades de que se abra un
procedimiento judicial con-
tra ti sern mayores.
La mayora de los
links son legales
A excepcin de los enlaces
que se han descrito en los
apartados precedentes, pue-
des insertar en tu pgina to-
dos los links que te d la ga-
na. Te recomendamos, no
obstante, que indiques quin
es el autor de aquellas pgi-
nas cuyo contenido te resul-
te dudoso.Y recuerda, en ca-
so de duda, es mejor un
enlace menos que un pro-
blema ms.
Tampoco es lcito el in-
sertar un comentario que
falte al respeto a una terce-
ra persona. Por ejemplo, si
nombras un enlace a la p-
gina de un compaero de
trabajo como la web del
idiota del mes, puedes te-
ner problemas legales ade-
ms de los que surjan en la
relacin personal!
No copies
enlaces sin ms
No te dediques a copiar
listas de enlaces de otra p-
gina, ya que, dependiendo
de la longitud de stas, se
puede considerar como una
base de datos y est prohi-
bido copiarlas. Esto es de-
bido a que las bases de da-
tos son costosas, tanto su
creacin como su manteni-
miento y actualizacin.
08 (Pg.57)
07 (Pg.57)
06 (Pg.57)
05 (Pg.56)
55
N 48
La opinin de un abogado
!
Aunque se diga que la co-
misin de ilcitos en Inter-
net apenas est regulada,
hay quien cree que no es del
todo cierto, ya que unas
normas de carcter sustan-
tivo son aplicables a la Red.
El asesor legal de Hobby
Press lo reafirma con el
ejemplo de la vulneracin
de los derechos de autor:
La reproduccin de conte-
nidos (msica, imgenes o
programas) sin autorizacin
expresa de su titular supo-
ne una violacin de esos de-
rechos y puede dar lugar a
acciones judiciales. Aun si
el material no est someti-
do a esa proteccin es re-
comendable citar la fuente.
Con respecto al asunto de
los links que enlazan con
pginas desde las que sea
posible obtener programas,
canciones, etctera, sin la
autorizacin del titular del-
registro, se podra enten-
der que facilitan que se co-
meta un ilcito y, por tanto,
acabar siendo objeto de in-
vestigacin judicial, co-
menta Frhbeck. Y lo mis-
mo con contenidos (o
enlaces) relacionados con
asuntos claramente ilegales
(racismo, pedofilia, terro-
rismo, etc...).
En la difusin de datos per-
sonales, aconseja tener en
cuenta la ley que regula su-
tratamiento, LORTAD, y sus
restricciones. Tambin dice
que injurias y calumnias a
travs de la Red son ilcitas:
Con el agravante de que se
hacen con publicidad.
Cuando se utilizan nombres
o marcas registradas para
atraer a visitantes a una web
propia, cree que puede en-
tenderse que se estn trans-
grediendo las normas de la
Ley de Competencia Desle-
al (aprovechamiento de
imgenes, marca...).
Si eres objeto de una recla-
macin, Frhbeck aconseja
acudir a un abogado que
evale el alcance de la in-
fraccin, la corrijas e in-
tentes llegar a un acuerdo
amistoso.
En caso de duda,
no reproduzcas nada
Aviso a los fans. Ni con la mejor de las intenciones est permitido reproducir material
grfico o sonoro de tus dolos. Grupos como Oasis ya han recurrido a los tribunales.
El software de libre distribucin no puede ser distribuido a
la ligera. revisa los los terminos de la licencia de distribu-
cin antes de ofrecrselo a quienes se conecten a tu web.
Guillermo
Frhbeck,
asesor legal
de Hobby Press
Cuidado
con los frames
Por si no lo sabas, los
marcos son un asunto
peliagudo. El problema es-
triba en que los usuarios de
frames dividen sus pginas
en varias zonas. Normal-
mente hay un marco que
contiene un ndice cuyo fin
es facilitar la visita de la p-
gina. El segundo frame de
mayor tamao contiene otra
pgina que puede no ser
propia. No todos los dise-
adores de pginas web
aceptan esta prctica.
De todas formas, la expe-
riencia seala que la inser-
cin dentro de un frame de
contenidos ajenos puede
acabar acarrendote pro-
blemas si no indicas el ori-
gen de la pgina.
Por razones de precaucin,
nuestro consejo es que evi-
tes insertar pginas ajenas
dentro de un frame. Con
independencia de los aspec-
tos legales, est claro que a
nadie le resulta agradable es-
tar pelendose con los mar-
cos. Por ejemplo, dentro de
un frame no se puede ver la
direccin de la pgina que se
est visitando.Y si, adems,
tienes un monitor pequeo,
el marco se come mucho es-
pacio. Pero si an as deseas
insertar una pgina ajena
dentro de un frame, te acon-
senjamos que antes te pon-
gas en contacto con el due-
o de la pgina para pedirle
el correspondiente permiso.
En la pgina 70 del nme-
ro 46 de Computer Hoy,
dentro de la undcima en-
trega del curso de HTML, en
la que viste una introduc-
cin a Javascript, puedes ver
cmo conseguir que tu p-
gina no aparezca dentro del
frame de otra.
Sin faltar
al respeto!
Por desgracia, en Internet
cada vez es ms habitual en-
contrar pginas ofensivas
hacia terceras personas. Pe-
ro cuidado, la Ley tambin
es vlida en Internet. Es de-
cir, si faltas al respeto a ter-
ceras personas puede que
tengas que rendir cuentas
ante la Justicia.
No insultes ni ofendas a
terceras personas, aso-
ciaciones o empresas.Tam-
poco permitas que a travs
de tu pgina, como por
ejemplo dentro de un libro
de visitas, otros hagan lo
mismo.
Esto puede ser muy grave
si la persona a la que se ha-
ce referencia se puede iden-
tificar con facilidad. De na-
da te va a servir que acortes,
por ejemplo, el nombre de
este individuo. En localida-
des pequeas slo hacen fal-
ta las iniciales de un nom-
bre para identificar a una
persona.
Y cuidado con las imge-
nes que van acompaadas
de un texto denigrante. Es-
t prohibido publicar foto-
grafias de terceras perso-
nas, aunque omitas su
nombre y tapes sus ojos con
una banda oscura. Slo ha-
ce falta que una persona sea
capaz de reconocer a ese in-
dividuo para que puedas te-
09
N 48 56
HTML
cin de pginas web.
Se escribe haciendo uso
de identificadores. Crea-
do en 1989 en el CERN
(laboratorio europeo de
fsica de partculas), su
objetivo era ser un m-
todo nico de bsqueda
de informacin y acceso
universal a la misma,
eliminando la necesidad
de usar distintas aplica-
ciones para este fin.
World Wide
Web
En castellano la tela de
araa mundial, es la
parte grfica de Internet.
En ella se pueden repre-
sentar textos, imgenes,
pelculas o piezas musi-
cales.
La WWW (como tam-
bin se la denomina) se
compone en la actuali-
dad de ms de 1.000
millones de pginas con
todo tipo de informa-
cin. Cada da se inclu-
yen nuevas pginas.
MP3
Es un formato de com-
presin para ficheros de
sonido. El nombre de
MP3 viene de la abrevia-
tura de MPEG-Layer3 y
se refiere a un algoritmo
basado en un complejo
modelo acstico.
En los ltimos tiempos
se ha popularizado, de-
bido a la gran calidad
que ofrece, permitiendo
ratios de compresin
cercanos al 90%.
Digitalizar
Los aparatos electrni-
cos almacenan la infor-
macin como una serie
de unos y ceros. Pero
las seales de sonido y
vdeo no son digitales,
por lo que hay que con-
vertirlas. Este proceso
recibe el nombre de di-
gitalizacin.
Homepage
La mayora de personas
o empresas aparecen en
Internet con varias pgi-
nas propias que se en-
cuentran enlazadas en-
tre s. En este caso, a la
pgina principal se la
conoce de esta manera.
05
04
03
02
01
La opinin de la Polica
!
En Computer Hoy quisimos
recabar la opinin de la Po-
lica respecto a las facilida-
des que tiene para perseguir
este tipo de delitos: La le-
gislacin tiene muchas la-
gunas, pero se cuenta con
el apoyo de jueces y fisca-
les para clarificar aspectos.
As, con las intrusiones y
links en las webs es donde
la legislacin no se ha adap-
tado a lo que ocurre en la
sociedad. Pero si el conte-
nido es ilegal, ya sea incluir
un enlace o colocar infor-
macin que sea apologa de
alguna actividad penada o
considerada acto delictivo
en el mundo real, tambin
lo es en la Red. Es el caso
de la injuria directa, calum-
nia, amenaza....
Para los responsables de
esta Unidad, la lnea entre
lo que es delito y lo que no
es muy fina: No hay una
norma que prohiba facilitar
direcciones de email, aun-
que no se cuente con la au-
torizacin del propietario.
Afirman que est ms claro
en el uso de productos con
copyright, ya que hay leyes
sobre propiedad intelectual.
De todos modos, aqu slo
actan cuando reciben una
denuncia del propietario
afectado, de lo contrario so-
breentienden que las obras
han sido cedidas.
Aunque depende del conte-
nido. Si se ofrece una ba-
se de datos o un libro en la
web como propios se per-
sigue, porque alguien quie-
re aprovecharse. Pero si se
incluye un link a otra web
indicando que es propiedad
de otro no creemos que nin-
gn juez lo considerara de-
lito, afirman. Como tam-
poco es incluir en un marco
de una web otra pgina aje-
na si queda claro de quien
es propiedad.
U. de Investigacin de
Delincuencia en Tecnolo-
gas de la Informacin.
La inclusin de pginas web de otras personas o empresas dentro de un marco de la tuya
puede acarrearte serios problemas si no queda claro el origen de las primeras.
Si haces algo as estars cometiendo dos delitos: injuria
y difusin de datos personales.
Un insulto te puede
ocasionar problemas
ner problemas legales. Hay
muchas personas a las que
se les identifica muy fcil-
mente por su vestimenta o
por determinadas facciones
de su cara. Tambin el en-
torno fsico o familiar pue-
den ser un punto de re-
ferencia para identificar a
una persona.
Si te dedicas a publicar
textos en Internet y te ajus-
tas a la realidad no vas a te-
ner nunca problemas. Esto
no quiere decir que no pue-
das dar tu opinin. Pero cui-
dado, no te excedas.
Las direcciones de email
privadas tambin estn pro-
tegidas por la ley. No se pue-
den publicar sin el permiso
de su titular.
Meta Tags
Recientemente ha surgido
una polmica con la bs-
queda de pginas en Inter-
net. Algunos usuarios utili-
zan el truco de insertans
nombres comerciales y mar-
cas de empresas conocidas
en los Meta Tags. Con ello se
consigue que el resultado
de una bsqueda incluya,
adems de las pginas de la
empresa titular del nombre,
las pginas de aquellos que
insertan este nombre en un
campo Meta.
Tampoco se ajusta a dere-
cho el truco de incluir en la
pgina de una empresa el
nombre comercial de la
competencia. En especial
cuando el fin de esta prc-
tica sea que aparezca el
nombre de la empresa cuan-
do se est buscando la p-
gina de la competencia. En
estos casos se suele acabar
ante los tribunales.
Ahora ya sabes todo lo
que no puedes insertar en
tu pgina web. La lista de
prohibiciones parece ms
grave de lo que realmente
es. Si te cies a tu propio tra-
bajo y en tu pgina slo in-
sertas fotos y textos pro-
pios, no vas a tener ningn
problema. Adems, resulta
ms original crear tus pro-
pios contenidos en vez de
recurrir a los de los dems.
Pero si deseas insertar
contenidos de otras pginas,
te recomendamos que te
pongas en contacto con el
titular de la web. Lo ms gra-
ve que puede pasar es que
te diga que no.Tambin pue-
des llevarte una agradable
sorpresa porque al titular de
la web le parezca genial que
desees publicar sus conte-
nidos dentro de tu pgina.
Y esto es todo, como po-
drs comprobar, la mayora
de las cuestiones legales son
similares a las que se apli-
can en la vida real. Lo mejor
es contar con el mejor alia-
do en estos casos (el senti-
do comn) y, en caso de du-
da, actuar con cuidado.
Siguiendo esta mxima no
tendrs problemas.
Pues ya se puede decir
que eres un autntico web-
master, formado en todos
los aspectos necesarios pa-
ra desarrollar tu web per-
sonal (o quien sabe si, in-
cluso, dedicarte a ello
profesionalmente).
En Computer Hoy espe-
ramos que hayas disfrutado
con este curso y que pases
a formar parte del medio de
comunicacin ms impor-
tante del mundo: Internet.
57
N 48
Descargar
Dentro de la red Internet
existen muchos ordena-
dores a los cuales pue-
des acceder para copiar
ficheros al tuyo.
Esta operacin se deno-
mina descarga de fiche-
ros. sto se puede reali-
zar desde el navegador,
haciendo click en los en-
laces que representen
los archivos, o mediante
sistemas y programas
especialmente pensados
para la descarga, como
el FTP.
Shareware
Son programas de de-
mostracin que se pue-
den probar durante un
tiempo determinado o
que no incluyen todas
sus funciones. Se distri-
buyen gratuitamente a
travs de Internet o en
CD. Para obtener la ver-
sin completa hay que
pagar una cantidad de-
terminada al autor.
Link
Tambin se conoce
como enlace o vnculo.
Es una referencia a otra
pgina que se encuentra
en la red Internet. Se
suele distinguir por te-
ner un color distinto al
brayado o representado
por una imagen. Al ha-
cer click sobre l, el na-
vegador carga la pgina
correspondiente.
Marcos
Tambin llamados fra-
mes, son la divisin de
una pgina en varios
apartados. Se utilizan en
el diseo de pginas
web para organizar la in-
formacin y facilitar el
acceso a ella. Cuando se
divide una web en sec-
ciones que pueden mos-
trar pginas web inde-
pendientes, a cada una
de estas secciones se la
denomina marco o fra-
me. Al contenedor que
incluye el grupo de mar-
cos se le llama pgina
de marcos. Tambin se
suele utilizar para crear
tablas de contenido, que
permanecen en pantalla
mientras te desplazas
por la web.
09
08
07
06
Quiz pueda resultar tentador copiar sin ms un listado de enlaces de otra pgina web. Sin
embargo, no lo ser tanto cuando descubras que esta prctica es totalmente ilegal, ya que,
en el mejor de los casos, vulnera los derechos de autor. Adems, si contiene datos de tipo
personal, estars enfrentndote a la ley LORTAD (regulacin del tratamiento de datos).
Al expresar tus
opiniones ten cuidado
Pon cuidado y no
tendrs problemas
Asociacin Internautas
!
Aunque desde la Asociacin
de Internautas se insiste en
que lo que es delito en la
vida real tambin lo es en
la Red, se recuerda adems
que Internet an no est re-
gulado. As, hay actividades
que no son ilegales, pero
que los internautas consi-
deran contrarias a la convi-
vencia: Es el caso del
spamming, o envo masivo
de correos electrnicos no
solicitados. Tampoco es ti-
co, y posiblemente tampo-
co legal, que se introduzcan
en la Red los datos perso-
nales. La Agencia de Pro-
teccin de Datos tiene
abiertos varios expedientes
en este sentido, dice Do-
mingo.
Respecto a las pginas que
incitan al racismo, terroris-
mo o pedofilia, los respon-
sables de la Asociacin cre-
en que no es lgico crear
enlaces a este tipo de webs
porque se estara incu-
rriendo en una ilegalidad:
Legalmente, estas pginas
no deberan existir pues
nuestras leyes no permiten
estas actividades.
Sobre la utilizacin de tex-
tos, imgenes, programas.
etctera... en una web, el
responsable de la Aso-
ciacin considera lgico y
tico que se cite la fuente de
informacin, tal como pasa
en los medios de comuni-
cacin tradicionales.
Con respecto al uso de fi-
cheros musicales MP3 este
asunto no est nada claro...
en estos momentos hay va-
rios contenciosos abiertos
en EEUU.
Para Victor Domingo, la
mayora de los internautas
se suele ajustar a la legali-
dad vigente y cuando algo
no est claro si es legal o
ilegal se atiende a la Neti-
queta, normas que rigen las
relaciones en la Red, y al
sentido comn. Desde lue-
go, no todo el mundo se
atiene a estas normas y es
aqu donde deben interve-
nir los servicios jurdicos
tradicionales.
Victor
Domingo,
Asociacin
de internautas

Programación en HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programación en HTML

Cargado por

Copyright:

Formatos disponibles

L

a mayora de las pginas

El navegador Internet Explorer viene in-

Resumen de este captulo

que aumenta el valor del t-

Dar ttulo a la pgina

El texto es un poco largo

Hipervnculos con imgenes

Resumen de este captulo

Conviene usar frames?

Formularios con CGI

de tus pginas de Internet

Esto significa que puedes dar

Utilizacin de los comentarios

Resumen de este captulo

Programacin en HTML 11 parte Profesional

lneas de cdigo estn pro-

También podría gustarte