Desarrollo de Paginas Web:

KompoZer

ndice de contenido
INTRODUCCIN:......................................................................................................5
Qu es KompoZer?....................................................................................................................5
Entorno de trabajo.........................................................................................................................7
Barra de titulo: ...........................................................................................................................7
Barra de mens:..........................................................................................................................7
Barra de Redaccin:....................................................................................................................7
Barras de Formato:......................................................................................................................7
Ventana administracin sitios e!: ............................................................................................"
Ventana de #rea de edicin: ........................................................................................................"
Barra de modo de edicin:..........................................................................................................$
Barra de estado:...........................................................................................................................$
Barras de menus (Amp!ada"......................................................................................................#$
Crea%!&n de un '!t!o (eb............................................................................................................#)
Con*!+ura%!&n de a p,+!na.........................................................................................................#-
%rear una &#'ina (e!...............................................................................................................)*
+uardar una &#'ina (e!...........................................................................................................)7
Vista preliminar en el na,e'ador...............................................................................................)7
.rop!edades de .,+!na.................................................................................................................#/
TE0TO................................................................................................................1#
-ntroduccin de te.to................................................................................................................/)
0eleccin de 1e.to....................................................................................................................//
0232%%-45........................................................................................................................//
2l &ortapapeles..........................................................................................................................//
6tras 6peraciones tiles.........................................................................................................../7
B80%9R : R22;&39Z9R.............................................................................................../7
<20=9%2R : R2=9%2R................................................................................................../>
%6;&R6B9%-45 6R16+R?F-%9................................................................................./>
2ormato de Te3to.........................................................................................................................1-
2stilo de &#rra@o......................................................................................................................../*
Fuente......................................................................................................................................../*
5e'ritaA cursi,a B 0u!raBado..................................................................................................../7
1amaCo....................................................................................................................................../7
9lineacin de &#rra@os............................................................................................................../7
0an'rDa de &#rra@os.................................................................................................................../7
Otros eementos............................................................................................................................14
3istas........................................................................................................................................./$
3Dneas........................................................................................................................................7E
EN5ACE'.............................................................................................................66
<irecciones a!solutas B relati,as..............................................................................................77
1ipos de 2nlaces:......................................................................................................................77
Ap!%a%!&n.....................................................................................................................................65
2nlaces -nterno.........................................................................................................................75
2nlaces 2.terno........................................................................................................................75
2nlaces a %orreo 2lectrnico
...................................................................................................................................................75
2nlaces a 9rcFi,os:...................................................................................................................7*

.......................................................................................................................................................67
E3tra: Otras prop!edades de Ena%e:........................................................................................6/
Re*eren%!a 7T85........................................................................................................................64
2tiGueta H9I B HJ9I................................................................................................................7$
9tri!utos de H9I......................................................................................................................7$
9tri!utos de HB6<:I..............................................................................................................7$
I89:ENE'............................................................................................................)$
Formatos:..................................................................................................................................>E
Formato +-F.........................................................................................................................>E
Formato K&+.........................................................................................................................>E
Formatos &5+......................................................................................................................>)
6!ser,aciones:.....................................................................................................................>)
-nsertar ima'en..........................................................................................................................>/
.rop!edades de a Ima+en:..........................................................................................................)6
&estaCa 8!icacin:
...................................................................................................................................................>7
&estaCa <imensiones: ..............................................................................................................>>
&estaCa 9pariencia: ..................................................................................................................>>
&estaCa 2nlace: ........................................................................................................................>5
6tras opciones:..........................................................................................................................>5
Insertar una !ma+en %omo *ondo................................................................................................)-
Re*eren%!a 7T85........................................................................................................................)4
2tiGueta H-;+I........................................................................................................................>$
2tiGueta H;9&I B HJ;9&I.....................................................................................................>$
9tri!uto !acL'round de B6<:................................................................................................>$
2tiGueta 6!Mect..........................................................................................................................>$
2tiGueta <Bnsrc.........................................................................................................................5E
TAB5A'...............................................................................................................5#
-ntroduccin..............................................................................................................................5)
<escripcin de las ta!las...........................................................................................................5)
%rear 1a!las..............................................................................................................................5)
<e@inir la ta!la..........................................................................................................................5/
;odi@icar ta!las.......................................................................................................................55
&ropiedades de la ta!la..............................................................................................................55
&ropiedades de la celda.............................................................................................................5"
Otras 8od!*!%a%!ones...................................................................................................................-#
-nsertar elementos.....................................................................................................................*)
2liminando elementos...............................................................................................................*/
%om!inando celdas ..................................................................................................................*7
Cuest!ones de D!se;o...................................................................................................................-5
Resoluciones de pantalla...........................................................................................................*5
E3tra: Re*eren%!a 7T85:..........................................................................................................-7
2tiGueta H19B32I...................................................................................................................*7
9tri!utos de H19B32I.............................................................................................................*7
8ARCO'..............................................................................................................-4
-ntroduccin:.............................................................................................................................*$
Re*eren%!a <tm............................................................................................................................7$
2tiGuetas HFR9;2021I B HFR9;2I...................................................................................7E
9tri!utos de HFR9;2021I....................................................................................................7)
9tri!utos de HFR9;2I............................................................................................................7)
2OR8U5ARIO'......................................................................................................71

CA.A'................................................................................................................./#
-ntroduccin..............................................................................................................................")
Re*eren%!a 7T85......................................................................................................................../1
2tiGuetas <-V B 0&95.............................................................................................................."/
C''...................................................................................................................../5
=6K90 <2 201-36 ................................................................................................................"5
-ntroduccin ........................................................................................................................."5
RE2ERENCIA 7T85................................................................................................................/-
-ntroduccin.............................................................................................................................."*
1erminolo'Da empleada en %00................................................................................................"*
&ropiedad.................................................................................................................................."*
Valor.........................................................................................................................................."*
<eclaracin..............................................................................................................................."7
0elector......................................................................................................................................"7
Re'la de estilo..........................................................................................................................."7
=oMa de estilo............................................................................................................................"7
%olocacin de las re'las de estilo............................................................................................."7
8sar FoMas de estilo en cascada.................................................................................................""
%rear re'las de estilo.................................................................................................................$E
E3tra: est!os %apas......................................................................................................................41
.UB5ICACIN DE .9:INA' (EB............................................................46
%on@i'uracin de pu!licacin...................................................................................................$7
.ub!%ar nuestra =eb...................................................................................................................45
Consejos a tener en %uenta..........................................................................................................47
I INTRODUCCIN NTRODUCCIN : :
Este tutorial tiene como fin brindar una base de conocimiento a aquellos que buscan una
alternativa gratuita y libre para el diseo de una web, sin renunciar por ello a la calidad, ni
a la facilidad de otras herramientas pensadas para el mismo fin.
Qu es KompoZer?
KompoZer es un editor de pginas web W!"W# $What you see is what you get % &o
que ves es lo que recibes'. Es un derivado de ()*, es decir, una versi+n no oficial de
()*, el cual ha reparado ciertos errores$bugs' que este presentaba. Komposer est
basado en ,o-illa .omposer pero con e/ecuci+n independiente. !u ob/etivo es facilitar el
desarrollo de pginas web, gracias a las distintas formas de visuali-aci+n disponibles en
su interfa- como0 c+digo fuente, ventana W!"W#, visi+n con tags de 12,& real-ados'
3resenta caracter4sticas como el soporte integrado de .!! y me/or gesti+n del soporte
523 para actuali-aci+n de los ficheros, soporte de marcos, formularios, tablas, pantillas de
diseo, etc. .abe destacar que est disponible para diversas plataformas0 Windows, ,ac
6!, y &inu7. &a versi+n sobre la cual traba/aremos en este tutorial, es la 8.9.:8, traducida
al espaol por el 3royecto (ave. se sentirn c+modos con la interfa- y opciones de
KompoZer.
;lgunas de las herramientas de KompoZer son0
Administrdor de sitios !T": cualquier sitio que el usuario haya especificado en
sus 6pciones de 3ublicaci+n, podr ser navegado en una barra lateral. 2ambi<n
permite filtrar y mostrar archivos o solo documentos 12,& o imgenes.
Nue#os se$ector de co$ores: algo ms ligado a lo que los usuarios acostumbran a
utili-ar. !e podr elegir entre el selector de colores verde, a-ul y ro/o para crear la
tonalidad deseada, as4 como tambi<n elegir la saturaci+n de la mati- $hue
saturation' y el brillo. En caso de que esto nos resulte inc+modo, podremos elegir el
color deseado con el mouse.
"est%s: una de las herramientas ms conocidas de ,o-illa esta disponible para
KompoZer facilitando el traba/o y brindndole la posibilidad al usuario de reali-ar
acciones de manera ms fluida navegando entre pestaas. !e podr utili-ar la
herramienta =eshacer y >ehacer independientemente en cada una de las
pestaas.
&rrs de tres person$i'($es: se podrn elegir los botones que apare-can en
nuestras barras y los que no seg?n nuestros gustos y@o necesidades.
.omo podrs ver, <sta aplicaci+n facilita mucho el desarrollo de sitios web con sus
herramientas.
http0@@www.difundefirefo7.com@Aompo-er

) )NTORNO NTORNO D) D) TRA&A*O TRA&A*O
&a ventana principal de KompoZer esta formada por varias barras, a continuaci+n una
descripci+n de cada una de ellas.
&rr de titu$o:
; la i-quierda de esta barra aparece el ttulo de la pgina web que estamos editando o el
nombre del archivo que le hayamos asignado. ; la derecha los botones de control de la
venta minimi-ar, ma7imi-ar@restaurar y cerrar.
&rr de men+s:
5ormado por los men?s Archivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas,
Ayuda. ; trav<s de estos men?s podemos acceder a todas las opciones del programa.
&rr de Redcci,n:
Esta barra est formada por botones con las opciones de uso ms habitual que se
encuentran en la barra de men?. ; trav<s de estos botones accedemos ms rpidamente.
3or e/emplo los botones0
N:u:e:v:o, A:b:rir, G:u:a:r:d:ar, P:u:blic:ar, B:u:s:c:ar, I:m:a:g:e:n, et:c.
C:a:b:e: d:e:st:a:c:a:r q:u:e: p:o:d:r:e:m:o:s: m:o:difc:ar di:c:h:a: b:a:rr:a, p:a:r:a: a:d:a:pt:arl:a a:
n:u:e:str:a:s: n:e:c:e:si:d:a:d:e:s.
&rrs de !ormto:
.on botones que nos permiten acceder a opciones ms bsicas de formato de te7to y
prrafos. Estas son similares a las de cualquier procesador de te7tos. Ba/o esta tenemos
otra barra con ms opciones de formatos y adems de otras relacionadas con el formato
aplicando estilos y las capas.

-entn dministrci,n sitios .e(:
Esta barra esta situada a la i-quierda y en ella podremos configurar los sitios web, para
poder acceder de forma rpida a las distintas pginas web. ; trav<s de ella tambi<n
podremos publicar en "nternet Webs y editar directamente las paginas ya publicadas sin
necesidad de tenerlas guardadas en nuestro disco local.
-entn de /re de edici,n:
Esta es el rea principal, en la que podremos disear y editar la pgina web. Es el
espacio de traba/o. .ada pgina que se edite se mostrar en esta rea, pudiendo cambiar
de una a otra mediante las pestaas que se muestran en la parte superior con el titulo de
cada pgina. 2ambi<n podemos mostrar las reglas en esta rea, que nos ayudaran a
dimensionar diversos ob/etos.

&rr de modo de edici,n:
En esta barra nos encontraremos cuatro pestaas que permiten cambiar el modo de
edici+n0
C (ormal $o modo Wysiwyg'
C Etiquetas 12,& $muestra de forma esquemtica las etiquetas utili-adas'
C .+digo 5uente $acceso al c+digo 12,& de la pgina'
C )ista 3reliminar $.omo se ver4a la pagina en el navegador'
&rr de estdo :
3roporciona informaci+n como la relativa a dentro de qu< etiqueta nos encontramos.
;dems a trav<s de ella podemos seleccionar de forma facil y rpida las etiquetas con
sus contenidos para reali-ar acciones sobre ellos como dar formatos, eliminar, etc.



& &ARRA0 ARRA0 D) D) 1)NU0 1)NU0 2A 2A1"3IADA 1"3IADA 44
:a:m:o:s: a: v:e:rl:o: m:a:s: a: !o:n:d:o
1en+ Arc5i#o:
.onstituye la primera opci+n del men?
principal. En ella podemos contemplar
opciones como crear, abrir y guardare
imprimir archivos.
1en+ )ditr:
&as opciones de edici+n son estndares en
casi todas las herramientasD aqu4 se
pueden locali-ar las opciones para copiar,
pegar, deshacer, rehacer, seleccionar,
buscar y reempla-ar. propiedades de
publicaci+n del sitio web.



