Guia Paginas Web

DGB (DIRECCIÓN GENERAL DEL BACHILLERATO)
BLOQUE I.
MI PRIMERA PÁGINA WEB
1.1. Introducción
El objetivo de este curso es enseñar a crear páginas web, partiendo

desde cero y usando herramientas gratuitas.
Para seguir el curso sólo necesitas un ordenador y ganas de aprender,

al final del curso podrás crear páginas.
El lenguaje que se utiliza para crear una página web es el HTML,

Hyper Text Markup Lenguage (Lenguaje de Marcas de Hipertexto) Hay
muchos cursos de HTML pero considero que este es diferente porque
pretende ser un curso integral de creación de páginas web.
Explicare brevemente que quiero decir con esto. Lo fundamental para

escribir páginas web es saber HTML pero no es suficiente. Si quieres
poner una imagen en tu página necesitarás saber un poco sobre
gráficos web, para recortar la imagen al tamaño adecuado, si quieres
poner un menú desplegable es conveniente que conozcas algo sobre
JavaScript, si quieres recoger datos de los usuarios mediante un
formulario es conveniente hacerlo con un lenguaje tipo PHP.
También es conveniente utilizar un editor web para facilitar la escritura

de páginas web, como KompoZer, para que tu página sea agradable
es conveniente saber algo sobre diseño web, y por último para que
todo el mundo mundial vea tu trabajo necesitarás subir tu página a un
servidor de Internet y darla a conocer.
Pues bien, todo esto y un poco más es lo que hay en este curso.
Además intento explicarlo de forma que lo pueda entender cualquier
persona sin conocimientos previos sobre todos estos temas. Dicho así,
parece una misión casi imposible, esperamos que sigas todo el curso y
llegues al final cumpliendo estas expectativas. Es un reto complicado
ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 1
pero esperamos crear un curso que sea un punto de partida a este

apasionante mundo de la comunicación global a través de Internet y te
dote de la visión general que te permita avanzar hasta lograr crear
páginas web atractivas y completas. A final del curso estamos seguros
que lograrás crear conocimiento y ponerlo a disposición de las
personas, y algo del espíritu de colaboración y gratuidad desde el que
está hecho este curso quizás llegue a contagiarte un poco. Se acaba
dando parte de lo que se recibe.
Por supuesto, tratar todos estos temas en profundidad exigiría un

curso de un tamaño enorme, pero el objetivo es dar una introducción a
cada tema, de forma que el alumno se pueda desenvolver en las
tareas básicas y tenga las nociones suficientes para poder ampliar lo
que más le interese en otros sitios.
1.2. Contenidos
Para que sea más fácil de entender hemos desarrollado el temario de
forma progresiva mediante la creación de un sitio web sobre flores,
introduciendo cada concepto según se va necesitando.
Así, primero (tema 2,3) veremos los conceptos básicos de HTML,

escribir texto, darle formato, hiperenlaces, estilos, etc. Luego (tema 5)
explicaremos brevemente el editor KompoZer, luego veremos como
estructurar una página web y un sitio web (tema 6), más adelante
introduciremos el programa Gimp para trabajar con gráficos (tema 9),
unas ideas para crear gráficos vectoriales, como por ejemplo un
logotipo para la página, con el programa Inkscape. En el siguiente
tema (tema 10) introduciremos conceptos sobre Java Script, y luego un
poco de PHP (tema 11). En los temas finales, teorizaremos un poco
sobre cómo publicar nuestro sitio y como conseguir que aparezca en
los buscadores y tenga visitas.

1.3. Metodología
Como hemos dicho los diversos conceptos los introduciremos según
sean necesarios a medida que vamos desarrollando un sitio web.
Primero crearemos una página sencilla para introducir los elementos
básicos de HTML, luego iremos añadiendo elementos a esa página,
como un menú, gráficos, formularios, etc.
En algunos temas, sobre todo al principio, la explicación será un poco

más teoría y general. Muchas veces, encontrarás la opción de probar
el código que se está explicando. Te animamos a que hagas cambios
sobre esos ejemplos y los vuelvas a probar, para ver qué sucede.
Al final de cada tema encontrarás unos ejercicios propuestos. Con

ellos, irás creando otro sitio con lo visto en cada tema.
1.4. Alternativas
Crear páginas web es la forma básica de comunicar en Internet, pero
no la única, ni la más adecuada para todos los casos.
Si te gusta la informática y quieres tener tu propio sitio web como una

afición, o si quieres crear un sitio web para tu club de fútbol, tu
pequeña empresa o para dedicarte profesionalmente al mundo de
Internet, este curso, probablemente, te interesará mucho.
1.5. Servidores y direcciones URL

Cuando visitamos páginas web en realidad estamos accediendo a
archivos en un servidor web. La dirección o URL tiene este formato:

http://www.nombredominio.com/directorio/paginaweb.ht
m
Donde http:// es el protocolo y www. Indica el sistema de páginas

web. Habrás observado que no hace falta escribir esto en el
navegador. Pero es porque el navegador se encarga de añadirlo, no
porque no sea necesario. nombredominio.com es el nombre del
sitio. Al ir directamente ahí, vamos a su página de inicio. La última
parte indica el archivo del sitio que estamos viendo. En este caso, una
página llamada paginaweb.htm que está en una carpeta llamada
directorio.
Podemos visitar una dirección desde un buscador o desde un enlace

en otra página. Podemos teclear la dirección en la barra de direcciones
del navegador o acceder desde nuestros favoritos.
Internet está formado por un conjunto de servidores conectados. Un

servidor es un ordenador conectado a la red de acceso a Internet que
dispone de un programa que es capaz de recibir una URL y devolver
una página web al que hizo la petición.
Podríamos decir que Internet está formado por una gran cantidad
de ordenadores que pueden intercambiar información entre ellos.
Es una gran red mundial de ordenadores.
Los ordenadores se pueden comunicar porque están unidos a través

de conexiones y gracias a que utilizan un lenguaje o protocolo común,
el TCP/IP.

Según el esquema que podemos ver en la imagen, un usuario se

conecta a la red (a través de un módem o un router, ya sea vía línea
telefónica, cable, satélite, etc...). A partir de este momento el
protocolo TCP/IP entra en juego, gracias a él puedes comunicarte con
tu Proveedor de servicios de Internet (ISP) dándole a conocer tu
dirección física.
Utilizando TCP/IP, el ISP asigna una dirección IP a tu PC y en ese

momento se te da acceso a la red.
Cuando queremos acceder a una página proporcionamos un dominio

que es traducido en los Servidores DNS y localizado. Cuando
sabemos en qué Servidor Web se encuentra la página que queremos
visitar se procede a su descarga y visualización en el navegador del
PC.
1.6. ¿Qué es una página web?

Una página web es un documento de texto con marcas, llamadas
etiquetas (tags en inglés). Cuando este documento se ve a través de
un navegador web, las etiquetas se interpretan y se visualiza el
documento como una página web. Las etiquetas no se muestran pero
determinan el aspecto de la página, y otras características, por
ejemplo, si el texto es un enlace, en la etiqueta se indica, la página a la
que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto,

seremos capaces de escribir una página web. Sólo necesitamos
conocer el lenguaje de las etiquetas o HTML.
Vamos a comenzar por escribir una página web muy sencilla. Para ello
utilizaremos un editor de texto sin formato, como puede ser el Bloc de
notas (gedit) incluido en OppenOffice. Puedes encontrarlo en
Aplicaciones, accesorios y editor de textos. El aspecto del Bloc de
notas es muy simple, una hoja en blanco con una barra de menús.
Practica 1-B1:
Escribiremos el siguiente código. Más adelante ya veremos qué es

cada elemento:
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>

</body>
</html>
Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos

de explicar que es la extensión de un archivo. La extensión indica de
qué tipo es un archivo. La extensión son las tres letras que van
después del punto al final del nombre de un archivo (por ejemplo,
imagen.gif o documento.doc). Puedes abrir cualquier carpeta para
comprobarlo.
Vamos a continuar guardando la página. Pulsamos en el menú

Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo
Primera. Si ahora pulsásemos Guardar, se guardaría con la extensión
txt, que indica que es un documento de texto sin formato. Para
guardarlo como una página web, debemos de emplear la extensión
.htm (o .html). Por lo que completamos el nombre para que quede
Primera.ht
m y
pulsamos
Guardar.
Nota: Es conveniente que guardes los archivos creados durante el

curso en la misma carpeta.
Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la

que hemos guardado el archivo y hacemos doble clic sobre el. Como el
archivo tiene extensión .htm, se abrirá la página con el navegador que
tengamos como predeterminado. Por ejemplo, en Mozilla Firefox, el
resultado se ve así:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el

documento del Bloc de notas, verás que todo lo que aparece entre los
signos < y > no se muestra. Esos signos delimitan una etiqueta de
HTML, y todas las que hemos utilizado siguen el formato
<etiqueta>contenido</etiqueta>. Por ejemplo, la etiqueta
<title> contiene el texto que se mostrará como título de la página, y
la etiqueta <p> indica un párrafo con texto normal.
Por lo tanto, un navegador web es una aplicación capaz de interpretar

el código HTML, formado por etiquetas y mostralo debidamente
formateado. En cualquier momento, podemos ver el código HTML de la
página que estamos viendo. En Internet Explorer, podemos hacerlo
desde el menú Ver → Código fuente, y se mostrará utilizando el Bloc
de notas. En Mozilla Firefox lo hacemos también desde el menú Ver,
eligiendo la opción Mostrar el código fuente de la página (teclas
Ctrl + U), y muestra el código fuente formateado con colores. Puedes
probarlo viendo el código fuente de esta página.

1.7. Un sitio web

Cuando tenemos varias páginas, podemos organizarlas en un sitio
web. Un sitio no es más que una carpeta que se encuentra en un
equipo informático, ya sea nuestro ordenador personal o un potente
servidor. La primera carpeta es la carpeta raíz. Por ejemplo, si
accedemos a "www.hotmail.com", estamos accediendo a la carpeta
raíz del sitio de Hotmail.
Cuando escribimos "www.hotmail.com" en el navegador, en realidad

estamos accediendo a la página www.hotmail.com/index.htm, es
decir, al escribir una dirección que no acaba en .html (o en .html), el
navegador lo interpreta como el nombre de una carpeta y busca en ella
un archivo que se llame index.htm, si no lo encuentra devuelve el
mensaje del tipo "No se puede encontrar la página web".
Tal como lo haríamos con una carpeta de Windows, podemos

organizar nuestro sitio con subcarpetas. Por ejemplo, una carpeta con
todas las imágenes, otra con los vídeos, etc.
Coloquialmente, es frecuente referirse a un sitio web sólo como página

web, por ejemplo "se ha actualizado la página web del ministerio",
aunque no nos estemos refiriendo a una página en concreto.
Veremos más detenidamente qué es un sitio web cuando creemos los

sitios para nuestras páginas, más adelante.

EVALUACIÓN INTEGRADORA
BLOQUE 1
MI PRIMERA PÁGINA WEB
Sólo una respuesta es válida por pregunta. Subraya la respuesta que

consideres correcta.
1. Una página web...

a) Es un archivo que contiene texto, delimitado por marcas.
b) Es un archivo, con datos sólo entendibles por un
ordenador.
c) Es una imagen, una copia de una página física.
2. Las etiquetas HYML, se delimitan por los caracteres...
a) [ y ]
b) < y >
c) { y }
d) ^ y ^
3. Para crear una página web utilizamos...
a) Programas específicos para esta tarea, normalmente muy

avanzados.
b) Un procesador de texto, como Writer u Openoffice
d) Cualquiera de los anteriores.
4. Un navegador web es...
a) Una aplicación que gestiona y clasifica las páginas web.
b) Una página que nos permite buscar información en la web.
c) Una aplicación que interpreta el código de una página y
nos lo muestra formateado.
d) Una aplicación que nos permite crear y editar páginas
web, desde su código fuente.
5. ¿Cuáles de estas extensiones de archivo corresponden a

una página web?
a) La extensión .css
b) La extensión http o https.
c) La extensión html.
d) Cualquiera de las anteriores.
6. Un sitio web...
a) Es un equipo que almacena las páginas web.

b) Es la agrupación de varias páginas relacionadas en un
directorio común.
c) Es lo mismo que una página web.

BLOQUE II.
HTML BÁSICO
A continuación vamos a ver los elementos básicos o fundamentales del

HTML. Primero veremos la estructura general de las etiquetas, luego la
estructura básica de la página, a continuación empezaremos a colocar
cosas en la página, primero texto, luego imágenes, enlaces y por
último hablaremos brevemente del elemento que nos sirve para
colocar cada cosa en el sitio que queramos, las capas.
2.1. Etiquetas
El lenguaje HTML se basa en etiquetas, por eso es importante

entender bien la sintaxis de las etiquetas.
Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.
Las etiquetas siempre van contenidas entre los signos de desigualdad

< y >. Por ejemplo <body>,<title> o <p>.
Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada

por el signo /. Por ejemplo <body> (apertura) y </body> (cierre).
Entre la apertura y el cierre, está el contenido de la etiqueta, que
puede ser texto u otras etiquetas, depende del tipo de etiqueta.
Algunas etiquetas, no tienen contenido, y se cierran sobre sí mismas.
Esto se expresa colocando la apertura y el cierre en la misma etiqueta,
como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta
<br /> escribe un salto de línea.
Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que

