Libro 5

MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
CURSO DE PÁGINAS WEB

Una página Web es un documento o información electrónica adaptada
para la World Wide Web que generalmente forma parte de un sitio Web,
está compuesta principalmente por información así como por hiperen-
laces; además, puede contener o asociar datos de estilo para especificar
cómo debe visualizarse, y también aplicaciones embebidas para hacerla
interactiva.
Una página Web es, en esencia, una tarjeta de presentación digital, ya

sea para empresas, organizaciones o personas.
LINEAMIENTOS GENERALES
DE LA CAPACITACIÓN
El objetivo del presente curso es brindar conocimientos sobre diseño de
páginas Web, dentro de un temario propuesto, pero flexible y adaptable
a las necesidades particulares de los participantes.
A lo largo de la capacitación se incluirán prácticas especialmente dise-

ñadas y desarrolladas para ejercitar los temas que se soliciten. Los ma-
teriales entregados a los participantes estarán compuestos por conteni-
do original, desarrollado específicamente para la comprensión de cada
tema, y la orientación del curso.
DISEÑO DE PÁGINAS WEB
Esta modalidad de capacitación posee la flexibilidad de poder reforzar

aquellos temas que aporten más valor al estudiante. La capacitación
abarcará temas de diseño de proyectos, asignación y distribución de
recursos, informes y reportes, mejores prácticas y criterios de uso de la
herramienta, en un nivel intermedio.
4
INTRODUCCIÓN
Hoy en día el Internet ha dejado de ser una vanidad y una moda para
convertirse en una de las herramientas más necesarias para mostrar al
mundo nuestras ideas, trabajos, productos o servicios de una manera
rápida y eficaz, ya que este es un medio de difusión que es utilizado
cada vez por más personas. Así como alguna vez el uso de la radio tuvo
gran popularidad, antes de la televisión, y antes aún de los medios grá-
ficos, hoy en día Internet es el medio de comunicación que surge y se
estandariza en nuestra época. Este surgimiento y popularidad de Inter- 5
net hace que cada vez sean más los usuarios en todo el mundo que in-
teractúan a través de él.
Una página o sitio Web es una representación en Internet. Por ejemplo,

si hablamos del mundo empresarial, una página Web le da a una em-
presa un aspecto profesional a la vez que moderno, y le garantiza una
expansión casi mundial de su negocio.
Por lo tanto el objetivo de este curso es ayudarte a adquirir los conoci-

mientos básicos para elaborar páginas Web y aprender a manejar herra-
mientas que te permitan hacerlo, incorporando en su diseño diferentes
tipos de estilos de textos, imágenes, tablas, fondos, marcadores e hiper-
vínculos, efectos dinámicos y algunos recursos más y finalmente su pu-
blicación en un servidor Web.
CAPÍTULO I
En este capítulo veremos algunas generalidades de la edición de pági-

nas Web; conoceremos los factores que influyen en el hospedaje de una
página en la Web; sabremos que significan algunos dominios; también
veremos una introducción al HTML, con el objetivo de que te familiari-
ces con este código.
1.1 Edición de páginas Web
Figura No. 1
Cualquier editor de texto permite crear páginas Web, para ello sólo es
necesario crear los documentos con la extensión HTML o HTM, e incluir
como contenido del documento el código HTML deseado. Es decir, al
momento de guardar un archivo con este contenido le pondremos un
nombre y se le añadirá “.html” o “.htm”. Por ejemplo “miPagina.html”. El
contenido HTML es un tipo de código en el que están escritas las pági-

nas Web y cuyas características las veremos más adelante. Puede utili-
zarse incluso el Bloc de notas incluido en Windows para hacerlo, como
se ve en la figura No. 1.
Pero crear páginas Web mediante el código HTML es más costoso que
hacerlo utilizando un editor visual. Al no utilizar un editor gráfico cuesta
mucho más insertar cada uno de los elementos de la página, al mismo
tiempo que es más complicado crear una apariencia profesional para la
misma, sobre todo si no estamos muy familiarizados con el HTML. Aun-
que debemos saber que escribir el código nos da más control sobre él y,
sobre todo al principio, nos ayudará a aprenderlo rápidamente.
Existen una serie de buenos editores de páginas Web, unos pagados

como Dreamweaver y Microsoft Expresion Web y otros gratuitos como
HtmlKit, Nvu o KompoZer, este último es el software que utilizaremos
como editor ya que nos permitirá agregar rápidamente diseño y funcio-
nalidad a las páginas, sin la necesidad de programar manualmente el
8 código HTML y además tiene la ventaja de ser gratuito.
1.2 Cómo tener una página en Internet
Para poder poner una página Web en Internet, es necesario contratar

a alguna empresa con servidores, que pueda alojarla, es decir un “hos-
ting”. Un hosting (que significa alojamiento), es un “lugar” o un espacio
Web que permite dar hospedaje a una página y hacerla visible para el
resto del mundo las 24 horas del día. Este servicio lo podemos encontrar
bien de forma gratuita o bien pagando una cierta cantidad de dinero.
El precio por disponer de espacio propio en el servidor dependerá de

algunos factores como:
• El espacio en disco. El espacio en disco se refiere al espacio para

guardar tu Web. Por lo general puedes aplicar la siguiente regla: se
debe contratar el triple de espacio en disco que ocuparía nuestra
Web totalmente terminada. Por ejemplo, si una página totalmente
terminada, ocupa 150 MB de espacio en disco, lo ideal es tener el
triple de espacio contratado, es decir, 450 MB de espacio en disco.
Puedes comprobar fácilmente el espacio que necesitas, sumando
el tamaño de los archivos que quieres publicar en la Web, incluyen-
do el tamaño de las imágenes ya que pueden ser los archivos más
pesados antes de subirlos al servidor de tu empresa de hosting.
• Volumen de transferencia. El volumen de transferencia es la

cantidad de datos que circula por tu espacio. En este volumen se
incluyen, por ejemplo, documentos HTML, programas, gráficos o
correos electrónicos que los clientes bajan de su servidor.
9
Hay empresas que ofrecen este servicio gratuitamente, pero con cier-
tas limitaciones: poco espacio de disco, lentitud, inclusión de publici-
dad que no queremos en nuestra página, etc. Por este motivo, no se
recomienda utilizar hospedaje gratuito para la página de una empresa,
aunque sí es aceptable para una página personal, sobre todo si estamos
empezando con el aprendizaje de la construcción de un sitio Web, ya
que más tarde podrás decidir según tus propósitos si contratas un hos-
ting gratuito o pagado.
Cuando se va a contratar un servicio de hospedaje es necesario con-

tratar también un dominio, de esto suele encargarse la propia empre-
sa de hospedaje. Registrar un dominio consiste en registrar un nombre
para nuestra página. Este nombre no puede estar repetido en Internet,
y ha de ser único. Es posible registrar un mismo nombre con distintas
terminaciones, como por ejemplo: .net, .org, .es o .com u otros. Las ter-
minaciones constituyen el sufijo o identificador que agrupa a todos los
dominios inscritos dentro de esa asignación. En términos generales, los
dominios que registramos se refieren a lo siguiente:
• .com. Es un sufijo de “company” o bien empresa. Se refiere a cual-

quier sitio Web con actividad comercial.
• .net. Es sufijo de “Internet”. Se refiere a cualquier sitio Web relacio-

nado al rubro de Internet, tecnología, telecomunicaciones, aunque
hoy en día se utiliza más ampliamente.
• .org. Es sufijo de “organization”. Se refiere a cualquier sitio Web rela-

cionado a instituciones, establecimientos educacionales, organiza-
ciones sin fines de lucro, etc.
• .info. Es sufijo de “information”. Es una terminación nueva que en

general se refiere a cualquier sitio Web con actividad informativa,
como por ejemplo instituciones, medios, etc.
Existe otro grupo de terminaciones relacionadas con un país:
• .us. Es sufijo de “United States”. Es una terminación para sitios Web

10 relacionados a Estados Unidos.
• .co. Se refiere a “Colombia”. Esta relacionado a sitios de Colombia.
• .ec. Se refiere a “Ecuador”. Es una terminación que tiene relación

con sitios del Ecuador.
En cualquiera de los casos, una vez que tengas tu espacio en Internet,

darle contenido a tu página en modo local es muy sencillo, para luego
subirla a un servidor manteniendo la estructura del local. Es decir, se
deberá subir todos los archivos tal y como aparecen en el disco duro,
respetando el nombre de los archivos y la organización de las carpetas.
Si no se hace de este modo, nuestro sitio Web tendrá fallas.
Toma en cuenta que es mejor no utilizar caracteres especiales como

acentos o eñes, ni espacios en blanco en los nombres de archivos o car-
petas. De esta forma te asegurarás de que el servidor puede reconocer
sin ningún tipo de problemas los nombres de los archivos que alojes en
él; ya que, por ejemplo, si en tu página quieres mostrar la imagen foto1.

