Contenido:

3 ------------------------- Introduccin
4 ------------------------- Descargar Html-Kit
6 ------------------------- Instalacin
10 ----------------------- Configuracin
13 ----------------------- En Espaol
14 ----------------------- Simplificando
17 ----------------------- Preferencias
20 ----------------------- El cdigo HTML
21 ----------------------- Mirndo el Html
22 ----------------------- Orden, orden, orden
24 ----------------------- El Sitio Local
27 ----------------------- Mi Primera Pgina
29 ----------------------- Mi Primer Prrafo
33 ----------------------- Mi Primer Enlace
35 ----------------------- La Hoja de Estilos.
36 ----------------------- Enlazar Estilos
37 ----------------------- Fondos en CSS
41 ----------------------- Fondo de Ejemplo
42 ----------------------- Insertar Imagen
46 ----------------------- Enlace de E-Mail
50 ----------------------- Imgenes y CSS
51 ----------------------- Centrar Prrafos
52 ----------------------- y de momento...
 Introduccin

En estas pginas vas a aprender a crear una pgina web, a escoger un servidor de pago
o gratuito, a subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle
un buen provecho econmico si lo deseas. No hace falta que tengas conocimientos de
nada, simplemente con leer estas lecciones lo vas a lograr, vers. El resultado final ser
una web igual que esta, con su foro, un top, un directorio de enlaces, optimizada para
aparecer en buenas posiciones en los buscadores, con un cdigo html y css vlidos, etc,
etc.

Qu, la mitad de lo que acabo de decir ni te suena eh? ja ja ja ja, no te preocupes, te

lo voy a explicar todo paso a paso, como si fueras idiota, vale? ja ja ja. Hey, que era
broma, no te vayas!!!

Adems, te lo explicamos todo tan bien que sabrs como personalizar tu pgina web a
tu antojo. Una vez termines el tutorial podrs cambiar los colores, la estructura, los
mens, etc, etc para adaptarla a tus gustos. Tras aprender todos los trucos podrs hacer
cualquier otro proyecto desde cero con lo que vas a aprender aqu.

Qu vamos a necesitar?

En principio solo conexin a internet y seguir estas instrucciones. El resto de recursos

necesarios los conseguiremos de la red, como por ejemplo el software (gratuito) que
vamos a seguir para las lecciones, el espacio web (gratuito tambin) para alojar tu
proyecto, el software para el foro, para el directorio y para el topsites (de nuevo, gratis),
etc, etc. Si tienes acceso a internet tendrs todo lo necesario. Bueno y un poco de
tiempo y paciencia, claro.

Y si no entendemos algo?

En ese caso dispones del Foro CCTW donde puedes escribir todas tus dudas. Las
resolvemos todas, de modo que... si no tienes pgina web ser solo porque no quieres.
No hay escusa! Para leer el foro no es necesario registrarse, para escribir tus dudas en l
s (es necesario para poder evitar un poco el Spam, lo siento).

Bien, cmo seguimos las lecciones de esta web?

Arriba vers un men horizontal con fondo naranja. Desde all puedes acceder a las
distintas lecciones de este tutorial. Al hacer clic en cada una aparece un men a la
izquierda, con fondo blanco como el que hay ahora, desde donde acceders a las
distintas partes de cada leccin. Adems, pulsando sobre las flechas "Siguiente" y
"Anterior" de la parte baja de cada pgina puedes ir avanzando las lecciones por orden.
Todo claro? Pues adelante, basta con pulsar la flecha derecha de aqu abajo.

Recuerda, lee con atencin las lecciones, sigue al pie de la letra cada paso y consulta
todas tus dudas en el foro CCTW. Paciencia y... Suerte!!
 Descarga del Html-Kit
Un software es un programa informtico, lo que ocurre es que al decir software parece
que la cosa tiene ms importancia, como es una palabra en ingls... ya se sabe... pero no
es ms que eso, un programa. Para crear nuestra pgina web necesitamos un programa.
Para crear webs hay miles, de pago, gratuitos, regalados, pirateados... Nosotros en esta
leccin vamos a ser buenos y usaremos uno gratuito, por ejemplo uno que se llama Html-
Kit

De dnde 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 pginas
web. Es gratuito, esto significa que no has de pagar un duro por l, aunque tienes la
opcin de pagar para tener acceso a un sin fn de herramientas extra. Por lo pronto, con
la versin gratuita nos va a sobrar.