aparece es el nombre o identificador de la etiqueta. A parte,
podemos encontrar atributos con sus valores, siguiendo el formato
<etiqueta atributo1="valor" atributo2="valor">. La
forma correcta de escribirlo es escribir el nombre de la etiqueta y los
atributos en minúscula, y los valores contenidos entre comillas dobles.

Si un atributo tiene más de un valor, se escriben todos los valores
dentro de las mismas comillas, separados por espacios en blanco, por
ejemplo <etiqueta atributo="valor1 valor2">.
Hasta hace poco, lo más usual a la hora de escribir páginas web era
que cada etiqueta tuviera bastantes atributos, que se referían a
propiedades del formato o representación de los elementos. La
tendencia actual es la de separar el formato del contenido,
descartando estos atributos, sustituyéndolos por propiedades de
estilo.
Por ejemplo, para escribir la siguiente línea:
Bienvenidos a www.COBAEH.es
Antes, sin estilos:
<p align="center"><font color="#993366" size="4"

face="Comic Sans MS, Arial, MS Sans
Serif">Bienvenidos a www.cobaeh.es</font></p>
Ahora, con estilos:
<p class="presentacion">Bienvenidos a
www.cobaeh.es </p>
Como veremos en el siguiente tema, en otro lugar se definen las

características del estilo.
2.2. Estructura básica de la página
Todo el documento HTML viene contenido dentro de la etiqueta

<html></html>.
Dentro de la etiqueta <html>, encontramos dos subdivisiones, la

cabecera, delimitada por las etiquetas <head></head> y el cuerpo,
delimitado por las etiquetas <body></body>. Por lo tanto, el aspecto

básico de cualquier página web, es el siguiente:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
La etiqueta <head> contiene información sobre la página. Por ejemplo

contiene etiquetas que pueden decir de qué va la página, el título que
debe de mostrar en la barra del navegador, o código javascript y
estilos, que pueden estar en el propio encabezado o como llamadas a
otros archivos. Normalmente, lo que contiene esta etiqueta no se
muestra en el navegador.
Iremos viendo lo que puede contener esta etiqueta a medida que nos
haga falta. De momento sólo comentaremos que obligatoriamente
debe de contener la etiqueta <title></title>, que contiene el
título de la página, que es lo que se ve en la barra de título del
navegador.
En el <body> encontramos el contenido de la página, lo que se ve a

través del navegador: texto, imágenes, enlaces, tablas, etc...
En el siguiente ejemplo, puedes ver que hemos modificado el código

que utilizamos en la página Primera.htm creada en el tema anterior.
En él vemos los elementos que hemos comentado. Hemos añadido la
etiqueta <br /> para saltar de línea. Esta es la primera página del
sitio que vamos a ir construyendo a lo largo del curso.

Practica 1-B2
<html>
<head>
<title>COBAEH. COLEGIO DE BACHILLERES DEL ESTADO DE HIDALGO</title>
</head>
<body>
<p> Bienvenido a Cobaeh
<br /> En esta web encontraras información sobre el
colegio de bachilleres y nuestra oferta educativa. </p>
</body>
</html>
Puedes escribirlo en kompozer en un nuevo documento y pulsar en

Visualizar el código escrito esto hará que se abra una ventana o una
pestaña en tu navegador en la que podrás ver cómo queda la página.
Es equivalente a lo que hicimos en el tema anterior con el bloc de
notas pero de una forma más cómoda para ti. Observa como los
espacios en blanco no son tenidos en cuenta, un poco más adelante
volveremos sobre este tema.
Luego puedes añadir un salto de línea y un nuevo texto "Contamos

con la capacitación en Informática" y volverlo a visualizar.
2.3. Estructura del texto

Ya hemos comentado que todo el texto de la página estará dentro del
<body>, que a su vez estará dentro del <html>. El texto dentro del
<body>debe estar dentro de párrafos. En HTML, los párrafos se
identifican con la etiqueta <p></p>. Dentro de los párrafos
colocaremos texto e imágenes, y algunas etiquetas que nos permitan
dar formato al texto, pero no podemos tener otros párrafos anidados.
A su vez, disponemos de encabezados que nos permiten organizar el

texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al
<h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para
poner el rótulo principal de la página, <h2> para los títulos de los

apartados, <h3> para los apartados de segundo nivel, etc. El texto de
cada apartado iría contenido en párrafos <p></p>.
Una de las peculiaridades del texto, es que los espacios en blanco

consecutivos y saltos de línea no se muestran como en el código
fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por
ejemplo, si en el código fuente escribimos Bienvenido a Cobaeh se
verá Bienvenido a Cobaeh. Si queremos poner varios espacios
seguidos, utilizaremos el código html para el espacio, .
El navegador también ignora los saltos de línea. Así si dentro de un

párrafo colocamos varios saltos de línea pulsando Intro, estos no se
verán. Como ya vimos para crear un salto de línea dentro de un
párrafo, utilizamos la etiqueta <br />.
Practica 2 B-2
Realiza el siguiente ejemplo:
<html>
<head>
</head>
<body>
<h1> Bienvenido a Cobaeh </h1>
<h2> " Plantel Tlahuelilpan " </h2>
<h3> Presentación </h3>
<p> En esta web encontraras información sobre el
colegio de bachilleres y nuestra oferta educativa. >
Contamos con la * Capacitación en Informática * </p>
<h2> Contacto </h2>
<p> Si Gustas comunicarte con nosotros y ser parte de nuestra familia
Cobaeh. Comunicate al Tel. 76378 61761; Te esperamos!!! </p>
</body>
</html>

Es interesante utilizar encabezados, ya que muchos programas podrán

generar tablas de contenido a partir de cómo hayamos estructurado
nuestra página.
A la hora de escribir texto, hay más cosas que hemos de tener en

cuenta relativas al idioma y a los caracteres especiales, como las letras
acentuadas y la ñ. Los caracteres más utilizados, tienen también un código
html propio, como vemos en la siguiente tabla:
CARACTER PRESENTACION CARACTER PRESENTACION
< < € €
> > ç ç
á á Ç Ç
Á Á ü ü
É É Ü Ü
é é & &
í í ¿ ¿
Í Í ¡ ¡
ó ó " "
Ó Ó · ·
ú ú º º
Ú Ú ª ª
ñ ñ ¬ ¬
Ñ Ñ © ©
Espacio ® ®

Utilizar estos códigos nos asegura que no haya ningún problema al visualizar
nuestra página.
Practica 3 B-2
1. Abre un documento en blanco con el bloc de notas, y

guárdalo con el nombre que quieras.
2. Dentro del documento, crea las etiquetas que forman la
estructura de la página:
3. <html>
4. <head>
5. </head>
6. <body>
7. </body>
</head>
3. Dentro del head, añade el título de la página con la etiqueta

<title>:
<title>Ejercicio de HTML</title>
4. Dentro del body, añade el siguiente encabezado 1:

<h1>Página de ejemplo</h1>
5. A continuación, añade el siguiente encabezado 2: <h2>Texto

normal</h2>.

6. Añade el siguiente párrafo: <p>El ñandú común es un ave

sudamericana muy parecida al avestruz.</p>.
7. Añade el siguiente párrafo: <p>Este ave, es omnívora y

no puede volar, aunque es una gran corredora.</p>
8. Añade el siguiente párrafo con saltos: <p>Otras aves

emparentadas con el ñandú son: <br /> - El
avestruz<br /> - El emú<br /> - El kiwi.</p>.
9. Añade el siguiente encabezado 2: <h2>Caracteres

especiales</h2>.
10. Añade el siguiente párrafo: <p>El ñandú

común es un ave sudamericana muy parecida
al avestruz.</p>.
11. Guarda la página y pruébala.
12. Comprueba que el tercer párrafo muestra saltos de línea, aunque no

aparezcan en el código fuente.
13. Comprueba que el primer y último párrafo se ven iguales aunque

están escritos de distinta forma.
2.4. Imágenes
Básicamente, en páginas web nos encontramos tres tipos de

imágenes: GIF, PNG y JPG. Puedes ver con más detalle cada formato
en este básico.
Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para

imágenes con grandes áreas de un mismo color o de tonos no
continuos. Cuantos menos colores tenga la imagen, menos ocupará.
Suelen utilizarse con gran frecuencia, ya que permiten contener
transparencias y animación.
Formato PNG:
El formato GIF es un formato propietario de Compuserve, aunque su

uso está permitido a todo el mundo. Por eso se creó el formato PNG,
que es libre y está un poco mejorado con respecto al GIF, aunque su
funcionalidad es muy parecida. A pesar de que se recomienda el uso
del PNG, el formato GIF sigue estando mucho más extendido.
Los formatos PNG-24 y PNG-32 son especialmente indicados cuando la imagen tiene
degradados y semitransparencias, ya que son los únicos formatos que las soportan
correctamente.
Formato JPG o JPEG:
Si pensamos en una fotografía, los formatos anteriores se quedan cortos. Cualquier

foto contiene millones de colores, y al mostrarla con 256 se perdería mucha calidad.
Además, en las fotografías no hay áreas grandes de un sólo color, por lo que el archivo
resultante sería grande. En estos casos, el mejor formato es el JPG, que está optimizado
para fotografías con muchos colores, que se mostrarán con una gran calidad.
Por lo tanto, utilizaremos GIF o PNG para gráficos simples, dibujos, cuando queramos
utilizar transparencias simples.
Utilizaremos PNG cuando tengamos imágenes pequeñas, compuestas por degradados, o

transparencias de distintos niveles de opacidad.
Utilizaremos JPG cuando queramos mostrar fotografías con buena calidad y muchos
colores.
Cuando queremos introducir una imagen, lo hacemos con la etiqueta

<img />. Los atributos que como mínimo ha de tener esta etiqueta
son los siguientes:
<img src="ubicacion/imagen.gif" alt="texto

alternativo" />
Lo primero que debemos de saber es dónde está la imagen, su

ubicación, que es lo que debe contener el atributo src:

 Si la imagen está en una página Web, basta con saber su ruta, por
ejemplo http://www.gamedex.mex.tl/imagesnew2/0/0/0/0/1/2/5/8/6/2/tv-
pc-multitasking.jpg,. Esto es lo que se llama una dirección absoluta.
 Si la imagen está en el mismo sito que la página web, podemos

utilizar una dirección relativa, como imagen.gif o
imagenes/imagen.gif. Si no sabes cómo indicar una dirección relativa,
consulta este básico.
Cuando el navegador no encuentre la imagen ubicada en scr no

podrá mostrar la imagen. En su lugar puede mostrar una imagen de
error, como en Internet Explorer que muestra . Además se mostrará
el texto contenido en el atributo alt, ya que ésa es su función: mostrar
un texto alternativo cuando no se puede mostrar la imagen. Esto es
importante para la accesibilidad a la web. Imaginemos que tenemos
unas imágenes que hacen de botón para ir a partes de nuestra web,
como Inicio o Galería. Si no ponemos el alt, y no se muestran las
imágenes, el usuario no podrá navegar por nuestro sitio.
Aunque no son obligatorios, es muy frecuente añadir a la imagen los

atributos height (alto) y width (ancho), introduciendo en ellos las
dimensiones de la imagen, en píxeles. Al cargar una página, el
navegador muestra primero el texto y después las imágenes. Si
conoce las dimensiones de cada imagen, puede dejar un hueco
reservado para ellas. Si no, pondrá el texto y luego irá desplazándolo
para colocar las imágenes, lo que hará incómodo leer la página hasta
que no esté totalmente cargada.

Otro atributo frecuente en las imágenes es title. Si lo ponemos en la

imagen, al posar el cursor sobre ella se mostrará su valor. En IE7,
cuando se omite title, se muestra el contenido de alt.
Por ejemplo, para el siguiente código se muestra la siguiente

imagen:
<img src="comunes/PC.gif" alt="PC" width="91"

height="41" title="La imagen de PC" />
Los valores de height y width puedes verlos al seleccionar la

imagen desde el Explorador de Ubuntu o desde un programa de
gráficos. Si cambias esos valores la imagen también cambiará. Si
reduces los valores, manteniendo la proporción, la imagen se verá
más pequeña, si los aumentas se verá más grande, pero con peor
calidad, como puedes ver en el siguiente ejemplo:
<img src="comunes/pc.gif" alt="pc" width="126"

height="56" title="El logo de pc" />
Para aumentar o disminuir una imagen es conveniente utilizar un

programa gráfico, ya que estos programas tienen opciones para
optimizar el tamaño de las imágenes.

Vamos a añadir la siguiente imagen a nuestra página de Cobaeh. La

imagen se encuentra en verito/imagenes_PC.jpeg
Hemos reducido su tamaño variando los atributos, lo cual no es una

buena técnica ya que, aunque se ve bien, se tiene que cargar una
imagen grande para luego verla más pequeña.
Practica 4 B-2
Este es el código:
<html>
<head>
<title>CObaeh. Colegio de bachilleres del estado de hidalgo</title>
</head>
<body>
<h1>Bienvenido a Cobaeh</h1>
<h2>Presentación</h2>
colegio de bachilleres y nuestra oferta educativa.<br />
Contamos con la * Capacitación en Informatica, utilizando equipos de
calidad* puedes verlos en la siguiente imagen.</p>
<img src="graficos/pc_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<h2>Contacto</h2>
Cobaeh. Comunicate al Tel. 76378 61761; Te esperamos!!! .</p>
</body>
</html>
Puedes probar cómo se ve el resultado, y cambiar el tamaño de la