1en+ -er:
En esta opci+n se configuran las barras de
herramientas, definiendo qu< elementos se
desean visuali-ar en el rea de traba/o.
2ambi<n constituye otra v4a para
despla-arse entre los diversos modos de
edici+n $normal, etiquetas, fuente yvista
preliminar', otra opci+n es la de cambiar el
Zoom del escenario. $defecto :88E'
1enu Insertr
3ermite incorporar elementos a la escena,
tales como tablas, formularios, imgenes,
anclas y enlaces e7ternos. *no de los
puntos primordiales y de gran
inter<s es la inserci+n de caract<res
especiales, los cuales son necesarios
dentro de cualquier contenido que requiera
un c+digo especial para poder ser
visuali-ado.
&os ob/etos inteligentes de los cuales
dispone Kompo-er y que pueden ser
insertados, no se visuali-an en el rea de
traba/o normal, etiqueta o vista preliminar,
s+lo hasta que se vea en un e7plorador se
puede tener la seguridad de qu< ob/eto
funciona correctamente.




1en+ !ormto
3ermite cambiar la apariencia de los
elementos del documento como0 tipograf4a,
tamao, color, estilo, formato del prrafo,
inserci+n de listas, sangr4a, color del
prrafo, letra y fondo.
1en+ T($
&as tablas permiten tener mayor orden en
la estructura de contenido bien sea grfico
o te7tual. ;qu4 podemos insertar,
seleccionar y borrar una tabla, adems de
unir celdas seleccionadas, y definir el color
de fondo de la misma.
1en+ 6errmients
!e utili-a para validar el c+digo generado
en 12,&, asignar y administrar las
contraseas por traba/o, asignar rutinas
Fava!cript desde una consola especial, as4
como para verificar la sinta7is generada. &a
opci+n de mayor uso es el Editor de ho/as
de estilos o .!! $.ascade !tyle !heet'
que tratan de dar la separaci+n definitiva de
la l+gica $estructura' y el f4sico
$presentaci+n' del documento

1en+ A7ud
En esta opci+n est el enlace a la ayuda en
l4nea desde el sitio
oficial de Aompo-er%()*

C CR)ACIN R)ACIN D) UN 0 D) UN 0ITIO ITIO 8 )& 8)&
KompoZer nos permitir traba/ar directamente sobre el sitio web en "nternet, aunque
adems puede traba/ar con archivos en el sistema local.
3ara mantener organi-ados todos los archivos, es necesario crear un sitio web.
!eleccionar0
;en 2ditar
%on@i'uracin de &u!licacin
6 sino desde el panel i-quierdo de ;dministrador de sitios $5G', seleccionamos el bot+n
Editar !itios.
En ambos casos aparecer la siguiente ventana0

Administracin de sitios web
; la i-quierda, podemos observar los sitios ya definidos, y a la derecha las propiedades
del sitio seleccionado.
3ara crear un nuevo sitio, primero seleccionamos el bot+n (uevo sitioD as4, los campos de
la derecha se pondrn en blanco para que sean rellenados0
Nom(re de$ sitio: (ombre del sitio que se va a crear. Es un te7to que se va a
mostrar en la lista de sitios y cuando haya que seleccionarlo. Es muy ?til para
identificarlo.

Direccin HTTP de su pgina inicial: *>& de la pgina de inicio del sitio web.
3or e/emplo, si se tiene una pgina en geocities, ser
http0@@es.geocities.com@usuario@inde7.html. En caso de que se desee traba/ar en el
sistema local, la direcci+n ser de tipo file0@@@.0@=ocuments and
!ettings@usuario@sitioweb@inde7.html.
0er#idor de pu($icci,n: informaci+n para publicar en el servidor
=irectorio de publicaci+n0 direcci+n 523 $3rotocolo de 2ransferencia de
archivos' de publicaci+n. Esta informaci+n nos la suministra el servidor
donde se alo/a la pgina. En el caso de #eocities ser
ftp0@@ftp.es.geocities.com@. En el caso de que se traba/emos en local, se
introducir una *>& local del tipo ile0@@@.0@=ocuments and
!ettings@usuario@=irectorio o se seleccionamos la carpeta pulsando en el
bot+n !eleccionar directorio.
(ombre de usuario
.ontrasea
3ara eliminar un sitio, lo seleccionamos en la lista y pulsamos el bot+n Eliminar sitio.
3ara establecer un sitio predeterminado, lo seleccionamos en la lista y pulsamos el bot+n
!eleccionar como valor predeterminado. El nombre del sitio se pondr en negrita
indicando que es el predeterminado.
*na ve- definido el sitio web, en el panel de la i-quierda se mostrarn todos los archivos y
sub%carpetas e7istentes. 1aciendo doble pulsaci+n sobre un archivo, se abrir en una
solapa nueva de la -ona de traba/o. !i se hace pulsaci+n doble sobre una carpeta, se
mostrar el contenido de la misma.
C CON!I9URACIN ON!I9URACIN D) 3A D) 3A ":9INA ":9INA
Crer un "/;in 8e(
H 3ara crear una pgina web pulsamos sobre el icono (uevo en la barra de herramientas
de composici+n. 6 desde el men? ;rchivo%I (uevo
;parecera la siguiente ventana, 3odremos seleccionar0
un documento en !lancoA Gue !ien puede ser un N=1;3 normalA o un !tr i ct =2=, Gue es un
documento N=1;3 en el Gue no soporta etiGuetas anti'uas B el cdi'o de!e estar escrito
correctamente.
8n documento !asado en una plantilla.
8na plantilla ,acia.
2ambi<n, podremos decirle que lo cree en una pestaa, o en una ventana nueva.
H 3ara abrir una pgina ya e7istente ir a0 ;rchivo J ;brir archivo. $.trl. K 6'
H 3ara abrir una pgina abierta recientemente ir a0 ;rchivo J 3ginas recientes.
Es interesante comentar que mediante la opci+n abrir direcci+n web, podremos cargar
una web directamente en el programa, observando as4 su disposici+n y contenido.
9urdr un "/;in 8e(
3odremos guardar un documento de KompoZer en formato 12,& o formato s+lo te7to. En
el caso de guardarlo como 12,& $Arc5i#o< 9urdr como===' preservar el formato del
documento, como estilos del te7to, imgenes, etc. !i guardamos el documento como s+lo
te7to $Arc5i#o< 9urdr4 y cambiar codificaci+n de caracteres' eliminaremos todas las
etiquetas 12,&, pero se preservar el te7to del documento.
-ist pre$iminr en e$ n#e;dor=
!i queremos comprobar c+mo quedar4a nuestra pgina web en "nternet, podemos
reproducirla con el navegador que tengamos instalado. !olo hemos de elegir Arc5i#o/
-isu$i'r "/;in en e$ n#e;dor o pulsar la tecla !>.
" "RO"I)DAD)0 RO"I)DAD)0 D) " D) ":9INA :9INA
!e configuran las propiedades de de pgina a trav<s de0

!ormto?T@tu$o 7 propieddes
de p/;in=
!e abrir la siguiente ventana0
"ntroducimos en esta ventana el ttulo de la pgina, nombre del autor, una breve y
Descripcin. Es recomendable ingresar estos datos ya que algunos buscadores lo usan
para inde7ar la pgina a su Base de =atos.
3odemos indicar si esta pgina se trata de una plantilla que usaremos en futuros diseos.
;dems podremos introducir en el rea llamada "nternacionali-aci+n las opciones
referentes al idioma, direcci+n de escritura $dependiendo del idioma', y el /uego de
caracteres utili-ados en la pgina.
2ambi<n, podemos configurar otras propiedades de la pgina, tales como el fondo y los
diferentes colores a utili-ar. 3ara ello, accederemos a0
!ormto< Co$ores 7 !ondo de p/;in=

.
=isponemos de dos opciones para establecer los colores de la pgina0
*sar .olores predeterminados.
*sar colores personali-ados.
!i elegimos usar !olores predeterminados, los te7tos, enlaces y el color de fondo de
fondo de nuestra pgina se mostraran con los colores configurados en el navegador.
.on "sar colores personali#ados, podemos definir el color en que se mostrarn los te7tos,
enlaces y fondo de la pgina.
!i decidimos personali-arlo, como vemos en la imagen, podremos ver una pequea
ventana en modo de muestra para ver el contraste entre los diferentes elementos que
hemos configurado.
2ambi<n disponemos de una Edici+n avan-ada0
=esde aqu4 podremos, mediante los atributos y sus respectivos valores, aplicar diferentes
configuraciones a LB6=I, mediante 12,&, como estilos incrustados $.!!', y eventos
/avascripts, que se aplicarn por defecto a los diferentes elementos de nuestra web.
T T)ATO )ATO
Introducci,n de teBto
.omo ya hemos visto en el apartado anterior, podemos establecer un formato
predeterminado para todo el te7to de la pgina. 3ero a continuaci+n, vamos a ver como
traba/ar directamente con el te7to, para personali-ar cada apartado.
En cuanto a la inserci+n de te7tos, esta no tiene ninguna dificultad, ya que es
e7actamente igual a como cualquier procesador de te7tos.
.abe aclarar, que en lengua/e 12,&, caracteres especiales como vocales acentuadas,
ees, par<ntesis, etc. se escriben de una forma especial, utili-ando c+digos, incluso el
espacio en blanco se trata de forma especial. !i traba/amos en el modo de edici+n
normal, Kompo-er se encargara de traducir los caracteres especiales que escribamos al
modo de c+digo de caracteres en 12,&.
3odemos seleccionar el tipo de contenido que estamos insertando $parrafos, t4tulo,
direcci+n..' mediante la opci+n Texto del cuerpo, en la Barra de 5ormato0
;s4, en el caso de estar escribiendo un te7to, y requerir un salto de l4nea, , solo tendremos
que presionar Mayuscula+Enter , y pasaremos as4 al prrafo siguiente, el cual heredar
la personali-aci+n aplicada al anterior.
En el caso de necesitar introducir .aracteres Mpoco comunesN, esos que no se encuentran
en el teclado o que requieren c+digo 12,& especial, iremos al men?
Insertar/Caracteres y Simbolos=
En elo cual nos aparecer una solapa, en la que podremos encontrar seg?n la
clasificaci+n de la misma el carcter en cuesti+n0
0e$ecci,n de TeBto=
2n cuanto a la seleccin de te.toA KompoZer No permite Facer selecciones discontinuas de te.to.
3os procedimientos m#s usuales para seleccionar te.toA son los si'uientes:
ARRA'TRE
0e sita el cursor al inicio del !loGue de te.to B realiOamos un arrastre con el !otn
iOGuierdo del ratn..
A%ara%!&n: 0i un !loGue de te.to est# seleccionado B se pulsa cualGuier teclaA sta sustituBe a
toda la seleccin.
8A> ? .O'ICIN
&ara seleccionar un !loGue de te.to situamos el cursor en el inicio del !loGueA pulsamos
B mantenemos pulsada la tecla 8A>A situamos el cursor al @inal del !loGue de te.to.
'E5ECCIN
Una paabra: <o!le clic so!re la pala!ra
Una @nea: %lic en la parte iOGuierda de la lDneaA el cursor cam!ia a @lecFa.
Un p,rra*o: 5os situamos al comienOoA B sin soltar el !otn iOGuierdo del ratnA lo
arrastramos Fasta el @inal del mismo.
)$ "ortppe$es=
&as herramientas del 3ortapapeles se sit?an en el men? Edici+n, aunque podremos, una
ve- seleccionado el te7to o la posici+n el cuesti+n, pulsar el bot+n derecho, y acceder
rapidamente a las siguientes opciones0
Copiar. Edicin/Copiar. 2ecla rpida .6(2>6& K .
Cortar. Edicin/Cortar. 2ecla rpida .6(2>6& K O

Pegar. Edicin/Pegar. 2ecla rpida .6(2>6& K )
Pegar sin Formato.
Ac$rci,n0 El portapapeles no funciona con imgenes copiadas de otras aplicaciones,
mas adelante veremos como se deben de insertar las imgenes.
Otrs Operciones +ti$es=
BU'CAR > REE8.5AAAR
Este comando nos ayudar a ahorrar tiempo y traba/o0 )dici,nC&uscr 7 reemp$'r=
&uscr teBto: 3odemos buscar en el c+digo fuente o en el te7to, dependiendo de la vista
seleccionada.
Remp$'r con: si queremos reempla-ar lo buscado por algo debemos indicar el te7to en
este cuadro de te7to.
3odemos configurar las opciones de b?squeda0
.oincidir may?sculas y min?sculas.
Buscar el todo el documento.
Buscar hacia atrs.
*na ve- configurado el cuadro de dilogo tenemos la posibilidad de buscar o rempla-ar,
uno por uno o todos a la ve-.
DE'7ACER > RE7ACER
Des<a%er (Contro ? A": seleccionamos Ed!%!&nBDes<a%er o !otn de la
!arra de Ferramienta Est,ndar.
Re<a%er (Contro ? >": seleccionamos Ed!%!&nCRe<a%er !otn de la
!arra de Ferramienta Est,ndar.
CO8.ROBACIN ORTO:R92ICA
3ara poder poner en marcha esta utilidad debemos seleccionar )ditr<Re#isi,n
Orto;r/Dic2Ctr$=EK4. ;parecer el siguiente cuadro de dilogo0
A%dir p$(r0 "ncluye la palabra seleccionada a nuestro diccionario personal e
impide que KompoZer la recono-ca como palabra err+nea.
I;norr0 "ndica al programa que ignore la palabra seleccionada y contin?e la
b?squeda.
I;norr todo0 6mitir todas las repeticiones de la palabra seleccionada en el
documento entero.
Reemp$'r0 !i encontramos la palabra correcta en la lista de sugerencias y
queremos cambiarla por la err+nea, la seleccionamos y presionamos este bot+n. !i
no encontrsemos ninguna podemos escribir la correcta en el cuadro de te7to
Reemp$'r con=
Reemp$'r tods0 2odas las repeticiones de la palabra en cuesti+n encontradas
en el documento sern reempla-adas por la palabra seleccionada en el cuadro
0u;erencis.
El programa comprueba el te7to usando el diccionario seleccionado en la casilla Idiom.
.abe aclarar que en el caso de no disponer del idioma Espaol, seleccionaremos dentro
de la casilla "dioma, =escargar ,as, y seguiremos las instrucciones que all4 aparecern
para conseguir el mismo.
! !OR1ATO OR1ATO D) T D) T)ATO )ATO
!i queremos modificar las caracter4sticas de un te7to, o cualquier otro elemento, se
aplican desde la barra de 5ormato o desde men? 5ormato
!i no lo tenemos visible seleccionamos -er<1ostrr Ocu$tr< &rr de !ormto
*na ve- seleccionado un te7to el inspector de propiedades muestra este aspecto.
En caso de que en la misma no encontremos la opci+n deseada, dentro del men?
5ormato, encontraremos las faltantes.
)sti$o de "/rrDo=
El te7to en 12,& est compuesto principalmente por encabe-ados y prrafos.
3ara asignar a un prrafo un estilo de prrafo, como hemos comentado anteriormente,
seleccionamos el mismo, y, seleccionamos en el campo 2e7to del .uerpo, 3arrafo, o
Encabe-ado 7, dependiendo del tipo.
Estilos accesibles desde esta lista0
Direcci,n: "ntroduce te7to entre saltos de l4nea, no entre etiquetas LpI y L@pI,
como har 3rrafo.
"reDormto: estilo de te7to que emplea letra mono espaciada, con este estilo se
respetan los espacios entre palabras del c+digo 12,&, se emplea de una manera
rudimentaria para alinear te7to. &a etiqueta que emplea es L3>EIL@3>EI.
Contenedor 9enrico 2DI-4: Esta opci+n introduce el te7to dentro de una capa,
que es un tipo de organi-aci+n del te7to y demas elementos, en el que
profundi-aremos mas adelante.
!uente
&a fuente se define con el atributo Dce de la etiqueta F!ontC.
KompoZer aplica las fuentes que se encuentran instaladas en el equipo, pero hay que
tener en cuenta, que puede que el visitante no posea ese determinado tipo de fuente, por
lo que es recomendable que cuidemos este aspecto a la hora de seleccionar alguna de
ellas, ya que dependiendo de la fuente seleccionada, el aspecto de nuestra web puede