Para conseguirlo, qu mejor que descargarlo desde la pgina oficial, no? As estaremos
seguros de obtener la versin ms moderna. La pgina es http://www.chami.com/html-
kit/download/. Ve haciendo clic y se abrir una ventana aparte, para que puedas seguir
leyendo estas instrucciones.

Al acceder a la web de Html-Kit podrs ver en la parte alta un cartelito similar a este:

En el hueco de arriba te preguntan dnde oiste hablar de Html-Kit. Puedes poner lo

que quieras, la direccin de esta web, un buscador, etc, etc. En el hueco de abajo
puedes escribir tu email si deseas recibir informacin 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 continuacin, 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
rpido. Al hacer clic se abre una ventana preguntado si lo deseas guardar o ejecutar
directamente. Escoge Guardar y as lo tendrs a mano en caso de que te haga falta:
 Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su
instalacin:

Quizs 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.
 Cmo Instalar el Html-Kit

Comienza mostrando una ventana de bienvenida y preguntndote si quieres seguir o

no... parece que an no ha entendido que "s".. je je:

Como va siendo habitual, ahora aceptamos las condiciones, cmo no, verdad? Tienes
que marcar la casilla que te he marcado en rojo en la imagen de aqu abajo y despus
pulsar en Next> :
 Siguiente paso? Indicarle en qu carpeta de nuestro disco duro lo queremos instalar. La
opcin por defecto es perfectamente vlida:

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 cuestin de perderse algo, as que... t pa dentro.

Si an no te has cansado de aceptar y aceptar, aqu tienes otra ventana que te

pregunta cul 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 ms cosas, pero por el
momento vamos sobrados. Quita la marca (mira la foto de abajo) y seguimos, ok?
 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
botn derecho del ratn sobre el que pone Html Kit y escoger "Crear Acceso Directo". En
ese momento si vuelves a abrir el desplegable vers 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 botn,
arrstralo hasta tu escritorio y listo, ya lo tienes a mano. La prxima vez que quieras
abrir el Html Kit bastar con darle dos veces a ese icono de tu escritorio.
 Configuracin del Html-Kit

En la pgina anterior nos quedamos en esta ventana:

Aceptamos de nuevo presionando "Finish" y vemos, cmo 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 ms 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? Fjate, 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 informacin 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 contestacin, nos pregunta si queremos verificar si hay alguna

versin ms moderna del programa... arghhh. Adivinas 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 lmite, je je je.
 Bueno. Ahora ya s 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 "Dont 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 espaol
Ahora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para
enterderlo mejor... Para ello es suficiente bajar un archivo de la pgina 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 si quieres guardar el archivo. Bjate
el archivo, que ser un rar comprimido y tras descargarlo lo descomprimes colocando su
contenido en la carpeta "default" que se encuentra dentro de una de las carpetas donde
has instalado el programa (seguramente en c:\Archivos de programa\Chami\HTML-
Kit\Data\Default):

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

contenido en esa misma carpeta y listo. La prxima vez que abras el Html-Kit estar en
Castellano gran parte del men, no todo, pero s la gran mayoria.
 Si te descargas ese archivo y no logras descomprimirlo haciendo doble clic sobre l,
quizs sea porque no tienes ningn 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 fcil!

El Html-Kit es un programa sencillo, pero an 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 ms claro,
oki? Para empezar, abre tu Html-Kit (si lo tienes abierto, cierralo y lo vuelves a abrir).

Nada ms 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 opcin y pulsar OK vemos de nuevo el programa con una pgina
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
vers, de este modo la superficie de trabajo que nos queda es mucho ms amplia y clara,
no? Quedara as:
 Mucho mejor, verdad? Ya estamos preparados para empezar el juego. Vers como crear
pginas web va a ser pan comido para t. Ahora es una buena oportunidad para empezar a
saber qu es ese cdigo que aparece en la pantalla del Html-Kit. Vamos a verlo en la
pgima siguiente.

Ajustando algunas preferencias del Html-Kit

An existen algunas opciones que podemos activar, desactivar o cambiar para hacernos
la vida ms fcil al usar el Html-Kit para el diseo de nuestras pginas web. Veamos
algunas de estas opciones. Para acceder a ellas haz clic en la parte superior, donde pone
"Editar" y dentro del submen que se abre, haz clic en la ltima de todas, llamada
"Preferencias".
 Aparece entonces una ventana con un disparate de opciones que podemos escoger. Son
