Software Necesario

Un software es un programa informático, lo que ocurre es que al decir

software parece que la cosa tiene más importancia, como es una palabra en
inglés... ya se sabe... pero no es más que eso, un programa. Para crear nuestra
página web necesitamos un programa. Para crear webs hay miles, de pago,
gratuitos, regalados, pirateados... Nosotros vamos a ser buenos y usaremos uno
gratuito, por ejemplo uno que se llama Html-Kit

De dónde descargar Html-Kit

El Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa
que podemos escribir con él y Html y Css son los lenguajes que se usan para
hacer páginas web. Es gratuito, esto significa que no has de pagar un duro por él,
aunque tienes la opción de pagar para tener acceso a un sin fín de herramientas
extra. Por lo pronto, con la versión gratuita nos va a sobrar.
Para conseguirlo, qué mejor que descargarlo desde la página oficial, no? Así
estaremos seguros de obtener la versión más moderna. La página es
www.htmlkit.com. Ve haciendo clic y se abrirá una ventana aparte, para que
puedas seguir leyendo estas instrucciones.
Al acceder a la web de Html-Kit podrás ver en la parte alta un cartelito similar
a este:

En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. Puedes

poner lo que quieras, la dirección de esta web, un buscador, etc, etc. En el
hueco de abajo puedes escribir tu email si deseas recibir información de
actualizaciones de este software y cosas así. No son obligatorios ninguno, pero ya
que es gratuito no está al menos contestarles a la primera pregunta, no?
A continuación, pulsa en la parte de abajo de ese cuadro, donde pone
Download HTML-Kit para proceder a la descarga del archivo. Son unas 2.8 megas,
por lo que será algo rápido. Al hacer clic se abre una ventana preguntado si lo
deseas guardar o ejecutar directamente. Escoge Guardar y así lo tendrás a mano
en caso de que te haga falta:
 Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar
su instalación:

Quizás te aparezca un mensaje como este:

 Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En
seguida, el programa empieza a instalarse en tu PC.
Primeros Pasos

 Introdución
 Descargar Html-Kit
 La instalación
 Configuración
 En Castellano
 Simplificando
 El código Html
 Mirando el Código
 Un poco de Orden
 El Sitio Local
 Mi primera página
 Mi primer párrafo
 Mi primer enlace
 La Hoja de Estilos
 Relaccionar Estilos
 Fondos en CSS
 Fondo en Ejemplo
 Insertar Imágenes
 Enlace de E-Mail
 Imagenes y CSS
 Centrar párrafos
 Por el momento..

Cómo Instalar el Html-Kit

Comienza mostando una ventana de bienvenida y preguntándote si quieres
seguir o no... parece que aún no ha entendido que "si".. je je:
 Como va siendo habitual, ahora aceptamos los las condiciones, cómo no,
verdad? Tienes que marcar la casilla que te he marcado en rojo en la imagen de
aquí abajo y después pulsar en Next> :
 Siguiente paso? Inicarle en que carpeta de nuestro disco duro lo queremos
instalar. La opción por defecto es perfectamente válida:

Seguidamente, nos pregunta qué opciones deseamos instalar. Como no hay

quien nos pare, nosotros escogemos todas (que chulos somos,eh?). Seguramente
no las usemos, pero tampoco es cuestión de perderse algo, así que... tó pa
dentro.
 Si aún no te has cansado de aceptar y aceptar, aquí tienes otra ventana que te
pregunta cuál quieres que sea el nombre del programa en tu barra de
programas... aceptamos de nuevo...

Bueno... ahora nos muestra las opciones que se van a instalar. Que majo...
pero un poco pesado..
 Pulsamos Install y... allá va eso! Se instala en un segundo y claro, para no
perder costumbre, nos dice que ya está todo listo. Te recomiendo no dejar
marcada la casilla marcada con un circulo rojo por mí. Eso es para descargarte
más cosas, pero por el momento vamos sobrados. Quita la marca (mira la foto de
abajo) y seguimos, oki?

Hacer un acceso directo al Html-Kit en tu escritorio

Si no igual te cuesta trabajo encontrarlo luego... Basta con ir a Inicio > Todos
los programas > Html Kit y en el icono de la ventana que se despliega, hacer clic
con el botón derecho del ratón sobre el que pone Html Kit y escoger "Crear
Acceso Directo". En ese momento si vuelves a abrir el desplegable verás dos
iconos de Html Kit. En el recien creado aparece un "2" al lado. Haz clic una sola
vez sobre ese icono y SIN soltar el botón, arrástralo hasta tu escritorio y listo, ya
lo tienes a mano. La próxima vez que quieras abrir el Html Kit bastará con darle
dos veces a ese icono de tu escritorio.
 

Arrancando el Html-Kit
En la página anterior nos quedamos en esta ventana:
 Aceptamos de nuevo presionando "Finish" y vemos, cómo no, una
preguntita....

Dice arriba que las preguntas siguientes (vaya, que no es solo una...) son para
ayudarte a configurar el programa, pero que siempre puedes cambiar estas cosas
más tarde desde Edit > Preferencias. Esta pregunta de arriba es por si quieres
que los archivos HTML se abran siempre por defecto con este programa. Por el
momento le diremos que no y al hacerlo, claro, aparece otra pregunta...
 Quieres que Html-Kit detecte los navegadores que tienes para usar la vista
previa con ellos? Fíjate, a esta le vamos a decir que sí, para que no se diga...
Ahora como ves en la ventana de aqui abajo, pregunta si quieres descargarte
enlaces de ayuda e información actualizada.. A esto le diremos que no, pues ya
nos estamos cansando de tanta preguntita y queremos ver el programa de una
vez..

No contento con la contestación, nos pregunta si queremos verificar si hay

alguna versión más moderna del programa... arghhh. Adivina que ponemos?

Y finalmente (espero) nos invita a dar una vuelta por el programa con el
tutorial. Lo siento pero no, mi paciencia tiene un límite, je je je.
 Bueno. Ahora ya si que si, aparece una ventana preguntando qué tipo de
archivo queremos abrir para empezar. Como opciones tenemos:
Create a new file (Crear un nuevo archivo)
Create a new file based on a template (Crear un archivo basado en una
plantilla)
etc, etc, etc. Escogemos Create a new File y antes de pulsar OK desactivamos
la casilla de abajo del todo, donde pone "Don´t display this screen again" o "No
mostrar esta ventana de nuevo".

TACHAAANNN!! Por fin! El programa se deja ver! je je je.

Traducir el Html-Kit al español

 Ahora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para
enterderlo mejor... Para ello es suficiente bajar un archivo de la página web
oficial de Html-Kit y descomprimirlo en una carpeta de nuestro disco duro.
El archivo necesario lo puedes encontrar en:
http://www.html-kit.com/html-kit/download/plugin/irtranslationspanish/

Pulsa donde pone "start download" que significa "empezar a descargarlo". Al

hacer clic allí se abre esta ventana de Windows preguntandote donde guardar el
archivo. Hazlo en la carpeta "default" que se encuentra dentro de una de las
carpetas donde has instalado el programa:

Una vez guardado el archivo (llamado irTranslationSpanish.zip) descomprime

su contenido en esa misma carpeta y listo. La próxima vez que abras el Html-Kit
estará en Castellano gran parte del menú, no todo, pero la gran mayoria.
Si te descargas ese archivo y no logras descomprimirlo haciendo doble cllic
sobre él, quizás sea porque no tienes ningún programa descompresor instalado.
Puedes bajarte el winrar, instalarlo y poder así descomprimir tanto este como los
que te bajes en el futuro. Para cualquier duda al respecto usa el Foro CCTW.
 Simplifica el Html-Kit, Hazlo fácil!
El Html-Kit es un programa sencillo, pero aún así tiene cantidad de opciones
que no vamos a necesitar, al menos por el momento. Así que para no liarnos
mucho con tanto menú vamos a simplificar todo esto. Trataremos de desactivar
todo aquello que no vayamos a usar e iremos activandolo conforme nos haga
falta. Así será todo más claro, oki? Para empezar, abre tu Html-Kit (si lo tienes
abierto, cierralo y lo vuelves a abrir).
Nada más abrirlo nos sale la ventana donde nos pregunta qué tipo de archivo
queremos crear. Esto es lo primero que nos sobra, de modo que marcamos la
casilla de la parte de abajo de esa ventana para que no vuelva a aparecer:

Tras desactivar esa opción y pulsar OK vemos de nuevo el programa con una
página nueva, tal que así:
 Empecemos a desactivar cosas. Para empezar haz clic en la barra de
herramientas, donde pone Ver y vamos a desactivar una a una todas las opciones
que te marco con un circulo rojo en la siguiente imagen:
 Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo,
pero como verás, de este modo la superficie de trabajo que nos queda es mucho
más amplia y clara, no? Quedaría así:
 Mucho mejor, verdad? Ya estamos preparados para empezar el juego. Verás
como crear páginas web va a ser pan comido para tí. Ahora es una buena
oportunidad para empezar a saber qué es ese código que aparece en la pantalla
del Html-Kit. Vamos a verlo en la págima siguiente.
Primer contacto con el código HTML?
Una página web no es más que un puñado de letras y números que son
interpretados por los navegadores mostrando lo que ves por internet. Al ser tan
solo eso, letras y números, podríamos usar por ejemplo el Block de Notas de
Windows para crear una página web completa. Tan solo hay que saber qué letras
y números escribir y luego guardar el archivo, pero en lugar de hacerlo con
extensión .txt se guardaría con extensión .html o .htm (son iguales).
Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o
Block de Notas, el Html-Kit, pues nos va a facilitar algunas cosas que no nos hace
el Notepad y que iremos viendo a su debido tiempo.
El código html de una página web
Todas las páginas web empiezan y terminan con el mismo código y es el
siguiente:
<html> (todas empiezan con esto)
</html> (todas terminan con esto otro)

En adelante, siempre que escriba código HTML lo haré de este modo, de color
azul y con fondo gris para que lo distingais. Pues bien, si eso lo escribimos en un
archivo y lo guardamos con extensión .htm o .html será una página web. Vacia si,
pero una página web.
La primera palabra <html> indica que ahí empieza el código de la web. La
segunda </html> indica que el código de la página web a terminado. Se
distinguen por la contrabarra / que siempre indica que algo ha terminado.

La estructura de una página web en HTML

Dentro de cualquier página web hay cosas que se ven (o que se escuchan) y
cosas que no. Las cosas que se ven son los textos, las imágenes, sonidos, etc. Por
otro lado lo que no se ve son sus características, como el título, su descripción, y
otra serie de cosas que veremos más adelante. Las cosas que no se ven se
colocan dentro del código HTML en una zona llamada cabecera (Head en inglés) y
lo que se muestra se pone en lo que se llama cuerpo (o Body en inglés). Pues
igual que antes hemos escrito en código dónde empieza la página y dónde
termina, la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y
escriben así en Html:
<html>
<head>
</head>
<body>
</body>
</html>

En Html, se indica que va a empezar la cabecera con la palabra <head> y

termina con la misma palabra pero colocandole la contrabarra, </head> tal y
como hemos visto que pasaba para cerrar </html>. Lo mismo podemos decir del
cuerpo, que comienza con <body> y termina con </body>.
Como puedes ver, tanto la cabecera como el cuerpo no contienen nada
dentro, por lo que seguimos teniendo una página web vacia.

Definir el título de una página web

Una de las cosas que se pueden definir dentro de la cabecera o head es el
título de la página. Antes hemos dicho que en la cabecera se colocaban las cosas
que no se mostraban en la web. Este título realmente no se ve en la web, pero si
en la barra azul de la parte alta del navegador (Explorer, Mozilla, Firefox, etc
son tipos de navegadores) por lo que resulta importante aprender a definirlo. Más
adelante veremos por qué es tan importante.
Como ya estarás sospechando, existe una palabra para indicar que va a
comenzar el título y otra para indicar cuando termina, verdad? Que lince, que
inteligencia la tuya oye, je je. El título se define así (como ves, dentro de la
cabecera o head):
<html>
<head>
<title>Este es el título de mi web y puedo escribir lo
que quiera!</title>
</head>
<body>
</body>
</html>

Como siempre, empieza por la palabra <title> y termina con la misma pero
con la contrabarra delante, es decir, con </title>. Fácil, no? Si guardaramos esto
en un archivo con extensión .html o .htm qué veriamos? Una ventana del
navegador completamente en blanco, pero con un título en la parte superior del
navegador como el que hemos escrito. Mira un ejemplo haciendo clic aquí.
Si tras hacer clic en ese enlace y abrirse la página del ejemplo miras el código
de esa página web, verás como coincide exáctamente con el mostrado antes. Si
no sabes, te enseño como mirar el código html de una página web en la página
siguiente.
Por el momento, ya sabes crear páginas en blanco. Todo un logro, verdad? je
je je.
 
Cómo ver el código Html de cualquier página web?
Como verás, estas lecciones están explicadas para quien no tiene ni idea. Si
sabes ver el código Html de una página web puedes pasar sin miedo a la página
siguiente. Si tienes tus dudas, mejor lee estas notas. El curso te va a costar lo
mismo de modo que... aprovechate! je je.
Aunque te parezca una chorrada mirar el código Html de una página web
pronto verás que resulta muy util, tanto para corregir errores en tus páginas
como para ver cómo narices una web que te ha gustado a podido hacer alguna
cosa. Una vez que domines un poco más el diseño de páginas web, aprenderás
mucho cotilleando el código Html de otras páginas.
La forma más sencilla de ver el código Html de una página web es haciendo
clic en las opciones que aparecen normalmente en la barra de herramientas
superior de cualquier navegador. La opción concreta dependerá de cuál sea el
navegador que estés usando.
Si usas el Internet Explorer puedes ver el código haciendo clic en Ver > Código
Fuente.
Cuando pongo esta flechita ">" es para indicar que primero se hace clic en la
opción Ver y al abrirse el desplegable con otras opciones, se toma la opción
Código Fuente. Te enseño una imagen para que lo tengas más claro:

Si en cambio estás usando el Firefox, la opción está en Ver > Código Fuente
de la Página o teclas Control + U.
Para el navegador Opera, el código Html se puede lo tienes en Ver + Código
Fuente o pulsando las teclas Control + F3.
Como ves, son todos parecidos y por supuesto, el código mostrado ha de ser
idéntico. Haz la prueba con esta misma página, o con el ejemplo de la página
anterior, y así compruebas el código del ejemplo, oki?
 

