1.
UNIDAD III
KOMPOZER
¿QuéesKompoZer?
KompoZer esun editor depáginaswebWYSIWYG(Whatyouseeiswhatyouget-Lo que ves
eslo que recibes).Esunderivado de NVU,es decir,una versión no oficial de NVU,elcual ha
reparadociertoserrores(bugs) que este presentaba.Komposerestá basado
enMozillaComposerpero con ejecución independiente.Su objetivo es facilitarel desarrollo
de páginasweb,gracias a lasdistintas formas de visualización disponibles en su
interfazcomo:código fuente,ventanaWYSIWYG,visióncontagsdeHTMLrealzados)
Presenta características como el soporteintegradode CSS ymejor gestióndel soporte
FTPpara actualización de los ficheros,soportede marcos,formularios,tablas,pantillas de
diseño,etc.Cabe destacarque estádisponible para diversas plataformas: Windows,Mac
OS,y Linux.Laversiónsobre la cualtrabajaremos en este tutorial,es la 0.7.10,traducida
alespañol por el ProyectoNave. se sentirán cómodosconla interfaz yopciones de
KompoZer.
Algunasdelas herramientas de KompoZerson:
• Administradorde sitiosFTP: cualquiersitio que elusuariohayaespecificadoen
sus OpcionesdePublicación,podrá ser navegado enuna barra lateral.También
permitefiltrar y mostrar archivoso solo documentos HTMLo imágenes.
• Nuevosselector de colores:algo más ligadoa lo que losusuariosacostumbran a
utilizar.Se podráelegirentre el selectordecolores verde,azul yrojo paracrearla
tonalidaddeseada,asícomo tambiénelegir la saturación de la matiz (huesaturation)y
el brillo.En caso deque esto nos resulteincómodo,podremos elegir el
colordeseadocon el mouse.
• Pestañas:una de lasherramientasmásconocidas de Mozilla esta disponible para
KompoZerfacilitandoel trabajoy brindándolelaposibilidad al usuarioderealizar
acciones de manera másfluidanavegando entre pestañas.Se podrá utilizar la
herramienta Deshacer y Rehacer independientementeen cada unade las
pestañas.
Barras de tareas personalizables:se podrán elegir los botones que aparezcanen nuestras
barrasy losque no según nuestros gustos y/onecesidades.
Como podrásver,éstaaplicaciónfacilita muchoeldesarrollo desitioswebcon sus
herramientas.

2.
http://www.difundefirefox.com/kompozer
ENTORNO DE TRABAJO
Laventana principal de KompoZerestáformadaporvarias barras,a continuación una
descripción de cadauna de ellas.
Barradetítulo:
Ala izquierdadeestabarra aparece el título dela página webque estamos editando o el
nombre delarchivoque le hayamosasignado.Ala derecha los botonesde control dela
ventaminimizar,maximizar/restaurar y cerrar.
Barrademenús:
Formado porlos menúsArchivo,Editar,Ver,Insertar,Formato,Tabla,Herramientas,
Ayuda.Atravésdeestosmenús podemos accedera todaslasopciones delprograma.
BarradeRedacción:
Esta barraestá formadapor botones conlas opciones de uso más habitualque se
encuentranenla barra demenú.Atravésdeestos botones accedemos másrápidamente. Por
ejemplolos botones:
Nuevo, Abrir, Guardar,Publicar,Buscar,Imagen, etc.
Cabedestacar quepodremos modificardichabarra,paraadaptarlaanuestras necesidades.
BarrasdeFormato:
Con botonesque nos permiten accedera opcionesmásbásicas deformato de texto y
párrafos.Estas son similares a lasdecualquier procesadordetextos.Bajo esta tenemos
otra barracon más opciones de formatos yademás deotras relacionadas conel formato
aplicando estilos ylascapas.

