Manual Kompozer

8/8/2019 Manual Kompozer

1/97

Desarrollo de Paginas Web:

KompoZer


2/97

ndice de contenido

INTRODUCCIN:......................................................................................................5Qu es KompoZer?....................................................................................................................5

Entorno de trabajo.........................................................................................................................7Barra de titulo: ...........................................................................................................................7Barra de mens:..........................................................................................................................7Barra de Redaccin:....................................................................................................................7Barras de Formato:......................................................................................................................7Ventana administracin sitios web: ............................................................................................8Ventana de rea de edicin: ........................................................................................................8Barra de modo de edicin:..........................................................................................................9Barra de estado:...........................................................................................................................9

Barras de menus (Ampliada)......................................................................................................10Creacin de un Sitio Web............................................................................................................14

Configuracin de la pgina.........................................................................................................16Crear una Pgina Web...............................................................................................................16Guardar una Pgina Web...........................................................................................................17Vista preliminar en el navegador...............................................................................................17

Propiedades de Pgina.................................................................................................................18TEXTO................................................................................................................21

Introduccin de texto................................................................................................................21Seleccin de Texto....................................................................................................................22

SELECCIN........................................................................................................................22El Portapapeles..........................................................................................................................22Otras Operaciones tiles...........................................................................................................23

BUSCAR Y REEMPLAZAR...............................................................................................23DESHACER Y REHACER..................................................................................................24COMPROBACIN ORTOGRFICA.................................................................................24

Formato de Texto.........................................................................................................................26Estilo de Prrafo........................................................................................................................26Fuente........................................................................................................................................26

Negrita, cursiva y Subrayado....................................................................................................27Tamao......................................................................................................................................27Alineacin de Prrafos..............................................................................................................27Sangra de Prrafos...................................................................................................................27

Otros elementos............................................................................................................................29Listas.........................................................................................................................................29Lneas........................................................................................................................................30

ENLACES.............................................................................................................33Direcciones absolutas y relativas..............................................................................................33

Tipos de Enlaces:......................................................................................................................33Aplicacin.....................................................................................................................................35

Enlaces Interno.........................................................................................................................35Enlaces Externo........................................................................................................................35Enlaces a Correo Electrnico

...................................................................................................................................................35Enlaces a Archivos:...................................................................................................................36


3/97

.......................................................................................................................................................37Extra: Otras propiedades del Enlace:........................................................................................38Referencia HTML........................................................................................................................39

Etiqueta y ................................................................................................................39Atributos de ......................................................................................................................39Atributos de ..............................................................................................................39

IMGENES............................................................................................................40Formatos:..................................................................................................................................40Formato GIF.........................................................................................................................40Formato JPG.........................................................................................................................40Formatos PNG......................................................................................................................41Observaciones:.....................................................................................................................41

Insertar imagen..........................................................................................................................42Propiedades de la Imagen:..........................................................................................................43

Pestaa Ubicacin:...................................................................................................................................................43Pestaa Dimensiones: ..............................................................................................................44Pestaa Apariencia: ..................................................................................................................44Pestaa Enlace: ........................................................................................................................45Otras opciones:..........................................................................................................................45

Insertar una imagen como fondo................................................................................................46Referencia HTML........................................................................................................................49

Etiqueta ........................................................................................................................49Etiqueta y .....................................................................................................49Atributo background de BODY................................................................................................49Etiqueta Object..........................................................................................................................49Etiqueta Dynsrc.........................................................................................................................50

TABLAS...............................................................................................................51Introduccin..............................................................................................................................51Descripcin de las tablas...........................................................................................................51Crear Tablas..............................................................................................................................51Definir la tabla..........................................................................................................................52Modificar tablas.......................................................................................................................55Propiedades de la tabla..............................................................................................................55Propiedades de la celda.............................................................................................................58

Otras Modificaciones...................................................................................................................61Insertar elementos.....................................................................................................................61Eliminando elementos...............................................................................................................62

Combinando celdas ..................................................................................................................63Cuestiones de Diseo...................................................................................................................65

Resoluciones de pantalla...........................................................................................................65Extra: Referencia HTML:..........................................................................................................67

Etiqueta ...................................................................................................................67Atributos de .............................................................................................................67

MARCOS..............................................................................................................69Introduccin:.............................................................................................................................69

Referencia html............................................................................................................................70Etiquetas y ...................................................................................70

Atributos de ....................................................................................................71Atributos de ............................................................................................................71FORMULARIOS......................................................................................................72


4/97

CAPAS.................................................................................................................81

Introduccin..............................................................................................................................81Referencia HTML........................................................................................................................82

Etiquetas DIV y SPAN..............................................................................................................82CSS.....................................................................................................................85

HOJAS DE ESTILO ................................................................................................................85Introduccin .........................................................................................................................85

REFERENCIA HTML................................................................................................................86Introduccin..............................................................................................................................86Terminologa empleada en CSS................................................................................................86Propiedad..................................................................................................................................86Valor..........................................................................................................................................86Declaracin...............................................................................................................................87Selector......................................................................................................................................87Regla de estilo...........................................................................................................................87

Hoja de estilo............................................................................................................................87Colocacin de las reglas de estilo.............................................................................................87Usar hojas de estilo en cascada.................................................................................................88Crear reglas de estilo.................................................................................................................90

Extra: estilos capas......................................................................................................................92PUBLICACIN DE PGINAS WEB............................................................93

Configuracin de publicacin...................................................................................................93Publicar nuestra web...................................................................................................................95Consejos a tener en cuenta..........................................................................................................97


5/97

IINTRODUCCINNTRODUCCIN::

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, nia la facilidad de otras herramientas pensadas para el mismo fin.

Qu es KompoZer?

KompoZer es un editor de pginas web WYSIWYG (What you see is what you get - Lo

que ves es lo que recibes). Es un derivado de NVU, es decir, una versin no oficial de

NVU, el cual ha reparado ciertos errores(bugs) que este presentaba. Komposer estbasado en Mozilla Composer pero con ejecucin independiente. Su objetivo es facilitar el

desarrollo de pginas web, gracias a las distintas formas de visualizacin disponibles en

su interfaz como: cdigo fuente, ventana WYSIWYG, visin con tags de HTML realzados)

Presenta caractersticas como el soporte integrado de CSS y mejor gestin del soporte

FTP para actualizacin de los ficheros, soporte de marcos, formularios, tablas, pantillas de

diseo, etc. Cabe destacar que est disponible para diversas plataformas: Windows, Mac

OS, y Linux. La versin sobre la cual trabajaremos en este tutorial, es la 0.7.10, traducida

al espaol por el Proyecto Nave. se sentirn cmodos con la interfaz y opciones de

KompoZer.

Algunas de las herramientas de KompoZer son:

Administrador de sitios FTP: cualquier sitio que el usuario haya especificado en

sus Opciones de Publicacin, podr ser navegado en una barra lateral. Tambin

permite filtrar y mostrar archivos o solo documentos HTML o imgenes.

Nuevos selector de colores: algo ms ligado a lo que los usuarios acostumbran a

utilizar. Se podr elegir entre el selector de colores verde, azul y rojo para crear la

tonalidad deseada, as como tambin elegir la saturacin de la matiz (hue

saturation) y el brillo. En caso de que esto nos resulte incmodo, podremos elegir el

color deseado con el mouse.

Pestaas: una de las herramientas ms conocidas de Mozilla esta disponible para

KompoZer facilitando el trabajo y brindndole la posibilidad al usuario de realizar

acciones de manera ms fluida navegando entre pestaas. Se podr utilizar la

herramienta Deshacer y Rehacer independientemente en cada una de laspestaas.


6/97

Barras de tareas personalizables: se podrn elegir los botones que aparezcan en

nuestras barras y los que no segn nuestros gustos y/o necesidades.

Como podrs ver, sta aplicacin facilita mucho el desarrollo de sitios web con sus

herramientas.

http://www.difundefirefox.com/kompozer


7/97

EENTORNONTORNODEDETRABAJOTRABAJO

La ventana principal de KompoZer esta formada por varias barras, a continuacin una

descripcin de cada una de ellas.

Barra de titulo:

A la izquierda de esta barra aparece el ttulo de la pgina web que estamos editando o el

nombre del archivo que le hayamos asignado. A la derecha los botones de control de la

venta minimizar, maximizar/restaurar y cerrar.

Barra de mens:

Formado por los mensArchivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas,

Ayuda. A travs de estos mens podemos acceder a todas las opciones del programa.

Barra de Redaccin:

Esta barra est formada por botones con las opciones de uso ms habitual que se

encuentran en la barra de men. A travs de estos botones accedemos ms rpidamente.

Por ejemplo los botones:

Nuevo, Abrir, Guardar, Publicar, Buscar, Imagen, etc.