Una Carpeta para dominarlas a todas...

Antes de seguir aprendiendo y creando cosillas con el Html vamos a ordenar
un poco nuestros archivos para no perdernos más adelante. Para ello sigue estas
indicaciones paso a paso.
 La carpeta de nuestras webs
Cuando tengamos lista nuestra página web tendremos que mandar todos los
archivos utilizados a la red (a nuestro servidor) por lo que es necesario que todos
ellos estén en una misma carpeta. En caso contrario sería un lio tremendo saber
qué tenemos que subir.
El lugar más accesible es nuestro escritorio de Windows, de modo que vamos a
crear una carpeta allí llamada "mis-paginas-web". Crear esta carpeta es bien
sencillo. Pones el cursor de tu ratón sobre una parte de tu escritorio donde no
haya ningún icono. Haces clic allí con el botón derecho del ratón y escoges Nuevo
> Carpeta. A continuación le pones el nombre que os he dicho "mis-paginas-web"
y pulsamos Intro. Ya tenemos lista la carpeta. Fácil, no?

Dentro de esta carpeta como te digo, vamos a guardar todos los archivos que
usemos en cada web. Digo "en cada web" porque además de la que vamos a crear
ahora, tú mismo puedes seguir creando otras. Asi que dentro de esa carpeta
vamos a crear otra llamada "web-ejemplo-cctw", que será donde guardemos los
archivos de esta web de ejemplo que iremos creando con estas lecciones.
 Así que, si a la vez que sigues estas lecciones quieres ir creando otra a tu bola,
puedes crear otra carpeta con el nombre que quieras dentro de "mis-paginas-
web", junto a "web-ejemplo-cctw". Así no mezclamos cosas, vale?
Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta más y llámala
"objetos". En ella guardaremos las imágenes, archivos de sonidos, etc. Te repito,
es muy importante que sigas mis pasos al pie de la letra, de modo que cuando
digo que a esa carpeta la llames "objetos", hazme caso y no la llames "Objetos",
ni "OBJETOS". Todo en minúsculas, oki? Ya entenderás por qué.

Como ves, por el momento no tenemos nada de nada, solo sabemos crear
páginas web vacias y carpetas vacias, pero en un par de páginas verás como
cambia esto.. confia en mí.

Configurar nuestro Sitio en en Html-Kit

Ahora que tenemos la carpeta lista, llega el momento de configurar nuestro
Sitio en el Html-Kit. Y qué es un Sitio? Se llama sitio a toda la web, incluyendo
todos sus páginas, imagenes y demás elementos. Coincide o ha de coincidir con la
carpeta que acabamos de crear, pues esa era su función, englobar todos los
archivos del sitio para no liarnos ni liar al Html-Kit.

Abriendo la ventana WorkSpace

Empezamos desde cero, vale? Cierra el Html-Kit si lo tienes abierto y sigue
estos pasos de uno en uno y hasta el final y no tendrás ningún problema.
1- Abre el Html-Kit. Aparecerá en blanco con una pantalla como esta:
 2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa
la opción Workspace.

3.- Aparece ahora una ventana donde podemos definir nuestros sitios:
 Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningún
caso. Cuando seas mayor si quieres las cotilleas pero ahora vamos a lo nuestro.
En el futuro, puedes cerrar esa ventana pulsando sobre la x de su parte superior
derecha y puedes volver a verla siguiendo lo explicado en el paso 2. Cuando te
moleste la cierras, cuando te haga falta la abres. Fácil, verdad? Y para qué sirve
esto? Lo vemos ahora mismo.
Sitio Local y Sitio Virtual
Dentro de esa ventana llamada WorkSpace vamos a definir dos sitios. Uno que
se llama Sitio Local que se corresponde con la carpeta que tenemos en el
ordenador llamada antes "ejemplo-web-cctw" y otro sitio que podemos llamar
Sitio Virtual, que será el espacio en internet. Este segundo lo veremos más
adelante. Por ahora vamos a definir el Sitio Local de la siguiente forma:
1.- Hacemos clic en la barra de herramientas, donde pone Workspace y
escogemos Añadir Carpeta Local/Red.

2.- En la ventana que se abre (como ves, la traducción al español no es

completa, pero podremos defendernos, ya verás), tienes que poner la carpeta
"pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su
 derecha para encontrarla y escogerla) y en el segundo hueco pon un título
cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK:

3.- Tras pulsar OK verás como aparece este nuevo sitio en la ventana de
Workspace:

A partir de ahora, cada vez que queramos trabajar sobre archivos de esta
página web, en lugar de abrir la carpeta que hemos creado en lecciones
anteriores (web-ejemplo-cctw), podemos acceder a ellos directamente desde
acá.
Ahora sí que podemos ya empezar a crear nuestra página web. Que
emocionante...... no?
Que tal crear otro sitio para tus pruebas?
Como veo que eres un poco impaciente, vamos a crear una segunda carpeta o
sitio local, en el que podrás hacer todos los experimentos que quieras. Así podrás
dejar el sitio "web-ejemplo-cctw-local" solo para lo explicado aqui y no te harás
un lio mezclando lo que explicamos con tus propias pruebas, vale?
Para crear esa otra carpeta local repite los pasos anteriores, y crea otra para
tus cosas llamada como quieras, por ejemplo "mis-experimentos". A la hora de
crearla te pide una carpeta. Puedes crear una llamada "mis-experimentos" dentro
de la carpeta del escritorio llamada "mis-paginas-web" si quieres.
Primeros Pasos

 Introdución
 Descargar Html-Kit
 La instalación
 Configuración
 En Castellano
 Simplificando
 El código Html
 Mirando el Código
 Un poco de Orden
 El Sitio Local
 Mi primera página
 Mi primer párrafo
 Mi primer enlace
 La Hoja de Estilos
 Relaccionar Estilos
 Fondos en CSS
 Fondo en Ejemplo
 Insertar Imágenes
 Enlace de E-Mail
 Imagenes y CSS
 Centrar párrafos
 Por el momento..

 Cómo crear la primera página de la web

 La primera página que vamos a crear es la página principal. La página
principal es la que se muestra por defecto al visitante cuando nos visita, la
primera que ve. Su archivo ha de llamarse obligatoriamente index.html
sea cual sea el servidor donde la alojemos.
 Como esta página va a pertenecer al sitio "web-ejemplo-cctw", tendremos
que apañarnoslas para crearla dentro de ese sitio y no en los otros que
aparecen en la ventana de Workspace. Para crearla ponemos el cursor del
ratón dentro de la ventana de Workspace, justo encima del sitio "web-
ejemplo-cctw" y pulsamos el botón derecho del ratón.
 Se abre entonces una ventana en la que tenemos que escoger, dentro de
la sección New, la opción Create File...
 
 Al hacer clic sobre Create File... aparece esta otra ventana:


 Haz clic sobre la lengüeta en la que pone "General", escoge el tipo de

archivo "Blank HTML Page" (página html en blanco) y pulsa Ok.
 En seguida aparece otra ventana preguntando (este programa no para de
preguntar.. verdad? que pesao es... je je) preguntándonos el nombre que
queremos que tenga ese archivo. Cuál debe ser? Cómo? Que no lo sabes?
Ejem.... hay que estar más atento! je je. Se tiene que llamar index.html
 pues será la página principal, así que lo escribimos en esa ventana, con la
extensión y todo y pulsamos en Ok:


 Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido
creado. Para verlo solo tienes que hacer clic en el signo "+" que hay a la
izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace. Haz
clic allí.


 Como ves, no solo te muestra el archivo index.html sino también la
carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y
abres la carpeta verás como además de la carpeta "objetos" también
aparece allí el archivo index.html
 Ya estamos listos para escribir contenidos el la página principal,
index.html así que vamos a la siguiente página y comenzamos el juego!

Cómo crear un párrafo en la página web

Si has prestado atención a lo dicho hasta ahora, te acordarás de que las cosas
que se ven en la web se colocan dentro del cuerpo o Body, es decir, entre las
etiquetas <body> y </body> de modo que, si vamos a escribir un párrafo
tendremos que hacerlo allí.
Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana
Workspace, hacemos clic en el signo "+" que hay a la izquierda del sitio "web-
ejemplo-cctw" para que se muetre su contenido y después hacemos doble clic en
el archivo index.html o página principal. Se abre entonces la ventana de ese
archivo mostrando todo su código Html.

Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la
ventana Workspace para tener más sitio visible. De modo que hacemos clic en la
x de Workspace para cerrarla y después maximizamos la ventana del index para
ocupar toda la ventana del Html-Kit, quedando así:
 Esta es la vista llamada "Editor de Html". Como verás, el código de esta
página coincide más o menos con el que te expliqué en las primeras lecciones,
verdad? Empieza por <html> seguido de la cabecera y después el cuerpo o Body,
para cerrarse al final con </html> que como toda etiqueta de cierre lleva su
contrabarra "/".
Se ve también esa primera línea de la que no te he hablado aún. Esa línea
describe el tipo de página que es, las normas de Html que está siguiento. No
tiene mayor importancia, la dejaremos y listo.
Cambiando el título
Vamos a cambiarle el título a esta index. Bastará con escribir el título que
quedamos en lugar de donde pone "Page title". Vamos a ponerle todos "Pagina
Principal del Ejemplo CCTW". Ya sabes, entre <title> y </title>.
Mi primer párrafo
Al igual que un título se escribe entre <title> y </title>, un párrafo hay que
escribirlo entre las etiquetas <p> y </p>. Así, para escribir por ejemplo
"Bienvenidos a mi página web. Muy pronto estará lista!" basta con escribir esa
frase encerrada entre esas etiquetas, dentro del cuerpo de la página es decir,
entre <body> y </body>. Quedaría así:
 Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver
cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o
vista previa, que nos muestra cómo quedaría la web vista por internet. A esta
vista previa o preview se accede haciendo clic abajo del todo, junto a donde
pone "Editor". Haz clic ahí y veamos como queda nuestro ejemplo por el
momento, vale?

Bueno, por el momento no es gran cosa pero... sabías hacer esto antes? Pues
pronto aprenderás mucho más. No vamos a parar hasta que aprendas a crear
páginas como ComoCrearTuWeb, oki? je je, no va a ser dificil, verás.
Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de
código Html. Ya sabemos algo más.

Crear un segundo párrafo en la página

 Para crear un segundo párrafo ya imaginarás lo que hay que hacer, no? Basta
con incluir ese segundo párrafo debajo del anterior y encerrarlo entre las
etiquetas <p> y </p>. Por ejemplo, vamos a poner este segundo párrafo: "Página
creada gracias a CCTW". En la vista "Editor" la página quedaría así:

Esto es lo que hemos conseguido hasta el momento: ejemplo 2.

Cómo guardar los cambios realizados

Para guardar lo que hemos hecho hasta el momento pulsa en la barra de
herramientas, donde pone Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit
sin miedo a perder nada, e irte a merendar, que llevas ya mucho tiempo delante
del ordenador, je je je je.

Cómo crear un enlace en la página web

Lo importante de una página web es la posibilidad de navegar de unas páginas
a otras sin más que hacer clic en los enlaces, así que vamos a aprender a
crearlos. Para crear un enlace hay que decidir dos cosas, una es desde qué
palabra de nuestra web lo queremos hacer y segundo a qué página lo queremos
dirigir.
Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que
tenemos escrita en el segundo párrago hacia la dirección
www.comocreartuweb.com
Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado
los cambios hechos en la página de antes). Ahora vuelve a abrirlo y aparecerá el
Html-Kit en blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que
aparezca la ventana de los sitios ( la ventana Workspace) y una vez que aparezca
haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su
contenido. Ppara terminar, doble clic sobre el archivo index.html para ver su
código. Tras esto, como sabes, puedes cerrar la venata de Workspace para tener
más espacio.
El código Html de los enlaces o vínculos
Como estarás sospechando, los enlaces empiezan con una etiqueta y terminan
con otra de cierre. La etiqueta de inicio para definir enlaces es <a> y la de cierre
</a>. La palabra que encerremos entre esas dos etiquetas será la que el visitante
pueda pinchar para acceder a la página enlazada. Por lo tanto, si la palabra
fuera "palabra" (que poco original, no?) la línea quedaría así:
<a>palabra</a>
Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a
qué página queremos enviar al visitante al hacer clic allí, no? Esto se define
dentro de la etiqueta de inicio, de este modo:
<a href="ruta">palabra</a>
Donde pone "ruta" hemos de poner la dirección completa del lugar a donde
queremos mandar al visitante. Te recomiendo que leas las instrucciones sobre
rutas que tenemos en ComoCrearTuWeb. Te evitarán muchos problemas en el
futuro.
Como queremos enlazar a una web externa, pondremos entre las comillas su
ruta absoluta que es esta: http://www.comocreartuweb.com quedando el
código del enlace de este modo:
<a href="http://www.comocreartuweb.com">CCTW</a>
Te dejo una vista del Html-Kit para que lo veas más claro, vale?
 En la misma o en otra ventana?
Si no se indica ninguna cosa más, cuando el visitante haga clic en el enlace la
página destino se abrira en la misma ventana, pero si quieres que en lugar de eso
se abra en una ventana distinta (por ejemplo, para que no se pierda la web
anterior) has de indicárselo dentro de la primera etiqueta. Yo te recomiendo que
todos los enlaces hacia páginas de tu misma web se abran en la misma ventana, y
que todos los enlaces hacia páginas externas las abras en ventanas diferentes.
Como este enlace apunta a una página externa (no forma parte de la web de
ejemplo) le vamos a indicar que ha de abrirse en una ventana distinta y esto se
hace añadiendo este trozo de código target="_blank" quedando por tanto el
código así:
 Quieres ver como está quedando? Este es el aspecto del ejemplo 3.

Los estilos css