jpg deberás guardarla con ese nombre y no como Foto1.jpg. Con esta
indicación evitarás mucho tiempo perdido buscando fallas.
1.3 Introducción a HTML
Las páginas Web están escritas en código HTML, su significado en inglés

es: “Hyper Text Markup Language”. Este lenguaje está basado en etique-
tas que marcan el inicio y fin de cada elemento de la página.
<html>
<head>
<title> Mi página </
title>
11
</head>
<body>
<table border=”1”>
</table>
Figura No. 2
La sintaxis de la figura No. 2 muestra la estructura básica de una página,
este contenido será el mismo para todas las páginas que crees, es decir
que siempre verás este código. Por ejemplo, el título de la página Web se
escribe entre las etiquetas <title> y </title>, ambas etiquetas consisten
en poner un mismo comando entre los símbolos “<” y “>”. La primera eti-
queta indica inicio, y la segunda, que incluye el símbolo “/”, indica final.
Por otro lado las etiquetas disponen de atributos que permiten definir
características del elemento sobre el que se pone dicha etiqueta. Por
ejemplo, <table border=”1”> indica que se trata de una tabla y que ten-
drá un borde de grosor 1.
Estas etiquetas no son visibles cuando el documento se muestra en un

navegador. Cuando un usuario desde Internet solicita ver una página el
servidor Web envía la página al navegador y este interpreta las etiquetas
para dar la página correctamente formateada.
Pero no te preocupes mucho ya que el software que vamos a utilizar

nos permite hacer la página en modo visual y por debajo irá insertan-
do este código.
1.4 Software que utilizaremos
Mencionamos antes la variedad de editores que existen para hacer pági-

nas Web, en este caso utilizaremos KompoZer por sus ventajas.
12
KompoZer es un editor de páginas Web WYSIWYG (“What You See Is
What You Get”, lo que ves es lo que obtienes), es de fuente abierta ba-
sado en el descontinuado editor Nvu. Es un programa que se puede
utilizar en diferentes sistemas operativos, ofrece una amplia variedad
de herramientas para crear de forma cómoda una página, cuenta con
soporte para todos los elementos típicos como marcos, formularios, ta-
blas, plantillas de diseño, hojas de estilo CSS, etc.
Además, es una herramienta con licencia gratuita, así que te lo podrás

descargar muy fácilmente desde tu navegador.
1.5 Actividades
1. Establezca tres ventajas de usar un editor gráfico.

2. Indique los puntos que debe tener en cuenta para contratar un
Hosting.
3. ¿Cuál es el lenguaje en el que se escriben las páginas a las que se
accede a través de navegadores de Internet?
CAPÍTULO II
En este capítulo vamos a instalar e iniciar el programa KompoZer.

Además vamos a conocer cuáles son los elementos básicos de Kompo-
Zer, la pantalla, las barras, etc., para saber diferenciar entre cada uno de
ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven.
Cuando conozcamos todo esto estaremos totalmente familiarizados
con el entorno del programa para comenzar a trabajar.
2.1 Instalar e iniciar KompoZer

13
2.1.1 Instalación en Windows
Figura No. 3
Una vez descargado el programa comenzaremos a instalarlo como se

muestra en la figura No. 3, lo único que debes hacer es darle clic en el
botón siguiente de todas las ventanas que salen durante su instalación.
En una de las ventanas debes elegir la opción “Crear un icono en el escri-
torio”, así podrás acceder a él, con solo darle un clic al icono.
14 2.1.2 Instalación en Linux
Instalar KompoZer en Linux es muy fácil.
Figura No. 4
Descargamos el editor KompoZer, desde nuestro navegador de Internet

como nos muestra la figura No. 4.
Figura No. 5
Una vez descargado el archivo, tendremos un archivo .deb, que es para-
15
lelo a los archivos .exe de Windows, como nos muestra la figura No. 5 y
procedemos a la instalación..
Figura No. 6
Damos click en el botón “Install Package”, en la ventana que nos indica la

figura No. 6 para iniciar la instalación.
Figura No. 7
La instalación del editor es inmediata como nos muestra la figura No. 7

y esperamos que se instalen los paquetes.
16
Figura No. 8
Una vez finalizada, ya lo tendrás listo en tu computador y, solo tendrás
que dar click en el botón cerrar de la ventana que observamos en la
figura No. 8.
2.2 Abrir KompoZer
17
Figura No. 9
La opción que tienes para iniciar KompoZer es desde el botón Inicio –

Todos los programas y elegir la opción KompoZer, ver figura No. 9.
Para cerrar KompoZer como toda aplicación, se puede cerrar de varias
formas:
• Haciendo clic sobre el icono en la parte superior iz-
quierda de la ventana principal.
• Hacer clic sobre el menú Archivo y elegir la opción Salir.
• Pulsando la combinación de teclas Ctrl+Q.
2.3 Entorno de trabajo de KompoZer
Barra deTítulo Barra de Menús Barra de Herramienta
Barra de
Formato
18
Ventana
de Área
de Edición
Figura No. 10
Una vez arrancado el programa nos encontraremos con una ventana de

inicio como podemos ver en la figura No. 10.
Esta ventana contiene los siguientes componentes:
Figura No. 11
Barra de título: A la izquierda de esta barra aparece el título de la pági-

na Web que estamos editando y el nombre del archivo en caso de que
ya lo hayamos guardado con anterioridad. A la derecha los botones de
control de la ventana minimizar, maximizar y cerrar, ver figura No. 11.
Figura No. 12
Barra de menús: Contiene los menús Archivo, Ver, Insertar, Formato,

Tabla, Herramientas, Ayuda. A través de estos menús podemos acceder
a todas las opciones del programa, ver figura No. 12.
19
Figura No. 13
Barra de herramientas: En ella aparecen botones con las opciones de

uso más habitual que se encuentran en la barra de menú. A través de
estos botones accedemos más rápidamente a estas opciones, ver figura
No. 13.
Figura No. 14
Barras de Formato: Con botones que nos permiten acceder a opciones
más básicas de formato de texto y párrafos. Estas son similares a las de
cualquier procesador de textos. Bajo esta tenemos otra barra con más
opciones de formatos y otras relacionadas con el formato aplicado a los
estilos y capas, ver figura No. 14.
Figura No. 15
Ventana administrador de sitios Web: En ella configuraremos nues-
20 tros sitios Web, nos permite acceder de forma rápida a las distintas pá-
ginas. A través de ella también podremos publicar en Internet nuestras
Webs y editar directamente las páginas ya publicadas sin necesidad de
tenerlas guardadas en nuestro disco local, ver figura No. 15.
Figura No. 16
Ventana de área de edición: Esta área es el espacio de trabajo donde

podremos diseñar y editar nuestras páginas. Cada página que estemos
editando se mostrará en ella, pudiendo cambiar de una a otra mediante
las pestañas que se muestran en la parte superior con el título de cada
página. En esta ventana se puede o no visualizar las reglas que nos ayu-
darán a dimensionar diversos objetos, ver figura No. 16.
Figura No. 17
Barra de modo de edición: En esta aparecen tres pestañas y un menú

con las que podremos cambiar el modo de edición (ver figura No. 17):
• Normal (o modo WYSIWYG), Vista preliminar y Etiquetas HTML

(muestra de forma esquemática las etiquetas utilizadas).
• Diseño (muestra el diseño que se está realizando).
• Dividir (muestra la pantalla dividida entre Diseño y Código fuente). 21
• Código fuente (acceso al código HTML de la página).
Figura No. 18
Barra de estado: Proporciona información acerca de en cuál etiqueta
nos encontramos. Además, a través de ella podemos seleccionar etique-
tas con sus contenidos para realizar acciones sobre ella como dar forma-
tos, eliminar, etc., ver figura No. 18.
2.4 Actividades
1. Una vez instalado el editor gráfico en el computador, estudie las

opciones que se presentan en el entorno de trabajo (barras y ventanas)
y establezca la utilidad de cada opción y botón en el editor.
CAPÍTULO III
En este capítulo vamos a ver cómo planificar y diseñar una página Web y
cuán importante es. Además conoceremos qué es un sitio Web, y como
crear su estructura en nuestro computador.
3.1 Diseño de nuestra página Web
Debemos tener en mente lo que queremos hacer, para luego no tener

que cambiar páginas y archivos de lugar, ya que esto es riesgoso y ade-
más se perderá mucho tiempo.
22 Hay que pensar en cuántas secciones tendrá nuestra Web, número de
páginas, la organización de las mismas, los mecanismos que permitirán
la exploración del Web, etc.
Las etapas que se desarrollan en esta fase de diseño son las siguientes:
Figura No. 19
• Fragmentación de los contenidos en bloques de información. Con-
siste en decidir qué va en cada página del Web.
Figura No. 20
• Definición de las relaciones entre los bloques de información; es