Cabe destacar que podremos modificar dicha barra, para adaptarla a nuestras necesidades.

Barras de Formato:

Con botones que nos permiten acceder a opciones ms bsicas de formato de texto y

prrafos. Estas son similares a las de cualquier procesador de textos. Bajo esta tenemos

otra barra con ms opciones de formatos y adems de otras relacionadas con el formato

aplicando estilos y las capas.


8/97

Ventana administracin sitios web:

Esta barra esta situada a la izquierda y en ella podremos configurar los sitios web, para

poder acceder de forma rpida a las distintas pginas web. A travs de ella tambin

podremos publicar en Internet Webs y editar directamente las paginas ya publicadas sin

necesidad de tenerlas guardadas en nuestro disco local.

Ventana de rea de edicin:

Esta es el rea principal, en la que podremos disear y editar la pgina web. Es el

espacio de trabajo. Cada pgina que se edite se mostrar en esta rea, pudiendo cambiarde una a otra mediante las pestaas que se muestran en la parte superior con el titulo de

cada pgina. Tambin podemos mostrar las reglas en esta rea, que nos ayudaran a

dimensionar diversos objetos.


9/97

Barra de modo de edicin:

En esta barra nos encontraremos cuatro pestaas que permiten cambiar el modo de

edicin:

Normal (o modo Wysiwyg)

Etiquetas HTML (muestra de forma esquemtica las etiquetas utilizadas)

Cdigo Fuente (acceso al cdigo HTML de la pgina)

Vista Preliminar (Como se vera la pagina en el navegador)

Barra de estado :

Proporciona informacin como la relativa a dentro de qu etiqueta nos encontramos.

Adems a travs de ella podemos seleccionar de forma facil y rpida las etiquetas con

sus contenidos para realizar acciones sobre ellos como dar formatos, eliminar, etc.


10/97

BBARRASARRASDEDEMENUSMENUS (A(AMPLIADAMPLIADA))

Vamos a verlo mas a fondo:

Men Archivo:

Constituye la primera opcin del men

principal. En ella podemos contemplar

opciones como crear, abrir y guardare

imprimir archivos.

Men Editar:Las opciones de edicin son estndares en

casi todas las herramientas; aqu se

pueden localizar las opciones para copiar,

pegar, deshacer, rehacer, seleccionar,

buscar y reemplazar. Y propiedades de

publicacin del sitio web.


11/97

Men Ver:

En esta opcin se configuran las barras de

herramientas, definiendo qu elementos se

desean visualizar en el rea de trabajo.

Tambin constituye otra va para

desplazarse entre los diversos modos de

edicin (normal, etiquetas, fuente yvista

preliminar), otra opcin es la de cambiar el

Zoom del escenario. (defecto 100%)

Menu Insertar

Permite incorporar elementos a la escena,

tales como tablas, formularios, imgenes,

anclas y enlaces externos. Uno de los

puntos primordiales y de gran

inters es la insercin de caractres

especiales, los cuales son necesarios

dentro de cualquier contenido que requiera

un cdigo especial para poder servisualizado.

Los objetos inteligentes de los cuales

dispone Kompozer y que pueden ser

insertados, no se visualizan en el rea de

trabajo normal, etiqueta o vista preliminar,

slo hasta que se vea en un explorador se

puede tener la seguridad de qu objeto

funciona correctamente.


12/97

Men Formato

Permite cambiar la apariencia de los

elementos del documento como: tipografa,

tamao, color, estilo, formato del prrafo,

insercin de listas, sangra, color del

prrafo, letra y fondo.

Men Tabla

Las tablas permiten tener mayor orden en

la estructura de contenido bien sea grfico

o textual. Aqu podemos insertar,

seleccionar y borrar una tabla, adems de

unir celdas seleccionadas, y definir el color

de fondo de la misma.

Men Herramientas

Se utiliza para validar el cdigo generado

en HTML, asignar y administrar las

contraseas por trabajo, asignar rutinas

JavaScript desde una consola especial, as

como para verificar la sintaxis generada. La

opcin de mayor uso es el Editor de hojas

de estilos o CSS (Cascade Style Sheet)

que tratan de dar la separacin definitiva de

la lgica (estructura) y el fsico

(presentacin) del documento


13/97

Men Ayuda

En esta opcin est el enlace a la ayuda en

lnea desde el sitio

oficial de kompozer-NVU


14/97

CCREACINREACINDEDEUNUN SSITIOITIO WWEBEB

KompoZer nos permitir trabajar directamente sobre el sitio web en Internet, aunque

adems puede trabajar con archivos en el sistema local.

Para mantener organizados todos los archivos, es necesario crear un sitio web.

Seleccionar:

Men Editar Configuracin de Publicacin

O sino desde el panel izquierdo de Administrador de sitios (F9), seleccionamos el botn

Editar Sitios.

En ambos casos aparecer la siguiente ventana:

Administracin de sitios web

A la izquierda, podemos observar los sitios ya definidos, y a la derecha las propiedades

del sitio seleccionado.

Para crear un nuevo sitio, primero seleccionamos el botn Nuevo sitio; as, los campos de

la derecha se pondrn en blanco para que sean rellenados:

Nombre del sitio: Nombre del sitio que se va a crear. Es un texto 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: URL de la pgina de inicio del sitio web. Por


15/97

ejemplo, si se tiene una pgina en geocities, ser

http://es.geocities.com/usuario/index.html. En caso de que se desee trabajar en el

sistema local, la direccin ser de tipo file:///C:/Documents and

Settings/usuario/sitioweb/index.html.

Servidor de publicacin: informacin para publicar en el servidor

Directorio de publicacin: direccin FTP (Protocolo de Transferencia de

archivos) de publicacin. Esta informacin nos la suministra el servidor

donde se aloja la pgina. En el caso de Geocities ser

ftp://ftp.es.geocities.com/. En el caso de que se trabajemos en local, se

introducir una URL local del tipo ile:///C:/Documents and

Settings/usuario/Directorio o se seleccionamos la carpeta pulsando en el

botn Seleccionar directorio. Nombre de usuario

Contrasea

Para eliminar un sitio, lo seleccionamos en la lista y pulsamos el botn Eliminar sitio.

Para establecer un sitio predeterminado, lo seleccionamos en la lista y pulsamos el botn

Seleccionar como valor predeterminado. El nombre del sitio se pondr en negrita

indicando que es el predeterminado.

Una vez definido el sitio web, en el panel de la izquierda se mostrarn todos los archivos y

sub-carpetas existentes. Haciendo doble pulsacin sobre un archivo, se abrir en una

solapa nueva de la zona de trabajo. Si se hace pulsacin doble sobre una carpeta, se

mostrar el contenido de la misma.


16/97

CCONFIGURACINONFIGURACINDEDELALAPGINAPGINA

Crear una Pgina Web

Para crear una pgina web pulsamos sobre el icono Nuevo en la barra de herramientas

de composicin. O desde el men Archivo-> Nuevo

Aparecera la siguiente ventana, Podremos seleccionar:

un documento en blanco, que bien puede ser un XHTML normal, o un Strict DTD, que es undocumento XHTML en el que no soporta etiquetas antiguas y el cdigo debe estar escritocorrectamente.

Un documento basado en una plantilla. Una plantilla vacia.

Tambin, podremos decirle que lo cree en una pestaa, o en una ventana nueva.

Para abrir una pgina ya existente ir a: Archivo Abrir archivo. (Ctrl. + O)

Para abrir una pgina abierta recientemente ir a: Archivo Pginas recientes.

Es interesante comentar que mediante la opcin abrir direccin web, podremos cargar

una web directamente en el programa, observando as su disposicin y contenido.
http://es.wikipedia.org/wiki/DOCTYPEhttp://es.wikipedia.org/wiki/DOCTYPE


17/97

Guardar una Pgina Web

Podremos guardar un documento de KompoZer en formato HTML o formato slo texto. En

el caso de guardarlo como HTML (Archivo/ Guardar como...) preservar el formato del

documento, como estilos del texto, imgenes, etc. Si guardamos el documento como slo

texto (Archivo/ Guardar) ycambiar codificacin de caracteres) eliminaremos todas las

etiquetas HTML, pero se preservar el texto del documento.

Vista preliminar en el navegador.

Si queremos comprobar cmo quedara nuestra pgina web en Internet, podemos

reproducirla con el navegador que tengamos instalado. Solo hemos de elegirArchivo/

Visualizar Pgina en el navegadoro pulsar la tecla F5.


18/97

PPROPIEDADESROPIEDADESDEDE PPGINAGINA

Se configuran las propiedades de de pgina a travs de:FormatoTtulo y propiedades

de pgina.

Se abrir la siguiente ventana:

Introducimos 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 indexar la pgina a su Base de Datos.