muchas, para volverse locos! je je je, pero no te asustes que te guio todo el rato, oki? je
je je. Solo vamos a tocar un poquito ac. Haz clic en la pestaa llamada "File Types",
sealada de rojo en la imagen de abajo:
 Una vez abierta esa lengueta, haz clic en el desplegable que sealo en la imagen de
abajo y escoge "All Files *.*"

Y para qu sirve esto que acabamos de hacer? Cuando tratas de guardar un archivo con
el htmlkit, o a subirlo o bajarlo del servidor, etc, te aparece una ventana para buscar el
elemento que has de seleccionar. Si no hacemos lo anterior, solo te mostrar archivos
web, de forma que cuando quieras seleccionar imgenes, por ejemplo, no las vas a ver en
esa ventana a no ser que marques "All Files" que significa, todo tipo de archivos,
cualquier extensin. De este modo vemos todo y no creemos que hemos perdido el
archivo que buscamos. Esto lo hacemos para evitar algunos problemas que tenian
antiguos amigos de CCTW, cuando no haciamos esto.

Como ves existen un montn de opciones ms. Si sabes un poco de ingls puedes
cotillear, aunque mejor no cambiar nada. As los dos tendremos la misma configuracin y
nos ser ms fcil seguirnos el uno al otro, je je je. Me conformo con lo que acabamos de
activar y con que sepas que existen otras opciones que puedes cambiar, oki? Pues
seguimos!

Primer contacto con el cdigo HTML

Una pgina web no es ms que un puado de letras y nmeros que son interpretados
por los navegadores mostrando lo que ves por internet. Al ser tan solo eso, letras y
nmeros, podramos usar por ejemplo el Block de Notas de Windows para crear una
pgina web completa. Tan solo hay que saber qu letras y qu nmeros escribir y luego
guardar el archivo, pero en lugar de hacerlo con extensin .txt se guardara con
extensin .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 cdigo html de una pgina web

Todas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:

<html> (todas empiezan con esto) </html> (todas terminan con esto otro)

En adelante, siempre que escriba cdigo Html lo har de este modo, de color azul para
que lo distingas. Pues bien, si eso lo escribimos en un archivo y lo guardamos con
extensin .htm o .html ser una pgina web. Vacia, s, pero una pgina web.

La primera palabra <html> indica que ah empieza el cdigo de la web. La segunda

</html> indica que el cdigo de la pgina web a terminado. Se distinguen por la
contrabarra / que siempre indica que algo ha terminado.

La estructura de una pgina web en HTML