cambiar mucho.
&os pasos para aplicar el formato, son los siguientes0
:.!eleccionamos el te7to.
P.=esplegamos, en el "nspector de 3ropiedades, el cuadro de lista desplegable de
fuentes o e/ecuta el comando TeBtoC!uente.
Q.!eleccionamos de la lista la fuente deseada.
Ne;ritG cursi# 7 0u(r7do
=esde el mismo "nspector de 3ropiedades podemos aplicar estilo directamente a un te7to
seleccionado pulsando los iconos correspondientes.
Tm%o
;l seleccionar ,enor o ,ayor puede cambiar el tamao del te7to seleccionado usando
etiquetas LsmallI y LbigI, respectivamente.
!i seleccionamoa ,uy pequeo, 3equeo, ,edio, #rande, ,uy grande y E7tragrande
cambiar el tamao del te7to seleccionado usando etiquetas LfontI.
A$ineci,n de "/rrDos=
3ara establecer la alineaci+n del 3rrafo0
:.!ituamos el cursor en el 3rrafo que queremos modificar.
P.!elecciona en el Inspector de "ropieddes la alineaci+n que deseamos pulsando
su bot+n correspondiente.
&os diferentes c+digos que se introducen son0
"-quierda0 Lp alignRSleftSI.L@pI
.entro0 Lp alignRScenterSIL@pI
=erecha0 Lp alignRSrightSIL@pI
Fustificar0 Lp alignRS/ustifySIL@pI
2ambi<n se puede acceder desde el men? TeBtoCA$iner, y seleccionamos la alineaci+n
elegida.
0 n;r@ de "/rrDos=
3ara modificar la sangr4a del 3rrafo0
:.!ituamos el cursor en el prrafo que queremos sangrar.
P.En el Inspector de "ropieddes, pulsamos el icono !angr4a de te7to o ;nular la
sangr4a de te7to seg?n deseemos.

O OTRO0 TRO0 )3)1)NTO0 )3)1)NTO0
3ists=
*tili-aremos primordialmente dos tipos de listas0
3ists sin ordenr0 2ambi<n llamadas vietas.
3ists ordends0 2ambi<n llamadas numeraciones.
3ists de deDinici,n: !e utili-an para introducir un termino, seguido de su
definici+n. Es muy util en muchos casos, como, por e/emplo, en el glosario de
nuestra web.
"r crer un $ist nue#=
:.!ituamos el cursor en el lugar en el que deseamos aadir la lista y hacemos
clic en el bot+n determinado.
P.Escribimos el te7to del elemento de la lista y presiona INTRO para crear otro
elemento de la lista.
Q.3ara terminar la lista, desactivamos el icono de la lista en el inspector de
3ropiedades.
"r crer un $ist usndo teBto eBistente
:.!eleccionamos una serie de prrafos para convertirlos en una lista.
P.1acemos clic en el bot+n espec4ficoG y seleccionamos el tipo de lista
deseado0 &ista sin ordenar, &ista ordenada o &ista de definici+n.
.RO.IEDADE' DE 5A 5I'TA
*na ve- reali-ada una lista se puede modificar. 3ara modificar una lista situamos el cursor
dentro de la misma y seleccionamos 5ormatoC3istsC"ropieddes= ;parecer un men?
de dialogo.

Tipo de $ist : .ambia la representaci+n de los elementos de toda la lista.
)sti$o de -i%et : *na ve- elegido un tipo de lista podemos seleccionar su estilo0 si
son vietas, c4rculos o cuadrados, y si es una numeraci+n podemos elegir que sea
alfab<tica, en numeraci+n romana, etc.
.omen-ar en0 en el caso de seleccionar una lista de numeraci+n, podremos
indicarle el n?mero a partir del cual queremos que empiece a contar.
3@nes
&as lineas son un elemento muy util para dividir y diferenciar de una forma simple, el
contenido de nuestra pgina.
3ara insertar una l4nea hori-ontal de separaci+n simplemente habr que seleccionar la
opci+n InsertrC3@ne . En el c+digo 12,& de la l4nea se representar como LhrI.
*na ve- insertada se le pueden modificar las propiedades desde el "nspector de
3ropiedades. ;l seleccionar la regla hori-ontal nos ofrece estas posibilidades0
=esde estos campos podemos determinar0
;nchura0 el ancho de la regla $en p47eles o en tanto por ciento con respecto al
ancho de la pagina'
el alto de la regla $en pi7eles'
si tendr sombreado o no
su alineaci+n en la pgina
2ambi<n, podremos definirla como predeterminada, para, as4, al insertar otra l4nea
en el futuro, que esta posea las mismas propiedades que la anterior.
En Edici+n ;van-ada, podremos acceder a una ventana para, as4, en caso de
conocer los atributos con sus respectivas propiedades, introducirlos mediante el
lengua/e 12,&.
E %oor.
!e puede definir el color para varios elementos de la pgina0 te7to, fondo de pginas,
tablas y celdas, hiperv4nculos, bordes de tablas, l4neas hori-ontales, etc.
'ee%%!onar e %oor.
En cualquier momento que tengamos que seleccionar un color en KompoZer lo haremos a
trav<s de un bot+n de este tipo0 .
;l pulsarlo aparecer el selector de color0
=esde el cuadro de dilogo que se despliega podremos seleccionar un color predefinido,
o seleccionarlo cualquiera de la paleta de colores, as4 como personali-ar su tono,
saturaci+n y brillo. 2ambi<n, podremos seleccionarlo por su nombre, o por su valor en
he7adecimal.
Ac$rci,n: &as etiquetas web emplean colores por combinaci+n de >6F6, )E>=E y
;Z*&, el valor m7imo para cada color es PTT $55 en he7adecimal', y el valor m4nimo 8 $8
en he7adecimal'. E/.0 un color codificado as4 U558888 es ro/o puro.
) )N3AC)0 N3AC)0
&os v4nculos tambi<n llamados enlaces, linAs o hiper%enlaces son los que nos permiten
navegar, es decir, ir pasando de una pagina a otra.
!e puede usar como enlace un te7to o una imagen, el procedimiento es similar en ambos
casos. 1ay dos formas de introducir una direcci+n de la pgina@archivo@etc a enla-ar0
Direcciones (so$uts 7 re$ti#s
A(so$uts: !e utili-an para enla-ar pginas o archivos de un servidor e7terno. *na
direcci+n absoluta contiene la *>& completa. !on del tipo0
http0@@www.cprlogrono.com Estas direcciones requieren ser comprobadas
periodicamente como labor de mantenimiento.
E/0 http0@@www.google.es@. .+digo0 La hrefRShttp0@@www.google.esSI
Re$ti#s: 3ara enla-ar pginas o archivos pertenecientes al mismo sitio. &es falta
alguna de las secciones de la *>&. !i el archivo destino no se encuentra dentro de
la misma carpeta del sitio web, se le antepone la ruta correspondiente a partir de la
ubiaci+n actual.
E/0 direccion relativa. .+digo0 La hrefRS..@..@inde7.htmSI
Tipos de )n$ces:
Interno: (os lleva a otra parte dentro de la misma pgina donde se encuentra el
enlace. 3ara ello utili-amos un elemento llamado ancla.
3oc$: !e refiere a alg?n recurso situado en el mismo servidor que nuestra pgina
$*>& relativas'

)Bterno: !e refiere a alg?n recurso situado en otros servidores diferentes donde
se encuentra nuestra pgina $*>& absoluta'
De Correo: .uando se da clic en este tipo de enlaces se abre programa de correo
electr+nico para enviar un email a la direcci+n que previamente se halla
especificado en ese enlace.
A Arc5i#os: El recurso sealado es un archivo y al dar clic nos permiten que se
abran o se descargen a nuestro ordenador esos archivos.
A A"3ICACIN "3ICACIN
)n$ces Interno
:.!ituamos el cursor a donde estar dirigido nuestro enlace. *na ve- seleccionado,
pulsamos el icono Enlace "nterno , y le establecemos un nombre que har de
referencia de nuestro enlace.
P.&uego, seleccionamos nuestro futuro linA que, como ya hemos mencionado,puede
ser el te7to o la imagen que servir de enlace.
Q.Elegimos men? "nsertarJ Enlace o pulsamos el bot+n Enlace
V.En *bicaci+n del enlace colocamos la *>& de la pgina a la que debe apuntar el
enlace.
&a *>& puede ser absoluta $comien-a por http0@@' o relativa, es decir la ruta de un
archivo en el propio servidor donde est< alo/ada la pgina. En este caso podremos
marcar la opci+n &a *>& es relativa a la direcci+n de la pgina cuando accedamos
a las propiedades del enlace.
;l pasar el mouse sobre el ancla colocada, aparecer el nombre que le hemos
dado.
3ara cada destino al que queremos llegar en nuestra pgina habr un ancla
)n$ces )Bterno
:.!ituamos el cursor donde ser el enlace. 3or e/emplo seleccionando el te7to o
imagen que servir de enlace.
P.Elegimos men? "nsertarJ Enlace o pulsamos el bot+n Enlace
Q.En *bicaci+n del enlace colocamos la *>& de la pgina a la que debe apuntar el
enlace.
&a *>& puede ser absoluta o relativa.
)n$ces Correo )$ectr,nico