El mayor problema que encontramos los que hacemos páginas web es el
conseguir que se vea idéntica en cualquier navegador. A veces terminamos una
web que se ve perfecta en Explorer y de pronto viéndola con el Opera o con el
Firefox descubrimos que está toda desordenada. El el peor sueño que podemos
tener, je je je. Esto pasa porque no todos lo navegadores interpretan igual las
cosas que escribimos en el código Html.
Para evitar esto lo mejor es usar estilos CSS. Mucha gente piensa que es algo
complicado, pero como lo vamos a ir aprendiendo sobre la marcha no te va a
resultar nada dificil, ya lo verás.
La idea es colocar en las páginas web solamente los contenidos, sin tener en
cuenta colores, tamaños, anchuras ni nada de nada, solo contenidos puros y
duros. Por otro lado crearemos un archivo aparte donde definiremos todas las
características que queremos que tenga cada elemento de cada una de las página
de la web. De este modo si un día creemos por poner un caso que el tamaño de
la letra es muy pequeño y queremos hacerlo más grande, solo tenemos que
indicarlo en ese archivo de características y automáticamente el tamaño de letra
quedará cambiado en tooodas las páginas de nuestra web. Genial, no? Lo mismo
podremos hacer a la hora de cambiar el fondo de la página, la posición de cierto
elemento, el color de fondo de una parte, el coloreado de los enlaces.... todo lo
que tenga que ver con el modo de presentar las cosas de la web se queda
definido en ese archivo de características, vale?

La hoja de estilos css

 Este archivo de características se llama Hoja de Estilos y aunque podemos
ponerle el nombre que queramos, vamos a llamarlo siempre estilos.css para no
liarnos. La extensión, .css es obligatoria.
Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar
en cada una de las páginas de nuestra web que ha de leer esa Hoja de Estilos
para saber cómo queremos que se presenten los elementos de la web.
Crear la Hoja de Estilos "estilos.css"
Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista
de Workspace para tener a mano el sitio "web-ejemplo-cctw". Igual que hicimos
para crear la página principal index.html ahora vamos a hacer algo parecido
para crear el archivo estilos.css
Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio "web-
ejemplo-cctw" de la ventana Workspace y escogemos New > Create File... Se
abre entonces la ventana que nos pregunta qué tipo de archivo queremos crear.
Escogemos este que os enseño en la imagen de abajo:

Fíjate que está en la primera pestaña, donde pone StyleSheet que significa
Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de
Estilo en blanco. Al pulsar Ok nos pregunta qué nombre queremos darle al nuevo
archivo. Escribimos "estilos.css"

Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio
"web-ejemplo-cctw" de la ventana Workspace, nuestra Hoja de Estilo para
variar, en blanco.
 Esto cada vez pinta mejor, no?

Relaccionar la Hoja de Estilos CSS con la página web

Ahora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay
que decirle a la página web index.html que tiene que leer las características que
hay en estilos.css para que sepa qué propiedades queremos que tenga cada
elemento de la página. No te preocupes si no te enteras mucho de cuáles con
estas características, pues lo vamos a ver muy pronto y te va a quedar bien
clarito.
Como los estilos no son un elemento que aparecerá en la página sino algo que
indica cómo se han de mostrar los elementos (color, tamaño, etc), parece fácil
adivinar que los estilos (o la llamada a la hoja de estilo) hay que indicarlos
dentro de la cabecera o Head de la página no? Pues vamos allá. La línea de
código Html que tenemos que incluir en la cabecera, es decir, entre <head> y
</head> es esta:
<link rel="stylesheet" href="ruta/estilos.css" type="text/css"
media="all">
(No pongas lo escrito en rojo. Eso significa que en ese lugar tienes que escribir
la ruta, no que tengas que escribir "ruta/" literalmente. Sigue leyendo para
tenerlo más claro)
Lo único que tendrás que cambiar en algunas ocasiones de esa línea es ruta/.
Y cual será? Si leiste bien el apartado de las explicaciones de las rutas de los
archivos de ComoCrearTuWeb se te hará más fácil entenderlo (leelo ahora si no
lo has visto antes). Vamos a usar una ruta relativa para indicar dónde ha de leer
la página index.html el archivo estilos.css
Como tanto la página index.html como el archivo estilos.css están en la
misma carpeta, basta con escribir el nombre del archivo de la Hoja de Estilo.
Esto es, usar rutas relativas. El código Html ha de queda entonces así.
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
De modo que abrimos el Html-Kit, abrimos la página index.html y escribimos
esa línea de código dentro del Head, quedando de esta forma:
 Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de
abajo del Html-Kit) verás como no hay cambio alguno. Esto es porque la Hoja de
Estilo (estilos.css) está todavía vacia, pero te prometo que te va a encantar el
invento este cuando veas de lo que es capaz. Venga, lo estás haciendo genial!

Explicando el color y la imagen de fondo de una página web

Aunque podemos indicar un color y/o un fondo de página directamente en el
código Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y
aprovechar las ventajas que te he comentado en la página anterior. Así de paso,
vamos a prendiendo a usar el archivo estilos.css para definir las características
de las página web.
Color de fondo
Por defecto, el color de fondo de una página web es el blanco. Si queremos
cualquier otro tenemos que indicarlo. El elemento al que tenemos que decir que
tiene que tener el color que queramos es el Body, pues engloba a todo "lo que se
ve" de la página web. Los colores se definen por un código muy raro (como por
ejemplo #E6E6FA). Te dejo aquí un enlace con una lista de colores y sus códigos
que te puede venir muy bien. Escoge uno que te guste para el fondo y seguimos.
 Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana
Workspace y abrimos la Hoja de Estilos creada antes. Escribe en ella este código:
body {background-color: #E6E6FA}
En adelante, cuando escriba códigos de CSS los pondré en color verde para
distinguirlos del código Html que lo pondré de color azul. oki? (Cómo crees que
hago esto? je je je, pues sí, con estilos CSS..)
Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en
"Preview" para ver como queda, verás como el fondo ahora es del color elegido.
Bien, no? Y verás que no hemos tocado el index.html para nada. Si en lugar de
solo el index tuvieramos 500 páginas pasaría lo mismo, todas cambiarian con solo
retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos
tendríamos que cambiar el color de fondo en las 500 páginas, una a una, a
mano!!... es un buen invento o no? Pues aún hay webmasters que no lo saben
usar... vaya tela.
Un poco de estilos CSS
Ya de paso te explico un poco de estilos css. Para dar propiedades a los
elementos de la web, se escribe en la hoja de estilos el nombre de la etiqueta y
a continuación, encerrado entre los corchetes "{" y "}" se define cada propiedad
que queremos pero separándo unas de otras con un punto y coma ";". En el caso
anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre
corchetes hemos definido la propiedad. Background que significa fondo.
background-color se usa para especificar el color de fondo no solo del body sino
de otros muchos elementos, como párrafos, enlaces, etc,. Ese número raro, el
#E6E6FA es el código que corresponde a uno de los colores que aparecian en la
tabla de colores del enlace que te puse antes. En este caso, como solo hemos
definido una propiedad, no es necesario poner el punto y coma, pues no hay nada
que separar. Te parece muy raro todo esto? No te preocupes, pronto te será
familiar y lo harás con los ojos cerrados... bueno con uno un poco abierto sale
mejor.. je je.

Imagen de fondo
La imagen de fondo se define de forma similar al color de fondo. Primero
vamos a escoger una imagen que nos guste. Tienes un montón en la Galería de
Imágenes, pero puedes colocar cualquiera que tengas a mano. Cuando la tengas,
copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrás en tu
escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-
paginas-web", y una vez copiada allí le cambias el nobre y le pones "fondo.png".
Suponiendo que le hemos puesto de nombre fondo.png el código a insertar en
la hoja de estilos sería este:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad
imagen de fondo con un punto y coma, tal y como te comenté antes.
 Explicando el Background-Image
En este caso la propiedad se llama background-image y sirve para indicar el
archivo de imagen de fondo que ha de tener la web. La ruta del archivo de
imagen se escribe entre los paréntesis tal y como hemos visto en el código. Por
defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetirá
horizontal y verticalmente para ocupar todo el fondo de la página, como
formando un mosaico.
Se puede hacer que no se repita, que se repita solo horizontalmente, o solo
verticalmente e incluso que no se repita y colocarlo en el centro, o en la parte
baja o a la derecha.... En cambio no es posible conseguir que solo salga una vez
y que a la vez se expanda ocupando toda la página. Vamos a ver todas esas
opciones.
Background-Repeat
Para que el fondo solo salga una vez hay que decirle, en la misma línea de la
hoja de estilo que no se repita, de este modo: background-repeat:no-repeat
quedando así el código de la Hoja de Estilos:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat:no-repeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar:
background-repeat:repeat-x
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat:repeat-x }
Para que se repita solo verticalmente se escribe: background-repeat:repeat-y
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat:repeat-y }
Para que se repita vertical y horizontalmente no hace falta poner nada, pero
si lo deseas puedes poner esto: background-repeat:repeat, tal que así:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat:repeat }
Aún hay otro valor posible que podemos dar. Se trata del valor "inherit" que
significa algo así como fondo anclado. Significa que aunque movamos la web el
fondo quedaría fijo y solo se desplaza el contenido, no el fondo. Eso si, no
funciona en todos los navegadores, tenlo en cuenta si lo aplicas.

Background-Position
También puedes elegir que el fondo aparezca arriba y centrado, abajo a la
izquierda y todas estas combinaciones con la propiedad background-position. Te
dejo un ejemplo para que lo pruebes y veas como funciona:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat: no-repeat ; background-
position: left bottom}
 Los valores que puede tomar son: top (arriba), center (centrado) y bottom
(abajo) para la alineación vertical; y left (izquierda) center (centro) y right
(derecha) para la alineación horizontal, de modo que puedes usar cualquiera de
esas combinaciones.
Aunque no se recomienda, también puedes usar distancias, es decir, indicarle
que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba, así:
background-position: 50px 100px. Un pixel es una medida de distancia y
equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor,
casi pegando las narices a él, verás que todo está hecho con puntitos. Pues
cada uno de esos es un pixel. Para hacerte una idea, estas letras que lees
deben tener unos 10 pixeles de ancho cada letra. Una página web suele tener
una achura de 800 pixeles.
Background-Attachment
Esto no funciona en todos los navegadores y hace que la imagen de fondo se
quede fija mientras mueves la página con la barra de desplazamiento o que se
mueva con ella. Los valores a tomar son fixed o scroll. Pero no te lo recomiendo
por que depende del navegador conseguiras el efecto o no.

Nota:
Realmente, si definimos una imagen de fondo no es necesario el color de
fondo. Puede estar bien por si el archivo de la imagen de fondo no se cargara,
pero si estamos seguros de que está bien podemos eliminar la propiedad
background-color de la línea de la hoja de estilos, no crees? Pues a no ser que la
imagen no ocupe toda la página, la imagen tapará el color de fondo. En cambio si
la imagen solo ocupa una parte si puede ser interesante colocar el color de
fondo. Eso queda ya a tu criterio

Aplicando color e imagen de fondo a nuestro ejemplo

Ups, creo que en la página de antes me he pasado un poco escribiendo. Espero
no haberte asustado, je je je. Solo acuérdate de que ahí hay información de los
fondos por si algún día te hace falta. Vamos ahora a aplicar un color de fondo a
la web de nuestro ejemplo.
Aplicando el color de fondo
Tal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la
página web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente
(ya sabes, abres el Html-Kit y abres la hoja de estilo para insertarle esta línea):
body {background-color: #E6E6FA}

Aplicando una imagen de fondo

Suponiendo que hemos escogido esta imagen para el fondo de la web (lo se, es
horrible, pero para el ejemplo sirve, no?):
 (Para guardártela, pon el ratón sobre ella, haz clic derecho y escoge guardar
como. Luego la guardas en la carpeta "objetos".)
y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos
llamado "fondo.png", abrimos la hoja de estilo y dejamos la línea de antes así:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) }
Como no quiero que se repita, le pongo tambien esto:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat: no-repeat }
Además la quiero centrada tanto vertical como horizontalmente, así que le
añado esto:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-repeat: no-repeat ; background-
position: center center}
En otros navegadores no pasa nada, pero en Firefox es necesario especificar la
altura del body para que el fondo salga centrado verticalmente. Para conseguirlo
solo hemos de indicar en esa misma línea que el body va a tener una altura del
100%, esto es... que va a ocupar lo que tenga que ocupar. Una chorrada, lo se,
pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto:
body {background-color: #E6E6FA ; background-image:
url(objetos/fondo.png) ; background-position: center center ; background-
repeat: no-repeat ; height:100%; }
A veces hay que buscar el truco para que se vea bien en cualquier navegador y
la mayoria de veces es un calentamiento de cabeza tremendo, pero tú tienes la
suerte de contar con CCTW, je je je.
La página de ejemplo, tras guardar la hoja de estilo, se vería así con cualquier
navegador (espero...):
 Si tú la ves diferente, rara, nos lo dices en el foro, en la sección de Html-Kit y
así lo reparamos y retocamos la lección, oki?
Qué tal? Mereció la pena el rollo de la página anterior? je je je. Intentaré
hacerlo más ameno la próxima vez...

Cómo insertar una imagen en una página web

Ya hemos insertado una imagen como fondo de página pero para insertar una
imagen dentro de la misma el procedimiento es algo distinto. Como puedes
sospechar, como las imágenes son "visibles" van definidas dentro del Body. En
qué lugar? Eso ya depende de donde la queramos insertar.

Dónde insertar la imagen.

Si creamos la línea de código Html en cualquier parte dentro del Body, ésta
aparecerá allí, en cualquier parte. Al principio uno de los problemas que vas a
tener es no saber en qué parte del código Html insertar la línea de código
correspondiente a un elemento para conseguir que aparezca donde deseas,
verdad?
Pues bien, una imagen puede insertarse o bien dentro de un párrafo, es decir,
entre palabras, como este ejemplo y sin que el párrafo se corte, o bien como
una línea independiente. En ambos casos es aconsejable meterla en un párrafo, a
pesar de que sea la imagen lo único que haya en esa línea, es decir, siempre
encerrada entre <p> y </p>.
 Código Html para insertar una imagen