Dentro de cualquier pgina web hay cosas que se ven (o que se escuchan) y cosas que
no. Las cosas que se ven son los textos, las imgenes, sonidos, etc. Por otro lado lo que
no se ve son sus caractersticas, como el ttulo, su descripcin, palabras clave y otra serie
de cosas que veremos ms adelante. Las cosas que no se ven se colocan dentro del cdigo
HTML en una zona llamada cabecera (head en ingls) y lo que se muestra se pone en lo
que se llama cuerpo (o hody en ingls). Pues igual que antes hemos escrito en cdigo
dnde empieza la pgina y dnde termina, la cabecera (head) y el cuerpo (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 colocndole 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 pgina web vacia.

Definir el ttulo de una pgina web

Una de las cosas que se pueden definir dentro de la cabecera o head es el ttulo de la
pgina. Antes hemos dicho que en la cabecera se colocaban las cosas que no se
mostraban en la web. Este ttulo 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. Ms adelante veremos por qu es tan
importante.

Como ya estars sospechando, existe una palabra para indicar que va a comenzar el
ttulo y otra para indicar cuando termina, verdad? Que lince, que inteligencia la tuya
oye, je je. El ttulo se define as (como ves, dentro de la cabecera o head):

<html>
<head>
<title>Este es el ttulo 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>. Fcil, no? Si guardaramos esto en un archivo
con extensin .html o .htm qu veriamos? Una ventana del navegador completamente en
blanco, pero con un ttulo 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 pgina del ejemplo miras el cdigo de esa
pgina web, vers como coincide exctamente con el mostrado antes. Si no sabes, te
enseo como mirar el cdigo html de una pgina web en la pgina siguiente.

Por el momento, ya sabes crear pginas en blanco. Todo un logro, verdad? je je je.

Cmo ver el cdigo Html de cualquier pgina web?

Como vers, estas lecciones estn explicadas para quien no tiene ni idea. Si t ya sabes
ver el cdigo Html de una pgina web puedes pasar sin miedo a la pgina 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 cdigo Html de una pgina web pronto vers
que resulta muy til, tanto para corregir errores en tus pginas como para ver cmo
narices una web que te ha gustado a podido hacer alguna cosa. Una vez que domines un
poco ms el diseo de pginas web, aprenders mucho ms cotilleando el cdigo Html de
otras pginas.

La forma ms sencilla de ver el cdigo Html de una pgina web es haciendo clic en las
opciones que aparecen normalmente en la barra de herramientas superior de cualquier
navegador. La opcin concreta depender de cul sea el navegador que ests usando.

Si usas el Internet Explorer puedes ver el cdigo haciendo clic en Ver > Cdigo Fuente.

Cuando pongo esta flechita ">" es para indicar que primero se hace clic en la opcin
Ver y al abrirse el desplegable con otras opciones, se toma la opcin Cdigo Fuente. Te
enseo una imagen para que lo tengas ms claro:

Si en cambio ests usando el Firefox, la opcin est en Ver > Cdigo Fuente de la
Pgina o teclas Control + U.

Para el navegador Opera, el cdigo Html lo tienes en Ver + Cdigo Fuente o pulsando
las teclas Control + F3.

Como ves, son todos parecidos y por supuesto, el cdigo mostrado ha de ser idntico.
Haz la prueba con esta misma pgina, o con el ejemplo de la pgina anterior, y as
compruebas el cdigo 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 ms adelante. Para ello sigue estas indicaciones paso
a paso.
 La carpeta de nuestras webs

Cuando tengamos lista nuestra pgina web tendremos que mandar todos los archivos
utilizados a la red (a nuestro servidor) por lo que es necesario que todos ellos estn en
una misma carpeta. En caso contrario sera un lio tremendo saber qu tenemos que subir.

El lugar ms 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 ratn sobre una parte de tu escritorio donde no haya ningn icono. Haces
clic all con el botn derecho del ratn y escoges Nuevo > Carpeta. A continuacin le
pones el nombre que os he dicho "mis-paginas-web" y pulsamos Intro. Ya tenemos lista la
carpeta. Fcil, no?

Dentro de esta carpeta como te digo, vamos a guardar todos los archivos que usemos
en cada web. Digo "en cada web" porque adems 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 ms y llmala "objetos".
En ella guardaremos las imgenes, 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 minsculas,
oki? Ya entenders por qu.

Como ves, por el momento no tenemos nada de nada, solo sabemos crear pginas web
vacias y carpetas vacias, pero en un par de pginas vers 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 pginas,
imagenes y dems elementos. Coincide o ha de coincidir con la carpeta que acabamos de
crear, pues esa era su funcin, 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 tendrs ningn 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
opcin Workspace.

3.- Aparece ahora una ventana donde podemos definir nuestros sitios:
 Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningn 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. Fcil, 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 ms 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

Aadir Carpeta Local/Red.

2.- En la ventana que se abre (como ves, la traduccin al espaol no es completa, pero
podremos defendernos, ya vers), 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 ttulo cualquiera, por ejemplo, "web-ejemplo-
cctw-local" y pulsa OK:
 3.- Tras pulsar OK vers como aparece este nuevo sitio en la ventana de Workspace:

A partir de ahora, cada vez que queramos trabajar sobre archivos de esta pgina 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 pgina 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 podrs hacer todos los experimentos que quieras. As podrs dejar el sitio
"web-ejemplo-cctw-local" solo para lo explicado aqui y no te hars 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.

Cmo crear la primera pgina de la web

La primera pgina que vamos a crear es la pgina principal. La pgina 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 pgina va a pertenecer al sitio "web-ejemplo-cctw", tendremos que
apaarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la
ventana de Workspace. Para crearla ponemos el cursor del ratn dentro de la ventana de
Workspace, justo encima del sitio "web-ejemplo-cctw" y pulsamos el botn derecho del
ratn.

Se abre entonces una ventana en la que tenemos que escoger, dentro de la seccin
New, la opcin Create File...

Al hacer clic sobre Create File... aparece esta otra ventana:

Haz clic sobre la lengeta en la que pone "General", escoge el tipo de archivo "Blank
HTML Page" (pgina html en blanco) y pulsa Ok.

En seguida aparece otra ventana preguntando (este programa no para de preguntar..

verdad? que pesao es... je je) preguntndonos el nombre que queremos que tenga ese
archivo. Cul debe ser? Cmo? Que no lo sabes? Ejem.... hay que estar ms atento! je je.
Se tiene que llamar index.html pues ser la pgina principal, as que lo escribimos en esa
ventana, con la extensin 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 tambin la carpeta "objetos"
que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta vers como adems
de la carpeta "objetos" tambin aparece all el archivo index.html

Ya estamos listos para escribir contenidos el la pgina principal, index.html as que

vamos a la siguiente pgina y comenzamos el juego!

Cmo crear un prrafo en la pgina web

Si has prestado atencin a lo dicho hasta ahora, te acordars 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 prrafo 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 despus hacemos doble clic en el archivo index.html o pgina
principal. Se abre entonces la ventana de ese archivo mostrando todo su cdigo Html.
 Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana
Workspace para tener ms sitio visible. De modo que hacemos clic en la x de Workspace
para cerrarla y despus maximizamos la ventana del index para ocupar toda la ventana
del Html-Kit, quedando as:

Esta es la vista llamada "Editor de Html". Como vers, el cdigo de esta pgina
coincide ms o menos con el que te expliqu en las primeras lecciones, verdad? Empieza
por <html> seguido de la cabecera y despus el cuerpo o Body, para cerrarse al final con
</html> que como toda etiqueta de cierre lleva su contrabarra "/".
 Se ve tambin esa primera lnea de la que no te he hablado an. Esa lnea describe el
tipo de pgina que es, las normas de Html que est siguiento. No tiene mayor
importancia, la dejaremos y listo.

Cambiando el ttulo

Vamos a cambiarle el ttulo a esta index. Bastar con escribir el ttulo 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 prrafo

Al igual que un ttulo se escribe entre <title> y </title>, un prrafo hay que escribirlo
entre las etiquetas <p> y </p>. As, para escribir por ejemplo "Bienvenidos a mi pgina
web. Muy pronto estar lista!" basta con escribir esa frase encerrada entre esas
etiquetas, dentro del cuerpo de la pgina es decir, entre <body> y </body>. Quedara 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 cmo quedara 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... sabas hacer esto antes? Pues pronto
aprenders mucho ms. No vamos a parar hasta que aprendas a crear pginas como
ComoCrearTuWeb, oki? je je, no va a ser dificil, vers.

Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de cdigo
Html. Ya sabemos algo ms.

Crear un segundo prrafo en la pgina

Para crear un segundo prrafo ya imaginars lo que hay que hacer, no? Basta con incluir
ese segundo prrafo debajo del anterior y encerrarlo entre las etiquetas <p> y </p>. Por
ejemplo, vamos a poner este segundo prrafo: "Pgina creada gracias a CCTW". En la
vista "Editor" la pgina quedara as:

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

 Cmo 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.

Cmo crear un enlace en la pgina web

Lo importante de una pgina web es la posibilidad de navegar de unas pginas a otras

sin ms 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 pgina lo queremos dirigir.

Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que tenemos escrita
en el segundo prrago hacia la direccin www.comocreartuweb.com

Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los
cambios hechos en la pgina 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 cdigo. Tras esto, como sabes, puedes cerrar la venata
de Workspace para tener ms espacio.

El cdigo Html de los enlaces o vnculos

Como estars 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 pgina enlazada. Por lo tanto, si la palabra fuera "palabra" (que poco
original, no?) la lnea quedara as:

<a>palabra</a>

Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a qu
pgina 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 direccin completa del lugar a donde queremos
mandar al visitante. Te recomiendo que leas las instrucciones sobre rutas que tenemos en
ComoCrearTuWeb. Te evitarn 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 cdigo del enlace
de este modo:

<a href="http://www.comocreartuweb.com">CCTW</a>

Te dejo una vista del Html-Kit para que lo veas ms claro, vale?
 En la misma o en otra ventana?

Si no se indica ninguna cosa ms, cuando el visitante haga clic en el enlace la pgina
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 indicrselo
dentro de la primera etiqueta. Yo te recomiendo que todos los enlaces hacia pginas de
tu misma web se abran en la misma ventana, y que todos los enlaces hacia pginas
externas las abras en ventanas diferentes.

Como este enlace apunta a una pgina 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 aadiendo
este trozo de cdigo target="_blank" quedando por tanto el cdigo as:

Quieres ver como est quedando? Este es el aspecto del ejemplo 3

Los estilos css

 El mayor problema que encontramos los que hacemos pginas web es el conseguir que
se vea idntica en cualquier navegador. A veces terminamos una web que se ve perfecta
en Explorer y de pronto vindola con el Opera o con el Firefox descubrimos que est toda
desordenada. El el peor sueo que podemos tener, je je je. Esto pasa porque no todos lo
navegadores interpretan igual las cosas que escribimos en el cdigo 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 vers.

La idea es colocar en las pginas web solamente los contenidos, sin tener en cuenta
colores, tamaos, anchuras ni nada de nada, solo contenidos puros y duros. Por otro lado
crearemos un archivo aparte donde definiremos todas las caractersticas que queremos
que tenga cada elemento de cada una de las pgina de la web. De este modo si un da
creemos por poner un caso que el tamao de la letra es muy pequeo y queremos hacerlo
ms grande, solo tenemos que indicarlo en ese archivo de caractersticas y
automticamente el tamao de letra quedar cambiado en tooodas las pginas de
nuestra web. Genial, no? Lo mismo podremos hacer a la hora de cambiar el fondo de la
pgina, la posicin 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 caractersticas, vale?

La hoja de estilos css

Este archivo de caractersticas se llama Hoja de Estilos y aunque podemos ponerle el

nombre que queramos, vamos a llamarlo siempre estilos.css para no liarnos. La
extensin, .css es obligatoria.

Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada
una de las pginas de nuestra web que ha de leer esa Hoja de Estilos para saber cmo
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 pgina principal index.html ahora vamos a hacer algo parecido para crear el archivo
estilos.css

Hacemos clic con el botn derecho del ratn 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
enseo en la imagen de abajo:
 Fjate que est en la primera pestaa, 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 pgina web

Ahora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay que
decirle a la pgina web index.html que tiene que leer las caractersticas que hay en
estilos.css para que sepa qu propiedades queremos que tenga cada elemento de la
pgina. No te preocupes si no te enteras mucho de cules con estas caractersticas, 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 pgina sino algo que indica
cmo se han de mostrar los elementos (color, tamao, etc), parece fcil adivinar que los
estilos (o la llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head
de la pgina no? Pues vamos all. La lnea de cdigo 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 ms claro)

Lo nico que tendrs que cambiar en algunas ocasiones de esa lnea es ruta/. Y cual
ser? Si leiste bien el apartado de las explicaciones de las rutas de los archivos de
ComoCrearTuWeb se te har ms fcil entenderlo (leelo ahora si no lo has visto antes).
Vamos a usar una ruta relativa para indicar dnde ha de leer la pgina index.html el
archivo estilos.css

Como tanto la pgina index.html como el archivo estilos.css estn en la misma

carpeta, basta con escribir el nombre del archivo de la Hoja de Estilo. Esto es, usar rutas
relativas. El cdigo 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 pgina index.html y escribimos esa lnea
de cdigo 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) vers como no hay cambio alguno. Esto es porque la Hoja de Estilo
(estilos.css) est todava vacia, pero te prometo que te va a encantar el invento este
cuando veas de lo que es capaz. Venga, lo ests haciendo genial!
 Explicando el color y la imagen de fondo de una pgina web