;l insertar un enlace, simplemente en lugar de escribir la url, escribimos el correo
electr+nico al cual queremos llegar y marcamos la opci+n M&o anterior es una
direcci+n de correo electr+nicoN

)n$ces Arc5i#os:
3ara crear un enlace a un archivo, lo reali-amos igual que si fuera a otra pgina, solo que
en ve- de seleccionar dicha pgina, seleccionamos el archivo en cuesti+n. Estos enlaces
no disponen de mayor comple/idad.
Destino de$ )n$ce:
El archivo llamado por un enlace se muestra en una ventana del navegador. 3or defecto,
esta ventana es la misma en la que estbamos, se sustituye su contenido. 3ero es posible
determinar cul va a ser la ventana de destino del enlace.
=entro de las propiedades del enlace, podremos seleccionar entre las siguientes
opciones0
En la misma ventana, sin marcos $por defecto'
En una nueva ventana.
En el con/unto de marcos contenedor
En el marco actual
En este marco0Lnombre marcoI
=e momento solo prestaremos atenci+n a los dos primeros, ya que los marcos los
estudiaremos en profundidad en otros apartados de este manual.
) )ATRA ATRA: O : OTRA0 TRA0 "RO"I)DAD)0 "RO"I)DAD)0 D)3 D)3 ))N3AC) N3AC) ::
;l crear enlaces en su pgina web a las de otras personas, KompoZer proporciona la
posibilidad de incluir informaci+n O5( $O12,& 5riends (etworA, >ed de ;mistad O12,&'.
O5( es una manera muy sencilla de representar las relaciones humanas usando
hiperenlaces. 3ara aadir informaci+n O5(0
:.3ulse con el bot+n derecho en el enlace al que quiere aadir informaci+n O5(.
P.!eleccione 3ropiedades del enlace.
Q.En la ventana de dilogo 3ropiedades del enlace, pulse en ,s propiedades.
V.!eleccione las entradas ba/o la secci+n ;mistad $O5(' que quiera aadir como
informaci+n O5(.
T.3ulse ;ceptar.
W.3ulse #uardar para guardar los cambios@adiciones al documento.
Not: algunas propiedades O5( son de tipo radio, es decir, s+lo puede pulsar una como
m7imo, mientras que otras son casillas de verificaci+n, es decir, puede marcar varias
simultneamente.
R R)!)R)NCIA )!)R)NCIA 6T13 6T13
)tiHuet FAC 7 F<AC
&as etiquetas LaI y L@aI definen un en$ce0 el te7to o imagen encerrado entre ellas
servir de enlace hacia el destino que marquemos.
E/0 "r a #oog l e
.+digo 12,&0 La hrefRShttp0@@www.google.comSI Enlace a la pgina de #oogleL@aI
El destino es marcado por el modificador 5reD de la etiqueta.
Atri(utos de FAC
5reDIJ===J0 Es necesaria. "ndica la direcci+n *>& a la que se va a saltar al hacer clic
sobre el enlace.
nmeIJ===J: .onvierte al contenido de la etiqueta L;I en un destino $llamado
marcador o punto de ancla'.
tr;etIJ===J: =etermina el marco o ventana de destino donde se abrir el archivo
enla-ado.
tit$eIJ===J: 6pcionalmente podemos aadir un te7to alternativo que se muestra al
posicionar el rat+n sobre el enlace.
Atri(utos de F&ODKC
&a etiqueta LB6=I puede tener tres modificadores que definen el aspecto de los
enlaces de toda la pgina web0
$inLIJ===J: =etermina el color de los enlaces de la pgina Web
#$inLIJ===J: =etermina el color de los enlaces ya visitados de la pgina Web
$inLIJ===J0 =etermina el color general de los enlaces activos $al hacer clicA' de la
pgina Web
I I1:9)N)0 1:9)N)0
!ormtos:
2ormato :I2
El formato #"5 $#raphics "nterchange 5ormat', naci+ en el ao :GX9 de la mano de
.ompuserve con ob/eto de colorear sus imgenes, hasta entonces codificadas en su
formato >&E en blanco y negro. &a versi+n original $#"5X9a' fue sustituida por la #"5XGa.
;ctualmente e7iste un problema de licencias que desaconse/a su uso en favor del formato
3n#. !us caracter4sticas ms importantes son0
Es un formato de compresi+n sin p<rdidas lo que aligera el tamao final del archivo,
manteniendo su calidad.
!e utili-a principalmente para imgenes de colores planos, o sea, grandes
manchas de color homog<neo, sin variaci+n cromtica, al modo de los dibu/os
infantiles.
3ermite StransparenciasS, es decir, seleccionando uno de los colores de la imagen
<ste se vuelve transparente, permitiendo ver a trav<s de <l cualquier fondo, o
imagen que est< situada detrs.
3ermite, con el programa adecuado, crear animaciones presentando varias
imgenes una tras otra como si de un Sdibu/o animadoS se tratara.
*tili-a una paleta de PTW colores como m7imo, lo que nos permite elegir entre
varios tamaos para un mismo archivo.
2ormato D.:
El formato F3# o F3E# $Foint 3hotographic E7pert #roup ', es el ms utili-ado para la
transmisi+n de fotograf4as, naci+ en el ao :GXW. Es un formato muy recomendado para
imgenes con una amplia gama de colores y que permite a/ustar el grado de compresi+n
y por tanto la calidad de la imagen. !us caracter4sticas ms importantes son0
Es un formato de compresi+n con p<rdida0 aligera el tamao final del archivo, pero
le resta calidad.
!e utili-a principalmente para incluir en la web fotograf4as con un elevado n?mero
de colores $traba/a con un formato de :W millones de colores'.
(o permite definir colores transparentes.
(o permite crear animaciones.
.on el formato F3#, podemos escoger el grado de compresi+n, de manera que
cuanto mayor sea la compresi+n mayor es la p<rdida de calidad de la imagen.
.odifica los colores con PV bits, por lo que puede mane/ar una paleta de ms de :W
millones de colores, lo que se llama color verdadero.
2ormatos .N:
3(# $3ortable (etworA #raphics' es un formato grfico basado en un algoritmo de
compresi+n sin p<rdida para bitmaps no su/eto a patentes. Este formato fue desarrollado
en buena parte para solventar las deficiencias del formato #"5 y permite almacenar
imgenes con una mayor profundidad de color y otros importantes datos. !us
caracter4sticas principales son0
Es un formato de compresi+n sin p<rdidas lo que aligera el tamao final del archivo,
manteniendo su calidad.
!oporta formato de color inde7ado $PTW colores' y profundidades de color de VX
bits y escala de grises de :W bits.
3ermite colores transparentes y transparencias graduales.
(o permite crear animaciones, e7iste un formato relacionado para animaciones,
pero est poco e7tendido0 ,(#.
El usuario puede elegir el formato a usar en la codificaci+n de la imagen0 3(#X
$anlogo al #"5' o 3(#PV $PV bits de color' no es adoptado por todos los
navegadores, y a?n menos por las versiones antiguas de los mismos.
ObserEa%!ones:
; la vista de todo lo anterior, cuando integremos imgenes en nuestra pgina deber4amos
tener en cuenta lo siguiente0
=ebemos anali-ar detalladamente el uso de imgenes en nuestra pgina. 1emos
de fi/arnos en su necesidad, resoluci+n, tamao, formato, etc. El ob/etivo es lograr
que la pgina se cargue lo ms rpidamente posible.
El tamao del archivo de imagen depende de las dimensiones de la imagen y del
n?mero de colores que la forman.
3ara colores puros con no ms de PTW colores y grficos muy simples usaremos el
formato #"5 o 3(#.
3ara imgenes con ms de PTW colores usaremos el formato F3# o 3(#PV.
*sar las imgenes con su tamao real, evitando que sea el navegador el
encargado de reducirlas.
(o colocar demasiadas imgenes en una misma pgina. !i necesitamos mostrar
un numero elevado de imgenes, lo me/or es usar una versi+n muy reducida de las
mismas $thumbnails o miniaturas' a modo de 4ndice y enla-ar con pginas
individuales donde se muestre cada imagen por separado.
;l disear la estructura del sitio utili-ar una carpeta para las imgenes muy usadas
a lo largo de las diferentes pginas del sitio.
*sar el atributo ;&2 en las imgenes, para facilitar la comprensi+n del contenido a
los usuarios y a los robots usados por los buscadores para inde7ar nuestra pgina.
Insertr im;en
!e pueden insertar imgenes #"5, F3E#, B,3 y 3(# en una pgina web. 2ambi<n se
pueden utili-ar para . .uando se inserta una imagen, KompoZer guarda la referencia a la
imagen en la pgina.
3asos para insertar una imagen0
:.1acemos clic en el sitio donde queramos que apare-ca la imagen.
P.1acemos clic en el bot+n "magen de la barra de herramientas o abra el men?
"nsertar y seleccione "magen. ;parecer el cuadro de dilogo 3ropiedades de la
imagen.
Q.3odemos escribir la ubicaci+n y nombre del archivo de la imagen o hacer clic en
Elegir archivo... para buscar un archivo de imagen en el disco duro o en red local.
V.; continuaci+n, KompoZer nos permite escribir el te7to alternativo que aparecer
en los navegadores de s+lo te7to y que aparecer en los otros navegadores
mientras se carga la imagen o cuando la carga de imgenes est deshabilitada.
Esta opci+n, si bien no es obligatoria, si es recomendable.
" "RO"I)DAD)0 RO"I)DAD)0 D) 3A I D) 3A I1A9)N 1A9)N ::
*na ve- que insertamos una imagen en la pgina, podremos editar sus propiedades y
personali-ar su diseo, como la altura, anchura, espaciado y alineaci+n del te7to.
3ara editar las propiedades de una imagen seleccionada0
:.1acemos doble clic en la imagen o la seleccionamos y hacemos clic en el bot+n
"magen de la barra de herramientas para visuali-ar el cuadro de dilogo
3ropiedades de la imagen.
)eamos las propiedades de este men?0
"est% U(icci,n:
U(icci,n de $ im;en0 aqu4 escribimos el nombre y ubicaci+n del archivo
de la imagen o hacemos clicA en Elegir archivo... para buscar un archivo de
imagen en el disco duro o red local.
3 UR3 es re$ti# $ rut de $ p/;in0 si est seleccionado KompoZer
convierte la *>& a una direcci+n relativa a la ubicaci+n de la pgina. Esto es
especialmente ?til si planeamos copiar las pginas a un servidor web para
que otra gente pueda verlas. El uso de *>&s relativas permite mantener
todos los archivos vinculados en el mismo sitio relativo al resto
independientemente de la ruta en el disco duro o servidor web.
;l desmarcar esta opci+n KompoZer convierte la *>& a una *>& completa o
absoluta. (ormalmente se utili-an *>&s absolutas cuando se vinculan
imgenes en otros servidores web $cuando no estn almacenadas
localmente en el disco duro'.
TeBto $ternti#o0 como hemos mencionado anteriormente, aqu4
introducimos el te7to que se visuali-ar en lugar de la imagen original, por
e/emplo, un t4tulo o una breve descripci+n de la imagen.
No usr teBto $ternti#o0 seleccionamos esta opci+n si la imagen no
requiere un te7to alternativo o no quiere especificar uno.
"est% Dimensiones:
Tm%o re$0 seleccione esta opci+n para deshacer cualquier cambio hecho
a las dimensiones de la imagen y devolverle a <sta a su tamao real.
Tm%o person$i'do0 seleccionamos esta opci+n para especificar una
nueva altura y anchura, en p47eles o como porcenta/e. Esta configuraci+n no
afecta al archivo original de la imagen, s+lo a la imagen insertada en la
pgina.
1ntener specto0 marcamos esta opci+n para mantener las proporciones
de las imagenes si las vamos a redimencionar, para que estas no apare-can
deformadas. !i se seleccionamos esta opci+n s+lo snecesitamos cambiar la
altura o la anchura, pero no ambas.
"est% Aprienci:
)spcido0 especificamos aqu4 la cantidad de espacio del contorno de la
imagenD el espacio entre la imagen y el te7to cercano. 2ambi<n podemos
colocar un borde negro s+lido en el contorno de la imagen, especificando la
anchura en p47eles. .olocamos cero si no quiere borde.
A$iner e$ teBto con $ im;en0 si colocamos la imagen al lado de un te7to,
seleccionamos esta opci+n para indicar c+mo se desea que se posicione el
te7to en relaci+n con la imagen.
1p de im;en0 hacemos clic en Eliminar para borrar cualquier
configuraci+n de mapa de imagen. 1asta la versi+n actual, Kompo-er no
permite reali-ar el mapeo de imagenes de forma simple, solo mediante los
atributos correspondientes.
"est% )n$ce:
Introdu'c un u(icci,n de p/;in .e(0 si queremos definir un enlace a
la imagen, introducimos la *>& de una pgina remota o local, o
seleccionamos un enlace interno o encabe-ado de la lista desplegable.
2ambi<n, podemos pulsar en Elegir archivo para buscar un archivo de
imagen en el disco duro o en la red local.
3 UR3 es re$ti# $ u(icci,n de $ p/;in0 si la marcamos, KompoZer
convertir la *>& a una relativa a la ubicaci+n de la pgina.
=esmarcar esta casilla provoca que KompoZer convierta la *>& a una
direcci+n completa $absoluta'. (ormalmente se usan *>&s absolutas
cuando se enla-a a pginas en otros servidores web $no almacenadas
localmente en su disco duro'.
1ostrr (orde $rededor de $ im;en0 si se marca, aparecer un borde
del color elegido para los enlaces en torno a la imagen.
Otrs opciones:
3ara aplicar atributos adicionales o eventos Fava!cript, hacemos clic en Edici+n
avan-ada... para visuali-ar el editor avan-ado de propiedades.
1acemos clic en ;ceptar para confirmar los cambios.
I IN0)RTAR N0)RTAR UNA UNA I1A9)N I1A9)N CO1O CO1O !ONDO !ONDO
;hora colocaremos una imagen de fondo de pgina. 3ara ello pinchamos sobre la pgina
en !ormto < Co$ores 7 Dondo de p/;in.
&uego, en el cuadro de dilogo que se nos muestra elegimos la secci+n de Im;en de
!ondo y pinchamos en el bot+n )$e;ir rc5i#o.
.omo hemos visto antes, la primera ventana que se nos abre es en la que aparece
nuestra Web. =entro de la carpeta Mim/;enesM seleccionamos el archivo que deseemos