decir, debemos realizar una construcción de una estructura jerár-
quica. Una vez que se ha establecido qué debe ir en cada página,
es necesario determinar las relaciones que existen entre las páginas
en términos jerárquicos.
Figura No. 21
• Creación de un sistema de navegación. El sistema de navegación

23
de una Web es el conjunto de elementos que permiten explorar las
páginas.
Los elementos básicos del sistema son los hipervínculos; las co-
nexiones que éstos crean constituyen rutas de exploración, cami-
nos o atajos.
El objetivo de esta etapa es planear las rutas de exploración de los
contenidos, decidir cuál será el punto de partida que se desea dar al
usuario del Web y cuáles son los puntos de llegada; dónde situar las
bifurcaciones de los recorridos; qué herramientas de navegación se
proporcionarán, etc., de forma que las conexiones entre las páginas
deben permitir la exploración de todo el sitio Web de una forma
lógica y transparente.
Para tener más claro todo esto puedes fijarte en los sitios Web que es-
tán en el Internet, tomar en cuenta cómo está realizado su sistema de
navegación y esto te ayudará a tener una visión más amplia para poder
3.2 Creación de una Web
3.2.1 Crear un sitio local
Lo primero que haremos es abrir el programa, y nos encontraremos con

un entorno de trabajo del cual ya estamos familiarizados.
Ahora bien, antes de comenzar con nuestra página, vamos a crear un
sitio Web en el computador llamado “Sitio local” para almacenar en él
todas las páginas que hagamos y los archivos que contengan, como:
imágenes, objetos asociados, etc.
3.2.2 ¿Qué es un sitio Web?
Un sitio Web es un conjunto de archivos y carpetas, relacionados entre

24 sí, con un diseño similar o un objetivo común.
Para armar nuestro sitio local debemos crear una carpeta en el disco
local. Los documentos HTML normalmente se crean dentro de dicha
carpeta, mientras que para contener las imágenes, las animaciones, ar-
chivos de tipo específico, etc., se deben crear nuevas carpetas dentro de
ésta, con el objetivo de tener una mejor organización de los archivos a
la hora de trabajar.
Figura No. 22
Entonces antes de empezar tendrás que crear una carpeta en tu disco

llamada por ejemplo “cursoWeb”, una vez hecho esto, en el menú Archi-
vo, damos clic en Nuevo y en la ventana que se muestra escogemos la
opción Un documento vacío como nos muestra la figura No. 22.
Figura No. 23
Luego seleccionamos la opción Guardar como del menú Archivo y po-
drás ponerle un nombre a tu página. Es importante saber que la página
inicial de nuestro sitio debe de tener el nombre index.htm o index.html,
ya que cuando se intenta acceder a una URL genérica, el servidor de-
vuelve la página con ese nombre, ver figura No. 23.
Por ejemplo, si escribiéramos la dirección genérica http://www.miPagi-

25
na.com en el navegador, éste intentaría cargar la página http://www.mi-
Pagina.com/index.html, por lo que se produciría un error en el caso de
que no existiera ninguna página con el nombre index.html, y no se po-
dría navegar por el sitio a no ser que se escribiese exactamente http://
www.miPagina.com/nombrepagina.html
Figura No. 24
Dale clic en Aceptar, y a continuación en la siguiente ventana buscamos

la carpeta que creamos para guardarla, dale clic en Guardar de la venta-
na que nos muestra la figura No. 24.
Una vez creada la estructura del sitio local con las carpetas ya podemos
definir un nuevo sitio.
Figura No. 25
Para ello en el menú Editar escogemos la opción Configuración de pu-
26 blicación, en la ventana escribe un nombre para nuestro sitio. Por ejem-
plo, ”cursoWeb”, según nos muestra la figura No. 25.
En Información del sitio Web escribe una dirección con la que será
encontrada tu página en Internet.
Figura No. 26
En el botón Seleccionar directorio busca el directorio en donde creaste
la carpeta “cursoWeb” y dale clic en Aceptar.
Figura No. 27
En la ventana de Administrador de sitios Web dale clic en la flecha

amarilla para recargar todos los sitios creados y podrás ver listado nues-
tro sitio “cursoWeb”, como indica la figura No. 27. 27
A partir de ahora trabajaremos solo en este sitio, y tendrás que guardar
todos los archivos que vayamos haciendo en esta carpeta.
3.3 Actividades
1. De forma clara y concreta indique cuál es la importancia del di-

seño de páginas Web.
2. Investigue los tipos de estructuras de páginas Web existentes,
de 2 ejemplos existentes en la Web de cada estructura y plantee
el análisis respectivo.
CAPÍTULO IV
A lo largo de este capítulo trataremos los elementos básicos que tie-

ne una página como textos e imágenes, aprenderemos a configurar sus
propiedades, aplicaremos viñetas y fondos de página.
4.1 Elementos básicos de una Web
Independientemente del programa que se use para la creación

de páginas Web, éstas pueden contener los mismos elementos, por
ejemplo:
28 • Texto: estático o en movimiento.

• Imágenes: fijas o animadas.
• Sonidos.
• Secuencias de vídeo.
4.1.1 Características de texto
El texto es un componente fundamental de las páginas Web y lo genera-

mos tecleándolo. Hay una serie de reglas que debemos tener en cuenta
con respecto al texto:
• El texto debe ser legible.

• El texto debe contrastar claramente con el fondo que elija para sus
páginas y los tipos de letra o fuentes deben garantizar la legibili-
dad del mismo.
• En las páginas Web de preferencia se usa el subrayado exclusiva-
mente para los enlaces.
• La cursiva es un formato apropiado para titulares y está bien para enfa-
tizar. Cuando quieras destacar una palabra, emplea negrita o cursiva.
• Procura no utilizar una fuente que no sea muy común, ya que cuan-
do un navegador de nuestra página no la tiene en su equipo no la
verá exactamente como la hemos diseñado.
Figura No. 28
Vamos a poner texto en una página con tus datos personales, para ello
abrimos la página index.html que ya creamos y que se encuentra en la
carpeta cursoWeb, desde el menú Archivo le damos clic sobre la opción 29
Abrir archivo, ver figura No. 28.
Figura No. 29
En la ventana buscamos el archivo index.html y le damos clic en Abrir,

ver figura No. 29.
Figura No. 30
30 Ahora escribe en la página que abriste:
“DATOS PERSONALES”
Tipo de letra Times new Roman
Tamaño 27px
Tipo Negrita
Justificación centrada
Figura No. 31
Y puedes darle el formato que se muestra en la figura No. 31.

Figura No. 32
31
Desde el menú Formato escoge la opción Tipo de letra y selecciona
“Times New Roman”, como se muestra en la figura No. 32.
Para cambiar el tamaño de letra, en la barra de formato damos clic en el
botón Aumenta el tamaño de la letra.
El tipo de letra lo damos desde el botón Negrita de la barra de formato
Para justificar lo hacemos desde la barra de formato con el botón Ali
near al centro
Figura No. 33
Otra opción que tienes para darle un formato a tu texto es escogiendo
uno de los formatos ya establecidos que se presentan en la barra de
formatos. Al desplegar la flechita de este cuadro podrás ver los distintos
32 formatos que hay, conforme vayas eligiendo cada uno, tu texto cambia-
Figura No. 34
Escoge un color de fondo de página cualquiera que contraste con el co-
lor de letra que selecciones, esto lo haces desde el menú Formato en la
opción Colores y fondo de página, te saldrá una ventana como la que
se muestra en la figura No. 34.
Señala la opción Usar colores personalizados y dale clic en Fondo, es-

coge el color que desees de la paleta de colores y dale clic en Aceptar, 33
ver figura No. 35.
4.1.2 Aplicación de viñetas
Ahora vamos a seguir añadiendo texto. En el menú Formato elige Lista

y luego Numerada, esto te permitirá ir creando los datos personales en
forma ordenada a manera de una lista, los siguientes datos podrás escri-
birlos con el mismo formato con solo dar Enter después de cada línea,
escribe los siguientes datos:
1. Nombres y Apellidos:
2. Dirección:
3. Teléfono:
4. Fecha de nacimiento:
5. Estado civil:
Figura No. 36
A continuación escoge el formato Titulo2 escribe “Estudios Realizados”,
luego utiliza viñetas dando clic en el botón Lista de viñetas de

la barra de formato para escribir lo siguiente:
34
• Primaria:
• Secundaria:
• Superior:
Figura No. 37
Luego de esto, tendrá que quedarte algo como se muestra en la figura
No. 37.
35
Figura No. 38
Visualice el código fuente (figura No. 38) o HTML que se generó automá-
ticamente, dando clic en la pestaña inferior Código fuente.
4.1.3 Insertar imágenes
En las páginas Web se pueden utilizar distintos tipos de formatos de