imagen, escribiendo el código que se presenta en el cuadro.

Por último, a la hora de elegir una imagen, hemos de tener en cuenta

que para poder mostrarla, el navegador debe de descargarla primero.
Y es fácil que una sola imagen ocupe más tamaño que el resto de
elementos de la página. Por eso hemos de intentar optimizar al
máximo las imágenes, e intentar que "pesen" lo menos posible, es
decir que su tamaño en Kb. sea bajo. El sentido común nos dice que
cuanto más grande sea la imagen, más ocupa, por lo tanto, hay que
procurar usar imágenes lo más pequeñas posibles, siempre que lo que
queramos mostrar se vea con suficiente nitidez.
Pero dos imágenes del mismo tamaño pueden tener pesos diferentes,
ya que una de ellas puede tener más resolución de la que es necesaria
para que se vea bien. Es decir que aparte del tamaño influye la
resolución, para optimizar la resolución de las imágenes conviene
utilizar un programa gráfico, ya que estos programas tienen opciones
para ello.
2.5. Enlaces
Los vinculos tambien llamados enlaces, links o hiper-enlaces son los que
nos permiten navegar, es decir, ir pasando de una pagina a otra.
Se puede usar como enlace un texto o una imagen, el procedimiento es
similar en ambos casos.
TIPOS DE ENLACES:
 Interno: Nos lleva a otra parte dentro de la misma pagina donde se

encuentra el enlace. Para ello utilizamos un elemento llamado
ancla.
 Local: Se refiere a algun recurso situado en el mismo servidor que

nuestra pagina (URL relativas)
 Externo: Se refiere a algun recurso situado en otros servidores

diferentes donde se encuentra nuestra pagina (URL absoluta)
 De Correo: Cuando se da clic en este tipo de enlaces se abre

programa de correo electronico para enviar un email a la direccion
que previamente se halla especificado en ese enlace.
 A Archivos: El recurso senalado es un archivo y al dar clic nos

permiten que se abran o se descargen a nuestro ordenador esos
archivos.
En HTML, el enlace se identifica con la etiqueta <a></a>. La forma

más básica de un enlace es la siguiente:
<a href="archivo_enlazado">contenido del enlace</a>
El atributo href indica la dirección (URL) a la que se enlaza, que

normalmente es un archivo html, por ejemplo
http://www.google.com.mx/ . El contenido del enlace es lo que el
usuario ve en la página y que al pulsar sobre él nos lleva al enlace.
Normalmente es texto o una imagen, en el siguiente ejemplo es el
texto aquí.
Pulsa <a href="http://www.google.com.mx">aquí</a>.
El atributo href puede ser una dirección absoluta, como

http://www.google.com.mx/#sclient=psy&hl=es&source=hp&q=ejercicios%20
matematicos&pbx=1&oq=&aq=&aqi=&aql=&gs_sm=&gs_upl=&bav=on.2,or.r
_gc.r_pw.&fp=6700f3104a915029&biw=1280&bih=572&pf=p&pdl=500 , o
una dirección relativa, como ejercicios/citas_celebres.htm, de la misma
forma que vimos para las imágenes.
Es muy común añadir a los enlaces el atributo title, para que

muestre información sobre el destino del enlace cuando el usuario deje
unos instantes el cursor encima del enlace. Por ejemplo:
Pulsa aquí. → Pulsa <a href="http://www.google.com.mx"

title="Visita la web de google">aquí</a>.
Por defecto, el enlace se abrirá en la misma ventana. Si queremos que

se abra en una nueva ventana, podemos utilizar el atributo
target="_blank". Aunque, el W3C, el organismo que regula los

estándares del HTML desaconseja su uso, con la idea de que se debe

permitir al usuario decidir si quiere abrir el enlace en la misma u otra
ventana pulsando con el botón derecho del ratón sobre el enlace, el
atributo target se sigue utilizando porque la mayoría de los usuarios
pulsan directamente sobre el enlace, sin usar el botón derecho. Así
pues si en nuestra página queremos informar sobre la existencia de
otra página del mismo tema, colocaremos un enlace a ella y le
pondremos el atributo target="_blank" para evitar que el usuario
se vaya a esa página y no se acuerde de volver a la nuestra.
Normalmente utilizaremos enlaces para navegar por nuestro sitio.

Hemos de evitar enviar al usuario a páginas en las cuales no sepa
como volver a la página anterior o como ir a la página principal.
Siempre es mejor añadir un enlace volver, que confiar en que el
usuario utilice el botón Atrás del navegador. Más adelante, veremos
como diseñar un buen sistema de navegación para nuestro sitio web.
Practica 5 B-2
Aquí puedes ver un ejemplo con enlaces e imágenes:(Realiza el

ejemplo).
<html>
<head>
</head>
<body>
<img>
colegio de bachilleres y nuestra oferta educativa.<br>

calidad* puedes verlos en la siguiente imagen. </p>

<img src="graficos/pc_ejemplo2.jpg" alt="No se encuentra esta imagen"
height="150" width="150">
<p>Interesante enlace sobre cobaeh: <a
href="http://www.cobaeh.edu.mx">COBAEH</a><
</p>
<h2> Contacto </h2>
</body>
</html>
Un enlace también puede llevarnos a una parte concreta dentro de una

página. Por ejemplo, si la página es muy larga podemos poner un
enlace que nos lleve al principio de la página. En este tema avanzado
puedes ver cómo hacer esto y algunas cosas más.
2.6. Divisiones o capas

Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta
forma una caja, un rectángulo, igual que el párrafo. Pero mientras que
el párrafo es más común utilizarlo para contener texto, en un div
podemos colocar lo que queramos, siempre que respetemos la
anidación. Esta etiqueta nos resultara muy útil para distribuir los
elementos en nuestras páginas.
Esta etiqueta es denominada de muchas formas: divisiones, capas,

cajas, contenedores. Así que puede que a lo largo del curso utilicemos
estos nombres para referirnos a ellas.

Practica 6 B-2
Por ejemplo, si queremos colocar la imagen de nuestro ejemplo en la

parte derecha, crearemos una capa con el estilo "flotar a la derecha" y
pondremos la imagen dentro. Más adelante explicaremos el estilo
"flotar a la derecha" style="float: right".
<html>
<head>
</head>
<body>
<img>
calidad* puedes verlos en la siguiente imagen. </p>
<div style="float: right;">
<img src="../../../../home/verito/Im%C3%A1genes/PC.jpg"
alt="No se encuentra esta imagen">/></div>
<p>Interesante enlace sobre cobaeh: <a href="http://www.cobaeh.edu.mx">COBAEH</a><
</p>
<h2> Contacto </h2>
</body>
</html>

BLOQUE 2:
HTML BÁSICO

consideres sea la correcta.
1. ¿Cuál de las siguientes se corresponde a la estructura de una

etiqueta HTML?
a) <etiqueta atributo valor>

b) etiqueta>atributo="valor"</etiqueta>
c) <etiqueta atributo="valor"></etiqueta>
d) <etiqueta atributo="valor" atributo2="valor2" /></etiqueta>
2. Las etiquetas que forman la estructura básica de la página
son:
a) Una etiqueta html, que contiene primero una etiqueta head, y a
continuación una etiqueta body.
b) Una etiqueta html, que contiene las etiquetas head y body, en
cualquier orden.
c) Una etiqueta html, una head y una body, cada una a
continuación de la anterior.
3. ¿Dónde escribiremos el texto de una página?

a) Dentro del body, y a su vez en otras etiquetas, como párrafos,
encabezados, tablas...
b) Dentro del head, utilizando siempre párrafos (p).
c) Siempre pondremos el primer texto de la página en un h1,
luego en un h2, h3... y así sucesivamente.
d) Sólo podemos ponerlo en párrafos (p) dentro de la página.

4. ¿Cómo conseguimos saltar de línea en medio del texto?
a) Creando un salto de línea en el código fuente.
b) Comenzando un nuevo párrafo, o introduciendo la etiqueta <br
/>.
c) Cualquiera de las respuestas anteriores.
d) Ninguna respuesta es correcta.
5. ¿Cuáles de estas imágenes podemos utilizar en una página
web?
a) Imágenes HTML.
b) Imágenes PNG y JPEG.
c) Imágenes BMP y GIF.
d) Cualquiera de las anteriores.
6. ¿Qué indica el atributo alt de la imagen?
a) Un texto que se mostrará si la imagen no se puede cargar.
b) La ubicación del archivo de la imagen.
c) Un título que se verá en cualquier navegador al pasar el cursor
sobre la imagen.
7. ¿Para qué sirven los enlaces en una página web?
a) Para ir a otra parte de la página.
b) Para abrir otras páginas.
c) Para descargar un archivo.
d) Cualquiera de las anteriores es cierta.
8. ¿Qué atributo del enlace indica el archivo enlazado?
a) El atributo alt.
b) El atributo src.
c) El atributo href.
d) El atributo link.
9. ¿Cómo hacemos que una imagen enlace con una página?
d) Colocando la etiqueta de imagen dentro de la del enlace.
e) Añadiendo a la imagen el atributo con el archivo enlazado.
f) Añadiendo a la etiqueta de enlace el atributo con el origen de la

imagen.
g) Los enlaces sólo pueden ser de texto
10. ¿Para qué sirve la etiqueta div?
h) Para dividir una página en subpáginas.
i) Principalmente para organizar el contenido en nuestras
páginas.
j) Para hacer la página más divertida.
k) Para crear párrafos de texto.

BLOQUE III.
ASPECTO DE LA PÁGINA
Hasta ahora hemos aprendido a utilizar los elementos básicos de

HTML para escribir texto, imágenes y enlaces, pero los resultados han
sido muy pobres desde el punto de vista estético.
A continuación vamos a ver como poner "guapa" nuestra página

formateando el texto, con bordes, márgenes y fondos. Veremos un
concepto muy importante y potente: el estilo CSS. El aspecto de la
página se controla con los estilos CSS.
Las Hojas de estilo en cascada o estilos CSS (Cascade Style Sheet)

permiten controlar el diseño y el aspecto de las paginas aumentando las
posibilidades en cuanto a colores, tipos, tamaños y posicionamiento de
cualquier tipo de objeto html, ya sea texto, imagen, tabla o campo de
formulario (lo que sea que se pueda identificar con una etiqueta html).
Se puede definir una hoja de estilo como una coleccion de reglas que
afectan a la apariencia de un documento o parte del mismo.
3.1 Las ventajas que presenta el uso de CSS

• Control sobre el diseno de la pagina: con los estilos CSS se separa el
contenido de la pagina web, un documento .html, de todas las reglas
referidas a su diseno y aspecto, que estan separadas en un documento
externo he independiente con extension .css.
• Actualizacion automatica del diseno: empleando hojas de estilo se
puede modificar la hoja de estilo individual y cambiar la apariencia de un
sitio web completo.
• Discrecion: los navegadores mas antiguos no pueden entender las
reglas de las hojas de estilo pero no dan errores, simplemente las
ignoran. De este modo no se mostraran los efectos de diseno asignados
pero si el texto basico de las paginas y la apariencia del HTML.

3.2 Terminologia empleada en CSS

Para comprender el funcionamiento de las hojas de estilo en cascada es
necesario conocer los terminos empleados en las mismas:
Propiedad
Una propiedad es una caracteristica de un elemento que puede verse

modificada mediante una hoja de estilo. Por ejemplo color o text-
transform. Estas propiedades son muy numerosas permitiendo cambiar
muchas caracteristicas que hasta ahora no era posible.
Valor
Valor es el dato que se asigna a una determinada propiedad. Por

ejemplo #FFFFFF es un valor para el color y uppercase es un valor de
la propiedad text-transform.
Declaracion
Una declaracion esta formada por una propiedad y su valor. La

declaracion comienza por el nombre de la propiedad seguido de dos
puntos y a continuacion del valor de la propiedad. En nuestro ejemplo
color: #FFFFFF; y text-transform: uppercase; son dos declaraciones.
Selector
Un selector es una etiqueta estandar de HTML o un nuevo nombre

escrito por nosotros al cual se le quiere asignar una declaracion. Por
ejemplo: p, H1, strong son selectores del HTML.
Regla de estilo
Una regla es un selector junto con la declaracion, por ejemplo,

H1{color:rojo}. Al crear reglas es posible agrupar selectores y
declaraciones. Un ejemplo de regla con dos declaraciones seria: strong