tener como fondo de pgina.
En la siguiente ventana se comprueba que el archivo seleccionado se ha tomado de la
carpeta im/;enes y el archivo responde al nombre de prue(=pn;N tiene una *>&
relativa, lo que es preferible a la absolutaD luego se pulsa Aceptr.
!i la imagen es ms pequea que la -ona de visuali-aci+n de una pgina $como en esta
imagen elegida para el fondo', la repite en forma de mosaico ocupando toda la pantalla.
3or eso las imgenes de fondo siempre hay que seleccionarlas bien para que no dificulten
la lectura del te7to. Esto mismo que hemos descrito para el fondo de la pgina sirve para
el fondo de una tabla que pongamos en ella.
R R)!)R)NCIA )!)R)NCIA 6T13 6T13
)tiHuet FI19C
=etermina la locali-aci+n de una imagen. (o tiene cierre.
;tributos de la etiqueta L",#I0
src IJ===J: >uta origen para locali-ar el archivo de la imagen. $source@fuente'.
$tIJ===J0 2e7to alternativo que aparece en lugar de la imagen si el navegador no
puede mostrar la imagen. 2ambien es mostrado al colocarnos sobre la imagen en
un letrero amarillo.
.idt5IJ===J0 Establece el ancho de la imagen.
5ei;5tIJ===J: Establece el alto de la imagen.
(orderIJ===J: ,uestra un marco con el n?mero de pi7eles deseado.
$i;nIJ===J: ;linea la imagen respecto al te7to.
)tiHuet F1A"C 7 F<1A"C
&a etiqueta map permite crear un mapa de imagen con diferentes -onas de manera que,
al pulsar sobre ellas, se enla-a a diferentes destinos. .ada mapa de imgenes se
determina con un nombre $atributo nmeIJ===J'. Entre la apertura y el cierre se definen las
areas del mapa por medio de la etiqueta FAR)AC 7 F<AR)AC que tiene a su ve- estos
atributos0
s5peIJ===J 0 5orma del rea de enlace0 circular, rectangular, o poligonal.
coordsIJ===J 0 .oordenadas de locali-aci+n del rea en la imagen.
5reDI J===J 0=irecci+n del enlace.
Atri(uto (cL;round de &ODK
E7isten dos modificadores de body para definir el fondo de una pgina0 su color $Lbody
bgcolorRSU555555S I' o una imagen de fondo $F(od7
(cL;roundIJim;enDondo=Op;JC'.
)tiHuet O(Oect
3ara incluir ficheros no estandar $pel4culas 5lash, v4deos o sonido' dentro de una pgina
se utili-an dos etiquetas combinadas, o(Oect para "nternet E7plorer y em(ed para
(etscape.
.ada ve- ms, el v4deo y el sonido son componentes integrales de los sitios Web
comerciales. *tili-ando s+lo etiquetas 12,& estndar podemos agregar funcionalidad
multimedia atractiva a las pginas Web. 3or e/emplo, para incrustar un clip de v4deo en
una pgina Web, podemos utili-ar tambi<n otro tipo de etiqueta.
)tiHuet D7nsrc
simplemente el atributo =(!>. de la etiqueta 12,& L",#I0
L",# =(!>.RS,i)ideo.aviS I
El clip de v4deo ,i)4deo.avi se reproduce despu<s de que el usuario cargue una pgina
Web que contenga esta etiqueta.
.on 12,& tambi<n podemos crear v4nculos a gran n?mero de formatos de archivo,
incluidos los de ,icrosoft 6ffice. 3ara que los usuarios puedan ver estos formatos, deben
tener e7ploradores Web capaces de ver archivos que no sean 12,&. 3or e/emplo, si
sabes que todos los usuarios de una intranet tienen ,icrosoft$r' E7cel y ,icrosoft$r'
"nternet E7plorer versi+n Q.8 o posterior, podremos crear v4nculos con una ho/a de clculo
de E7cel desde el sitio Web. .uando el usuario hace clic en el v4nculo, el documento
aparece en formato de E7cel dentro del e7plorador Web del usuario. Este es un buen
m<todo que puede utili-ar para crear sitios Web que compartan y distribuyan
documentaci+nD de esta forma ayuda a traba/ar efica-mente.
T TA&3A0 A&3A0
Introducci,n
&as tablas no solo son ?tiles para mostrar listas de datos, son tambi<n un elemento
primordial para maquetar las pginas web, o sea, para colocar con cierta libertad los
elementos que forman la pgina web. &as tablas nos permiten organi-ar y distribuir los
espacios de una manera +ptima. 3or e/emplo no permite poner el te7to en columnas como
en los peri+dicos, prefi/ar los tamaos ocupados por distintas secciones de la pgina o
poner de una manera sencilla un pie de foto a una imagen. En el momento en que
queremos mostrar pginas webs atractivas y fciles de leer nos veremos en la necesidad
de utili-ar las tablas.
Descripci,n de $s t($s
3odemos definir a una tabla como un con/unto de espacios organi-ados en filas y
columnas. &a intersecci+n de las filas se llaman celdas. *na cuadr4cula es una tabla, en
cuyas celdas podemos poner cualquier elemento 12,&, desde te7to hasta imgenes y
otros elementos multimedia. ;lgunos atributos propios de las tablas son0
A$to 7 nc5o 2eigt 7 !idt40 pueden medirse en pi7els o en porcenta/e del
elemento contenedor $widthR S:88ES indica que ocupa el ancho del elemento en el
que est colocada.
&order 2(orde4 0 ;nchura del borde que rodea a la tabla. !i es 8 el borde no se ve
cellpadding 2re$$eno40 margen del contenido de cada celda. !e mide en pi7els.
cellspacing 2espcido40 espacio entre las celdas. !e mide en pi7els.
Crer T($s
3ara insertar una tabla mediante KompoZer, tenemos tres posibilidades0
*sar el (ot,n t($ de la barra de botones0
*sar el men? Insertr y opci+n T($0
*sar el men? T($ con la opci+n insertar
DeDinir $ t($
;l insertar la tabla nos aparece un cuadro de dilogo que nos permite definir las
caracter4sticas de la tabla. En <l encontramos tres pestaas0 &a primera de ellas es
$pido, es la opci+n por defecto y nos permite dimensionar la tabla de manera grfica.
3ara ello despla-amos el cursor con el rat+n por la cuadr4cula. *na ve- tengamos la
distribuci+n que nos interesa, hacemos clic y tendremos la tabla insertada en la pgina.

"reciso en esta pestaa podremos escribir directamente el n?mero de filas y
columnas de que constar nuestra tabla.
!i$s0 escribimos el n?mero de filas que tendr nuestra tabla.
Co$umns0 lo mismo, pero para el valor de las columnas.
Anc5ur0 ancho de la tabla. 3odremos colocarlo en p47eles, o en el
porcenta/e del espacio que ocupar la tabla dentro del elemento donde se
encuentre insertada.
&orde0 #rosor en p47eles que tendr la l4nea que forma el borde de la tabla,
si queremos que sea %invisible% , daremos al borde el valor cero.
Ce$d, en ella podemos aadir ms detalles a los elementos que vayan en el
interior de las celdas de nuestra tabla0
A$ineci,n 6ori'ont$0 indicaremos si irn sin alineaci+n, alineados a la
i-quierda, al centro, o a la derecha, seg?n eli/amos del men? desplegable.
A$ineci,n -ertic$, que puede ser, sin alinear, arriba, al centro, o aba/o,
seg?n el valor que eli/amos del men? desplegable
,arcando el apartado "#ustar, permitiremos que el te7to introducido en la
celda ocupe varias l4neas, si deseamos que todo el te7to se muestre en una
sola l4nea, marcaremos &o a'ustar .
En el apartado )spcio entre $s ce$ds introduciremos el valor en p47eles
que queremos que haya entre las celdas.
En el apartado Re$$eno de $s ce$ds, el valor en p47eles que habr entre
los bordes de la celda y su contenido.
1odiDicr t($s
=espu<s de insertar la tabla en nuestra pgina podemos modificar sus caracter4sticas
mediante el cuadro de dilogo Spropieddes de t($S. Este cuadro nos permite por una
parte modificar las propiedades generales de la tabla y por otra las propiedades de las
celdas. 3ara usarlo la tabla o las celdas han de ser previamente seleccionadas.
!eleccionar una tabla o sus elementos es tan sencillo como colocar el cursor dentro de
$ t($ $hacer clicA con el (ot,n i'Huierdo de$ rt,n dentro de la tabla' y a continuaci+n
desplegar el men? Tabla y elegir la opci+n (eleccionar, dentro de ella tenemos todos los
elementos de la tabla seleccionables0 Tabla, Fila, !olumna, !elda, Todas las celdas.
2ambi<n podemos llevar a cabo esta operaci+n pulsando sobre la tabla con el bot+n
derecho del rat+n dentro de la tabla. Esto nos ofrecer la opci+n (eleccionar Tabla)
"ropieddes de $ t($
*na ve- seleccionada la tabla debemos abrir el dilogo de propiedades. Esto se consigue
mediante cualquiera de los tres m<todos0
El bot+n derecho del rat+n
El men? Tabla
El bot+n tabla de la barra de men?s
.ualquiera de estas opciones nos lleva al cuadro de dilogo propiedades de la tabla en el
que vemos claramente diferenciados cuatro apartados0 el tamao, los bordes y el
interlineado, la alineaci+n, y el color de fondo.


En el apartado Tm%o, podemos modificar tanto el n*mero de +ilas como el de
columnas introduciendo los valores en las casillas correspondientes. 2ambi<n es
posible modificar la altura y anchura de la tabla, especificando el valor absoluto en
p47eles o el valor relativo en tanto por ciento de la ventana donde se mostrar la
tabla.
El segundo apartado permite modificar el grosor del borde e7terno de la tabla, del
espaciado entre las celdas de la tabla y tambi<n el relleno o espacio que hay entre
los bordes de la celda y su contenidoD todo ello e7presado en p47eles.
En el tercer grupo modificaremos la alineacin de la tabla, que puede ser a la
"-quierda, en el .entro, o a la =erecha del elemento o ventana donde tengamos la
tabla. 2ambi<n podemos reservar un espacio encima, deba/o, a la derecha o a la
i-quierda de la tabla para posteriormente, una ve- cerrada la ventana de
propiedades, ponerle un Ttulo a la tabla.

El ?ltimo de los apartados nos permite poner color al fondo de la tabla, para ello
pulsamos en el rectngulo y se nos abre la ventana donde elegir el color.
a hemos aprendido con anterioridad a utili-ar este cuadro de dialogo, si a?n tienes
dudas, te recomendamos volver al primer apartado, en donde se e7plica su utili-aci+n...
En nuestro e/emplo la tabla tendr4a un aspecto como este0
"ropieddes de $ ce$d
=e forma similar a como modificamos las propiedades de las tablas podemos modificar
las propiedades de celdas individuales. !e usa un cuadro de dilogo parecido al de las
propiedades de tabla y al que se accede de manera similar. 3icamos con el bot+n
i-quierdo sobre la celda que vamos a modificar y luego seguimos uno de los siguientes
m<todos0
El bot+n derecho del rat+n en la celda
En el men? Formato, -ropiedades de !elda de Tabla
El bot+n tabla de la barra de men?s
!ea cual sea el m<todo usado llegaremos a un cuadro de dilogo con las propiedades
que podemos modificar en la celda seleccionada. El cuadro se parece bastante al usado
en propiedades de 2abla. ;qu4 podemos modificar cinco apartados0 &a selecci+n, el
tamao, la alineaci+n, el estilo y a/uste, y el color de fondo.



En el apartado 0e$ecci,n encontramos un men? desplegable para indicar si las
modificaciones que vamos a reali-ar se van a aplicar s+lo a la celda seleccionada,
a la fila o a la columna donde a la que pertenece esa celda $como si hubi<ramos
seleccionado toda la fila o toda la columna'
El apartado Tm%o funciona igual que las propiedades de la tabla, pudiendo
introducir en altura y anchura los valores de tamao absoluto en p47eles o relativos
en E sobre el tamao de la tabla. 6/o el alto de la celda afecta a toda la fila y el
ancho a toda la columna.
&a A$ineci,n del contenido nos permite dos opciones0
A$ineci,n #erticl, en la que el contenido de la celda puede situarse en la parte
superior, en el centro, o en la parte inferior de dicha celda.
A$ineci,n 5ori'ont$, en la que el contenido puede ser situado a la i-quierda, en
el centro, a la derecha, o /ustificado por igual a ambos bordes laterales de la tabla.
A!nea%!ones
IFGu!erda Centro Dere%<a
'uper!or
8ed!o
In*er!or
En cuanto al estilo de celdas tenemos dos posibilidades, celdas norm$es, que
sern la mayor4a de las celdas de la tabla, y celdas c(ecer $suele aplicarse a la
primera fila o la primera columna' cuyo contenido aparecer en mayor tamao y en
negrita.
El apartado ;Ouste del te7to ofrece dos opciones, una que el te7to ocupe en la
celda una sola l4nea, sin importar su longitud, o que ocupe varias l4neas dentro de
la misma celda de forma automtica
El ?ltimo de los apartados corresponde a la posibilidad de cambiar los !olores de
+ondo de las celdas, ya sea de forma individual, o combinndolo con el apartado
seleccin, hacerlo por filas o por columnas, seg?n el diseo que hayamos pensado
para nuestra tabla. !u uso es similar al que hemos visto en propiedades de tabla.
O OTRA0 TRA0 11ODI!ICACION)0 ODI!ICACION)0
*na tabla puede modificarse tambi<n en cuanto a su definici+n e incluso en su
cuadriculado aspecto, es lo que les da su gran fle7ibilidad. ;s4 podemos0 la insertar y
eliminar de tablas, filas, columnas o celdas y la uni+n o divisi+n de celdas.
Insertr e$ementos
;lgunas de las operaciones que solemos reali-ar con las tablas no implican
necesariamente el uso de la pantalla de propiedades de la tabla o celda, sino que estn
disponibles directamente en algunos men?s, por e/emplo0 inserci+n o eliminaci+n de una
tabla completa, de una fila, de una columna o incluso de celdas individuales $no
recomendable'.
3ara insertr un Di$ en un t($ 7 cred, basta con hacer clic con el bot+n derecho
del rat+n sobre una celda cualquiera de la fila que hayamos elegido, y en el men?
emergente, dentro de la opci+n Insertar tabla))., marcar la opci+n Fila superior, o Fila
in+erior. 6 tambi<n, si el cursor est en la tabla, podemos usar el men? 2abla de la barra
de men?s y en la opci+n "nsertar elegir 5ila superior o inferior como en el caso anterior. ;l
insertar una fila podemos ponerla por encima o por deba/o de la fila en la que se
encuentre el cursor de edici+n en el momento de abrir este dilogo.
=e la misma forma debemos proceder para insertr co$umns, solo que ahora las
columnas se pueden insertar a la i-quierda del cursor $columna anterior' o a su derecha
$columna siguiente'.
"ncluso podemos insertar una t($ comp$et dentro de un ce$d. ;l seleccionar esta
opci+n $Insertr T($ < T($...' nos aparecer el ya conocido men? de inserci+n de
tablas, que ya se ha visto en esta misma unidad. Y6bservas ahora su utilidadZ

)$iminndo e$ementos
=e la misma forma que insertamos filas o columnas o celdas en una tabla podemos
eliminarlas, y podemos igualmente eliminar una tabla entera. El procedimiento es para
borrar tablas y sus elementos es uno de los siguientes0
1acemos clic con el (ot,n derec5o del rat+n en cualquier punto del interior de la
tabla y en el men? emergente elegimos la opci+n )$iminr t($ y dentro de <sta,
lo que queremos borrar.
!eleccionar previamente la tabla, y despu<s de desplegar el men? T($, elegir la
opci+n )$iminr y dentro de <sta, lo que queremos borrar.
Com(inndo ce$ds
Es posible unir un grupo de celdas contiguas y que <stas compartan su contenido. 3or
e/emplo podemos crear una cabecera de tabla uniendo o combinando todas las celdas de
la primera fila. ;lgo parecido podr4amos hacer para ponerle un pie a la tabla. &a opci+n de
combinar varias celdas en una sola permite organi-ar el contenido de la pgina web casi
en cualquier forma.
El proceso para unir celdas comien-a seleccionando varias celdas contiguas, para ello
arrastramos el rat+n sobre ellas con el bot+n i-quierdo pulsado. ; continuaci+n tenemos
dos m<todos
3ulsamos con el (ot,n derec5o del rat+n eligiendo en el men? emergente la
opci+n Unir ce$ds se$eccionds.

=esplegamos el men? T($ y elegimos unir ce$ds se$eccionds.
&as celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda
combinada y seguir una de las habituales caminos0
.on el bot+n derecho se despliega el men+ y se elige Di#idir ce$d
.on el men? T($ se elige la opci+n Di#idir ce$d=
C CU)0TION)0 U)0TION)0 D) D D) DI0)PO I0)PO
.omo ya lo hemos dicho, las tablas son una importante herramienta para la maquetaci+n
de los contenidos dentro de una pgina.
; efectos de diseo podemos diferenciar dos tipos de tablas0
T($s contenedors0 !e utili-an para alinear contenidos con respecto a la pgina
y no suelen llevar bordes.
T($s de dtos0 !uelen ser anidadas $dentro de las contenedoras'. !on las que
estructuran el contenido en s4, es decir, los te7tos, las imgenes, etc.
Ac$rci,n: ;l utili-ar tablas contenedoras que utilicen todo el ancho de la pgina $:88E
de ancho y alto' hay que tener en cuenta que la pgina tiene un ,;>#E( superior e
i-quierda... y ese mr;en supondr/ un espcio entre $ t($ 7 e$ $imite de $ p/;in
en e$ n#e;dor=
!i queremos que esa tabla ocupe re$mente e$ QRRS de nuestra pgina tendremos que
eliminar cualquier tipo de margen aplicando como #$or de mr;en R en el cuadro de
3ropiedades de pgina.
Reso$uciones de pnt$$=
&a resoluci+n de pantalla del ordenador responde a la cantidad de p47eles que se
visuali-a a lo ancho y alto. &a resoluci+n normal suele ser de TRR B URR p@Be$es.
!i algo en nuestra pgina Web supera los X88 p47eles de ancho, el navegador reproducir
un scroll hori-ontal, lo cual resulta antiest<tico.
2ambi<n es conveniente que una pgina web se vea bien en resoluciones superiores
$QRVW B XUT p@Be$es'.
Esto suele ser problema de las tablas de ancho en porcenta/e $E', relativo al ancho de la
ventana de documento. ;l variar la resoluci+n var4a el ancho de la ventana de documento.
)eamos a continuaci+n como superar este imprevisto0
0o$uci,n: 2raba/ar con tablas contenedoras con ancho relativo $E' y tablas de datos de
ancho absoluto $p47eles'.
:.El contenido de la pgina $te7to, imgenes,...' se disea en una tabla de ancho
absoluto $en p47eles'. =e esta forma el diseo de esta tabla no variara de una
resoluci+n a otra.
P..rear una tabla contenedora sin bordes de :88E de ancho y de alto, de solo una
celda. Esta tabla ocupar toda la pantalla en cualquier resoluci+n.
Q."nsertar la tabla con valor absoluto $en p47eles' dentro de la celda de la tabla
contenedora. &a alineaci+n de esa celda nos permitir colocar la tabla del
contenido en la -ona deseada.


) )ATRA ATRA : R : R)!)R)NCIA )!)R)NCIA 6T13: 6T13:
)tiHuet FTA&3)C
El elemento bsico dentro del cual se desarrolla la tabla son las etiquetas FTA&3)C 7
F<TA&3)C. =entro de la etiqueta de tabla se definen las Di$s por medio de las etiquetas
FTRC 7 F<TRC. finalmente, dentro de la etiqueta de las filas se definen las celdas que
tiene por medio de la etiqueta FTDC 7F<TDC. El n?mero de celdas de una fila dar el
n?mero de columnas de la tabla. E7iste un tipo de celdas, las celdas de encabe-ado, que
se definen con las etiquetas FT6C 7 F<T6C. El te7to que contienen estas celdas estar
destacado y centrado en la tabla.
E/emplo bsico0 *na tabla de dos filas y tres columnas. &a tabla tiene P88 pi7els de ancho
y el borde de la tabla es de un p47el.
)
9
.
Atri(utos de FTA&3)C
&ORD)R0 =ibu/a bordes alrededor de las celdas. !e puede utili-ar con el valor en
p47eles que se desee. El grosor del borde solo afecta al borde e7terior de la tabla,
no afecta al borde interior de las celdas.
C)330"ACIN9IF#$orC0 .ontrola en p47eles el espacio entre celdas.
C)33"ADDIN9IF#$orC0 .ontrola en p47eles el espacio entre los datos de las
celdas y los bordes internos de las mismas.
8IDT6IF#$or o porcentOeC0 ;nchura que tendr la tabla en valor absoluto o con
tanto por ciento respecto al documento 12,&.
6)I96TIF#$or o porcentOeC0 ;ltura que tendr la tabla en valor absoluto o con
tanto por ciento respecto al documento 12,&.
A3I9N0 ;linea hori-ontalmente la tabla con respecto al documento 12,&.
&9CO3OR0 3ermite especificar el color de fondo de la tabla.
&ORD)RCO3OR0 3ermite especificar el color de los bordes de la tabla.
&ACK9ROUND0 3ermite introducir una imagen de fondo.
&a etiqueta L2=I, que define las celdas, tiene los mismos atributos, e7ceptuando
cellspacing y cellpadding.
;dems, la etiqueta L2=I tiene atributos propios como co$spn y ro.spn que se
utili-an para combinar la celda con otras adyacentes.
1 1ARCO0 ARCO0
Introducci,n:
&os frames $marcos o cuadros' permiten dividir la ventana en varias ms pequeas, de
modo que en cada una de ellas se carga una pgina html distinta. &as versiones ms
antiguas de los navegadores no tienen implementada esta caracter4stica, por lo que no
podrn verlos.
3ara crear una pgina con frames, tendremos que hacerlo desde el modo c+digo,
tecleando sentencias 12,&, ya que (vu @ KompoZer aun no esta preparado para traba/ar
con frames. ; continuaci+n, e7plicaremos los conceptos bsicos para poder aplicarlos, en
el apartado >eferencia 12,&. .uando se utili-an frames es muy habitual usar el atributo
target en la etiqueta que define un v4nculo $L;I', con este atributo especificaremos en
que frame debe cargarse el destino del vinculo, es decir, la pgina vinculada.

R R)!)R)NCIA )!)R)NCIA 6T13 6T13
)tiHuets F!RA1)0)TC 7 F!RA1)C
&a pgina del con/unto de marcos es la que contiene el c+digo 12,& con la estructura de
los marcos. =ivide la pantalla en secciones rectangulares $marcos' donde se van a
mostrar pginas independientes.
)eamos un e/emplo de una pgina bsica elaborada con frames0
HFtmlI
HFeadI
HtitleI&rue!a FramesHJtitleI
HJFeadI
H@rameset rosPQ5EARQ colsPQRQ I
H@rame srcPQdocumento.FtmQ namePQca!eceraQ scrollin'PQ56Q noresiOe I
H@rameset colsPQ)5EARQ I
H@rame srcPQ .'oo'le.esQ namePQ'oo'leQI
H@rame srcPQiLipedia.esQ namePQiLiQI
HJ@ramesetI
HJ@ramesetI
Hno@ramesIH!odBI6oopsSA tu na,e'ador no soporta @rames...HJ!odBIHJno@ramesI
HJFtmlI
&as etiquetas F!RA1)0)TC===F<!RA1)0)TC indican d+nde empie-an y d+nde acaban
los marcos, y el tipo y forma de estos. Entre una y otra irn las definiciones de los
diferentes marcos o frames. &as etiquetas F!RA1)C representan los marcos y sus
atributos $pgina web que contienen, mrgenes, scroll, etc.'
El body de la pgina est vac4o, no tiene contenido. &as pginas de definici+n de marcos
no nos interesan por su contenido, LbodyI, ya que s+lo van a actuar de contenedor. (o
es necesario que apare-ca la etiqueta LbodyI, pero es ?til mantenerla0 las etiquetas
FNO!RA1)0C F<NO!RA1)0C determinan el contenido de la pgina de marcos si se
abre con un navegador que no permite visuali-ar marcos.
Tod p/;in .e( con mrcos se compone de:
*na p/;in de conOunto de marcos.
"/;ins pr cr;r en cada marco creado.
Atri(utos de F!RA1)0)TC
co$sIJ===J0 =efine el n[ de columnas o marcos verticales que va a tener la ventana,
y el ancho de cada uno de ellos.
ro.sIJ===J0 =efine el n[ de filas o marcos hori-ontales que va a tener la ventana, y
el alto de cada uno de ellos.
Drme(orderIJ===J0 =efine si los marcos creados van a tener borde o no.
(orderIJ===J0 En el caso de que se haya establecido Drme(orderIJ===J o no se
haya especificado, este atributo nos permite definir el grosor del borde
(orderco$orIJ===J0 Establece el color de los bordes de los marcos
Atri(utos de F!RA1)C
nmeIJ===J0 ;signa un nombre al marco para diferenciarlo. Este nombre cobrar
importancia a la hora de determinar en que marco queremos que se abra un
enlace, es decir , el destino de los enlaces.
srcIJ===J0 Especifica qu< pagina se va a cargar en el frame. &a ruta de la pagina
debe especificar su locali-aci+n en el sitio web o una *>& completa.
scro$$in;IJ===J0 Establece si el marco tendr o no barra desli-adora cuando el
contenido del marco e7ceda al tamao de este.
noresi'e0 impide que el marco pueda ser redimensionado por el visitante
arrastrando su borde. !i no se indica este atributo el marco podr ser
redimensionado.
mr;in.idt5IJ===J0 =efine el margen hori-ontal que queremos que haya dentro del
frame, entre los l4mites de este y su contenido.
mr;in5ei;5tIJ===J0 =efine el margen vertical que queremos que haya dentro del
frame, entre los l4mites de este y su contenido.
(orderco$orIJ===J0 !irve para definir el color del borde del marco concreto al que se
aplica.
! !OR1U3ARIO0 OR1U3ARIO0
3ara crear formularios con KompoZer, abriremos el programa e iremos a la opci+n
Insertr @ !ormu$rio< DeDinir Dormu$rio.
Entonces aparecer la ventana "ropieddes de$ Dormu$rio:
>ellenaremos los datos del Nom(re de Dormu$rioD en el campo UR3 de $ cci,n
pondremos en principio0 http,..+orms)melodyso+t)com ya configuraremos el servicio para
que env4e las encuestas que hagamos a los usuarios de nuestra web a un correo
determinadoD en m<todo seleccionaremos la opci+n "O0T, es decir... EnviarD finalmente,
pulsamos Aceptr.
"nmediatamente veremos que el programa ha creado un rea punteada, como una celda
de tabla de color celeste. Esto nos indica que el formulario est creado con el m<todo de
recogida de datos que le hemos especificado. =entro de ese rea comen-aremos a
colocar los elementos que nos permitirn recopilar los datos que consideremos de inter<s
para nosotros sobre los visitantes a nuestra web.
3ara comen-ar a crear los botones y los te7tos que nos servirn para recopilar
informaci+n haremos lo siguiente. 1acemos clic con el rat+n dentro de ese rea punteada
en celeste, escribimos por e/emplo (ombre y seleccionamos la opci+n Insertr<
!ormu$rio< Cmpo de !ormu$rio= >ellenaremos la ventana que nos salga con los
siguientes datos0 elegiremos un cmpo de teBto, lo nombraremos a efectos de poder
reconocerlo posteriormente en el formulario y pulsaremos ceptr.


(uestro formulario ir adquiriendo esta apariencia.
3osteriormente podemos repetir la operaci+n para agregar otro campo que sea apellidos y
direcci+n de email. >epetimos la misma operaci+n anterior y nombramos a cada una
seg?n el dato que queramos recopilar.
2ras estos datos podremos colocar items para que el visitante eli/a una entre varias
opciones o varias a la ve- .olocamos la pregunta /0u1 te parece esta 2eb3 y

aadiremos los siguientes items, cada uno con su opci+n0
3ara conseguir estos items, recurriremos a Insertr< !ormu$rio< Cmpo de
!ormu$rio y en el tipo elegiremos csi$$ de #eriDicci,n.
; cada una de las casillas le asignamos el mismo nombre que pongamos en el formulario,
en este caso son opiniones sobre nuestra web.

=e forma que nuestro formulario va adquiriendo esta presencia0
3ara acabar este sencillo formulario podemos colocar un cuadro de te7to para que
nuestro visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le
solicitemos. &a mecnica para el cuadro de te7to ser4a la siguiente0 Insertr< !ormu$rio<
:re de TeBto

&as propiedades de este rea de te7to sern las siguientes0
lo que obtendremos ser algo parecido a esto0
5inalmente solo quedar insertar los botones que harn posible que el visitante env4e el
formulario o limpie la informaci+n del mismo por si se arrepiente de enviarlo o por si se
equivoca en la consignaci+n de alg?n dato. 3ara insertar los botones haremos lo
siguiente0 Insertr< !ormu$rio @Cmpo de !ormu$rioD seleccionaremos la opci+n
(ot,n de en#@o y bot+n de restablecimiento posteriormente, de forma que completemos
el formulario. ; cada uno de los botones pondremos sus propiedades.


El formulario quedar de esta manera0


En formato html este e/emplo resultar4a as4.
C CA"A0 A"A0
Introducci,n
*na capa es un contenedor que tiene la peculiaridad fundamental de poder siturse en
cu$Huier punto de nuestra pgina Web.
*na capa puede contener cualquier elemento 12,&, te7to, tablas, imgenes, incluso
otras capas.
2ambi<n podemos superponer variar capas, de tal manera que la capa que est por
encima ocultar a la de aba/o.
6tra propiedad de las capas es la #isi(i$idd, como consecuencia de un evento,
podemos mostrar u ocultar el contenido de una capa.
3or todas estas caracter4sticas, las capas tienen dos utilidades fundamentales0
:.!ervir de contenedors para situar una parte de documento en cualquier posici+n
de la pgina.
P..on la ayuda de c+digo Favascript que se desencadena por eventos, permitir
eDectos din/micos, por e/emplo men?s desplegables, te7tos que aparecen al
situar el rat+n sobre un enlace, te7tos que se mueven siguiendo al puntero del
rat+n, etc.
En esta lecci+n e7plicaremos el uso bsico de las capas como elementos contenedores.
R R)!)R)NCIA )!)R)NCIA 6T13 6T13
)tiHuets DI- 7 0"AN
&as etiquetas 12,& que permiten el uso de las capas son DI- y 0"AN. 2odas las
etiquetas 12,& comprendidas entre las correspondientes etiquetas de apertura y cierre
configuran la capa.
&a etiqueta =") dispone del modificador id que permite dar un nombre a la capa. =ar un
nombre a una capa es fundamental para que los programas Favascript puedan acceder a
la misma.
&as caracter4sticas de la capa se establecen con un estilo $st7$e' dentro de la etiqueta =")
de apertura.
El uso de la etiqueta =") y !3;( es similar, la diferencia es que la etiqueta =") genera un
salto de l4nea anterior y posterior a su contenido, mientras que la etiqueta !3;( no. &a
etiqueta !3;( se utili-a para, por e/emplo, crear una capa que contenga algo y se alinee
entre dos palabras de un prrafo.
Crear %apas
En KompoZer crearemos capas mediante el bot+n .apa, es recomendable seleccionar
primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho bot+n.
Funto a este bot+n aparecen dos que nos ayudaran a definir la profundidad de la capa, es
decir, colocarla arriba o deba/o de otra. =entro de las capas podemos incluir otras capas,
imgenes, te7to formateado, tablas\etc e incluso definirlas con un color de fondo o
imagen de fondo.
El problema es que KompoZer aun no esta preparado totalmente para traba/ar con capas,
por lo que su uso puede resultar frustrante. =esde el men? !ormto podemos activar la
ReOi$$ de posicionamiento que nos ayudara a mover las capas y colocarlas ms
precisamente donde deseemos.

En este apartado, KompoZer puede resultarnos bastante incompleto frente a las demas
alternativas, pero a?n as4, veamos como crear y modificar una capa0
:..reamos alg?n contenido para no crear una capa vac4a0
P.!eleccionamos el mismo, y pulsamos sobre el bot+n 4!apa5,
Q.;hora, podremos modificar el tamao de la misma, as4 como el contenido,
mediante la interfa- grfica0
.omo podemos ver, al arrastrarla, nos ofrece informaci+n acerca del tamao de la
misma, esto nos permitir a/ustar el tamao de la misma.
V.;hora, dentro de la misma, podremos insertar todo el contenido que deseemos, tal
y como hemos aprendido a lo largo de este tutorial0
o, por e/emplo, he insertado una imagen.
1asta ;qu4, hemos aprendido a crear la capa, y a introducir el contenido deseado dentro.
,i recomendaci+n es continuar leyendo este tutorial, ya que para aplicarle propiedades a
los distintos elementos de las mismas, es necesario crear estilos .!!, los cuales
estudiaremos en el siguiente apartado, ya que no e7iste, de momento, ning?n men? que
nos permita definir las caracter4sticas de las capas ni de sus elementos de forma directa..
C00 C00
6O*A0 D) )0TI3O
Introdu%%!&n
)amos a ver qu< son las ho/as de estilos y c+mo usarlas para dotar a los documentos que
creemos de una apariencia personali-ada. Es importante que sepamos que para poder
sacarles todo el partido posible a las ho/as de estilos, tenemos que tener ciertos
conocimientos del lengua/e 12,&. ;s4 que no est de ms tener a mano un manual
bsico de 12,&.
*na ho/a de estilos o .!! $$Cascade Style Seet$', es un con/unto de reglas y
caracter4sticas que, aplicadas a una pgina web o a un con/unto de ellas, pueden
modificar su apariencia. =e esta forma, podemos separar en cierta forma el diseo de la
pgina de su contenido. #racias a las ho/as de estilos podemos de alguna manera
homogenei-ar y automati-ar el traba/o que supone el diseo de una Web. 3odemos
definir un estilo para los t4tulos y otro para el te7to, de forma que no tengamos que
modificar cada ve- el te7to y los t4tulos para que tengan la apariencia que queramos.
*na ho/a de estilos puede estar contenida en la misma pgina donde se utili-a o puede
estar definida en un archivo aparte. =e la segunda forma, podemos definir estilos para
todo el sitio web, mientras que de la primera tendremos que escribir el mismo c+digo en
cada pgina cada ve- que lo necesitemos. 3or eso la primera se utili-a cuando se quiere
aplicar alg?n efecto en particular y la segunda cuando ese efecto es el mismo para todas
las pginas. E7iste una tercera posibilidad, y es especificar el estilo en la propia etiqueta
12,& d+nde queramos usarlo, con lo que el efecto s+lo se producir en ese lugar. Esto
implica conocer c+digo 12,& y las propiedades que queramos cambiar. Esto tendr4amos
que repetirlo para cada elemento del te7to cuyo estilo deseamos cambiar. 3or ello, al ser
poco eficiente, se usa la primera forma o la segunda, antes mencionadas. Estas formas
tambi<n requieren conocer 12,&.
3or ello KompoZer nos facilita el uso de estilos por medio de las plantillas, que nos
permite usar ho/as de estilo con pocos conocimientos de 12,&.
R)!)R)NCIA 6T13 R)!)R)NCIA 6T13
Introducci,n
&as 1o/as de estilo en cascada o esti$os C00 $.ascade !tyle !heet' permiten controlar el
diseo y el aspecto de las pginas aumentando las posibilidades en cuanto a colores,
tipos, tamaos y posicionamiento de cualquier tipo de ob/eto html, ya sea te7to, imagen,
tabla o campo de formulario $lo que sea que se pueda identificar con una etiqueta html'.
!e puede definir una 5oO de esti$o como una co$ecci,n de re;$s Hue Dectn $
prienci de un documento o prte de$ mismo=
&as venta/as que presenta el uso de .!! son0
Contro$ so(re e$ dise%o de $ p/;in0 con los estilos .!! se separa el contenido
de la pgina web, un documento .html, de todas las reglas referidas a su diseo y
aspecto, que estn separadas en un documento e7terno he independiente con
e7tension .css.
Actu$i'ci,n utom/tic de$ dise%o0 empleando ho/as de estilo se puede
modificar la ho/a de estilo individual y cambiar la apariencia de un sitio web
completo.
Discreci,n0 los navegadores ms antiguos no pueden entender las reglas de las
ho/as de estilo pero no dan errores, simplemente las ignoran. =e este modo no se
mostrarn los efectos de diseo asignados pero s4 el te7to bsico de las pginas y
la apariencia del 12,&.
Termino$o;@ emp$ed en C00
3ara comprender el funcionamiento de las ho/as de estilo en cascada es necesario
conocer los t<rminos empleados en las mismas0
"ropiedd
*na propiedad es una caracter4stica de un elemento que puede verse modificada
mediante una ho/a de estilo. 3or e/emplo co$or o teBtYtrnsDorm. Estas propiedades son
muy numerosas permitiendo cambiar muchas caracter4sticas que hasta ahora no era
posible.
- $or
)alor es el dato que se asigna a una determinada propiedad. 3or e/emplo Z!!!!!! es un
valor para el color y uppercse es un valor de la propiedad te7t%transform.
Dec$rci,n
*na declaraci+n esta formada por una propiedad y su valor. &a declaraci+n comien-a por
el nombre de la propiedad seguido de dos puntos y a continuaci+n del valor de la
propiedad. En nuestro e/emplo co$or: Z!!!!!!N y teBtYtrnsDorm: uppercseN son dos
declaraciones.
0e$ector
*n selector es una etiqueta estndar de 12,& o un nuevo nombre escrito por nosotros al
cual se le quiere asignar una declaraci+n. 3or e/emplo0 p, 1:, strong son selectores del
12,&.
Re;$ de esti$o
*na regla es un selector /unto con la declaraci+n, por e/emplo, 1:]color0ro/o^. ;l crear
reglas es posible agrupar selectores y declaraciones. *n e/emplo de regla con dos
declaraciones ser4a0
stron; [ co$or: Z!!!!!!N teBtYtrnsDorm: uppercseN \
3ara separar las declaraciones se utili-a punto y coma.
2ambien se pueden agrupar los selectores como en este e/emplo
6QG6V[co$or:roOoNDontYDmi$7:ri$\
2anto los h: y hP sern mostrados de color ro/o y tipo de letra arial. En este caso se utili-a
la coma para separar los selectores.
6oO de esti$o
*na ho/a de estilo es un con/unto de reglas que definen completamente el aspecto de
todos los elementos de la pgina.
Co$occi,n de $s re;$s de esti$o
&as reglas de estilo pueden ir colocadas0
:.Dentro de un etiHuet indi#idu$=
Letiqueta !2&ERSpropieddQ:#$orN===NpropieddN:#$orSI ...te7to... L@etiquetaI
Estas reglas s+lo afectan a una etiqueta particular. (o se utili-an las llaves para
escribir las declaraciones sino que se escriben entre comi$$s dentro de$
modiDicdor 0TK3). Este tipo de colocaci+n es el que implementa KompoZer a las
capas en cuanto a tamao y dems cuando las modificamos mediante la interfa-
grfica.
P.ADectndo tod $ p/;in=
)an colocadas dentro del 1E;= de la pgina, entre dos etiquetas L!2&E
typeRSte7t@cssSI ..reglas...L@!2&EI y afectan a todas las etiquetas del mismo tipo
que apare-can a lo largo de la pgina.
Q.)n un rc5i#o eBterno $$mdo 5oO de esti$os cu7 eBtensi,n es =C00
&o ms interesante es coger todos los estilos que vayamos a utili-ar en un web y
e7traerlos a un archivo e7terno en donde almacenamos esas reglas de estilo. Esos
archivos tienen e7tensi+n .!!.
3ara vincular las pginas al formato definido en el archivo .!! hay que colocar en
cada una de ellas una etiqueta como esta dentro del 1E;=0
L&"(K >E&RSstylesheetS 23ERSte7t@cssS 1>E5RSrc5i#o=cssSI
=onde archivo.css contiene las reglas de estilo.
=e esta forma conseguimos establecer el formato uniforme para todas las pginas
y adems cualquier cambio que hacemos en la ho/a de estilos se ve refle/ado de
forma inmediata en todas las pginas que usen esta ho/a de estilos. Es por eso que
es la opci+n ms utili-ada.
Usr 5oOs de esti$o en cscd
KompoZer dispone de un editor de ho/as de estilo denominado C0cde0 $.!!,
.ascade !tyle !heets'. .a!cade! puede ser utili-ado para producir tanto ho/as de estilo
internas como e7ternas. ; diferencia de los estilos incrustados, las ho/as de estilo internas
o e7ternas ayudan a mantener separadas la informaci+n del contenido de la del
estilo..a!cade! permite dos modos de edici+n de ho/as de estilo0
a' 1odo pr principintes0 este modo permite crear reglas asociadas a selectores de
clase o selectores de tipo de elemento.
1odo #n'do0 este modo permite crear reglas sin restricciones.
3ara proporcionar estilo al documento html que se edita, .a!cade! puede iniciarse