imágenes como JPEG o PNG para fotos o imágenes que requieren más
calidad o GIF que sirve para dibujos e imágenes con pocos colores, este
formato permite hacer animaciones.
Figura No. 39
Para insertar una imagen en una página vamos al menú Insertar esco-
gemos la opción Imagen, o desde el botón Insertar imagen de la Barra
de herramientas, le damos clic y aparecerá una ventana para po-

der configurar nuestra imagen, ver figura No. 39.
36
Aquí elegimos el archivo de la imagen que queramos insertar, lo busca-
mos en nuestro directorio, cabe indicar que antes debes crear una car-
peta de imágenes en la carpeta que ya habías creado con el nombre
cursoWeb y en ella pegar todas las imágenes que puedas escoger para
que mantengas una estructura de directorio en orden.
Figura No. 40
Luego señalas No usar texto alternativo y te vas a la pestaña de Dimen-

siones (ver figura No. 40) en donde puedes elegir insertar la imagen con
su tamaño real o darle medidas a tu gusto.
Figura No. 41
En la pestaña de Apariencia puedes elegir la ubicación de la imagen
en tu página con respecto al texto y en la pestaña Enlace te permite
establecer un hipervínculo para la imagen si deseas.
37
Figura No. 42
Una vez configurada tu imagen das clic en Aceptar y podrás observar el
resultado de acuerdo a la figura No. 42.
Figura No. 43
También puedes insertar una imagen como fondo de página desde el
menú Formato en la opción Colores y fondo de la página, dale clic so-
bre Elegir archivo y selecciona la imagen desde tu carpeta “imágenes” y
Acepta, ver figura No. 43.
38
Figura No. 44
La nueva apariencia de tu página con una imagen de fondo será, como,

la que se muestra en la figura No. 44.
En este caso hemos escogido una textura.
Toma en cuenta que si la imagen es más pequeña que la zona de visua-

lización de una página esta se repetirá en mosaico ocupando toda la
página, por ello las imágenes de fondo siempre hay que seleccionarlas
bien para que no dificulten la lectura del texto.
Guarda los cambios en tu página desde el menú Archivo en la opción

Guardar puesto que anteriormente ya creamos la página principal y la
“Guardamos como” en nuestra carpeta “cursoWeb”.
4.2 Visualizar el trabajo realizado
Una vez que hemos creado nuestra página, podemos visualizarla desde
un navegador (te recomiendo Mozilla Firefox). Para esto arrancamos el
navegador por defecto que tengamos en nuestro computador desde
KompoZer de varias formas:
39
Figura No. 45
1. Selecciona la opción Visualizar página en el navegador desde
el menú Archivo, ver figura No. 45.
2. Haz clic en el botón Navegar que se encuentra en la Barra de
herramientas.
Figura No. 46
En la ventana que aparece dale clic en la opción Ejecutar aplicación,

ver figura No. 46.
4.3 Actividades
1. Plantee los errores que debe evitar, en el momento de comen-

40 zar a diseñar su página Web.
2. Indique la relación entre colores que debe tenerse en cuenta, el
contraste y la combinación de contrastes para las páginas Web.
3. Según lo visto en este capítulo, realiza la inserción de imágenes
con extensión gif.
CAPÍTULO V
En este capítulo veremos qué es una hoja de estilos y aprenderemos a

crear estilos CSS, que permiten asignar al texto clases y estilos ideados
por nosotros mismos, no predefinidos.
5.1 Aplicación de estilos
5.1.1 Hojas de estilo CSS
Vamos a ver qué son las hojas de estilos y cómo usarlas para aplicar a
las páginas que creamos una apariencia personalizada. En este punto es 41
importante que ya te hayas familiarizado con el lenguaje HTML porque
nos servirá para editar una hoja de estilos, lo que te recomiendo es tener
a mano un manual básico de HTML.
Una hoja de estilos o CSS (“Hoja de Estilos en Cascada”), es un conjunto

de reglas y características que, aplicadas a una página Web, pueden mo-
dificar su apariencia.
Gracias a las hojas de estilos podemos, de alguna manera, automatizar

el trabajo que implica el diseño de una Web, ya que una vez definidos
los estilos los podemos aplicar para los textos separándolos en títulos,
encabezados y el texto normal, de forma que no tengamos que modifi-
car cada vez el texto para que tengan la apariencia que queremos.
Esta forma de diseñar requiere tener conocimiento de HTML. Por ello

KompoZer nos facilita el uso de estilos por medio de las plantillas, que
nos permite usar hojas de estilo con pocos conocimientos de HTML.
5.1.2 Creación de hojas de estilos
KompoZer dispone de un editor de hojas de estilo denominado CaSca-

deS. Este editor puede ser utilizado para producir, tanto hojas de estilo
internas como externas. A diferencia de los estilos incrustados, las hojas
de estilo internas o externas ayudan a mantener separadas la informa-
ción del contenido de la del estilo.
42
Figura No. 47
Vamos a crear un estilo para un documento html. En primer lugar crea-

mos un archivo con el nombre “index1” y lo guardaremos en nuestra
carpeta “cursoWeb”; del menú Herramientas escogemos la opción Edi-
tor CSS y aparecerá una ventana (ver figura No. 47), que nos muestra la
opción de crear una hoja de estilos, en el campo Título debes ponerle
un nombre a la hoja de estilos, por ejemplo, “miEstilo”, dale clic en Crear
hoja de estilo.
Figura No. 48
A continuación, da click en la opción Regla de estilo, aquí debes poner-
le un nombre al estilo que quieras crear, por ejemplo, “h1” y da clic sobre
Crear regla de estilo, a este le daremos nuestro estilo propio.
En el recuadro de Hojas y reglas se irán creando nuestros estilos, dale clic

sobre el que creaste y podrás cambiar al formato que tú elijas.
43
Figura No. 49
Las pestañas que se encuentran en la parte superior te muestran las op-
ciones a las que puedes darle formato dentro de un documento html.
Por ejemplo, en Texto elije un tipo de letra personal, dale un color a la
letra en el cuadro de Color, en Peso de la letra elije “Negrita”, en Estilo
de letra elije “Normal”, vamos a utilizar “Mayúsculas” porque este estilo

lo utilizaremos para los títulos y en Alineación pondremos “Centrada”,
luego en la pestaña Fondo podrás darle un color de fondo a tu página
si así lo deseas. El resto de pestañas puedes modificarlas de acuerdo a
tus necesidades; es decir, aquí puedes darle estilo a todos los elementos
que contenga tu página según tú imaginación, ver figura No. 49.
44 Figura No. 50
Ahora señala con el ratón “hoja de estilos interna” en el cuadro Hojas y
reglas y haremos clic en el botón Exportar hoja de estilo y cambiar a
la versión exportada, hay que darle un nombre y guardarla en nuestra
carpeta, por ejemplo: “hojaestilo.css” toma en cuenta que este tipo de
archivos siempre debes guardarlo con la extensión css.
Figura No. 51
Ahora lo que debemos hacer es enlazar la página “index1.html”

con la hoja de estilos que acabamos de crear “hojaestilo.css”, para
ello teniendo abierto el documento en blanco index1.html, del menú
Herramientas escogemos la opción Editor CSS y en la ventana que se
abre dale clic en <link> y elegimos el archivo que queremos enlazar, en
nuestro caso la hoja de estilos, ver figura No. 51.
Nueva
URL
45
Figura No. 52
Si nos fijamos en la URL aparece todo el directorio en el que se encuen-
tra nuestro archivo. Para que solo se quede “hoja estilo.css” debemos
borrar de este campo el resto de información, por último dale clic sobre
Crear hoja de estilo, ver figura No.52.
Figura No. 53
Para aplicar nuestra hoja de estilo, escribimos normalmente en el docu-

mento index1.html lo siguiente:
“Página de información”
En un principio se verá como se muestra en la figura No. 53 porque no

hemos aplicado ningún estilo.
Clic aqui
46
Figura No. 54
Para darle el estilo que nosotros creamos, selecciona el texto que quie-
ras cambiar y haz clic en la flechita de Aplica una clase de selección
(ver figura No.54) y elige el estilo que creaste y el texto se verá como tú
lo querías.
5.2 Actividades
1. Indique las ventajas de usar hojas de estilo.

2. Siguiendo lo indicado en el capítulo, prueba con más estilos y
aplícalos en tu hoja.
CAPÍTULO VI
En este capítulo vamos a ver cómo trabajar con tablas. Podremos, entre
otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y
cambiar el tamaño del borde.
6.1 Tablas
Las tablas son estructuras que permiten organizar la información en la