Aunque podemos indicar un color y/o un fondo de pgina directamente en el cdigo

Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las
ventajas que te he comentado en la pgina anterior. As de paso, vamos a prendiendo a
usar el archivo estilos.css para definir las caractersticas de las pgina web.

Color de fondo

Por defecto, el color de fondo de una pgina 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 pgina web. Los
colores se definen por un cdigo muy raro (como por ejemplo #E6E6FA). Te dejo aqu un
enlace con una lista de colores y sus cdigos que te puede venir muy bien. Escoge uno
que te guste para el fondo y seguimos. Recuerda que tienes algunos otros enlaces
interesantes sobre colores y sus cdigos en el apartado Consejos e Ideas de CCTW.

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 cdigo:

body {background-color: #E6E6FA}

En adelante, cuando escriba cdigos de CSS los pondr en color verde para distinguirlos
del cdigo Html que lo pondr de color azul. oki? (Cmo 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, vers como el fondo ahora es del color elegido. Bien, no? Y vers
que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500
pginas pasara lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en
cambio si no usaramos Hoja de Estilos tendramos que cambiar el color de fondo en las
500 pginas, una a una, a mano!!... es un buen invento o no? Pues an 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 continuacin,
encerrado entre los corchetes "{" y "}" se define cada propiedad que queremos pero
separndo 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 prrafos, enlaces, etc,. Ese
nmero raro, el #E6E6FA es el cdigo 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
hars 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 montn en la Galera de Imgenes, pero
puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la
carpeta "objetos" que hemos creado lecciones atrs 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 nombre y le pones "fondo.png".

Suponiendo que le hemos puesto de nombre fondo.png el cdigo a insertar en la hoja

de estilos sera este:

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png);}

Fjate 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 parntesis tal y como hemos visto en el cdigo. 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 pgina, 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 pgina. Vamos a ver todas esas opciones.

Background-Repeat

Para que el fondo solo salga una vez hay que decirle, en la misma lnea de la hoja de
estilo que no se repita, de este modo: background-repeat:no-repeat quedando as el
cdigo 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;}