{ color: #FFFFFF; text-transform: uppercase; } Para separar las

declaraciones se utiliza punto y coma.
Tambien se pueden agrupar los selectores como en este ejemplo
H1,H2{color:rojo;font-family:arial}
Tanto los h1 y h2 seran mostrados de color rojo y tipo de letra arial. En

este caso se utiliza la coma para separar los selectores.
Hoja de estilo
Una hoja de estilo es un conjunto de reglas que definen

completamente el aspecto de todos los elementos de la página.
Colocacion de las reglas de estilo
Las reglas de estilo pueden ir colocadas:
1. Dentro de una etiqueta individual.
<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ...texto...

</etiqueta>
Estas reglas solo afectan a una etiqueta particular. No se utilizan las

llaves para escribir las declaraciones sino que se escriben entre
comillas dentro del modificador STYLE. Este tipo de colocacion es el
que implementa KompoZer a las capas en cuanto a tamano y demas
cuando las modificamos mediante la interfaz grafica.
2. Afectando a toda la pagina.
Van colocadas dentro del HEAD de la pagina, entre dos etiquetas

<STYLE type="text/css"> ..reglas...</STYLE> y afectan a todas las
etiquetas del mismo tipo que aparezcan a lo largo de la pagina.
3. En un archivo externo llamado hoja de estilos cuya extension es

.CSS
Lo mas interesante es coger todos los estilos que vayamos a utilizar en

un web y extraerlos a un archivo externo en donde almacenamos esas
reglas de estilo. Esos archivos tienen extension CSS.
Para vincular las paginas al formato definido en el archivo CSS hay

que colocar en cada una de ellas una etiqueta como esta dentro del
HEAD:<LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css">
Donde archivo.css contiene las reglas de estilo.
De esta forma conseguimos establecer el formato uniforme para todas

las páginas y ademas cualquier cambio que hacemos en la hoja de
estilos se ve reflejado de forma inmediata en todas las paginas que
usen esta hoja de estilos. Es por eso que es la opcion mas utilizada.
Usar hojas de estilo en cascada KompoZer dispone de un editor de

hojas de estilo denominado CaScadeS (CSS, Cascade Style Sheets).
CaScadeS 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
informacion del contenido de la del estilo.CaScadeS permite dos
modos de edicion de hojas de estilo:
a) Modo para principiantes: este modo permite crear reglas asociadas

a selectores de clase o selectores de tipo de elemento.
Modo avanzado: este modo permite crear reglas sin restricciones.
Para proporcionar estilo al documento html que se edita, CaScadeS

puede iniciarse haciendo clic en el menu Herramientas y
seleccionando Editor CSS, apareciendo la siguiente ventana a
continuacion.
En KompoZer contamos con un boton específico para activar la Hoja de

estilos CSS, se trata del icono CasCadeS:
Para crear una hoja de estilo interna:

1. Dejaremos por defecto la opcion URL(ninguna, incrustado en el
documento.
1. (Opcional) Rellenaremos la información sobre Lista de medios y Título

de la hoja de estilo.
2. Haremos clic en Crear hoja de estilo.
3.3 Para crear una hoja de estilo externa:
1. Pulsamos el icono Exportar hoja de estilos y cambiar a la version

exportada:
2. Seleccionamos el fichero en cuestion, Si no existe ya, se creara un

nuevo fichero en el sistema de archivos local. Es recomendable, al
guardarlo, asignarle el nombre completo (nombre.css) o
(Opcional) Rellenaremos la información sobre Lista de medios y Título de

la hoja de estilo.
3. Activaremos comprobar al crear una hoja de estilo alternativa si esta es

una alternativa.
Consejo: guardaremos siempre el documento html antes de agregar una

hoja de estilo local. Guardaremos tambien el documento inmediatamente
antes de cerrar el editor CSS.
Consejo: utilizaremos el boton Recargar del panel de la izquierda si la

hoja de estilo no se descarga inmediatamente.
3.4 Crear reglas de estilo

Despues de crear una o mas hojas de estilo para el documento html, se
pueden crear reglas para cada hoja de estilo de forma individual. Para
usar una hoja de estilos concreta al crear o modificar reglas, seleccionela
en el panel de la izquierda haciendo clic sobre ella con el boton izquierdo
del raton. El panel de la derecha mostrara entonces los detalles de la
hoja de estilo en la pestana General. Para crear reglas nuevas:
1. Haremos clic en el boton Regla del panel de la izquierda.

2. El panel de la derecha mostrara opciones para especificar el tipo de
regla a crear.
Elegiremos una entre las siguientes:

• Estilo con nombre (introduzca abajo el nombre de la clase)
• Estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo)
• Estilo aplicado a todos los elementos coincidentes con este selector
3. Rellenaremos el nombre de la regla.

4. Haremos clic en Crear regla de estilo.
En la parte derecha de esta pantalla de Hoja de estilos CSS, aparera el

elemento creado con el proceso anteriormente descrito.
Las reglas pueden ser definidas usando las pestanas de estilo (Texto,
Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las
definiciones de una regla de estilo, seleccionaremos en el panel de la
izquierda y haremos clic en la pestana General del panel de la derecha.
La pestana General mostrara todas las definiciones aplicadas a la regla.
Por ejemplo, añadiendo estilos CSS a la página de nuestro ejemplo

obtenemos este resultado.
Practica 1 B-3
Los estilos que hemos añadidos son los que puedes ver en esta
imagen y el código utilizado es el que se muestra a continuación.
Escribe el código y observa que sucede:
<html>
<head>
<title>COBAEH. COLEGIO DE BACHILLERES DEL ESTADO DE
HIDALGO</title>
<style type="text/css"></style>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(153, 255, 153);"
alink="#000099" link="#000099" vlink="#990099">
<img>
<h1 style="text-align: center; color: white;"><span

style="background-color: rgb(0, 153, 0);"> Bienvenido a Cobaeh</span> </h1>
<h2 style="text-align: center;"><span style="color: rgb(0, 153, 0);"> "
Plantel Tlahuelilpan "</span> </h2>
<p style="text-align: justify;"> En esta web encontraras información
sobre el
Contamos con:<br>
</p>
<div style="text-align: center;"> <big
style="font-weight: bold; background-color: rgb(60, 151, 143); color:
white;"><big>*
Capacitación en Informatica, utilizando equipos de
calidad* </big></big><br
style="font-weight: bold; color: rgb(0, 0, 1);">
</div>
<p style="text-align: center;"><big style="color: rgb(255, 102,
0);"><big><big>puedes
ver el tipo de equipo que utilizamos, en la siguiente imagen. <img
style="width: 160px; height: 120px;" alt="PC"
src="../PC.jpg"></big></big></big></p>
<p><big style="color: rgb(255, 102, 0);"><big><big><big><span
style="font-weight: bold; color: rgb(140, 117, 255);">Interesante
enlace sobre cobaeh: </span><a
style="font-weight: bold; color: rgb(140, 117, 255);"
href="http://www.cobaeh.edu.mx">COBAEH</a></big><
</big></big></big></p>
<h2><big style="color: rgb(255, 102, 0);"><big><big> Contacto
</big></big></big></h2>
<p style="text-align: right;"><big style="color: rgb(255, 102, 0);"><big><big><big>
Si Gustas comunicarte con nosotros
y ser parte de nuestra familia
Cobaeh. Comunicate al Tel. 76378 61761; Te esperamos!!!
</big></big></big></big></p>
</body>
</html>
3.5. Estilos
La forma en que se ven todos los elementos de nuestra página web
depende del estilo.
El estilo se compone de distintas propiedades y sus valores

correspondientes. Las propiedades pueden ser el color de la fuente, el
tamaño, la alineación, los márgenes, etc... Los valores dependen de
cada propiedad, por ejemplo, a la propiedad color le podemos asignar
valores como red (rojo), blue (azul), ... y a la propiedad tamaño fuente
le podemos asignar un valor en porcentaje 100%, 120%, ... o en pixels
12px, 15px, ....
El formato a seguir para definir una propiedad es: propiedad:

valor; o propiedad: valor1 valor2 valor3; si puede tener
varios valores.
Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de

fuente de 120%, escribiríamos el siguiente estilo:
color:red; font-size:120%
y obtendríamos el siguiente resultado:
Texto rojo a 120%
¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como

vamos a ir viendo a lo largo del curso, pero lo más recomendable es
agrupar todas las declaraciones de estilos en un solo lugar, definiendo
un bloque dentro de la etiqueta Head que contega la definición de
estilos. Para ello, tenemos que incluir en la etiqueta <style
type="text/css"> ... </style> y definir dentro los estilos
correspondientes a cada elemento de nuestra página, como puedes
ver al principio de esta página.
Si queremos que un estilo afecte a todos los elementos de la página,

debemos definir un estilo para la etiqueta body. En esta etiqueta se
suele definir el color de fondo y los valores genéricos de color y
tamaño del tipo de letra. En nuestro ejemplo hemos definido el estilo
del body así:
body {font-family: Verdana,Arial,sans-serif;

font-size: 15px;
color: #735846;
text-align: justify;
background-color: #3d2e2a;}
Que quiere decir que, el tipo de letra o fuente, será Verdana, ( o Arial si
no existe Verdana, o sans-serif si no existen las anteriores); el tamaño
será 15 pixels, el color será el definido por el valor #735846 (en este
tema básico sobre colores puedes ver qué quiere decir esto), la
alienación del texto será justificada y el color de fondo de la página
será el #3d2e2a.
Una página web está diseñada y pensada para verse a través de un

monitor. El monitor utiliza los colores primarios aditivos rojo, verde y
azul. Esto es conocido como el sistema RGB por las siglas de los
colores en inglés.
De esta forma podemos crear un color indicando la cantidad de cada
uno de los primarios que interviene en la mezcla. Para cada color
podemos especificar 256 intensidades distintas, y al ser tres colores
podemos obtener un total aproximado de 16 millones de colores.
En html, podemos definir un color RGB con valores hexadecimales,
siguiendo el formato #F7F0E2 (el más utilizado), con valores para cada color entre el 00
(mínimo) y FF (máximo). Podemos expresarlo con valores decimales, con la fórmula
rgb(247, 240, 226), con valores entre 0 y 255, o siguiendo este mismo formato con valores
porcentuales, como rgb(90%, 60%, 35%). Así, el color lo podemos definir como
#FA75C4, rgb(250, 117, 196) o rgb(98%, 46%, 77%).

3.6. Formato del texto

Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar
en más detalle viendo las posibilidades que ofrecen. Empezaremos
con el formato del texto y las propiedades que se le pueden aplicar:
color, fuente, tamaño, inclinación, grosor, decoración y
mayúsculas/minúsculas.
Color
El color se expresa con la propiedad color. El valor que puede tomar

esta propiedad se puede expresar de varias formas:
a) Un número hexadecimal. Por ejemplo color: #0000FF;,o

color: 0x800080;.
b) Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0,

255);.
c) Tres números entre 0 y 100. Por ejemplo color: rgb(10%,

20%, 75%);.
d) Un nombre. Algunos colores se pueden expresar con su nombre en
inglés. Por ejemplo color: green; o color: DarkGreen;.
Fuente
Podemos elegir la fuente (o tipo de letra) a través del atributo font-

family. Podemos indicar cualquier fuente que queramos, teniendo en
cuenta que si incluye espacios, debe de ir entre comillas dobles. Por
ejemplo font-family: arial; o font-family: "Times New
Roman";.
Pero hemos de tener en cuenta que puede que quien vea la página no
tenga instalada la fuente que queramos. Para evitar esto, existen cinco
fuentes genéricas que sí se mostrarán en cualquier equipo: serif, sans-
serif,cursive, fantasy, monospace. Esto no quiere decir que sólo
debamos de utilizar estas cinco. El valor de font-family pueden ser
varias fuentes, separadas por comas. El navegador elegirá,

comenzando por la derecha, la primera disponible, por lo que es

conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, "Times New Roman",
Times, serif;.
Igual que ocurría con el color, los editores gráficos ofrecen la

posibilidad de elegir diferentes fuentes y previsualizar su forma, más
adelante veremos como hacerlo con Kompozer.
Tamaño
El tamaño se regula a través de la propiedad font-size. Podemos

utilizar cualquiera de las unidades de tamaño, pero lo más frecuente es
utilizar px (pixels), o porcentajes % o em, estas dos últimas son
tamaños relativos al tamaño de la fuente del elemento que está por
encima. 100% o 1em, sería el mismo tamaño, mientras que 200% o
2em sería el doble y 50% o 0.5em sería la mitad.
Si utilizamos valores relativos, facilitamos que se pueda cambiar de

tamaño todo el texto de la página de forma más coherente. Así los
discapacitados visuales podrán utilizar el comando para cambiar el
tamaño de texto que tienen los navegadores.
Inclinación
Podemos poner una fuente en cursiva utilizando la propiedad font-

style. Puede tomar uno de los siguientes valores:
a) normal. Coloca el estilo de forma normal, sin inclinación.
b) oblique. Inclina el texto.
c) italic. Además de inclinarlo, susituye la fuente por su versión en

itálica si está disponible. Aunque la mayoría de los navegadores no
lo hacen.

Grosor
Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla

en negrita, utilizando font-weight. Puede tomar los siguientes
valores:
a) normal. El texto no se muestra en negrita.

b) bold. El texto se muestra en negrita.
Nota. En teoría se pueden expresar distintas intensidades de

negrita, pero los navegadores no las muestran.
Decoración
Con la propiedad text-decoration podemos hacer que el texto

muestre, por ejemplo, los distintos tipos de subrayado, con los
siguientes valores:
a) none, el texto se muestra sin ningún tipo de decoración.
b) underline, el texto aparece subrayado.
c) overline, el texto aparece sobrerrayado.
d) line-through, el texto aparece tachado.
e) blink, el texto parpadea. (No funciona en Internet Explorer, en

Firefox 3, si).
Mayúsculas y minúsculas
Aunque escribamos el texto en mayúsculas o minúsculas, luego

podemos cambiarlo a través del estilo. Por ejemplo utilizando text-
transform podemos transformar el texto de ejemplo "Es un texto de
EJEMPLO" de las siguientes maneras:
a) uppercase, para transformarlo todo a mayúsculas. "ES UN

TEXTO DE EJEMPLO".
b) lowercase, para transformarlo todo a minúsculas. "Es un texto de
EJEMPLO".
c) capitalize, para poner la primera letra de cada palabra en