3.
Ventanaadministraciónsitiosweb:
Esta barraesta situada a la izquierday enella podremos configurar lossitiosweb,para
poder acceder de forma rápida alasdistintaspáginasweb.Atravésdeellatambién
podremos publicaren Internet Webs y editardirectamente las paginasyapublicadas sin
necesidad de tenerlas guardadas en nuestrodisco local.
Ventanadeáreadeedición:
Esta es el áreaprincipal,en la que podremosdiseñary editar la página web. Es el
espaciodetrabajo.Cadapágina que se editesemostraráen estaárea,pudiendocambiar
deuna a otra mediantelas pestañasque se muestran en lapartesuperiorcon el titulode
cada página.También podemos mostrarlas reglasen estaárea,que nos ayudarana
dimensionar diversos objetos.
Barrademodode edición:
En esta barranos encontraremos cuatropestañas quepermiten cambiar el modode
edición:
·Normal(omodo Wysiwyg)
·Etiquetas HTML(muestradeformaesquemáticalas etiquetasutilizadas)
·Código Fuente (accesoal código HTMLde lapágina)
·Vista Preliminar (Como severíala pagina en el navegador)
Barradeestado:
Proporciona información como larelativaa dentrode qué etiqueta nos encontramos.
Además a travésde ellapodemosseleccionar de forma facil y rápida las etiquetas con sus
contenidospara realizar acciones sobreellos comodarformatos,eliminar,etc.

4.
DREACION DE UN SITIO WEB
KompoZer nos permitirátrabajar directamente sobreel sitio weben Internet,aunque
además puede trabajarcon archivosen el sistema local.
Paramantener organizados todos los archivos,esnecesario crear un sitioweb.
Seleccionar:
– Menú Editar
– Configuraciónde Publicación
Osino desde el panel izquierdo deAdministrador de sitios (F9),seleccionamos elbotón
EditarSitios.
En ambos casos aparecerá la siguienteventana:
Administracióndesitio
s web
Ala izquierda,podemos observar los sitios yadefinidos,y ala derecha las propiedades
del sitio seleccionado.
Paracrear un nuevositio,primero seleccionamos el botónNuevositio;así,los campos de
laderechasepondránen blanco para quesean rellenados:
 Nombre delsitio:Nombredel sitioque se vaa crear.Esun textoque sevaa
mostrar en la listadesitios ycuandohayaque seleccionarlo.Es muyútil para

5.
identificarlo.
Dirección HTTPdesu páginainicial:URLde la página deiniciodel sitio web.Por
ejemplo,si se tiene unapágina en geocities,será
http://es.geocities.com/usuario/index.html.En caso de quesedesee trabajar en el
sistema local,la dirección será detipofile:///C:/Documentsand
Settings/usuario/sitioweb/index.html.
Servidor depublicación:información parapublicar en el servidor
Directoriodepublicación:dirección FTP(ProtocolodeTransferencia de
archivos)de publicación.Esta información nos la suministra el servidor
donde se aloja lapágina.Enelcaso de Geocitiesserá
ftp://ftp.es.geocities.com/.En elcaso de que se trabajemos en local,se
introduciráuna URLlocal deltipoile:///C:/Documentsand
Settings/usuario/Directorioo seseleccionamos lacarpeta pulsando enel
botón Seleccionar directorio.
Nombre de usuario
Contraseña
Paraeliminar un sitio, lo seleccionamos en lalista ypulsamosel botón Eliminar sitio.
Paraestablecerunsitio predeterminado,lo seleccionamosen la lista y pulsamos el botón
Seleccionar como valorpredeterminado.El nombre delsitiosepondráennegrita indicando
queesel predeterminado.
Una vez definido el sitioweb,en el panel de laizquierda se mostrarántodoslos archivosy
sub-carpetas existentes.Haciendo doble pulsaciónsobre un archivo,se abrirá en una
solapanueva de lazona de trabajo.Sise hace pulsación doble sobre una carpeta,se
mostraráel contenido de la misma.
CONFIGURACIÓN DE PAGINAS WEB
CrearunaPáginaWeb
• Para crearuna página webpulsamossobre el icono Nuevo en la barrade herramientas
decomposición.Odesde el menúArchivo->Nuevo
Apareceralasiguiente ventana,Podremos seleccionar:
• un documentoen blanco, que bienpuede ser un XHTMLnormal, o un StrictDTD,que
esun documentoXHTMLen elque no soportaetiquetasantiguasy elcódigodebe
estarescrito correctamente.
• Un documentobasado en una plantilla.
• Unaplantillavacia.