Para insertar una imagen, se coloca el siguiente código:
<img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion
de la imagen">
Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre,
es decir, no se pone </img>. Recuérdalo, oki? Las imágenes nunca tienen
etiqueta de cierre. Vamos a ver lo que hay dentro de ese código.
Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa
(si la imagen pertenece a, o está guardada en tu espacio web) o absoluta
(siempre que la imagen la estés obteniendo de otra web distinta a la tuya,
aunque esto no es recomendable). Las rutas van siempre encerradas entre
comillas, no lo olvides.
Luego se coloca su anchura y altura expresada en pixeles con las siglas "px".
No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es
decir, no vale poner esto "100 px", sino que lo válido es ponerlo junto, así
"100px". Estas cantidades las coloca normalmente el Html-Kit automáticamente
y si tú las cambias seguramente la imagen se vea desvirtuada y perderá
definición. Si necesitas cambiar el tamaño mejor hacerlo con un programa
gráfico y luego la vuelves a pegar en la página, oki?
En el caso de que no pongamos ni width (anchura) ni height (altura), si el
archivo de la página fallara, el resto de los elementos como párrafos etc,
ocuparían el lugar de esa imagen. Sería como si no existiera. En cambio, si
definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra,
el navegador dejará un rectángulo con esas medidas en blanco, respetando la
estructura de la web, sin mover nada. Eso es bueno, no crees?
Por último vemos un alt="........". No es obligatorio, pero para tener un código
válido es necesario poner ese alt y además escribir entre las comillas una breve
descripción de la imagen. Este contenido aparece en el hueco de la imagen en el
caso de que la propia imagen no se visualizara por algún problema. Por otro lado,
algunos buscadores como Google tienen en cuenta estas palabras escritas en
estas descripciones para relacionar las búsquedas de sus usuarios con el
contenido de las páginas web, de modo que es bueno además hacer que aquellas
palabras por las que queremos ser encontrados aparezcan en esa descripción. En
mi caso, si quiero aparecer en Google cuando la gente busque por las palabras
"html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las
imágenes como "Menú del Html-Kit", o "Así se descarga el Html-Kit", pero siempre
que tengan su sentido con esa imagen, claro.

Vamos a insertar una imagen en nuestro ejemplo

En primer lugar necesitaremos una imagen guardada en la carpeta "objetos",
que para eso está. Copia esta misma que dejo debajo, la guardas en tu carpeta
"objetos" y seguimos. Recuerda que para copiártela solo tienes que poner tu
ratón sobre ella, apretar el botón derecho del ratón y escoger "Guardar imagen
como...". Ponle el nombre sonrisa.gif y seguimos adelante.
 Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la
página index.html para continuar. Vamos a colocar la imagen entre el párrafo
donde dice "Bienvenidos a mi página web" y el que dice "Página creada....". Como
va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor
después del primer </p> (al final de la línea de código del primer párrafo). A
continuación pulsamos Intro para crear una nueva línea e insertamos esto (como
te he dicho, la encerramos entre nuevos <p> y </p> que también debemos
escribir):
<p><img src="objetos/sonrisa.gif" width="60px" height="60px"
alt="Bienvenidos al ejemplo de CCTW"></p>
Quieres aprender a hacerlo directamente desde las opciones del Html-
Kit?
Situa el cursor al final del primer párrafo, como antes. Pulsa Intro para crear
una nueva línea y seguidamente ve a la barra de herramientas del Html-Kit y
escoge Etiquetas > Imagen > Insertar Imagen...

Aparece entonces esta ventana:

 Pulsas sobre Add... y en la ventana que se abre (mira la imagen de aqui
arriba) busca la carpeta "objetos". Tras pulsar en Aceptar se ve esto en la misma
ventana:
 Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha, verás como
aparecen una serie de datos que te he señalado en rojo en la foto de arriba.
Aparce la ruta relativa, lo que ocupa, el ancho, el alto, etc. Curioso, verdad?
Nos falta ya que estamos ahí poner la descripción. Para eso pulsamos a la
derecha de donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y
escribimos la descripción que te dije antes "Bienvenido al Ejemplo de CCTW".
Como verás hay muchísimas más opciones para las imágenes en esa ventana, pero
por ahora lo dejamos así, para no saturarnos, oki?
Tras escribir la descripción y pulsar Ok, vemos como aparece la línea de
código en nuestra index.html aunque le falta colocarle las unidades, es decir,
escribir "px" tras cada cantidad de anchura y altura. Ponlo tú mismo a mano (sin
dejar espacios entre el número y el px !!!) y seguimos.
Si te soy sincero, estoy aprendiendo a usar el Html-Kit a la vez que hago las
lecciones, je je je. En cuanto descubra como hacer para que aparezcan las
unidades automáticamente os lo diré, .

Cómo insertar un enlace a tu E-Mail

Sin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que
mejorar, de modo que colocar un enlace donde el usuario pueda hacer clic para
escibirte un E-Milio parece algo imprescindible, verdad? Claro que más adelante
colocaremos un foro en la web, pero nunca está de más al menos saber como
insertar estos enlaces de correo, así que vamos a aprender.
 Código Html de un enlace de E-Mail
Como vas a ver, es muy parecido al código Html de un enlace a otra página
web. Solo cambian una palabrilla, y por supuesto la ruta, que en este caso será
simplemente tu dirección E-Mail. La línea de código en Html es la siguiente:
<a href="mailto:tudireccion@email.com">Texto que quieras poner para
hacer clic en él </a>
Donde pone "Texto que quieras poner.." escribe las palabras que verá el
visitante y donde ha de hacer clic para enviarte el mensaje. Puedes poner
"Envíame un E-Milio", "Clic para escribirme" o simplemente la propia dirección de
tu E-Mail.
Problemas de este tipo de enlace
El problema que yo le veo a esto es que hay miles de robots pululando por la
red en busca de direcciones de E-Mail para crear bases de datos con ellos y
enviarles todo ese spam del que terminamos tan hartos. Por lo que quizás
prefieras una alternativa, más incomoda para el visitante pero efectiva contra el
spam. Se trata de escribir tu dirección de E-Mail con un programa de dibujo y
colocar la imagen en la web. De este modo, como las imágenes no pueden ser
leidas, estos robots no pueden cazar tu dirección mientras que cualquiera de tus
visitantes siempre puede leerla y escribirla en su programa de correo para
mandarte sus felicitaciones.
También puedes colocar un botón cualquiera y hacer el enlace desde allí. El
botón sería un simple dibujo con el texto "E-Mail" o el dibujo de un buzón de
correo o algo así. En ese caso los robots de spam no pueden leer la imagen, pero
quizás puedan sacar la dirección de tu E-Mail desde el código html de tu web, por
lo que seguimos con el mismo problema...
Qué hacemos entonces? Por el momento y para el caso del ejemplo, vamos a
colocar el enlace de E-Mail en un dibujo de un buzón. Aunque sea para aprender,
oki?
Enlace de E-Mail en una imagen
Primero guárdate esta imagen en tu carpeta de "objetos" para poder seguir. Al
guardarla ponle de nombre buzon.gif

Ya tenemos tres archivos en la carpeta de "objetos":

 Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre,
puedes cerrar la ventana de Workspace de la derecha para tener más sitio y
maximizar la ventana del index. Mejor, verdad? je je.
Pon el cursor del ratón justo al final de la línea de código del último párrafo
(justo antes de </body>), pulsa con el ratón una sola vez para colocar el cursor
allí y pulsa luego el Intro para crear una nueva línea. Como te dije
anteriormente, conviene poner las cosas dentro de un párrafo, de modo que
creamos ese párrafo aún vacio escribiendo sus etiquetas <p> </p>.
Ahora situa el cursor dentro de ese párrafo (colocándolo entre <p> y </p>) y
en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen (te
dejo una foto para que recuerdes cómo era):
 (Fijate como en la línea número 15 del código html en la imagen de arriba, he
escrito ya <p></p> y he colocado el cursor entre esas dos etiquetas)
Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que
aparece:
 Fíjate como tras seleccionar el archivo buzón en la ventana derecha de arriba,
podemos escribir el "alt" del que hablamos páginas atras, y como por fín he
descubierto como poner las unidades en el ancho y alto de la imagen.... era
obvio verdad? je je je. Pues si, escribe "px" detrás de cada cifra de auchura y
altura después de poner al "alt" y luego pulsa el Ok.
Automáticamente aparece esa nueva línea de código Html en la ventana de
nuestro index
<img alt="Pulsa para escribirme un E-Mail!" src="objetos/buzon.gif"
height="32px" width="32px" />
y si le das a "preview" podrás ver el buzón en cuestión. Vamos ahora a colocarle
el enlace a nuestro E-Mail.

Enlace de E-Mail con Html-Kit:

Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar
todo el código html de la imagen primero. Si te cuesta trabajo seleccionarlo,
prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la
tecla "Shift" (es la flecha que apunta para arriba, esa que se pulsa para escribir
mayúsculas, justo encima del "Control") de tu teclado teniendo el cursor al final
del código que quieres seleccionar. Lo que tienes que seleccionar es el que he
puesto arriba, desde <img alt="...... hasta 23px" />. No selecciones la parte de
<p> ni la de </p>, oki?
Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre
Etiquetas > Crear Link...:
 Se abre la ventana de los links y vemos como en la ventana de la parte inferior
derecha aparece la imagen seleccionada (aunque puede que no se vea). Ahora en
la lista de opciones de la izquierda de esa ventana, en la línea que pone "href"
escoge "mailto:", así:
 y a continuación de mailto: escribe tu dirección de correo.

Después pulsa Ok y listo!

Los estilos CSS para las imágenes con enlaces

Como verás si pulsas en "Overview" o vista previa, la imagen del buzón de
correo aparece recuadrada en azul. Esto es porque por defecto, los enlaces
aparecen siempre subrayados con una lína azul, para indicar que son enlaces.
Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada
aparece recuadrada en azul.
Esto no queda demasiado bien, de modo que vamos a corregirlo.Verás qué
rápido y fácil se hace esto con la hoja de estilo y sin tocar para nada el index.
Cierra el index.html de tu Html-Kit y abre la hoja de estilos llamada
"estilos.css". Verás como solo tenemos aquella línea que habiamos definido para
el body. Vamos a incluir otra línea más con este contenido:
img {border-style: none}
Esto indica que, todos los elementos de imagen (img) han de cumplir lo que
hemos puesto entre corchetes, es decir, que no tengan ningúna tipo de borde.
 Si guardamos la hoja de estilo y abrimos el index.html veremos como en el
"Overview" o vista previa ya no aparece ese recuadro. Tampoco saldrá ya en
ninguna de las imágenes de ninguna de nuestras páginas. Buen invento esta hoja
de estilos, verdad? Pues aún tiene cosas mejores, ya lo verás más adelante.

Cómo centrar un párrafo de la página web

Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que
nos espera, pero por lo pronto hemos aprendido ya algunas cosas interesantes. El
aspecto de la web conseguida hasta ahora no está mal del todo, pero se le echa
en falta por lo menos el conseguir centrar algunos párrafos.
Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como
siempre a nuestra grandiosa Hoja de Estilos.

Crear un estilo centrado

La propiedad en CSS que define la alineación de un elemento es text-align y
se le pueden dar los valores left (pegado a la izquierda), right (pegado a la
derecha), center (centrado), y justify (justificado).
Si quisieramos que todos los párrafos aparecieran centrados, bastaría con
poner en la Hoja de Estilo esta línea:
p {text-align:center}
El problema de esto es que nos centra TODOS los párrafos y seguramente no
queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos
definir un estilo pero no queremos que se aplique a todos los elementos, es
necesario definir lo que se llaman Clases de Estilo.
 Por ejemplo, podríamos crear un nuevo tipo o clase de estilo que podemos
llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo
las propiedades que queremos que tenga y luego en el Html de la página le
indicamos a un párrafo concreto que ha de tomar ese estilo. Vamos a verlo por
partes.

Crear una clase de estilo

Abrimos la Hoja de Estilo y escribimos esta línea:
.centrado {text-align:center}
Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana
y a continuación entre los corchetes hemos dado la propiedad de centrado.
Es importante que sepas que al ponerle nombre a estos estilos creados por
nosotros hemos de seguir ciertas normas para evitar problemas:
- Siempre en minúsculas.
- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y
números.
- Nunca empezar el nombre con un número.
- Si necesitas separar el nombre en dos o más palabras usa guiones medios
"nombre-nombre", nunca bajos "nombre_nombre".
Bien, una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de
Estilos y abrimos el index.html para centrar algunos párrafos.
Centrar párrafos en el Html
Como recordarás, todos los párrafos empiezan con la etiqueta <p>. Pues es
dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos así)
la clase de estilo que queremos que tome.
Vamos por ejemplo a centrar el párrafo donde ponemos "Bienvenidos...". Para
ello vamos a la vista del código html del index y modificamos esa etiqueta <p>
dejándola así:
<p class="centrado"> Bienvenidos a mi página web. Muy pronto estará
lista!</p>
Si ahora haces vista previa o "Overview" desde el Html-Kit, verás como este
párrafo aparece ahora centrado. Fácil, verdad?
A partir de ahora, cada vez que quieras centrar un elemento solo tienes que
ponerle class="centrado" dentro de la etiqueta de inicio en su código Html.
Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, más el
nombre, y se indica en el html con class="nombre" (aquí sin el punto). Estas
cosas no las sabe cualquiera, no te creas... estás empezando a ser un Webmaster
de verdad!

Cómo va nuestra página web por el momento?

Por si te has perdido o por si has estado experimentando por tu cuenta y te
has cargao el código Html de la web de ejemplo, te dejo aquí lo conseguido
hasta el momento. Recuerda que puedes hacer experimentos creando otro sitio
local, creando otra carpeta dentro de la carpeta "mis-paginas-web" que hemos
creado en tu escritorio y repitiendo los primeros pasos de estas lecciones. Pero la
web del ejemplo es mejor que no la toques mucho pues te podrías perder cuando
la usamos en las lecciones siguientes, oki?
La maravillosa Hoja de Estilo queda así:
body { background-color: #E6E6FA ;
background-image: url(objetos/fondo.png) ;
background-repeat: no-repeat ;
background-position: center center }

img { border-style: none }

.centrado { text-align:center }

Y el código Html del index.html de ejemplo así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<p class="centrado">Bienvenidos a mi página w eb. Muy pronto estará lista!</p>
<p><img alt="Bienvenido al ejemplo de CCTW" src="objetos/sonrisa.gif"
height="60" w idth="60" /></p>
<p>Página creada gracias a <a href="http://w w w .comocreartuw eb.com"
target="_blank">CCTW</a></p>
<p><a href="mailto:nombre@w anadoo.es"><img alt="Pulsa para escribirme un E-
Mail!" src="objetos/buzon.gif" height="32px" w idth="32px" /></a></p>
</body>
</html>