mayúsculas. "Es un texto de EJEMPLO".
d) none, para no realizar ninguna transformación.
e) Existe otra propiedad que juega con la mayúsculas, font-

variant. Esta propiedad puede hacer que las minúsculas se
muestren como mayúsculas de menor tamaño. Vamos a utilizar
"Este texto de Ejemplo".
f) small-caps, realiza la conversión de las minúsculas. "ESTE TEXTO

DE EJEMPLO".
g) normal, no realiza la conversión.
Nota: El consorcio W3C regula las reglas de estilo para crear el

estándar. No obstante, en la práctica, hay muchas propiedades que los
navegadores no representan, o que sólo se muestran en algunos, por
lo que no las utilizaremos. Otras, se ven con algunas diferencias
dependiendo del navegador. Por eso, es conveniente probar nuestra
web en los principales navegadores.
Los navegadores más importantes actualmente son:
 Internet Explorer
 Mozilla Firefox
 Safari
 Opera
 Google Chrome

Practica 2 B-3
Transcribe el código que se muestra en el ejemplo con lo que hemos

visto:
<html>
<head>
<title>Estilo del Texto</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<h1 style="font-size:100%">Éste es un h1 del
mismo tamaño que un párrafo
normal.</h1>
<p>Éste es un párrafo normal.</p>
<p style="color:red">Éste párrafo es
de color rojo,
con algunas palabras en <span
style="color:blue">azul</span>.</p>
<p>Podemos cambiar la fuente: <span style="font-
family:serif;">y poner este texto en serif</span>,
<span style="font-family:sans-serif;">esta parte
en sans-serif</span>, <span style="font-
family:cursive;">
la familia de esta palabra es cursive</span>,
<span style="font-family:fantasy;">también
tenemos fantasy</span>,
<span style="font-family:monospace;">y acabamos
con monospace</span>. </p>
<p style="font-weight:bold; text-
decoration:underline">Este párrafo
(<span style="font-weight: normal; text-
decoration: none;">menos esta parte</span>)
está
en negrita y subrayado. <span style="text-
decoration:overline">Este fragmento, además

sobrerrayado</span>.</p>
<p style="text-transform:lowercase;"><span
style="font-size:85%;">ÉSTE,</span>
ESTÁ
<span style="font-size:110%;">ESCRITO TODO
</span><span style="font-size:120%;">EN
MAYÚSCULAS</span>,
<span style="font-size:130%;">Y ADEMÁS
VA</span><span style="font-size:140%;">
CRECIENDO.</span></p>
</body>
</html>
3.7. Bordes
Podemos agregar un borde alrededor de un elemento html, con la
propiedad border. Esta propiedad engloba las tres propiedades del
borde.
a) color, un color RGB. Se define con la propiedad border-color.

Por ejemplo, border-color: blue; o border-color:
#F37760;.
b) grosor, normalmente expresado en px. se define con la propiedad
border-width. Por ejemplo, border-width: 2px;.
c) estilo, uno de los estilos o aspecto que puede tener el borde.
Puede ser cualquiera de los siguientes, que definimos con la
propiedad border-style:
Por lo tanto, podríamos definir el borde de un elemento de la siguiente

manera:
<p style="border-color:#009933; border-width: 3px;

border-style:double;">bordes</p>
bordes

En este caso, podemos resumirlo con el atributo border, siguiendo el

formato border: color grosor estilo;, lo que quedaría
border:#009933 3px double;.
Cada elemento tiene cuatro bordes, que podríamos definir de forma

independiente, como border-top, border-right, border-bottom
y border-left. A su vez, para cada uno de ellos podemos definir su
color, grosor y estilo de forma independiente, por ejemplo border-
bottom-color o border-top-width.
3.8. Márgenes
Los elementos html tienen dos márgenes. El margen externo y el
margin interno. Ambos se refieren a la la distancia hacia uno u otro
lado con respecto al borde del elemento, a su límite,
independientemente de que el borde sea visible o no.
El margen externo se regula con la propiedad margin. El margen

exterior es la distancia mínima que habrá entre el borde exterior del
elemento y el elemento siguiente, por cada uno de sus cuatros lados.
margin: 0
margin: 0
margin:5px
margin:5px 35px
margin:15px
margin: 0
margin-left:-20px
Los margenes no se suman, se solapan, prevaleciendo el mayor. Así,

si un párrafo tiene un margen inferior de 50px y el de abajo un margen
superior de 30px, entre ellos quedará un margen de 50px, por ser el
mayor, pero no de 70px.
Otro valor que podemos dar al margen es auto. Este valor da a

ambos márgenes el mismo valor, y nos permite, por ejemplo,
horizontalmente un elemento con una anchura determinada.
El margen está fuera del elemento. Observa, por ejemplo que no

mantiene el color de fondo del elemento.
El margen interno se regula con la propiedad padding. Se refiere a

la distancia que hay ente el borde del elemento y su contenido, por
ejemplo el texto.
padding: 0
padding: 0
padding:5px
padding:5px 35px
padding:15px
padding: 0
padding-bottom:20px
El padding si que forma parte del elemento, por eso muestra el mismo
fondo.
Por defecto, la mayoría de elementos incluyen un margen exterior, y

algunos un margen interior, que debemos de tener en cuenta.
Paractica 3 B-3
Veamos un ejemplo con lo que hemos visto. Ve capturando y

cambiando los valores:
<html>
<head>
<title>Bordes y márgenes</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
</head>
<body style="background-color:whitesmoke; font-
family: sans-serif;">

<h1 style="font-size: 120%; background-color:
#99CCFF; color: #FFFFFF; border-color: #6666FF;
border-style: solid; border-width: 0 0 2px 5px;
padding-left: 20px;">Bordes y márgenes</h1>
<p style="background-color:#99CCFF; margin:
0;">Éste es un párrafo sin
margen.</p>
0;">Éste es otro párrafo sin
margen.</p>
20px;">Éste es un párrafo con
margin:20px.</p>
20px;">Éste es un párrafo con
margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px;
padding: 10px">Éste es un párrafo
con
margin:20px y padding:10px.</p>
<p style="background-color:#99CCFF; margin: 20px;
padding: 10px; border: cyan 4px inset">Éste
es un párrafo con margin:20px,
padding:10px y border: cyan 4px inset</p>
<p style="background-color:#99CCFF; margin-
right:25%;">Éste es un párrafo con
margin-right:25%.<br />
Cambia al cambiar la ventana.</p>
</body>
</html>
3.9. Fondo
Otro aspecto que podemos personalizar es el fondo, con la propiedad
background.
background-color nos permite establecer el color de fondo del

elemento. Por ejemplo, background-color: green;.

También podemos utilizar una imagen, con la propieadad

background: url(graficos/fondo.png);. En url() introducimos
la dirección de la imagen que queremos utilizar.
Si utilizamos una imagen podemos configurar otras propiedades:
background-repeat, determina si el fondo se repite. Puede tomar

los valores no-repeat si no queremos que se repita, repeat-x para
que se repita en horizontal, repeat-y para que lo haga en vertical o
repeat para que llene todo el fondo, que es el valor que toma si no le
indicamos otra cosa.
Si no se repite la imagen de fondo, podemos posicionarla con

background-position. Podemos darle los valores de los cuatros
lados (top, right, bottom y left), combinarlos para colocarla en
las esquinas, por ejemplo top left, o centrarla con el valor center.
También podemos introducir medidas, donde el primer valor se refiere
a la posición horizontal y el segundo al vertical, por ejemplo
background-position: 50% 50%;.
Practica 4 B-3
Para entender mejor relicemos el siguiente ejemplo:
<html>
<head>
<title>Bordes y márgenes</title>
<meta http-equiv="content-type"
</head>
<body style="background-image:
url(graficos/fondo_ladrillos.jpg); background-
color: #C9B2AC;
background-repeat: repeat-y;
background-position: center">
<h1 style="background-color: #CC9999; color:
#FFFFFF;">Fondos</h1>
<p style="background-color: #CC9999; color:
#FFFFFF;">Ve cambiando los valores de background-
repeat y background-position.</p>
</body>
</html>
3.10. Cómo declarar un estilo

Hasta ahora hemos aplicado los estilos directamente sobre el
elemento, utilizando el atributo style. Esto es lo que se denomina
estilos incrustados. Esto es útil cuando tenemos que dar un estilo muy
concreto a un elemento puntual. Pero no cuando queremos aplicarlos
a todos los elementos de una página. Por ejemplo, imaginemos una
página con 20 párrafos. Sería muy costoso cambiar definirlo para cada
uno. Y volver a hacerlo cada vez que queramos hacer un cambio.
Para evitar esto, podemos declarar un estilo.
Un estilo se declara con un selector y un bloque de declaración,

siguiendo el formato selector {bloque de declaración;}.
El selector identifica al elemento al que se le aplica el estilo. Puede

hacerlo de las siguientes maneras:
 Si queremos formatear todas las apariciones de una etiqueta,

utilizamos la etiqueta como selector. Por ejemplo, body o p.
 Para formatear determinados elementos, podemos definir clases.
Para definir una clase, utilizamos el signo . seguido del nombre
(descriptivo) que queramos dar a la clase. Por ejemplo
.resaltado. De esta forma, creamos una clase genérica, y el

estilo afectará a todos los elementos, sean del tipo que sean, que
tengan esa clase. También podemos especificar cómo se comporta
la clase para cada elemento, con el formato etiqueta.clase. Por
ejemplo p.resaltado. Por último, para aplicar la clase a los
elementos, no hay más añadirles el atributo class con el nombre
de la clase deseada. Por ejemplo <p class="resaltado">.
 Para darle estilo a un elemento en concreto, podemos utilizar su
atributo id. En el selector, precedemos el id por el signo #. Por
ejemplo, #logo. De forma opcional, podemos preceder el
identificador con el tipo de elemento de que se trata. Esto puede
ser útil para ayudarnos a recordar de qué elemento se trata.
 También podemos anidar selectores, separándolos por espacios.
En este caso, el estilo sólo afectará a los elementos contenidos en
el selector que haya más a la izquierda. Por ejemplo, el selector
p.resaltado span sólo afectara a las etiquetas span que estén
dentro de algún párrafo (p) que tenga la clase resaltado
(class="resaltado").
 Al definir estilos, podemos utilizar varios selectores a la vez, si los
separamos por comas. Por ejemplo, utilizando el selector p, h2,
h1 podemos definir a la vez el estilo de las etiquetas p, h1 y h2.
El bloque de declaración, es la relación de de cada propiedad del

estilo con el valor que toma. Es decir, contendrá lo que colocaríamos
en la etiqueta style del propio elemento. El bloque de declaración lo
colocaremos detrás del selector, encerrado entre llaves { }. Lo normal
es formatearlo para que nos sea fácil de leer. Para ello podemos
utilizar saltos de línea, espacios o tabulaciones, ya que son ignorados.
Una forma común de formatear el estilo, es como vemos en el
siguiente ejemplo:
p {
color: blue;
background-color: #F7F0E2;
font-style: oblique;
}

3.11. Dónde declarar un estilo

En casos muy puntuales y concretos, declararemos el estilo
incrustado al elemento o en línea, utilizando el atributo style. Por
ejemplo, en un determinado párrafo al que queremos aumentar un
poco el margen porque queda mejor. Nos será más sencillo recordar
que el estilo está en el elemento, que crear una clase que no nos
serviría de nada si borramos el elemento. De todas formas, no aquí no
declararemos todo el estilo, solo los atributos que sean distintos al
resto de elementos del mismo tipo.
Si sólo tenemos una página, podemos definir los estilos dentro del
<head>. Para ello, tenemos que incluir en la etiqueta <style
type="text/css"> ... </style>. En esta etiqueta, definiremos los
estilos con el selector y su bloque de declaración.
Pero lo más habitual es tener varias páginas. En este caso resulta muy
útil tener los estilos definidos en una hoja independiente, una hoja de
estilos. Una hoja de estilos no es más que un archivo de texto, pero
con la extensión .css, donde aparecen definidos los estilos que
utilizarán las páginas. Para que funcione, debemos de enlazar con la
hoja de estilo, para lo que utilizaremos la siguiente etiqueta en el
<head> de nuestras páginas:
<link href="hoja_de_estilo.css" rel="stylesheet"

type="text/css" />
 href indica la ubicación de la hoja de estilo, tal como lo

pondríamos en un enlace.
 rel se refiere a la relación del archivo con nuestra página. Al poner
stylesheet le indicamos que se trata de una hoja de estilo. Por
ejemplo, podríamos poner alternate stylesheet lo que
indicaría que se trata de una hoja de estilo alternativa. Algunos
navegadores como Firefox, nos permiten elegir entre la hoja normal
o la alternativa a través del menú Ver → Estilo de página.

3.12. Orden de aplicación de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál
se aplica? Bueno, realmente los estilos se van sumando. Por lo que si
no repetimos ninguna propiedad, el estilo final de un elemento será la
suma de todos los estilos que afecten al elemento.
Pero ¿qué ocurre si repetimos una propiedad? Como norma general,

prevalecerá el estilo más concreto sobre el más genérico. Por ejemplo,
si en la hoja de estilo establecemos el texto de los párrafos en rojo, y
en la cabecera de la página definimos el color de los párrafos en azul,
prevalecerá éste último, ya que es más concreto, se refiere sólo a los
párrafos de esa página. Y si en un párrafo de la página, en el atributo
style indicamos el color de texto verde, prevalecerá éste por ser el
más concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más