6.
También,podremos decirle quelo cree en unapestaña,oen una ventana nueva.
• Para abrir una páginayaexistenteira:Archivo→Abrir archivo.(Ctrl.+O)
• Para abrir una páginaabierta recientemente ir a:Archivo →Páginasrecientes.
Es interesante comentar quemediantela opción abrir direcciónweb,podremos cargar
una webdirectamente en elprograma,observandoasísu disposición ycontenido.
GuardarunaPáginaWeb
Podremos guardar un documento de KompoZerenformatoHTMLoformatosólo texto.En

7.
elcaso de guardarlocomoHTML(Archivo/ Guardar como...)preservaráel formatodel
documento,como estilosdel texto, imágenes,etc.Siguardamosel documentocomo sólo
texto (Archivo/Guardar) ycambiar codificación de caracteres) eliminaremos todas las
etiquetas HTML,pero se preservará eltexto deldocumento.
Vistapreliminarenelnavegador.
Siqueremos comprobar cómoquedaría nuestrapágina webenInternet,podemos
reproducirla conelnavegador quetengamos instalado.Solohemos de elegirArchivo/
Visualizar Páginaenelnavegadoro pulsarla tecla F5.

8.
FORMATODETEXTO
Siqueremos modificar las características deuntexto,o cualquier otro elemento,se
aplican desdelabarra de Formato o desdemenú Formato
Sinolo tenemos visible seleccionamosVer/Mostrar Ocultar/Barrade Formato
Una vez seleccionado un textoel inspectordepropiedadesmuestra esteaspecto.
En casodeque en lamisma no encontremos la opción deseada,dentro delmenú
Formato,encontraremos las faltantes.
EstilodePárrafo.
Eltexto en HTMLestá compuesto principalmente por encabezados ypárrafos.
Paraasignara unpárrafo un estilode párrafo,como hemoscomentado anteriormente,
seleccionamos elmismo,y,seleccionamosenel campoTextodel Cuerpo,Parrafo,o
Encabezado x,dependiendodel tipo.
Estilosaccesibles desdeestalista:
• Dirección:Introduce textoentresaltosde línea,no entre etiquetas<p>y </p>,
como haráPárrafo.
• Preformato:estilo de texto que emplea letra mono espaciada,con este estilose
respetanlos espacios entre palabras delcódigoHTML,se emplea de unamanera
rudimentariapara alinear texto.Laetiqueta queempleaes<PRE></PRE>.
• Contenedor Genérico(DIV): Estaopciónintroduceel textodentrode una capa, que
es untipode organización del texto ydemas elementos,enel que
profundizaremosmasadelante.
Fuente
Lafuentesedefine con elatributofacede laetiqueta<Font>.
KompoZer aplica las fuentes queseencuentraninstaladas en el equipo,perohayque
tenerencuenta,que puede queelvisitante no posea ese determinadotipode fuente,por loque