An 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 quedara 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

Tambin 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 alineacin vertical; y left (izquierda) center (centro) y right (derecha) para la
alineacin horizontal, de modo que puedes usar cualquiera de esas combinaciones.

Aunque no se recomienda, tambin 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, vers
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 pgina
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 pgina 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 lnea de la hoja
de estilos, no crees? Pues a no ser que la imagen no ocupe toda la pgina, 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 pgina de antes me he pasado un poco escribiendo. Espero no

haberte asustado, je je je. Solo acurdate de que ah hay informacin de los fondos por
si algn da 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 pgina 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 lnea):

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 guardrtela, pon el ratn 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 lnea 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 ;}

Adems la quiero centrada tanto vertical como horizontalmente, as que le aado 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 lnea 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 pgina de ejemplo, tras guardar la hoja de estilo, se vera as con cualquier

navegador (espero...):
 Si t la ves diferente, rara, nos lo dices en el foro, en la seccin de Html-Kit y as lo
reparamos y retocamos la leccin, oki?

Qu tal? Mereci la pena el rollo de la pgina anterior? je je je. Intentar hacerlo ms

ameno la prxima vez...

Cmo insertar una imagen en una pgina web

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

Dnde insertar la imagen.

Si creamos la lnea de cdigo 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 cdigo Html insertar la lnea de cdigo correspondiente a un elemento para
conseguir que aparezca donde deseas, verdad?