concreto que p, ya que se refiere sólo a los párrafos con esa clase. Y
p#titulo sería aún más concreto, ya que se refiere directamente a
un determinado párrafo. Lo mismo ocurre al anidar los selectores,
p.inicio span es más concreto que poner sólo span.
En caso de empate, por ejemplo si definimos varias veces la misma

propiedad en una hoja de estilo, se tomará en cuenta la última, que
machacará a las anteriores. Por ejemplo, poner p {margin: 20px;
margin-bottom: 5px;} sería como poner p {margin: 20px
20px 5px;}.
En cualquier momento podemos saltarnos el orden de prioridad de los

estilos, añadiendo !important al final de una propiedad. Esto hace
que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:
p { color: blue !important;

color: red;
}

El párrafo debería de ser de color rojo, porque el valor rojo "machaca"

al azul. Sin embargo, al poner !important, hace que el texto sea
rojo.
Hay que tener en cuenta que las propiedades se heredan de los

elementos padre. Por ejemplo, si decimos que el texto del body será
de color azul, todos los elementos tendrán este color para el texto, a
no ser que indiquemos otra cosa.
Practica 5 B-3
La mejor forma de entender todo esto, es probando un ejemplo

(recuerda que puedes modificarlo):
<html>
<head>
<meta http-equiv="Content-Type"
<title>Estilos</title>
<style type="text/css">
body {
font-family:sans-serif;
background-color: lightyellow;
}
h1 {
border-bottom: #FFCC66 5px solid;
text-align: center;
}
p {
color:#660000;
border: #FF9933 10px solid;
border-width: 0 0 2px 2px;
}
p.derecha {
text-align: right;
border-width: 0 2px 2px 0;

}
#Pepe {
color: red;
border-width: 0;
}
.destacado {
color: white;
background-color: red;
}
p.destacado span.destacado {
color: red;
background-color: white;
}
</style>
</head>
<body>
<h1>Estilos</h1>
<p>Los estilos simplifican el diseño de
una página.</p>
<p class="derecha">Podemos definirlos en el
propio <span
class="destacado">elemento</span>.</p>
<p>Definirlos en la <span
class="destacado">cabecera</span>.</p>
<p class="derecha">O utilizar una <span
class="destacado">hoja de estilo</span>.</p>
<p> </p>
<p id="Pepe">Este es el párrafo Pepe, con
su propio estilo.</p>
<p class="destacado">Este es un párafo de
la clase <span
class="destacado">destacado</span>.</p>
<p class="destacado" style="background-color:
orange">Éste, también es destacado,
pero con style="background-color:
orange".</p>
</body>
</html>

BLOQUE 3
ASPECTO DE LA PÁGINA.

1. ¿Qué son los estilos CSS?
a) Son una serie de propiedades que determinan cómo se verá nuestra

página.
b) Son una serie de reglas a tener en cuenta para lograr una página
accesible.
c) Son las distintas formas que tenemos de escribir el HTML.
2. Los estilos tienen el formato:
a) Un selector, y entre { } cada propiedad y su valor.
b) Un selector, y entre ( ) cada propiedad y su valor.
c) Entre { }, cada elemento de la página y el estilo que le asociamos.
3. Para cambiar la fuente o tipografía de un elemento...
a) Lo hacemos con la propiedad de estilo font-family.
b) Podemos indicar una lista de fuentes.
a) Lo hacemos con la propiedad de estilo font-family.
4. Con los estilos de texto, podemos...
a) Poner un texto en negrita y cursiva.
b) Mostrar todos los enlaces de color rojo.
c) Poner en mayúsculas un texto, aunque esté escrito en minúsculas.
d) Cualquiera de las opciones anteriores es cierta.
5. Los bordes de un elemento...
a) Sólo se pueden mostrar en tablas, párrafos y divisiones.
b) Se definen indicando color, grosor y estilo.
c) Se muestran siempre en los cuatro lados.
d) Cualquiera de las opciones anteriores es cierta.
6. La propiedad padding establece...
a) La distancia entre el límite del elemento y los elementos que lo
rodean.
b) Un estilo del borde del elemento.
d) La distancia de sangrado de los párrafos.
7. Como fondo de un elemento, podemos poner:
a) Sólo un color.
b) Sólo una imagen.
c) Las dos cosas a la vez, color e imagen.
d) O un color o una imagen, pero no ambas a la vez.
8. Un estilo declarado con el selector .parrafo afectará a...
a) Todos los párrafos.
b) Todos los elementos con el id parrafo.
c) Todos los elementos con la clase parrafo.
d) Todas las etiquetas parrafo.
9. En nuestro sitio, queremos que algunos enlaces se muestren, en
color rojo y negrita. Lo mejor que podemos hacer es...
a) Como no es en todos los enlaces, definir un estilo incrustado para
cada uno.
b) Crear una regla en la hoja para un determinado id, que aplique esas
características.
c) Crear una clase en la hoja de estilo con esas características.
d) Definir el estilo correspondiente en la cabecera de las páginas en las
que se utilice.
10. En la hoja de estilo, hacemos que los párrafos sean azules,
centrados y con borde. En la página, redifinimos el estilo de los
párrafos para que sean verdes y subrayados. Aparte, un párrafo tiene
aplicada una clase de la hoja de estilo que quita el subrayado y pone
un grosor de fuente normal. ¿Al final, cómo se verá ese párrafo?
a) De color verde, centrado y con borde.
b) De color verde, centrado, con borde y subrayado.
c) De color verde, centrado, con borde, subrayado y negrita.
d) De color azul, centrado, con borde, subrayado, negrita

BLOQUE IV.
EDITOR WEB
Quizá estés un poco cansado de escribir etiquetas HTML, si es así en

este tema vamos a explicar cómo ahorrarte ese trabajo. Un editor web
también ayuda en otros muchos aspectos de la creación de páginas
web.
4.1. ¿Qué es un editor Web?
Un editor Web sería cualquier aplicación que nos permita crear, editar
y guardar una página Web. Como ya hemos visto, una página no es
más que un archivo de texto, por lo que cualquier programa que nos
permita editar texto, puede funcionar como un editor Web.
Podemos considerar tres categorías de editores Web:
Editores de texto.
Nos permiten editar el código fuente puro y duro, como puede ser
el bloc de notas.
Editores de HTML.
Funcionan como los editores de texto, pero pueden tener algunas
opciones más avanzadas. Como mostrar las etiquetas de colores,
o cerrarlas automáticamente.
Editores WYSIWYG.
Por un lado, nos permiten editar el código fuente como los editores
de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es
decir, ver la página como se vería en un navegador mientras la
editamos. La mayoría de estos editores suelen tener opciones para
realizar tareas adicionales de forma más fácil, como por ejemplo,
crear elementos de un formulario, insertar menús, e incluso código
JavaScript.Editores de este tipo pueden ser Amaya o
Dreamweaver.

Escribir directamente el código fuente nos da un mayor control sobre la

página, obteniendo un código más preciso y sin etiquetas innecesarias.
Pero el tener que escribir cada etiqueta hace que sea mucho más lento
y que debamos conocer mejor el HTML.
Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de

preocuparnos por la mayoría de las etiquetas, y escribimos el texto
como lo haríamos en un procesador de texto. No obstante, no siempre
se generará el código que queramos. Y sobre todo si utilizamos
editores no especializados, como Word que permite guardar como
página web, aunque generando un código muy "sucio". Por ejemplo,
crear un html con Word en el que sólo ponga "Hola mundo", con letra
Arial y tamaño 16px, genera un archivo de 22KB y 400 líneas de
código.
Lo habitual es realizar el grueso de la página en vista de diseño, sobre

todo escribir el texto. Y después, cosas más concretas y correcciones,
realizarlas sobre el código fuente. Esto también depende de los
conocimientos de cada uno.
Nota: Aunque en un editor WYSIWYG podemos ver cómo quedará

la página, siempre hemos de probarla en los navegadores más
utilizados, en este momento Internet Explorer y Mozilla Firefox.
4.2. Elegir un editor

Existe un gran número de editores Web, unos más completos que
otros, con más o menos opciones y con más o menos fallos.

Al elegir cualquier programa, lo primero es optar por una solución

gratuita o de pago. Para realizar nuestra página Web, vamos a utilizar
un editor WYSIWYG. Uno de los mejores (si no el mejor) editor de este
tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido
por la mayoría de desarrolladores profesionales. Pero se trata de un
editor de pago, aunque es cierto que podemos probarlo gratuitamente
durante 30 días. En cuanto a opciones gratuitas, podemos encontrar,
entre otros, Bluefish, más enfocado a programadores; Amaya,
desarrollado por el consorcio W3C; o KompoZer. Nos hemos quedado
con este último por ser bastante simple e intuitivo.
4.3. El entorno de KompoZer

Vamos a echar un vistazo al entorno del editor KompoZer, y ver cómo
realizamos con él las acciones más comunes.
El aspecto general es el siguiente:
En la parte superior encontramos la barra de título, donde se ve el

título de la hoja.

Debajo, encontramos una barra de menús, desde la que podemos

acceder a todas las opciones del programa. Las opciones más
comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las
encontramos en la llamada barra de redacción:
Debajo de esta barra, encontramos las barras de formato, pensadas

para formatear el documento.
Encontramos dos desplegables muy interesantes. El primero, que en la

imagen muestra Texto en el cuerpo, nos permite elegir el elemento
que contienen el texto que escribimos, por ejemplo un encabezado o
un párrafo. El segundo, que en la imagen muestra (sin clase) nos
permite asignar una clase al texto. Si seleccionamos un fragmento de
texto, y le asignamos una clase, encerrará el texto en una etiqueta
<span> con la clase dada.
Tomando también en cuenta que esta barra contiene diferentes

opciones, como en cualquier otra aplicación, para cambiar estilo,
tamaño, alineación y color de fuente.Insertar viñetas y sangrías.

En la parte central, encontramos el área de edición, donde podemos

editar el contenido de nuestra página. Podemos tener varias abiertas
en distintas pestañas.
La forma en que podemos ver y trabajar con la página, depende del

modo de edición, de las cuatros disponibles en la parte inferior:
Normal. Con este modo, vemos el diseño de la página como se

mostraría en un navegador. Aunque aparecen algunas marcas más,
como información de la ubicación de algunas etiquetas especiales,
como comentarios y scripts, y líneas rojas punteadas en los bordes de
tablas y divisiones.
El modo Etiquetas HTML funciona como el anterior, pero mostrando
en cada etiqueta un cuadradito amarillo con su identificador.
El modo Código fuente nos permite trabajar directamente sobre el
código fuente de la página.
El modo Vista preliminar, muestra la página como se vería en un
navegador, sin ninguna marca adicional.
También podemos ver el resultado en nuestro navegador

predeterminado pulsando la tecla F5.

En la parte inferior, en la barra de estado, encontramos una barra que

muestra la jerarquía de etiquetas que hay sobre el lugar donde está el
punto de inserción.
Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo
que tenemos seleccionado, desde la más inmediata a la derecha del
todo, a la primera, que suele ser el <body>.
Esto nos permite seleccionar cualquier etiqueta y todo su contenido

sólo haciendo clic sobre ella.
Si hacemos clic derecho sobre una etiqueta, aparece un menú con

opciones muy útiles:
Seleccionar todo, hace lo mismo que la hacer clic sobre la

etiqueta.
Eliminar (B) borra la etiqueta, pero no su contenido. Muy útil, por
ejemplo, para quitar un span.
Podemos mostrar u ocultar todas estas barras a través del menú

Ver → Mostrar / Ocultar.

4.4. Crear y guardar una página
Para crear una nueva página, basta con pulsar el botón . Esto
creará una página.
Cuando realicemos cambios en la página, y no los hayamos guardado,

aparecerá un pequeño icono en la pestaña .
Para guardar los cambios, podemos pulsar la combinación de teclas
Ctrl + S, o el botón .
La primera vez que guardemos la página, deberemos indicar el título que

le queremos dar (el contenido de la etiqueta title en la cabecera), y su
ubicación.
4.5. Escribir texto en KompoZer

La forma de escribir el texto, utilizar el teclado, etc. es la misma que con
cualquier editor de texto.
Es importante saber en qué elemento estamos escribiendo. Normalmente

lo haremos dentro de párrafos y encabezados, incluso en divisiones.
El color.
Se puede definir el color para varios elementos de la pagina: texto, fondo de
paginas, tablas y celdas, hipervinculos, bordes de tablas, lineas
horizontales, etc.
Seleccionar el color.
En cualquier momento que tengamos que seleccionar un color en
KompoZer lo haremos a traves de un boton de este tipo:
Al pulsarlo aparecera el selector de color:

Desde el cuadro de dialogo que se despliega podremos seleccionar un

color predefinido, o seleccionarlo cualquiera de la paleta de colores, asi
como personalizar su tono, saturacion y brillo. Tambien, podremos
seleccionarlo por su nombre, o por su valor en hexadecimal.
Practica 1 B-4
Utilizando KompoZer, crea una página, siguiendo estos pasos:
1. Crea una página, en donde insertes color, a la fuente y al fondo

de la página.
2. Guarda como, EJER1-B4.html

BLOQUE 4
EDITOR WEB
Sólo una respuesta es válida por pregunta. Subraya la respuesta

correcta.
1. ¿Qué creamos con un editor web?