haciendo clic en el men? 6errmients y seleccionando )ditor C00, apareciendo la
siguiente ventana a continuaci+n.
En KompoZer contamos con un bot+n espec4fico para activar la 1o/a de estilos .!!, se
trata del icono .as.ade!0
3ara crear una 5oO de esti$o intern 0
:.=e/aremos por defecto la opci+n *>&$ninguna, incrustado en el documento.
).T6pcionalU Rellenaremos la in@ormacin so!re 3ista de medios B 1Dtulo de la FoMa de estilo.
P. =aremos clic en Crear <oja de est!o.
3ara crear una 5oO de esti$o eBtern 0
:. 3ulsamos el icono E7portar ho/a de estilos y cambiar a la versi+n e7portada0

P. !eleccionamos el fichero en cuesti+n, !i no e7iste ya, se crear un nuevo fichero en el
sistema de archivos local. Es recomendable, al guardarlo, asignarle el nombre completo
$nombre.css'
o T6pcionalU Rellenaremos la in@ormacin so!re 3ista de medios B 1Dtulo de la FoMa de estilo.
Q.;ctivaremos comprobar al crear una ho/a de estilo alternativa si <sta es una
alternativa.
ConseOo: guardaremos siempre el documento html antes de agregar una ho/a de estilo
local. #uardaremos tambi<n el documento inmediatamente antes de cerrar el editor .!!.
ConseOo: utili-aremos el bot+n >ecargar del panel de la i-quierda si la ho/a de estilo no
se descarga inmediatamente.
Crer re;$s de esti$o
=espu<s de crear una o ms ho/as de estilo para el documento html, se pueden crear
reglas para cada ho/a de estilo de forma individual. 3ara usar una ho/a de estilos concreta
al crear o modificar reglas, selecci+nela en el panel de la i-quierda haciendo clic sobre
ella con el bot+n i-quierdo del rat+n. El panel de la derecha mostrar entonces los detalles
de la ho/a de estilo en la pestaa #eneral. 3ara crear reglas nuevas0
:.1aremos clic en el bot+n Re;$ del panel de la i-quierda.
P.El panel de la derecha mostrar opciones para especificar el tipo de regla a crear.
Elegiremos una entre las siguientes0
estilo con nombre $introdu-ca aba/o el nombre de la clase'
estilo aplicado a todos los elementos del tipo $introdu-ca el tipo aba/o'
estilo aplicado a todos los elementos coincidentes con este selector
Q.>ellenaremos el nombre de la regla.
V.1aremos clic en Crer re;$ de esti$o.