Pues bien, una imagen puede insertarse o bien dentro de un prrafo, es decir, entre
palabras, como este ejemplo y sin que el prrafo se corte, o bien como una lnea
independiente. En ambos casos es aconsejable meterla en un prrafo, a pesar de que sea
la imagen lo nico que haya en esa lnea, es decir, siempre encerrada entre <p> y </p>.

Cdigo Html para insertar una imagen

Para insertar una imagen, se coloca el siguiente cdigo:

<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>. Recurdalo, oki? Las imgenes nunca tienen etiqueta de cierre. A lo
sumo se indica el cierre en la misma lnea colocando una contrabarra al final, as: .....
alt="descripcion de la imagen" />

Vamos a ver lo que hay dentro de ese cdigo.

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 ests 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 vlido es ponerlo junto, as "100px". Estas cantidades las coloca
normalmente el Html-Kit automticamente y si t las cambias seguramente la imagen se
vea desvirtuada y perder definicin. Si necesitas cambiar el tamao mejor hacerlo con
un programa grfico y luego la vuelves a pegar en la pgina, oki?

En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la

pgina fallara, el resto de los elementos como prrafos etc, ocuparan el lugar de esa
imagen. Sera 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 rectngulo 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 cdigo vlido
es necesario poner ese alt y adems escribir entre las comillas una breve descripcin de
la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia
imagen no se visualizara por algn problema. Por otro lado, algunos buscadores como
Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las
bsquedas de sus usuarios con el contenido de las pginas web, de modo que es bueno
adems hacer que aquellas palabras por las que queremos ser encontrados aparezcan en
esa descripcin. 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
imgenes 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 copirtela solo tienes que poner tu ratn sobre ella,
apretar el botn derecho del ratn 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 pgina
index.html para continuar. Vamos a colocar la imagen entre el prrafo donde dice
"Bienvenidos a mi pgina web" y el que dice "Pgina creada....". Como va entre los dos,
nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor despus del primer </p> (al
final de la lnea de cdigo del primer prrafo). A continuacin pulsamos Intro para crear
una nueva lnea e insertamos esto (como te he dicho, la encerramos entre nuevos <p> y
</p> que tambin 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 prrafo, como antes. Pulsa Intro para crear una nueva
lnea 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, vers como aparecen

una serie de datos que te he sealado 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 descripcin. Para eso pulsamos a la derecha de
donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la
descripcin que te dije antes "Bienvenido al Ejemplo de CCTW". Como vers hay
muchsimas ms opciones para las imgenes en esa ventana, pero por ahora lo dejamos
as, para no saturarnos, oki?

Tras escribir la descripcin y pulsar Ok, vemos como aparece la lnea de cdigo 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 nmero
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
automticamente os lo dir,

Cmo 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 ms adelante colocaremos un foro en
la web, pero nunca est de ms al menos saber como insertar estos enlaces de correo, as
que vamos a aprender.

Cdigo Html de un enlace de E-Mail

Como vas a ver, es muy parecido al cdigo Html de un enlace a otra pgina web. Solo
cambian una palabrilla, y por supuesto la ruta, que en este caso ser simplemente tu
direccin E-Mail. La lnea de cdigo 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 "Envame un E-Milio", "Clic
para escribirme" o simplemente la propia direccin 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 quizs prefieras una alternativa, ms
incomoda para el visitante pero efectiva contra el spam. Se trata de escribir tu direccin
de E-Mail con un programa de dibujo y colocar la imagen en la web. De este modo, como
las imgenes no pueden ser leidas, estos robots no pueden cazar tu direccin mientras
que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa de
correo para mandarte sus felicitaciones.

Tambin puedes colocar un botn cualquiera y hacer el enlace desde all. El botn
sera un simple dibujo con el texto "E-Mail" o el dibujo de un buzn de correo o algo as.
En ese caso los robots de spam no pueden leer la imagen, pero quizs puedan sacar la
direccin de tu E-Mail desde el cdigo 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 buzn. Aunque sea para aprender, oki?

Enlace de E-Mail en una imagen

Primero gurdate 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 ms sitio y maximizar la ventana del
index. Mejor, verdad? je je.

Pon el cursor del ratn justo al final de la lnea de cdigo del ltimo prrafo (justo
antes de </body>), pulsa con el ratn una sola vez para colocar el cursor all y pulsa
luego el Intro para crear una nueva lnea. Como te dije anteriormente, conviene poner
las cosas dentro de un prrafo, de modo que creamos ese prrafo an vacio escribiendo
sus etiquetas <p> </p>.

Ahora situa el cursor dentro de ese prrafo (colocndolo 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 cmo era):
 (Fjate como en la lnea nmero 15 del cdigo 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:

Fjate como tras seleccionar el archivo buzn en la ventana derecha de arriba,

podemos escribir el "alt" del que hablamos pginas atras, y como por fn he descubierto
como poner las unidades en el ancho y alto de la imagen.... era obvio verdad? je je je.
Pues si, escribe "px" detrs de cada cifra de auchura y altura despus de poner al "alt" y
luego pulsa el Ok.

Automticamente aparece esa nueva lnea de cdigo 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" podrs ver el buzn en cuestin. 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
cdigo 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 maysculas, justo encima del
"Control") de tu teclado teniendo el cursor al final del cdigo 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 lnea que pone href escoge "mailto:", as:
 y a continuacin de mailto: escribe tu direccin de correo.

Despus pulsa Ok y listo!

Los estilos CSS para las imgenes con enlaces

Como vers si pulsas en "Overview" o vista previa, la imagen del buzn de correo
aparece recuadrada en azul. Esto es porque por defecto, los enlaces aparecen siempre
subrayados con una lna 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.Vers qu rpido y

fcil 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". Vers

como solo tenemos aquella lnea que habiamos definido para el body. Vamos a incluir
otra lnea ms 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 ningna 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 imgenes
de ninguna de nuestras pginas. Buen invento esta hoja de estilos, verdad? Pues an
tiene cosas mejores, ya lo vers ms adelante.

By Adrin Albarracn