Libro5

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 hiperenlaces; 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.
3
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 materiales entregados a los participantes estarán compuestos por contenido 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 Internet hace que cada vez sean más los usuarios en todo el mundo que interactú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 empresa 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 conocimientos básicos para elaborar páginas Web y aprender a manejar herramientas que te permitan hacerlo, incorporando en su diseño diferentes
tipos de estilos de textos, imágenes, tablas, fondos, marcadores e hipervínculos, efectos dinámicos y algunos recursos más y finalmente su publicación en un servidor Web.
5
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
CAPÍTULO I
En este capítulo veremos algunas generalidades de la edición de páginas 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 familiarices con este código.
1.1 Edición de páginas Web
7
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
DISEÑO DE PÁGINAS WEB
contenido HTML es un tipo de código en el que están escritas las páginas Web y cuyas características las veremos más adelante. Puede utilizarse 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. Aunque 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.
8
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 funcionalidad a las páginas, sin la necesidad de programar manualmente el
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 “hosting”. 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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, incluyendo 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.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud, inclusión de publicidad 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 hosting gratuito o pagado.
Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, de esto suele encargarse la propia empresa 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 terminaciones 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:
9
DISEÑO DE PÁGINAS WEB
•
.com. Es un sufijo de “company” o bien empresa. Se refiere a cualquier sitio Web con actividad comercial.
•
.net. Es sufijo de “Internet”. Se refiere a cualquier sitio Web relacionado 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 relacionado a instituciones, establecimientos educacionales, organizaciones 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:
10
•.us. Es sufijo de “United States”. Es una terminación para sitios Web
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 carpetas. 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
é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 etiquetas que marcan el inicio y fin de cada elemento de la página.
<html>
<head>
<title> Mi página </
title>
</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 etiqueta 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 tendrá un borde de grosor 1.
11
DISEÑO DE PÁGINAS WEB
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á insertando este código.
1.4 Software que utilizaremos
Mencionamos antes la variedad de editores que existen para hacer páginas 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 basado 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, tablas, 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?
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 KompoZer, 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
2.1.1 Instalación en Windows
Figura No. 3
13
DISEÑO DE PÁGINAS WEB
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 escritorio”, 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 paralelo a los archivos .exe de Windows, como nos muestra la figura No. 5 y
procedemos a la instalación..
Figura No. 6
15
DISEÑO DE PÁGINAS WEB
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
16
La instalación del editor es inmediata como nos muestra la figura No. 7
y esperamos que se instalen los paquetes.
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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 izquierda de la ventana principal.
•
Hacer clic sobre el menú Archivo y elegir la opción Salir.
•
Pulsando la combinación de teclas Ctrl+Q.
DISEÑO DE PÁGINAS WEB
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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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ágina 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.
DISEÑO DE PÁGINAS WEB
Figura No. 15
20
Ventana administrador de sitios Web: En ella configuraremos nuestros 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 ayudará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).
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 etiquetas con sus contenidos para realizar acciones sobre ella como dar formatos, 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.
21
DISEÑO DE PÁGINAS WEB
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
22
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 además se perderá mucho tiempo.
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. Consiste en decidir qué va en cada página del Web.
Figura No. 20
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
•
Definición de las relaciones entre los bloques de información; es
decir, debemos realizar una construcción de una estructura jerárquica. 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
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 conexiones que éstos crean constituyen rutas de exploración, caminos 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 está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
23
DISEÑO DE PÁGINAS WEB
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, archivos 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Entonces antes de empezar tendrás que crear una carpeta en tu disco
llamada por ejemplo “cursoWeb”, una vez hecho esto, en el menú Archivo, 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 podrá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 devuelve la página con ese nombre, ver figura No. 23.
Por ejemplo, si escribiéramos la dirección genérica http://www.miPagina.com en el navegador, éste intentaría cargar la página http://www.miPagina.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 podría navegar por el sitio a no ser que se escribiese exactamente http://
www.miPagina.com/nombrepagina.html
Figura No. 24
25
DISEÑO DE PÁGINAS WEB
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 ventana 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 ejemplo, ”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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 nuestro sitio “cursoWeb”, como indica la figura No. 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 diseñ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.
27
DISEÑO DE PÁGINAS WEB
CAPÍTULO IV
A lo largo de este capítulo trataremos los elementos básicos que tiene 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 generamos 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 legibilidad del mismo.
En las páginas Web de preferencia se usa el subrayado exclusivamente para los enlaces.
La cursiva es un formato apropiado para titulares y está bien para enfatizar. Cuando quieras destacar una palabra, emplea negrita o cursiva.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
•
Procura no utilizar una fuente que no sea muy común, ya que cuando 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
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.
29
DISEÑO DE PÁGINAS WEB
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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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
DISEÑO DE PÁGINAS WEB
Figura No. 33
32
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
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 color 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Señala la opción Usar colores personalizados y dale clic en Fondo, escoge el color que desees de la paleta de colores y dale clic en Aceptar,
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 escribirlos 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:
33
DISEÑO DE PÁGINAS WEB
Figura No. 36
A continuación escoge el formato Titulo2 escribe “Estudios Realizados”,
34
luego utiliza viñetas dando clic en el botón Lista de viñetas
la barra de formato para escribir lo siguiente:
•
•
•
de
Primaria:
Secundaria:
Superior:
Figura No. 37
Luego de esto, tendrá que quedarte algo como se muestra en la figura
No. 37.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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.
DISEÑO DE PÁGINAS WEB
Figura No. 39
Para insertar una imagen en una página vamos al menú Insertar escogemos la opción Imagen, o desde el botón Insertar imagen de la Barra
de herramientas,
le damos clic y aparecerá una ventana para poder configurar nuestra imagen, ver figura No. 39.
36
Aquí elegimos el archivo de la imagen que queramos insertar, lo buscamos en nuestro directorio, cabe indicar que antes debes crear una carpeta 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Luego señalas No usar texto alternativo y te vas a la pestaña de Dimensiones (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.
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.
37
DISEÑO DE PÁGINAS WEB
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 sobre 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Toma en cuenta que si la imagen es más pequeña que la zona de visualizació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:
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.
39
DISEÑO DE PÁGINAS WEB
Figura No. 46
En la ventana que aparece dale clic en la opción Ejecutar aplicación,
ver figura No. 46.
4.3 Actividades
40
1.Plantee los errores que debe evitar, en el momento de comenzar 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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
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 modificar 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 modificar 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.
41
DISEÑO DE PÁGINAS WEB
5.1.2 Creación de hojas de estilos
KompoZer dispone de un editor de hojas de estilo denominado CaScadeS. 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 información del contenido de la del estilo.
42
Figura No. 47
Vamos a crear un estilo para un documento html. En primer lugar creamos un archivo con el nombre “index1” y lo guardaremos en nuestra
carpeta “cursoWeb”; del menú Herramientas escogemos la opción Editor 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Figura No. 48
A continuación, da click en la opción Regla de estilo, aquí debes ponerle 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.
Figura No. 49
Las pestañas que se encuentran en la parte superior te muestran las opciones 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
43
DISEÑO DE PÁGINAS WEB
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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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
Figura No. 52
Si nos fijamos en la URL aparece todo el directorio en el que se encuentra 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
45
DISEÑO DE PÁGINAS WEB
Para aplicar nuestra hoja de estilo, escribimos normalmente en el documento 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 quieras 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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
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 sabemos la guardaremos en nuestra carpeta “cursoWeb”.
47
DISEÑO DE PÁGINAS WEB
48
Figura No. 55
Para insertar una tabla puedes darle clic en el botón de la barra de herramientas, 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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.
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 Espaciado entre celdas indica la distancia entre las celdas de la tabla, como
se puede observar en la figura No. 58.
49
DISEÑO DE PÁGINAS WEB
En principio nosotros escogeremos unta tabla de 2 columnas y 4 filas.
Figura No. 59
50
Número de cuenta
168923147200
Saldo
500
Saldo a corte
350
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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 opciones 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.
DISEÑO DE PÁGINAS WEB
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, primero selecciona la tabla y desde la opción de menú Tabla escogemos
Insertar, seleccionando la opción deseada.
•
•
•
•
•
52 •
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 columna en que está el cursor.
Columna posterior: inserta una columna a la derecha de la columna en que está el cursor.
Celda anterior: inserta una celda a la izquierda de la celda en que
está el cursor.
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 opció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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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
Figura No. 65
Repetiremos el proceso anterior y llenamos con los datos que se muestran en la figura No. 65.
Figura No. 66
Cuando terminemos se verá como se observa en la figura No. 66.
53
DISEÑO DE PÁGINAS WEB
Figura No. 67
Y nos daremos cuenta de que insertamos filas demás, para borrarlas selecciona 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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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, haciendo 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.
Color de fondo, esta opción te permite darle un color a la tabla o simplemente 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 elemento al que quieras darle formato, los botones Anterior y Siguiente te permiten 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.
55
DISEÑO DE PÁGINAS WEB
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 datos, 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Figura No. 70
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 utilizar 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
57
DISEÑO DE PÁGINAS WEB
Figura No. 71
58
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
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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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ú Tabla 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.
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
59
DISEÑO DE PÁGINAS WEB
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
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Para que practiques un poco con este tema de las tablas realiza los cambios 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 porque 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 colores, letra, tamaños, imágenes, etc.
6.2 Actividades
1.Prueba a insertar una imagen con extensión gif dentro de la tabla.
2.Realiza un mosaico de imágenes de distintos formatos usando
una tabla.
3.Aplica un nuevo formato a tu imagen.
61
DISEÑO DE PÁGINAS WEB
CAPÍTULO VII
Vamos a ver qué son los Enlaces, sus tipos, para qué sirven y cómo crearlos, 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ínculos.
• 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/pagina/pagina1.html.
La referencia absoluta es independiente de la ubicación de la página 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 ubicación del la página. Es decir, partimos de la carpeta en la que se
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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/pagina/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.
De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego nos movemos dentro de la carpeta
secciones para mostrar el archivo seccion1.html. Esta opción depende de la ubicación del archivo y puede no funcionar correctamente 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 crearía como /pagina/secciones/seccion1.html.
63
DISEÑO DE PÁGINAS WEB
64
Por tanto, podríamos poner ese vínculo en cualquier página del sitio 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 correspondan exactamente a los nombres de los archivos y carpetas en el servidor local. Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallas en los enlaces.
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í.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 varias 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
enlace y añadir la dirección url correspondiente.
Cualquiera de estas opciones producirá un cuadro de diálogo para definir el enlace.
65
DISEÑO DE PÁGINAS WEB
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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Figura No. 78
Podremos visualizar la ventana de diálogo, como en la figura No. 78.
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 documento 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.
67
DISEÑO DE PÁGINAS WEB
68
Figura No. 79
Dale clic en Abrir y luego en Aceptar.
Figura No. 80
Ahora enlacemos otra página pero el vínculo será un texto.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
Es exactamente lo mismo, tendrás que seleccionar primero el texto, luego 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
DISEÑO DE PÁGINAS WEB
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 electró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
70
Página “datos.html”
Figura No. 83
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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.
DISEÑO DE PÁGINAS WEB
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 proporcionar 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 marcador, 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 enlace, 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 donde los ubicaste, Arriba y Abajo respectivamente.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 seleccionar 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 aparece la siguiente ventana:
73
Figura No. 87
Si damos clic sobre la flechita que se despliega, veremos enlistados los marcadores 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.
DISEÑO DE PÁGINAS WEB
7.1.4 Borrar y editar enlaces
Para borrar o editar un enlace hacemos clic sobre él con el botón derecho 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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 documento frente al DOCTYPE declarado. DOCTYPE se trata de una marca
que no necesita cierre que va antes de <HTML> y cuya función es facilitar información al servidor Web que aloja la página. La información facilitada por DOCTYPE se refiere al tipo de documento visualizado ademá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 validador 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, simplemente 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.
75
DISEÑO DE PÁGINAS WEB
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 entonces 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 continuació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:
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
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
DISEÑO DE PÁGINAS WEB
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 deseemos 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 enlaces 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.
MINTEL - UNIVERSIDAD CENTRAL DEL ECUADOR
GLOSARIO
KompoZer
Es un editor de páginas Web WYSIWYG multiplataforma basado en Mozilla Composer, pero de ejecución independiente.
HTML
Su significado hyper text markup language (lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboración
de páginas Web.
HOSTING
Hosting es una palabra del inglés que quiere decir dar hospedar o alojar. 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 identifica 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.
79
DISEÑO DE PÁGINAS WEB
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 veces 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.
80
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 pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la
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 resource 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
RectorDr. 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
MinistroIng. 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:
DISEÑO DE PÁGINAS WEB
Universidad Central del Ecuador
Autor
Ing. Franz del Pozo