Y con esta página terminamos con la primera lección. Pulsando arriba, en la

barra de navegación naranja sobre "Lección Segunda" o pulsando en la flecha
derecha de aquí abajo continuamos con la segunda, donde empezaremos a meter
mano a la plantilla.
Espero que me des tu opinión de estas lecciones en el Foro CCTW, eh? Solo
con tu punto de vista y tu opinión puedo mejorar todo esto, acuérdate de mí! je
je je.

Comenzando a crear la plantilla de nuestra página Web

La página index.html que hemos visto hasta el momento no está terminada ni
mucho menos. Su aspecto final no tiene nada que ver con lo que tiene ahora,
pero trabajaremos sobre ella más adelante. Ahora lo que vamos a hacer es
comenzar creando la plantilla, que nos valdrá para generar a partir de ella el
resto de páginas de nuestra web.
 Crear el archivo plantilla.html
Recordando los pasos dados antes para crear el index.html vamos a crear
ahora el archivo de la plantilla. Te doy pistas por si no te acuerdas.

 Abrimos el Html-Kit.
 Hacemos visible la ventana Workspace.
 Ponemos el ratón sobre el sitio "web-ejemplo-cctw-local" y pulsamos
sobre él con el botón derecho del ratón.
 Escogemos New > Create File...

 Escogemos crear "Blank Html Page" desde la pestaña "General" y

pulsamos Ok.

 Le ponemos de nombre plantilla.html y pulsamos Ok de nuevo.

 Ahora la abrimos haciendo doble clic en su nombre, en la ventana Workspace
para empezar a trabajar sobre ella. Como siempre que se crea un archivo nuevo,
aparece casi vacio.

Creando la Hoja de Estilo para el resto de páginas de la web

Hacemos lo mismo para crear una Hoja de Estilo distinta a la anterior.
Mientras que la anterior (estilos.css) la vamos a usar solo para el index, esta
segunda Hoja de Estilo que llamaremos "estilo-general.css" se usará para todas
las demás páginas de la web. Créala tu mismo. Toma, por si no te acuerdas de
cómo crear una Hoja de Estilo Vacia, pero recuerda ponerle de nombre "estilo-
general.css".
Relacionando estilo-general.css con plantilla.html
Ahora te toca relacionar esta segunda Hoja de Estilos con la plantilla.html
recien creada. Te recuerdo que había que colocar una línea de código en el
Head. Te dejo esto por si no te acuerdas de cómo relacionar la hoja de estilo con
la web, pero recuerda poner en la ruta "estilo-general.css" en lugar de
"estilos.css", oki?
Como tanto plantilla.html como estilo-general.css están en la misma carpeta,
es suficiente con escribir esto:
<link rel="stylesheet" href="estilo-general.css"
type="text/css" media="all">

Una vez creados estos dos archivos y relacionados entre sí, pasamos a
meterles mano.

La estructuración con Capas o Divs?

 El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es
darle una estructura concreta para colocar luego el menú aquí, el contenido allá,
etc. Para estructurar una web podemos usar simples saltos de línea, o avanzar un
poco más y usar tablas, que dividen el espacio en celdas, celdas en las que
podemos colocar más comodamente los elementos que queramos. También se
puede estructurar una web partiéndola en frames o marcos.
Pero el método más profesional, límpio y cómodo es sin duda el uso de Capas
o Divs (es lo mismo decir capa que div).
Qué es una Capa o un DIV?
No es más que un elemento rectangular dentro del cual podemos incluir lo que
queramos, palabras, párrafos, enlaces, imágenes, varias de estas cosas a la vez o
incluso otras capas o también tablas. Es un simple hueco. Lo bueno que tiene es
que luego, desde la Hoja de Estilos, podemos darle a todo su contenido
propiedades como color de fondo, tamaño de letra, dimensiones de ese
recuadro, margenes, bordes, etc, etc.
Al principio quizás te de un poco de pánico todo esto, pero te prometo que no
es nada dificil, ya verás. Fíjate, esto de abajo es el código Html de un Div
sencillo.
<div>Bienvenidos a mi Web</div>
A que no te ha dolido? je je. Como puedes ver, igual que ocurría con los
elementos que vimos atrás, empieza con una etiqueta y termina con otra de
cierre, igual pero con la contrabarra delante. Entre ambas etiquetas se coloca su
contenido.
Escribe esa línea de código en el archivo plantilla.html, por supuesto, entre
<body> y </body> pues se trata de algo que debe "verse". Ahora haz vista previa
"Preview" y observa qué aparece. Nada asombroso, ya lo se.
Dando estilos a un Div
Ese Div no tiene ningún atractivo, claro. Para adornarlo lo que hacemos es
definir un tipo de estilo en la Hoja de Estilos y aplicarselo a ese DIV.
Para empezar a jugar, abre el archivo estilo-general.css que se abrirá vacio,
pon esto dentro y luego guárdalo:
#cabecera {background-color: pink }
Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que
guardarla para poder ver sus efectos en la vista previa de la página web.
Clases de Estilo y Estilos Únicos
Existen dos formas de definir estilos. Una es crear una clase de estilo, que es
un tipo de estilo que podemos asignar luego a uno o a varios elementos. Por otro
lado están los estilos únicos, que solo se deben aplicar a un elemento por página
web.
Las clases de estilo, que se pueden usar sobre varios elementos (varios
párrafos, varias celdas, enlaces, etc) se definen en la Hoja de Estilo como vimos
al crear la clase de estilo ".centrado", es decir, con un punto delante del nombre
y luego colocando las propiedades entre los corchetes. Luego, en el código Html
se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de
inicio esto, class="nombredelaclasedeestilo".
En cambio los estilos únicos se definen en la Hoja de Estilo con una
almohadilla como esta "#" (se escribe pulsando a la vez la tecla Alt Gr, que está a
la derecha del espacio y la tecla del número 3 de tu teclado) en lugar de con un
punto, y en el código Html se asigna este tipo de estilo único escribiendo dentro
de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con
el class, que es para clases (estilos que se pueden asignar a varios elementos).
Si te he echo la picha un lio, leelo despacito. Es importante entenderlo.
Como puedes ver, el estilo de antes #cabecera {background-color: pink } es
un Estilo Único y por lo tanto se asigna este tipo a un solo elemento, y se hace en
el Html así:
<div id="cabecera">Bienvenidos a mi Web</div>
Abre ahora el archivo plantilla.html y pon esa línea de código. Ha de quedar
así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
</body>
</html>

Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla,

verás como ahora la frase "Bienvenido a mi Web" aparece diferente. Con un
fondo rosa (pink). Es la magia del CSS aplicado a los Divs, pero no te creas que
esto queda así, verás lo asombroso que es todo esto más adelante
. Más capas, más capas
Ya tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones
esta capa contendrá la cabecera, que segurametne conste del logotipo de la web
y de un hueco para, por ejemplo, algo de publicidad para sufragar los gastos de
un posible dominio propio y quién sabe, de un hosting de pago... no es algo
descabellado, no te creas.
Pero con esa capa sola no tenemos ni para empezar, je je. Vamos a crear una
segunda capa que contendrá una barra de navegación. La llamaremos,
navegacion (sin acentos, y todo en minúsculas, claro).
 Qué es una barra de navegación?
Una de las cosas más importantes en una página web es el dar facilidades al
visitante para que pueda navegar por nuestras páginas sin perderse y que lo
tenga todo siempre a mano. No es bueno tener páginas escondidas, es decir,
páginas a las que para acceder haya que ir primero a la sección tal, luego a la
subsección cual, luego entrar en otro lado y finalmente conseguir acceder a una
página en concreto. Todas las páginas deberían ser accesibles sin más que pulsar
un par de enlaces desde el index o página principal.
La barra de navegación nos ayuda a esto. En esta barra que aparecerá en todas
las páginas de la web pondremos enlaces a las secciones que tratemos. Así, en
cualquier momento el visitante puede ir de un lado a otro sin perderse.
Esto es son varios ejemplos de barras de navegación:

Como ves, dan acceso a varias secciones y pueden ser muy sencillas o más
complicadas o llamativas con lengüetas y todo eso. Pues ahora que sabes lo que
son, vamos a crear la capa de nuestra barra de navegación.
Creando la capa navegacion
La llamaremos "navegacion" y solo va a existir una por página, luego se trata
de un estilo único y se define por tanto así en la Hoja de estilo:
#navegacion {background-color: gray }
Escribimos eso en la Hoja de Estilo. Después abrimos la plantilla.html y
escribimos, a continuación del div cabecera, esta otra línea:
<div id="navegacion">Barra de Navegación</div>
Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la
propiedad de color de fondo gris (gray). Más adelante le pondremos más cosas,
pero ahora seguimos creando el resto de capas.
Creando las capas contenido y pie
Ya que estamos, vamos a crear dos capas más. La primera se llamará contenido
y en ella pondremos luego un menú lateral y los textos de nuestra web, la parte
principal. También vamos a crear otra capa para la parte más baja de la web que
llamaremos pie en la que más tarde tendremos algunos enlaces, un mensaje de
copyright y puede que otro espacio para publicidad, ya veremos.
Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas
en la Hoja de Estilo:
 #contenido {background-color: orange}
#pie {background-color: brown}
Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas
otras dos líneas después de la de la capa navegacion:
<div id="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
Y el resultado es...
Tras guardar todo, en la Hoja de Estilo tendrás esto:
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange }
#pie {background-color: brow n }

En la plantilla.html esto otro:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">Esta será la zona principal de la w eb</div>
<div id="pie">Este es el pié de página</div>
</body>
</html>

Y aquí tienes el resultado del ejemplo. Se que no parece una página web, pero
no me dirás que no está tomando forma, no? Verás como esto empieza a cambiar
en breve..

Resoluciones de pantalla y páginas web

Existen varias formas de darle un tamaño a una página web. Por ejemplo,
podemos hacer que ocupe toda la pantalla del navegador del usuario, sea como
sea esta de grande, la tenga o no maximizada (la ventana...), o también
podemos darle un ancho concreto, de modo que los que tengan un monitor
pequeño la verán muy grande y los que la tengan más grande (la pantalla...) la
verán más chica...
Ambos casos tienen su parte buena y su parte mala. En el primer caso, si le
decimos que ocupe toda la pantalla del navegador es muy posible que la web se
desmorone cuando el usuario cambie el tamaño de esa ventana. Los elementos
grandes no caben y desplazan el contenido siguiente hacia abajo, produciendo un
caos en la web. Lo bueno es que se aprovecharia todo el espacio, cuando lo hay,
claro.
El otro caso es darle un ancho fijo a la página web (por ejemplo 20 cm, o 800
pixeles). Así el usuario podrá hacer lo que quiera con la ventana de su navegador
que la web seguirá manteniendo su forma y no se deformará en absoluto. Eso es
lo bueno, lo malo es que si no acertamos en qué anchura darle, pasará que unos
la verán muy grande y la verán tan pequeña que tendrás más margenes a los
lados que espacio para la web....

Qué opción tomamos entonces?