Podemos indicar si esta pgina se trata de una plantilla que usaremos en futuros diseos.

Adems podremos introducir en el rea llamada Internacionalizacin las opciones

referentes al idioma, direccin de escritura (dependiendo del idioma), y el juego de

caracteres utilizados en la pgina.

Tambin, podemos configurar otras propiedades de la pgina, tales como el fondo y los

diferentes colores a utilizar. Para ello, accederemos a:

Formato/ Colores y Fondo de pgina.


19/97

.

Disponemos de dos opciones para establecer los colores de la pgina:

Usar Colores predeterminados.

Usar colores personalizados.Si elegimos usarColores predeterminados, los textos, enlaces y el color de fondo de

fondo de nuestra pgina se mostraran con los colores configurados en el navegador.

Con Usar colores personalizados, podemos definir el color en que se mostrarn los textos,

enlaces y fondo de la pgina.


20/97

Si decidimos personalizarlo, 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.

Tambin disponemos de una Edicin avanzada:

Desde aqu podremos, mediante los atributos y sus respectivos valores, aplicar diferentes

configuraciones a , mediante HTML, como estilos incrustados (CSS), y eventos

javascripts, que se aplicarn por defecto a los diferentes elementos de nuestra web.


21/97

TTEXTOEXTO

Introduccin de texto

Como ya hemos visto en el apartado anterior, podemos establecer un formato

predeterminado para todo el texto de la pgina. Pero a continuacin, vamos a ver como

trabajar directamente con el texto, para personalizar cada apartado.

En cuanto a la insercin de textos, esta no tiene ninguna dificultad, ya que es

exactamente igual a como cualquier procesador de textos.

Cabe aclarar, que en lenguaje HTML, caracteres especiales como vocales acentuadas,

ees, parntesis, etc. se escriben de una forma especial, utilizando cdigos, incluso el

espacio en blanco se trata de forma especial. Si trabajamos en el modo de edicinnormal, Kompozer se encargara de traducir los caracteres especiales que escribamos al

modo de cdigo de caracteres en HTML.

Podemos seleccionar el tipo de contenido que estamos insertando (parrafos, ttulo,

direccin..) mediante la opcin Texto del cuerpo, en la Barra de Formato:

As, en el caso de estar escribiendo un texto, y requerir un salto de lnea, , solo tendremosque presionarMayuscula+Enter, y pasaremos as al prrafo siguiente, el cual heredar

la personalizacin aplicada al anterior.

En el caso de necesitar introducir Caracteres poco comunes, esos que no se encuentran

en el teclado o que requieren cdigo HTML especial, iremos al men

Insertar/Caracteres y Simbolos.

En elo cual nos aparecer una solapa, en la que podremos encontrar segn la

clasificacin de la misma el carcter en cuestin:


22/97

Seleccin de Texto.En cuanto a la seleccin de texto, KompoZerNo permite hacer selecciones discontinuas de texto.Los procedimientos ms usuales para seleccionar texto, son los siguientes:

ARRASTRE

Se sita el cursor al inicio del bloque de texto y realizamos un arrastre con el botnizquierdo del ratn..

Aclaracin: Si un bloque de texto est seleccionado y se pulsa cualquier tecla, sta sustituye a

toda la seleccin.

MAY + POSICIN

Para seleccionar un bloque de texto situamos el cursor en el inicio del bloque, pulsamosy mantenemos pulsada la tecla MAY, situamos el cursor al final del bloque de texto.

SELECCIN

Una palabra: Doble clic sobre la palabra Una lnea: Clic en la parte izquierda de la lnea, el cursor cambia a flecha. Un prrafo: Nos situamos al comienzo, y sin soltar el botn izquierdo del ratn, lo

arrastramos hasta el final del mismo.

El Portapapeles.

Las herramientas del Portapapeles se sitan en el men Edicin, aunque podremos, una

vez seleccionado el texto o la posicin el cuestin, pulsar el botn derecho, y acceder

rapidamente a las siguientes opciones:

Copiar. Edicin/Copiar. Tecla rpida CONTROL + C

Cortar. Edicin/Cortar. Tecla rpida CONTROL + X


23/97

Pegar. Edicin/Pegar. Tecla rpida CONTROL + V

Pegar sin Formato.

Aclaracin: El portapapeles no funciona con imgenes copiadas de otras aplicaciones,

mas adelante veremos como se deben de insertar las imgenes.

Otras Operaciones tiles.

BUSCAR Y REEMPLAZAR

Este comando nos ayudar a ahorrar tiempo y trabajo: Edicin>Buscar y reemplazar.

Buscar texto: Podemos buscar en el cdigo fuente o en el texto, dependiendo de la vista

seleccionada.

Remplazar con: si queremos reemplazar lo buscado por algo debemos indicar el texto en

este cuadro de texto.

Podemos configurar las opciones de bsqueda:


24/97

Coincidir maysculas y minsculas.

Buscar el todo el documento.

Buscar hacia atrs.

Una vez configurado el cuadro de dilogo tenemos la posibilidad de buscar o remplazar,

uno por uno o todos a la vez.

DESHACER Y REHACER

Deshacer (Control + Z): seleccionamos Edicin>Deshacer o botn de la

barra de herramienta Estndar.

Rehacer (Control + Y): seleccionamos Edicin/Rehacer botn de la

barra de herramienta Estndar.

COMPROBACIN ORTOGRFICA

Para poder poner en marcha esta utilidad debemos seleccionarEditar/Revisin

Ortogrfica(Ctrl.+K). Aparecer el siguiente cuadro de dilogo:

Aadir palabra: Incluye la palabra seleccionada a nuestro diccionario personal e

impide que KompoZer la reconozca como palabra errnea.

Ignorar: Indica al programa que ignore la palabra seleccionada y contine la

bsqueda.

Ignorar todo: Omitir todas las repeticiones de la palabra seleccionada en el

documento entero.

Reemplazar: Si encontramos la palabra correcta en la lista de sugerencias y

queremos cambiarla por la errnea, la seleccionamos y presionamos este botn. Si

no encontrsemos ninguna podemos escribir la correcta en el cuadro de textoReemplazar con.


25/97

Reemplazar todas: Todas las repeticiones de la palabra en cuestin encontradas

en el documento sern reemplazadas por la palabra seleccionada en el cuadro

Sugerencias.

El programa comprueba el texto usando el diccionario seleccionado en la casilla Idioma.

Cabe aclarar que en el caso de no disponer del idioma Espaol, seleccionaremos dentro

de la casilla Idioma, Descargar Mas, y seguiremos las instrucciones que all aparecern

para conseguir el mismo.


26/97

FFORMATOORMATODEDE TTEXTOEXTO

Si queremos modificar las caractersticas de un texto, o cualquier otro elemento, se

aplican desde la barra de Formato o desde men Formato

Si no lo tenemos visible seleccionamos Ver/Mostrar Ocultar/ Barra de Formato

Una vez seleccionado un texto el inspector de propiedades muestra este aspecto.

En caso de que en la misma no encontremos la opcin deseada, dentro del men

Formato, encontraremos las faltantes.

Estilo de Prrafo.

El texto en HTML est compuesto principalmente por encabezados y prrafos.

Para asignar a un prrafo un estilo de prrafo, como hemos comentado anteriormente,

seleccionamos el mismo, y, seleccionamos en el campo Texto del Cuerpo, Parrafo, o

Encabezado x, dependiendo del tipo.

Estilos accesibles desde esta lista:

Direccin: Introduce texto entre saltos de lnea, no entre etiquetas

y
,
como har Prrafo.

Preformato: estilo de texto que emplea letra mono espaciada, con este estilo se

respetan los espacios entre palabras del cdigo HTML, se emplea de una manera

rudimentaria para alinear texto. La etiqueta que emplea es .

Contenedor Genrico (DIV): Esta opcin introduce el texto dentro de una capa,

que es un tipo de organizacin del texto y demas elementos, en el que

profundizaremos mas adelante.

Fuente

La fuente se define con el atributo face de la etiqueta .

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


27/97

cambiar mucho.

Los pasos para aplicar el formato, son los siguientes:

1. Seleccionamos el texto.

2. Desplegamos, en el Inspector de Propiedades, el cuadro de lista desplegable de

fuentes o ejecuta el comando Texto>Fuente.

3. Seleccionamos de la lista la fuente deseada.

Negrita, cursiva y Subrayado

Desde el mismo Inspector de Propiedades podemos aplicar estilo directamente a un texto

seleccionado pulsando los iconos correspondientes.

Tamao

Al seleccionar Menor o Mayor puede cambiar el tamao del texto seleccionado usando

etiquetas y , respectivamente.

Si seleccionamoa Muy pequeo, Pequeo, Medio, Grande, Muy grande y Extragrande

cambiar el tamao del texto seleccionado usando etiquetas .