a) El código HTML y CSS de nuestra página.
b) Una imagen del aspecto de la página.
c) La página de verdad, como se verá, sin código fuente.
d) La parte de la página que no podemos crear con un editor de texto.
2. ¿Qué es un editor WYSIWYG?
a) Un editor de páginas web con caracteres orientales.
b) Un editor que nos permite trabajar con la página viéndola como se
verá en un navegador.
c) Un editor que sólo nos sirve para editar el código fuente, aunque
formateado con colores.
d) Un editor que no trabaja con el código fuente.
3. ¿Qué ventajas tiene escribir el código fuente directamente?
a) Que es más rápido hacer las páginas.
b) Que no requerimos de programas de pago.
c) Que nos da mayor control sobre el código, y nos ayuda a aprender.
d) Ninguna, ya nadie hace páginas web así.
4. ¿Cuál de estas afirmaciones sobre KompoZer no es cierta?
a) Es un editor web gratuito.
b) Es un editor WYSIWYG.
c) Permite programación avanzada, como acceder a bases de datos.
d) Permite crear hojas de estilo.
5. ¿Qué editor mínimo necesitamos para crear nuestra página?
a) El más avanzado que podamos encontrar, y si podemos, uno de
pago.
b) Realmente no necesitamos un editor complejo, podríamos crear la
página con el bloc de notas o programas similares.
c) Cualquiera que incluya un editor especializado en CSS.
6. Una de las ventajas de KompoZer es que vemos la página
exactamente como se verá en el navegador.
a) Sí, es uno de los pocos editores que lo consiguen
b) Sí, aunque no es exactamente igual, y siempre habrá que ver la
página con los principales navegadores
c) No, porque aunque sí nos la muestra, no nos permite trabajar con
ella.
d) No, KompoZer no tiene esta funcionalidad.
7. Al escribir texto en un editor como KompoZer...
a) Al pulsar intro, cerrará el párrafo actual y comenzará uno nuevo.
b) Cambiará los caracteres especiales por la entidad HTML
correspondiente, si asi lo hemos puesto.
c) Podremos cambiar el tipo de encabezado eligiéndolo de un menú.
d) Todas las opciones son ciertas.

BLOQUE V.
PREPARAR UN SITIO WEB
5.1. ¿Qué es un sitio web?
Un sitio web o website, es un conjunto de páginas web, más o menos

extensas, agrupadas bajo un dominio, como puede ser
www.google.com.mx
Lo normal, es que el sitio web parta desde una página inicial, o home,
desde la que podemos acceder, de forma jerárquica a todo el contenido
del sitio, a través de hiperenlaces. A su vez, podemos encontrar enlaces
hacia otros sitios distintos, ya que cada sitio tiene una URL única que nos
permite acceder a él.
En conjunto de los sitios publicados en Internet forman la WEB o WWW.
El contenido de las páginas del sitio, puede estar escrito directamente en

HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de
vez en cuando, ya que hay que hacerlas manualmente sobre el código.
En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan
en HTML a partir de datos, como contenidos de bases de datos, datos
introducidos por el usuario, información global, etc. Esto origina sitios
dinámicos, ya que los cambios se producen frecuentemente y son
generados desde la propia página. Por ejemplo, una página que muestra
la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un
foro.
5.2. La temática del sitio
La idea de crear un sitio web nace porque tenemos algo que comunicar
con el mundo. Y un tema que puede resultar interesante. Porque, por
ejemplo, aunque crear una página Web con nuestros hobbies y aventuras
cotidianas puede ser un buen ejercicio como aprendizaje, a la hora de la

verdad a poca gente le resultará interesante leerlo. Para esto,
obtendremos mejores resultados creándonos una cuenta en una de las
numerosas redes sociales.
El tema también debe de ser concreto. Si dominamos la informática y la

jardinería, no resultará serio si creamos un sitio en el que encontremos
las dos cosas. Es mejor crear un sitio independiente para cada una.
No sólo debemos de elegir un tema que resulte atractivo para un grupo

de usuarios, si no que debemos de tener información sobre él. No tiene
demasiado sentido crear un sitio para escribir un sólo artículo de media
página.
El tema elegido determinará el diseño de la página. No es lo mismo si

pensamos mostrar fotos de animales para los amantes de las mascotas,
una web para niños, una empresa de informática, etc.
Una vez elegido la temática, debemos de distinguir cuales son las

categorías en las que vamos a dividir nuestro sitio. Estas serán más
genéricas o menos, dependiendo del tamaño del sitio.
En nuestro ejemplo vamos a crear la web del Plantel Tlahuelilpan.

Principalmente, a este Plantel, le interesa dar a conocer su institución
educativa, pero también crearemos las páginas que den a conocer
totalmente el mismo y que permitan ponerse en contacto con la
institución educativa.
5.3. Organizar los archivos

El sitio web se encuentra alojado en un servidor, que no es más que un
ordenador conectado a internet, capaz de "dar" archivos a quien se lo
solicita.
Por lo tanto, cuando accedemos a un sitio web, realmente accedemos a

una carpeta de ese ordenador, que funciona como raíz del sitio.
Internamente, dentro de esa carpeta, encontramos archivos y
subcarpetas que nos permiten organizar el sitio, igual que organizamos

los documentos en las carpetas de nuestro equipo.
Entonces ¿cómo organizamos los archivos del sitio? No existe una regla
exacta, ya que depende de muchos factores: número de páginas, cómo
queremos navegar entre ellas, cómo se organiza el contenido, etc.
Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta

una serie de cosas:
En la raíz del sitio, tendremos como mínimo la página de inicio, a la

que llamaremos index.html (o .htm). Esto se debe a que cuando a un
navegador le indicamos que abra una carpeta, busca el archivo index de
la misma.
Organizaremos los tipos de archivo en carpetas. Por ejemplo, una

carpeta para las imágenes que forman parte del diseño de la página. Si a
parte tenemos fotografías de una galería, o de productos, es mejor
ponerlas en otra carpeta, ya que no tienen relación con el diseño. Otra
carpeta para los archivos javascript, etc.
Si tenemos secciones claramente definidas, podemos guardar sus

páginas en subcarpetas.
Por otro lado, daremos un nombre descriptivo a los archivos. Nos

resultará mucho más sencillo si nuestros archivos se llaman
contacto.html y noticias.html que si los llamamos pagina_1.html y
pagina_2.html. A no ser que se trate de páginas del mismo tipo en las
que es muy importante el orden, como páginas de un manual.
Es conveniente planificar cómo va a ser el sitio, y partir de las carpetas

iniciales. Lógicamente, no vamos a tenerlo todo en cuenta, por lo que a
medida que vaya creciendo nuestro sitio, iremos creando las carpetas
que nos hagan falta.
En nuestro ejemplo pensamos crear un sitio pequeño, de menos de 10

páginas.

Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya

los subiremos a un servidor Web.
Comenzamos por crear la carpeta raíz. En este caso, la hemos llamado

sitio_Tlahuelilpan, y la hemos ubicado en la carpeta de EJERCICIOS-
KOMPOZER del curso.
¿Qué tendremos dentro de esta carpeta? A prioridad, contendrá las

páginas, entre las que incluimos un index. También tendremos una hoja
de estilo, e imágenes del diseño de la página, como logos, imágenes
para el fondo, etc. Por lo que será mejor si agrupamos estas imágenes en
una carpeta, que podemos llamar imagenes (omitimos el acento porque
no conviene incluir caracteres especiales en los nombres de archivos y
carpetas). Si más adelante tenemos otros elementos, como archivos
javascript, archivos para descargar, etc, ya nos preocuparemos por crear
más carpetas para ellos.
Vamos a echar un vistazo a las secciones que queremos crear:
 Una sección sobre el plantel en general.

 Una pagina para contacto
 Una pagina para el organigrama
 Una pagina para oferta educativa
 Una pagina de servicios educativos
A excepción de la sección del plantel general, las otras serán páginas

simples, que podemos dejar en la carpeta raíz.
Pensemos en la sección del plantel. Queremos mostrar una amplio menu.

Para que el visitante pueda encontrar la información correcta de acuerdo
a sus necesidades, es importante que clasifiquemos.
En resumen, para la sección del plantel, necesitamos 3 páginas y

fotografías, que estarán mejor recogidas en una carpeta, que podemos
llamar fotos. No son muchos elementos, pero podemos pensar en
agruparlos todos dentro de una carpeta. Esto se hace necesario cuando

hay muchos archivos, pero con tan pocos puede resultar molesto, porque
tendremos que tenerlo en cuenta a la hora de crear enlaces o utilizar las
imágenes del diseño. De todas formas, como el fin de este curso es
didáctico, vamos a crear una subcarpeta para esta sección, a la que
llamaremos flores, para aprender así a manejarlas.
Por lo tanto, la estructura de archivos que planteamos para nuestro sitio

quedaría así:
Comenzaremos por crear las carpetas, y si ya tenemos las imágenes,

guardarlas en ellas. Las páginas y hoja de estilos, las iremos creando
cuando nos hagan falta.
KompoZer dispone de un administrador de sitios, que nos permite ver los

archivos del sitio y abrirlos directamente. En este tema avanzado te
explicamos cómo hacerlo
5.4. Navegación
Antes de comenzar a definir la navegación, debemos de tener una idea
de cómo va a ser el sitio web, es decir, debemos tener una idea formada
de la estructura y extensión del sitio. Así podremos decidir qué sistema
de navegación es el más adecuado.
Si construimos un sitio sobre la marcha, sin planificación, según vaya

creciendo, se irá complicando la navegación y al final no nos quedará
más remedio que hacer modificaciones que resultarán más costosas que
haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debería de necesitar más
de tres clics para llegar a la página que busca. Por eso lo primero que
hemos de pensar es en facilitar a navegación.
El usuario debe de ser capaz de moverse de forma intuitiva por

nuestro sitio sin perderse, para ello:
 Debe de saber dónde está. Debemos de dejarle claro en qué parte

del sitio se encuentra. Para esto es muy útil el título de la página y utilizar
un encabezado que identifique la sección. También debe de distinguir si
sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio
distinto.
 Debe de saber dónde ha estado. Debemos de evitar que el
usuario pase una y otra vez por la misma página para buscar algo. Por
ejemplo, distinguiendo los enlaces ya visitados.
 Debe de saber dónde puede ir. Una página web se basa en
enlaces, y estos deben de ser claramente identificables. Además, no
deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de
páginas entendibles, que se muestran en la barra de estado, o con textos
de información emergentes.
 Debe de poder seguir navegando. No le enviaremos a una
página sin enlaces, desde la que no pueda continuar recorriendo el sitio.
Piensa que puede acceder directamente a esa página, por ejemplo a
través de un buscador, por lo que no podría utilizar ni el botón Atrás del
navegador.
La forma de navegar por nuestro sitio, debe de ser constante. Así, con
visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le
resultará más cómodo.
La forma más habitual de solucionar todo esto es utilizar un menú, que

se mostrará en todas las páginas.
5.5. Estructura del menú

El uso de menús es muy habitual en las páginas web. Un menú no es
más que una lista de enlaces relativos a nuestro sitio, llamados
elementos del menú.
 Por lo general el menú se suele colocar en la parte superior de
la página, junto al logo o debajo de él, o en un lateral, normalmente el
izquierdo.
 El menú no debe de ser demasiado extenso. En un sitio grande
no podemos pretender enlazar con todas las páginas, y no sería útil
hacer buscar al usuario entre cincuenta enlaces.
 Normalmente, aparecerán las secciones de nuestro sitio web. Y
por ejemplo, podemos utilizar diversos métodos para que el usuario
pueda expandir cada sección y ver enlaces a los apartados de la
sección, o utilizar menús desplegables. También podemos mostrar los
enlaces a las distintas partes de la sección en que se encuentra el
usuario, ya que si está en esa sección es probable que le interesen
los apartados relacionados.
 Los elementos del menú deben de ser descriptivos. Por
ejemplo, no es útil poner una imagen, por bonita que sea, si puede
que el usuario no entienda qué significa o a dónde lleva. O que para
saberlo tenga que poner el cursor sobre él.
 El menú debe de ser ligero, y no ocupar demasiado espacio, ya
que se repetirá en todas las páginas.
En lo que se refiere al código, el menú suele tener estos

elementos:
 Los menús se suelen basar en listas <ul></ul>. Dentro de

cada elemento de la lista, colocaremos un enlace. Si no sabes qué
son las listas, puedes verlo en este básico.
 El aspecto del menú se consigue por CSS.
 Suelen tener código javascript, por ejemplo para mostrarlo,
producir efectos más o menos avanzados, o en vez de los enlaces.
Por lo tanto, comenzaremos creando nuestro menú como una lista, a

la que más adelante le iremos dando estilo hasta convertirla en un
atractivo elemento de navegación.

5.6. Estructura de la página

En nuestro ejemplo, como norma general todas las páginas
mantendrán la misma estructura. Por ejemplo, tendrán el mismo logo
o título, el sistema de navegación en la misma posición, el mismo pie,
etc. Sólo iremos cambiando el contenido.
Una excepción a esto puede ser la página de inicio. Pensemos que

esta página es la presentación de nuestro sitio, y el visitante se hará
una idea de qué puede encontrar en nuestro sitio a partir de ella. Por
eso no es extraño que tenga más enlaces que el resto de páginas.
Esto, como siempre, dependerá del tamaño del sitio.
Pero pensando en el resto de páginas, no es una mala idea comenzar