pantalla. Todos los objetos se alínean por defecto a la izquierda de las
páginas Web, pero gracias a las tablas es posible distribuir el texto en
columnas, colocar imágenes al lado de un bloque de texto, y otra serie 47
de cosas que sin las tablas serían imposibles de realizar.
La finalidad de las tablas es presentar una serie de datos de forma clara

y organizada, dividiéndolos en filas y columnas.
6.1.1 Insertar una tabla
Vamos a insertar una tabla en una página en blanco que como ya sabe-
mos la guardaremos en nuestra carpeta “cursoWeb”.
Figura No. 55
48
Para insertar una tabla puedes darle clic en el botón de la barra de he-
rramientas, o desde el menú Insertar y escoges la opción Tabla, como
se muestra en la figura No. 55.
Figura No. 56
Automáticamente te aparecerá la ventana de la figura No. 56

Esta ventana te permite escoger cuantas filas y columnas quieres en tu

tabla, podrás hacerlo con solo pasar el apuntador del mouse dibujando
sobre el número de filas y columnas en el dibujo de la tabla que aparece,
esta opción te ofrece la pestaña Rápido.
Figura No. 57
Luego la pestaña Preciso te permite escribir el número de columnas y
filas, además del ancho de las celdas y el borde, ver figura No. 57.
49
Figura No. 58
Y en la pestaña Celda se establecen las características de la celda,
como la Alineación vertical y horizontal, el Ajuste del texto, si marcas
la opción Ajustar el tamaño de las celdas irán aumentando de acuerdo
al tamaño del texto o cualquier elemento que insertes en ella, el Espa-
ciado entre celdas indica la distancia entre las celdas de la tabla, como
se puede observar en la figura No. 58.
En principio nosotros escogeremos unta tabla de 2 columnas y 4 filas.
Figura No. 59
Número de cuenta 168923147200
Saldo 500
Saldo a corte 350

50
Saldo promedio 15
Figura No. 60
A continuación haremos un Estado de cuentas con los datos de la tabla
que se muestra en la figura No. 60.
Figura No. 61
Una vez llena la tabla con los datos se verá como la figura No. 61.
6.1.2 Seleccionar elementos de una tabla
Existen varias formas de seleccionar una tabla o sus elementos:
Figura No. 62
• A través del menú Tabla en Seleccionar, nos presentará varias op-
ciones de los elementos a seleccionar, como se ve en la figura No. 62.
51
Figura No. 63
• Desplegando el menú contextual de la tabla al pulsar con el botón
derecho sobre ella o sobre el elemento que queremos seleccionar. En
este caso aparece la opción Seleccionar tabla, a través de la cual se
puede elegir la opción Tabla, Fila, Columna, etc., ver figura No. 63.
• Manteniendo pulsado y arrastrando el ratón hasta seleccionar la
columna/s o fila/s que queramos.
6.1.3 Insertar o eliminar filas y columnas
Si se desea añadir una fila o una columna a la tabla, esto sí es posible, pri-
mero selecciona la tabla y desde la opción de menú Tabla escogemos
Insertar, seleccionando la opción deseada.
• Fila superior: inserta una fila encima de la fila en que está el cursor.
• Fila inferior: inserta una fila debajo de la fila en que está el cursor.
• Columna anterior: inserta una columna a la izquierda de la colum-
na en que está el cursor.
• Columna posterior: inserta una columna a la derecha de la colum-
na en que está el cursor.
• Celda anterior: inserta una celda a la izquierda de la celda en que
está el cursor.
52 • Celda posterior: inserta una celda a la derecha de la celda en que
está el cursor.
Si se desea eliminar filas, columnas o celdas, puede hacerse desde la op-

ción de menú
Tabla en la opción Borrar, seleccionando la opción deseada.
• Tabla: elimina la tabla entera.

• Fila: elimina la fila en que está el cursor.
• Columna: elimina la columna en que está el cursor.
• Celda: elimina la celda en que está el cursor.
• Contenido de la celda: elimina el contenido de la celda, pero no
la celda en sí. En nuestro caso lo vamos a hacer y para completar el
Estado de cuentas nos falta insertar datos.
Para nuestro caso aumentaremos 8 filas para completar el Estado de cuentas.
Ubicamos el cursor en la última fila y desde el menú Tabla en la opción

Insertar escogemos Fila inferior
Figura No. 64
Límite de crédito 1000
Crédito disponible 500
Pago mínimo 50
Intereses 5
Comisiones 3
Fecha límite de pago 10/10/2009

53
Figura No. 65
Repetiremos el proceso anterior y llenamos con los datos que se mues-
tran en la figura No. 65.
Figura No. 66
Cuando terminemos se verá como se observa en la figura No. 66.
Figura No. 67
Y nos daremos cuenta de que insertamos filas demás, para borrarlas se-
lecciona una fila y desde el menú Tabla escoge la opción Borrar - Fila(s).
54
6.1.4 Propiedades de la tabla
Figura No. 68
Una vez creada la tabla, pueden editarse sus propiedades desde el

menú Tabla dando clic sobre la opción Propiedades de tabla. También
con el menú contextual, estando situado el cursor dentro de la tabla con
clic derecho se pueden establecer las propiedades a nivel de celda, ha-
ciendo clic en Propiedades de celda de tabla, ver figura No. 68.
En la pestaña Tabla, en el cuadro Tamaño se puede cambiar el número

de filas y columnas, definir la altura y ancho de la tabla, en este caso
hay dos opciones: % de la ventana, que te permite elegir el porcentaje
de espacio con respecto a la página que quieres que ocupe tu tabla, o
pixeles, que te permite escribir directamente el número de pixeles que
tendrá la tabla, nosotros utilizaremos un 70% de la ventana.
En el cuadro Bordes y espacio podremos elegir el Borde, Espaciado y

Relleno de la tabla.
En Alineación de la tabla se presentan las opciones de la ubicación de

la tabla en la página: Izquierda, Centrada y Derecha, para nuestro caso
la dejaremos Centrada.
55
Color de fondo, esta opción te permite darle un color a la tabla o simple-

mente dejar que se vea el color de la página, nosotros le pondremos un
color dando clic sobre el botón de color, escogemos un color y aceptamos.
La pestaña Celdas permite darle formato a cada elemento de la tabla, en

el cuadro Selección escoges entre Celda, Fila o Columna según el elemen-
to al que quieras darle formato, los botones Anterior y Siguiente te per-
miten ir seleccionando las celdas de la tabla, puedes ver que según vayas
dando clic en uno de estos botones se ira seleccionando en tu tabla.
56
Figura No. 69
El cuadro Tamaño nos permite modificar el ancho y alto de la celda, fila

o columna de la tabla.
El cuadro Alineación de contenido nos permite alinear a nuestro gusto

el texto, imagen o cualquier elemento que este insertado dentro de la
columna, fila o celda de la tabla.
En Color de fondo podemos elegir un color para cada elemento de la tabla.
Nosotros vamos a modificar solo la columna derecha alineando los da-

tos, para ello elige la opción Medio en Vertical del cuadro Alineación
de contenido y la opción Centrado en Horizontal, dale clic en Aceptar
y veras los cambios.
Figura No. 70
57
6.1.5 Unir dos celdas
Unir o combinar dos celdas consiste en convertir 2 o más celdas en una

sola por lo que dejará de haber borde de separación entre una celda y
otra ya que serán una sola. Esto nos puede servir por ejemplo para uti-
lizar la primera fila para escribir el título de la tabla. En este caso habría
que combinar todas las celdas de la primera fila en una sola.
Entonces vamos a ponerle un título a nuestra tabla para esto primero

insertamos una fila al inicio de la tabla, ponemos el cursor en la primera
fila de la misma y con al opción Fila superior del menú Tabla - Insertar
obtenemos una nueva fila
Figura No. 71
Ahora para unir las dos celdas de la fila seleccionamos toda la fila y desde
el menú Tabla escogemos la opción Unir celdas seleccionadas, como
58 podemos observar en la figura No. 71.
Figura No. 72
Así la fila se convertirá en una sola celda que lleva el título de nuestra
tabla, como podemos ver en la figura No. 72.
Esta opción también está disponible desde el menú contextual en el clic

derecho del ratón.
Puedes combinar celdas en vertical y horizontal.
6.1.6 Dividir una celda
Dividir celdas consiste en partir en dos una celda.
Para dividir una celda primero seleccionamos la celda y en el menú Ta-

bla escogemos la opción Dividir celda, otra forma es desde el menú
contextual con clic derecho sobre una celda y escogemos Dividir celda.
Cabe señalar que para que una celda pueda dividirse en dos, esta celda
debe ser el resultado de la combinación de celdas.
6.1.7 Anidar tablas
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se