En la parte derecha de esta pantalla de 1o/a de estilos .!!, aparer el elemento creado
con el proceso anteriormente descrito.
&as reglas pueden ser definidas usando las pestaas de estilo $2e7to, 5ondo, Bordes,
.a/a, ;ural' del panel de la derecha. 3ara ver todas las definiciones de una regla de
estilo, seleccionaremos en el panel de la i-quierda y haremos clic en la pestaa 9ener$
del panel de la derecha. &a pestaa 9ener$ mostrar todas las definiciones aplicadas a
la regla.

) )ATRA ATRA : : )0TI3O0 )0TI3O0 CA"A0 CA"A0
.omo hemos dicho en el apartado anterior, vamos a aprender a aplicarle estilos a las
capas.
3ara personali-ar una capa tendremos que crear un nuevo estilo, en mi caso, se llama
Uencabe-ado, y aplicarle todas las propiedades que queramos aplicarle a la capa0
&uego, solo tendremos que modificar mediante la vista del codigo fuente, el nombre de la
capa.
Esto se consigue agregando dentro de la etiqueta di# el comando idRNnombredelacapaN0
;hora, observamos los resultados obtenidos en el modo vista preliminar0
"U&3ICACIN D) ":9INA0 8)& "U&3ICACIN D) ":9INA0 8)&
KompoZer est pensado para traba/ar directamente sobre el sitio web en "nternet, aunque
tambi<n puede traba/ar con archivos en el sistema local.
ConDi;urci,n de pu($icci,n
3ara organi-ar todos los archivos, lo primero es crear un sitio web. 3ara ello, seleccionar
la opci+n de men? )ditr< ConDi;urci,n de pu($icci,n, o bien, desde el panel
i-quierdo ;dministrador de sitios de KompoZer, seleccionar el bot+n Editar sitios, se
mostrar una ventana para gestionar los sitios web0
En la -ona i-quierda se muestran los sitios definidos, y en la -ona derecha, las
propiedades del sitio seleccionado.
3ara crear un nuevo sitio, seleccionar el bot+n Nue#o sitio, los campos de la derecha se
pondrn en blanco para que sean rellenados0
Nom(re de$ sitio0 nombre del sitio que se va a crear $2utorial Kompo-er'. Es un
te7to que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo.
Direcci,n 6TT" de su p/;in inicil0 *>& de la pgina de inicio del sitio web.
En caso de que se desee traba/ar en el sistema local, la direcci+n ser de tipo
file:///home/usuario/sitioweb/index.htmlD
Nom(re de usurio0 nombre del usuario. Esta informaci+n la suministra el servidor
donde se alo/a la pgina.
Contrse%0 contrasea del usuario. Esta informaci+n la suministra el servidor
donde se alo/a la pgina
3ara eliminar un sitio, selecci+nelo de la lista y pulse el bot+n Eliminar sitio.
3ara establecer un sitio predeterminado, selecci+nelo de la lista y pulse el bot+n
!eleccionar como valor predeterminado. El nombre del sitio se pondr en negrita
indicando que es el predeterminado.
*na ve- definido el sitio web, en el panel de la i-quierda se mostrarn todos los archivos y
sub%carpetas e7istentes. 1aciendo doble pulsaci+n sobre un archivo, se abrir en una
solapa nueva de la -ona de traba/o. !i se hace pulsaci+n doble sobre una carpeta, se
mostrar el contenido de la misma.
" "U&3ICAR U&3ICAR NU)0TRA NU)0TRA 8)& 8)&
*na ve- configurado el sitio de publicaci+n tal y como se describi+ en el apartado
precedente, podremos publicar pginas en "nternet y editar las ya publicadas. 3ara ello es
recomendable que previamente se visualice la ventana del ;dministrador de sitios $1enu
-er _ 1ostrr Ocu$tr _ Administrdor de sitios'.
3ublicar es similar a cuando guardamos las pginas en nuestro disco duro, con la
diferencia que se guardaran en un servidor, el que configuramos en el administrador de
sitios. .on el bot+n 3ublicar $o men? archivo _ publicar ' colocaremos las pagina en
"nternet $si queremos tambi<n podemos guardarla en nuestro disco duro, como hemos
hecho hasta ahora'.
.omo puedes comprobar, cuando pulsamos el icono aparece un panel en el que podemos
especificar varios datos0
!eleccionar el sitio de publicaci+n si tenemos varios creados
"ncluir el t4tulo de la pgina y el nombre con el que se publicar, aunque estos
datos se e7traern de la propia pgina.