creando una página base, con esos elementos comunes que
podamos utilizar a modo de plantilla.
Vamos a ver qué elementos necesitamos en nuestro ejemplo:
 Un título, para lo que podemos utilizar un encabezado h1. En

el se mostrará el nombre del Plantel Tlhuelilpan.
 Un menú. En este caso pondremos un enlace a las siguientes
secciones:
 Bienvenida (index.html)
 Organigrama (organigrama/index.html)
 Oferta educativa (oferta.html)
 Servicios educativos(servicios.html)
 Contacto (contacto.html)
Como son sólo cinco elementos, vamos a ponerlo en la parte

superior, ya que en un lateral desperdiciaríamos espacio.
 Un área para el contenido. Cambiará en cada página, pero

tendrá un título para la sección.
 El pie, por ejemplo para poner el copyright de la página.
Podemos utilizar un elemento de bloque como un párrafo o un div.
También existe una etiqueta específica, <address> utilizada para

contener información sobre el autor de la página.
Para que nos quede mejor estructurada la página, vamos a utilizar

divisiones en las tres secciones diferenciadas:
ENCABEZADO
TITULO Y MENÚ
CONTENIDO
PIE
De esta manera, entre páginas prácticamente sólo cambiaremos el

contenido.
Con esta estructura en mente, vamos a escribir el código:
Creamos una nueva página, con el Doctype, head, body, etc... Como
ya hemos visto.
Dentro, creamos tres divisiones.
 En la primera, colocamos un <h1> con el nombre de la

asociación. También una <ul>, con un elemento y un enlace para
cada una de las secciones.

 La división central la dejamos en blanco, ya que será la que
iremos cambiando.
 En la tercera división, introducimos el texto del pie. Por ejemplo,
© Todos los derechos reservados.
Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja

de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo
un nombre para la hoja, por ejemplo estilo.css.
Una vez creada, guardamos la página como COBAEH.html.
La página tiene pocos elementos, y te recomendamos que intentes

hacerla escribiendo directamente el código fuente. De todas formas,
puedes seguir este ejercicio paso a paso para realizar la página con
KompoZer, y comprobar el código generado.
Una vez creada, visualiza la página con un navegador. Puedes pulsar

F5 desde KompoZer o hacer doble clic directamente sobre el archivo.
Practica 1-B5
Vamos a crear la página que nos servirá como base

para crear las distintas páginas del curso.
La página la ubicaremos en el sitio que habíamos creado

previamente, llamado sitio_TLAHUELILPAN.
1. En la barra de redacción de KompoZer, haz clic sobre el botón

Nuevo.
2. En la página en blanco, escribe el nombre del sitio,
Tlahuelilpan. No cambies de línea al acabar.
3. En la barra de formatos, en el primer desplegable, elige Título
1.
4. Anexa los logotipos de Cobaeh e Hidalgo
5. Pulsa Intro para saltar de línea.
6. Vamos a escribir el menú. Escribe los distintos elementos, cada
uno en una línea. Debe de quedar con este aspecto.
1. Bienvenida
2. Organigrama
3. Oferta educativa
4. Servicios educativos
5. Contacto
7. Selecciona las cinco líneas y pulsa el icono de la barra de

formatos para convertirlas en una lista no ordenada.
8. Haz doble clic sobre el texto del primer elemento para
seleccionarlo.
9. En la barra de redacción haz clic sobre el botón Enlace.

10. En la ventana que se abre, en Ubicación del enlace introduce
index.html y pulsa Aceptar.
11. Repite los pasos del 7 al 9, pero enlazando los elementos con
las siguientes páginas:
1. Bienvenida (index.html)
2. Organigrama (organigrama/index.html)
3. Oferta educativa (oferta.html)
4. Servicios educativos(servicios.html)
5. Contacto (contacto.html)
12. Haz clic fuera de la lista, en la línea siguiente. Si no puedes

salir de la lista, sitúate en el último elemento y pulsa dos veces intro.
13. Escribe un texto donde irá el título de la sección, por ejemplo
Título. Conviértelo en un Título 2 (<h2>).
14. Cambia de línea, y escribe un texto de ejemplo, como Aquí irá
el texto. Conviértelo en un Párrafo, en el mismo desplegable.
Estos dos elementos los hemos colocados para hacernos una idea de
lo que irá en la página, pero los cambiaremos para cada una.

15. Cambia de línea y escribe el texto del pie, © Todos los
derechos reservados. El símbolo © lo puedes insertar a través del
menú Insertar → Caracteres y símbolos....
16. Sin cambiar de línea, en la barra de formatos, en el primer
desplegable, elige Contenedor genérico (DIV).
17. Cambia al modo de edición de Código fuente.
18. Vamos a encerrar la parte del encabezado en una división.
Escribe la apertura de la etiqueta (<div>) antes de la etiqueta <h1>.
19. Escribe el cierre de la etiqueta (</div>) tras el cierre de la lista

(</ul>).
20. En la página tenemos ahora dos divisiones, una para el
encabezado y otra para el pie. Crea otra para el contenido, que
englobe al título 2 y al párrafo.
21. Para acabar, vamos a añadir el enlace a la hoja de estilos.
Vuelve al modo de edición normal.
22. En la barra de redacción, pulsa en CaScadeS.
23. Despliega el menú de la izquierda y elige Elem. Enlace.
24. En el campo URL escribe estilo.css y pulsa en Crear hoja de
estilos. Pulsa Aceptar.
25. En la barra de redacción, pulsa Guardar.
26. Cuando te pida el título, escribe el nombre de la asociación y
pulsa Aceptar.
27. Asegúrate de que eliges la carpeta sitio_tlahuelilpan para
guardarla, cámbiale el nombre por base.html y pulsa Guardar.

BLOQUE 5
PREPARAR NUESTRO SITIO

1. ¿Qué es un sitio web?

a) Un ordenador en el que se almacenan páginas web.
b) Es un sinónimo de Internet o WWW.
c) Un conjunto de páginas web, agrupadas bajo un dominio.
d) Es el espacio que ocupa una página web.
2. ¿Cuál de estas afirmaciones es falsa?
a) Es mejor tener un sitio de temática muy variada, pero muchas
páginas, que de un tema en concreto, pero pocas páginas.
b) La temática del sitio influye en cómo debemos plantear el diseño.
c) Debemos de tener suficiente información, o suficientemente
atractiva que queramos compartir, como para crear un sitio.
3. Una página .html es...
a) Una página estática, porque su contenido no cambia
automáticamente.
b) Una página dinámica, porque podemos cambiar su contenido
cuando queramos.
c) Puede ser una página dinámica, si su contenido se genera por
programación. Por ejemplo, lo genera el editor web.
d) Es una página estática, porque una vez creada ya no se puede
cambiar.
4. A nivel interno, ¿qué es un sitio en un servidor?

a) Es un archivo especial, generado al unir las páginas del sitio.

b) Una carpeta que contiene páginas web, archivos CSS, etc.
c) El conjunto de dominios a los que se puede acceder en ese
servidor.
4. A nivel interno, ¿qué es un sitio en un servidor?
a) Es un archivo especial, generado al unir las páginas del sitio.
b) Una carpeta que contiene páginas web, archivos CSS, etc.
c) El conjunto de dominios a los que se puede acceder en ese
servidor.
5. ¿Qué es la raíz del sitio?
a) Es la carpeta que contiene todos los archivos del sitio, a la que se
accede al acceder al dominio.
b) Es el nombre del sitio, que lo distingue del resto.
c) Es la jerarquía de carpetas del stio. Cuanto más profunda sea la
raíz, más subniveles tendrá el sitio.
6. Al crear nuestro sitio...
a) Es conveniente organizar nuestros archivos utilizando carpetas. Por
ejemplo, para imágenes.
b) Debemos procurar repetir la misma estructura y estilo en todas las
páginas.
c) Debemos evitar espacios y caracteres especiales en los nombres de
carpetas y archivos, y es mejor usar siempre minúsculas.
d) Deberíamos de seguir todos los consejos anteriores.
7. Es importante emplear encabezados y títulos de página para indicar
al usuario dónde se encuentra.
a) Verdadero.
b) Falso.
8. El estilo de los enlaces suele ser demasiado llamativo. Por estética,
es mejor que se distinga poco del texto.
a) Verdadero.
b) Falso.

9. ¿Cuál de estas afirmaciones no es recomendable al crear un menú?
a) Es mejor poner enlaces directos a todas las páginas del sitio,
aunque sea grande. Así, el usuario podrá ir directamente a la página
que quiere.
b) Lo repetiremos en todas las páginas en la misma ubicación.
c) Conviene que sea ligero.
d) Los elementos serán descriptivos, y preferiblemente usaran texto en
vez de imágenes.
10. Nos puede resultar muy útil crear una página básica con la
estructura del sitio (menú, logo, encabezado...) y partir de ella al crear
el resto.
a) Verdadero.
b) Falso.

BLOQUE VI.
PUBLICA TU PÁGINA ANTERIOR
6.1 Subir a Internet

 No basta con crear tu página web y añadirle texto, dibujos y todas
esas cosas.
 Si quieres que los demás puedan ver tu página (¡Y se supone que la
has hecho para eso!) tiene que ponerla en Internet.
 Internet es como una gran red de ordenadores conectados entre ellos

y, para que se vea tu página, debes ponerla en algún lugar en uno de
esos ordenadores.
 Nota: Pasar cosas de Internet a tu ordenador se dice “Bajar” o

“Descargar”. Pasar cosas de tu ordenador a Internet es “Subir”.
 Para ello, Kompozer tiene un menú en el que se puede configurar

dónde y cómo se subirá tu página:

BIBLIOGRAFÍA
Copyright 2010: Angel Pablo Hinojosa Gutiérrez

El Manual de Kompozer para jóvenes programadores. (Se distribuye
bajo una licencia de Documentación Libre de GNU GFDL)
Juan Pablo Rodriguez Valentin

Desarrollo de Páginas Web:
KompoZer
http://www.aulaclic.es/paginas-web/index.htm

CRÉDITOS
Lic. Veronica López Meneses

Autor
Lic. Raymundo Ortíz Guerrero

Subdirector de Planeación y Evaluación
Lic. David Corona Segura

Tecnico Especializado del Depto. De Capacitación
Para El Trabajo

Guia Paginas Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Paginas Web

Cargado por

Copyright:

Formatos disponibles

DGB (DIRECCIÓN GENERAL DEL BACHILLERATO)

MI PRIMERA PÁGINA WEB

El objetivo de este curso es enseñar a crear páginas web, partiendo

Para seguir el curso sólo necesitas un ordenador y ganas de aprender,

El lenguaje que se utiliza para crear una página web es el HTML,

Explicare brevemente que quiero decir con esto. Lo fundamental para

También es conveniente utilizar un editor web para facilitar la escritura

pero esperamos crear un curso que sea un punto de partida a este

Por supuesto, tratar todos estos temas en profundidad exigiría un

Así, primero (tema 2,3) veremos los conceptos básicos de HTML,

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 2

En algunos temas, sobre todo al principio, la explicación será un poco

Al final de cada tema encontrarás unos ejercicios propuestos. Con

Si te gusta la informática y quieres tener tu propio sitio web como una

1.5. Servidores y direcciones URL

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 3

Donde http:// es el protocolo y www. Indica el sistema de páginas

Podemos visitar una dirección desde un buscador o desde un enlace

Internet está formado por un conjunto de servidores conectados. Un

Los ordenadores se pueden comunicar porque están unidos a través

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 4

Según el esquema que podemos ver en la imagen, un usuario se

Utilizando TCP/IP, el ISP asigna una dirección IP a tu PC y en ese

Cuando queremos acceder a una página proporcionamos un dominio

1.6. ¿Qué es una página web?

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 5

Por lo tanto, si somos capaces de escribir un documento de texto,

Escribiremos el siguiente código. Más adelante ya veremos qué es

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 6

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos

Vamos a continuar guardando la página. Pulsamos en el menú

Nota: Es conveniente que guardes los archivos creados durante el

Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 7

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el

Por lo tanto, un navegador web es una aplicación capaz de interpretar

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 8

1.7. Un sitio web

Cuando escribimos "www.hotmail.com" en el navegador, en realidad

Tal como lo haríamos con una carpeta de Windows, podemos

Coloquialmente, es frecuente referirse a un sitio web sólo como página

Veremos más detenidamente qué es un sitio web cuando creemos los

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 9

Sólo una respuesta es válida por pregunta. Subraya la respuesta que

1. Una página web...

3. Para crear una página web utilizamos...

a) Programas específicos para esta tarea, normalmente muy

5. ¿Cuáles de estas extensiones de archivo corresponden a

a) Es un equipo que almacena las páginas web.

ELABORACIÓN DE PÁGINAS WEB – KOMPOZER VLM PAG. 11

A continuación vamos a ver los elementos básicos o fundamentales del

El lenguaje HTML se basa en etiquetas, por eso es importante

Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que

atributos en minúscula, y los valores contenidos entre comillas dobles.

Por ejemplo, para escribir la siguiente línea:

<p align="center"><font color="#993366" size="4"

Ahora, con estilos:

Como veremos en el siguiente tema, en otro lugar se definen las

2.2. Estructura básica de la página

Todo el documento HTML viene contenido dentro de la etiqueta

Dentro de la etiqueta <html>, encontramos dos subdivisiones, la

< < € €

> > ç ç

é é & &

ó ó " "

Espacio ® ®

10. Añade el siguiente párrafo: <p>El ñandú