9.
es recomendable quecuidemoseste aspectoa la hora de seleccionar alguna de ellas,yaque
dependiendo de la fuente seleccionada,el aspectodenuestra webpuede
cambiar mucho.
Lospasos paraaplicarel formato,son lossiguientes:
1.Seleccionamos el texto.
2.Desplegamos,enel Inspector de Propiedades,elcuadro delista desplegable de
fuentes o ejecuta elcomandoTexto>Fuente.
3.Seleccionamos de la listalafuentedeseada.
Negrita,cursivaySubrayado
Desde el mismoInspectorde Propiedadespodemosaplicarestilo directamente a un texto
seleccionadopulsando los iconos correspondientes.
Tamaño
Alseleccionar Menoro Mayorpuedecambiar el tamaño del texto seleccionado usando
etiquetas <small>y <big>, respectivamente.
SiseleccionamoaMuypequeño,Pequeño,Medio, Grande,Muygrandey Extragrande
cambiaráeltamaño deltexto seleccionado usando etiquetas<font>.
AlineacióndePárrafos.
Paraestablecerla alineación delPárrafo:
1.Situamos elcursor en el Párrafo quequeremosmodificar.
2.Seleccionaenel Inspector de Propiedadesla alineaciónque deseamos pulsando su
botón correspondiente.
Los diferentes códigos que se introducen son:
• Izquierda:<p align="left">.</p>
• Centro:<p align="center"></p>
• Derecha:<p align="right"></p>
• Justificar:<p align="justify"></p>
Tambiénse puede acceder desdeel menúTexto>Alinear,y seleccionamos la alineación
elegida.

10.
SangríadePárrafos.
Paramodificar lasangría delPárrafo:
1.Situamos elcursor en el párrafoque queremos sangrar.
2.En elInspectorde Propiedades,pulsamos elicono Sangríade textooAnularla sangría
detexto segúndeseemos.
El color.
Se puede definir el color para varioselementosde la página: texto,fondodepáginas,
tablas yceldas,hipervínculos,bordes de tablas,líneashorizontales,etc.
Seleccionarel color.
En cualquier momento quetengamos queseleccionar uncolor en KompoZerloharemos a
travésdeunbotón de este tipo: .
Alpulsarlo aparecerá el selectorde color:
Desde el cuadro de diálogo que se despliega podremosseleccionar un color predefinido,
o seleccionarlocualquiera dela paletadecolores,asícomo personalizarsutono, saturación y
brillo.También,podremosseleccionarlo por su nombre,o por su valoren hexadecimal.
Aclaración:Las etiquetasweb emplean colores por combinación de ROJO,VERDE y
AZUL,el valor máximo paracada colores255 (FFen hexadecimal),y elvalor mínimo 0 (0
enhexadecimal).Ej.:uncolor codificado así#FF0000 es rojopuro.

11.
ENLACES
Losvínculos tambiénllamados enlaces,links o hiper-enlaces sonlosque nos permiten
navegar,esdecir, ir pasandodeuna pagina a otra.
Se puede usarcomoenlaceun textoo unaimagen,elprocedimiento es similar en ambos
casos.Haydosformasdeintroduciruna direccióndela página/archivo/etca enlazar:
Direccionesabsolutasyrelativas
• Absolutas: Se utilizan paraenlazarpáginas oarchivosdeun servidorexterno.Una
dirección absoluta contiene la URLcompleta.Son del tipo:
http://www.cprlogrono.comEstas direccionesrequieren ser comprobadas
periodicamente como labor de mantenimiento.
Ej:http://www.google.es/. Código:<a href="http://www.google.es">
• Relativas:Para enlazar páginas o archivospertenecientes al mismositio.Lesfalta
alguna de lasseccionesde la URL.Si elarchivodestino no se encuentra dentro de la
mismacarpeta del sitioweb,sele antepone la ruta correspondiente a partir de la
ubiaciónactual.
Ej:direccion relativa.Código:<a href="../../index.htm">
TiposdeEnlaces:
• Interno:Nos llevaa otra parte dentrodela misma página donde se encuentra el
enlace.Para ello utilizamos un elemento llamadoancla.
• Local:Serefiere a algún recurso situado en el mismoservidor que nuestra página
(URLrelativas)
• Externo:Se refierea algún recurso situadoenotrosservidoresdiferentes donde se
encuentra nuestrapágina (URLabsoluta)
• DeCorreo:Cuando se daclic en este tipo de enlaces se abreprograma decorreo
electrónicopara enviar un email a la dirección que previamente se halla
especificado en ese enlace.