Lo mejor es tomar la segunda opción, dar un ancho fijo a la web, pero
estudiando muy bien cuál será esa anchura. Lo mejor es darle un ancho que sea
cómodo para la resolución más usada por todo nuestro público. Así, si unos pocos
usan una resolución de pantalla un poco mayor no verán unos márgenes
exagerados y los que usen resoluciones un poco menores al ancho que le demos,
no tendrán que usar demasiado la barra de desplazamiento y además, serán la
minoría.
Parece ser que hoy por hoy la anchura óptima para una página web es de 800
pixeles. De hecho, si miras las webs que sueles visitar verás que es así y que
quedan muy bien con cualquier resolución. Así que... vamos a darle a la web del
ejemplo esa anchura y además vamos a hacer que aparezca centrada en la
ventana del navegador, las dos cosas a la vez, oki? Serás capaz? je je, fijo que sí.
Un Div para dominarlos a todosss
Exácto. Como queremos centrarlo todo, lo que haremos será encerrar toda la
parte visible de la web en un div al que le definiremos en la Hoja de Estilo la
propiedad de centrado, pero de un modo algo especial para que funcione en
todos los navegadores. Llamaremos a esa capa.... "global". Como va a ser única,
es decir, solo va a haber un elemento "global" por página, en lugar de definirlo
con un punto delante y el class="global" en el Html, lo haremos con la
almohadilla y con id="global".
Para encerrar todo lo visible, ponemos la etiqueta de inicio justo después de
<body> y la de cierre justo antes de </body>. El código Html queda así:

Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos
#global con las siguientes propiedades:
#global {width:800px ; margin: 4px auto }
Esto significa que la capa global tendrá un ancho de 800 pixeles y aparece una
propiedad que no hemos visto antes, (margin: 4px auto) que define el margen a
dejar entre el elemento (en este caso el div global) y el resto de cosas a su
alrededor. El 4px es la cantidad de margen que vamos a dejar por encima y por
debajo de la web, mientras que auto es la cantidad de margen que dejaremos
por cada lado. Auto significa automático, por lo que se dejará todo lo que exceda
de 800px y automáticamente, es decir, la mitad a la derecha y la otra mitad a la
izquierda y por tanto, centrado. Lo veremos mejor más adelante, no te
preocupes si no lo entiendes demasiado bien, vale?
Esto no funciona en todos los navegadores a menos que definamos una
caracteristica a Body en la Hoja de Estilo estilo-general.css. Abrela si la cerraste
y escribe al principio del todo esta nueva línea de css:
body {text-align: center}
Body no es un nombre de un estilo inventado por nosotros, como cabecera,
pie, tal y cual, sino que es una etiqueta de Html, y a las etiquetas de Html (como
body, p, a, table, div, etc..) no se les pone ni el punto delante ni la almohadilla
(#). Lo que estamos haciendo al ponerle propiedades a una etiqueta es cambiar
las propiedades que tiene por defecto. Con esto ya queda toda la web centrada
en toooodos los navegadores. Si guardas ahora la Hoja de Estilo y haces vista
previa de la plantilla.html verás como todo aparece centrado y con un ancho fijo
de 800px. Ahora no será fácil descuadrar tu web.
Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va
mejorando poco a poco....
El menú de nuestra página web
Presta mucha atención en esta lección, que igual es un poco espesa, pero
merece la pena para crear el menú lateral y empezar a entender como se usan
estas capas o divs.
Ahora queremos crear un menú lateral parecido al de esta misma web, el de
la izquierda de estas líneas. Te gusta? Pues a ti te puede quedar mucho mejor si
tienes un poco de gusto y ganas de experimentar. Como un menú es más o menos
una zona rectangular, vamos a crear una capa para meter en ella este menú.
Como queremos que salga dentro de la parte central de la página, dentro de la
zona de los textos, meteremos o crearemos este div que vamos a llamar menu
dentro del div contenido. Parece lógico, no? Esto es lo que se llama anidar
capas.
Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la
siguiente línea justo después de la etiqueta de inicio de la capa contenidos y
antes del texto de dentro suya (Esta será la.....bla bla blal...), de forma que
quede el código Html así:

Como verás, después del código Html de la capa menu, van los textos de la
capa contenido (Esta será la ....) y después, en la siguiente línea vemos la
etiqueta de cierre del div contenidos.
Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. Abre
estilo-general.css y escribe esta línea para el div menu:
 #menu {background-color: yellow; width: 150px ; float:left }
Como solo hay un menú por página, lo definimos como estilo único, con la
almohadilla (#). Le ponemos un color diferente al resto para distinguir donde
empieza y donde termina la capa menu y colocamos dos propiedades más.
La primera es width:150px con la que le damos una anchura fija de 150
pixeles. Quizás sea poco, pero por ahora lo dejamos así hasta que veamos si nos
va a faltar anchura en esa capa. La segunda nueva caraterística que vemos es
nueva, la propiedad Float.
Para que sirve la propiedad Float?
La propiedad Float hace que el elemento flote sobre el resto de la web. Esto
vale para cambiarlo de posición más fácilmente. A la propiedad float se le suele
poner uno de estos dos valores: left (que flote a la izquierda) o right (lo manda a
la derecha). Como nosotros queremos tenerlo a la izquierda, le pondremos la
propiedad float:left y esto lo manda pegarse al borde izquierdo de la capa en la
que está, es decir, a la izquierda de la capa contenido.

Y el resultado final.... por ahora...

La Hoja de Estilos queda por tanto así (puedes ver como voy ordenando los
estilos definidos por orden de aparición en la página, de arriba a abajo):

Ale, lo de siempre.. guarda la Hoja de Estilos y mira como está quedando la

plantilla haciendo vista previa, o si el cansancio puede contigo, miralo aquí
mismo, je je je. Bueno, ya están todas las capas creadas (mucho más adelante
quizás metamos alguna más...) así que ahora vamos a rellenarlas y a darles una
mejor presencia, oki?

Rellenando el menú de nuestra página web

El menú así como lo hemos dejado ni parece menú ni parece ná de ná. Vamos
a insertarle algunos enlaces (ficticios, pues aún no tenemos páginas que enlazar)
y así de paso vemos como se estructura correctamente.

Si es un listado, usa listas

Puedes imaginar el menú como una serie de enlaces uno debajo de otro. Se
podría pensar en colocar un div para cada uno de ellos, es decir, incluir tantos
divs pequeños dentro de la capa menu como enlaces vayamos a poner, pero
parece demasiada capa, no? En realidad un menú no es más que una lista y, lo
mejor para poner una lista es usar el elemento... lista? Exácto.
 Como se hace una lista
Las listas se definen en Html con dos etiquetas, la primera indica el principio
de la lista y es <ul> mientras que la otra define el inicio de un elemento de la
lista, que es <li>. Te lo puedes apuntar, yo siempre me liaba y terminaba
poniendo lu y il, je je je.
Por supuesto, cuando termina la lista se coloca su etiqueta de cierre que será
</ul> y cuando termina un elemento de la lista (un enlace en este caso) se
coloca </li>, de forma que el código Html de una lista completa sería este
mismo:

y se vería haciendo vista previa de este modo:

Para nuestro ejemplo, seguramente nos moleste el dichoso puntito negro a la

izquierda de cada elemento de lista, pero eso lo podemos arreglar. Cómo? Pues
como siempre, con solo poner una cosilla en la Hoja de Estilos. Pero antes vamos
a ver qué cuál es el código que tendríamos que colocar dentro del div del menú.
Para empezar, abre tu Html-Kit y escribe el código de arriba dentro del div
menu, eliminando claro la palabra "menú" que habia ya colocada.
Ha de quedar de este modo:

Si haces vista previa verás cosas un poco raras, como que el menú se
descuelga un poco por debajo de la web, pero eso lo arreglamos en las siguientes
páginas.

Enlaces para el menú de nuestra página web

Como recordarás (eso espero...) los enlaces tenian esta forma:
<a href="ruta/archivo.html">Texto del Enlace</a>
así que vamos a poner ese código dentro de cada elemento li de la lista del
menú. Si ponemos una ruta falsa nos dará algún problema, asi que en lugar de
poner nada en la ruta le vamos a colocar una almohadilla (#) que sirve para que
haga el efecto de enlace pero sin enviarnos a ningún lado por ahora. Cuando
tengamos más páginas en la web pondremos las rutas de aquellas páginas que
queremos enlazar desde el menú, vale?
<a href="#">Enlace 1</a>
Como no vamos a querer que se abran esos enlaces en páginas distintas sino
en la misma, no es necesario ponerle el target al código del enlace (el
target="_blank" se pone para que el enlace se abra en una página distinta, lo
recuerdas?).
Pues adelante, abre tu Html-Kit, abre la plantilla.html y coloca un enlace en
cada uno de los tres elementos de lista que tenemos. Para diferenciarlos, puedes
escribir Enlace 1, Enlace 2 y Enlace 3.
Así que el código del menú completo se tiene que quedar así:

Eso es todo lo que tenemos que hacer en la plantilla.html porque lo demás, el

"aspecto" como siempre, se lo daremos con la Hoja de Estilo ahora mimo.

Dar estilos Css a la lista del menú

Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto
a este menú. Recuerda que la estrategia perfecta para no tener problemas con
algunos navegadores y para tener un código Html sencillo para revisarlo nosotros,
y sencillo para que los buscadores lo lean bien e indexen nuestras páginas
correctamente, es poner en el Html lo justito, y dejar los detalles de cómo
queremos adornar cada cosa para la Hoja de Estilo. Además esto nos permitirá
hacer cualquier cambio en todas las páginas de nuestra web con solo cambiar una
palabra en la Hoja de Estilos. Es genial.
Reparando el fallo del menú.
Si ya hiciste vista previa de la plantilla, habrás visto que al poner varios
enlaces dentro ha crecido y se sale por debajo de la página web. Vamos a reparar
esto desde la Hoja de Estilo. Abre tu Html-Kit y abre estilo-general.css
Esto, después de muuuchas pruebas lo he conseguido arreglar de este modo,
colocando un width: 800px y un float:left a la capa contenido. No me preguntes
mucho porqué, pero es la única combinación que logra que en todos los
navegadores se corrija ese fallo. Realmente le estamos indicando a la capa
 contenido que ha de tener un ancho de 800 pixeles, igual que el ancho de la
página. En realidad parece que ocupara menos, pero ten en cuenta que el menú
está dentro de él, luego lo amarillo del menú es parte de la capa contenido. Ves
ahora como sí ha de tener 800px de ancho? El colocarle el float:left evita que en
algún navegador se descuadre todo. No se explicarte porqué ahora mismo, y
verás como a veces, a pesar de que cumplas todas las buenas prácticas que se
pueden leer por la red, hay que hacer alguna "pirula" para que se vea
correctamente la página web con cualquier navegador. Es todo un reto, pero por
ahora lo estamos consiguiendo.
Sin más rollo, abres la Hoja de Estilo, dejas la línea del estilo contenido de
este modo:
#contenido {background-color: orange ; width: 800px ; float:left}
y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para
que veas como ahora todo se ha solucionado... o no? Si ves algún fallo no dudes
en decirmelo en el Foro CCTW, plis!

Eliminando los puntos de la lista

Esta es fácil y comprensible. Podemos modificar las propiedades del elemento
li en la Hoja de Estilos, pero el problema que podemos tener es que si lo
hacemos así, todas las listas que tengamos en la web dejarán de tener ese punto,
y es más, tomarán todas las propiedades que le digamos ahora. Por eso, mejor
que modificar las propiedades del elemento li, lo que haremos será crear un
estilo nuevo de li, que usaremos solo en el menú. De este modo todas las listas
que pudieramos poner en las otras partes de la web serían normales.
Así que, definiremos en la Hoja de Estilo propiedades para todos los li que
cumplan la condición de estar dentro de la capa menu. Toma ya. Cómo te has
quedao? je je je. Esto se hace así:
#menu li { ...propiedades..... }
Cuando se pone la capa antes de un tipo de estilo, se está indicando que esas
propiedades solo han de respetarse cuando el elemento (en este caso el li) esté
dentro de la capa escrita antes (en este caso menu). Que bien, no?
Las propiedades que le vamos a dar son las siguientes:
#menu li { list-style:none }
Esto hace que no tenga ningún (none) tipo de estilo, como por ejemplo el
puntito aquel. Si guardas la Hoja de Estilo (estilo-general.css) y haces vista
previa de la plantilla verás que ya no aparece. En la página siguiente seguimos
arreglando el menú.
Segunda Lección

 Creando la plantilla
 Las Capas o Divs
 Creando más capas
 Una anchura fija
 El Menú de la Web
 Enlaces del menú
 Estilos para enlaces
 Estilos para Listas
 Dar Formato a Cero
 Márgenes del Menú
 Enlaces Cambiantes
 Enlaces con Fondo
 Margen en Párrafos
 Indentar Párrafos
 Margin y Padding
 Separar el Menú
 Los títulos
 Posicionamiento

 Formatear los estilos a cero

 Si tuvieras varios navegadores diferentes, como el Internet Exporer, el
Opera, el Firefox, etc, etc, te darias cuenta que en cada uno de ellos el
menú (y algunas otras cosas) se ve ligeramente distinto. En unos los
enlaces aparecen en el centro, en otros un poco a la derecha, o un poco
más a la izquierda en otros.. Esto es porque mientras no se indique lo
contrario, unos navegadores deciden dejar un margen de unos pocos
pixeles para cada elemento, mientras otros navegadores deciden que no,
que hay que dejar un poco más o un poco menos... Al final lo que ocurre
es que parece imposible ver una página web exáctamente igual con todos
los navegadores.
 Todos los problemas de este tipo no los vamos a poder arreglar de golpe,
pero uno bien importante sí. Como cada uno toma por defecto un valor
inicial para los margenes y bordes, lo que haremos será indicar nosotros en
la Hoja de Estilos que TODOS los elementos van a tener un valor cero para
los bordes y margenes. Luego, si deseamos cambiar alguno, lo definiremos
en la Hoja de Estilos, pero por el momento lo ponemos todo a cero, o lo
que es igual, vamos a formatear los estilos!
 Para indicar que ha de aplicarse a todos, ponemos un asterisco. Para
indicar que tengan margen, padding (padding es otro tipo de margen que
ya explicaré) y borde cero basta con colocar en la primera línea de todas,
esta:
 * {margin:0px ; padding:0px ; border: 0px}
 Si escribes esta línea en estilo-general.css, la guardas y haces vista previa
de la plantilla verás como ahora el menú aparece centrado, justamente
centrado, sin margenes. También han desaparecido otros margenes que
rodeaban la capa global, etc. Tenemos el poder! je je je.. Eso si, no
olvides colocar esa línea la primera de todas, no se te ocurra ponerla la
cuarta, la quinta, etc, debe ser la primera de todas, arriba del todo en
estilo-general.css. De lo contrario, como el navegador va leyendo los
estilos de arriba a abajo, si la lee de las últimas anularás los margenes y
bordes de las capas definidas antes de esa línea. Acuérdate!
  Enlaces del menú hacia la izquierda
 Has visto que todos los elementos de la web de ejemplo salen centrados?
Sabes porqué? Pues porque pusimos text-align:center en la etiqueta body,
y como el body contiene toda la web, entonces todos los elementos de la
web estarán centrados, a no ser que..... a no ser que le indiquemos otra
cosa a cada estilo concreto, claro.
 Por ejemplo, los enlaces del menú quedan mucho mejor si aparecen
alineados a la izquierda, verdad? Pues vamos a arreglar eso ahora mismito!
Abre tu Html-Kit, la Hoja de Estilo y, escribe text-align:left dentro de las
propiedades de la capa menu, tal que quede así:
 #menu {background-color: yellow ; width: 150px ; float:left ; text-
align:left }
 La verdad, también se hubiera podido poner el text-align:center en el
estilo #menu li, no? De la forma anterior se aplica a todos los elementos
de la lista, mientras que definiendolo en #menu li solo se aplicaría a los
elementos encerrados entre <li> y </li>. Tiene sentido, verdad? Lo
dejamos definido en el #menu por ahora.
 Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado
pegados a la izquierda, verdad? Seguimos mejorando el aspecto en la
página siguiente.
 Qué tal lo llevas? Levántate un poco y estira las piernas, que te va a dar
algo malo! je je je je. Si no entiendes algo o quieres que te explique
mejor alguna parte dímelo en el Foro CCTW, sin problemas, o escribe allí
tus dudas o sugerencias, que para eso estamos colega!

Formatear los estilos a cero

Si tuvieras varios navegadores diferentes, como el Internet Exporer, el Opera,
el Firefox, etc, etc, te darias cuenta que en cada uno de ellos el menú (y algunas
otras cosas) se ve ligeramente distinto. En unos los enlaces aparecen en el
centro, en otros un poco a la derecha, o un poco más a la izquierda en otros..
Esto es porque mientras no se indique lo contrario, unos navegadores deciden
dejar un margen de unos pocos pixeles para cada elemento, mientras otros
navegadores deciden que no, que hay que dejar un poco más o un poco menos...
Al final lo que ocurre es que parece imposible ver una página web exáctamente
igual con todos los navegadores.
Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero
uno bien importante sí. Como cada uno toma por defecto un valor inicial para los
margenes y bordes, lo que haremos será indicar nosotros en la Hoja de Estilos
que TODOS los elementos van a tener un valor cero para los bordes y margenes.
Luego, si deseamos cambiar alguno, lo definiremos en la Hoja de Estilos, pero
por el momento lo ponemos todo a cero, o lo que es igual, vamos a formatear los
estilos!
Para indicar que ha de aplicarse a todos, ponemos un asterisco. Para indicar
que tengan margen, padding (padding es otro tipo de margen que ya explicaré) y
borde cero basta con colocar en la primera línea de todas, esta:
 * {margin:0px ; padding:0px ; border: 0px}
Si escribes esta línea en estilo-general.css, la guardas y haces vista previa de
la plantilla verás como ahora el menú aparece centrado, justamente centrado,
sin margenes. También han desaparecido otros margenes que rodeaban la capa
global, etc. Tenemos el poder! je je je.. Eso si, no olvides colocar esa línea la
primera de todas, no se te ocurra ponerla la cuarta, la quinta, etc, debe ser la
primera de todas, arriba del todo en estilo-general.css. De lo contrario, como el
navegador va leyendo los estilos de arriba a abajo, si la lee de las últimas
anularás los margenes y bordes de las capas definidas antes de esa línea.
Acuérdate!
Enlaces del menú hacia la izquierda
Has visto que todos los elementos de la web de ejemplo salen centrados?
Sabes porqué? Pues porque pusimos text-align:center en la etiqueta body, y
como el body contiene toda la web, entonces todos los elementos de la web
estarán centrados, a no ser que..... a no ser que le indiquemos otra cosa a cada
estilo concreto, claro.
Por ejemplo, los enlaces del menú quedan mucho mejor si aparecen alineados
a la izquierda, verdad? Pues vamos a arreglar eso ahora mismito! Abre tu Html-
Kit, la Hoja de Estilo y, escribe text-align:left dentro de las propiedades de la
capa menu, tal que quede así:
#menu {background-color: yellow ; width: 150px ; float:left ; text-
align:left }
La verdad, también se hubiera podido poner el text-align:center en el estilo
#menu li, no? De la forma anterior se aplica a todos los elementos de la lista,
mientras que definiendolo en #menu li solo se aplicaría a los elementos
encerrados entre <li> y </li>. Tiene sentido, verdad? Lo dejamos definido en el
#menu por ahora.
Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado
pegados a la izquierda, verdad? Seguimos mejorando el aspecto en la página
siguiente.
Qué tal lo llevas? Levántate un poco y estira las piernas, que te va a dar algo
malo! je je je je. Si no entiendes algo o quieres que te explique mejor alguna
parte dímelo en el Foro CCTW, sin problemas, o escribe allí tus dudas o
sugerencias, que para eso estamos colega!

Arreglando los márgenes del menú

Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los margenes
cuando tengamos los enlaces definitivos, pues según lo largo que sea el texto de
cada enlace podemos ajustarlo más o menos, al igual que la anchura del menú.
Pero como ya estamos liados con esto, vamos pa´lante y lo terminamos, te
parece? Va a ser muy facilito.
 Aún no te lo he dicho, pero quizás hayas visto ya por algún lado varias formas
de especificar los margenes. Se pueden definir de estas formas:
margin: 10px
Esto indica que se ha de dejar 10 pixeles tanto por arriba como por abajo y
por ambos lados.
margin: 10px 20px
Este otro modo, con dos cantidades, indica que se ha de dejar 10 pixeles por
arriba y abajo y 20 pixeles por la derecha e izquierda. Es decir, la primera cifra
indica el margen de arriba y abajo y la otra la de los lados.
margin: 10px 20px 5px 15px
Y este otro modo (puedes escoger el que te venga mejor según si los margenes
son iguales para todos los lados o diferentes) define por orden los margenes a
dejar por arriba, por la derecha, por abajo y por la izquierda respectivamente. O
para acordarnos, la primera cifra es la de arriba y las demás van en sentido de
las agujas del reloj (arriba, derecha , abajo e izquierda).
Nosotros, para el caso de los margenes del menú vamos a escoger la última
forma, con las cuatro cifras, pues así podemos retocar muy facilmente y ver
como va quedando. Empezamos como siempre, abrir tu Html-Kit, abrir la Hoja de
Estilos y escribir dentro de los corchetes de la capa #menu li lo siguiente:
#menu li {list-style:none ; margin: 0px 0px 0px 0px}
Lo he puesto todos a cero (en realidad ya estaban todos a cero pues hicimos el
formateo con el asterisco hace muy poco) y vamos probando con distintos valores
para ver como va quedando.
Lo que más me interesa es dejar un poquito de margen hacia la izquierda para
separar los enlaces del borde, y también un poco de margen por encima y por
debajo para que no se vean muy apiñados. En cambio el margen derecho me
interesa más que siga a cero, pues así tengo más hueco para colocar el texto de
cada enlace, lo pillas?
Así que, tras varias pruebas (te invito a que hagas tus experimentos poniendo
valores un poco exagerados para ver mejor los efectos) lo vamos a dejar así:
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
Te recomiendo que en estos ejemplos que vamos haciendo pongas
exactamente lo mimo que yo. Así no te liarás más adelante cuando hagamos
cambios. Confía en mí un poco, no? Tu puedes ir a tu bola si quieres, pero en el
otro sitio que hemos creado al principio, al que llamamos mis-experimientos, oki?
Sigo echando de menos algo... Ah! claro, lo de eliminar el subrayado y hacer
que cambien de color los enlaces cuando pasas el ratón por encima! Eso mola,
vamos a verlo en la página siguiente, es muy sencillo también, y es gratis! je je
je.
 Buscando alojamiento para la página web
Ya va siendo hora de ir subiendo nuestro trabajo a la red, verdad? Aunque aún
no esté terminada la página web, es bueno tener ya un sitio para alojarla (a ese
sitio se le llama Hosting) para ir viendo cómo se comporta la web en realidad.
Para no repetir aquí cosas que ya tenemos explicadas en CCTW, os invito a
visitar la sección Hosting y Dominios. Una vez que entres allí aprenderas todos los
conceptos relacionados, con los que podrás escoger con más idea el hosting que
más se amolde a tus necesidades.
Si tienes mucha prisa y quieres ir al grano, ve directamente a la página donde
explico cómo registrarte en un servidor gratuito sin publicidad, pero no olvides
volver a esa sección y leer el resto de información cuando puedas, te será útil en
el futuro.
Cuando termines de leer esa sección, te darás de alta en el Hosting que
quieras y podrás seguir con las lecciones siguientes, pero recuerda apuntarte en
un papelito (vale también una Hoja de Excel o del Notepad) los siguientes datos:

 Nombre de usuario para el Hosting.

 Contraseña de tu cuenta de Hosting.
 Dirección FTP con la que subir tus datos a la red.
 Dirección de tu página web.

Ahora seguramente te suene a chino todo eso, pero tras leer esa sección
sabrás lo que significa cada cosa. Aprenderás allí a escoger un hosting tanto de
pago como gratuito, ambos sirven perfectamente para aprender, de modo que no
tienes escusa. Si no lo haces no podrás aprovechar las lecciones al 100%, aunque
también aprenderias cosas, claro. Sería como aprender a conducir sin tocar
nunca un coche.... osea, ná de ná.
No lo olvides, para cuando regreses aquí para seguir las lecciones, has de
tener ya los datos anteriores, vale? Pues ya sabes. Y ante cualquier duda
recuerda que en el Foro CCTW tienes una sección para cada consulta, úsalo sin
que te de vergüenza preguntar tonterias y no te arrepentirás.
ComoCrearTuWe

Configurar Html-Kit para el nuevo alojamiento

Ahora se supone que ya tienes los datos de los que te hablé en la página
anterior, nombre de usuario, contraseña, dirección del FTP y además conoces la
dirección de tu nueva web. Recuerda que puedes registrarte varias veces, con
nombres distintos para crear más de una cuenta y por tanto tener más de una
página web, por tanto, olvida usar estas lecciones para crear la página que tienes
en la cabeza. Mejor sigue las instrucciones al pie de la letra hasta el final y una
vez que aprendas podrás hacer lo que te de la gana en otra cuenta, con tu página
web definitiva, oki? Es para que no te lies durante estas lecciones.
Terminado el sermón, je je je, pasamos a configurar el Html-Kit para poder
subir la página de la lección al nuevo servidor, oki?

Configuración del nuevo Servidor en el Html-Kit

Recuerdas cuando creamos la carpeta local para colocar dentro los archivos de
la web? Pues vamos a hacer algo muy similar, verás.
Abre tu Html-Kit y en la barra de arriba, donde pone Workspace escoge la
opción Añadir Carpetas/Servidor FTP > Añadir Servidor FTP, como en la imagen
de abajo:

Aparece una ventana donde tienes que colocar algunos de los datos que
apuntaste, veamos qué datos son y dónde van apuntados.
 (1) Aquí pon la dirección de tu FTP. Suele empezar por
ftp.nombredelservidor.. pero cada hosting es algo firerente. En la imágen de
arriba puedes ver los datos que yo puse para la configuración del Ftp de una
cuenta creada en Razy (recomendado para seguir el curso).
(2) Aquí se pone el puerto de conexión. Ni yo se lo que es, pero coloca un 21
a no ser que tu hosting te indique otra cosa.
(3) Tu nombre de usuario para el Hosting que tengas. En Razy son números
aleatorios, como puedes ver en la imagen.
(4) La contraseña o password.
(5) Activa esta casilla si no quieres tener que estar escribiendo la contraseña
cada vez que quieras conectar tu Ftp.
(6) Es solo el nombre que aparecerá en la ventana Workspace del Html Kit.
Pon lo que más te guste. Yo he puesto web-ejemplo-cctw-internet para
diferenciarlo de la carpeta local que llamamos web-ejemplo-cctw-local. Para
seguir el ejemplo de este curso haz como yo y así evitarás perderte cuando me
refiera a esa carpeta. Luego, para tus trabajos la puedes llamar como te de la
gana, claro.
(7) Initial Directory: En ocasiones al registrarte en un servidor te indican la
ruta inicial o FTP Path, que has de colocar en el Ftp. A veces es /www/ otras
veces es /html_public/... Si te has registrado en Razy escribe aquí lo mismo que
pusiste en el punto (1) y te funcionará bien. Para qué sirve? Simplemente indica
al Ftp cuál será la carpeta raiz que se va a mostrar. Lo entenderás con el tiempo,
no es muy importante.
(8) Passive Mode. Esto no lo domino bien. Si se que unos servidores piden que
se use el modo activo y otros el modo pasivo. Si lo pones al contrario quizás te
cueste conectarte. Razy por ejemplo pide que se active. Tiene que ver son los
puertos que se usan para la conexión.... un rollo, vamos, je je.
El resto de opciones de esa pestaña y de las otras dos no hace falta tocarlas.
Pulsa en OK y seguirmos.

Nuestro nuevo Servidor FTP

Ahora podemos ver una nueva carpeta en la ventana de la derecha (ver >
Workspace) del Html-Kit. Es esta señalada en la imagen de abajo:
 Si ahora simplemente pulsas sobre esa carpeta, se abrirá mostrando todos los
archivos que hay en internet. Seguramente solo haya uno llamado index.html sin
contenido alguno o con algún mensaje de "En construcción". Esa página la pone el
propio hosting mientras que tú no subes la tuya.

Ojo! Si al pulsar sobre el signo "+" de la carpeta azul ésta no llega a abrirse
nunca sino que aparece una lupa buscando y tarda demasiado (varios minutos) sin
que termine de mostrar los archivos de dentro, podría ser que:

 Tienes en casa un cortafuegos o firewall que impide al HtmlKit

conectarse. Tendrás que darle permisos al HtmlKit en tu cortafuegos
de windows.
 Estas en el trabajo (no diremos nada...) donde seguramente tienen
un proxy que impide la conexión de FTPs. Pruebalo entonces desde
casa.
 Los datos que has colocado no han sido escritos correctamente. A
veces copiar y pegar no funciona (pues añade un espacio en blanco al
final). Prueba a escribirlo a mano.
 Puede que los datos de usuario o contraseña los pusieras con alguna
mayúscula y has de escribirlo igual que lo pusiste al registrarte.
 No has pagado la conexión a internet este mes o el gato le ha dao un
bocao al cable...
 Si no logras conectarte verificando estas medidas, pregúntanos en el
foro CCTW.

Qué? Ha sido facil? Si tienes problemas con esto lanza tu pregunta en el Foro
CCTW, en la sección "Problemas de Conexión", oki? y recuerda indicarnos cuál es
tu hosting para poder ayudarte mejor, y la dirección, etc, etc.

Subir el index.html de tu página web con Html-Kit

 Ya tenemos unos cuantos archivos de nuestra web de ejemplo. Los podemos
ver en la ventana Workspace del Html Kit, dentro de la carpeta "web-ejemplo-
cctw-local". También tenemos el ftp configurado y lo podemos ver en la misma
ventana, debajo de la carpeta anterior con un símbolo a su izquierda de color
azul. Estos símbolos azules indican que se tratan de carpetas de servidores
(archivos en la red) mientras que los amarillos indican que son locales (están en
tu ordenata).
Ahora vamos a ver cómo nos las ingeniamos para subir los archivos desde
nuestro des-ordenador hacia nuestro nuevo hosting usando el Ftp configurado
antes.
Haciendo clic en el signo "+" de la izquierda de la carpeta del ftp "web-
ejemplo-cctw-internet" podrás ver qué archivos hay en tu servidor (hosting) en
estos momentos. Dale y verás que aparece un archivo index.html
Este archivo index.html es el primero que lee el navegador cuando se teclea la
dirección de cualquier web en él. Todas las webs tienen un index.html y el que
tú ves ahora es el que ha colocado tu hosting para que se vea alguna cosa
mientras que subes tu propio index.

Cómo borrar archivos

Para empezar vamos a borrar ese index.html que nos han colocado por
defecto (Ojo, el de la carpeta "web-ejemplo-cctw-internet", no vayas a borrar
el de la carpeta "web-ejemplo-cctw-local"!!). Para ello basta con hacer clic
sobre él una vez con el botón derecho del ratón y escoger "Delete..." que
significa Borrar. Al final aprendes inglés y todo, je je je.
Te preguntará si estás seguro. Yo se que seguro seguro lo que se dice seguro...
no lo vas a estar, pero como confias en lo que yo te diga, le dirás que si, je je je.
Dale sin miedo. Tenemos ahora el hosting totalmente vacio. Verás que poco
tardamos en llenarlo de tonterias, ja ja ja.
Subir el primer archivo
Como sabes, para que la gente vea tu web, los archivos han de estar en el
hosting. De nada sirve tenerlos en tu Pc. Por tanto los tenemos que pasar desde
la carpeta amarilla "web-ejemplo-cctw-local" hasta la carpeta azul "web-
ejemplo-cctw-internet". Lo ideal sería pinchar desde la carpeta local y
arrastrarlos hasta la otra, pero por el momento el Html Kit no nos permite esa
opción. Ando investigando si hay algún mod para arreglar esto, pero por el
momento nos tendremos que conformar con el método siguiente.
Vamos a subir el archivo index.html al hosting. Para ello hacemos clic con el
botón derecho del ratón sobre la carpeta "web-ejemplo-cctw-internet" (en
adelante la llamaremos simplemente "internet", que me estoy cansando de ese
nombre tan largo, je je) y del menú que se abre escogemos la opción "Connect"
que significa "Conectar al servidor". Si no te aparece activada es porque ya está
conectado:

Despues hacemos lo mismo, clic con el botón derecho del ratón y escogemos
esta vez la opción "Upload" que significa "Subir":
 Se abre entonces una ventana donde debemos buscar, dentro de la carpeta
donde guardamos los archivos de la web de ejemplo, el archivo index.html (la
ruta sería algo así como C:\Documents and Settings\Usuario\Escritorio\mis-
paginas-web\web-ejemplo-cctw). Selecciona el index.html y pulsa en "Abrir".

Pues ya está. Ahora aparecerá en la ventana Workspace del Html Kit el nuevo
archivo index.html, pero esta vez es el nuestro. Si ahora visitas tu página web
escribiendo en tu navegador la dirección, verás algo parecido a la página web del
ejemplo que estamos haciendo. Concretamente verás esto:
 No se ve ni la sonrisa, ni la imagen de fondo, ni el buzón ni se están
respetando los estilos css. Por qué puede ser? Este es el error más frecuente al
principio y por eso te pido que prestes atención a esto.... Si no subes el archivo
correspondiente, no se ven los elementos. Si no se ve el buzón es porque no se
ha subido (upload) el archivo del dibujo del buzón. Lo mismo para el fondo. Y si
los estilos no se están respetando es porque no se ha subido aún la Hoja de Estilo
(estilos.css). Obvio verdad? Pues verás como caes alguna vez, je je.
En la página siguiente aprendemos a subir el resto de archivos y así arreglamos
el problema.

Subir el resto de archivos al servidor

Esto es fácil, pues lo acabas de hacer hace un momento con el index, no? Has
de seleccionar los archivos uno por uno y hacerles el "Upload". Recuerda:
1.- Conectar con el servidor con botón derecho del ratón sobre la carpeta azul
y pulsando en "Connect".
2.- Botón derecho sobre la misma carpeta azul de nuevo y seleccionar
"Upload".
3.- Seleccionar un archivo y pulsar en "Abrir".
4.- Lo mismo para el siguiente archivo. Hazlo solo para los archivos
estilos.css, estilo-general.css y plantilla.html.
 A la hora de seleccionar el archivo que quieres subir puedes tener apretada la
tecla Shift de tu teclado (la flecha del teclado que hay a la izquierda apuntando
hacia arriba) y así podrás seleccionar varios archivos de una sola vez.
Verás como no es posible subir la carpeta "objetos". Cuando la seleccionas
para subirla en lugar de subirse se abre mostrando sus componentes. Lo que hay
que hacer es crear primero la carpeta objetos en el servidor o hosting. Veamos
como:

Crear nuevas carpetas

Haz clic con el botón derecho del ratón sobre el nombre de la carpeta "web-
ejemplo-cctw-internet". Selecciona la opción New + Create New Folder. Si no
te aparece activa tendrás que conectar primero el Ftp (botón derecho sobre la
carpeta y pulsar "Connect", como antes):

Se abre una ventanita donde has de ponerle el nombre a la carpeta. Recuerda,

es "objetos" (todo en minúsculas) no "Objetos":

Ahora que ya tienes la carpeta "objetos" dentro de tu hosting. Ten en cuenta

una cosa importante. Cuando quieras colocar un archivo directamente en la raiz
de la web (la raiz significa en el primer nivel de la web, es decir, fuera de
cualquier carpeta) has de hacer el "clic derecho" sobre el nombre "web-ejemplo-
cctw-internet". Pero si lo que quieres es colocar algún archivo "dentro" de una
carpeta, es sobre esa carpeta donde has de hacer "clic derecho" para escoger
luego "Upload". En caso contrario el archivo no se subirá dentro de esa carpeta.
Ojo!
Por tanto, para subir ahora los archivos que hay dentro de la carpeta "objetos"
de tu disco duro a la carpeta "objetos" del servidor, has de hacer clic derecho
sobre la carpeta objetos azul, hacer clic en "upload" (o en Connect antes si se ha
desconectado) y después escoger los archivos a subir, vale? Pues dale, a ver si lo
consigues...

En definitiva...
Al final, si abres las carpetas web-ejemplo-cctw-local y web-ejemplo-cctw-
internet en la ventana Workspace del Html Kit y si has hecho los deberes
correctamente, te ha de aparecer algo como lo que se muestra en la imagen de
la derecha.

Ya tenemos los archivos de lo que llevamos hecho de ejemplo en el nuevo

hosting. No es emocionante? A partir de ahora, cada vez que hagamos algún
cambio o mejora en el ejemplo podremos subirlo al servidor (o hosting) para ver
como va quedando. Aún nos queda mucho por hacer, así que... paciencia y
ánimo.
Por cierto, si quieres ver tu plantilla.html en tu servidor después de haberla
subido, basta con escribir su dirección en tu navegador. Su dirección será la
misma que escribes para ver el index, seguido de /plantilla.html
Es decir, si tu dirección es http://yomismo.onlinewebshop.net/ la dirección
de la plantilla será http://testeando.onlinewebshop.net/plantilla.html

Como colocar bordes a la plantilla de nuestra página web

Tal y como tenemos la plantilla, queda un poco cutre, así que vamos a ponerle
unos bordes a los lados para mejorar su aspecto.
 Con los bordes hay que tener mucho cuidado, pues cada navegador interpreta
los bordes de un modo distinto y podría estropearnos el aspecto de nuestra
página. Imagina un rectángulo. Si le definimos un borde de 10 pixeles de
anchura, unos navegadores pintan ese borde por fuera de ese rectángulo,
mientras que otros lo pintan por dentro del rectángulo. Al final resulta que los
visitantes que vean la web con un tipo de navegador la veran bien, pero otros
que usen otros navegadores no la verán como nosotros queremos. La forma que
aquí proponemos es sencilla y procura que la página web se vea idéntica usando
cualquier navegador.

Dónde se define un borde

Si aún te acuerdas de lo explicado al principio de las lecciones (esperemos que
sí...) nos propusimos definir los contenidos en el código html de las páginas
dejando la definición del aspecto en la Hoja de Estilo. Como los bordes son más
aspectos decorativos que contenidos en sí, vamos a definirlos en la Hoja de
Estilo. Así además podremos cambiarlo cuando nos de la gana con solo variar
algunos detalles del archivo de estilo en lugar de tener que hacerlo en cada una
de las páginas de la web.

Cómo se definen los bordes

En la Hoja de Estilos, se define el borde de un elemento (por ejemplo de una
capa o div) escribiendo esto entre sus corchetes:
border: 1px solid black ;
donde 1px es la anchura del borde, solid significa que será una línea continua
y black (negro) será el color que queremos que tenga la línea de borde. Hay
otras formas de definir el borde, pero para el ejemplo nos basta con saber esto.
Cuando quieras aprender más cosas sobre el Border solo tienes que visitar la
sección Curso de Estilos CSS de ComoCrearTuWeb.
La línea anterior crea por tanto un borde de 1 pixel de ancho, con una línea
continua de color negro por arriba, abajo y por los lados del elemento al que se
lo apliquemos. Pero en ocasiones quizas prefiramos dibujar el borde solo por uno
de los lados dejando sin borde los otros. Cómo podríamos hacer esto?
Dibujar el borde solo por algunos lados
Para dibujar el borde solo por un lado, se pone esta línea en lugar de la
anterior:
border-top: black 1px solid (dibuja el borde solo por arriba)
border-bottom: black 1px solid (dibuja el borde solo por abajo)
border-left: black 1px solid (dibuja el borde solo por la izquierda)
border-right: black 1px solid (dibuja el borde solo por derecha)
Si queremos dibujar el borde por varios lados pero no por los cuatro, basta con
escribir (entre los corchetes del elemento al que se lo queremos aplicar) las
líneas anteriores que queramos, separadas por punto y coma ";".
 Veamos un ejemplo de aplicación de bordes
Para practicar, vamos a dibujar algunos bordes en el ejemplo que llevamos
hecho. Abre tu Html Kit y abre el archivo estilo-general.css
Ahora, dentro de los corchetes del elemento "contenido" escribe esto de abajo
para dibujar un borde a la izquierda y un borde a la derecha:
contenido { ....lo que ya había .......... ; border-left: black 1px solid ;
border-right: black 1px solid }
Si ahora guardas la Hoja de Estilo estilo-general.css y haces vista previa en el
archivo plantilla.html podrás ver como aparecen bordes negros a los lados de la
capa "contenidos".
Problema con los distintos navegadores
El objetivo de toda página web es que se vea identicamente en cualquier
navegador. Con lo que llevamos hecho en el ejemplo ya podemos observar un
fallo. Acabo de descubrir una regla:
"Si defines un borde en un elemento, ese elemento no puede llevar también
definido un ancho concreto mediante el width, es decir, no le podemos asignar
una cantidad numérica, solamente se le puede definir width:auto". Si no
seguimos esta regla, la web no se verá bien en todos los navegadores!"
Para arreglar esto basta con eliminar la cifra de la anchura para la capa
"contenido". Realmente no va a ser un problema eliminar ese width:800px, pues
la anchura ya está definida por la capa que contiene a contenido (global), así
que eliminamos width:800px de la capa contenidos en estilo-general.css la
guardamos y hacemos vista previa para ver que ha ocurrido.
Vaya, más problemas.... ahora resulta que en Internet Explorer se ve bien,
pero con el Opera se nos estropea la estructura... Esto lo arreglamos ahora
mismo eliminando en la definición de estilo de la capa contenido la propiedad
float:left que en realidad no nos hacía mucha falta.
Ahora sí que se ve correctamente en todos los navegadores... o al menos.. eso
espero. Si no es así dímelo en el Foro CCTW

Bordes para el resto de capas

Bueno, ahora que vemos que esto del borde funciona, vamos a ponerle borde
a otras capas, recordando por supuesto la regla anterior que decía... "Si la capa
tiene definida una cantidad numérica para el width, no podemos definirle el
borde o se deformará la capa un poco".
Ahora vamos a ir colocando bordes a varias de las capas de la plantilla,
teniendo en cuenta que cuando tenemos una capa encima de otra, si le ponemos
un borde inferior a la de arriba, no será necesario ponerle borde superior a la de
abajo (pues le vale el borde inferior de la de encima... se entiende esto?...).
A la capa o div llamada navegacion le vamos a poner borde por lo cuatro
costados (por arriba, abajo , izquierda y derecha), que como ya sabemos, se
hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-
general.css:
 border: black 1px solid
quedando esa línea así en la Hoja de Estilo:
#navegacion {background-color: pink ; border: black 1px solid }
Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los
cuatro costados, nos aparecería un borde de 2 pixeles entre esa capa y la capa
navegacion, (1 pixel definido en la capa navegacion más otro pixel definido para
la capa cabecera). Por tanto y para no tener unos bordes más gruesos que otros,
a la capa cabecera le vamos a definir el borde solamente por ariba y por los
lados. Esto, como ya sabes, se hace así:
#cabecera { background-color: pink ; border-left: black 1px solid ;
border-right: black 1px solid ; border-top: black 1px solid }
Ahora vamos con la capa pie. Vamos a definirle un borde por los cuatro
costados de este modo:
#pie {background-color: brown ; border: black 1px solid }
Y con esto quedan todas la capas bordeadas. Ya sabes usar los bordes y la
página tiene mejor pinta. En adelante la mejoraremos aún más hasta que quede
totalmente profesional...