=esde el ;dministrador de sitios tambi<n podremos modificar las pginas ya publicadas
en "nternet, basta con seleccionar el archivo que queremos modificar y se ba/ara
directamente de "nternet a nuestro programa de edici+n, KompoZer. *na ve- modificada,
volveremos a publicarla para que apare-ca con los nuevos cambios reali-ados.
C CON0)*O0 ON0)*O0 A A T)N)R T)N)R )N )N CU)NTA CU)NTA
!iguiendo las indicaciones del WQ. $consorcio internacional que se ocupa de normali-ar
el uso del 12,&' =octype debe ser el primer elemento que abra un documento. Esto
quiere decir que deber4a preceder a L12,&I.!e trata de una marca que no necesita
cierre y cuya funci+n es facilitar informaci+n al servidor Web que alo/a la pgina. &a
informaci+n facilita por =6.23E se refiere al tipo de documento visuali-ado adems de
ser necesaria para la comunicaci+n entre navegador y servidor. =6.23E se debe
escribir de forma estndar0<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML
4.0//EN">. Esta l4nea proporciona algunos datos sobre el documento0
6T13 "U&3IC0 el documento es p?blico
I)T!0 el tipo de 12,& p?blico est gestionado por la "nternet Engineering 2asA
5orce
DTD 6T13 W=R0 la versi+n de 12,& soportada es la V.8
)N0 el idioma del documento es el ingl<s
El uso de =6.23E no es obligatorio y puede omitirse. !eguramente su uso ayuda al
servidor web a interpretar correctamente el documento, pero su ausencia no condiciona la
correcta visuali-aci+n.