le llama anidar tablas.
59
Figura No. 73
En la figura No. 73 vemos un ejemplo de anidamiento. Como puedes ver,
en la primera celda de una tabla se ha insertado otra tabla.
Para anidar tablas sólo tienes que posicionar el cursor en la celda donde
quieres insertar la nueva tabla e insertarla como ya hemos visto.
Figura No. 74
De la misma manera se pueden insertar imágenes en una celda, primero

ubica el cursor en la celda y dale clic en el botón Imagen de la “barra de
herramientas” y lo demás es un proceso que ya lo vimos en el Capítulo 4.
60
Figura No. 75
Para que practiques un poco con este tema de las tablas realiza los cam-
bios que requieras para que la tabla que hemos creado se convierta en
la tabla que se muestra en la figura No. 75.
Algunas indicaciones:
• La imagen insertada tendrá que estar antes en tu carpeta de imá-

genes del sitio Web que ya creamos.
• La parte que empieza con “Nº de cuenta” y “Detalle de movimientos
realizados” son tablas insertadas en celdas.
• Si te fijas las líneas del borde de las tablas están en rojo, esto es por-
que tienen un Borde: 0, para que cuando se publique la página no
se vean las líneas sino solo los datos ordenados (opcional).
• Finalmente podrás darle el formato que tú quieras en cuanto a co-
lores, letra, tamaños, imágenes, etc.
6.2 Actividades
1. Prueba a insertar una imagen con extensión gif dentro de la ta-

61
bla.
2. Realiza un mosaico de imágenes de distintos formatos usando
una tabla.
3. Aplica un nuevo formato a tu imagen.
CAPÍTULO VII
Vamos a ver qué son los Enlaces, sus tipos, para qué sirven y cómo crear-
los, ya que constituyen un elemento esencial para cualquier página Web,
además conoceremos los tipos de referencia que puede tener un enlace.
7.1 Enlaces
Los enlaces son estructuras que permiten organizar la información en

la pantalla, te llevan de una página o archivo a otra página o archivo.
Son muy útiles para combinar texto, imágenes y espacio en blanco en
formas que no se pueden llevar a cabo de otro modo.
62
7.1.1 Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vín-

culos.
• Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando
la ruta completa del archivo, incluyendo el protocolo http://. Por
ejemplo, http://www.clave12.com, o http://www.miSitio.com/pa-
gina/pagina1.html.
La referencia absoluta es independiente de la ubicación de la pági-

na que contiene el enlace, y será válida siempre que no cambie la
ubicación del archivo enlazado. Esta opción se utiliza para enlazar a
archivos fuera de nuestro sitio (enlaces externos).
• Referencia relativa al documento:

La ubicación del archivo enlazado se toma en relación con la ubi-
cación del la página. Es decir, partimos de la carpeta en la que se
encuentra el documento. Si queremos enlazar con una página o

archivo dentro de la misma carpeta, debemos utilizar su nombre.
Por ejemplo, pagina2.html.
Si el archivo está en una subcarpeta de la página actual, debemos

indicar el nombre de la carpeta antes del archivo y separarlos por
una barra (/). Por ejemplo, imagenes/miImagen.png.
Si queremos referirnos a carpetas que están por encima del nivel