Esquinas redondeadas para las capas de la web

Los bordes no quedan mal del todo, pero si consiguiéramos redondear las
esquinas ya sería para sacar nota, verdad? Pues vamos allá.
No existe ninguna propiedad por el momento para conseguir mediante css ni
html crear el efecto de redondeado de aristas o esquinas, pero yo que soy muy
listo... he descubierto la forma de hacerlo de otro modo. Cómo? Simplemente
dibujando el contorno redondeado en una imagen y colocándola después en la
capa como imagen de fondo. De este modo no solo podemos conseguir el
redondeado, sino también cualquier otra forma que seamos capaces de dibujar,
como por ejemplo lazos, sombras de colores, etc, etc (el etc depende solo de tu
imaginación).
Solo es necesario tener un poco de destreza para dibujar lo que necesitamos
con un programa de dibujo, como el Paint del Windows, o similar. En el Foro
CCTW hay una sección en la que se habla del Paint Shop Pro (PSP) que quizás te
sea de ayuda para aprender a dibujar con el ordenador.
Para no mezclar mucho las cosas, partirémos aquí de algunas imágenes ya
hechas. Las usaremos para este ejemplo de página web que estamos haciendo y
te dejo a tí que crees las tuyas para que la pongas en tu propia web, oki?
Para empezar, cópiate estas dos imágenes y pégalas en la carpeta "objetos"
para poder seguir estas lecciones. Por si no recerdas cómo se copiaban imágenes
de otras webs, te recuerdo que solo tiene que hacer clic con el botón derecho
del ratón sobre la imágen y escoger la opción "Copiar Imagen..." (o algo
parecido). Luego seleccionas la carpeta de tu disco duro donde la quieres pegar
(la carpeta objetos) y listo.
 Se trata de imágenes con extensión gif y con fondo transparente. Guárdalas
poniéndoles de nombre curva-superior.gif y curva-inferior.gif
A continuación veremos paso a paso como poner estas imágenes en la parte
alta y baja de la página web para conseguir un efecto más profesional.