Alineacin de Prrafos.

Para establecer la alineacin del Prrafo:

1. Situamos el cursor en el Prrafo que queremos modificar.

2. Selecciona en el Inspector de Propiedades la alineacin que deseamos pulsando

su botn correspondiente.

Los diferentes cdigos que se introducen son:

Izquierda:

.

Centro:

Derecha:

Justificar:

Tambin se puede acceder desde el men Texto>Alinear, y seleccionamos la alineacin

elegida.

Sangra de Prrafos.


28/97

Para modificar la sangra del Prrafo:

1. Situamos el cursor en el prrafo que queremos sangrar.

2. En el Inspector de Propiedades, pulsamos el icono Sangra de texto o Anular la

sangra de texto segn deseemos.


29/97

OOTROSTROSELEMENTOSELEMENTOS

Listas.

Utilizaremos primordialmente dos tipos de listas:

Listas sin ordenar: Tambin llamadas vietas.

Listas ordenadas: Tambin llamadas numeraciones.

Listas de definicin: Se utilizan para introducir un termino, seguido de su

definicin. Es muy util en muchos casos, como, por ejemplo, en el glosario de

nuestra web.

Para crear una lista nueva.

1. Situamos el cursor en el lugar en el que deseamos aadir la lista y hacemos

clic en el botn determinado.

2. Escribimos el texto del elemento de la lista y presiona INTRO para crear otro

elemento de la lista.

3. Para terminar la lista, desactivamos el icono de la lista en el inspector de

Propiedades.

Para crear una lista usando texto existente

1. Seleccionamos una serie de prrafos para convertirlos en una lista.

2. Hacemos clic en el botn especfico, y seleccionamos el tipo de lista

deseado: Lista sin ordenar, Lista ordenada o Lista de definicin.

PROPIEDADES DE LA LISTA

Una vez realizada una lista se puede modificar. Para modificar una lista situamos el cursor

dentro de la misma y seleccionamos Formato>Listas>Propiedades. Aparecer un men

de dialogo.


30/97

Tipo de lista : Cambia la representacin de los elementos de toda la lista.

Estilo de Vieta : Una vez elegido un tipo de lista podemos seleccionar su estilo: sison vietas, crculos o cuadrados, y si es una numeracin podemos elegir que sea

alfabtica, en numeracin romana, etc.

Comenzar en: en el caso de seleccionar una lista de numeracin, podremos

indicarle el nmero a partir del cual queremos que empiece a contar.

Lneas

Las lineas son un elemento muy util para dividir y diferenciar de una forma simple, el

contenido de nuestra pgina.

Para insertar una lnea horizontal de separacin simplemente habr que seleccionar la

opcin Insertar>Lnea . En el cdigo HTML de la lnea se representar como .

Una vez insertada se le pueden modificar las propiedades desde el Inspector de

Propiedades. Al seleccionar la regla horizontal nos ofrece estas posibilidades:


31/97

Desde estos campos podemos determinar:

Anchura: el ancho de la regla (en pxeles o en tanto por ciento con respecto al

ancho de la pagina)

el alto de la regla (en pixeles)

si tendr sombreado o no

su alineacin en la pgina

Tambin, podremos definirla como predeterminada, para, as, al insertar otra lnea

en el futuro, que esta posea las mismas propiedades que la anterior.

En Edicin Avanzada, podremos acceder a una ventana para, as, en caso de

conocer los atributos con sus respectivas propiedades, introducirlos mediante el

lenguaje HTML.

El color.

Se puede definir el color para varios elementos de la pgina: texto, fondo de pginas,

tablas y celdas, hipervnculos, bordes de tablas, lneas horizontales, etc.

Seleccionar el color.

En cualquier momento que tengamos que seleccionar un color en KompoZer lo haremos a

travs de un botn de este tipo: .

Al pulsarlo aparecer el selector de color:


32/97

Desde el cuadro de dilogo que se despliega podremos seleccionar un color predefinido,

o seleccionarlo cualquiera de la paleta de colores, as como personalizar su tono,

saturacin y brillo. Tambin, podremos seleccionarlo por su nombre, o por su valor en

hexadecimal.

Aclaracin: Las etiquetas web emplean colores por combinacin de ROJO, VERDE y

AZUL, el valor mximo para cada color es 255 (FF en hexadecimal), y el valor mnimo 0 (0

en hexadecimal). Ej.: un color codificado as #FF0000 es rojo puro.


33/97

EENLACESNLACES

Los vnculos tambin llamados enlaces, links o hiper-enlaces son los que nos permiten

navegar, es decir, ir pasando de una pagina a otra.

Se puede usar como enlace un texto o una imagen, el procedimiento es similar en ambos

casos. Hay dos formas de introducir una direccin de la pgina/archivo/etc a enlazar:

Direcciones absolutas y relativas

Absolutas: Se utilizan para enlazar pginas o archivos de un servidor externo. Una

direccin absoluta contiene la URL completa. Son del tipo:

http://www.cprlogrono.com Estas direcciones requieren ser comprobadas

periodicamente como labor de mantenimiento.

Ej: http://www.google.es/. Cdigo:

Relativas: Para enlazar pginas o archivos pertenecientes al mismo sitio. Les falta

alguna de las secciones de la URL. Si el archivo destino no se encuentra dentro de

la misma carpeta del sitio web, se le antepone la ruta correspondiente a partir de la

ubiacin actual.Ej: direccion relativa. Cdigo:

Tipos de Enlaces:

Interno: Nos lleva a otra parte dentro de la misma pgina donde se encuentra el

enlace. Para ello utilizamos un elemento llamado ancla.

Local: Se refiere a algn recurso situado en el mismo servidor que nuestra pgina

(URL relativas)

Externo: Se refiere a algn recurso situado en otros servidores diferentes donde

se encuentra nuestra pgina (URL absoluta)

De Correo: Cuando se da clic en este tipo de enlaces se abre programa de correo

electrnico para enviar un email a la direccin que previamente se halla

especificado en ese enlace.


34/97

A Archivos: El recurso sealado es un archivo y al dar clic nos permiten que se

abran o se descargen a nuestro ordenador esos archivos.


35/97

AAPLICACINPLICACIN

Enlaces Interno

1. Situamos el cursor a donde estar dirigido nuestro enlace. Una vez seleccionado,

pulsamos el icono Enlace Interno , y le establecemos un nombre que har de

referencia de nuestro enlace.

2. Luego, seleccionamos nuestro futuro link que, como ya hemos mencionado,puede

ser el texto o la imagen que servir de enlace.

3. Elegimos men Insertar Enlace o pulsamos el botn Enlace

4. En Ubicacin del enlace colocamos la URL de la pgina a la que debe apuntar el

enlace.