de donde nos encontramos deberemos utilizar ../. Por ejemplo, si
estamos en la siguiente dirección http://www.miSitio.com/pagi-
na/informacion/index.html. En esta página queremos mostrar una
imagen que se encuentra en la carpeta http://www.miSitio.com/
pagina/secciones/seccion1.html, deberemos llamarla haciendo
referencia al nivel superior (http://www.miSito.com/pagina/) para
poder ir luego a la carpeta secciones.
El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

63
De esta forma, mientras nos encontramos en la carpeta informa-
ción, subimos un nivel y luego nos movemos dentro de la carpeta
secciones para mostrar el archivo seccion1.html. Esta opción de-
pende de la ubicación del archivo y puede no funcionar correcta-
mente si alteramos la estructura de carpetas.
• Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el
documento actual. Tomando como origen la carpeta raíz del sitio.
Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por

la barra /.
En el ejemplo anterior si tuviésemos definido como sitio la carpeta

http://www.miSitio.com/, un enlace en cualquier página del sitio
a http://www.misitio.com/pagina/secciones/seccion1.html se crea-
ría como /pagina/secciones/seccion1.html.
Por tanto, podríamos poner ese vínculo en cualquier página del si-
tio y funcionaría independientemente de su ubicación.
• Marcadores o puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del
actual o de otro diferente. Para ello, indicamos el nombre del punto
de fijación a continuación de la ruta del archivo (relativa o absoluta)
separados por una almohadilla (#).
El formato sería nombreDeDocumento.extension#nombreDePunto.
Si el punto de fijación está en la propia página, basta con indicar

únicamente el punto en el enlace, por ejemplo #apartado2
Deberás tener siempre en cuenta que los nombres de las rutas corres-
pondan exactamente a los nombres de los archivos y carpetas en el ser-
vidor local. Por ello, es muy recomendable que utilices siempre minús-
culas para evitar fallas en los enlaces.
64
También deberás evitar utilizar caracteres especiales como acentos o
espacios, así no tendrás problemas a la hora de referenciar tus objetos.
Vamos a crear enlaces para nuestra página.
Haremos una página de Inicio para nuestro sitio, esta se mostrará como
portada y contendrá los enlaces al resto de páginas que hemos ido
creando, para esto haremos un pequeño cambio.
Abre el archivo llamado “index.html” que creamos al inicio y guárdalo

como “datos.html “, esto lo haremos para que la página de inicio sea la
que lleve el nombre “index.html” por las razones que ya conoces.
Listo, ahora crea un nuevo documento con el nombre “index.html”, y

esta vez el diseño lo pondrás tú, recuerda utilizar todos los elementos
que hemos aprendido hasta aquí.
7.1.2 Crear enlaces
Para crear enlaces es necesario primero seleccionar el texto o el objeto

que va a servir de enlace.
Una vez seleccionado el elemento, podemos asociarle un enlace de va-

rias formas:
• Haciendo clic sobre el icono

que está en la barra de herramientas.
• Seleccionando la opción Enlace en el menú Insertar.

• Haciendo clic con el botón derecho del ratón en Crear 65
enlace y añadir la dirección url correspondiente.
Cualquiera de estas opciones producirá un cuadro de diálogo para de-

finir el enlace.
Figura No. 76
El primer enlace que haremos es por medio de una imagen, misma que
tendremos que insertarla antes en la página de inicio.
66
Figura No. 77
Seleccionamos la imagen insertada en la parte inferior y le damos clic

derecho, escogemos la opción Crear enlace… del menú contextual,
como se muestra en la figura No. 77.
Figura No. 78
Podremos visualizar la ventana de diálogo, como en la figura No. 78.

67
En el campo de dirección del enlace podemos escribir la dirección de
acuerdo a la referencia.
Se pueden realizar las siguientes acciones:
• Escribir o copiar la dirección completa de una página Web a la que

queremos enlazar.
• Elegir archivo: esta opción nos permite elegir un archivo o docu-
mento ya existente al que queremos enlazar nuestra imagen.
• Lo anterior es una dirección de correo electrónico: establece un
enlace para enviar un correo electrónico.
En nuestro caso vamos a elegir un archivo. Al dar clic en el botón Elegir

un archivo escoge la página “datos.html” de la carpeta “cursoWeb” que es
la página que habíamos creado con nuestros datos personales.
Figura No. 79
68
Dale clic en Abrir y luego en Aceptar.
Figura No. 80
Ahora enlacemos otra página pero el vínculo será un texto.

Es exactamente lo mismo, tendrás que seleccionar primero el texto, lue-

go enlazarlo con la página “estadoCuentas.html” que ya teníamos en la
carpeta “cursoWeb”. Una vez hecho esto el texto que escogimos como
vínculo para el enlace aparecerá subrayado.
Enlace
69
Figura No. 81
Figura No. 82
El último enlace que haremos es uno con nuestro correo electrónico con
una imagen como vínculo. Procedemos de la misma forma que con el
primer enlace que hicimos y en la dirección escribimos un correo elec-
trónico al que llegarán los mensajes de nuestros visitantes, marcamos
la opción Lo anterior es una dirección de correo electrónico que se
muestra en la figura No. 81 y damos clic en Aceptar.
Cabe mencionar que en las páginas que enlazaste también debe haber
enlaces que nos permitan regresar a las páginas de destino.
Para ello debes hacer el mismo proceso que empleamos anteriormente,

tú decidirás si los vínculos son imágenes o texto.
Para visualizar como están enlazadas tus páginas guarda todos los cam
bios y dale clic en el botón Navegar
Página “datos.html”
70
Figura No. 83
Página “estadoCuentas.html”
71
Figura No. 84
7.1.3 Enlaces internos o marcadores
Los enlaces dentro del mismo documento permiten a los visitantes de

una página hacer clic y saltar rápidamente a una parte de la misma, es
decir, te permiten recorrer una misma página.
Por ejemplo, es muy útil para la creación de un índice al principio de la

página y los usuarios pueden hacer clic en un elemento del índice para
ver la sección de la misma a la que apunta dicho elemento.
Un marcador es una señal que se crea en la página Web para proporcio-

nar a un enlace un punto de llegada exacto y se lo utiliza cuando
se crean enlaces a la misma página (como “Ir arriba”, para ir desde el final,
al principio de la misma página).
Nosotros vamos a crear un marcador sencillo en nuestra página “estado

Cuentas.html”, para ello sube el cursor a la primera línea de la página. Una
vez que tenemos el cursor en el sitio en el que se quiere crear un mar-
cador, seleccionamos la opción Enlace interno… en el menú Insertar.
Cuando hagamos esto aparecerá la siguiente ventana:
72
Figura No. 85
En el campo Nombre del enlace interno debes darle un nombre al en-

lace, nosotros vamos a escribir “Arriba” y luego dale clic en Aceptar, para
validar el marcador que se ha creado.
De la misma forma creamos otro enlace interno en la parte inferior de la

página, ubica el cursor en un punto, y esta vez se llamará “Abajo”.
Los marcadores aparecerán con una flechita amarilla en la parte en don-

de los ubicaste, Arriba y Abajo respectivamente.
Figura No. 86
Ahora, para crear un vínculo que apunte a un marcador, debemos hacer
lo mismo que hicimos para asociar un enlace. Para ello vamos a seleccio-
nar la flecha que inserte como imagen que indica “bajar”, en el inicio de
la página, tú puedes hacerlo con un texto si es tu preferencia.
Damos clic en la opción Enlace del menú Insertar. Con esto nos apare-
ce la siguiente ventana:
73
Figura No. 87
Si damos clic sobre la flechita que se despliega, veremos enlistados los marca-
dores que creamos, en este caso escogemos #Abajo, damos clic en Aceptar.
Hacemos el mismo proceso para el caso de “subir”, seleccionamos la

imagen de la flecha que está en la parte inferior de la página y esta vez
escogeremos del desplegable #Arriba, damos clic en Aceptar.
Para visualizar lo que hemos hecho guarda todos los cambios desde el
botón Guardar de la barra de herramientas y luego dale clic en Navegar.
7.1.4 Borrar y editar enlaces
Para borrar o editar un enlace hacemos clic sobre él con el botón dere-
cho del ratón y aparecerá un menú flotante.
Figura No. 88
En este elegiremos la opción Propiedades de Enlace... y en la pestaña
Enlace tendrás que borrar el marcador de la flechita desplegable.
74
Figura No. 89
7.2 Actividades
1. Realice un mosaico de imágenes en una tabla y aplique enlaces

a otros sitios en cada imagen.
2. Aplique los enlaces a otros sitios entre botones.
CAPÍTULO VIII
En este capítulo publicaremos en la Web nuestro trabajo, sabremos que

es un validador de código HTML y validaremos nuestro código.
8.1 Validador HTML
Antes de hacer pública una página, esta no debe contener errores, por
eso debemos validar su código.
Un validador HTML simplemente comprueba la corrección de tu docu-

mento frente al DOCTYPE declarado. DOCTYPE se trata de una marca 75
que no necesita cierre que va antes de <HTML> y cuya función es facili-
tar información al servidor Web que aloja la página. La información fa-
cilitada por DOCTYPE se refiere al tipo de documento visualizado ade-
más de ser necesaria para la comunicación entre navegador y servidor.
DOCTYPE se debe escribir de forma estándar:
<!DOCTYPE HTML PUBLIC =”-//IETF//DTD HTML 4.0//EN”>
Si quieres verificar la validez de tu documento final, puedes usar el valida-

dor HTML de KompoZer. El validador HTML devolverá una lista de errores
de acuerdo al DOCTYPE HTML elegido. Si tu documento no tiene errores,
devolverá un mensaje de This Page Is Valid HTML 4.01 Transitional!
Si creamos un sitio Web a mano o componiendo directamente el código

de marcado, y el validador te devuelve errores en tu página, sim-
plemente corrige tu marcado. El validador HTML te proporciona el
número de línea en que se encuentra el error, ayudándote así a localizar
los problemas en tu documento.
Comprueba el fichero línea a línea, comenzando por la primera. Esto

quiere decir que un error que esté al comienzo de tu documento puede
resultar en más errores adicionales a lo largo de la página. Una buena
forma de trabajar los errores es corregir el primer error mostrado, y en-
tonces revalidar la página. A menudo descubriremos que corrigiendo
un problema al inicio del documento se resuelven unos cuantos
errores a la vez. Continuaremos haciendo esto hasta que todos los
errores estén corregidos, y el documento resultante sea válido.
8.2 Validación en KompoZer
Para validar nuestra página con el validador de KompoZer, damos clic en

el menú Herramientas y escogemos la opción Validar HTML, a conti-
nuación nos aparece una ventana que nos indica el archivo a validar en
nuestro caso “estadoCuentas.html”, así lo haremos con las demás páginas.
76
Figura No. 90
Una vez revisado el documento aparecerá la ventana que se muestra en

la figura No. 89, en caso de que todo esté bien:
8.3 Publicación de una página Web
Para publicar nuestra página debíamos primero crear un sitio Web en

donde se encuentra su estructura formada con carpetas y archivos. Si
recuerdas, en el capítulo III ya hicimos esto, así que una vez definido el
sitio Web, en el panel de la izquierda se mostrarán todos los archivos
y subcarpetas existentes.
77
Figura No. 91
Haciendo doble clic sobre un archivo del sitio, se abrirá en una pestaña
nueva de la zona de trabajo. Si se hace doble clic sobre una carpeta, se
mostrará el contenido de la misma, esto lo podrás ver en la ventana de
Administrador de sitios que es el lugar en donde se muestra lo que
esta publicado de tu sitio.
Figura No. 92
78 Figura No. 92
Por último, para que puedas ver todo tu sitio dale clic en Navegar y tu
sitio se mostrará en un buscador, Mozilla por ejemplo, ver figura No. 93
8.4 Actividades
1. Realizar una página Web personal, con los materiales que de-
seemos y la temática que consideremos más oportuna.
2. Para el diseño de la página debe considerar lo siguiente:
• Aplique o cree varias páginas Web usando hojas de estilo y en-
laces para poder acceder a ellas.
• Disponga de un texto con formatos diferentes según sea necesario.
• Aplique color o imagen al fondo de las páginas.
• Utilice imágenes de diferentes formatos pero que no dejen de
tener sentido con el texto que desea comunicar.
• Aplique las tablas de acuerdo a su conveniencia y necesidad.
GLOSARIO
KompoZer
Es un editor de páginas Web WYSIWYG multiplataforma basado en Mo-
zilla Composer, pero de ejecución independiente.
HTML
Su significado hyper text markup language (lenguaje de marcado de hi-
pertexto), es el lenguaje de marcado predominante para la elaboración
de páginas Web.
79
HOSTING
Hosting es una palabra del inglés que quiere decir dar hospedar o alo-
jar. Significa poner una página Web en un servidor de Internet para que
ella pueda ser vista en cualquier lugar del mundo entero con acceso al
Internet.
DOMINIO
Es un nombre y una dirección en el Internet.
DIRECCIÓN IP
Es una dirección electrónica propia y exclusiva (cuatro cifras) que identi-
fica el sitio donde se encuentra la página Web.
ESPACIO DISPONIBLE
A cada hosting se le asigna un espacio en el disco duro del servidor. El
espacio disponible en cada plan es suficiente (100, 200 o 300 MB). Un
sitio Web puede contener varios cientos de páginas de texto o de imá-
genes, o una sola página de información.
ANCHO DE BANDA
Es la cantidad de tráfico de red relacionado con su dominio. Una gran
cantidad de sitios Web usan menos de 2.000 Mb (2 Gb) de tráfico por
mes; sin embargo, sitios muy famosos pueden utilizar tres o cuatro ve-
ces más.
SERVICIOS FTP
FTP es el protocolo para la transferencia de archivo, con la ayuda del FTP,
se suben y bajan las páginas Web al servidor de Internet. Cada usuario
dispone en el tablero de control de un administrador de archivos y del
servicio de FTP para subir y bajar archivos y directorios al sitio. El servicio
de FTP está disponible a cualquier momento (24horas) del día.
CSS
Hojas de estilo en cascada (cascading style sheets), es un mecanismo
simple que describe cómo se va a mostrar un documento en la pan-
talla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la
80 información presente en ese documento a través de un dispositivo de
lectura. Esta forma de descripción de estilos ofrece a los desarrolladores
el control total sobre estilo y formato de sus documentos.
URL
Son las siglas de localizador de recurso uniforme (en inglés uniform re-
source locator), la dirección global de documentos y de otros recursos
en la World Wide Web.
CELDA
Una celda es el lugar donde se pueden introducir los datos.
ENLACE
Es un navegador Web de código abierto en modo texto.
INDICE
LINEAMIENTOS GENERALES DE LA CAPACITACIÓN.........................................3

INTRODUCCIÓN ................................................................................................................5
CAPÍTULO I...........................................................................................................................7
1.1 Edición de páginas Web.............................................................................................7
1.2 Cómo tener una página en Internet......................................................................8
1.3 Introducción a HTML.................................................................................................11
1.4 Software que utilizaremos......................................................................................12
1.5 Actividades...................................................................................................................12
CAPÍTULO II........................................................................................................................13
2.1 Instalar e iniciar KompoZer ....................................................................................13
2.1.1 Instalación en Windows........................................................................................13
2.1.2 Instalación en Linux...............................................................................................14
2.2 Abrir KompoZer..........................................................................................................17
2.3 Entorno de trabajo de KompoZer........................................................................18
2.4 Actividades...................................................................................................................21
CAPÍTULO III......................................................................................................................22
3.1 Diseño de nuestra página Web.............................................................................22
3.2 Creación de una Web................................................................................................24
3.2.1 Crear un sitio local..................................................................................................24
3.2.2 ¿Qué es un sitio Web?...........................................................................................24
3.3 Actividades...................................................................................................................27
CAPÍTULO IV......................................................................................................................28
4.1 Elementos básicos de una Web...........................................................................28
4.1.1 Características de texto........................................................................................28
4.1.2 Aplicación de viñetas............................................................................................33
4.1.3 Insertar imágenes..................................................................................................35
4.2 Visualizar el trabajo realizado................................................................................39
4.3 Actividades...................................................................................................................40
CAPÍTULO V.......................................................................................................................41
5.1 Aplicación de estilos.................................................................................................41
5.1.1 Hojas de estilo CSS.................................................................................................41
5.1.2 Creación de hojas de estilos...............................................................................42
5.2 Actividades..................................................................................................................46
CAPÍTULO VI......................................................................................................................47
6.1 Tablas..............................................................................................................................47
6.1.1 Insertar una tabla...................................................................................................47
6.1.2 Seleccionar elementos de una tabla..............................................................51
6.1.3 Insertar o eliminar filas y columnas................................................................52
6.1.4 Propiedades de la tabla......................................................................................54
6.1.5 Unir dos celdas.......................................................................................................57
6.1.6 Dividir una celda...................................................................................................59
6.1.7 Anidar tablas...........................................................................................................59
6.2 Actividades..................................................................................................................61
CAPÍTULO VII...................................................................................................................62
7.1 Enlaces..........................................................................................................................62
7.1.1 Tipos de referencia...............................................................................................62
7.1.2 Crear enlaces..........................................................................................................65
7.1.3 Enlaces internos o marcadores........................................................................71
7.1.4 Borrar y editar enlaces.........................................................................................71
7.2 Actividades.................................................................................................................74
CAPÍTULO VIII..................................................................................................................75
8.1 Validador HTML.........................................................................................................75
8.2 Validación en KompoZer........................................................................................76
8.3 Publicación de una página Web.........................................................................77
8.4 Actividades.................................................................................................................78
GLOSARIO.........................................................................................................................79
CRÉDITOS
Autoridades de la Universidad Central del Ecuador
Rector Dr. Edgar Samaniego Rojas

Vicerrector Académico Dr. Clímaco Egas
Vicerrector Administrativo y Financiero Dr. José Villavicencio
Director del DTIC-Administrado Convenio Ing. Lorena Balseca Córdova, Msg.
Coordinador Administrativo-Financiero Licda. Nidia Núñez
Coordinador Técnico y de Contenidos Ing. Susana Cadena, Msg.
Diseño Gráfico y Diagramación: Msc. Edison Benavides

Licdo. Marcelo Acuña
Tglo. Geovanny Quintana
Diseño del Portal Web: Ing. Franz del Pozo

Autor del Libro: Ing. Franz del Pozo
Srta. Majorie Torres
Autoridades Ministerio De Telecomunicaciones y de La Sociedad de la Información
Ministro Ing. Jaime Guerrero Ruiz

Subsecretario de la Sociedad de la Informción Eco. Byron Vásconez
Director de Alistamiento Digital Ing. Patricio Carvajal Núñez
Administrador del Proyecto Ing. Miguel Albán Villacis
Propuesta Contenidos PLANADI Ing. Diego Salazar Armijos
Equipo de Alistamiento Digital Ing. Jorge Ortega Poveda
Ign Daniel Garzón
Derechos de Autor:
Universidad Central del Ecuador
Autor
Ing. Franz del Pozo

Libro 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Libro 5

Uploaded by

Copyright:

Available Formats

MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR

CURSO DE PÁGINAS WEB

Una página Web es, en esencia, una tarjeta de presentación digital, ya

A lo largo de la capacitación se incluirán prácticas especialmente dise-

Esta modalidad de capacitación posee la flexibilidad de poder reforzar

Una página o sitio Web es una representación en Internet. Por ejemplo,

Por lo tanto el objetivo de este curso es ayudarte a adquirir los conoci-

En este capítulo veremos algunas generalidades de la edición de pági-

1.1 Edición de páginas Web

contenido HTML es un tipo de código en el que están escritas las pági-

Existen una serie de buenos editores de páginas Web, unos pagados

1.2 Cómo tener una página en Internet

Para poder poner una página Web en Internet, es necesario contratar

El precio por disponer de espacio propio en el servidor dependerá de

• El espacio en disco. El espacio en disco se refiere al espacio para

• Volumen de transferencia. El volumen de transferencia es la

Cuando se va a contratar un servicio de hospedaje es necesario con-

• .com. Es un sufijo de “company” o bien empresa. Se refiere a cual-

• .net. Es sufijo de “Internet”. Se refiere a cualquier sitio Web relacio-

• .org. Es sufijo de “organization”. Se refiere a cualquier sitio Web rela-

• .info. Es sufijo de “information”. Es una terminación nueva que en

Existe otro grupo de terminaciones relacionadas con un país:

• .us. Es sufijo de “United States”. Es una terminación para sitios Web

• .co. Se refiere a “Colombia”. Esta relacionado a sitios de Colombia.

• .ec. Se refiere a “Ecuador”. Es una terminación que tiene relación

En cualquiera de los casos, una vez que tengas tu espacio en Internet,

Toma en cuenta que es mejor no utilizar caracteres especiales como

él; ya que, por ejemplo, si en tu página quieres mostrar la imagen foto1.

1.3 Introducción a HTML

Las páginas Web están escritas en código HTML, su significado en inglés

Estas etiquetas no son visibles cuando el documento se muestra en un

Pero no te preocupes mucho ya que el software que vamos a utilizar

1.4 Software que utilizaremos

Mencionamos antes la variedad de editores que existen para hacer pági-

Además, es una herramienta con licencia gratuita, así que te lo podrás

1. Establezca tres ventajas de usar un editor gráfico.

En este capítulo vamos a instalar e iniciar el programa KompoZer.

2.1 Instalar e iniciar KompoZer

2.1.1 Instalación en Windows

Una vez descargado el programa comenzaremos a instalarlo como se

14 2.1.2 Instalación en Linux

Instalar KompoZer en Linux es muy fácil.

Descargamos el editor KompoZer, desde nuestro navegador de Internet

Damos click en el botón “Install Package”, en la ventana que nos indica la

La instalación del editor es inmediata como nos muestra la figura No. 7

2.2 Abrir KompoZer

La opción que tienes para iniciar KompoZer es desde el botón Inicio –

2.3 Entorno de trabajo de KompoZer

Barra deTítulo Barra de Menús Barra de Herramienta

Una vez arrancado el programa nos encontraremos con una ventana de

Esta ventana contiene los siguientes componentes:

Barra de título: A la izquierda de esta barra aparece el título de la pági-

Barra de menús: Contiene los menús Archivo, Ver, Insertar, Formato,

Barra de herramientas: En ella aparecen botones con las opciones de

Ventana de área de edición: Esta área es el espacio de trabajo donde

Barra de modo de edición: En esta aparecen tres pestañas y un menú

• Normal (o modo WYSIWYG), Vista preliminar y Etiquetas HTML

1. Una vez instalado el editor gráfico en el computador, estudie las

3.1 Diseño de nuestra página Web

Debemos tener en mente lo que queremos hacer, para luego no tener

• Definición de las relaciones entre los bloques de información; es

• Creación de un sistema de navegación. El sistema de navegación

3.2 Creación de una Web