12.
AArchivos:El recursoseñalado es un archivo yal dar clicnos permiten que se abran o
se descargen a nuestroordenador esos archivos
APLCACIÓN
Enlace Externo
1.Situamos elcursor adondeestarádirigido nuestroenlace.Una vez seleccionado,
pulsamos el icono EnlaceInterno ,yleestablecemos un nombreque haráde
referencia de nuestroenlace.
2.Luego,seleccionamos nuestrofuturolink que,como yahemosmencionado,puede ser
el textoo la imagen que serviráde enlace.
3.Elegimos menúInsertar→ Enlace o pulsamos el botónEnlace
4.En Ubicacióndel enlace colocamos la URLdelapágina a la quedebe apuntar el
enlace.
La URLpuede ser absoluta (comienza por http://)o relativa,es decir larutadeun
archivoen el propio servidor donde estéalojada la página.En este caso podremos
marcar la opción LaURLesrelativaa la direcciónde la página cuando accedamos a
las propiedades delenlace.
Al pasar elmouse sobreelanclacolocada,apareceráel nombreque le hemos
dado.
Para cadadestino al que queremos llegar en nuestrapáginahabrá unancla
Enlaces Externo
1. Situamos el cursor donde será elenlace.Por ejemploseleccionando el textoo
imagenque servirá deenlace.
2. Elegimosmenú Insertar→Enlaceo pulsamos elbotón Enlace
3. En Ubicación delenlacecolocamosla URLde la páginaa laque debeapuntar el
enlace.
La URLpuede ser absoluta o relativa.
EnlacesaCorreoElectrónico
Alinsertar un enlace,simplemente en lugar de escribir la url,escribimos el correo
electrónicoal cualqueremos llegary marcamosla opción “Lo anterioresuna
dirección de correo electrónico”

13.
EnlacesaArchivos:
Paracrear un enlace a un archivo,lorealizamos igual quesifueraa otra página,solo que
envezdeseleccionar dicha página,seleccionamos el archivo en cuestión.Estos enlaces
nodisponen de mayorcomplejidad.
DestinodelEnlace:
Elarchivollamadoporun enlace se muestra en unaventana delnavegador.Por defecto,

14.
estaventana es la misma enlaque estábamos,se sustituyesu contenido.Pero
es posible determinar cuál va aserla ventanadedestino del enlace.
Dentro de las propiedades del enlace,podremos seleccionar entre
las siguientes opciones:
• En lamisma ventana,sin marcos(pordefecto)
• En una nuevaventana.
• En elconjuntodemarcos contenedor
• En elmarco actual
• En este marco:<nombre marco>
Demomento soloprestaremos atención a los dos primeros,yaque los
marcoslos estudiaremosen profundidadenotrosapartados deeste
manual.
REFERENCIA HTML
Etiqueta<A>y</A>
Lasetiquetas <a>y</a>definen unenlace:el textoo
imagenencerradoentreellas servirá de enlace hacia el destino que
marquemos.
Ej: IraGoogle
Código HTML:<a href="http://www.google.com">Enlace a la
páginadeGoogle</a>Eldestino es marcadopor el modificadorhrefdela
etiqueta.
Atributosde<A>
• href="...":Esnecesaria.Indica la dirección URLa laque se va asaltar al
hacerclic sobre elenlace.
• name="...":Convierte al contenido dela etiqueta<A>en un
destino (llamado marcadoro punto de ancla).
• target="...": Determina el marcoo ventana de destino donde
seabriráelarchivo enlazado.
• title="...": Opcionalmentepodemosañadiruntexto alternativo quese
muestraal posicionarel ratón sobre elenlace.

15.
Atributosde<BODY>
Laetiqueta <BODY>puedetenertres modificadores que definen el
aspectode los enlacesdetodala página web:
• link="...": Determina el color de los enlaces delapágina Web
• vlink="...":Determina el colorde los enlaces yavisitados de la páginaWeb
• alink="...":Determina el colorgeneral de los enlaces activos(alhacer
click) dela página Web