La URL puede ser absoluta (comienza por http://) o relativa, es decir la ruta de un

archivo en el propio servidor donde est alojada la pgina. En este caso podremos

marcar la opcin La URL es relativa a la direccin de la pgina cuando accedamos

a las propiedades del enlace.

Al pasar el mouse sobre el ancla colocada, aparecer el nombre que le hemos

dado.Para cada destino al que queremos llegar en nuestra pgina habr un ancla

Enlaces Externo

1. Situamos el cursor donde ser el enlace. Por ejemplo seleccionando el texto o

imagen que servir de enlace.

2. Elegimos men Insertar Enlace o pulsamos el botn Enlace

3. En Ubicacin del enlace colocamos la URL de la pgina a la que debe apuntar el

enlace.

La URL puede ser absoluta o relativa.

Enlaces a Correo Electrnico


36/97

Al insertar un enlace, simplemente en lugar de escribir la url, escribimos el correo

electrnico al cual queremos llegar y marcamos la opcin Lo anterior es una

direccin de correo electrnico

Enlaces a Archivos:

Para crear un enlace a un archivo, lo realizamos igual que si fuera a otra pgina, solo que

en vez de seleccionar dicha pgina, seleccionamos el archivo en cuestin. Estos enlaces

no disponen de mayor complejidad.

Destino del Enlace:

El archivo llamado por un enlace se muestra en una ventana del navegador. Por defecto,


37/97

esta ventana es la misma en la que estbamos, se sustituye su contenido. Pero es posible

determinar cul va a ser la ventana de destino del enlace.

Dentro de las propiedades del enlace, podremos seleccionar entre las siguientes

opciones:

En la misma ventana, sin marcos (por defecto)

En una nueva ventana.

En el conjunto de marcos contenedor

En el marco actual

En este marco:

De momento solo prestaremos atencin a los dos primeros, ya que los marcos los

estudiaremos en profundidad en otros apartados de este manual.


38/97

EEXTRAXTRA: O: OTRASTRASPROPIEDADESPROPIEDADESDELDEL EENLACENLACE::

Al crear enlaces en su pgina web a las de otras personas, KompoZer proporciona la

posibilidad de incluir informacin XFN (XHTML Friends Network, Red de Amistad XHTML).

XFN es una manera muy sencilla de representar las relaciones humanas usando

hiperenlaces. Para aadir informacin XFN:

1. Pulse con el botn derecho en el enlace al que quiere aadir informacin XFN.

2. Seleccione Propiedades del enlace.

3. En la ventana de dilogo Propiedades del enlace, pulse en Ms propiedades.

4. Seleccione las entradas bajo la seccin Amistad (XFN) que quiera aadir como

informacin XFN.

5. Pulse Aceptar.

6. Pulse Guardar para guardar los cambios/adiciones al documento.

Nota: algunas propiedades XFN son de tipo radio, es decir, slo puede pulsar una como

mximo, mientras que otras son casillas de verificacin, es decir, puede marcar varias

simultneamente.
http://gmpg.org/xfn/http://gmpg.org/xfn/


39/97

RREFERENCIAEFERENCIA HTMLHTML

Etiqueta y

Las etiquetas y definen un enlace: el texto o imagen encerrado entre ellasservir de enlace hacia el destino que marquemos.

Ej: Ir a Google

Cdigo HTML: Enlace a la pgina de Google

El destino es marcado por el modificadorhrefde la etiqueta.

Atributos de

href="...": Es necesaria. Indica la direccin URL a la que se va a saltar al hacer clicsobre el enlace.

name="...": Convierte al contenido de la etiqueta en un destino (llamado

marcador o punto de ancla).

target="...": Determina el marco o ventana de destino donde se abrir el archivo

enlazado.

title="...": Opcionalmente podemos aadir un texto alternativo que se muestra al

posicionar el ratn sobre el enlace.

Atributos de

La etiqueta puede tener tres modificadores que definen el aspecto de los

enlaces de toda la pgina web:

link="...": Determina el color de los enlaces de la pgina Web

vlink="...": Determina el color de los enlaces ya visitados de la pgina Web

alink="...": Determina el color general de los enlaces activos (al hacer click) de lapgina Web
http://www.google.com/http://www.google.com/


40/97

IIMGENESMGENES

Formatos:

Formato GIF

El formato GIF (Graphics Interchange Format), naci en el ao 1987 de la mano de

Compuserve con objeto de colorear sus imgenes, hasta entonces codificadas en su

formato RLE en blanco y negro. La versin original (GIF87a) fue sustituida por la GIF89a.

Actualmente existe un problema de licencias que desaconseja su uso en favor del formato

PnG. Sus caractersticas ms importantes son:

Es un formato de compresin sin prdidas lo que aligera el tamao final del archivo,

manteniendo su calidad.

Se utiliza principalmente para imgenes de colores planos, o sea, grandes

manchas de color homogneo, sin variacin cromtica, al modo de los dibujos

infantiles.

Permite "transparencias", es decir, seleccionando uno de los colores de la imagen

ste se vuelve transparente, permitiendo ver a travs de l cualquier fondo, o

imagen que est situada detrs.

Permite, con el programa adecuado, crear animaciones presentando varias

imgenes una tras otra como si de un "dibujo animado" se tratara.

Utiliza una paleta de 256 colores como mximo, lo que nos permite elegir entre

varios tamaos para un mismo archivo.

Formato JPG

El formato JPG o JPEG (Joint Photographic Expert Group ), es el ms utilizado para la

transmisin de fotografas, naci en el ao 1986. Es un formato muy recomendado para

imgenes con una amplia gama de colores y que permite ajustar el grado de compresin

y por tanto la calidad de la imagen. Sus caractersticas ms importantes son:

Es un formato de compresin con prdida: aligera el tamao final del archivo, pero

le resta calidad.

Se utiliza principalmente para incluir en la web fotografas con un elevado nmero

de colores (trabaja con un formato de 16 millones de colores).

No permite definir colores transparentes.

No permite crear animaciones.

Con el formato JPG, podemos escoger el grado de compresin, de manera que


41/97

cuanto mayor sea la compresin mayor es la prdida de calidad de la imagen.

Codifica los colores con 24 bits, por lo que puede manejar una paleta de ms de 16

millones de colores, lo que se llama color verdadero.

Formatos PNG

PNG (Portable Network Graphics) es un formato grfico basado en un algoritmo de

compresin sin prdida para bitmaps no sujeto a patentes. Este formato fue desarrollado

en buena parte para solventar las deficiencias del formato GIF y permite almacenar

imgenes con una mayor profundidad de color y otros importantes datos. Sus

caractersticas principales son:

Es un formato de compresin sin prdidas lo que aligera el tamao final del archivo,

manteniendo su calidad.

Soporta formato de color indexado (256 colores) y profundidades de color de 48

bits y escala de grises de 16 bits.

Permite colores transparentes y transparencias graduales.

No permite crear animaciones, existe un formato relacionado para animaciones,

pero est poco extendido: MNG.

El usuario puede elegir el formato a usar en la codificacin de la imagen: PNG8

(anlogo al GIF) o PNG24 (24 bits de color) no es adoptado por todos los

navegadores, y an menos por las versiones antiguas de los mismos.

Observaciones:

A la vista de todo lo anterior, cuando integremos imgenes en nuestra pgina deberamos

tener en cuenta lo siguiente:

Debemos analizar detalladamente el uso de imgenes en nuestra pgina. Hemos

de fijarnos en su necesidad, resolucin, tamao, formato, etc. El objetivo 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

nmero de colores que la forman.

Para colores puros con no ms de 256 colores y grficos muy simples usaremos el

formato GIF o PNG.

Para imgenes con ms de 256 colores usaremos el formato JPG o PNG24.

Usar las imgenes con su tamao real, evitando que sea el navegador el

encargado de reducirlas.

No colocar demasiadas imgenes en una misma pgina. Si necesitamos mostrar


42/97

un numero elevado de imgenes, lo mejor es usar una versin muy reducida de las

mismas (thumbnails o miniaturas) a modo de ndice y enlazar con pginas

individuales donde se muestre cada imagen por separado.

Al disear la estructura del sitio utilizar una carpeta para las imgenes muy usadas

a lo largo de las diferentes pginas del sitio.

Usar el atributo ALT en las imgenes, para facilitar la comprensin del contenido a

los usuarios y a los robots usados por los buscadores para indexar nuestra pgina.

Insertar imagen

Se pueden insertar imgenes GIF, JPEG, BMP y PNG en una pgina web. Tambin se

pueden utilizar para . Cuando se inserta una imagen, KompoZer guarda la referencia a laimagen en la pgina.

Pasos para insertar una imagen:

1. Hacemos clic en el sitio donde queramos que aparezca la imagen.

2. Hacemos clic en el botn Imagen de la barra de herramientas o abra el men

Insertar y seleccione Imagen. Aparecer el cuadro de dilogo Propiedades de la

imagen.

3. Podemos escribir la ubicacin y nombre del archivo de la imagen o hacer clic enElegir archivo... para buscar un archivo de imagen en el disco duro o en red local.

4. A continuacin, KompoZer nos permite escribir el texto alternativo que aparecer

en los navegadores de slo texto y que aparecer en los otros navegadores

mientras se carga la imagen o cuando la carga de imgenes est deshabilitada.

Esta opcin, si bien no es obligatoria, si es recomendable.


43/97

PPROPIEDADESROPIEDADESDEDELALA IIMAGENMAGEN::

Una vez que insertamos una imagen en la pgina, podremos editar sus propiedades y

personalizar su diseo, como la altura, anchura, espaciado y alineacin del texto.

Para editar las propiedades de una imagen seleccionada:

1. Hacemos doble clic en la imagen o la seleccionamos y hacemos clic en el botn

Imagen de la barra de herramientas para visualizar el cuadro de dilogo

Propiedades de la imagen.

Veamos las propiedades de este men:

Pestaa Ubicacin:

Ubicacin de la imagen: aqu escribimos el nombre y ubicacin del archivo

de la imagen o hacemos click en Elegir archivo... para buscar un archivo de

imagen en el disco duro o red local.

La URL es relativa a la ruta de la pgina: si est seleccionado KompoZer

convierte la URL a una direccin relativa a la ubicacin 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 URLs 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.


44/97

Al desmarcar esta opcin KompoZer convierte la URL a una URL completa o

absoluta. Normalmente se utilizan URLs absolutas cuando se vinculan

imgenes en otros servidores web (cuando no estn almacenadas

localmente en el disco duro).

Texto alternativo: como hemos mencionado anteriormente, aqu

introducimos el texto que se visualizar en lugar de la imagen original, por

ejemplo, un ttulo o una breve descripcin de la imagen.

No usar texto alternativo: seleccionamos esta opcin si la imagen no

requiere un texto alternativo o no quiere especificar uno.

Pestaa Dimensiones:

Tamao real: seleccione esta opcin para deshacer cualquier cambio hecho

a las dimensiones de la imagen y devolverle a sta a su tamao real.

Tamao personalizado: seleccionamos esta opcin para especificar una

nueva altura y anchura, en pxeles o como porcentaje. Esta configuracin no

afecta al archivo original de la imagen, slo a la imagen insertada en la

pgina.

Mantener aspecto: marcamos esta opcin para mantener las proporcionesde las imagenes si las vamos a redimencionar, para que estas no aparezcan

deformadas. Si se seleccionamos esta opcin slo snecesitamos cambiar la

altura o la anchura, pero no ambas.

Pestaa Apariencia:

Espaciado: especificamos aqu la cantidad de espacio del contorno de la

imagen; el espacio entre la imagen y el texto cercano. Tambin podemos

colocar un borde negro slido en el contorno de la imagen, especificando la

anchura en pxeles. Colocamos cero si no quiere borde.

Alinear el texto con la imagen: si colocamos la imagen al lado de un texto,

seleccionamos esta opcin para indicar cmo se desea que se posicione el

texto en relacin con la imagen.

Mapa de imagen: hacemos clic en Eliminar para borrar cualquier

configuracin de mapa de imagen. Hasta la versin actual, Kompozer no

permite realizar el mapeo de imagenes de forma simple, solo mediante los

atributos correspondientes.


45/97

Pestaa Enlace:

Introduzca una ubicacin de pgina web: si queremos definir un enlace a

la imagen, introducimos la URL de una pgina remota o local, o

seleccionamos un enlace interno o encabezado de la lista desplegable.

Tambin, podemos pulsar en Elegir archivo para buscar un archivo de

imagen en el disco duro o en la red local.

La URL es relativa a la ubicacin de la pgina: si la marcamos, KompoZer

convertir la URL a una relativa a la ubicacin de la pgina.

Desmarcar esta casilla provoca que KompoZer convierta la URL a una

direccin completa (absoluta). Normalmente se usan URLs absolutas

cuando se enlaza a pginas en otros servidores web (no almacenadas

localmente en su disco duro).

Mostrar borde alrededor de la imagen: si se marca, aparecer un borde

del color elegido para los enlaces en torno a la imagen.

Otras opciones:

Para aplicar atributos adicionales o eventos JavaScript, hacemos clic en Edicin

avanzada... para visualizar el editor avanzado de propiedades.

Hacemos clic en Aceptar para confirmar los cambios.


46/97

IINSERTARNSERTARUNAUNAIMAGENIMAGENCOMOCOMOFONDOFONDO

Ahora colocaremos una imagen de fondo de pgina. Para ello pinchamos sobre la pgina

en Formato /Colores y fondo de pgina.

Luego, en el cuadro de dilogo que se nos muestra elegimos la seccin de Imagen de

Fondo y pinchamos en el botn Elegir archivo.

Como hemos visto antes, la primera ventana que se nos abre es en la que aparece

nuestra Web. Dentro de la carpeta imgenes seleccionamos el archivo que deseemos


47/97

tener como fondo de pgina.

En la siguiente ventana se comprueba que el archivo seleccionado se ha tomado de la

carpeta imgenes y el archivo responde al nombre de prueba.png; tiene una URL

relativa, lo que es preferible a la absoluta; luego se pulsa Aceptar.


48/97

Si la imagen es ms pequea que la zona de visualizacin de una pgina (como en esta

imagen elegida para el fondo), la repite en forma de mosaico ocupando toda la pantalla.

Por eso las imgenes de fondo siempre hay que seleccionarlas bien para que no dificulten

la lectura del texto. Esto mismo que hemos descrito para el fondo de la pgina sirve para

el fondo de una tabla que pongamos en ella.


49/97

RREFERENCIAEFERENCIA HTMLHTML

Etiqueta

Determina la localizacin de una imagen. No tiene cierre.

Atributos de la etiqueta :

src ="...": Ruta origen para localizar el archivo de la imagen. (source/fuente).

alt="...": Texto alternativo que aparece en lugar de la imagen si el navegador no

puede mostrar la imagen. Tambien es mostrado al colocarnos sobre la imagen en

un letrero amarillo.

width="...": Establece el ancho de la imagen.

height="...": Establece el alto de la imagen.

border="...": Muestra un marco con el nmero de pixeles deseado.

align="...": Alinea la imagen respecto al texto.

Etiqueta y

La etiqueta map permite crear un mapa de imagen con diferentes zonas de manera que,

al pulsar sobre ellas, se enlaza a diferentes destinos. Cada mapa de imgenes se

determina con un nombre (atributo name="..."). Entre la apertura y el cierre se definen las

areas del mapa por medio de la etiqueta y que tiene a su vez estos

atributos:

shape="..." : Forma del rea de enlace: circular, rectangular, o poligonal.

coords="..." : Coordenadas de localizacin del rea en la imagen.

href= "..." :Direccin del enlace.

Atributo background de BODY

Existen dos modificadores de body para definir el fondo de una pgina: su color () o una imagen de fondo ().

Etiqueta Object

Para incluir ficheros no estandar (pelculas Flash, vdeos o sonido) dentro de una pgina

se utilizan dos etiquetas combinadas, object para Internet Explorer y embed paraNetscape.


50/97

Cada vez ms, el vdeo y el sonido son componentes integrales de los sitios Web

comerciales. Utilizando slo etiquetas HTML estndar podemos agregar funcionalidad

multimedia atractiva a las pginas Web. Por ejemplo, para incrustar un clip de vdeo en

una pgina Web, podemos utilizar tambin otro tipo de etiqueta.

Etiqueta Dynsrc

simplemente el atributo DYNSRC de la etiqueta HTML :

El clip de vdeo MiVdeo.avi se reproduce despus de que el usuario cargue una pgina

Web que contenga esta etiqueta.

Con HTML tambin podemos crear vnculos a gran nmero de formatos de archivo,

incluidos los de Microsoft Office. Para que los usuarios puedan ver estos formatos, debentener exploradores Web capaces de ver archivos que no sean HTML. Por ejemplo, si

sabes que todos los usuarios de una intranet tienen Microsoft(r) Excel y Microsoft(r)

Internet Explorer versin 3.0 o posterior, podremos crear vnculos con una hoja de clculo

de Excel desde el sitio Web. Cuando el usuario hace clic en el vnculo, el documento

aparece en formato de Excel dentro del explorador Web del usuario. Este es un buen

mtodo que puede utilizar para crear sitios Web que compartan y distribuyan

documentacin; de esta forma ayuda a trabajar eficazmente.


51/97

TTABLASABLAS

Introduccin

Las tablas no solo son tiles para mostrar listas de datos, son tambin un elemento

primordial para maquetar las pginas web, o sea, para colocar con cierta libertad los

elementos que forman la pgina web. Las tablas nos permiten organizar y distribuir los

espacios de una manera ptima. Por ejemplo no permite poner el texto en columnas como

en los peridicos, prefijar 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 utilizar las tablas.

Descripcin de las tablas

Podemos definir a una tabla como un conjunto de espacios organizados en filas y

columnas. La interseccin de las filas se llaman celdas. Una cuadrcula es una tabla, en

cuyas celdas podemos poner cualquier elemento HTML, desde texto hasta imgenes y

otros elementos multimedia. Algunos atributos propios de las tablas son:

Alto y ancho (heighty width): pueden medirse en pixels o en porcentaje del

elemento contenedor (width= "100%" indica que ocupa el ancho del elemento en el

que est colocada.

Border(borde) : Anchura del borde que rodea a la tabla. Si es 0 el borde no se ve

cellpadding(relleno): margen del contenido de cada celda. Se mide en pixels.

cellspacing(espaciado): espacio entre las celdas. Se mide en pixels.

Crear Tablas


52/97


53/97

Preciso en esta pestaa podremos escribir directamente el nmero de filas ycolumnas de que constar nuestra tabla.

Filas: escribimos el nmero de filas que tendr nuestra tabla.

Columnas: lo mismo, pero para el valor de las columnas.

Anchura: ancho de la tabla. Podremos colocarlo en pxeles, o en el

porcentaje del espacio que ocupar la tabla dentro del elemento donde se

encuentre insertada.

Borde: Grosor en pxeles que tendr la lnea que forma el borde de la tabla,si queremos que sea "invisible", daremos al borde el valor cero.

Celda, en ella podemos aadir ms detalles a los elementos que vayan en el

interior de las celdas de nuestra tabla:

Alineacin Horizontal: indicaremos si irn sin alineacin, alineados a laizquierda, al centro, o a la derecha, segn elijamos del men desplegable.


54/97

Alineacin Vertical, que puede ser, sin alinear, arriba, al centro, o abajo,

segn el valor que elijamos del men desplegable

Marcando el apartadoAjustar, permitiremos que el texto introducido en la

celda ocupe varias lneas, si deseamos que todo el texto se muestre en una

sola lnea, marcaremos No ajustar.

En el apartado Espacio entre las celdas introduciremos el valor en pxeles

que queremos que haya entre las celdas.

En el apartado Relleno de las celdas, el valor en pxeles que habr entre

los bordes de la celda y su contenido.


55/97

Modificar tablas

Despus de insertar la tabla en nuestra pgina podemos modificar sus caractersticas

mediante el cuadro de dilogo "propiedades de tabla". Este cuadro nos permite por una

parte modificar las propiedades generales de la tabla y por otra las propiedades de lasceldas. Para usarlo la tabla o las celdas han de ser previamente seleccionadas.

Seleccionar una tabla o sus elementos es tan sencillo como colocar el cursor dentro de

la tabla (hacer click con el botn izquierdo del ratn dentro de la tabla) y a continuacin

desplegar el men Tabla y elegir la opcin Seleccionar, dentro de ella tenemos todos los

elementos de la tabla seleccionables: Tabla, Fila, Columna, Celda, Todas las celdas.

Tambin podemos llevar a cabo esta operacin pulsando sobre la tabla con el botn

derecho del ratn dentro de la tabla. Esto nos ofrecer la opcin Seleccionar Tabla.

Propiedades de la tabla

Una vez seleccionada la tabla debemos abrir el dilogo de propiedades. Esto se consigue

mediante cualquiera de los tres mtodos:

El botn derecho del ratn

El men Tabla

El botn tabla de la barra de mens

Cualquiera de estas opciones nos lleva al cuadro de dilogo propiedades de la tabla en el

que vemos claramente diferenciados cuatro apartados: el tamao, los bordes y el

interlineado, la alineacin, y el color de fondo.


56/97

En el apartado Tamao, podemos modificar tanto el nmero de filas como el de

columnas introduciendo los valores en las casillas correspondientes. Tambin es

posible modificar la altura y anchura de la tabla, especificando el valor absoluto en

pxeles 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 externo de la tabla, del

espaciado entre las celdas de la tabla y tambin el relleno o espacio que hay entre

los bordes de la celda y su contenido; todo ello expresado en pxeles.

En el tercer grupo modificaremos la alineacin de la tabla, que puede ser a la

Izquierda, en el Centro, o a la Derecha del elemento o ventana donde tengamos la

tabla. Tambin podemos reservar un espacio encima, debajo, a la derecha o a la

izquierda de la tabla para posteriormente, una vez cerrada la ventana de

propiedades, ponerle un Ttulo a la tabla.


57/97

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.

Ya hemos aprendido con anterioridad a utilizar este cuadro de dialogo, si an tienes

dudas, te recomendamos volver al primer apartado, en donde se explica su utilizacin...

En nuestro ejemplo la tabla tendra un aspecto como este:


58/97


59/97

En el apartado Seleccin encontramos un men desplegable para indicar si las

modificaciones que vamos a realizar se van a aplicar slo a la celda seleccionada,

a la fila o a la columna donde a la que pertenece esa celda (como si hubiramos

seleccionado toda la fila o toda la columna)

El apartado Tamao funciona igual que las propiedades de la tabla, pudiendo

introducir en altura y anchura los valores de tamao absoluto en pxeles o relativos

en % sobre el tamao de la tabla. Ojo el alto de la celda afecta a toda la fila y el

ancho a toda la columna.

La Alineacin del contenido nos permite dos opciones:

Alineacin vertical, 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.

Alineacin horizontal, en la que el contenido puede ser situado a la izquierda, en

el centro, a la derecha, o justificado por igual a ambos bordes laterales de la tabla.

Alineaciones

Izquierda Centro Derecha

Superior Medio Inferior

En cuanto al estilo de celdas tenemos dos posibilidades, celdas normales, que

sern la mayora de las celdas de la tabla, y celdas cabecera (suele aplicarse a la

primera fila o la primera columna) cuyo contenido aparecer en mayor tamao y en

negrita.


60/97


61/97

OOTRASTRAS MMODIFICACIONESODIFICACIONES

Una tabla puede modificarse tambin en cuanto a su definicin e incluso en su

cuadriculado aspecto, es lo que les da su gran flexibilidad. As podemos: la insertar y

eliminar de tablas, filas, columnas o celdas y la unin o divisin de celdas.

Insertar elementos

Algunas de las operaciones que solemos realizar 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 mens, por ejemplo: insercin o eliminacin de una

tabla completa, de una fila, de una columna o incluso de celdas individuales (no

recomendable).

Para insertar una fila en una tabla ya creada, basta con hacer clic con el botn derecho

del ratn sobre una celda cualquiera de la fila que hayamos elegido, y en el men

emergente, dentro de la opcin Insertar tabla..., marcar la opcin Fila superior, o Fila

inferior. O tambin, si el cursor est en la tabla, podemos usar el men Tabla de la barra

de mens y en la opcin Insertar elegir Fila superior o inferior como en el caso anterior. Al

insertar una fila podemos ponerla por encima o por debajo de la fila en la que se

encuentre el cursor de edicin en el momento de abrir este dilogo.

De la misma forma debemos proceder para insertar columnas, solo que ahora las

columnas se pueden insertar a la izquierda del cursor (columna anterior) o a su derecha

(columna siguiente).

Incluso podemos insertar una tabla completa dentro de una celda. Al seleccionar esta

opcin (Insertar Tabla /Tabla...) nos aparecer el ya conocido men de insercin de

tablas, que ya se ha visto en esta misma unidad. Observas ahora su utilidad?


62/97

Eliminando elementos

De 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 siguientes:

Hacemos clic con el botn derecho del ratn en cualquier punto del interior de la

tabla y en el men emergente elegimos la opcin Eliminar tabla y dentro de sta,

lo que queremos borrar.

Seleccionar previamente la tabla, y despus de desplegar el men Tabla, elegir la

opcin Eliminary dentro de sta, lo que queremos borrar.


63/97

Combinando celdas

Es posible unir un grupo de celdas contiguas y que stas compartan su contenido. Por

ejemplo podemos crear una cabecera de tabla uniendo o combinando todas las celdas de

la primera fila. Algo parecido podramos hacer para ponerle un pie a la tabla. La opcin de

combinar varias celdas en una sola permite organizar el contenido de la pgina web casi

en cualquier forma.

El proceso para unir celdas comienza seleccionando varias celdas contiguas, para ello

arrastramos el ratn sobre ellas con el botn izquierdo pulsado. A continuacin tenemos

dos mtodos

Pulsamos con el botn derecho del ratn eligiendo en el men emergente la

opcin Unir celdas seleccionadas.


64/97

Desplegamos el men Tabla y elegimos unir celdas seleccionadas.

Las celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda

combinada y seguir una de las habituales caminos:

Con el botn derecho se despliega el men y se elige Dividir celda

Con el men Tabla se elige la opcin Dividir celda.


65/97

CCUESTIONESUESTIONESDEDE DDISEOISEO

Como ya lo hemos dicho, las tablas son una importante herramienta para la maquetacin

de los contenidos dentro de una pgina.

A efectos de diseo podemos diferenciar dos tipos de tablas: Tablas contenedoras: Se utilizan para alinear contenidos con respecto a la pgina

y no suelen llevar bordes.

Tablas de datos: Suelen ser anidadas (dentro de las contenedoras). Son las que

estructuran el contenido en s, es decir, los textos, las imgenes, etc.

Aclaracin: Al utilizar tablas contenedoras que utilicen todo el ancho de la pgina (100%

de ancho y alto) hay que tener en cuenta que la pgina tiene un MARGEN superior e

izquierda... y ese margen supondr un espacio entre la tabla y el limite de la pginaen el navegador.

Si queremos que esa tabla ocupe realmente el 100% de nuestra pgina tendremos que

eliminar cualquier tipo de margen aplicando como valor de margen 0 en el cuadro de

Propiedades de pgina.

Resoluciones de pantalla.

La resolucin de pantalla del ordenador responde a la cantidad de pxeles que se

visualiza a lo ancho y alto. La resolucin normal suele ser de 800 x 600 pxeles.

Si algo en nuestra pgina Web supera los 800 pxeles de ancho, el navegador reproducir

un scroll horizontal, lo cual resulta antiesttico.

Tambin es conveniente que una pgina web se vea bien en resoluciones superiores

(1024 x 768 pxeles).

Esto suele ser problema de las tablas de ancho en porcentaje (%), relativo al ancho de la

ventana de documento. Al variar la resolucin vara el ancho de la ventana de documento.

Veamos a continuacin como superar este imprevisto:

Solucin: Trabajar con tablas contenedoras con ancho relativo (%) y tablas de datos de

ancho absoluto (pxeles).

1. El contenido de la pgina (texto, imgenes,...) se disea en una tabla de ancho

absoluto (en pxeles). De esta forma el diseo de esta tabla no variara de una

resolucin a otra.

2. Crear una tabla contenedora sin bordes de 100% de ancho y de alto, de solo una

celda. Esta tabla ocupar toda la pantalla en cualquier resolucin.

3. Insertar la tabla con valor absoluto (en pxeles) dentro de la celda de la tabla


66/97

contenedora. La alineacin de esa celda nos permitir colocar la tabla del

contenido en la zona deseada.


67/97

EEXTRAXTRA: R: REFERENCIAEFERENCIA HTML:HTML:

Etiqueta

El elemento bsico dentro del cual se desarrolla la tabla son las etiquetas y. Dentro de la etiqueta de tabla se definen las filas por medio de las etiquetas

y . Y finalmente, dentro de la etiqueta de las filas se definen las celdas que

tiene por medio de la etiqueta y. El nmero de celdas de una fila dar el

nmero de columnas de la tabla. Existe un tipo de celdas, las celdas de encabezado, que

se definen con las etiquetas y . El texto que contienen estas celdas estar

destacado y centrado en la tabla.

Ejemplo bsico: Una tabla de dos filas y tres columnas. La tabla tiene 200 pixels de anchoy el borde de la tabla es de un pxel.

1

A

.

Atributos de

BORDER: Dibuja bordes alrededor de las celdas. Se puede utilizar con el valor en

pxeles que se desee. El grosor del borde solo afecta al borde exterior de la tabla,

no afecta al borde interior de las celdas.

CELLSPACING=: Controla en pxeles el espacio entre celdas.

CELLPADDING=: Controla en pxeles el espacio entre los datos de las

celdas y los bordes internos de las mismas.

WIDTH=: Anchura que tendr la tabla en valor absoluto o contanto por ciento respecto al documento HTML.

HEIGHT=: Altura que tendr la tabla en valor absoluto o con

tanto por ciento respecto al documento HTML.

ALIGN: Alinea horizontalmente la tabla con respecto al documento HTML.

BGCOLOR: Permite especificar el color de fondo de la tabla.

BORDERCOLOR: Permite especificar el color de los bordes de la tabla.

BACKGROUND: Permite introducir una imagen de fondo.

La etiqueta , que define las celdas, tiene los mismos atributos, exceptuando


68/97

cellspacing y cellpadding.

Adems, la etiqueta tiene atributos propios como colspan y rowspan que se

utilizan para combinar la celda con otras adyacentes.


69/97

MMARCOSARCOS

Introduccin:

Los 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. Las versiones ms

antiguas de los navegadores no tienen implementada esta caracterstica, por lo que no

podrn verlos.

Para crear una pgina con frames, tendremos que hacerlo desde el modo cdigo,

tecleando sentencias HTML, ya que Nvu / KompoZer aun no esta preparado para trabajar

con frames. A continuacin, explicaremos los conceptos bsicos para poder aplicarlos, en

el apartado Referencia HTML. Cuando se utilizan frames es muy habitual usar el atributo

target en la etiqueta que define un vnculo (), con este atributo especificaremos en

que frame debe cargarse el destino del vinculo, es decir, la pgina vinculada.


70/97

RREFERENCIAEFERENCIAHTMLHTML

Etiquetas y

La pgina del conjunto de marcos es la que contiene el cdigo HTML con la estructura de

los marcos. Divide la pantalla en secciones rectangulares (marcos) donde se van a

mostrar pginas independientes.

Veamos un ejemplo de una pgina bsica elaborada con frames:

Prueba Frames

Ooops!, tu navegador no soporta frames...

Las etiquetas ... indican dnde empiezan y dnde acaban

los marcos, y el tipo y forma de estos. Entre una y otra irn las definiciones de los

diferentes marcos o frames. Las etiquetas representan los marcos y sus

atributos (pgina web que contienen, mrgenes, scroll, etc.)

El body de la pgina est vaco, no tiene contenido. Las pginas de definicin de marcos

no nos interesan por su contenido, , ya que slo van a actuar de contenedor. No

es necesario que aparezca la etiqueta , pero es til mantenerla: las etiquetas

determinan el contenido de la pgina de marcos si se

abre con un navegador que no permite visualizar marcos.


71/97

Toda pgina web con marcos se compone de:

Una pgina de conjunto de marcos.

Pginas para cargaren cada marco creado.

Atributos de cols="...": Define el n de columnas o marcos verticales que va a tener la ventana,

y el ancho de cada uno de ellos.

rows="...": Define el n de filas o marcos horizontales que va a tener la ventana, y

el alto de cada uno de ellos.

frameborder="...": Define si los marcos creados van a tener borde o no.

border="...": En el caso de que se haya establecido frameborder="..." o no se

haya especificado, este atributo nos permite definir el grosor del borde

bordercolor="...": Establece el color de los bordes de los marcos

Atributos de

name="...": Asigna 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.

src="...": Especifica qu pagina se va a cargar en el frame. La ruta de la paginadebe especificar su localizacin en el sitio web o una URL completa.

scrolling="...": Establece si el marco tendr o no barra deslizadora cuando el

contenido del marco exceda al tamao de este.

noresize: impide que el marco pueda ser redimensionado por el visitante

arrastrando su borde. Si no se indica este atributo el marco podr ser

redimensionado.

marginwidth="...": Define el margen horizontal que queremos que haya dentro delframe, entre los lmites de este y su contenido.

marginheight="...": Define el margen vertical que queremos que haya dentro del

frame, entre los lmites de este y su contenido.

bordercolor="...": Sirve para definir el color del borde del marco concreto al que se

aplica.


72/97

FFORMULARIOSORMULARIOS

Para crear formularios con KompoZer, abriremos el programa e iremos a la opcin

Insertar/ Formulario/ Definir formulario.

Entonces aparecer la ventana Propiedades del formulario:

Rellenaremos los datos del Nombre de formulario; en el campo URL de la accin

pondremos en principio: http://forms.melodysoft.com ya configuraremos el servicio para

que enve las encuestas que hagamos a los usuarios de nuestra web a un correo

determinado; en mtodo seleccionaremos la opcin POST, es decir... Enviar; finalmente,

pulsamos Aceptar.


73/97

Inmediatamente 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 mtodo de

recogida de datos que le hemos especificado. Dentro de ese rea comenzaremos a

colocar los elementos que nos permitirn recopilar los datos que consideremos de inters

para nosotros sobre los visitantes a nuestra web.

Para comenzar a crear los botones y los textos que nos servirn para recopilar

informacin haremos lo siguiente. Hacemos clic con el ratn dentro de ese rea punteada

en celeste, escribimos por ejemplo Nombre y seleccionamos la opcin Insertar/

Formulario/Campo de Formulario. Rellenaremos la ventana que nos salga con los

siguientes datos: elegiremos un campo de texto, lo nombraremos a efectos de poder

reconocerlo posteriormente en el formulario y pulsaremos aceptar.


74/97

Nuestro formulario ir adquiriendo esta apariencia.

Posteriormente podemos repetir la operacin para agregar otro campo que sea apellidos y

direccin de email. Repetimos la misma operacin anterior y nombramos a cada una

segn el dato que queramos recopilar.

Tras estos datos podremos colocar items para que el visitante elija una entre varias

opciones o varias a la vez Colocamos la pregunta Qu te parece esta web? y


75/97

aadiremos los siguientes items, cada uno con su opcin:

Para conseguir estos items, recurriremos a Insertar/Formulario/Campo de

Formulario y en el tipo elegiremos casilla de verificacin.

A cada una de las casillas le asignamos el mismo nombre que pongamos en el formulario,

en este caso son opiniones sobre nuestra web.


76/97

De forma que nuestro formulario va adquiriendo esta presencia:

Para acabar este sencillo formulario podemos colocar un cuadro de texto para que

nuestro visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le

solicitemos. La mecnica para el cuadro de texto sera la siguiente: Insertar/Formulario/

rea de Texto


77/97

Las propiedades de este rea de texto sern las siguientes:

Y lo que obtendremos ser algo parecido a esto:


78/97

Finalmente solo quedar insertar los botones que harn posible que el visitante enve el

formulario o limpie la informacin del mismo por si se arrepiente de enviarlo o por si se

equivoca en la consignacin de algn dato. Para insertar los botones haremos lo

siguiente: Insertar/Formulario /Campo de Formulario; seleccionaremos la opcin

botn de envo y botn de restablecimiento posteriormente, de forma que completemos

el formulario. A cada uno de los botones pondremos sus propiedades.


79/97

El formulario quedar de esta manera:

8/8/2019

Manual Kompozer

Documents

Transcript of Manual Kompozer