Está en la página 1de 299

HTML es el lenguaje que se emplea para el desarrollo

de pginas de internet.
Este lenguaje est constituido de elementos que el
navegador interpreta y las despliega en la pantalla de
acuerdo a su objetivo. Veremos que hay elementos
para disponer imgenes sobre una pgina,
hipervnculos que nos permiten dirigirnos a otra
pgina, listas, tablas para tabular datos, etc.
Para poder crear una pgina HTML se requiere un
simple editor de texto (en nuestro caso emplearemos
este sitio) y un navegador de internet (IExplorer,
FireFox etc.), emplearemos el navegador que en este
preciso momento est utilizando (recuerde que usted
est viendo en este preciso momento una pgina HTML
con su navegador).
Lo ms importante es que en cada concepto desarrolle
los ejercicios propuestos y modifique los que se
presentan ya resueltos.
Este curso lo que busca es acercar el lenguaje HTML a
una persona que nunca antes trabaj con el mismo. No
pretende mostrar todas los elementos HTML en forma
alfabtica.
Como veremos, de cada concepto se presenta una
parte terica, en la que se da una explicacin
completa, luego se pasa a la seccin del ejercicio
resuelto donde podemos ver el contenido de la pgina
HTML y cmo la visualiza el navegador. Por ltimo y tal
vez la seccin ms importante de este tutorial es
donde se propone que usted haga pginas en forma
autnoma (donde realmente podr darse cuenta si el
concepto qued firme).
Las instrucciones HTML estn encerradas entre los
caracteres: < y >.
Muchos elementos HTML requieren una marca de
comienzo y otra de finalizacin. Todo aquello que est
fuera de las marcas del lenguaje se imprime en la
pantalla (dentro del navegador).
La estructura bsica de una pgina HTML es:
<html>
<head>
</ head>
<body>
Cuerpo de la pgina.
</ body>
</ html>

Una pgina HTML es un archivo que generalmente


tiene como extensin los caracteres html. Por ejemplo
podemos llamar a nuestra primer pgina con el
nombre: pagina1.html
Durante este curso no necesitar utilizar otra
herramienta ms que este sitio. Veremos que contamos
con una ventana donde tipear la pgina y en otra ver
los resultados que genera el navegador. No significa
que no pueda hacerse una copia de los ejercicios que
desarrolla y almacenarlos en su computadora.
Estos son los elementos bsicos que toda pgina HTML
debe llevar.
Si observamos toda pgina comienza con la
marca:<html> y finaliza con la marca:</html>
Los fines de marcas tienen el mismo nombre que el
comienzo de marca, ms el caracter /
Una pgina HTML tiene dos secciones muy bien
definidas que son la cabecera:
<head>

Todo el texto que disponemos en el cuerpo de la


pgina aparece en la misma lnea, no importa si
cuando tipeamos la pgina disponemos cada palabra en
una lnea distinta (es decir un navegador no tiene en
cuenta la tecla ENTER).
Para indicarle al navegador que queremos que
contine en la prxima lnea debemos hacerlo con el
elemento HTML <br>.
Cuando aparece la marca <br> el navegador continua
con el texto en la lnea siguiente. Es uno de los pocos
elementos HTML que no tiene marca de cerrado como
habamos visto hasta ahora.
Implementemos una pgina que muestre los nombres
de distintos lenguajes de programacin uno por lnea:
<html>
<head>
</ head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</ body>
</ html>
Como vemos slo hemos agregado la marca <br> cada
vez que queremos comenzar una lnea. Tengamos en
cuenta que es indistinto si disponemos la marca en la
misma lnea o en la siguiente:
PHP<br>
es lo mismo:
PHP
<br>

Para recordar los nombres de los elementos HTML es


bueno ver cual es la palabra completa de la misma:
<br> viene de break

Un prrafo es una oracin o conjunto de oraciones


referentes a un mismo tema. Todo lo que encerremos
entre las marcas <p> y </p> aparecer separado por un
espacio con respecto al prximo prrafo.
Dentro de un prrafo puede haber saltos de lnea <br>.
Veamos con un ejemplo como disponer dos prrafos:
<html>
<head>
</ head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de
Consulta Estructurado) es un lenguaje
de programacion para trabajar con base de datos
relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un
servidor de base de datos.<br>
MySQL permite crear base de datos y tablas,
insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas
operaciones, etc., resumiendo: administrar
bases de datos.
</ p>
<p>
Este tutorial tiene por objetivo acercar los
conceptos iniciales para introducirse
en el mundo de las bases de datos.
</ p>
</ body>
</ html>
Tenemos en esta pgina HTML dos prrafos, cuando el
navegador interpreta esta pgina, separa los
contenidos de los dos prrafos con un espacio
horizontal. Adems el primer prrafo contiene varios
saltos de lnea. Normalmente uno agrupa en prrafos
para dar ms sentido a nuestro escrito.
Cuando modificamos la ventana del navegador los
prrafos se acomodan automticamente de acuerdo al
ancho de la ventana.
Para recordar el nombre de esta marca HTML:
<p> viene de paragraph

5 - Ttulos <h1><h2><h3><h4><h5><h6>
Otros elementos HTML muy utilizados son para indicar
los ttulos, para esto contamos con los elementos:
<h1><h2><h3><h4><h5><h6>
El ttulo de mayor nivel es <h1>, es decir el que tienen
una fuente mayor (veremos que es el navegador el
responsable de definir el tamao de la fuente, ms
adelante podr ver que uno puede modificar la fuente,
tamao, color etc.)
Segn la importancia del ttulo utilizaremos alguno de
estos elementos HTML. Requiere la marca de cerrado
del ttulo con la barra invertida como hemos visto.

Confeccionaremos una pgina que contenga un ttulo


de primer nivel <h1> y luego dos ttulos de nivel <h2>.
Definiremos un prrafo para cada ttulo de segundo
nivel.

pagina1.html
pagina1.html
<html>
<head>
</ head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres.
Una cadena es una secuencia de caracteres.
Se coloca entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud
variable en la cual
determinamos el mximo de caracteres. Puede
guardar hasta 255 caracteres.
Para almacenar cadenas de hasta 30 caracteres,
definimos un campo de tipo varchar(30).
</ p>
<h2>int</h2>
<p>
Se usa para guardar valores numricos enteros,
de -2000000000 a 2000000000
aproximadamente.<br> Definimos campos de
este tipo cuando queremos representar,
por ejemplo, cantidades.
</ p>
</ body>
</ html>
Cada ttulo aparece siempre en una lnea distinta, no
importa si lo tipeamos seguido en el archivo, es decir
el resultado ser igual si hacemos:
<h1>Tipos de datos en MySQL</h1>

<h2>varchar</h2>
o esto:
<h1>Tipos de datos en

MySQL</h1><h2>varchar</h2>
El navegador dispone cada ttulo en una lnea nueva.
Recordemos que el HTML no tiene la responsabilidad
de indicar el tamao de las fuentes. El navegador
definir el tamao de fuente segn el nivel de ttulo
que indiquemos. La de tamao ms grande es la de
nivel 1 <h1>.
<h1> viene de heading

heading significa ttulo.

6 - Enfasis (<em> <strong>)

Enfatizar algo significa realzar la importancia de una


cosa, por ejemplo una palabra o conjunto de palabras.
As como tenemos seis niveles de ttulos para enfatizar
un bloque contamos con dos elementos que son (<em>
<strong>)
El elemento de mayor fuerza de nfasis es strong y le
sigue em
Veamos un ejemplo del empleo de estos dos elementos
HTML:
<html>
<head>
</ head>
<body>
p><strong>Tpos de datos</strong> en
<

MySQL</p>
p><em>TEXTO</em>: Para almacenar texto
<

usamos cadenas de caracteres.


Las cadenas se colocan entre comillas simples.
Podemos almacenar dgitos
con los que no se realizan operaciones
matemticas, por ejemplo, cdigos
de identificacin, nmeros de documentos,
nmeros telefnicos.
Tenemos los siguientes tipos: varchar, char y
text.</p>
<p><em>NUMEROS</em>: Existe variedad de
tipos numricos
para representar enteros, negativos, decimales.
Para almacenar valores enteros,
por ejemplo, en campos que hacen referencia a
cantidades, precios, etc., usamos
el tipo integer. Para almacenar valores con
decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar
fechas y horas dispone
de varios tipos: date (fecha), datetime (fecha y
hora), time (hora), year (ao)
y timestamp.</p>
</ body>
</ html>
Podemos ver que la sintaxis para el elemento strong
es:
<strong>Tpos de datos</strong>

La mayora de los navegadores muestran el texto


enfatizado con strong con un texto en negrita y para el
elemento em utilizan letra itlica (de todos modos
esto no es obligatorio, pero seguramente mostrarn los
textos enfatizados).
Otra cosa importante que podemos hacer notar es que
estos elementos HTML no producen un salto de lnea
como los de ttulo (h1,h2 etc.)
Para recordar el nombre de estos elementos HTML:
<em> viene de empathize que significa

nfasis.
<strong> viene de strong que significa
fuerte.

7 - Hipervnculo a otra pgina del mismo sitio <a>

El elemento ms importante que tiene una pgina de


internet es el hipervnculo, estos nos permiten cargar
otra pgina en el navegador. Esto es lo que hace
diferente la pgina de un libro con la pgina de un
sitio en internet. Normalmente un libro lo recorremos
en forma secuencial, pero un sitio de internet
podemos disponer estos enlaces entre un conjunto de
pginas y luego tener distintas alternativas de
recorrido.
Normalmente un navegador al encontrar esta marca
muestra un texto subrayado, y al hacer clic con el
mouse sobre ste el navegador carga la pgina
indicada por dicho hipervnculo.
Primero veremos cual es la sintaxis para disponer un
hipervnculo a una pgina que se encuentra en el
mismo sitio (es decir otra pgina que hemos
desarrollado nosotros).
La marca de hipervnculo a otra pgina del mismo sitio
tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>

Como vemos, se trata de otro elemento HTML que


tiene comienzo de marca y fin de marca. Lo que se
encuentra entre el comienzo de marca y el fin de la
marca es el texto que aparece en la pgina
(normalmente subrayado).
Lo nuevo que aparece en este elemento es el concepto
de una propiedad. Una propiedad se incorpora en el
comienzo de una marca y tiene un nombre y un valor.
El valor de la propiedad debe ir entre comillas dobles.
La propiedad href del elemento "a" hace referencia a
la pgina que debe mostrar el navegador si el visitante
hace clic sobre el hipervnculo.
Implementemos dos pginas que contengan
hipervnculos entre si, los nombres de las pginas
HTML sern: pagina1.html y pagina2.html
pagina1.html
<html>
<head>
</ head>
<body>
<h1>Pgina principal.</h1>
<a href="pagina2.html">Noticias</a>
</ body>
</ html>
pagina2.html
<html>
<head>
</ head>
<body>
<h1>Noticias.</h1>
<a href="pagina1.html">Salir.</a>
</body>
</html>
Como podemos observar lo nuevo en la pagina1.html
es el hipervnculo a la pagina2.html:
<a href="pagina2.html">Noticias</a>

Toda propiedad toma el valor que se encuentra


seguidamente del caracter =
El valor de la propiedad href en este caso es
pagina2.html (es otro archivo HTML que debe
encontrarse en nuestro sitio y en el mismo directorio).
El segundo archivo pagina2.html tiene un hipervnculo
a la primer pgina:
<a href="pagina1.html">Salir.</a>

Para recordar el nombre de esta marca HTML:


<a> viene de anchor que significa ancla.

8- Hipervnculo a otro sitio de internet <a>

La sintaxis para disponer un hipervnculo a otro sitio de


internet es:
<a href="http://www.google.com">Buscador
Google</a>
Ahora la propiedad href la inicializamos con el nombre
del dominio del otro sitio.
Algo importante que hay que anteceder al nombre del
dominio es el tipo de protocolo a utilizar. Cuando se
trata de una pgina de internet, el protocolo es el
http.
Resumiendo a la propiedad href la inicializamos con el
nombre del protocolo (http) seguida de dos puntos (:)
y dos barras (//) luego la cadena (www.) y finalmente
el nombre de dominio del sitio a enlazar.
La siguiente pgina muestra un hipervnculo al sitio
principal del buscador Google:
<html>
<head>
</ head>
<body>
a href="http://www.google.com">Buscador
<

Google</a>
</ body>
</ html>
Si analizamos un poco y pensamos que esta marca nos
permite pedir una pgina a un servidor para que la
cargue en el navegador: Qu pgina nos retorna del
dominio www.google.com ?
La respuesta es que todo servidor cuando recibe una
peticin de una pgina sin indicar su nombre (es decir
slo est el nombre de dominio) selecciona y enva una
pgina que tiene configurada el servidor como pgina
por defecto (generalmente esa pgina es la principal
del sitio y a partir de la cual podemos navegar
mediante hipervnculos a otras pginas que se
encuentran en dicho dominio).
Podemos enlazar a una pgina determinada de otro
sitio. Veamos un ejemplo, si queremos disponer un
enlace (hipervnculo) a la pagina about.html de google
la sintaxis ser la siguiente:
<a

href="http://www.google.com/intl/en/about
.html">Acerca de Google</a>
Debemos conocer exactamente el nombre de la pgina
(en este caso about.html) y tambin si la pgina no se
encuentra en el directorio raiz debemos saber
exactamente el camino de directorios (en este caso
/intl/en/)
9 - Imgenes dentro de una pgina <img>
Para insertar una imagen dentro de una pgina
debemos utilizar el elemento HTML <img>, la misma no
tiene una marca de finalizacin (similar a la marca
<br>).
Generalmente, la imagen se encuentra en el mismo
servidor donde se almacenan nuestras pginas HTML.
Los formatos clsicos son los archivos con extensiones
gif, jpg y png.
La sintaxis de esta marca es:
<img src="foto1.jpg" alt="Pintura

geomtrica">
Como mnimo, debemos inicializar las propiedades src
y alt de la marca HTML img.
En la propiedad src indicamos el nombre del archivo
que contiene la imagen (en un servidor Linux es
sensible a maysculas y minsculas por lo que
recomiendo que siempre utilicen minsculas para los
nombres de archivos).
Como la imagen se encuentra en el mismo directorio
donde se almacena la pgina HTML, con indicar el
nombre de archivo basta (no es necesario indicar
ninguna ruta de carpetas).
Otra propiedad obligatoria es alt, donde disponemos
un texto que vern los usuarios que visiten el sitio con
un navegador que slo permite texto (o con un
navegador que tenga desactivada la opcin de
descarga de imgenes). El texto debe describir el
contenido de la imagen.
Confeccionemos una pgina que muestre una imagen
llamada foto1.jpg (La imagen se encuentra
almacenada en el servidor en la misma carpeta donde
se localiza esta pgina)
<html>
<head>
</ head>
<body>
<img src="foto1.jpg" alt="Pintura geomtrica">
</ body>
</ html>
Si la imagen se encuentra en una subcarpeta llamada
imagenes, luego la sintaxis para recuperarla ser:
<img src="imagenes/foto1.jpg" alt="Pintura

geomtrica">
Es decir, antecedemos al nombre de la imagen el
nombre de la carpeta y la barra /
Si la imagen se encuentra en una carpeta padre de
donde se encuentra la pgina HTML luego la sintaxis
ser:
<img src="../foto1.jpg" alt="Pintura
geomtrica">
Es decir, le antecedemos .. y la barra / al nombre de la
imagen
Si queremos subir dos carpetas luego escribimos:
<img src="../../foto1.jpg" alt="Pintura

geomtrica">
Por ltimo, si queremos acceder a una imagen que se
encuentra en una carpeta llamada imagenes pero que
est al mismo nivel:
<img src="../imagenes/foto1.jpg"

alt="Pintura geomtrica">
Primero le indicamos que subimos al directorio padre
mediante los dos puntos .. y seguidamente indicamos
el nombre de la carpeta y la imagen a mostrar.
<img> viene de image

src viene de source


alt viene de alternative
10 - Hipervnculo mediante una imagen <a> y <img>
Como ya conocemos los hipervnculos y como insertar
imgenes en nuestra pgina, ahora podemos
implementar un hipervnculo pero en vez de mostrar
un texto mostraremos una imagen.
La solucin es simple y consiste en disponer la marca
<img> encerrada entre la marca de comienzo y fin del
enlace(<a>)
Confeccionemos una pgina que muestre dos imagenes
(foto1.jpg y foto2.jpg) como hipervnculos. Al ser
presionados llamar a otra pgina.
Las imgenes se encuentran en una carpeta llamada
imagenes que depende directamente de la raiz del
sitio:
<html>
<head>
</ head>
<body>
<h2>Presione alguna de las imagenes para
conocer ms sobre esa obra.</h2>
<a href="pagina2.html"><img
src="/imagenes/foto1.jpg"
alt="Pintura Geomtrica"></a>
<br>
<a href="pagina2.html"><img
src="/imagenes/foto2.jpg"
alt="Pintura Geomtrica"></a>
</ body>
</ html>
Como podemos observar insertamos la marca HTML img
en el lugar donde disponamos el texto del
hipervnculo. Eso es todo.
Lo que debe quedar bien en claro es que las imgenes
se encuentran en un directorio llamado imagenes en la
raiz del sitio (luego para indicar la referencia al
archivo lo hacemos antecediendo la barra invertida /
con lo que hacemos referencia a que partimos desde la
raiz del sitio) en una carpeta llamada imagenes
(/imagenes/foto1.jpg)
Es bueno practicar con esto ya que cuando
implementemos sitios muy grandes seguramente
agruparemos cada mdulo 11 - Apertura de un
hipervnculo en otra instancia del navegador. El
elemento "a" tiene una propiedad target que nos
permite indicar que la referencia del recurso sea
abierto en otra pgina.
Esta propiedad se llama target y debemos asignarle el
valor "_blank" para indicar que el recurso sea abierto
en otra ventana.
Confeccionemos una pgina que contenga dos
hipervnculos, el primero abra el sitio en el mismo
navegador y el segundo en otra instancia del
navegador:
<html>
<head>
</ head>
<body>
<h1>Apertura de enlaces en el mismo navegador
y en otra instancia del navegador</h1>
<p>
<a href="http://www.lanacion.com.ar">Peridico
La Nacin</a>
<br>
<a href="http://www.clarin.com.ar"
target="_blank">Peridico
Clarin</a>
</ p>
</ body>
</ html>
Podemos ver la diferencia entre el primer
hipervnculo:
<a

href="http://www.lanacion.com.ar">Peridi
co La Nacin</a>
y el segundo hipervnculo que indica que el sitio sea
abierto en otra ventana del navegador:
<a href="http://www.clarin.com.ar"

target="_blank">Peridico

12 - Hipervnculo a un cliente de correo <a>

El elemento "a" permite direccionar un hipervnculo a


un programa de envo de correos que tengamos
configurado en nuestra computadora.
Confeccionaremos una pgina que disponga un
hipervnculo a un cliente de correo de mail:
<html>
<head>
</ head>
<body>
<h1>Reclamos</h1>
<a
href="mailto:diegoestevanes@gmail.com">Envia
r mail.</a>
</ body>
</ html>
Cuando se presiona el enlace se abre el programa de
envo de correos que tiene configurado el equipo y
dispone como receptor del mensaje la direccin que
configuramos en el propio enlace seguido de la palabra
mailto:
La sintaxis para disponer un ttulo por defecto y un
cuerpo de mensaje es:
<a href="mailto:diegoestevanes@gmail.com?
subject=ttulo del mensaje&body=cuerpo del
mensaje">Enviar mail.</a>
Es decir luego de especificar el destinatario del mail
disponemos un caracter de interrogacin '?' seguido la
palabra subject, un igual y el ttulo por defecto que
debe aparecer en la ventana de envo de mail. Por
ltimo separamos con un ampersand '&' la
inicializacin de subject y el body (es decir el cuerpo
del mensaje)
Podemos inclusive aadir el envo de mail con copia y
con copia oculta a otras direcciones:
<html>
<head>
</ head>
<body>
<h1>Reclamos</h1>
<a href="mailto:diego1@gmail.com?
subject=aqu el
ttulo&cc=diego2@gmail.com&bcc=diego3@gmai
l.com&body=Este
es el cuerpo">Enviar mail.</a>
</ body>
</ html>
En este ejemplo enviamos un mail a
diego1@gmail.com, con copia a diego2@gmail.com y
con copia oculta
13 - Anclas llamadas desde la misma pgina.
Otra posibilidad que nos brinda el HTML es disponer
una referencia dentro de la pgina para poder
posteriormente disponer un hipervnculo a dicha
marca.
Es una prctica comn cuanda queremos desplazarnos
dentro de una pgina de gran tamao. Se disponen
hipervnculos a diferentes anclas.
La sintaxis para definir un ancla es:
<a name="nombreancla"></a>

No debemos confundir un ancla con un hipervnculo,


ms alla que se utiliza el mismo elemento a. Para un
ancla inicializamos la propiedad name con el nombre
del ancla.
Un ancla se la define en una parte de la pgina que
queremos que el operador llegue a partir de un
hipervnculo.
Ahora la sintaxis para ir a un ancla desde un
hipervnculo es la siguiente:
<a

href="#nombreancla">Introduccin</a><br>
Vemos que en la propiedad href indicamos el nombre
del ancla.
Haremos un ejemplo, donde dispondremos una lista de
hipervnculos que llaman a una serie de anclas
dispuestas en la misma pgina:
<html>
<head>
</ head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introduccin</a><br>
a href="#mostrarbasedatos">show
<

databases</a><br>
<a href="#creaciontabla">Creacin de una tabla
y mostrar
sus campos</a><br>
a href="#cargarregistros">Carga de registros a
<

una tabla y su
recuperacin</a><br>
<a name="introduccion"></a>
<h2>Introduccin</h2>
<p>
SQL, Structure Query Language (Lenguaje de
Consulta Estructurado) es un lenguaje
de programacion para trabajar con base de datos
relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un
servidor de base de datos.<br>
MySQL permite crear base de datos y tablas,
insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas
operaciones, etc., resumiendo: administrar
bases de datos.<br>
Ingresando instrucciones en la linea de
comandos o embebidas en un lenguaje como
PHP nos comunicamos con el servidor. Cada
sentencia debe acabar con punto y coma
(;).<br>
La sensibilidad a maysculas y minsculas, es
decir, si hace diferencia
entre ellas, depende del sistema operativo,
Windows no es sensible, pero Linux
si. Por ejemplo Windows interpreta igualmente
las siguientes sentencias:<br>
create database administracion;<br>
Create DataBase administracion;<br>
Pero Linux interpretar como un error la
segunda.<br>
Se recomienda usar siempre minsculas. Es ms
el sitio mysqlya.com.ar
est instalado sobre un servidor Linux por lo que
todos los ejercicios
debern respetarse maysculas y minsculas.
</ p>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de
tablas.<br>
Una base de datos tiene un nombre con el cual
accederemos a ella.<br>
Vamos a trabajar en una base de datos ya
creada en el sitio, llamada "administracion".<br>
Para que el servidor nos muestre las bases de
datos existentes, se lo solicitamos
enviando la instruccin:<br>
show databases;<br>
Nos mostrar los nombres de las bases de datos,
debe aparecer en este sitio
"administracion".<br>
</ p>
<a name="creaciontabla"></a>
<h2>Creacin de una tabla y mostrar sus
campos</h2>
<p>
Una base de datos almacena sus datos en
tablas.<br>
Una tabla es una estructura de datos que
organiza los datos en columnas y filas;
cada columna es un campo (o atributo) y cada
fila, un registro. La interseccin
de una columna con una fila, contiene un dato
especfico, un solo valor.<br>
Cada registro contiene un dato por cada columna
de la tabla.<br>
Cada campo (columna) debe tener un nombre. El
nombre del campo hace referencia
a la informacin que almacenar.<br>
Cada campo (columna) tambin debe definir el
tipo de dato que almacenar.<br>
</ p>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su
recuperacin</h2>
<p>
Usamos "insert into". Especificamos los nombres
de los campos entre
parntesis y separados por comas y luego los
valores para cada campo, tambin
entre parntesis y separados por comas.<br>
Es importante ingresar los valores en el mismo
orden en que se nombran los campos,
si ingresamos los datos en otro orden, no
aparece un mensaje de error y los datos
se guardan de modo incorrecto.<br>
Note que los datos ingresados, como
corresponden a campos de cadenas de
caracteres
se colocan entre comillas simples. Las comillas
simples son OBLIGATORIAS.
</ p>
</ body>
</ html>
Cada hipervnculo hace referencia a un ancla que se
encuentra en la misma pgina:
<a

href="#introduccion">Introduccin</a><br>
<a href="#mostrarbasedatos">show
databases</a><br>
<a href="#creaciontabla">Creacin de una
tabla y mostrar
sus campos</a><br>
<a href="#cargarregistros">Carga de
registros a una tabla y su
recuperacin</a><br>
Luego la definicin de las anclas son:
<a name="introduccion"></a>

<h2>Introduccin</h2>
<p>
Como podemos observar la defincin del ancla se hace
inmediatamente anterior al ttulo donde queremos que
el navegador se site. 14 - Anclas llamadas desde otra
pgina
Tambin es perfectamente vlido la llamada a anclas
desde otra pgina (no importa si se encuentra en el
mismo sitio o en otro)
Debemos conocer el nombre de la pgina a llamar y el
nombre del ancla, luego la sintaxis para la llamada al
ancla es:
<a

href="pagina2.html#introduccion">Introduc
cin</a>
Es decir luego del nombre de la pgina que llamamos
disponemos el caracter # y seguidamente el nombre
del ancla.
Confeccionemos dos pgina y que la primera llame a
diferentes anclas definidas en la segunda:
pagina1.html
<html>
<head>
</ head>
<body>
<h1>Tutorial de MySQL</h1>
a
<

href="pagina2.html#introduccion">Introduccin
</a><br>
a href="pagina2.html#mostrarbasedatos">show
<

databases</a><br>
a href="pagina2.html#creaciontabla">Creacin
<

de una tabla
y mostrar sus campos</a><br>
a href="pagina2.html#cargarregistros">Carga
<

de registros a una
tabla y su recuperacin</a><br>
</ body>
</ html>
pagina2.html
<html>
<head>
</ head>
<body>
<a name="introduccion"></a>
<h2>Introduccin</h2>
<p>
SQL, Structure Query Language (Lenguaje de
Consulta Estructurado) es un lenguaje
de programacion para trabajar con base de datos
relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un
servidor de base de datos.<br>
MySQL permite crear base de datos y tablas,
insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas
operaciones, etc., resumiendo: administrar
bases de datos.<br>
Ingresando instrucciones en la linea de
comandos o embebidas en un lenguaje como
PHP nos comunicamos con el servidor. Cada
sentencia debe acabar con punto y coma
(;).<br>
La sensibilidad a maysculas y minsculas, es
decir, si hace diferencia
entre ellas, depende del sistema operativo,
Windows no es sensible, pero Linux
si. Por ejemplo Windows interpreta igualmente
las siguientes sentencias:<br>
create database administracion;<br>
Create DataBase administracion;<br>
Pero Linux interpretar como un error la
segunda.<br>
Se recomienda usar siempre minsculas. Es ms
el sitio mysqlya.com.ar
est instalado sobre un servidor Linux por lo que
todos los ejercicios
debern respetarse maysculas y minsculas.
</ p>
<a href="pagina1.html">Retornar</a><br>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de
tablas.<br>
Una base de datos tiene un nombre con el cual
accederemos a ella.<br>
Vamos a trabajar en una base de datos ya
creada en el sitio, llamada "administracion".<br>
Para que el servidor nos muestre las bases de
datos existentes, se lo solicitamos
enviando la instruccin:<br>
show databases;<br>
Nos mostrar los nombres de las bases de datos,
debe aparecer en este sitio
"administracion".<br>
</ p>
<a href="pagina1.html">Retornar</a><br>
<a name="creaciontabla"></a>
<h2>Creacin de una tabla y mostrar sus
campos</h2>
<p>
Una base de datos almacena sus datos en
tablas.<br>
Una tabla es una estructura de datos que
organiza los datos en columnas y filas;
cada columna es un campo (o atributo) y cada
fila, un registro. La interseccin
de una columna con una fila, contiene un dato
especfico, un solo valor.<br>
Cada registro contiene un dato por cada columna
de la tabla.<br>
Cada campo (columna) debe tener un nombre. El
nombre del campo hace referencia
a la informacin que almacenar.<br>
Cada campo (columna) tambin debe definir el
tipo de dato que almacenar.<br>
</ p>
<a href="pagina1.html">Retornar</a><br>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su
recuperacin</h2>
<p>
Usamos "insert into". Especificamos los nombres
de los campos entre
parntesis y separados por comas y luego los
valores para cada campo, tambin
entre parntesis y separados por comas.<br>
Es importante ingresar los valores en el mismo
orden en que se nombran los campos,
si ingresamos los datos en otro orden, no
aparece un mensaje de error y los datos
se guardan de modo incorrecto.<br>
Note que los datos ingresados, como
corresponden a campos de cadenas de
caracteres
se colocan entre comillas simples. Las comillas
simples son OBLIGATORIAS.
</ p>
<a href="pagina1.html">Retornar</a><br>
</ body>

15 - Lista ordenada (<ol>)


Este elemento HTML es til cuando debemos numerar
una serie de objetos.
Veamos con un ejemplo una lista ordenada para
conocer su sintaxis. Mostraremos el orden de llegada
de tres corredores:
<html>
<head>
</ head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ ol>
</ body>
</ html>
La marca <ol> y su correspondiente marca de cerrado
es </ol>
En su interior cada uno de los items se los dispone con
el elemento li, que tambin tiene la marca de
comienzo <li> y la marca de fin de item </li>
Luego se encarga el navegador de numerar cada uno
de los items contenidos en la lista, tengamos en
cuenta que se numeran porque se trata de una lista
ordenada.
Para recordar el nombre de estos elementos HTML:
<ol> viene de ordened list

<li> viene de list item

16 - Lista no ordenada (<ul>)


Una lista no ordenada como su nombre lo indica no
utiliza un nmero delante de cada items sino un
pequeo smbolo grfico.
La forma de implementar este tipo de listas es idntico
a las listas ordenadas.
Veamos un ejemplo donde implementamos una lista no
ordenada:
<html>
<head>
</ head>
<body>
<h2>Lenguajes de programacin.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ ul>
</ body>
</ html>
Para recordar los nombres de estas marcas HTML:
<ul> viene de unordered list

<li> viene de list item


Familiarizarse con el Interfaz del Panel PLesk.
Cuando Accedes al Panel de control Plesk, este se puede abrir en cualquier opcin de
vista de escritorio estndar , una vista de escritoria simplificada, o una combinacin de
ambos.
La vista estndard es la presentacin habitual del panel de control dividida en 2 reas
principales:
el panel de navegacin a la izquierda y la pantalla principal donde se desarrollan las
operaciones a la derecha.
Interfaz estndar de cliente
Interfaz estndar de cliente

La vista del escritorio, puede mostrar estadsticas del sitio y accesos directos para las
operaciones mas frecuentes.
Cualquier cosa que necesite, ahora puede ser mas accesible desde una nica pantalla.

Desde el principio 12 objetos en la vista de escritorio. La vista de escritorio


originariamente muestra 3 secciones:

Herramientas: Este grupo muestra accesos directos a las operaciones que usted
puede ejecutar desde el panel de control. Usted puede libremente aadir y eliminar
estos accesos directos
Estadsticas: Este muestra el nmero de dominios creados en su cuenta, espacio
en disco y uso de trfico mensual, y numero de buzones de correo del dominio
alojado.
Favoritos: Este grupo muestra cuatro tipos de accesos directos agrupados por
tipo y ubicado en la seccin correspondiente. La seccin Dominio muestra accesos
directos a tus dominios favoritos. La pestaa Nombres de Correo muestra un
acceso directo a las cuentas de correo favoritas. La pestaa de acceso rpido
muestra el resto de accesos directos que no tienen relacin con el dominio y
cuentas de correo de usuarios. La pestaa de Recientes muestra las ltimas diez
pantallas del panel a las que se ha accedido. El grupo de favoritos tambin
proporciona herrammientas de bsqueda para encontrar dominios y cuentas de
correo. Para utilizar las herramientas de bsqueda, marca en los criterios de
bsqueda (Estos pueden ser cualquier combinacin de smbolos, buscar en casos
de insensibilidad) y pulse en Buscar.
Para personalizar tu panel de control en la visin de escritorio, dirigete a las opciones de
servidor en el lateral izquireda y selecciona el botn de personalizar de la seccin Panel
de control.
Utilizando assistentes
Cuando se trabaja con PLesk en la visin de escritorio, podrs completar las tareas que
necesites mediante los assistentes. Cada assistenete es una secuencia de pantallas. Para
completar una tarea utilizando un assistente, sigue las instrucciones mostradas en la
pantallas del assistente.

Objetos en la vista Estandard


El panel de navegacin se encuentra a la izquierda. Este proporciona acceso a las
funciones de administracin:

Inicio: Aqu es donde puede modificar configuracines relacionadas con su cuenta,


administrar sitios web y servicios de correo.
Sessiones: Cuando el propietario de un sitio o cuenta de correo accede al panel
de control, o se conecta al servidor mediante protocolo FTP, se establecen
sessiones que usted podr monitorizar y finalizar.
Help Desk (Soportes): Este es el sistema de soporte integrado en su Panel de
control. Si su proveedor lo utiliza, entonces podr utilizar para enviar una solicitud
de assistencia a los tecnicos de soporte.
Ayuda: Proporciona textos sensibles de ayuda segn a la seccin sobre la que
estemos con el ratn.
Salir: Cuando termine de trabajar con el Panel de control Plesk, pulse este icono
para cerrar la sessin.
Como acceder al Panel Plesk para contolar un alojamiento y como recuperar la
contraseo de acceso a Plesk si la has olvidado.

Publicidad

Acceso y Loggin en un Panel Plesk:


1. Abre tu Navegador , y en la barra de Direccin escribre la direccin URL donde est
ubicado tu Panel de Control Plesk. Por ejemplo, https://tu-dominio.com:8443,
donde tu-dominio es el dombre del dominio de tu alojamiento web.
2. Pulsa INTRO ENTER. Se te abrir la pantalla de login de Plesk.
3. Escribe el Nombre de usuario y contrasea que te proporcion tu proveedor, en los
campos de Usuario y de Contrasea respectivos.
4. Si es la primera vez que te validas , selecciona el idioma que desees para el panel
de control, desde el desplegable en el apartado idioma. Si ya habas especificado el
idioma del interface y lo habas guardado en las preferencias del interface, deja los
valores de usuario especificados por defecto.
5. Haga Click en Iniciar Sesin.
Nota para revendedores de hosting: Los clientes a quines se les facilit el acceso al
panel de control, para administrar su propio alojamiento web, necesitaran
especificar su nombre de dominio en el apartado de Login.

Si ha olvidado su contrasea
1. Para recuperar su contrasea en caso de prdida:Abre tu Navegador
, y en la barra de Direccin escribre la direccin URL donde est
ubicado tu Panel de Control Plesk. Por ejemplo, https://tu-
dominio.com:8443.
2. Pulsar INTRO.
La pantalla de validacin de Plesk se abrir.
3. Haga Click en el enlace Ha olvidado su contrasea?.
4. Escriba su nombre de usuario en el campo "Login", y escriba la
direccin de correo registrada en el sistema en el campo " E-Mail"
5. Haga Click en "ACEPTAR".
Su contrasea se enciar a su direccin de correo electrnico.

Lecturas: 1790

Coincidencias de la Base de Datos


Familiarizarse con el Panel Plesk Fecha: 25/05/2007
Cuando Accedes al Panel de control Plesk, este se puede abrir en
cualquier opcin de vista de escritorio estndar , una vista de
escritoria simplificada, o una combinacin de ambos.

Almacenar contraseas en MySQL Fecha: 23/04/2007


Existen ciertas normas que nos prohiben almacenar contraseas con
texto plano y adems esta nunca ha sido una buena opcin, si
queremos que nuestros usuarios se sientan seguros utilizando
nuestros sistemas, debemos proporcionarles un nivel superior.

Recuperar privilegios de Administrador en Fecha:


Windows Vista 06/03/2008
Si has eliminado por accidente los privilegios de Administrador en tu
Windows Vista, te enseamos como recuperarlos.

Pishing - Obtienen datos de acceso de clientes


Fecha: 14/03/2008
de Caja Madrid
Correo electrnico, tericamente remitido por Caja Madrid, solicitando
entrar en su pgina para proporcionar la contrasea de verificacin de
indentidad. Adems informan de la urgencia, amenazando dejarnos
sin servicios en 48 Horas.

Publicar un Sitio Web en Plesk Fecha: 21/06/2007


Publicar su sitio implica cargar las pginas web, los scripts y los
archivos grficos que formarn su sitio en el espacio web. El Panel
Plesk proporciona una gestin de archivos propia ademas de FTP,
FrontPage,...

Comentarios de los Usuarios (0)

Este artculo ya ha superado la fecha mxima para escribir


comentarios, 1 ao.
Publicar un Sitio Web en Plesk
Ests en Plesk Fecha: 21/06/2007

Publicar su sitio implica cargar las pginas web, los scripts y los
archivos grficos que formarn su sitio en el espacio web. El Panel
Plesk proporciona una gestin de archivos propia ademas de FTP,
FrontPage,...

Publicidad
Publicando un Sitio
Publicar su sitio implica cargar las pginas web, los scripts y los
archivos grficos que formarn su sitio en el espacio web de una de
las siguientes maneras:
A travs de conexin FTP
A travs del Administrador de Archivos Plesk
A travs de Microsoft FrontPage (slo para aquellos usuarios con
sistemas operativos Microsoft Windows)
FTP es la manera ms fcil y habitual de cargar archivos.
Cargando Sitios a travs de FTP
Conctese al servidor con un programa de cliente FTP, usando las
credenciales de la cuenta FTP establecidas durante la configuracin de
la cuenta de alojamiento o obtenida a travs de su proveedor.
Si est detro de un corta fuegos active el modo pasivo.
Cargue aquellos archivos y directorios que deber ser accesibles a
travs del protocolo HTTP al directorio httpdocs y los
archivos/directorios a transferir con el protocolo seguro SSL al
directorio httpsdocs.
Ubique los scripts CGI en el directorio cgi-bin.
Cierre la sesin FTP.
Cargando Sitios a travs del Administrador de Archivos de
Plesk
Acceda al panel de control de Plesk.
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre del dominio deseado de la lista.
Haga clic en Administrador de Archivos dentro del grupo
Alojamiento .
Cree y cargue archivos y directorios.
Cargue aquellos archivos y directorios que debern ser accesibles a
travs del protocolo HTTP al directorio httpdocs y los
archivos/directorios a transferir con el protocolo seguro SSL al
directorio httpsdocs. Ubique los scripts CGI en el directorio cgi-bin.
Para crear un nuevo directorio con su ubicacin actual, haga clic en
Aadir Nuevo Directorio dentro del grupo Herramientas , indique
el nombre del directorio y haga clic en OK.
Para crear nuevos archivos en el directorio, haga clic en Aadir
Nuevo Archivo dentro del grupo Herramientas , en la seccin de
Creacin de Archivos indique el nombre del archivo, seleccione la
casilla Usar plantilla html si desea que el administrador de archivos
introduzca etiquetas blncas de html en el nuevo archivo y haga clic
en OK. Se abrir una pgina que le dar acceso al contenido o la
fuente html del nuevo archivo. Haga clic en OK.
Para cargar un archivo desde la mquina local, haga clic en Aadir
Nuevo Archivo dentro del grupo Herramientas , indique la ruta a
su ubicacin la casilla Fuente del archivo (o use Examinar para
localizarlo) y haga clic en OK.
Para ver o editar un archivo existente, haga clic en su nombre.
Cuando cargue contenido web a travs del Administrador de Archivos
o FTP, su panel de control establecer unas autorizaciones de acceso
necesarias para archivos y directorios de forma automtica. Para
cambiar los permisos de los archivos o directorios haga clic en . Si
desea ms informacin acerca de los permisos de sistema vea la
seccin "Estableciendo Permisos de Acceso a Carpetas y Archivos"
Estableciendo Permisos de Acceso a Carpetas y Archivos .
Para realizar una vista previa de una pgina Web haga clic en .
Para renombrar un archivo o directorio, haga clic en . Introduzca un
nuevo nombre y haga clic en OK.
Para copiar o mover un archivo o directorio a otra ubicacin marque la
casilla del archivo o directorio en cuestin haga clic en
Copiar/Mover. Indique el destino del archivo o directorio a copiar o
renombrar, haga clic en Copiar para copiarlo o en Mover para
moverlo.
Para actualizar la fecha de creacin el directorio o archivo haga clic en
Cambiar sello del tiempo. Se actualizar el sello de tiempo en la
hora local.
Para calcular el tamao de los archivos seleccionados marque las
casillas correspondientes a los archivos cuyo tamao desea ver y haga
clic en Tamao.
Para eliminar un archivo o directorio marque la casilla correspondiente
y haga clic en Eliminar Seleccionado. Confirme la eliminacin haga
clic en OK.
Publicando con Microsoft FrontPage
Microsoft FrontPage trata dos tipos de sitios Web: basados en disco y
basados en servidor. Un sitio basado en disco es un sitio Web
FrontPage que usted crea en su disco duro local y ms tarde lo
publica en un servidor. Un sitio basado en servidor es un sitio que
usted crea y con el que trabaja directamente en un servidor Web, sin
los pasos extra de publicacin Esta seccin le ofrece las instrucciones
necesarias para publicar sitios web basados en disco.
Puede publicar sitios web basados en disco a travs de FTP o bien
HTTP. Si su servidor ejecuta FrontPage Server Extensions, publicar
su sitio en una ubicacicin HTTP. Por ejemplo: http://tu-
dominio.com/MiSitioWeb. Si su servidor soporta FTP, lo publicar en
una ubicacin FTP. Por ejemplo: ftp://ftp.tu-dominio.com/MiCarpeta.
Una vez publicado, puede gestionar su sitio a travs de FrontPage
Server Extensions.
Para acceder al interfaz de gestin de FrontPage Server
Extensions:
Acceda a Plesk.
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre del dominio deseado de la lista.
Haga clic en Gestin FTP dentro del grupo Alojamiento .
En funcin de los ajustes de Soporte Microsoft FrontPage del
dominio, aparecer uno de los siguientes iconos al lado de Aadir
Nueva Subcuenta FrontPage:
Haga clic en FrontPage Webadmin para gestionar un sitio
que no est protegido por SSL.
Haga clic en FrontPage-SSL Webadmin para gestionar un
sitio con SSL activado.
Introduzca el nombre de usuario y contrasea del administrador
FrontPage y haga clic en OK.
Si desea ms informacin acerca de cmo usar las extensiones del
servidor FrontPage consulte la ayuda online (FrontPage Webadmin
> Ayuda) o visite el sitio web de Microsoft.
Publicando con Microsoft FrontPage a travs de FTP
Para publicar archivos a travs de FTP:
1. Abra FrontPage.
2. Abra un sitio web FrontPage: abra el men Archivo y seleccione el
elemento Abrir Sitio.
3. Vaya a vista de Sitio web remoto : haga clic en el pestaa Sitio Web
y luego en el botn Sitio Web Remoto situado en la parte inferior de la
ventana.
4. Configurar las Propiedades del Sitio Web Remoto:
o Haga clic en el botn Propiedades del Sitio Web Remoto
situado en la esquina superior derecha de la ventana.
o Seleccione FTP como servidor Web remoto.
o En la casilla Ubicacin de Sitio Web Remoto
introduzca el nombre de su servidor (por ejemplo,
ftp://ftp.tu-domanio.com)
o En la casilla Directorio FTP , introduzca el directorio
FTP en caso que su compaia de alojamiento le haya
proporcionado uno. Si no se lo han proporcionado deje la
casilla en blanco.
o Si su ordenador o red estn protegidos por un corta
fuegos marque la casilla Usar FTP Pasivo.
5. Haga clic en OK para conectar con el sitio remoto.
6. La vista remota del sitio web mostrarn los archivos de sus sitios
locales y remotos.
7. Haga clic en el botn Publicar Sitio Web situado en la esquina
inferior derecha de la ventana.
Publicando con Microsoft FrontPage a travs de HTTP
Para publicar archivos a travs de HTTP en un servidor que soporte
FrontPage mega bites Extensions:
1. Abra FrontPage.
2. Abra un sitio web FrontPage: abra el men Archivo y seleccione el
elemento Abrir Sitio.
3. Vaya a Vista de sitio web remoto : haga clic en la pestaa Web ,
y luego en el botn Sitio Web Remoto situado en la parte inferior de la
ventana.
4. Haga clic en el botn Propiedades del Sitio Web Remoto situado en
la esquina superior derecha de la ventana.
5. En la pestaa Sitio Web Remoto , debajo de Tipo de Servidor Web
Remoto haga clic en Servicios FrontPage o SharePoint
6. En la casilla Ubicacin del Sitio Web Remoto , introduzca la
direccin de Internet, incluyendo el protocolo, del sitio Web remoto
donde desea publicar los archivos y las carpetas por ejemplo,
http://www.tu-dominio.com o haga clic en Examinar para localizarlo.
7. Puede:
o Usar Secure Sockets Layer (SSL) para establecer un
canal de comunicaciones seguro para evitar la intercepcin
de informacin , haga clic en Se necesita Conexin
encriptada (SSL). Para usar conexiones SSL en su
servidor Web, este debe estar configurado con un
certificado de seguridad reconocido por una autoridad de
certificacin Si el servidor no soporta SSL no marque esta
casilla. Si no lo hace no podr publicar carpetas ni archivos
en el sitio Web Remoto.
o Para eliminar ciertos tipos de contenido de las pginas
Web mientras estas se estn publicando, vaya a la pestaa
Optimizar HTML y seleccione las opciones que se adapten a
sus necesidades.
o Para cambiar las opciones por defecto de publicacicin
vaya a la pestaa Publicando y seleccione las opciones que
desee.
8. Haga clic en OK para conectar con el sitio remoto. La Vista remota
del sitio web mostrarn los archivos de sus sitios locales y remotos.
9. Haga clic en el botn Publicar Sitio Web situado en la esquina
inferior derecha de la ventana.
Publicando Sitios con SiteBuilder
Para publicar un sitio web con SiteBuilder:

Acceda al panel de control de Plesk.


Haga clic en el nombre del dominio deseado de la lista.
Haga clic en Configurar y verifique que la casilla Publicar el
Sitio con SiteBuilder est seleccionada. Haga clic en OK para
volver a la pgina del dominio.
Haga clic en Asistente de SiteBuilder.
Una vez cargado SiteBuilder, siga las instrucciones de la
documentacin de SiteBuilder para publicar el sitio web. Puede
encontrar la documentacin de SiteBuilder en
http://www.swsoft.com/en/products/sitebuilder/win/docs/.
Para acceder al Asistente de SiteBuilder de un dominio, tambin
puede hacer clic en el botn situado en la lista de dominios.
Realizando una vista previa de un Sitio
Una vez ha publicado un sitio en el servidor, puede comprobar que
funciona correctamente en el entorno de alojamiento actual. Puede
realizar la vista previa del sitio desde su navegador web, incluso en el
caso que la informacin del nombre de dominio aadido se haya
propagado en el DNS. Tenga en cuenta que Macromedia Flash y los
scripts CGI no funcionarn mientras est realizando la vista previa.
Para ver una vista previa de un sitio:
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre del dominio deseado de la lista.
Haga clic en Vista previa del sitio dentro del grupo Alojamiento .

Lecturas: 2165
Coincidencias de la Base de Datos
Cmo publicar una pgina Web? Fecha: 29/02/2008
Muchos usuarios crean su primera Web, ya sea personal o empresarial
y no saben como publicarla en Internet, aqu te explicamos los pasos
necesarios.

Escribir en Internet y publicar artculos para


Fecha: 28/09/2007
otros sitios
Puede que alguna vez te has preguntado si es rentable o necesario
escribir artculos en Internet o hacerlo para terceros, aqu te damos
algunas respuestas

Familiarizarse con el Panel Plesk Fecha: 25/05/2007


Cuando Accedes al Panel de control Plesk, este se puede abrir en
cualquier opcin de vista de escritorio estndar , una vista de
escritoria simplificada, o una combinacin de ambos.

Gestin de Cuentas FTP en Plesk Fecha: 22/06/2007


Para subir o actualizar los archivos contenidos en su alojamiento web,
es muy importante contar con una cuenta de FTP. Plesk contempla
muchas opciones para administrar cuentas de FTP.

Gestin de cuentas FrontPage en Plesk Fecha: 22/06/2007


Para Publicar un sitio web mediante FrontPage, necesitamos tener
disponible de una cuenta de Microsoft FrontPage. Plesk simplifica la
gestin de subcuentas para FrontPage.

Comentarios de los Usuarios (2)

Aida Avila escribi: Fecha: 31/10/2007 0:43:55


ayuda
No he podido subir mi pagina web con la herramienta plesk, sube los
archivos de html pero no ejecuta los archivos swf me pueden
colaborar porfavor

Gracias

Neptuno escribi: Fecha: 02/11/2007 14:42:02

No ejecuta los archivos swf


No entiendo muy bien, lo que comentas de que no ejecuta los swf.
estos archivos los debes subir igual que los archivos html, siempre ten
en cuenta las carpetas y subcarpetas que creas, para que el enlace a
estos swf, se encuentren y se publiquen. Si lo compruebas, y las rutas
estan correctas, habla con tu empresa de alojamiento, ya que podra
ser que tu plan de alojamiento no soporte este tipo de archivos,
aunque es raro.Tambin ten en cuenta que los aloajamientos
estandar, suelen necesitar que tu pgina inicial parta de un archivo
con un nombre como index, incio, default y unas extensiones tambin
concreta html, htm, asp,...

Suerte!!

Este artculo ya ha superado la fecha mxima para escribir


comentarios, 1 ao.

Gestin de Cuentas FTP en Plesk


Ests en Plesk Fecha: 22/06/2007

Para subir o actualizar los archivos contenidos en su alojamiento web,


es muy importante contar con una cuenta de FTP. Plesk contempla
muchas opciones para administrar cuentas de FTP.
Publicidad
Cambiando la Contrasea FTP
Para cambiar la contrasea FTP de un propietario de sitio Web:
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre de dominio que desee.
Haga clic en Configurar dentro del grupo Alojamiento .
Indique la nueva contrasea
Haga clic en OK.
Creando Cuentas FTP Adicionales
Para crear una nueva subcuenta FTP:
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre del dominio que desee.
Haga clic en Gestin FTP.
En la pestaa Subcuentas FTP , haga clic en Aadir Nueva
Subcuenta FTP.
Indique el Nombre de la subcuenta FTP
Indique el Directorio de inicio haciendo clic en y seleccione el
directorio que desee.Alternativamente puede indicar la ruta en el
campo de entrada.
Introduzca la nueva contrasea en las casillas Nueva contrasea y
Confirmar contrasea.
Por defecto, la Cuota de disco duro est establecida en Ilimitada.
Para establecer el partrn requerido, deseleccione la casilla Ilimitado
e introduzca la cantidad de espacio de disco en mega bites en la
casilla Cuota de disco duro .
En caso que sea necesario, seleccione la casilla Leer permiso . Los
usuarios de las subcuentas FTP podrn ver el contenido del directorio
de inicio y descargar archivos del mismo.
En caso que sea necesario, seleccione la casilla Escribir permiso .
Los usuarios de las subcuentas FTP podrn crear, ver, renombrar y
eliminar directorios del directorio de inicio.
Si no otorga ningn permiso, la conexin a las subcuentas FTP se
realizar pero el directorio de inicio no se mostrar a los usuarios.
Haga clic en OK. Se aadir una nueva subcuenta FTP.
Cambiando los Ajustes de las Cuentas FTP Adicionales
Para cambiar las propiedades de una subcuenta FTP existente:
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre de dominio que desee.
Haga clic en Gestin FTP dentro del grupo Alojamiento .
En la pestaa Subcuentas FTP haga clic en el nombre de la subcuenta
deseada.
Indique los cambios y haga clic en OK.
Eliminando Cuentas FTP Adicionales
Para eliminar una subcuenta FTP:
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre de dominio que desee.
Haga clic en Gestin FTP dentro del grupo Alojamiento .
En la pestaa Subcuentas FTP seleccione la casilla correspondiente al
nombre de la subcuenta que desea eliminar y haga clic en Eliminar
Seleccionadas.
Confirme la eliminacin haga clic en OK. Se eliminar la subcuenta
FTP.

Gestin de Conexiones a Bases de


Datos Externas
Ests en Plesk Fecha: 25/06/2007

Acceda a los Datos desde Bases de Datos Externas, creando


Conexiones a Bases de Datos Externas, Instalando Nuevos
Controladores ODBC. Aprenda a modificar la configuracin de sus
conexiones y como eliminarlas en Plesk8.

Publicidad
Accediendo a los Datos desde Bases de Datos Externas
Si desea acceder a los datos desde un sistema externo de gestin de
base de datos, debe usar los controladores Open Database
Connectivity (ODBC). Por ejemplo, puede instalar un controlador
ODBC de Microsoft Access, creando una conexin una base de datos
Microsoft Access externa y hacer que sus aplicaciones web usen esta
base de datos para guardar sus datos.
Crear Conexiones a Bases de Datos Externas Instalando
Nuevos Controladores ODBC
Para que sus aplicaciones web puedan usar las bases de datos
externas para guardar los datos, debe crear conexiones a dichas
bases de datos instalando los controladores ODBC necesarios.
Para instalar un nuevo controlador ODBC, creando una
conexin a una base de datos externa:
1. En el panel de navegacin haga clic en el acceso directo de
Dominios.
2. Haga clic en el nombre del dominio deseado de la lista.
3. Haga clic en Ajustes ODBC dentro del grupo Servicios .
4. Haga clic en Aadir nuevo DNS de ODBC.
5. Indique el nombre de la conexin ODBC as como su descripcin
6. Seleccione el controlador en el campo controlador .
7. Haga clic en OK.
8. Seleccione las opciones deseadas en la pantalla de configuracin del
controlador. Generalmente debe indicar la ruta a la base de datos, las
credenciales del usuario y otras opciones de conexin que vara en
funcin del controlador seleccionado.
9. Haga clic en Analizar para verificar que la conexin funcione
correctamente con los ajustes actuales. Haga clic en Finalizar para
completar la creacin
Cambiar los Ajustes de las Conexiones ODBC Existentes
Para cambiar los ajustes de una conexin ODBC existente:
1. En el panel de navegacin haga clic en el acceso directo de
Dominios.
2. Haga clic en el nombre del dominio deseado de la lista.
3. Haga clic en Ajustes ODBC dentro del grupo Servicios .
4. Dentro de la lista, haga clic en el nombre de la conexin
5. Cambie los ajustes.
6. Haga clic en Analizar para verificar que la conexin funcione
correctamente con los ajustes actuales. Haga clic en Finalizar para
guardar los cambios.
Eliminar Conexiones a Bases de Datos Externas
Para eliminar una conexin ODBC redundante:
En el panel de navegacin haga clic en el acceso directo de
Dominios.
Haga clic en el nombre del dominio deseado de la lista.
Haga clic en Ajustes ODBC dentro del grupo Servicios .
Seleccione la casilla correspondiente a la conexin que desea eliminar.
Haga clic en Eliminar Seleccionadas, confirme la eliminacin haga
clic en OK

Las Rutas de los Archivos


Una de las causas ms frecuentes de errores para las personas que comienzan
a crear pginas web es la definicin erronea de las rutas de los archivos que
componen la web. Pero Qu son esas rutas?
Cada vez que insertamos en una de nuestras pginas un elemento externo a
ellas (una imagen, un sonido, un enlace...) tenemos que definir claramente
dnde se encuentra este, para que el navegador pueda encontrarlo e
insertarlo.
Existen dos modos de definir las rutas de los archivos, a saber:

1.- Rutas Absolutas.


Las rutas absolutas son el camino que ha de seguir el navegador para
encontrar el archivo, definidas desde el principio, como por ejemplo:
http://www.midominio.com/carpeta/archivo.ext
Esta es la ruta absoluta para un archivo llamado archivo.ext que est dentro
de la carpeta carpeta, estando sta directamente dentro de mi dominio.
Las rutas absolutas se suelen utilizar nada ms para enlazar a archivos que
estn fuera del dominio de nuestra pgina web. De hecho es la nica manera
de hacerlo. Como inconveniente... hay que escribir demasiado
(http:www.dominio.....).

2.- Rutas Relativas.


Las rutas relativas son el camino a seguir DESDE la pgina HASTA el archivo. En
este caso no hay que escribir http://www.midominio...., sino solo indicar los
pasos que hay que dar para llegar desde la pgina en cuestin, hasta el
archivo correspondiente. Vamos a verlo con un ejemplo.
Imaginad que mi dominio es http://www.comocreartuweb.com
Imaginad que dentro de l, tengo una carpeta llamada imagenes. Segn lo
anterior, la ruta absoluta de esa carpeta sera:
http://www.comocreartuweb.com/imagenes
Imaginad tambin que dentro de esa carpeta hay un archivo llamado mi-perro-
newton.gif. Del mismo modo que antes, la ruta absoluta de ese archivo es:
http://www.comocreartuweb.com/imagenes/mi-perro-newton.gif
Si tenemos una pgina directamente en la raiz del sitio, llamada index.html, su
ruta es:
http://www.comocreartuweb.com/index.html
Bien. Supongamos que queremos insertar la foto del perro en la pgina
index.html. La ruta absoluta de esa foto, es la misma siempre, sea cual sea la
pgina donde vayamos a insertarla, es decir:
http://www.comocreartuweb.com/imagenes/mi-perro-newton.gif

En cambio, la ruta relativa de la foto, con respecto a index.html sera esta


otra:
imagenes/mi-perro-newton.gif
Por qu? Porque para ir desde index.html hasta la foto, hemos de entrar
primero en la carpeta imagenes y dentro de sta, buscar la imagen mi-perro-
newton.gif.
Ahora imaginad que en este dominio, hay tambien una carpeta llamada
historias, y que dentro de sta hay una pgina llamada historias-de-mi-
perro.html. Si quisieramos insertar la imagen mi-perro-newton-gif en ella, la
ruta absoluta sera la misma que antes (recuerda que las rutas absolutas no
dependen de la pgina donde se vaya a insertar el elemento), pero la ruta
relativa ahora es esta otra:
../imagenes/mi-perro-newton.gif
Los dos puntos y la barra ( ../ ) significan un paso atrs, es decir, salir de una
carpeta. Esto queda claro, pues para llegar desde la pgina historias-de-mi-
perro.html hasta mi-perro-newton.gif hemos de:
1.- Salir de la carpeta historias ( con ../ )
2.- Entrar en la carpeta imagenes ( con imagenes )
3.- Citar la imagen que deseamos ( con mi-perro-newton.gif)
con lo que la ruta relativa es en este caso:
../imagenes/mi-perro-newton.gif
Las rutas relativas suelen utilizarse siempre que se enlaza a elementos dentro
del mismo dominio, pues son mucho ms cortas de escribir. Adems, como el
navegador no tiene que trazar el camino completo (como ocurre con las rutas
absolutas) sino simplemente salir de una carpeta o entrar en otra para
encontrar el elemento, la carga de la pgina es ms rpida.
No obstante, hay un pequeo problema en el uso de las rutas relativas. Si
tenemos una pgina en una carpeta y la cambiamos a otra, la ruta absoluta de
los elementos no cambia, pero la relativa si. Por lo tanto si cambiamos una
pgina de lugar (si la cambiamos de carpeta o si la metemos en una carpeta),
hay que volver a redefinir la ruta relativa.
Esto de cambiar pginas de lugar no es muy frecuente, y an as, si utilizamos
programas como el Dreamweaver, etc, este nos corrige las rutas
automticamente, por lo que an a pesar de este pequeo inconveniente, os
recomiendo el uso de las rutas relativas.

Aprender a Crear una Pgina Web Paso a Paso


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!!

Software Necesario
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 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 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 podrs 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 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 mostando una ventana de bienvenida y preguntndote si quieres seguir o no...
parece que an no ha entendido que "si".. je je:
Como va siendo habitual, ahora aceptamos los 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? Inicarle en que 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, 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 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.

Arrancando el 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. 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 lmite, 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 "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 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 prxima 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,
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.
Top of Form

El Html-Kit es un programa sencillo, pero an as tiene cantidad de opciones que no vamos a Web ComoCrearTuW
cesitar, al menos por el momento. As que para no liarnos mucho con tanto men vamos a
plificar todo esto. Trataremos de desactivar todo aquello que no vayamos a usar e iremos
ivandolo conforme nos haga falta. As ser todo ms claro, oki? Para empezar, abre tu Html-Kit
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.
o es lo primero que nos sobra, de modo que marcamos la casilla de la parte de abajo de esa
ntana para que no vuelva a aparecer:

Tras desactivar esa opcin y pulsar OK vemos de nuevo el programa con una pgina nueva, tal
e as:
Empecemos a desactivar cosas. Para empezar haz clic en la barra de herramientas, donde pone
y vamos a desactivar una a una todas las opciones que te marco con un circulo rojo en la
uiente imagen:
Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo, pero como vers, de
e 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
b va a ser pan comido para t. Ahora es una buena oportunidad para empezar a saber qu es ese
digo que aparece en la pantalla del Html-Kit. Vamos a verlo en la pgima siguiente.

Primer contacto con el cdigo HTML?


Una pgina web no es ms que un puado de letras y nmeros que son interpretados por los
vegadores mostrando lo que ves por internet. Al ser tan solo eso, letras y nmeros, podramos
r por ejemplo el Block de Notas de Windows para crear una pgina web completa. Tan solo hay
e saber qu letras y nmeros escribir y luego guardar el archivo, pero en lugar de hacerlo con
ensin .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
ml-Kit, pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a
debido tiempo.

El cdigo html de una pgina web


Todas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:
tml> (todas empiezan con esto)

tml> (todas terminan con esto otro)

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

La primera palabra <html> indica que ah empieza el cdigo de la web. La segunda </html>
ica que el cdigo de la pgina web a terminado. Se distinguen por la contrabarra / que siempre
ica 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
as que se ven son los textos, las imgenes, sonidos, etc. Por otro lado lo que no se ve son sus
actersticas, como el ttulo, su descripcin, y otra serie de cosas que veremos ms adelante.
cosas que no se ven se colocan dentro del cdigo HTML en una zona llamada cabecera (Head
ingls) y lo que se muestra se pone en lo que se llama cuerpo (o Body en ingls). Pues igual que
es hemos escrito en cdigo dnde empieza la pgina y dnde termina, la cabecera llamada
AD y el cuerpo llamado BODY se colocan y escriben as en Html:

tml>

head>

head>

body>

body>

tml>

En Html, se indica que va a empezar la cabecera con la palabra <head> y termina con la misma
abra pero colocandole la contrabarra, </head> tal y como hemos visto que pasaba para cerrar
tml>. 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
uimos 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.
es hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Este
ulo realmente no se ve en la web, pero si en la barra azul de la parte alta del navegador
plorer, Mozilla, Firefox, etc son tipos de navegadores) por lo que resulta importante aprender a
inirlo. Ms adelante veremos por qu es tan importante.

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

tml>

head>

<title>Este es el ttulo de mi web y puedo escribir lo que quiera!</title>

head>

body>

body>

tml>

Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra
ante, es decir, con </title>. Fcil, no? Si guardaramos esto en un archivo con extensin .html
htm qu veriamos? Una ventana del navegador completamente en blanco, pero con un ttulo en
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
b, vers como coincide exctamente con el mostrado antes. Si no sabes, te enseo como mirar
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 sabes ver el cdigo
ml de una pgina web puedes pasar sin miedo a la pgina siguiente. Si tienes tus dudas, mejor
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
ulta muy util, tanto para corregir errores en tus pginas como para ver cmo narices una web
e te ha gustado a podido hacer alguna cosa. Una vez que domines un poco ms el diseo de
ginas web, aprenders mucho 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
e aparecen normalmente en la barra de herramientas superior de cualquier navegador. La
cin 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
irse el desplegable con otras opciones, se toma la opcin Cdigo Fuente. Te enseo una imagen
a que lo tengas ms claro:

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

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

Como ves, son todos parecidos y por supuesto, el cdigo mostrado ha de ser idntico. Haz la
eba con esta misma pgina, o con el ejemplo de la pgina anterior, y as compruebas el cdigo
ejemplo, oki?

Una Carpeta para dominarlas a todas...


Antes de seguir aprendiendo y creando cosillas con el Html vamos a ordenar un poco nuestros
hivos 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 red (a nuestro servidor) por lo que es necesario que todos ellos estn en una misma carpeta.
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
peta all llamada "mis-paginas-web". Crear esta carpeta es bien sencillo. Pones el cursor de tu
n sobre una parte de tu escritorio donde no haya ningn icono. Haces clic all con el botn
echo del ratn y escoges Nuevo > Carpeta. A continuacin le pones el nombre que os he dicho
s-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

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


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.
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 nobre 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: x

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


background-repeat: x }
Para que se repita solo verticalmente se escribe: background-repeat: y

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


background-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 }

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. 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, .
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):
(Fijate 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.

Cmo centrar un prrafo de la pgina 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 prrafos.
Vamos a aprender a centrar prrafos 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 alineacin 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 prrafos aparecieran centrados, bastara con poner en la
Hoja de Estilo esta lnea:

p {text-align:center}
El problema de esto es que nos centra TODOS los prrafos 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, podramos 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 pgina le indicamos a un prrafo 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 lnea:

.centrado {text-align:center}
Fjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a
continuacin 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 minsculas.
- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y nmeros.
- Nunca empezar el nombre con un nmero.
- Si necesitas separar el nombre en dos o ms palabras usa guiones medios "nombre-
nombre", nunca bajos "nombre_nombre".
Bien, una vez claras estas normas (recurdalas muy bien!) guarda la Hoja de Estilos y
abrimos el index.html para centrar algunos prrafos.

Centrar prrafos en el Html


Como recordars, todos los prrafos 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 prrafo donde ponemos "Bienvenidos...". Para ello
vamos a la vista del cdigo html del index y modificamos esa etiqueta <p> dejndola as:

<p class="centrado"> Bienvenidos a mi pgina web. Muy pronto estar lista!</p>


Si ahora haces vista previa o "Overview" desde el Html-Kit, vers como este prrafo
aparece ahora centrado. Fcil, 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 cdigo Html.
Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, ms el nombre, y
se indica en el html con class="nombre" (aqu sin el punto). Estas cosas no las sabe
cualquiera, no te creas... ests empezando a ser un Webmaster de verdad!

Cmo va nuestra pgina web por el momento?


Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el
cdigo 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
podras perder cuando la usamos en las lecciones siguientes, oki?
La maravillosa Hoja de Estilo queda as:
el cdigo Html del index.html de ejemplo as:
con esta pgina terminamos con la primera leccin. Pulsando arriba, en la barra de
navegacin naranja sobre "Leccin 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 opinin de estas lecciones en el Foro CCTW, eh? Solo con tu punto
de vista y tu opinin puedo mejorar todo esto, acurdate de m! je je je.

Comenzando a crear la plantilla de nuestra pgina Web


La pgina 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 ms adelante. Ahora lo que vamos a hacer es comenzar creando la plantilla, que
nos valdr para generar a partir de ella el resto de pginas 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 ratn sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre l
con el botn derecho del ratn.
Escogemos New > Create File...

Escogemos crear "Blank Html Page" desde la pestaa "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 pginas 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 dems pginas de la web. Crala tu
mismo. Toma, por si no te acuerdas de cmo 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 haba que colocar una lnea de cdigo en el Head. Te dejo esto por
si no te acuerdas de cmo 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 estn 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 estructuracin 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 lnea, o avanzar un poco ms y usar
tablas, que dividen el espacio en celdas, celdas en las que podemos colocar ms
comodamente los elementos que queramos. Tambin se puede estructurar una web
partindola en frames o marcos.
Pero el mtodo ms profesional, lmpio y cmodo 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 ms que un elemento rectangular dentro del cual podemos incluir lo que
queramos, palabras, prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso
otras capas o tambin 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,
tamao de letra, dimensiones de ese recuadro, margenes, bordes, etc, etc.
Al principio quizs te de un poco de pnico todo esto, pero te prometo que no es nada
dificil, ya vers. Fjate, esto de abajo es el cdigo Html de un Div sencillo.

<div>Bienvenidos a mi Web</div>
A que no te ha dolido? je je. Como puedes ver, igual que ocurra con los elementos que
vimos atrs, 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 lnea de cdigo 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 ningn 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 gurdalo:

#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 pgina 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 estn los estilos
nicos, que solo se deben aplicar a un elemento por pgina web.
Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, 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 cdigo 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 nmero 3 de tu teclado) en lugar de con un punto, y en el cdigo 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 lnea de cdigo. Ha de quedar as:
Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, vers 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, vers lo asombroso
que es todo esto ms adelante.

Ms capas, ms 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
quin 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 navegacin. La llamaremos, navegacion (sin acentos, y
todo en minsculas, claro).

Qu es una barra de navegacin?


Una de las cosas ms importantes en una pgina web es el dar facilidades al visitante
para que pueda navegar por nuestras pginas sin perderse y que lo tenga todo siempre a
mano. No es bueno tener pginas escondidas, es decir, pginas a las que para acceder haya
que ir primero a la seccin tal, luego a la subseccin cual, luego entrar en otro lado y
finalmente conseguir acceder a una pgina en concreto. Todas las pginas deberan ser
accesibles sin ms que pulsar un par de enlaces desde el index o pgina principal.
La barra de navegacin nos ayuda a esto. En esta barra que aparecer en todas las
pginas 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 navegacin:

Como ves, dan acceso a varias secciones y pueden ser muy sencillas o ms complicadas o
llamativas con lengetas y todo eso. Pues ahora que sabes lo que son, vamos a crear la capa
de nuestra barra de navegacin.

Creando la capa navegacion


La llamaremos "navegacion" y solo va a existir una por pgina, 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. Despus abrimos la plantilla.html y escribimos, a
continuacin del div cabecera, esta otra lnea:

<div id="navegacion">Barra de Navegacin</div>


Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de color
de fondo gris (gray). Ms adelante le pondremos ms cosas, pero ahora seguimos creando el
resto de capas.

Creando las capas contenido y pie


Ya que estamos, vamos a crear dos capas ms. La primera se llamar contenido y en ella
pondremos luego un men lateral y los textos de nuestra web, la parte principal. Tambin
vamos a crear otra capa para la parte ms baja de la web que llamaremos pie en la que
ms 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
lneas despus 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 pgina</div>
Y el resultado es...
Tras guardar todo, en la Hoja de Estilo tendrs esto:
En la plantilla.html esto otro:
Y aqu tienes el resultado del ejemplo. Se que no parece una pgina web, pero no me
dirs que no est tomando forma, no? Vers como esto empieza a cambiar en breve..

Resoluciones de pantalla y pginas web


Existen varias formas de darle un tamao a una pgina 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 tambin podemos darle un ancho concreto, de
modo que los que tengan un monitor pequeo la vern muy grande y los que la tengan ms
grande (la pantalla...) la vern ms 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 tamao 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 pgina 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 vern muy grande y la vern tan
pequea que tendrs ms margenes a los lados que espacio para la web....

Qu opcin tomamos entonces?


Lo mejor es tomar la segunda opcin, dar un ancho fijo a la web, pero estudiando muy
bien cul ser esa anchura. Lo mejor es darle un ancho que sea cmodo para la resolucin
ms usada por todo nuestro pblico. As, si unos pocos usan una resolucin de pantalla un
poco mayor no vern unos mrgenes exagerados y los que usen resoluciones un poco
menores al ancho que le demos, no tendrn que usar demasiado la barra de desplazamiento
y adems, sern la minora.
Parece ser que hoy por hoy la anchura ptima para una pgina web es de 800 pixeles. De
hecho, si miras las webs que sueles visitar vers que es as y que quedan muy bien con
cualquier resolucin. As que... vamos a darle a la web del ejemplo esa anchura y adems
vamos a hacer que aparezca centrada en la ventana del navegador, las dos cosas a la vez,
oki? Sers capaz? je je, fijo que s.

Un Div para dominarlos a todosss


Excto. 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 pgina, 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 despus de <body> y la
de cierre justo antes de </body>. El cdigo 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 automtico, por
lo que se dejar todo lo que exceda de 800px y automticamente, es decir, la mitad a la
derecha y la otra mitad a la izquierda y por tanto, centrado. Lo veremos mejor ms
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 lnea 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 vers como todo aparece centrado y
con un ancho fijo de 800px. Ahora no ser fcil descuadrar tu web.
Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va mejorando poco a
poco....

El men de nuestra pgina web


Presta mucha atencin en esta leccin, 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 lneas. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un poco de gusto
y ganas de experimentar. Como un men es ms 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 pgina, dentro de la zona de los textos, meteremos o crearemos este div que
vamos a llamar menu dentro del div contenido. Parece lgico, 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
lnea justo despus 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 cdigo Html as:

Como vers, despus del cdigo Html de la capa menu, van los textos de la capa
contenido (Esta ser la ....) y despus, en la siguiente lnea 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 lnea para el div menu:

#menu {background-color: yellow; width: 150px ; float:left }


Como solo hay un men por pgina, 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 ms.
La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizs
sea poco, pero por ahora lo dejamos as hasta que veamos si nos va a faltar anchura en esa
capa. La segunda nueva caraterstica 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 posicin ms fcilmente. 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 aparicin en la pgina, 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 estn todas las capas creadas (mucho ms adelante quizs metamos alguna ms...) as
que ahora vamos a rellenarlas y a darles una mejor presencia, oki?

Rellenando el men de nuestra pgina web


El men as como lo hemos dejado ni parece men ni parece n de n. Vamos a
insertarle algunos enlaces (ficticios, pues an no tenemos pginas 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 podra
pensar en colocar un div para cada uno de ellos, es decir, incluir tantos divs pequeos
dentro de la capa menu como enlaces vayamos a poner, pero parece demasiada capa, no?
En realidad un men no es ms que una lista y, lo mejor para poner una lista es usar el
elemento... lista? Excto.

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 cdigo Html de una lista completa sera este mismo:

y se vera 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. Cmo? Pues como siempre, con
solo poner una cosilla en la Hoja de Estilos. Pero antes vamos a ver qu cul es el cdigo
que tendramos que colocar dentro del div del men.
Para empezar, abre tu Html-Kit y escribe el cdigo 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 vers cosas un poco raras, como que el men se descuelga un poco
por debajo de la web, pero eso lo arreglamos en las siguientes pginas.

Enlaces para el men de nuestra pgina web


Como recordars (eso espero...) los enlaces tenian esta forma:

<a href="ruta/archivo.html">Texto del Enlace</a>


as que vamos a poner ese cdigo dentro de cada elemento li de la lista del men. Si
ponemos una ruta falsa nos dar algn 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 ningn lado por ahora. Cuando tengamos ms pginas en la web pondremos las
rutas de aquellas pginas que queremos enlazar desde el men, vale?

<a href="#">Enlace 1</a>


Como no vamos a querer que se abran esos enlaces en pginas distintas sino en la misma,
no es necesario ponerle el target al cdigo del enlace (el target="_blank" se pone para que
el enlace se abra en una pgina 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 cdigo del men completo se tiene que quedar as:
Eso es todo lo que tenemos que hacer en la plantilla.html porque lo dems, 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 cdigo Html sencillo para revisarlo nosotros, y sencillo para
que los buscadores lo lean bien e indexen nuestras pginas correctamente, es poner en el
Html lo justito, y dejar los detalles de cmo queremos adornar cada cosa para la Hoja de
Estilo. Adems esto nos permitir hacer cualquier cambio en todas las pginas 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, habrs visto que al poner varios enlaces dentro
ha crecido y se sale por debajo de la pgina web. Vamos a reparar esto desde la Hoja de
Estilo. Abre tu Html-Kit y abre estilo-general.css
Esto, despus 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 combinacin 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 pgina. 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 algn navegador se descuadre todo. No se explicarte porqu ahora mismo, y vers
como a veces, a pesar de que cumplas todas las buenas prcticas que se pueden leer por la
red, hay que hacer alguna "pirula" para que se vea correctamente la pgina web con
cualquier navegador. Es todo un reto, pero por ahora lo estamos consiguiendo.
Sin ms rollo, abres la Hoja de Estilo, dejas la lnea 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 algn fallo no dudes en decirmelo en el
Foro CCTW, plis!

Eliminando los puntos de la lista


Esta es fcil 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 dejarn de tener ese punto, y es ms, tomarn 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 seran
normales.
As que, definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la
condicin de estar dentro de la capa menu. Toma ya. Cmo 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 ningn (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 vers
que ya no aparece. En la pgina siguiente seguimos arreglando el men.

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 ms 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 ms o un
poco menos... Al final lo que ocurre es que parece imposible ver una pgina web
exctamente 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 lnea de todas, esta:

* {margin:0px ; padding:0px ; border: 0px}


Si escribes esta lnea en estilo-general.css, la guardas y haces vista previa de la plantilla
vers como ahora el men aparece centrado, justamente centrado, sin margenes. Tambin
han desaparecido otros margenes que rodeaban la capa global, etc. Tenemos el poder! je je
je.. Eso si, no olvides colocar esa lnea 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 anulars los margenes y bordes de las capas definidas antes de esa lnea.
Acurdate!

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 estarn 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, tambin 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 aplicara 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 pgina siguiente.
Qu tal lo llevas? Levntate 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 dmelo en el Foro
CCTW, sin problemas, o escribe all tus dudas o sugerencias, que para eso estamos colega!

Arreglando los mrgenes del men


Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los margenes cuando
tengamos los enlaces definitivos, pues segn lo largo que sea el texto de cada enlace
podemos ajustarlo ms o menos, al igual que la anchura del men. Pero como ya estamos
liados con esto, vamos palante y lo terminamos, te parece? Va a ser muy facilito.
An no te lo he dicho, pero quizs hayas visto ya por algn 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 segn 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 dems 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 ms me interesa es dejar un poquito de margen hacia la izquierda para separar
los enlaces del borde, y tambin un poco de margen por encima y por debajo para que no
se vean muy apiados. En cambio el margen derecho me interesa ms que siga a cero, pues
as tengo ms 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 liars ms adelante cuando hagamos cambios. Confa 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 ratn por encima! Eso mola, vamos a verlo en
la pgina siguiente, es muy sencillo tambin, y es gratis! je je je.

Aplicando estilos css a los enlaces del men


Estoy seguro de que esto era algo que siempre quisiste hacer, je je. Vamos a ver cmo
eliminar el subrayado de los enlaces y cmo resaltar los enlaces del men cuando pasas el
ratn por encima, oki? Eso si, primero un poco de base para que no te pierdas luego.

Cmo se definen las propiedades de los enlaces


Los enlaces como ya sabes, de escriben con la etiqueta <a> y por tanto est claro que
para modificar sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar
cosas entre los corchetes. Las caractersticas que definamos as para los enlaces se
aplicarn a todos ellos sea cual sea su estado. Ahora te cuento qu es eso de los estados.
Se distinguen cuatro estados posibles para los enlaces, que son los siguientes:
- link: Es el estado normal que tiene un enlace cuando no est en ninguno de los otros
tres estados.
- Visited: Imagino que te habrs fijado que en algunas webs se colorean de otro color los
enlaces que ya has visitado antes, verdad? Pues "visited" es el estado del enlace cuando
ste ya ha sido visitado por el usuario anteriormente.
- Hover: Es el estado del enlace cuando el cursor del ratn est justo encima de l, pero
sin apretar el botn an. Tambin lo has debido ver, pasas el ratn sobre un men y se van
coloreando o poniendo en negrita los enlaces que sealas.
- Active: Y este es el estado de un enlace o vnculo cuando est siendo presionado por el
ratn y mientras no se suelta el dedo.
Hay que ver cuanto ests aprendiendo eh? Y gratis! No te quejaras, je je je. Bueno, pues
como te deca antes, si en la Hoja de Estilo solo indicas la "a" de enlace seguido de los
corchetes con sus propiedades, entonces esas propiedades afectarn a los enlaces sean
cuales sean sus estados. Se hara as (en la Hoja de Estilos, claro):

a {color: blue; font-size:1.3em ; text-decoration: none}


En este ejemplo de arriba le hemos indicado que TODOS los enlaces, sean cuales sean sus
estados, han de ser azules (color:blue), han de tener un tamao de letra de 1,3 veces lo
que correspondera normalmente (font-size:1,3em) y finalmente que no deben tener
ningn tipo de decoracin, esto es, el subrayado (text-decoration: none). Por defecto
siempre salen subrayados, que se define con text-decoration: underline
Si no quieres destacar los enlaces segn los estados que te he explicado antes, basta con
definirlos en esa nica lnea, no obstante si quieres darle algn toque diferente en funcin
de alguno de esos estados, se vuelve obligatorio definir los cuatro estados y adems en ese
mismo orden que te he puesto.

Sin subrayar y marrones, excepto cuando se lococa el cursor


encima que pasan a rojos y subrayados
Con estos estilos los enlaces nunca aparecen subrayados hasta que se coloca el cursor del
ratn sobre ellos. Esto es bueno, para destacar al usuario que son enlaces. Adems pasan de
color marrn (brown) a color rojo (red) cuando se pasa el ratn sobre ellos. Fjate como
defino todos los estados aunque deje vacios algunos estados. Siempre hay que ponerlos
todos y en ese orden adems.

Estas lneas de cdigo puedes escribirlas ya en la Hoja de Estilos estilo-general.css


Depus gurdala y mira los cambios con la vista precia en plantilla.html
Qu, se va animando esto o no? No? pues vamos a mejorarlo an ms...

Aplicando ms estilos css a los enlaces del men


Para que se note que controlamos esto un montn, vamos a aplicar un par de
propiedades ms a los enlaces del men. Lo primero ser tratar estos enlaces como
bloques, lo segundo ponerles un color de fondo.

Tratar elementos como bloques


Si te fijas en la vista previa de la plantilla.html vers que es necesario poner el cursor
justo encima de las palabras del enlace (se suele llamar Anchor Text a los textos de los
enlaces) para que estos funcionen. En cambio podemos hacer un pequeo truco para que
estos se activen, funcionen, con solo colocar el cursor sobre la lnea, sin necesidad de
colocarlo justamente sobre el texto. No se si te has enterado de lo que acabo de decir,
igual suena un poco extrao, pero tu haz lo que te digo y vers a qu me refiero.
Aade esta ltima propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-
general.css as:

a {color: brown ; text-decoration:none ; display: block }


Ocurren dos cosas ahora. La primera es buena, es el efecto que te acabo de comentar,
que situando el cursor en la misma lnea del enlace pero lejos del texto, tambin se activa
el enlace. La segunda es mala, y es que se nos han separado demasiado los enlaces
verticalmente. Por qu ser?
Es un defecto de algunos navegadores, como el Internet Explorer, pero esto lo
arreglamos rpido con otro truquillo. Pon el cdgo Html de todos los elementos de la lista
uno seguido del otro, en lugar de uno en cada lnea de cdigo en la vista Html y vers como
se arregla. En adelante, ya sabes que los elementos de las listas, los <li> hay que ponerlos
todos seguidos, en la misma lnea que los <ul> y </ul>. Con eso se solventa el tema.
Como te veo con los ojos perdidos mirando al techo... te dejo una imagen para que veas
a qu me refiero con ponerlos seguidos. Antes estaban as:

Y hay que ponerlos as:

Aplicando un fondo a los enlaces activos


Bueno, en realidad es a los enlaces en estado Hover. Vamos a hacer que al poner el
cursor sobre un enlace del men, este aparezca sombreado, con un fondo de color.... gris.
Se hace retocando el cdigo de los enlaces de antes, pero solo la lnea del hover, dejndola
as:

a:hover {color:red ; text-decoration:underline ; background-color: silver}


La propiedad background-color te debera sonar, la vimos al principio del curso para
poner fondo a la pgina index, te acuerdas? je je. Silver significa plata en ingls, es un
color gris clarito. El resto de lneas del cdigo no se tocan, que te veo. Si guardas y haces
vista previa a la plantilla.html vers los efectos logrados con todo esto
Rellenando la Zona Principal
Veamos realmente como funciona esta estructura que hemos hecho. Vamos a insertar
ms texto en la parte principal de la pgina web para ver como se comporta el men
lateral en el caso de que haya mucho ms texto en la parte derecha. Abre el Html-Kit y
abre tu plantilla.html

Elementos que no son nada ?


Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamao de la letra de
toda la web, podemos varias los aspectos de los enlaces, los fondos de ciertos elementos,
etc, etc sin ms que poner la propiedad correspondiente. Pero para eso, todas las partes
del contenido de la pgina web deben "ser algo". Si son enlaces modificaremos la etiqueta
"a", si son prrafos la etiqueta "p", pero, qu etiqueta hemos de modificar para cambiar las
propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone
"Esta ser la zona principal de la web"?
Va a ser dificil, pues no est encerrada entre ningna etiqueta concreta, luego ni es un
prrafo, ni un enlace, ni n de n. Nosotros pretendemos que sea un prrafo, verdad? Pues
vamos a indicrselo poniendole a esa frase la etiqueta <p> al incio y como no, la etiqueta
</p> de cierre al final. Ale, dale al teclado! Ha de quedar as:

Ms contenidos
Tras esta aclaracin, vamos a incluir un par de prrafos ms a continuacin de ese. Ya
sabes, has de poner <p> y </p> al principio y al final de cada uno para que el navegador
sepa donde empiezan y terminan. Escribe un par de prrafos que tengan bastante texto, al
menos lo suficiente como para sobrepasar lo que ocupa el men de la izquierda.
Si escribes lo suficiente en cantidad, conseguirs ver este aspecto en tu plantilla.html

Justificar los prrafos de la pgina web


Ups, los prrafos se ven centrados y eso parece una poesia ms que una web, je je je.
Eso es por que le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo
arreglamos rpido definiendo un estilo justificado para todos los prrafos de la web. Si ms
tarde nos interesa alguno con otra alineacin, lo crearemos en su momento.
Por ahora, abre tu Hoja de Estilo e incluye esta nueva lnea, por ejemplo, al final de su
contenido:

p {text-align: justify}
Con esto los textos quedan justificados. Esto significa que se reparten para que
empiecen justo en la parte izquierda y terminen todas las lneas justo en el margen
derecho, sin huecos. A mi me gusta as, pero si lo prefieres, en tus pginas puedes definirlo
como text-align: left o text-align:right o text-align:center, como quieras. En el ejemplo lo
dejamos con Justify.

Los margenes de los prrafos de la pgina web


La cosa va mejorando, pero ahora vemos como los textos se pegan demasiado tanto al
men lateral como a los extremos de la pgina. Eso no queda muy bien, as que vamos a
arreglarlo.
Tienes dos opciones, una es definirle el margen concreto a cada uno de los prrafos de
todas tus pginas web, o algo un poco ms sencillo, poner un par de palabras en la Hoja de
Estilo y listo. Qu prefieres? je je je.
Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos
margenes. Como los textos que vemos sin margen pertenecen a la capa de fondo naranja
(orange) y en la Hoja de Estilos solo pone "orange" en la capa "#contenido", ya sabemos a
qu capa incluirle la propiedad padding (el padding es parecido al margin, ya veremos la
diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar cada capa
rpidamente, je je je. Pero solo queremos por ahora poner margen a sus prrafos, es decir,
queremos margenes para los prrafos de dentro de la capa #contenido, as que, si
recuerdas bien lo que hicimos la otra vez, esto se pone as:

#contenido p {padding: 5px 10px 5px 10px}


Resumiendo, escribimos primero la capa y luego el elemento de dentro de esa capa al
que queremos definir cosas y luego, entre parntesis, las propiedades. Le hemos puesto
10px en los dos lados y solo 5 por arriba y abajo, para ver como queda e ir variando cada
uno hasta que quede a nuestro gusto si fuera necesario.
Escribe esa lnea justo despus de la definicin en la Hoja de Estilo de la capa
#contenido. Guarda la Hoja de Estilo, haz vista previa de la plantilla.html y vemos los
resultados por si queremos variar alguna de esas dimensiones.

(Margen entre men lateral y textos principales)


Vaya... los margenes no estn mal del todo, pero vemos que los dos primeros prrafos no
parece que hayan tomado el margen izquierdo para separarse del men principal. Esto es
por que se cuenta el margen desde la parte izquierda de la capa #contenido, mientras que
en esos dos prrafos debera contarse desde la derecha del men, verdad? Vamos a ver
como solucionamos esto.
Para eso tendramos que poner un margen por la derecha para el men, y como
pertenece a la capa #menu tocara retocar esa lnea en estilo-general.css aadindole esto
ltimo que he subrayado:

#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ;


margin-right: 10px }
Ahora si que lo hemos conseguido, mira el resultado del ejemplo.

La indentacin de los prrafos


Eso si que es una palabra rara. Imagino que proviene de la propiedad "text-indent" que
se aplica para establecer un margen a la izquierda solamente de la primera lnea de cada
prrafo, de modo que sta queda ms metida a la derecha que las dems lneas.
Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo
queremos aplicar.
Vamos a aplicarlo a todos los prrafos de la parte principal, que eso queda muy bien. Un
indentado de 15px creo que es suficiente. Como va a ser una propiedad para los prrafos
(p) de dentro de la capa #contenido, incluimos el text-indent en esta lnea (lo subrayo para
que lo veas claro):

#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}


Ahora guarda la hoja estilo-general.css y haz vista previa de la plantilla para ver como
queda. Te gusta? Esto de indentar solo tiene sentido cuando los textos estn justificados o
alineados a la izquierda. Cuando estn centrados no se suele usar, pues no hace falta ese
efecto.

Cmo llevamos los cdigos?


Para estar seguros de que estamos haciendo el ejemplo segn las lecciones aprovecho
ahora para dejaros los cdigos de la plantilla.html y de la hoja estilo-general.css segn han
quedado hasta ahora (en realidad lo hago para llenar hueco, que esta pgina se me haba
quedado muy cortita, je je je je)

plantilla.html

plantilla.html

estilo-general.css

Un poco ms de estilos css


A estas alturas y aunque no lo creas, pocas capas ms tendremos que crear para tener
completa nuestra pgina web. El resto ser contenido vuestro, propio y ya no tendremos
que tocar mucho ms la plantilla.html aunque realmente, poco la hemos tocado, verdad? El
resto del trabajo lo tendremos con la hoja de estilo, que se encargar de darle vistosidad al
Html. Repito de nuevo que lo bueno de las Hojas de Estilo es que si un da te cansas del
aspecto de la web, con solo cambiar un poco la Hoja de Estilos tendrs una web con el
mismo contenido (pues no tocaremos el html) pero con una apariencia totalmente distinta.
Para eso claro, hay que saberse los trucos del CSS y por eso vamos a profundizar t y yo
ahora con tres propiedades muy importantes que si no quedan claras nos van a dar muchos
dolores de cabeza. Estas propiedades son margin, padding y border.

Border

Si en una capa solo definimos su contenido en Html, esta solo mostrar eso, el
contenido, ya sea una imagen, un prrafo o lo que sea. Pues bien, la propiedad border
dibuja un borde alrededor justo de ese contenido. El borde estar pegadito pegadito al
contenido, como en este caso de la derecha. El borde por defecto, si no se indica otra cosa,
es una lnea continua de 1 pixel de grosor y de color negro.

Padding

El padding lo usaremos para definir una distancia de separacin entre el borde y el


contenido. Es decir, separa el borde de su contenido en una distancia igual a la que le
indiquemos. Concretamente, esta zona sera como la parte roja que se ve en esta otra
imagen de la derecha. Como ves, el borde ahora no est pegado a la imagen, sino separada
de ella por la zona roja que ha sido definida con la propiedad margin. Fjate que el borde
ahora est pegado al padding, no al contenido.

Margin

Ahora tenemos otra distancia ms. El margin es la distancia de separacin que se va a


dejar entre el borde y la parte exterior del elemento de la capa. En este caso no se ve,
pues es una zona exterior al dibujo en la que no se permite que aparezca nada. Por eso se
usa para separar unos prrafos de otros, como vimos en las lecciones primeras. En este caso
solo hay definido el margin en el ejemplo de la derecha. Como ves, hay una separacin
entre la imagen y este mismo prrafo, aunque no se ve.

El trio Margin-Padding-Border
En la imagen de abajo puedes ver mejor a qu zona corresponde cada una de estas
propiedades.
Puedes ver el borde, que le he puesto color azul para distinguirlo. Entre el borde y el
contenido est la separacin creada por el padding y entre el borde y el exterior el
espaciado dejado por el margin.
As, si ponemos dos imgenes una junto a la otra y queremos separarlas, usaremos por
ejemplo el margin. Lo mismo para los prrafos etc. Si quisieramos separar un elemento A de
los que tiene alrededor, le pondriamos a A un margin.
Si tenemos un elemento encerrado en una capa y queremos que su contenido se separe
un poco de su extremo (de su borde) le hariamos un padding.

El ejemplo del castillo de paladines rodeados de marginados


Hace mucho tiempo exista un castillo donde un montn de paladines (soldados de la
edad media) se refugiaban de seres marginales, los marginados los llamaban. El rey orden
contruir unas buenas barreras (border) para protegerse. Adems, clav un montn de
estacas afiladas por fuera de los muros para evitar que los marginales se acercaran
demasiado (margin) y para proteger a los paladines orden que ninguno de ellos se acercara
al muro a menos de dos metros (padding: 2 metros) para evitar que los paladines sufieran
alguna herida si algn marginal atravesara alguna lanza por alguna ventana del muro. De
este modo, los marginales no podian acercarse mucho al castillo (gracias al margin) y a los
paladines se les prohibi acercarse al muro (gracias al padding).
Es un cuento muy tonto, je je je, pero quizs te ayude a recordar para qu es cada uno.
En la pgina siguiente lo entenders mejor al aplicrselo a nuestro men lateral, ya
vers.

Separar un poco el men


Segn lo explicado en la pgina de antes, para conseguir separar un poco el men lateral
(toda la zona amarilla) del borde de la parte naranja de la pgina, es decir, para meterlo un
poco ms dentro de la parte central, podramos colocar un margin o un padding. Cul de los
dos?
Como lo que queremos es separar la capa #menu (la amarilla) de los elementos
exteriores, tenemos que aplicar margin. Si aplicramos padding a la capa #menu el efecto
sera crear una separacin entre el borde amarillo y los enlaces de dentro, no?
Hace un par de pginas pusimos a la capa #menu este margen: margin-right:10px, te
acuerdas? Era para dejar una separacin entre el men y los textos de la parte naranja que
estn a su derecha. Ahora, como hemos visto que tambin sera bueno separarlo por la
izquierda y por arriba (y ya puestos, por debajo tambin), ampliamos la definicin y la
ponemos de este modo:

# menu {................... margin:10px 10px 10px 10px}


Esto es lo mismo que poner solo margin: 10px, pero mejor lo dejamos del otro modo as
podemos poner margenes diferentes en los cuatro lados si vemos que el mismo para todos
los lados no nos gusta.
Colocando ese margin en estilo-general.css obtendramos esta apariencia.
Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un
poco. Vamos a probarlo con estos otros valores (recuerda el orden de las dimensiones del
margin, arriba-derecha-abajo-izquierda)

#menu {................... margin:3px 10px 3px 3px}


Y haciendo de nuevo vista previa sobre plantilla.html vemos que queda mucho mejor,
dnde va a parar, je je je.
An no hemos aplicado ningn borde a ninguna capa. Esto es por que cada navegador
interpreta el borde de un modo distinto y vamos a evitarlo todo lo posible. En su lugar
usaremos imagenes de fondo con el borde ya dibujado y en los casos en los que no sea
posible ya nos buscaremos las maas para poder usar bordes sin problemas, pero eso ser
ms adelante.

Te toca currrtelo por tu cuenta


No estara de ms que crearas una pgina aparte e investigaras los efectos del margin, el
border y el padding por tu cuenta. Para distinguir una cosa de otra lo mejor es ponerle un
color al body (a estas alturas debes saber hacerlo), creas una capa a la que pones nombre y
le aplicas otro color diferente y luego le aplicas otro color distinto ms al elemento que
pongas dentro de la capa, que puede ser una imagen, un prrafo, una lista, etc, etc. Seguro
que te resultar curioso observar los cambios que produce variar esos datos en la hoja de
estilo y seguro que aprendes un montn.
Yo por mi parte intentar ponerte algunos ejemplos en cuanto pueda para esclarecer
estos conceptos, oki? Pero recuerda, no lo pruebes en los archivos de este ejemplo para no
perdernos en las lecciones, hazlo en un archivo aparte.
Mientras tanto, seguimos con las lecciones, vale?

Insertar ttulos con h1, h2, etc.


Igual que para indicar que una frase deba tener aspecto de prrafo con las etiquetas
<p> y </p>, existen otras etiquetas para indicar que se trata de un ttulo y estas etiquetas
se escriben con una "h" seguida de un nmero que puede ir del 1 al 6. (Me refiero a ttulos
de texto, no al title de la pgina como vimos al principio de estas lecciones).
La forma correcta para un ttulo sera esta:

<h1>Este es un ttulo de importancia Uno</h1>


Fjate como de nuevo, tiene una etiqueta de apertura al inicio y otra de cierre al final
con la contrabarra.
En lugar de un h1 podemos usar un h2, un h3 y as hasta h6. Los h1 son ttulos principales
y el resto van siendo de menos importancia y por lo tanto aparecen con letra ms pequea
cada vez. Se usan por tanto los h1 para ttulos principales y los h2 para subtitulos.
Normalmente no se usan los dems pues no se suele abusar de sub sub subttulos, je je.
Si aplicamos esas etiquetas sin ms obtendremos una simple frase pero en negrita y con
un tamao mayor de lo normal para que se vea destacado. Si no nos gusta cmo queda por
defecto, podemos siempre cambiar su aspecto indicando las propiedades que nos de la gana
en la Hoja de Estilo, que para eso est.
A mi me gustan por ejemplo titulos principales (h1) en negrita, con un tamao
ligeramente mayor que el resto de los textos y adems subrayados y de otro color distinto
al texto normal, que suele ser negro. Para los subttulos (h2) me gusta en cambio un
tamao algo menor que el h1 y adems sin subrayar, pero tambin del color del h1 y en
negrita. As que, como las lecciones las hago yo, vamos a definir en la hoja de estilos este
aspecto para esos dos elementos a mi gusto, je je je. Ah, tambien los quiero centrados los
dos!
Abrimos el Html-Kit, abrimos el archivo estilo-general.css y definimos estos dos ttulos
del siguiente modo:

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;


text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-
align: center}
Guardamos ahora la Hoja de Estilo y abrimos la plantilla.html
Si hacemos vista previa a la plantilla no veremos ningn cambio. Por qu crees que
puede ser? Pinsalo. Pues claro, porque como no hemos dicho a ningn elemento de la
plantilla que es un ttulo, no hay nada que mostrar con estos cambios en la Hoja de Estilo.
Lgico no? Vamos ahora a crear un ttulo (h1) y un subttulo (h2).
El ttulo est claro, va a ser el texto donde pone "Esta ser la zona principal de la web".
Una frase no debera ser a la vez prrafo y ttulo, o una cosa o la otra, de modo que le
cambiamos las etiquetas a esa frase, eliminamos la "p" y ponemos un "h1", tanto al principio
como al final. No te olvides de la contrabarra en la etiqueta de cierre, que te veo...
Veremos esto en la vista previa:
El subttulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer prrafo"
(en realidad ahora es el segundo, pues el pimero lo hemos convertido en un ttulo h1, pero
bueno). Para convertir ese trozo en subttulo, ya sabes que no debe estar entre las
etiquetas <p> y </p>, de modo que lo encerramos entre <h2> y </h2> y pasamos la etiqueta
<p> de ese prrafo despus de ese trozo de texto, quedando as:

Los ttulos aparecen como elementos de una sola lnea, o mejor dicho, no dejan que otra
cosa como por ejemplo un prrafo, continue a su derecha, mandndolo directamente a la
lnea siguiente. Lo ves en la vista previa?

Aunque en el cdigo HTML pongamos un prrafo seguido de un ttulo (en la misma lnea
de cdigo), el prrafo siempre aparecer debajo, en la siguiente lnea, pues para eso es un
ttulo, no? Pues ya est. Ya sabemos ms cosas. Si te gustan los ttulos alineados a la
izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Lo
mismo para el resto de propiedades.

La importancia de los ttulos en el posicionamiento de una


pgina web
Y t pensars... bueno, si puedo definir el estilo que me da la gana.. no podra crear una
clase de prrafo (p.titulo), definirle las propiedades de centrado, tamao mayor, color y
subrayado y usar ese estilo en lugar de las etiquetas h1?
Pues si, si que puedes, pero est muy bien usar las etiquetas de ttulos por lo siguiente.
Cuando una persona hace una bsqueda con por ejemplo Google y escribe "como crear
pginas web" Google le muestra una serie de pginas. Pero cmo sabe Google qu pginas
ha de mostrar? Bien fcil. Google y el resto de buscadores se pasean continuamente por la
red leyendo las palabras de cada pgina web. Si en mi web ven que aparecen las palabras
"como", "crear", "pginas" y "web", lo memorizan y mostraran mi web en sus listas cuando
alguien haga una bsqueda con alguna de esas palabras.
Y porqu unas pginas aparecen ms arriba y otras ms abajo en esas listas? Los motivos
son muchos, pero uno de ellos (hay muchos ms motivos) es que algunas de esas palabras
aparezcan destacadas y destacadas es, o bien que aparezcan en negrita o bien que
aparezcan dentro de un ttulo tipo h1, h2 etc. Por eso es mejor hacer los titulos usando h1,
pues si lo hacemos como prrafos los buscadores nunca sabrn que se trata de un ttulo y no
tomarn esa palabra tan en cuenta (tambin la tienen en cuenta, pero menos).
El resto de motivos los iremos viendo en lecciones sucesivas. Eso si, no por lo dicho antes
vamos a poner toooodos los textos dentro de un ttulo, pues los buscadores pueden pensar
(con razn) que estamos haciendo trampas y en lugar de posicionarnos mejor en sus listas,
apareceramos los ltimos. No se debe abusar.
Otra cosa importante. Ya que sabemos la importancia de las palabras de los ttulos, es
bueno incluir en estos aquellas palabras por las que queremos ser encontrados. Es por eso
que en los ttulos de CCTW se intenta colocar estas palabras clave. En esta seccin por
ejemplo, he aprovechado el ttulo de arriba para colocar palabras que me interesan, como
"titulos" (alguien puede estar buscando cmo insertar ttulos en una web y me interesa que
aparezca esta pgina en ese caso), tambien he colocado la palabra "posicionamiento" (me
interesa que quien busque por esa palabra encuentre mi web) y por supuesto algo que no
puede faltar en mi caso, las palabras "pgina web". Lo pillas?
Repito, no es cuestin de saturar con ttulos, es suficiente con aprovecharlos muy bien, y
saber qu palabras poner sin que el texto del ttulo pierda su sentido, claro. Ha de tener
que ver a la vez con el texto que hay debajo de l, sino, ser muy bueno para el buscador
pero los visitantes pensarian que se te ha ido la cabeza... je je je.

Buscando alojamiento para la pgina web


Ya va siendo hora de ir subiendo nuestro trabajo a la red, verdad? Aunque an no est
terminada la pgina web, es bueno tener ya un sitio para alojarla (a ese sitio se le llama
Hosting) para ir viendo cmo se comporta la web en realidad.
Para no repetir aqu cosas que ya tenemos explicadas en CCTW, os invito a visitar la
seccin Hosting y Dominios. Una vez que entres all aprenderas todos los conceptos
relacionados, con los que podrs escoger con ms idea el hosting que ms se amolde a tus
necesidades.
Si tienes mucha prisa y quieres ir al grano, ve directamente a la pgina donde explico
cmo registrarte en un servidor gratuito sin publicidad, pero no olvides volver a esa seccin
y leer el resto de informacin cuando puedas, te ser til en el futuro.
Cuando termines de leer esa seccin, te dars de alta en el Hosting que quieras y podrs
seguir con las lecciones siguientes, pero recuerda apuntarte en un papelito (vale tambin
una Hoja de Excel o del Notepad) los siguientes datos:

Nombre de usuario para el Hosting.


Contrasea de tu cuenta de Hosting.
Direccin FTP con la que subir tus datos a la red.
Direccin de tu pgina web.
Ahora seguramente te suene a chino todo eso, pero tras leer esa seccin sabrs lo que
significa cada cosa. Aprenders 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 podrs aprovechar las lecciones al 100%, aunque tambin aprenderias cosas, claro. Sera
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 seccin para cada consulta, salo sin que te de vergenza preguntar tonterias y
no te arrepentirs.

Configurar Html-Kit para el nuevo alojamiento


Ahora se supone que ya tienes los datos de los que te habl en la pgina anterior,
nombre de usuario, contrasea, direccin del FTP y adems conoces la direccin de tu
nueva web. Recuerda que puedes registrarte varias veces, con nombres distintos para crear
ms de una cuenta y por tanto tener ms de una pgina web, por tanto, olvida usar estas
lecciones para crear la pgina que tienes en la cabeza. Mejor sigue las instrucciones al pie
de la letra hasta el final y una vez que aprendas podrs hacer lo que te de la gana en otra
cuenta, con tu pgina web definitiva, oki? Es para que no te lies durante estas lecciones.
Terminado el sermn, je je je, pasamos a configurar el Html-Kit para poder subir la
pgina de la leccin al nuevo servidor, oki?

Configuracin 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, vers.
Abre tu Html-Kit y en la barra de arriba, donde pone Workspace escoge la opcin Aadir
Carpetas/Servidor FTP > Aadir Servidor FTP, como en la imagen de abajo:
Configurar Html-Kit para el nuevo alojamiento
Ahora se supone que ya tienes los datos de los que te habl en la pgina anterior,
nombre de usuario, contrasea, direccin del FTP y adems conoces la direccin de tu
nueva web. Recuerda que puedes registrarte varias veces, con nombres distintos para crear
ms de una cuenta y por tanto tener ms de una pgina web, por tanto, olvida usar estas
lecciones para crear la pgina que tienes en la cabeza. Mejor sigue las instrucciones al pie
de la letra hasta el final y una vez que aprendas podrs hacer lo que te de la gana en otra
cuenta, con tu pgina web definitiva, oki? Es para que no te lies durante estas lecciones.
Terminado el sermn, je je je, pasamos a configurar el Html-Kit para poder subir la
pgina de la leccin al nuevo servidor, oki?

Configuracin 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, vers.
Abre tu Html-Kit y en la barra de arriba, donde pone Workspace escoge la opcin Aadir
Carpetas/Servidor FTP > Aadir 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 dnde van apuntados.
(1) Aqu pon la direccin de tu FTP. Suele empezar por ftp.nombredelservidor.. Otras
veces en lugar de por ftp comienza por www, cada hosting es algo firerente. En la imgen
de arriba puedes ver los datos que yo puse para la configuracin del Ftp de una cuenta
creada en Razy (recomendado para seguir el curso).
(2) Aqu se pone el puerto de conexin. 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 nmeros aleatorios,
como puedes ver en la imagen.
(4) La contrasea o password.
(5) Activa esta casilla si no quieres tener que estar escribiendo la contrasea cada vez
que quieras conectar tu Ftp.
(6) Es solo el nombre que aparecer en la ventana Workspace del Html Kit. Pon lo que
ms 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 evitars perderte cuando me refiera a esa carpeta. Luego, para tus trabajos la
puedes llamar como te de la gana, claro.
(7) En ocasiones al registrarte en un servidor te indican la ruta inicial 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 cul ser la carpeta raiz que se va a mostrar. Lo entenders 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 quizs te cueste conectarte.
Razy por ejemplo pide que se active. Tiene que ver son los puertos que se usan para la
conexin.... un rollo, vamos, je je.
El resto de opciones de esa pestaa 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 sealada 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 algn mensaje de "En construccin". Esa pgina 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, podra ser que:

Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse.


Tendrs 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 conexin de FTPs. Pruebalo entonces desde casa.
Los datos que has colocado no han sido escritos correctamente. A veces copiar y
pegar no funciona (pues aade un espacio en blanco al final). Prueba a
escribirlo a mano.
Puede que los datos de usuario o contrasea los pusieras con alguna mayscula
y has de escribirlo igual que lo pusiste al registrarte.
No has pagado la conexin a internet este mes o el gato le ha dao un bocao al
cable...
Si no logras conectarte verificando estas medidas, pregntanos en el foro
CCTW.
Qu? Ha sido facil? Si tienes problemas con esto lanza tu pregunta en el Foro CCTW, en la
seccin "Problemas de Conexin", oki? y recuerda indicarnos cul es tu hosting para poder
ayudarte mejor, y la direccin, etc, etc.

Subir el index.html de tu pgina 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". Tambin
tenemos el ftp configurado y lo podemos ver en la misma ventana, debajo de la carpeta
anterior con un smbolo a su izquierda de color azul. Estos smbolos azules indican que se
tratan de carpetas de servidores (archivos en la red) mientras que los amarillos indican que
son locales (estn en tu ordenata).
Ahora vamos a ver cmo 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" podrs ver qu archivos hay en tu servidor (hosting) en estos momentos. Dale y
vers que aparece un archivo index.html
Este archivo index.html es el primero que lee el navegador cuando se teclea la direccin
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.

Subir el index.html de tu pgina 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". Tambin
tenemos el ftp configurado y lo podemos ver en la misma ventana, debajo de la carpeta
anterior con un smbolo a su izquierda de color azul. Estos smbolos azules indican que se
tratan de carpetas de servidores (archivos en la red) mientras que los amarillos indican que
son locales (estn en tu ordenata).
Ahora vamos a ver cmo 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" podrs ver qu archivos hay en tu servidor (hosting) en estos momentos. Dale y
vers que aparece un archivo index.html
Este archivo index.html es el primero que lee el navegador cuando se teclea la direccin
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.

Cmo 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 botn
derecho del ratn y escoger "Delete..." que significa Borrar. Al final aprendes ingls y todo,
je je je.
Te preguntar si ests 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 dirs que si, je je je. Dale sin miedo.
Tenemos ahora el hosting totalmente vacio. Vers 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
sera pinchar desde la carpeta local y arrastrarlos hasta la otra, pero por el momento el
Html Kit no nos permite esa opcin. Ando investigando si hay algn mod para arreglar esto,
pero por el momento nos tendremos que conformar con el mtodo siguiente.
Vamos a subir el archivo index.html al hosting. Para ello hacemos clic con el botn
derecho del ratn 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 opcin "Connect" que significa "Conectar al
servidor". Si no te aparece activada es porque ya est conectado:
Despues hacemos lo mismo, clic con el botn derecho del ratn y escogemos esta vez la
opcin "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 sera 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 pgina web escribiendo en tu
navegador la direccin, vers algo parecido a la pgina web del ejemplo que estamos
haciendo. Concretamente vers esto:

No se ve ni la sonrisa, ni la imagen de fondo, ni el buzn ni se estn respetando los


estilos css. Por qu puede ser? Este es el error ms frecuente al principio y por eso te pido
que prestes atencin a esto.... Si no subes el archivo correspondiente, no se ven los
elementos. Si no se ve el buzn es porque no se ha subido (upload) el archivo del dibujo del
buzn. Lo mismo para el fondo. Y si los estilos no se estn respetando es porque no se ha
subido an la Hoja de Estilo (estilos.css). Obvio verdad? Pues vers como caes alguna vez,
je je.
En la pgina siguiente aprendemos a subir el resto de archivos y as arreglamos el
problema.

Subir el resto de archivos al servidor


Esto es fcil, 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 botn derecho del ratn sobre la carpeta azul y pulsando
en "Connect".
2.- Botn 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
podrs seleccionar varios archivos de una sola vez.
Vers 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 botn derecho del ratn sobre el nombre de la carpeta "web-ejemplo-
cctw-internet". Selecciona la opcin New + Create New Folder. Si no te aparece activa
tendrs que conectar primero el Ftp (botn 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 minsculas) 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 algn 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 despus
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 algn cambio o mejora en el
ejemplo podremos subirlo al servidor (o hosting) para ver como va quedando. An nos
queda mucho por hacer, as que... paciencia y nimo.
Por cierto, si quieres ver tu plantilla.html en tu servidor despus de haberla subido,
basta con escribir su direccin en tu navegador. Su direccin ser la misma que escribes
para ver el index, seguido de /plantilla.html
Es decir, si tu direccin es http://yomismo.onlinewebshop.net/ la direccin de la
plantilla ser http://testeando.onlinewebshop.net/plantilla.html

Como colocar bordes a la plantilla de nuestra pgina 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 podra estropearnos el aspecto de nuestra pgina. Imagina un
rectngulo. Si le definimos un borde de 10 pixeles de anchura, unos navegadores pintan ese
borde por fuera de ese rectngulo, mientras que otros lo pintan por dentro del rectngulo.
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 vern como nosotros queremos. La forma que
aqu proponemos es sencilla y procura que la pgina web se vea idntica usando cualquier
navegador.

Dnde se define un borde


Si an te acuerdas de lo explicado al principio de las lecciones (esperemos que s...) nos
propusimos definir los contenidos en el cdigo html de las pginas dejando la definicin del
aspecto en la Hoja de Estilo. Como los bordes son ms aspectos decorativos que contenidos
en s, vamos a definirlos en la Hoja de Estilo. As adems 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 pginas de la web.

Cmo 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 lnea continua y black
(negro) ser el color que queremos que tenga la lnea de borde. Hay otras formas de definir
el borde, pero para el ejemplo nos basta con saber esto. Cuando quieras aprender ms
cosas sobre el Border solo tienes que visitar la seccin Curso de Estilos CSS de
ComoCrearTuWeb.
La lnea anterior crea por tanto un borde de 1 pixel de ancho, con una lnea 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. Cmo podramos hacer esto?

Dibujar el borde solo por algunos lados


Para dibujar el borde solo por un lado, se pone esta lnea 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 lneas anteriores que
queramos, separadas por punto y coma ";".

Veamos un ejemplo de aplicacin 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 haba .......... ; 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 podrs ver como aparecen bordes negros a los lados de la capa "contenidos".

Problema con los distintos navegadores


El objetivo de toda pgina 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 tambin definido un
ancho concreto mediante el width, es decir, no le podemos asignar una cantidad numrica,
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, ms 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
definicin de estilo de la capa contenido la propiedad float:left que en realidad no nos
haca mucha falta.
Ahora s que se ve correctamente en todos los navegadores... o al menos.. eso espero. Si
no es as dmelo en el Foro CCTW vale?

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 deca... "Si la capa tiene definida una
cantidad numrica 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 aadiendo esto de
abajo entre los corchetes de la Hoja de Estilo estilo-general.css:

border: black 1px solid


quedando esa lnea 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 aparecera un borde de 2 pixeles entre esa capa y la capa navegacion, (1
pixel definido en la capa navegacion ms otro pixel definido para la capa cabecera). Por
tanto y para no tener unos bordes ms 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 pgina tiene
mejor pinta. En adelante la mejoraremos an ms hasta que quede totalmente
profesional...

Esquinas redondeadas para las capas de la web


Los bordes no quedan mal del todo, pero si consiguiramos redondear las esquinas ya
sera 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. Cmo? Simplemente dibujando el contorno redondeado
en una imagen y colocndola despus en la capa como imagen de fondo. De este modo no
solo podemos conseguir el redondeado, sino tambin cualquier otra forma que seamos
capaces de dibujar, como por ejemplo lazos, sombras de colores, etc, etc (el etc depende
solo de tu imaginacin).
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 seccin
en la que se habla del Paint Shop Pro (PSP) que quizs te sea de ayuda para aprender a
dibujar con el ordenador.
Para no mezclar mucho las cosas, partirmos aqu de algunas imgenes ya hechas. Las
usaremos para este ejemplo de pgina web que estamos haciendo y te dejo a t que crees
las tuyas para que la pongas en tu propia web, oki?
Para empezar, cpiate estas dos imgenes y pgalas en la carpeta "objetos" para poder
seguir estas lecciones. Por si no recerdas cmo se copiaban imgenes de otras webs, te
recuerdo que solo tiene que hacer clic con el botn derecho del ratn sobre la imgen y
escoger la opcin "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 imgenes con extensin gif y con fondo transparente. Gurdalas ponindoles
de nombre curva-superior.gif y curva-inferior.gif
A continuacin veremos paso a paso como poner estas imgenes en la parte alta y baja
de la pgina web para conseguir un efecto ms profesional.

Una capa nueva para el borde superior


La imgen de la curva de la parte superior de la pgina web la vamos a poner como una
imagen de fondo (un gif) en una nueva capa que vamos a insertar en la pgina web, justo
que quede al principio de todas las dems. La vamos a llamar curva-superior. Ya sabes, por
un lado escribimos unas lneas en el cdigo html de la plantilla.html y por otro lado
definiremos las propiedades de esta nueva capa en la Hoja de Estilos llamada estilo-
general.css
Abre el archivo plantilla.html con tu Html Kit e inserta esta lnea justo entre la lnea de
la capa glogal y la de contenido:

<div id="curva-superior"></div>
Ha de quedar por tanto as:

.....

<div id="global">

<div id="curva-superior"></div>

<div id="cabecera">Bienvenidos a mi web</div>

.....
Como vers, esta lnea no tiene contenido ninguno. Realmente no le hace falta pues lo
nico que queremos ponerle es la imagen de la curva de antes, pero eso lo vamos a definir
con estilos css, no en el html de modo que se va a quedar as, vacia.
Ahora abre la hoja de estilos estilo-general.css e inserta esta otra lnea donde definimos
las propiedades de la capa curva-superior:

#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-


repeat: no-repeat }
Qu hemos definido conesa lnea de estilo? Le hemos dicho que la imagen de fondo ser
curva-superior.gif, que est en la carpeta objetos y que no se repita. Si ahora guardas la
hoja de estilo estilo-general.css y haces vista previa desde el Html Kit vers este resultado.
Vaya mierda, que decepcin. Se ve exctamente lo mismo que antes de insertar la capa,
nada de imagenes con bordes redondeados... qu ha pasado? Bueno, como la capa curva-
superior no contiene nada de nada en su interior (en el html) el navegador la muestra con
una anchura de cero y una altura cero, por lo que vemos... cero de esa capa y por tanto
nada de imagen de fondo. Para arreglarlo basta con ponerle algo de contenido a esa capa,
como por ejemplo una letra o una palabra, pero como no quiero que aparezca nada de eso,
lo que haremos ser definirle en la hoja de estilo una anchura y una altura. Cul? pues la
misma que tiene la imagen y asi nos aseguramos que se ve entera.

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;

width:800px ;

height: 12px }

Has visto? Con width: 800px le indicamos que la capa ha de tener 800 pixeles de ancho y
con height: 12px le decimos que su altura ha de ser de 12 pixeles, igual que la imagen de
fondo. Ahora es de esperar que se vea y adems completa, vamos a ver....
Bueno, la cosa va mejorando, aunque ahora encontramos otra cosilla que no nos gusta, y
es que haciendo vista previa con Internet Explorer (con el Firefox no ocurre) aunque la
imagen sale prefectamente, aparece un espacio en blanco separando la imagen del resto de
la pgina y queda bastante feo.
Esto se arregla muy fcil aadiendo en la hoja de estilo, adems de la altura y la anchura
de antes, una palabra mgica nueva, que no vamos a explicar ahora pero que puedrs
encontrar en el Curso de Estilos CSS. Lo que hemos de aadir es esto:

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;

width:800px ;

height: 12px ;

overflow : hidden }
Ahora, si guardas la hoja de estilo y haces vista previa si que se ve correctamente,
aunque ahora parece que sobran dos cosas. Por un lado el borde entre la imagen y la capa
donde pone bienvenido sobra y por otro lado, si le damos color de fondo blanco (white) a
esa capa rosa, el efecto ser an mejor.
Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que
pongo en rojo abajo:

#cabecera { background-color: pink ; border-left: black 1px solid ; border-right:


black 1px solid ; border-top: black 1px solid }
y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la
lnea as:

#cabecera { background-color: white ; border-left: black 1px solid ; border-right:


black 1px solid }
El efecto conseguido, aunque no es asombroso, es ms profesional.

Borde redondeado para la parte inferior


Lo mismo que hemos hecho con la parte de arriba podemos volver a hacerlo para la
parte inferior de la pgina para conseguir un mejor aspecto. Te lo recuerdo paso a paso y
as terminas de pillarlo, vale?
1.- Creamos una nueva capa en plantilla.html llamada curva-inferior sin ningn
contenido dentro. La colocamos al final de todas las capas:

.....

<div id="pie">Este es el pi de pgina</div>

<div id="curva-inferior"></div>

</div>

.....
2.- Abrimos estilo-general.css e incluimos la definicion de la nueva capa curva-inferior
que ser igual que la de antes pero cambiando el nombre de la imagen de fondo:

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;

background-repeat: no-repeat ;

width:800px ;

height: 12px
overflow: hidden }

3.- Quitamos el borde de abajo de la capa pie (ya sabes, eliminamos border: black 1px
solid que da borde a los cuatro lados y aadimos los tres lados que queremos, left, right y
top) y adems le ponemos color blanco (white) de fondo a esa capa:

#pie { background-color: white ;

border-left: black 1px solid ;

border-right: black 1px solid;

border-top: black 1px solid }

Repito, he eliminado el border: black 1px solid que le daba borde a los cuatro costados
y he colocado en su lugar el borde por la izquierda, derecha y arriba solamente.
4 .- Guardamos la hoja de estilo y obtenemos esta visin.

Uploading... Subiendo los archivos al servidor


Aunque ya lo hemos hecho antes con el index.html y algunos archivos de la carpeta
objetos, vamos a repetir cmo se suben los archivos al servidor y as aprovechamos para
subir estos ltimos que hemos creado, vale? As quedar todo un poco ms claro y no lo
olvidaremos (espero...).
Si no recuerdo mal, desde esa vez anterior tenemos varios archivos nuevos, como las dos
imgenes de la carpeta objetos, los de arriba y abajo de la plantilla, y por otro lado
tambin hemos variado la plantilla.html y la hoja de estilos estilo-general.css
Recuerda que cuando hacemos un cambio en los archivos de nuestra pgina web, estos
cambios solo estn en nuestro ordenador. De modo que para que los visitantes de la web
puedan verlos, tenemos que subir esos mismos archivos con los cambios realizados al
servidor. Si no, los visitantes seguiran viendo la versin antigua.
Por tanto, los archivos que tenemos que subir son:

curva-superior.gif
curva-inferior.gif
plantilla.html
estilo-general.css
Para subir los archivos plantilla.html y estilo-general.css basta con hacer clic con el
botn derecho del ratn sobre la carpeta azul web-ejemplo-cctw-internet, escoger la
opcin "connect" para conectar el FTP al servidor, depus hacer clic de nuevo sobre el
mismo sitio y escoger la opcin "Upload...", seleccionar el archivo que queremos subir al
servidor (puedes seleccionar esos dos de una sola vez manteniendo pulsada la tecla Control
a la vez que haces clic en varios de los archivos) y listo. Si el archivo ya exista, te dir que
ya existe y te pregunta si lo quieres sobreescribir.
Dile que s y listo, archivo actualizado.
Para subir los dos archivos de las imgenes de la parte alta y baja de la plantilla que
acabamos de usar en las pginas anteriores, se hace del mismo modo, pero haciendo clic
derecho sobre la carpeta objetos antes de elegir Upload. En caso contrario los archivos irn
a parar a la raiz del servidor, es decir, fuera de la carpeta objetos y claro, no aparecern
en la web, pues el navegador los va a buscar dentro de esa carpeta. Si te ocurriera eso,
simplemente borra los archivos que se han colado fuera de la carpeta y vuelves a subirlos,
esta ves correctamente.
Ha de quedar una cosa as en la vista de Workspace del Html-Kit:
Cmo colocar el logotipo con enlace en la web
Ya se que an es pronto para que tengais el banner o logotipo de la web listo, pues
seguramente an nisiquiera tienes claro de qu va a tratar, pero vamos a explicar cmo
insertar el logo en la parte superior y cmo colocarle un enlace para que al hacer clic sobre
l se dirija al visitante a la pgina principal. Cuando ms adelante tengas el banner o
logotipo terminado solo tendrs que sustituir uno por otro.
En cualquier caso, te recuerdo que este ejemplo que estamos "fabricando" debes seguirlo
al pie de la letra para no perderte en ningn paso. Luego, en tus experimentos puedes
colocar lo que te de la gana , oki? je je.
Bien, vamos a partir de un banner genial, el de CCTW que nos ha creado nuestra amiga
Yaneth (con tu permiso...). Imagino que ya sabes copiar y pegar imagenes desde una web,
verdad? Pues copiate este banner que dejo abajo y pgalo dentro de tu carpeta objetos
para seguir.

Ahora que lo has pegado en tu carpeta objetos, cambiale el nombre. Ha de llamarse


logotipo.gif, oki?

Este logotipo.gif lo vamos a situar en la parte superior de cada una de las pginas, por lo
que la capa correspondiente ser el div llamado cabecera. Para facilitar la colocacin de
los elementos que pongamos en la cabecera, que mejor que crear dos divisiones dentro de
ese espacio o capa? As, ser ms fcil colocar el logotipo a la izquierda y dejar un espacio
a la derecha, en otro div, para en un futuro colocar una foto guapa o quien sabe, quizs
publicidad para ganar algo de dinero extra y pagarnos el hosting de la web, no?
Pues segn eso, vamos a crear dos divs dentro del div cabecera. Los llamaremos...
logotipo y ... publicidad, por qu no. As que, abre la plantilla.html con tu Html Kit, y ve a
la vista de cdigo para cambiar esta lnea (te recuerdo que los cdigos Html los escribo en
azul y los de la hoja de estilos en verde):
<div id="cabecera">Bienvenidos a mi Web</div>

por estas otras:

<div id="cabecera">

<div id="logotipo"></div>

<div id="publicidad">Bienvenidos a mi Web</div>

</div>

Como ves, hemos metido las dos capas nuevas dentro de la capa cabecera, y hemos
quitado el mensaje de Bievenida de la capa cabecera para colocarlo directamente dentro
de la capa publicidad, por poner algo mientras en ella.
Ahora toca colocar dentro el logotipo. Ya vimos cmo colocar una imagen y tambin
cmo hacerle un enlace cuando vimos lo del buzn de correo, te acuerdas? Pues ahora es
casi igual (pero en lugar de mailto:tudireccion@email.com se pone la ruta de la pgina
destino). Escribimos la lnea de la imagen dentro del div logotipo, quedando esa lnea de
este modo:

<div id="logotipo">

<img src="objetos/logotipo.gif" width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio">

</div>

Lo que he puesto dentro del alt="" es el mensaje que aparecer en algunos navegadores
si dejamos el cursor sobre el logotipo.
Ahora nos toca crear y darle propiedades a esa nuevas capas en la hoja de estilos estilo-
general.css as que la abrimos y aadimos esto (le he puesto colores de fondo para ver
donde est cada una):

#logotipo {background-color: brown}

#publicidad {background-color: pink}

Para guardar un cierto orden, incluye esas dos lineas justo despus de la definicin de la
capa cabecera de la hoja de estilo. As, en orden, nos ser ms fcil encontrarlo todo.
Bien. Qu propiedades le damos a estas dos capas? Para empezar habra que definirles la
anchura. En principio le daremos un ancho de 280 pixeles a logotipo, pues es un poco ms
que lo que ocupa la imagen (270px). A publicidad le daremos el resto, es decir, 800-280-
2=518 pixeles. (ese 2 es un pixel del borde izquierdo ms otro pixel de grosor del lado
derecho de esa capa, pues los grosores tambin ocupan un espacio).

#logotipo {background-color: brown ; width:280px}

#publicidad {background-color: pink ; width:518px}

Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos
capas estn una encima de otra. Cmo se evitaba esto ? Venga, haz memoria... qu
propiedad permite que podamos poner una a un lado y la otra al otro lado? A ver si te haces
una chuleta! (en Mejico creo que se llama acorden, je je).
Por si no te acuerdas te ayudo un poco. Vamos a ponerle float:left a logotipo para
colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha.

#logotipo {background-color: brown ; width:280px ; float:left }

#publicidad {background-color: pink ; width:518px ; float:right }

Guardamos la hoja de estilo y hacemos vista previa en plantilla.html para ver cmo ha
quedado... excto, una verdadera mierda , je je je. Vamos a arreglarlo un poco. Para
empezar vamos a darle una altura concreta a la capa cabecera, por ejemplo de 85 pixeles
(un poquito ms que la altura del logotipo que es 80px). As la capa gris que vemos que se
mete dentro del espacio de publicidad respetar esa dimensin. As que dejamos cabecera
as:

#cabecera {background-color: white ; border-left: black 1px solid ;

border-right: black 1px solid ; height:85px}

Con esto la cosa se arregla bastante. Ahora solo queda bajar un poco el texto de
Bienvenida y quizs hacer el tamao de letra algo mayor (esto del tamao de letra lo vemos
luego). Modificamos en la hoja de estilos la capa publicidad para dejarla as:

#publicidad {background-color: pink; width:518px ; float:right ; margin-top:25px}

Ahora, si guardas la hoja de estilo y haces vista previa s que se ve realmente bien. Ya
pudes eliminarle los background-color a las capas logotipo y publicidad, pues ya no
necesitamos esos colores para saber dnde acaba cada una. Tras eliminar eso vuelve a
guardar la hoja de estilo. Esto ya pinta mejor, no?
Solo nos queda ponerle el enlace hacia la pgina principal. Eso lo vimos ya, as que pongo
directamente la lnea, vale? Abres la plantilla.html y a esta lnea:

<div id="logotipo">

<img src="objetos/logotipo.gif" width="270" height="80"


alt="Haz clic aqu para volver a la pgina de inicio">

</div>

le aades esto que marco en negrita:

<div id="logotipo">

<a href="index.html">

<img src="objetos/logotipo.gif" width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio">

</a>

</div>

Listo, haz vista previa y verifica que todo va bien. Ahora no solo tenemos el banner, sino
que tenemos preparado un hueco para poder poner un fondo que mejore el aspecto o
publicidad, si lo deseamos. Para cualquiera de esas dos cosas, habra que retocar algo,
como por ejemplo eliminar el margin-top:25px de la capa publicidad en la Hoja de Estilos,
pero es algo que veremos en su momento. Si ves que se me olvida me lo recuerdas en el
Foro CCTW!

Cmo colocar el men horizontal en enlace en la web


Aunque ms adelante veremos como crear mens ms complicados en la parte superior,
vamos a comenzar por uno sencillo para no asustarnos e ir cogiendo base.
Antes de crear tu propia web es muy importante que tengas claro un par de cosas. Lo
primero es saber de qu vas a hablar en la web y lo sengundo es tener ms o menos claro
cmo vas a estructurar esos contenidos. Es decir, desglosar lo que quieres contar en
secciones y subsecciones. De ese modo sabrs qu secciones vas a colocar en el men
superior.
A la hora de crear la web, colocaras las secciones en el men horizontal superior y al
hacer clic sobre cada una de esas secciones, se abrira la pgina principal de esa seccin
mostrando en el men vertical lateral (el de la izquierda que ya hemos colocado en este
ejemplo) las subsecciones.
Por ejemplo, digamos que voy a crear una web de un grupo de msica. Las secciones que
se me ocurren son, "Presentacin", "Historia del grupo", "Trabajos musicales", "Conciertos" y
"Zona de Descarga". Luego, cada una de esas secciones principales pueden desglosarse o
dividirse en otras subsecciones. Por ejemplo, en la seccin "Trabajos Musicales" podran
aparecer las subsecciones "Disco 1", "Disco 2"...."Disco 9". La seccin descargas podra
dividir se "Canciones", "Videos", "Poster y Carteles", "Letras"....
Para que entendais la idea, las secciones principales irian en el men horizontal que
vamos a aprender a crear ahora mismo, mientras que las subsecciones irian en el men
lateral.

Creando el Men Horizontal


El men horizontal lo vamos a colocar en la capa que hemos llamado navegacion. Es esa
capa gris horizontal que hay debajo del logotipo. As que, como imaginars, tendremos que
retocar un poco el html de la plantilla y luego colocar las propiedades apropiadas en la hoja
de estilo para la capa navegacion.

Colocando el Html para el men


Como siempre, abre la plantilla.html con tu Html-Kit. Ve a la vista de cdigo y
encontrars la lnea de la capa navegacion:

<div id="navegacion">Barra de Navegacin</div>

Borraremos las palabras Barra de Navegacin y las sustituiremos por una lista, en la que
cada elemento ser un enlace del men. Las listas en Html empiezan con un <ul> y
terminan con un </ul>. Dentro de una lista cada elemento de la misma empieza por un <li>
y termina con un </li>, te acuerdas?
La lista completa con los enlaces sera algo as:

<ul>

<li>Seccin 1</li>

<li>Seccin 2</li>

<li>Seccin 3</li>

<li>Seccin 4</li>

</ul>

Pues ese es el cdigo Html que tenemos que poner dentro de la capa navegacin,
eliminando claro el texto que tena de "Barra de Navegacin" quedando al final as:

<div id="navegacion">

<ul>

<li>Seccin 1</li>
<li>Seccin 2</li>

<li>Seccin 3</li>

<li>Seccin 4</li>

</ul>

</div>

Cuando hagas tus experimentos y quieras aadir o eliminar enlaces en el men


horizontal, solo tendrs que irte a la plantilla.html y aadir o eliminar lneas <li> Seccin
X</li> a este trozo de cdigo de arriba.
Si haces vista previa de la plantilla vers algo as. Sorpresa? Puedes ver que los
elementos no aparecen uno al lado de otro sino un debajo del otro. Esto es normal, pues las
listas son as. Pero nosotros vamos a cambiar eso con solo poner la palabra mgica
adecuada en la hoja de estilos, que para eso est.
Abre el archivo estilo.general.css con el Html-Kit y vamos a modificar la lnea de la capa
navegacion, que hasta este momento era as:

#navegacion {background-color: gray ; border: black 1px solid }

Para empezar vamos a intentar que todos los elementos de este menu de navegacin
aparezcan uno al lado de otro, en lnea. Para ello usaremos la propiedad float, que hace
que los elementos floten y se desplacen hacia el lado que queramos. Si a definimos que
todos los elementos floten hacia la izquierda, el primero de ellos se ir hacia la izquierda,
el segundo igual quedando al lado del anterior y as con todos los demas. Vamos a probarlo
a ver qu pasa.
Al querer ponerle float:left a todos los elementos de la lista, parece lgico pensar que
en la hoja de estilo hay que ponrselo a los li que haya dentro de la capa navegacion (hay
que evitar que los li de la otra capa del men lateral tomen esa propiedad), as que
aadiriamos esta otra lnea en la hoja estilo-general.css:

#navegacion li {float:left}

Haciendo vista previa vemos este resultado en la plantilla. Como era de esperar... vemos
un autntico churro, pero vamos a terminar de arreglarlo. Normalmente, si le damos una
altura concreta a la capa, se arregla todo. Vamos a colocarle height:20px a la capa
navegacion (no a #navegacion li {...., sino a #navegacion {.... ) y veamos que pasa:

#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

Ahora s que sale realmente como queremos. Nos faltan an algunas cosillas, como
eliminar el punto negro de la izquierda de cada elemento del men lateral y como ponerle
unos margenes adecuados para separarlos un poco.
En la pgina siguiente aprenderemos a mejorar an ms el aspecto de este men
horizontal. Vers que bien nos va a quedar .

Eliminando el punto negro del men Horizontal


Para eliminar ese puntito tan molesto, hay que ponerle la propiedad list-style:none a
alguna de las lneas de la hoja de estilo. A cul crees que hay que ponrsela? Pues por
ejemplo a la lnea #navegacion li, pues esa lnea contiene las propiedades de cada una de
las secciones del men, verdad? Vamos a ver que pasa. Aade esto:

#navegacion li {float:left ; list-style:none }

Conseguimos esta otra vista previa de la plantilla. Ahora no aparecen esos punto, que
bien.

Acomodando el margen de los enlaces del men horizontal


A estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer
todos los enlaces del men horizontal tan pegados se muestren un poco ms separados.
Imagino que sospechas que eso se hace o bien con el margin o bien con el padding.
Reconozco que es un poco complicado saber si hay que usar el margin o el padding, a m me
ocurre lo mismo. Siempre recurro a la foto del apartado Margin o Padding para aclararme,
je je je. Pero ante la duda lo mejor es probar, si uno no va bien, usa el otro.
Vamos a intentar separar cada enlace del men. Para ello le pondremos un margin al los
elementos li de la capa navegacion. Para ello ya sabes, hacemos esto:

#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }

Si recuerdas, el orden de esas cifras era: la primera cifra para el margen superior, la
segunda para el de la derecha, la tercera para el margen inferior y la ltima para el de la
izquierda. Segn la lnea de arriba, hemos dejado unos margenes de 10 pixeles por la
izquierda y derecha de cada enlace del men. Queda as ahora la plantilla de nuestra web.
Parece un poco escaso. Vamos a cambiar los dos 10px por 20px para aumentar la
separacin entre ellos, quedando ahora as la plantilla. Ahora queda mejor.

Dando margen al conjunto de enlaces


Hemos visto como separar los enlaces entre ellos, pero an podemos dejarlo mejor si los
centramos, no? Como no consigo centrarlos fcilmente vamos a hacerlo de otro modo.
Vamos a colocarle un margen a la capa navegacion ul por la izquierda de unos 50px. Con
eso conseguimos mover a la derecha todo el grupo de enlaces. La nueva lnea de css que
hay que poner a la hoja de estilos es esta:

#navegacion ul { margin-left: 50px }

Ahora tendremos este aspecto. Como ves, hemos desplazado todos los enlaces un poco
(50 pixeles) a la derecha. Vamos a aumentarlo a 180px para que quede ms centrado. Este
el el resultado.
Ya sabes que cuando hagas tus propios experimentos basados en este ejemplo, si aades
ms enlaces a este men horizontal tendrs que disminuir estas cantidades para centrarlo.

Colocando enlaces al men


Solo nos falta ya colocarle los enlaces a los elementos del men. Eso si que debes
saberlo ya, pero lo repetimos para recordarlo. Como an no sabemos a qu pgina mandar
al visitante cuando hagan clic en ellos, en lugar de ponerle la ruta de la pgina destino le
colocaremos un simple #. Eso hace que los enlaces se muestren como tales, pero al pulsar
sobre ellos no te mandan a ningn lado.
Para convertir los elementos de la lista del men horizontal en enlaces, basta con
colocarle esto que os sealo en negrita al cdigo inicial que pusimos en el archivo
plantilla.html:

<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

<li><a href="#">Seccin 4</a></li>

</ul>

</div>

Con eso, la plantilla se ve ahora de esta forma.


Fjate que ahora los enlaces del men horizontal se comportan como los del men
lateral, es decir, aparecen rojos y sin subrayar y cuando colocas el cursor del ratn sobre
ellos aparecen con fondo gris claro y con lnea bajo ellos. Esto es porque cuando definimos
las propiedades a las etiquetas a en la hoja de estilo, lo hicimos de forma general, es decir,
para TODOS los enlaces. Ms adelante aprenderemos a crear varios tipos de enlaces, por si
queremos que los del men lateral se comporten de un modo distinto a los del men
horizontal o incluso distintos a otros elementos del cuerpo de la pgina web.

Mejorando el men lateral


El men lateral qued ms o menos bien, pero estars de acuerdo en que puede
mejorarse, verdad? Pues vamos a ello. Lo que vamos a ver aqu es cmo darle la apariencia
que tienen los mens de la web de ComoCrearTuWeb, que pueden gustarte ms o menos,
pero eso da igual, pues una vez sepas hacer lo que te propongo a continuacin, sers capaz
de mejorar su aspecto. Ten en cuanta que lo que yo intento ensearte es a crear el
"esqueleto", pero una vez sepas esto si tienes un poco de gusto y buena mano podrs
dejarlo mucho ms guapo que el mio, pues ser solo cuestin de ponerle buenos grficos,
imagenes mejores, colores ms vistosos.. ah es donde entra el genio que llevas dentro... o
no... je je je.
Bien, se trata de escoger dos imagenes. Una se coloca arriba del todo del men lateral y
la otra justo debajo. Como ese men ir creciendo hacia abajo conforme vayamos
incorporando nuevas secciones (enlaces) al mismo, lo haremos de un modo algo peculiar.
La imagen de arriba ser fija y tendr una altura concreta. En cambio la imagen de
abajo ha de ser bastante larga, lo suficientemente larga (hacia abajo) como para contener
el mximo nmero de enlaces que tengamos previsto colocar en un futuro en cada uno de
los mens laterales (digo cada uno porque cada seccin tendr su propio men lateral).
Las imgenes que vamos a utilizar para el ejemplo que estamos creando son las
siguientes:

Igual que hemos hecho en otras ocasiones, guarda estas dos imgenes en tu carpeta
objetos y ponles estos nombres: menu-curva-superior.gif y menu-parte-inferior.gif
Imagino que imaginas lo que toca hacer ahora... un poquito de Html y otro poco de CSS y
asunto concluido. Ser fcil. Estate atento y podrs aplicar luego todo esto a tu propio
proyecto.
Retocando los cdigos
El cdigo Html completo del men lateral era por el momento este:

<div id="menu">

<ul>

<li><a href="#">Enlace 1</a></li>

<li><a href="#">Enlace 2</a></li>

<li><a href="#">Enlace 3</a></li>

</ul>

</div>

Bueno, realmente es ese pero todas las lneas entre <ul> y </ul> han de estar seguidas
una justo despus de la otra para que el internet explorer muestre bien el men. Yo aqu lo
escribo en lneas separadas para que se vea ms claro, pero acurdate de luego guardar la
plantilla con todas esas lneas seguidas.
La idea de colocar las imgenes anteriores como fondos, pues as no nos molestar a la
hora de escribir los enlaces dentro. Para ello la imagen ms larga se la vamos a poner de
fondo a la capa menu, mientras que la imagen ms corta, la de arriba se la tenemos que
poner a algn elemento de dentro de esa capa. Si se la ponemos de fondo a los enlaces, esa
imagen se repetir con cada enlace, con lo que no nos vale (solo debe aparecer una vez y
adems arriba del todo).
Para remediarlo le vamos a poner un ttulo al men. Como cada seccin tendr su propio
men parece buena idea que ese ttulo sea el nombre de esa seccin. As, si una seccin se
llama "poesias", por ejemplo, pondremos la palabra "Poesias" arriba del todo del men,
como si fuera un ttulo, y al elemento ttulo (h1) le colocaremos ese fondo corto. Y todo
arreglado.
De modo que, lo nico que hemos de retocar en el cdigo Html de la plantilla.html ser
el incluir el ttulo. Si recuerdas de lecciones anteriores, los ttulos se escriben igual que los
prrafos, pero en lugar de usar las etiquetas <p> y </p> se usaban estas otras, <h1> y <h1>
(es un uno, no una ele!).
El men anterior con el ttulo puesto quedara entonces con este cdigo Html:

<div id="menu">

<ul>
<h1>Ttulo de Seccin 1</h1>

<li><a href="#">Enlace 1</a></li>

<li><a href="#">Enlace 2</a></li>

<li><a href="#">Enlace 3</a></li>

</ul>

</div>

El problema que se nos presenta es que nosotros ya habamos definido unas


caractersticas para los prrafos tipo h1, por lo que ahora si las cambiamos, tambin
cambian las propiedades de los ttulos que en un futuro pongamos en el contenido de la
pgina.
Esto se supone que sabemos arreglaro. Queremos definir unas propiedades para los
ttulos del tipo h1, pero solo para los que estn dentro del men, es decir, los que
pertenecen a la capa menu. Te acuerdas como se haca? Je je je, que memoria...
Abre el archivo estilo-general e incluye esta lnea, por ejemplo, debajo de la lnea donde
definimos la capa menu, as seguiremos cierto orden.

#menu h1 {}

Con esa lnea lo que conseguimos es darla propiedades SOLO a los ttulos que hay dentro
de la capa menu, sin tocar para nada los dems. Solo un problema, y es que como los
navegadores leen desde arriba hacia abajo. Te lo explico mejor.
Imagina una casa llamada Body. Dentro de ella hay unas cuantas habitaciones que
llamamos Capas y dentro de cada habitacin o capa hay varios elementos (prrafo, enlaces,
etc). Imagina ahora que la hoja de estilos le cambia los aspectos a los elementos de la casa.
Por ejemplo, si escribo esto:

* {el color del pelo ser rubio}

Todos (el asterisco * indica TODOS los elementos) los habitantes de la casa sern rubios.
Te acuerdas? Nosotros en lecciones pasadas pusimos una lnea similar, que empezaba con un
asterisco.
Ahora imagina que le digo con esta otra lnea:

#cocina {el color del pelo ser moreno}

que todos los elementos de la cocina (la capa cocina) han de ser morenos. Qu ocurre? Al
final sern rubios como deca la lnea de antes o sern morenos como dice esta otra? Pues
como la ltima orden que he dado es la segunda, la de cocina, esa ser la que manda. En
caso de que dos lneas digan distintas cosas para una misma propiedas (altura, anchura,
borde.... color del pelo..) la que al final se muestra en el navegador es siempre la ltima.
Por supuesto, los elementos del bao y del saln siguen siendo rubios, pues la lnea de la
"capa" cocina solo habla de sus elementos, no de los del resto de la casa. Se entiende
ahora? Espero que si, je je. Y si no se entiende, dmelo en el Foro CCTW e intento
explicarlo mejor, oki? Te lo agradecera mucho!
Bien, pues si miras en la hoja de estilo-general.css, vers que tenemos al final del todo
esta lnea:

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;


text-align: center}

Al estar al final, y estar definiendo propiedades para todos los h1 de la web, son esas las
caractersticas que mandan y ser inutil darle otras propiedades en la lnea nueva que
hemos puesto. Por qu? Pues porque sta lnea est despus.
Cmo lo arreglamos? Fcil, la situamos antes de la otra y listo, oki?
Para no perdernos, te dejo la hoja de estilo-general.css tal y como ha de estar ahora
mismo, despus de haber incluido (aunque an vacia) la lnea para definir los ttutlos de
dentro de la capa menu. Comparala con la que tienes por el momento y si no est igual,
sustituyela, oki? Debe tener ese orden para no liarnos lecciones sucesivas:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

p {text-align: justify}

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;

text-align: center}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;

text-align: center}

body {text-align: center }

#global {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;

width: 800px ;

height:12px ;
overflow: hidden }

#cabecera {background-color: white ; border-left: black 1px solid ;

border-right: black 1px solid ; height:85px}

#logotipo {width:280px ; float:left }

#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }

#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }

#navegacion ul { margin-left: 180px }

#contenido {background-color: orange ; border-left: black 1px solid ;

border-right: black 1px solid }

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu {background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px }

#menu li {list-style:none ; margin: 4px 0px 4px 6px }

#menu h1 {}

#pie { background-color: white ;

border-left: black 1px solid ;

border-right: black 1px solid;

border-top: black 1px solid }

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;


background-repeat: no-repeat ;

width: 800px ;

height:12px ;

overflow: hidden }

a {color: brown ; text-decoration:none ; display: block }

a:link {}

a:visited {}

a:hover {color:red ; text-decoration:underline ; background-color: silver}

a:active {}

Si te fijas, he puesto casi arriba del todo las lneas que definen p, h1 y h2. Recuerda
adems que la lnea del asterisco ha de estar por narices la primera de todas. Por qu? Pues
por que si la ponemos en medio o al final, vuelve a poner a cero los margenes y bordes de
las capas que estn definidas antes que ella. Es por lo mismo que acabo de explicarte.
Parece un poco lio tanto cdigo, verdad? Pero imagino que mirndo lnea por lnea ms o
menos sabes de que va todo, no? De hecho lo has ido escribiendo t mismo a lo largo de
estas lecciones... Si no te aclaras mucho siempre puedes empezar desde el principio y
puedes ir repasando porqu se puso cada cosa. No te vendra mal para ir repasando estilos..
No te asustes, pronto, con un poco de ms prctica estos cdigos no tendrn secretos para
t. Te aseguro que muchos de los que se hacen llamar Webmaster no tienen ni idea de
estilos ni de capas. Ya eres mejor que la mayoria!!

Volviendo al men
Guardando estilo-general.css y haciendo vista previa a la plantilla.html podemos ver
esto:
Bueno, quizs quede mejor sin el subrayado y con una letra ms pequea, verdad? Para
eliminarle el subrayado se ponia en la hoja de estilo esto:

text-decoration:none

Para cambiar el tamao del texto se pone esto otro:

font-size:10px

donde 10px es la altura de una letra en pixeles. Hay otras unidades que podemos usar en
lugar de pixeles, pero lo veremos ms adelante.
El caso es que la lnea de estilo-general.css que define a los ttulos de dentro de la capa
menu ha de quedar, por el momento as:

#menu h1 {text-decoration:none ; font-size:10px}

Guardamos la hoja de estilo, hacemos un preview o vista previa y....

Mucho mejor, no? Ahora cmbiale el tamao por 12px que as quizs sea un poco pequea
de ms.
A veces parece mentira como cambia una web con solo ir retocando la hoja de estilos,
verdad?. Sigamos investigando a ver si logramos colocarle las imgenes, vale?

Colocando la imagen superior


Las imgenes de fondo ya sabes ponerlas as que te dejo solo con esto.... je je je. Te has
puesto blanco? ja ja. Venga, te ayudo un poquito.
Ya dijimos que la imagen superior se la ibamos a poner de fondo al ttulo del men, as
que aadimos las palabras mgicas del fondo de imagen a la capa #menu h1, quedando as:

#menu h1 {text-decoration:none ; font-size:12px ;

background-image: url(objetos/menu-parte-superior.gif) }

Si guardas y haces vista previa vers esto:

Nos vamos acercando eh? Vemos dos "fallos". Me encantan los fallos, as aprendemos
ms! je je je.
El primero es que la imagen se repite por la derecha y el segundo fallo es que se ven las
esquinas de color blanco y queda un poco feo.. bueno, bastante feo, si que si.

Evitando el blanco de las esquinas


Esto va a ser rpido. Tan solo hace falta abrir los archivos de las imgenes con un
programa de dibujo (por ejemplo el Paint de Windows) y colorear esas esquinas del mismo
color que vayamos a poner el fondo de la web (que ahora es naranja, pero que pronto
cambiaremos a otro ms mono). As que bastara con eso, colorear las esquinas de naranja y
volver a guardar esas mismas imagenes con el mismo nombre y extensin. (no es necesario
que lo hagas, espera un poco, impaciente! )

Amoldando la anchura de la imagen


Este fallito se arregla con un programa de dibujo, variando su anchura. Por ejemplo con
el Paint de Windows que imagino que lo tenemos todos. Si no lo tienes seguramente
cualquier otro programa sea capaz de hacer lo mismo. Pero para no perder mucho tiempo
te dejo aqu los dos archivos ya arreglados y en otro momento, cuando encuentre un
software gratis de dibujo que est bien os lo explico paso a paso todo (en realidad basta
con decirle al programa que cambie el ancho de la imagen para que tenga 150 pixeles, que
es el ancho que le dimos a la capa menu, de ese modo coincidirn ambos anchos).

Las nuevas imgenes ya retocadas


Las nuevas imgenes, con la anchura adecuada (que coincide con el ancho de la capa
menu) y con las esquinas ya pintadas de naranja son estas dos:

Guarda esos dos archivos (gurdate esas imagenes en objetos), sustityelos por los
archivos que tenas en la carpeta objetos y seguimos.
Si ahora haces vista previa de nuevo, has de ver esto de la foto de abajo. Si no lo ves as,
guarda la plantilla.html, cirrala y vuelve a abrirla con el Html-Kit:

Ahora si! Ahora vamos a por el fondo de la parte inferior. A ver si nos sale tan bien como
este!

Colocando la imagen inferior


Solo se puede poner una imagen de fondo a un elemento, no se le pueden poner dos. La
razn por la que no le hemos puesto un nico fondo que sea el dibujo del men completo es
por que no quiero estar retocando la imagen cada vez que incluya un enlace ms al men.
Con esto que hacemos nos olvidamos de los fondos ya sea el men muy cortito o muy largo,
ya lo vers.
Este otro fondo que ser la parte inferior se lo vamos a colocar directamente a la capa
menu. Para ello, incluimos el siguiente trozo de cdigo css en la hoja de estilo estilo-
general.css:

#menu {background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;

background-image: url(objetos/menu-parte-inferior.gif) }

Haciendo vista previa de la plantilla.html vemos esto (acurdate, antes de hacer vista
previa siempre guarda la hoja de estilo):

Bueno... ahora se ve el fondo, pero no conseguimos ver bien la parte inferior... por qu
puede ser? A ver, a ver... Pues claro! Resulta que si no se indica nada, las imgenes se
colocan pegando su parte de arriba a la parte de arriba de la capa y como la capa es ms
pequea que la imagen no vemos la parte inferior que es la que nos interesa! Lo que nos
interesa realmente es que la parte inferior del fondo se pegue a la parte inferior de la capa
y as podremos ver la curva de la imagen que est en su parte ms baja.
Cmo lograremos esto? Pues solo hay que decir en la hoja de estilo, que en esa capa, la
imagen de fondo ha de alinearse por la parte de abajo. Esto se hace as:

#menu {background-color: yellow ; width: 150px ; float:left ;


text-align:left ; margin: 3px 10px 3px 3px ;

background-image: url(objetos/menu-parte-inferior.gif);

background-position: bottom }

Bottom significa culo o parte de abajo. Haciendo vista previa (como siempre, guarda
antes la hoja de estilo) la cosa queda.... genial, sencillamente genial! Mira:

ltimos Retoques
Fjate ahora. Abre tu plantilla.html con el Html-Kit si la tienes cerrada y aade un tercer
enlace al men. Ya sabes, despus de la lnea del Enlace 3, pones una idntica y le cambias
el nmero 3 por el 4, es decir, aades esto:

<div id="menu">

<ul>

<li><a href="#">Enlace 1</a></li>

<li><a href="#">Enlace 2</a></li>

<li><a href="#">Enlace 3</a></li>

<li><a href="#">Enlace 4</a></li>

</ul>

</div>

Si de nuevo haces vista previa vers como no hay que tocar para nada los fondos del
men, sino que estos crecen con l. Hay que ahorrar trabajo, no? je je je.
Ya para terminar de dejarlo perfecto, aade un padding-top:12px (margen por arriba al
ttulo del men) para separarlo un poco de la franja oscura de la imagen y listo, queda
perfecto, genial, fenomenal... er.. no tengo palabras, casi lloro de emocin, t no? je je.

Tambin vendra bien dejar un poco de margen por la parte inferior, pues parece que el
Enlace 4 est demasiado pegado a la parte baja de la imagen, no? Esto lo podemos arreglar
colocando un padding por abajo de unos 5 pixeles a la capa menu, incluyendo en su estilo
algo as:

#menu {background-color: yellow ; width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;

background-image: url(objetos/menu-parte-inferior.gif);

background-position: bottom ;

padding-bottom:5px }

Pensando un poco... ahora que toda la capa del men est cubierta por imagen de
fondo, podemos eliminar eso de background-color: yellow que tenemos al principio del
cdigo de arriba, no crees? As ahorramos! je je. Puedes eliminar esa parte.
Ms cosas? Venga vale.... a ver... SI! Haz vista previa y pon el ratn sobre cada uno de los
enlaces de este men vertical. Como vers, la sombra gris que aparece cuando haces eso
tiene un margen por la izquierda, pero en cambio no lo tiene por la derecha y ese efecto es
un poquillo feo. Cmo lo arreglamos? El margen que vemos por su izquierda ha de estar
definido por nosotros en algn lugar de la hoja de estilos... seguramente en la lnea que
define los li del men, es decir, en esta lnea:

#menu li {list-style:none ; margin: 4px 0px 4px 6px }

y ah est la solucin. Vemos que tiene definidos unos margenes de 4 por arriba y por
abajo, 6 pixeles por la izquierda y un cero patatero por la derecha. Ponle un 8px por
ejemplo en lugar de cero y fjate como ahora se ve mejor, verdad?
Smos unos Cracks!
El efecto ahora es para morirse de gusto! GUAU!!
Por cierto. Quizs no veas bien los acentos en tu web cuando la subas al sevidor. En ese
caso no olvides insertar esta lnea de cdigo entre <head> y </head>:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


Toma nota e insertalo en todas las pginas que hagas, siempre que en ellas se usen
acentos, oki?

Recordando el cdigo que llevamos hasta el momento


Si te has fijado, si no sigues al pie de la letra las explicaciones y se te ocurre crear
alguna capa ms, alguna capa menos, otros textos, otros prrafos etc distintos a lo que aqui
te comento lo nico que conseguirs es perderte, pues cuando ms adelante te diga "en el
prrafo donde pone Bienvenido haz esto y lo otro" no sabrs a qu me refiero.
Es por eso que debes seguir todo esto al pie de la letra, sin improvisar nada, sin cambiar
nada de nada de nada.
Claro que por el camino se te van a ocurrir ideas propias e incluso vas a querer ir
remodelando lo que yo te explico para que el ejemplo se vaya pareciendo a tu idea de web,
pero eso es algo que puedes hacer a la par, pero en otra carpeta distinta, de modo que la
del ejemplo de estas explicaciones quede tal cual la explico, oki? En otra carpeta puedes
hacerlo a tu manera y de hecho, es lo que deberas estar haciendo ya para ir asentando lo
que aprendes y para ir ensayando etc.
Por si acaso te has columpiado ya (seguro que si, je je) te dejo ahora los cdigos de los
archivos plantilla.html y estilo-general.css para que verifiques que son iguales a los tuyos,
oki?
A veces puede que te diga... "en la lnea 15 de la hoja de estilo cambia tal por cual". As
que, procura que sean exactamente iguales para no perderte. No solo es por eso claro, es
porque tanto en Html como en CSS el orden que tomen las lneas tiene gran importancia. En
CSS colocar cierta lnea al principio o al final puede cambiarlo todo (si no te lo crees
prueba a colocar la lna del asterisco al final y vers como todo cambia...).

Cdigo Html de la plantilla.html

<!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="global">

<div id="curva-superior"></div>

<div id="cabecera">

<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"


width="270"

height="80" alt="Haz clic aqu para volver a la pgina de inicio"></a></div>

<div id="publicidad">Bienvenidos a mi Web</div>

</div>

<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

</ul>

</div>

<div id="contenido">
<div id="menu">

<h1>Ttulo de Seccin 1</h1>

<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>

<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>

</div>

<h1>Esta ser la zona principal de la web</h1>

<p>Este es mi segundo prrafo. Acabo de poner un punto y en cambio sigue siendo un


prrafo

pues no le he colocado an la etiqueta de cierre. Voy a ponersela justo aqu.</p>

<h2>Y este es el tercer prrafo.</h2>

<p>En pocas lecciones aprender a darle margenes para

separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera


lnea,

que queda mucho mejor.</p>

<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos ensee a
ponerlos

alineados a la izquierda, o justificados. As esto parece una poesia! je je je.</p>

</div>

<div id="pie">Este es el pi de pgina</div>

<div id="curva-inferior"></div>

</div>

</body>
</html>

Cdigo CSS de estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

p {text-align: justify}

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;

text-align: center}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;

text-align: center}

body {text-align: center }

#global {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;

background-repeat: no-repeat ;

width: 800px ;

height:12px ;

overflow: hidden }

#cabecera {background-color: white ; border-left: black 1px solid ;

border-right: black 1px solid ; height:85px}

#logotipo {width:280px ; float:left }

#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }


#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }

#navegacion ul { margin-left: 180px }

#contenido {background-color: orange ; border-left: black 1px solid ;

border-right: black 1px solid }

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu {width: 150px ; float:left ;

text-align:left ; margin: 3px 10px 3px 3px ;

background-image: url(objetos/menu-parte-inferior.gif);

background-position: bottom ;

padding-bottom:5px }

#menu li {list-style:none ; margin: 4px 8px 4px 6px }

#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;

background-image: url(objetos/menu-parte-superior.gif) }

#pie { background-color: white ;

border-left: black 1px solid ;

border-right: black 1px solid;

border-top: black 1px solid }

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;

background-repeat: no-repeat ;
width: 800px ;

height:12px ;

overflow: hidden }

a {color: brown ; text-decoration:none ; display: block }

a:link {}

a:visited {}

a:hover {color:red ; text-decoration:underline ; background-color: silver}

a:active {}

Bien. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente
leccin? Venga, vamos! Pero antes os dejo una chorrada, vale? je je je. Esto es para ver la
progresin que hemos logrado. Os gusta? je je je, tonterias que se me ocurren! ja ja ja.

El pie de pgina de nuestra web


Ves como poco a poco esto va tomando forma? Ha llegado el momento de meterle mano
al pie de pgina. Vamos a intentar colocarle un hueco a la izquierda y otro a la derecha
donde colocaremos accesos directos (enlaces) a diversas secciones de la web que conviene
que el visitante tenga a la vista en todo momento. Me refiero a enlaces al mapa de la web
(importante para el posicionamiento de la pgina), a una pgina desde donde puedan
contactarnos (muy til para conocer siempre el punto de vista del visitante), otro enlace
hacia una pgina de enlaces (que usaremos a la hora de darnos de alta en directorios) y
tambin por qu no, unos enlaces al futuro foro, top y directorio de nuestra web (todo eso
lo aprenderemos ms adelante).
En medio de estos dos espacios dejaremos un hueco con dimensiones idoneas para
incorporar en un futuro, o bien otra serie de enlaces amigos, o bien una ventanita donde
colocar las ltimas noticias o avisos que queramos dejar o, seguramente, para colocar un
poco de publicidad que nos ayude a pagar un buen hosting sin necesidad de poner un
centavo de nuestro bolsillo. Los hobbies estn muy bien, pero si nos salen gratis... mejor
que mejor, no? Je je je.

Dnde va el pie de pgina?


Como bien habrs adivinado el pie de pgina lo vamos a colocar dentro de la capa #pie
(tampoco hay que ser muy adivino...). Este es su cdigo en la plantilla.html en estos
momentos:

<div id="pie">Este es el pi de pgina</div>


Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas
que estn juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de
otra capa que las engloba. As me es ms fcil aplicarle luego los estilos y queda todo ms
recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado
del otro, crear tres capas, una para los enlaces de la izquierda, otra para el espacio
central que en principio usaremos para poner publicidad y otra para los enlaces de la
derecha. Esas tres capas las voy a meter dentro de la capa #pie.
Los nombres que les voy a dar son, #pieuno #piedos y #pietres as que ahora mismo, las
escribo en el cdigo de la plantilla.html y coloco una palabrita dentro para ver como van
quedando cuando haga vista previa. Ha de quedar as en la plantilla.html (fjate que borro
el texto "Este es el pi de pgina" que haba antes):

<div id="pie">

<div id="pieuno">pie uno</div>

<div id="piedos">pie dos</div>

<div id="pietres">pie tres</div>

</div>

Listo, la vista previa se ve as:

Seguimos?

Colocar las capas en lnea


Como era de esperar, nos ha pasado como cuando hicimos lo del logotipo. En lugar de
aparecer una capa junto a la otra nos han salido una debajo de otra. Recuerdas como
arreglamos esto la otra vez? Venga, haz un esfuerzo!! je je. Lo arreglamos colocndole un
float:left a cada capa. As que abrimos la hoja de estilos estilo-general.css y definimos esas
tres capas colocndole un color de fondo para ver bien dnde empieza y dnde termina
cada una (te coloco tambin las lneas de antes y despus para que veas donde aadir estas
lneas, como vers las he colocado justo despus de la capa #pie, por guardar un orden):

............

#pie {border-left: black 1px solid ;

border-right: black 1px solid ;


border-top: black 1px solid ; }

#pieuno {background-color: brown ; float:left}

#piedos {background-color: green ; float:left}

#pietres {background-color: red ; float:left}

#curva-inferior { background-image: url(objetos/curva-infe.....

...............

Ya se van colocando en su sitio. No te preocupes por los colores, en cuanto tengamos el pie
listo le pondremos otros ms decentes.

Ahora les daremos dimensiones de anchura colocndoles un width. Le vamos a dar un valor
a #pieuno y #pietres de por ejemplo 150px y a la #piedos el resto, que sern unos... 800px -
2px (del borde izquierdo y derecho) -150px - 150px (de las otras dos capas) = 498pixeles. A
ver que sale con esto...:

#pieuno {background-color: brown ; float:left ; width:150px }

#piedos {background-color: green ; float:left ; width:498px }

#pietres {background-color: red ; float:left ; width:150px }

Dnde est la capa #pie?


Ahora vamos a comprender una cosilla de las capas y del css que nos vendr muy bien en
el futuro. Si haces vista previa te encontrars con esto:

Que habr pasado con el borde? Pues te lo explico. En teora, como las tres nuevas capas
estn dentro de la otra capa llamada #pie, debera aparecer un borde por sus partes
izquierda, derecha y arriba, pues as est definido en la hoja de estilos, pero parece que al
incluir estas tres capas el borde ha desaparecido tal y como os sealo con crculos rojos en
la imagen de arriba.
Quizs no me creas, pero los bordes de la capa #pie s que estn dibujados. Lo que
ocurre es que cuando una capa no tiene ningn contenido, la altura que toma es cero y por
tanto en lugar de ser un rectngulo se queda como una lnea.
Pero... la capa #pie si que tiene contenido, ni ms ni menos las otras capas #pieuno,
#piedos y #pietres, no? Pues No. Como le he escrito a estas tres capas la propiedad float,
las capas estn flotando sobre la capa #pie por lo que es como si #pie no tuviera ningn
contenido.
Venga vale, pero dnde est entonces la capa #pie y sus bordes? Pues estn justo encima
de las tres nuevas capas. Ves esa lnea negra fina que va por la parte de arriba de las tres
capas? Pues esa lnea es la capa #pie. Como no tiene ningn contenido dentro, su altura es
1px y por eso tiene forma de lnea. Te sealo la capa #pie en el dibujo para que lo veas ms
claro:

Esa lnea negra rodeada de rojo es todo lo que nos queda de la capa #pie. Las otras tres
capas se salen de la capa #pie, pues como son flotantes... quedan justo debajo, pero fuera
de #pie. Entiendes ahora por qu no vemos los bordes? Pues ya sabes, "Siempre que pongas
una capa en tu web has de colocarle algo de contenido, por ejemplo un punto, una
letra, una palabra, una imgen o una capa siempre que no tenga un float".
Pero si no te interesa colocarle nada que no sea una capa con float an nos queda una
opcin y es definirle nosotros la altura. Y eso es lo que vamos a hacer.
Ve a la hoja de estilos estilo-general.css y define una altura de, por ejemplo, 65px a la
capa #pie. Ms tarde podremos retocar esa cantidad para amoldarla a nuestro gusto.
Quedara as la capa #pie (Recuerda que siempre escribo en negrita los cdigos que incluyo
o modifico):

#pie { background-color: white ;

border-left: black 1px solid ;

border-right: black 1px solid ;

border-top: black 1px solid ;

height: 65px ;

}
Haciendo vista previa vemos que hemos conseguido esto:
Ves? Las tres capas #pieuno, #piedos y #pietres ahora parecen estar dentro, aunque
realmente estn "flotando dentro". Siguen sin ser contenido de la capa #pie, pero al darle
altura ocupa el espacio que necesitbamos y queda pintado el borde como queramos.
Parece un poco complicado, pero en realidad son solo unos pocos trucos los que
necesitamos conocer.
Y por qu las tres capas de dentro no ocupan esa misma altura? Pues porque si no le
indicamos la altura que queremos que tenga, ocuparn solo el espacio necesario para
contener lo que tengan dentro, en este caso las palabras "pie uno", "pie dos" y "pie tres".
Nosotros no vamos a darle altura a esas tres capas, pues conforme le aadamos el
contenido a cada una iran llenando todo ese lugar.

Bordes para separar las tres capas


Vamos a separar visualmente las tres capas dibujndoles un borde. Los bordes si que
debes ya saber colocarlos, verdad? De todas formas te ayudo. La verdad es que para
separarlas solo necesitamos una sola lnea de borde entre las capas #pieuno y #piedos y
otra entre las capas #piedos y #pietres, de modo que el cdigo de esas tres capas quedara
as:

#pieuno {background-color: brown ; float:left ; width:150px ;

border-right: black 1px solid }

#piedos {background-color: green ; float:left ; width:498px }

#pietres {background-color: red ; float:left ; width:150px ;

border-left: black 1px solid }

Con eso hemos puesto un borde por la derecha de la capa #pieuno y otra por la izquierda
de la capa #pietres. Lo mismo hubiramos conseguido colocando borde a ambos lados de la
capa #piedos o cualquier otra combinacin.
Como vers, aunque la primera vez te son a chino, ahora ya dibujar un borde no guarda
muchos secretos para t. Lo mismo te va a ocurrir con el resto de cosas, la primera vez no
se entiende muy bien, pero en cuanto aparezcan dos o tres veces en las lecciones seguro
que te acabas familiarizando.
El efecto conseguido es este:
Ahora que has visto de nuevo cmo colocar bordes, vamos a quitrselos pues el efecto no
queda del todo bien. Como ejercicio de repaso te propongo algo, a ver si lo consigues, oki?

Ejercicio de prctica
Como ejercicio de prcticas, intenta hacer que tanto el fondo de #pieuno como el de
#pietres sean blancos, que el fondo de #piedos sea gris claro (silver) y elimina los bordes
que dejamos antes. As terminars de familiarizarte con todo esto, oki?
Pero intntalo de verdad antes de mirar el cdigo de abajo. 3, 2 1... venga!
El cdigo CSS de las 4 capas del pie han de quedar como te indico abajo. Si el ejercicio
te sale bien y funciona, enhorabuena! pero pon este otro para que as tanto t como yo
tengamos el mismo y as no te pierdas en las lecciones siguientes, oki?

#pie {border-left: black 1px solid ; border-right: black 1px solid ;

border-top: black 1px solid ; height: 65px }

#pieuno {float:left ; width:150px }

#piedos {float:left ; width:498px ; background-color: silver}

#pietres {float:left ; width:150px }

Cmo colocar los enlaces del pie


Los enlaces ya vimos como se colocaban cuando hicimos los mens. En este caso van a
ser tres enlaces en la capa #pieuno y otros tres en la capa #piedos colocados uno encima
de otro. Como eso parece una lista, lo mejor es usar una lista para ello, verdad? Vamos all.
Dentro del cdigo Html de la plantilla.html, en la parte correspondiente a la capa
#pieuno coloca esto:

<div id="pieuno">

<ul>

<li><a href="#">Foro Ejemplo</a></li>

<li><a href="#">Contactos</a></li>
<li><a href="#">Nos Enlazan</a></li>

</ul>

</div>

Y haz lo mismo con el Html de la capa #pietres con este otro cdigo:

<div id="pietres">

<ul>

<li><a href="#">Directorio</a></li>

<li><a href="#">TopSite</a></li>

<li><a href="#">Mapa de la Web</a></li>

</ul>

</div>

Haciendo vista previa, como siempre nos pasa antes de retocar la hoja de estilo... nos
encontramos este churro...

Ya puedes imaginarte un poco cmo debemos arreglarlo para reducir un poco el espacio
que hay entre ellos, eliminarles el punto negro de la izquierda y reducirles un poco el
tamao de la letra, no? Intntalo t, oki? je je je.

Cmo eliminar el punto negro a las listas


Basta con poner list-style:none en el lugar adecuado de la hoja de estilos estilo-
general.css, pero veamos qu posibilidades tenemos.
La primera puede ser incluir ese cdigo dentro de la primera lnea de la hoja de estilos,
aquella que comienza con un asterisco *. Como recordars el asterisco representa a tooodos
los elementos por lo que si escribimos ese cdigo dentro de sus corchetes estaremos
diciendo que todos los elementos de la web han de aparecer sin ese puntito.
Lo bueno de esta opcin es que con solo eso ya no tenemos que preocuparnos ms en los
dichosos puntos. Lo malo? Que si alguna vez queremos hacer una lista con sus puntos, por
ejemplo alguna vez en el contenido de la web, vamos a encontrarnos con que el punto no
aparece. As que desechamos esta opcin.
La segunda opcin es poner ese cdigo dentro de las propiedades de las capas #pieuno li
y #pietres li. Lo bueno es que funciona, y lo malo es que tenemos que crear dos lneas ms
de codigo css y no tenemos ganas de escribir tanto... je je
La tercera opcin es sencilla tambin, y es colocar ese cdigo en una nueva lnea que
indique que todas las listas de dentro de la capa #pie han de salir sin esos puntos. Lo bueno
es que matamos dos pjaros de un tiro y lo malo... lo malo es que te metan en el ojo un
palo, ja ja ja.
Esa tercera opcin se consigue con esta nueva lnea, que vamos a colocar por seguir un
orden justo despus de la lnea de la capa #pie.

.............

#pie {border-left: black 1px solid ; border-right: black 1px solid ;

border-top: black 1px solid ; height: 65px }

#pie li {list-style: none }

#pieuno {float:left ; width:150px }

.............
Y papeleta solucionada.

Cmo ponerle el tamao de letra algo menor a esas listas


Para definir el tamao de letra se usaba font-size, asi que en esa misma linea que hemos
creado indicamos un tamao de 12px de este modo:

#pie li {list-style: none ; font-size: 12px }

Si te fijas en la vista previa, vers como todos los textos del pie son ahora menores,
menos el texto de la capa #piedos. Esto es lgico, pues el texto "pie dos" no pertenece a un
elemento de lista (li) y por tanto el estilo definido no le afecta para nada.

Aminorar la distancia de separacin entre los elementos de las


listas
Es curioso, pues aunque en la hoja de estilo le habiamos indicado al navegador que
pusiera todos los margenes a cero (con la famosa lnea del asterisco) ahora nos
encontramos con un margen en esa lista y adems bastante grande (al menos usando el
Internet Explorer). Vamos a probar el truco aquel que te cont, el de poner todo el cdigo
html de la lista en la misma lnea, recuerdas? Ha de quedar as:

<div id="pieuno">

<ul>

<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li>....

</ul>

</div>

Y lo mismo para la otra lista, la de la capa #pietres, oki?

<div id="pietres">

<ul>

<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a......

</ul>

</div>

Pues s, era eso, je je je.


An puedes disminuir algo ms el espaciado entre los enlaces de esas capas. El problema
es que no sabra explicrtelo muy bien, pues a simple vista no tiene mucho sentido, pero el
caso es que funciona. En fin, te digo cmo y pasamos de la explicacin por el momento
pues me llevara unas cuantas pginas convencerte del porqu, je je. Adems en el ejemplo
no lo dejaremos as, sino como lo tenemos hasta ahora, oki? Sera aadiendo la propiedad
font-size:12px a la lnea de definicin de la capa #pieuno. Si en lugar de 12px disminuyes
ese valor vers como el tamao del texto no varia (pues ese tamao est definido en la
capa #pie li) pero s decrece el espacio entre los tres enlaces. Pero repito, eso no lo
hacemos en este ejemplo, oki? salo t en tus cosas si lo necesitas.
Con esto queda por terminado por el momento el pie de pgina. As que quita ya el color
gris claro (silver) que habamos puesto a la linea de la capa #piedos (elimnale el ;
background-color: silver), guarda la hoja de estilo y haz vista previa para ver cmo ha
quedado.
Definir enlaces de distintos tipos
Ya vimos cmo conseguir cambiar el estilo de los enlaces de toda la web de una sola vez.
La cuestin ahora es... y si quiero tener varios enlaces con aspectos distintos? Pues como
siempre, lo conseguimos gracias a la hoja de estilos.
Las lneas de estilo-general.css que por el momento estn afectando a los estilos son las
siguientes:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }

a {color: brown ; text-decoration:none ; display: block }

a:link {}

a:visited {}

a:hover {color:red ; text-decoration:underline ; background-color: silver}

a:active {}

Y por qu incluyo la lnea del asterisco *? Sencillo, porque como ya hemos dicho antes,
esa lnea, al llevar asterisco afecta a todos los elementos de la web.
Bien. Eso nos da un tipo de enlace general, para todos los enlaces de la web. Tendrn
por tanto margenes nulos, nada de indentado, sin bordes, de color marrn todos, etc, etc.
Vamos a ver la forma de crear una nueva clase de enlace con otras propiedades sin que por
ello se pierda el tipo ya definido.

Una nueva clase de enlaces


Anteriomente hemos dicho que los estilos para elementos que solo aparecen una sola vez
en una pgina web concreta los definiriamos con la almohadilla # antes de su nombre. Pero
como este nuevo estilo de enlace si puede que se repita para varios elementos dentro de
una pgina, lo definimos del otro modo, con un punto en la hoja de estilo y llamndolos con
class="loquesea" en lugar de con id="loquesea" en el html de la pgina.
Para definir una clase de enlace nueva, primero escogemos un nombre. Como siempre,
todo en minsculas, sin espacios ni smbolos raros ni empezando con un nmero. Le
pondremos el nombre .enlaceuno y lo escribimos as en estilo-general.css, justo al final
(no escribas este cdigo an en tu hoja de estilos):

a.enlaceuno {}

a.enlaceuno:link {}

a.enlaceuno:visited {}
a.enlaceuno:hover {}

a.enlaceuno:active {}

Los enlaces definidos en las otras lneas que ya tenamos actuan sobre todos los enlaces,
pero como estos nuevos estn colocados despus, sern respetados para aquellos enlaces
donde indiquemos que son de la clase .enlaceuno

Y cmo se indica a un enlace que ha de mostrarse segn lo


definido en la clase "enlaceuno"?
Un enlace normal tiene esta forma:

<a href="#">Soy un enlace normal</a>

Este enlace tomar la forma que tengamos definida en la hoja de estilo estilo-
general.css en la parte general (la antigua). Si ahora quiero que tome otras propiedades
(color, tamao, subrayado...) tengo que indicar en esa lnea de Html que es de la clase
.enlaceuno y se hace aadiendo esto:

<a class="enlaceuno" href="#">Ahora soy un enlace de la clase enlaceuno</a>

Qu ocurre entonces? Cuando alguien visita tu web el navegador primero mira todo el
html, ve que existe un enlace y ve que hay hoja de estilo en el Head as que empieza a
leerla por el principio. Ve la primera lnea, la del asterisco y le da margenes cero, le quita
los bordes y el indentado. Sigue leyendo estilo-general.css y ve que primero se han
definido una serie de propiedades para todos los enlaces y se los da (los antiguos) pero al
seguir leyendo ve que est definido en esa misma hoja de estilo una nueva clase, la clase
enlaceuno, de modo que aade esas nuevas propiedades a las propiedades antiguas. Si
alguna est repetida dos veces, toma la nueva por buena y elimina la antigua.

Convirtiendo enlaces a la nueva clase


Vamos a darle la clase .enlaceuno a todos los enlaces del pie de pgina. Un modo es
colocando el cdigo class="enlaceuno" a cada una de las lneas Html de los enlaces del pie,
un poco trabajoso, verdad? Sera as (no lo hagas an):

<div id="pieuno">

<ul>

<li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a class="enlaceuno"


href="#">Contactos

</a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li>

</ul>
</div>

y lo mismo para los enlaces de la capa #pietres. Ahora que has aprendido a definir una
clase de enlace y a aplicarlo, te enseo otro modo ms fcil y rpido.

Aplicando una clase de estilos solo a los enlaces de una


determinada capa
Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una
capa determinada deban seguir esos estilos. Con esto nos ahorramos escribir nada en el
cdigo Html de la plantilla.html, vers.
Abre estilo-general.css y aade (sin eliminar el antiguo cdigo de los enlaces) esto, justo
al final:

..........

#pie a {color: red; text-decoration:none ; display: block }

#pie a:link {}

#pie a:visited {}

#pie a:hover {color:red ; text-decoration:underline ; background-color: yellow }

#pie a:active {color:blue}

Si guardas la hoja de estilo y haces vista previa ahora a la plantilla, vers como todos los
enlaces del pi de pgina han tomado las nuevas propiedades sin necesidad de tocar para
nada el cdigo Html de la plantilla.html, mgico, verdad? je je
Como esas propiedades son realmente horribles, cmbialas por estas otras para que al
menos sean... presentables, je je je:

#pie a {color: blue; text-decoration:none ; display: block }

#pie a:link {}

#pie a:visited {}

#pie a:hover {color:black ; text-decoration:underline ; background-color: white }

#pie a:active {color:black}


Ahora se ven un poco mejor.

Eliminar el fondo del enlace del logotipo


Ahora que sabemos variar las propiedades de solo algunos enlaces determinados sin
variarlos todos, podemos eliminar ese fondo gris que aparece al poner el ratn sobre el
logotipo. Por qu aparece? Pues simplemente porque al tener el logotipo un enlace hacia el
index.html se convierte la imagen en un enlace adoptando los estilos definidos para los
enlaces en la Hoja de Estilos.
Si aadimos algo similar a lo anterior pero para todos los enlaces de la capa #logotipo
podremos conseguir eliminar ese fondo gris tan feo. Qu propiedades le pondras para
evitar eso? Realmente, como no contiene textos me da igual, solo me interesa eliminar el
fondo gris y eso lo consigo colocndole un fondo blanco cuando el ratn se situe sobre el
logotipo (:hover), as que puedo colocar esto al final de la hoja de estilo:

#logotipo a {}

#logotipo a:link {}

#logotipo a:visited {}

#logotipo a:hover {background-color: white }

#logotipo a:active {}

Ahora se ve el logotipo sin esa sombra gris. Ya sabes algo ms de los enlaces. Eres todo un
maestro!

Cmo evitar que aparezcan mal las palabras con acentos


Segn en qu servidor alojemos nuestra bonita pgina, veremos o no que las palabras
acentuadas aparecen mal escritas. Claro, eso solo va a pasar si has escrito con acentos, que
ltimamente te los comes todos!! je je je. Si por el contrario has puesto alguno (tambin
estara bien que lo pusieras correctamente....) y en lugar del acento aparece un smbolo
raro, podemos arreglarlo rpidamente.

Pero por qu salen mal escritos los acentos?


Es por que los navegadores interpretan el cdigo Html de muy distintas formas segn
piense que la web est escrita en un idioma o en otro. Distingue cada idioma por un tipo de
"codificacin". Lo que vamos a hacer nosotros ahora mismo es poner en la cabecera de
TODAS nuestras pginas una lnea que indica al navegador la codificacin que debe
interpretar. Esta codificacin sabe de acentos, por lo que las palabras acentuadas
aparecern correctamente sin ms.
La lnea a insertar dentro de la cabecera de todas las pginas de la web (por el momento
solo tenemos la plantilla, pero acurdate de ponerlo en todas las dems tambin) es la
siguiente:

<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>

No hay mucho que saber de esta lnea. Es una de esas lneas que llaman Metatags que no
muestran nada en la web, nada visible, sino que indican al navegador cmo interpretar el
cdigo de dentro del Body. Concretamente indica que el contenido del Body es cdigo Html
y que la codificacin es del tipo iso-8895-1, que corresponde a la codificacin europea (que
entiende de acentos, vamos). No le hagas mucho caso, solo ponla dentro de la cabecera y
ten fe en m, je je je.
Pero dnde? En que parte de la cabecera? No temas, que te pones de los nervios en
seguida! ja ja ja. En principio da igual en qu parte de la cabecera la pongas, pero para que
tengamos t y yo el mismo cdigo y te sea ms sencillo seguir el curso ponla por ejemplo
justo debajo de la lnea <head>.
Despus de insertar esa lnea, guarda la pgina, la subes al servidor y ve a verla con el
navegador. Si todo a ido bien y yo no la he cagado ya no tendrs problemas con los acentos.
Bueno, el nico problema es que no sepas donde ponerlos, je je, pero se mostrarn
correctamente, seguro.
Bueno, ahora en las dos siguientes lecciones os enseo un modo de ahorra tiempo al
generar el resto de pginas de la web. Tambin os enseo a poner enlaces de unas a otras.
Ahora s que conseguiremos una pgina completita.

Las partes comunes de nuestra pgina web


Como te he dicho antes, existen varios modos de ahorranos tiempo y trabajo cuando se
realizan cambios en partes de una web que son idnticas en varias pginas. Pero antes de
seguir djame por favor que insista en definir eso de "partes de una web que son idnticas
en varias pginas".
Cuando me refiero a idnticas quiero decir iguales, condenadamente iguales. Si hay
alguna ligera diferencia este truco ya no nos sirve. Para que veas un ejemplo rpido te
puedo adelantar que la siguiente parte de cdigo es comn a tooodas las pginas de nuestra
web de ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<head>

Verdad? En estas tres lneas no hay ningn valor o parmetros que tengamos que cambiar
de una pgina a otra, por lo que es una parte bien comn.
En cambio, esta otra lnea no es comn en todas las pginas de la web:

<title>Este es el ttulo de la pgina de la web</title>


Pues el ttulo ser normalmente distinto de una pgina a otra. Lo pillas, verdad? Vemos
que partes comunes hay varias, pero nosotros vamos a prestar especial atencin a unas
partes comunes en concreto, las que ms probabilidad tienen de ser modificadas por
nosotros en el futuro, como por ejemplo, la cabecera, el men lateral de la izquierda y el
pie de pgina. Os voy a mostrar en las siguientes pginas estas tres partes, para que veais
su cdigo correspondiente y os familiariceis con ellas. Normalmente retocaremos algo de
all y no esta de ms conocerlas bien.

La cabecera de la pgina web de ejemplo


La cabecera es una parte idntica a todas las pginas de la web y en ocasiones nos d
por modificarla. Bien para cambiar el logotipo, ponerle unas curvitas en las esquinas, variar
el fondo o quin sabe, para aadirle un bonito banner de publicidad y sacar un dinerillo
para pagar el hosting... pero eso es otra historia para la que an falta un poco. Entendemos
que nuestra cabecera est formada por la parte superior de la web hasta el men
horizontal, incluido este, oki? Aunque an se podra dividir en la parte con fondo blanco y el
men horizontal con fondo gris.
Ese men con fondo gris tambin ser comn a todas las pginas de la web y desde l se
podr acceder a las distintas secciones en las que dividamos los contenidos. Por ejemplo,
para la pgina de un grupo de msica estas secciones podran ser Portada, Historia,
Discografa, etc, etc. En breve trabajaremos sobre ese men horizontal.
La cabecera, incluido el men horizontal es por tanto todo esto:

El cdigo de la cabecera, tal cul est ahora en el ejemplo que llevamos hecho es este:

<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->

<div id="curva-superior"></div>

<div id="cabecera">

<div id="logotipo">

<a href="index.html">

<img src="objetos/logotipo.gif" width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio">


</a>

</div>

<div id="publicidad">Bienvenidos a mi Web</div>

</div>

<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

</ul>

</div>

<!-- FIN DE CODIGO DE CABECERA -->

Como ves, he aadido dos lneas para encerrar a este cacho de cdigo. Esto es para que
si alguna vez le metemos mano a la pgina, recordemos que lo que hay dentro es comn a
todas las pginas de la web, y por tanto no debemos tocar nada de su interior a menos que
sea siguiendo las instrucciones que os cuento en breve.
No te preocupes por esas lneas de comentario, te las explico ahora despus.

El men lateral izquierdo


Este es otro cacho de cdigo Html que en principio es igual en todas las pginas de la
web, o al menos, en todas las pginas de una misma seccin. En los casos en los que no sea
comn a toda la web sino solo a parte de la web, tambin nos vale este truco que veremos
a continuacin, tambin ahorraremos mucho tiempo, as que lo tendremos en cuenta como
elemento comn. El men lateral izquierdo hoy por hoy es este:
Para que te hagas una idea, desde el men de fondo gris accedemos a las secciones de la
web y dentro de cada seccin, desde este men accederemos a las subsecciones. Por
ejemplo, para una supuesta web dedicada a un grupo de msica, la seccin "Conciertos"
podra dividirse en las subsecciones "Conciertos Anteriores" y "Prximos Conciertos", no?
Y su cdigo Html es el siguiente. Como ves, le aado una lnea al principio y otra al final
para indicar donde empieza y termina, como antes:

<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->

<div id="menu">

<h1>Ttulo de Seccin 1</h1>

<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a


href="#">Enlace 3....

</div>

<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->

Como creo que ya te he comentado y como puedes ver en el cdigo, he colocado todas
las lneas <li> seguidas unas de otras, para evitar el fallo aquel que daba el Internet
Explorer cuando las colocbamos separadas, una en cada rengln.

El pie de pgina
Lo mismo para el pie de pgina. Es algo comn a todas las pginas de la web y en
ocasiones quizs queramos modificarlo para aadir enlaces, publicidad o qu se yo lo que se
nos puede ocurrir.
Anda, acabo de hacer vista previa de esta pgina que ests leyendo ahora mismo y
resulta que la imagen de abajo, la del pie de pgina, se me monta por debajo del men de
la izquierda de CCTW... y ahora que hago? Qu mal que queda.... Menos ml que conozco
un truco para evitarlo. Te lo cuento? Je je je, es muy fcil.
Si escribo un poco ms de texto aqu mismito conseguir llenar este hueco, de la parte
derecha del men que tienes a la izquierda, y as la imagen del pie bajar y ya no se
montar bajo el men. Si, a veces hay que escrbir algo, aunque sea para llenar y conseguir
eso, aunque no tenga mucho sentido, ja ja ja. Anda! pues acabo de llenarlo con esta
chorrada que te acabo de contar! Fjate que cosa t! Qu alegria, qu bien. Bueno,
seguimos... que ya se ha arreglao...
La imagen del pi es esta:

Y su cdigo, con las lneas de comentario ya colocadas, es este:

<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->

<div id="pie">

<div id="pieuno">

<ul><li><a href="#">Foro Ejemploz/a></li><li><a


href="#">Contactos</a></li><li><a href="#">Nos..

</div>

<div id="piedos">pie dos</div>

<div id="pietres">

<ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a


href="#">Mapa de..

</div>

</div>

<!-- FIN CODIGO PIE DE PAGINA -->

Bien, imagino que a la vez que yo, has colocado esas lneas de comentario en la
plantilla, no? (an ests a tiempo para no perderte luego!!). Pues seguimos con esto, pero
antes voy a explicaros mejor qu es eso de los comentarios dentro del cdigo HTML y cmo
se aaden, vale? No te quejars, vas a aprender hasta el ltimo detalle! je je.

Los comentarios dentro del cdigo HTML de la pgina web


En el ejemplo que estamos construyendo tenemos ya un montn de cdigo HTML. Por
ahora, como acabamos de crear la plantilla y no hay demasiada cosa, no nos perdemos con
facilidad, pero en cuanto pasen unos das o en cuanto aadamos ms y ms cdigo a
nuestra plantilla llegar un momento que al ver el cdigo estaremos ms perdidos que un
pulpo en un garaje.
Por ese motivo se inventaron los comentarios en el cdigo. Se trata de poder aadir las
notas que nos de la gana dentro, para que nos sirva de recordatorio de qu parte de cdigo
es, por qu lo pusimos o lo que nos de la gana. Eso si, para que el navegador no se lie
tratando de investigar que debe hacer con esas lneas tan raras para l, lo que se hace es
encerrar el comentario entre unos signos especiales. As, cuando el navegador se pone a
leer el cdigo Html de nuestra pgina, al llegar al signo de inicio de comentario
simplemente pasa de nosotros y no hace ningn caso a lo que hay escrito hasta que lea el
signo de cierre de comentario. Fcil de entender, no?
Como habrs visto en la pgina anterior, el signo de inicio de comentario dentro de
cdigo Html es este:

<!--
El signo que indica final de comentario es este otro:

-->
De modo que si queremos poner una tonteria dentro de nuestro cdigo Html bastara con
poner esta lnea:

<!-- Tonteria -->

Si olvidas poner el signo de cierre es muy posible que algunos navegadores dejen de leer
todo lo que queda de cdigo Html, as que recuerda colocarlo, no te olvides.
Si la tonteria que queremos poner es muy larga y ocupa varias lneas (estoy seguro que
tratndose de tonterias podras llenar pginas y pginas... je je je je) bastara con poner el
signo al principio de la primera lnea y el de cierre al final de la ltima lnea. Vamos, que
no es necesario abrir y cerrar cada una de ellas. Algo as sera:

<!-- Esto es una tonteria

de varias lineas, pero no tengo ganas de poner signos

de apertura y cierre de comentarios

en cada una de ellas, qu pasa...

-->
Adems de servirte para poner chorradas en el Html, tambin sirve para anular
temporalmente alguna lnea de cdigo. Por ejemplo, imagina que tienes un enlace en tu
men lateral de la izquierda que vas a dejar fuera de uso, que no quieres que aparezca en
el men por que andas retocandolo. Bastara con encerrarlo entre los signos de inicio y fin
de comentario y el navegador no lo leera. Ms tarde, basta eliminar esos signos para que
vuelva a aparecerle a los visitantes. A veces es mejor que eliminar la lnea, pues quizs al
da siguiente no recuerdas bien lo que tenas puesto.
Por ltimo decirte que tampoco conviene abusar de los comentarios, pues al fin y al cabo
ocupan algo de memoria y el archivo de la web tardara un peln ms en cargarse si
hubieran muchos o fueran muy largos. Casi no se nota, pero si tardara un poquillo ms. As
que, los justos, oki?
La plantilla por tanto queda as. Sin cambios aparentes pues lo que hemos puesto son
comentarios, pero puedes ver las nuevas lneas de comentario mirando su cdigo Html.

Creando el resto de pginas de la web


Ahora que tenemos claras cuales sern las partes comunes de la web, podemos sin miedo
empezar a crear el resto de pginas de nuestra web de ejemplo. Esto lo podemos hacer a
partir de la plantilla, que para eso est. Y cmo hacemos esto? Pues como siempre te he
dicho, antes de actuar debemos tener claro lo que queremos alcanzar. Antes de crear y
crear pginas sin ton ni son tenemos que pensar cuntas secciones y subsecciones queremos
tener en nuestra web. Ms tarde podremos ir aadiendo ms secciones y subsecciones, o
incluso eliminar alguna, pero partiremos de una base ya pensada para no liarnos mucho.
De modo que el siguiente paso es pensar (no duele tanto...) en eso, qu secciones y
subsecciones vamos a tener en nuestra nueva web.Lo mejor es coger lpiz y papel y
empezar a elaborar un esquema de la web que tenemos en la cabeza. En el caso de este
ejemplo ya te lo dar hecho, pero ten eso en cuenta cuando elabores tu prpia web.
Cmo? No te aclaras con eso de dividir los contenidos en secciones y subsecciones?
Bueno, te lo explico un poco.

Dividir los contenidos de la web en secciones y subsecciones


Aunque t tendrs tu propia idea para hacer tu pgina web, vamos a ponernos todos en
el mismo lugar para realizar el resto del ejemplo. Sigue mis mismos pasos para no liarte
mucho con el resto de explicaciones y haz todo igual que yo, con las mismas secciones y
subsecciones. Luego, en otra carpeta, puedes hacer tus propios experimentos, oki?
Imagina que la web de nuestro ejemplo la vamos a dedicar a un grupo de msica que
tenemos o que nos gusta. En cuntas secciones principales se podra dividir? Quizs en
estas:

Pgina de presentacin o portada. En esta explicamos el estilo de msica del


grupo, y comentamos las partes ms importantes de la web. Debera ser breve
para que el visitante sepa de un solo vistazo qu puede encontrar en la web.
Esta seccin es breve y rpida as que no la dividimos en subsecciones.
Recuerda, es la primera pgina que ve el visitante cuando acceder a la web,
por tanto corresponde con la index.html
Historia del grupo. Aqu se puede comentar cmo, dnde y cundo surgi la idea
de la formacin del grupo, qu msicos han formado parte de la banda a lo
largo de los aos, cul es la formacin actual, y cosas as. Esta seccin se
podra dividir en algunas subsecciones, por ejemplo, Cmo surge la banda,
Miembros que han pasado por ella, Formacin actual e incluso un Album de
fotos!
Discografa. Lo tpico, una seccin en la que se muestra cada album o CD
publicado. Esta seccin se puede dividir por CDs publicados, por ejemplo en las
subsecciones Maquetas, CD1, CD2, CD3.
Conciertos. Aqu se informa al visitante de cules son los prximos conciertos de
la banda y se muestran tambin los conciertos celebrados hasta el momento. Se
puede dividir por ejemplo en las subsecciones Conciertos Anteriores y Prximos
Conciertos.
Foro. Siempre es buena idea saber la opinin de los visitantes, tanto para
mejorar la propia web como para saber qu piensan del grupo de msica. Nos
reservamos una seccin para en el futuro incorporar un foro a la web, si puede
ser, integrado en la misma estructura de la pgina. Esta seccin en principio no
tendra subsecciones.
Descargas. En este otro apartado se pueden colocar cosas que los fans se
pueden bajar como curiosidad. Por ejemplo, posters del grupo, imgenes, las
mismas canciones, letras, videos, etc, etc. Esta seccin se puede dividir en las
subsecciones, Canciones MP3, Letras, Posters, Imgenes y Videos.
Souvenirs. Quizs se piense en vender camisetas, gorras o CDs del grupo. Esta
puede ser otra seccin que se puede dividir por ejemplo en Cmo Comprar,
Camisetas y CDs.
Ves que fcil? No hay que preocuparse demasiado si ms tarde se nos ocurren otras
secciones, pues con el truco que te he comentado pginas atrs y que te explico ms
adelante ser muy fcil aadir, eliminar o modificar las secciones. Pero s est bien tener
una idea ms o menos clara al principio sobre la que partir.
Como imagino que adivinas, los ttulos de las secciones (Portada, Historia, Discografa,
etc) los colocaremos en el men horizontal que hay bajo la cabecera de las pginas (el que
ahora tiene fondo gris) y las subsecciones las colocaremos en el men lateral izquierdo. As
ser muy fcil para el visitante ir directamente a donde desea llegar.
Te dejo finalmente el esquema de secciones y subsecciones que vamos a usar en la web
de ejemplo para que lo veas ms claro. Este debera ser el resultado al que deberas llegar
tras tomar papel y lapiz y pensar en los apartados de la web en la que ests trabajando. Es
el esquema de la derecha.
Cuando hagas tu propia web, recuerda hacerte un esquema parecido y gurdalo como si
fuera un mapa de tu web (vale escrito a mano con papel y lapiz en un papel) para tener una
vista rpida de dnde est cada parte. Te ser muy util a la hora de escribir rutas, ver
dnde encajar un apartado nuevo que quieres aadir, etc, etc.
Bien, ahora que tenemos clara la estructura inicial de la web, vamos a rellenar en la
plantilla.html todas estas secciones y comenzamos a crear las dems pginas y a enlazarlas
entre s, oki? Venga, nimo!

Nombrando los archivos de las secciones de la web de ejemplo


Ahora s empezamos con todo esto. Vamos primero a decidir qu enlaces pondremos en
el men horizontal de secciones que hemos comentado antes. Te dejo la chuleta a la
derecha para que la tengas a mano. Como vers, las secciones son Portada, Historia,
Discografa, Conciertos, Descargas, Foro y Souvenirs, no? Pues basta con aadir los enlaces
correspondientes dentro de la capa "navegacion" en el cdigo de la plantilla.html cuyo
cdigo era este hasta ahora:
<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

</ul>

</div>

Como adivinars, tenemos que aadir algunas lneas <li> ms (antes solo tenamos tres
enlaces en la plantilla y ahora son siete los enlaces que queremos), y tenemos que aadir la
ruta de cada una de ellas. Recuerda que la ruta hay que ponerla en lugar de la almohadilla
(#). Por ahora las pginas de las secciones que queremos poner no existen, pero podemos
decidir ya cmo se va a llamar cada archivo de cada una de estas pginas y as podemos
escribir la ruta ya en esos enlaces. Lo mejor a la hora de decidir el nombre para un archivo
Html es nombrarlo con el nombre de la seccin o subseccin y as ser muy fcil saber qu
contiene.
Recuerda estas normas bsicas e importantsimas a la hora de nombrar archivos tanto
html como de imgenes, carpetas, archivos de msica o cualquier otra cosa:

Usar solo minsculas.


Solo usar letras y nmeros, nunca smbolos raros.
Nunca empezar el nombre de un archivo con un nmero (1nombre.html).
No dejar espacios en blanco, como mucho guiones medios "-" (no bajos "_").
Nunca poner acentos en los nombres de los archivos.
Ponerle un nombre que refleje el contenido, seccin o subseccin de la web.
Nunca cosas como pagina1.html sino nombres que tengan sentido.
Teniendo todo esto en cuenta, el nombre de los archivos de las pginas de estas
secciones deberan ser estos:

portada.html (pero como corresponde a la pgina principal, sera en realidad


index.html)
historia.html
discografia.html
conciertos.html
descargas.html
foro.html
souvenirs.html
Ves? Sencillos, representativos, sin cosas raras... make it simple! deca Einstein ;=)

Una carpeta para cada seccin


Si tuvieramos todos los archivos de la web guardados en la misma carpeta, a la larga nos
sera muy complicado encontrar un archivo determinado, de modo que me parece una
buena idea crear una carpeta para cada seccin. Cada una de esas carpetas tendra el
nombre de la seccin (recordando las normas anteriores!). Dentro de cada una de ellas
colocaramos tanto las pginas de esa seccin (las subsecciones) como las imgenes,
archivos de msica, etc que tenga, por ejemplo en una carpeta llamada "objetos".
As que antes de nada ya puedes empezar creando una carpeta para cada una de esas
secciones. Ya sabes, con los nombres historia, discografa, conciertos, descargas, foro y
souvenirs. Recuerdas cmo se crean las carpetas? Puedes hacerlo de dos maneras. Una
directamente abriendo la carpeta donde guardamos la web de ejemplo en tu escritorio y
creando las carpetas y otro modo es desde el Html Kit. Vamos a hacerlo desde el Html Kit
para recordar cmo era, oki?

Creando las carpetas


Vamos a recordar cmo se crean carpetas en el sitio web con el Html Kit, como siempre,
paso a paso para que no pierdas detalle.
Abre para empezar el Html Kit y haz que se muestre la ventanita de WorkSpace. Ya sabes
cmo, clic en "Ver" del men de arriba del Html Kit, y clic en "WorkSpace" dentro del
desplegable que se abre. Haz clic con el botn derecho del ratn sobre la carpeta amarilla
web-ejemplo-cctw-local y en este otro desplegable que se abre elige "New" y "Create New
Folder", como en la imagen de aqu abajo....
... anda, me ha vuelto a pasar lo mismo, perdona. Si, se ve que si coloco a la derecha de
mi men de la izquierda de CCTW una imagen muy grande, como no cabe, se me queda un
hueco entre el primer prrafo y la imagen, un espacio muy feo, todo vacio... menos mal
que recuerdo el truco, escribir una chorrada para rellenar y conseguir as que la imagen se
quede un poco ms abajo.. lo he logrado ya o tengo que seguir escribiendo tonterias... a
ver... Pues s, ya parece suficiente, perdona de nuevo, je je je
Se abre una ventana en la que pondremos el nombre de la carpeta que queremos crear.
Recuerda que la seccin portada dijimos que no iba a tener carpeta, por lo que la primera
que crearemos ser "historia". Recuerda, sin extensin ninguna, no es un archivo, es una
carpeta:

Podremos ver como aparece esa carpeta en la ventana de WorkSpace:


Repite la misma operacin con el resto de carpetas, discografia, conciertos, descargas,
foro y souvenirs.

Las carpetas "objetos"


Adems, hemos dicho que dentro de cada una de estas carpetas que acabamos de crear
ibamos a crear otra carpeta llamada objetos, en la que guardaramos los archivos de
imgenes, sonido etc que pertenecieran a esa seccin, as que adelante. En esta ocasin
como la carpeta que queremos crear est dentro de cada una de las creadas
recientemente, tendremos que hacer clic con el botn derecho del ratn sobre el nombre
de la carpeta en la que la queramos crear. Me explico con un ejemplo. Para crear la carpeta
objetos dentro de la carpeta historia, haz clic con el botn derecho del ratn sobre la
carpeta historia, pulsa sobre New + Create New Folder y ponle el nombre "objetos" cuando
te lo pregunte. Lo ves? Fcil no? Pues haz t lo mismo con el resto de carpetas objeto que
tenemos que crear en el resto de carpetas, oki? Al final querdara una cosa as en la
ventana de WorkSpace:
La nica seccin que no va a estar dentro de ninguna carpeta ser la portada, pues como
va a ser la misma pgina principal (index.html) no podemos colocarla dentro de ninguna
carpeta, debe ir directamente en la raiz del servidor y adems se debe llamar index.html,
es decir, el archivo de la portada no se llamar portada.html sino index.html y no estar
dentro de ninguna carpeta. [Ms informacin sobre qu es la raiz del servidor aqu]
Los archivos de la portada tambin estarn en una carpeta objetos, que es la que ya
tenamos. Es la que he sealado en azul en la imagen de arriba y que ya contiene algunos
archivos, los de los bordes del men, etc.

Creando las pginas de las secciones


Bien, ha llegado el gran da! Vamos a crear las pginas de cada una de las secciones
ahora mismo. Te imaginas tener que hacer todo lo que llevamos hecho cada vez que
queremos hacer una nueva pgina? Pffff, sera de locos. Es por eso que hemos creado la
plantilla, para ahorrarnos todo ese trabajo. Vers qu rpido generamos todas las dems
pginas.
Abre el Html-Kit y abre la plantilla.html. Bien, de esa plantilla vamos a aprovechar todo.
La copiaremos en todas las carpetas y as en lugar de empezar desde cero con cada una solo
tendremos que aadir los contenidos. Pero antes vamos a retocarla ligeramente, eliminando
lo que no nos hace falta y colocando unas equis en los lugares donde deberiamos rellenar
algo, para ms tarde acordarnos, vale? Vamos a ver qu cosas son las que debemos rellenar
para personalizar cada una de las pginas que vamos a crear.
Abre la plantilla y mira su cdigo Html. En la quinta lnea vemos que se define el ttulo
de esa pgina. Ahora mismo pone "Page Title" cuando en realidad debera poner el ttulo de
esa pgina concreta. Vamos a borrar "Page Title" y colocaremos unas pocas equis, y as
recordaremos que ese es un hueco que tendremos que rellenar en todas las pginas que
vamos a crear. Debe quedar as:
Por otro lado, si miras ms abajo en ese mismo cdigo Html de la plantilla, ms o menos
en las lneas 31, 32, 33 y 34 (estos nmeros se ven en la parte izquierda de cada lnea, lo
ves en la imagen de aqu arriba?) tenemos los comentarios o textos que aparecen en la
plantilla de ejemplo. Como esos textos no deben aparecer en las pginas de las secciones
(que ya tendrn sus propios textos) vamos a borrarlos y poner de nuevo unas equis en su
lugar para acordarnos que es ah donde podemos escribir lo que queremos que salga en las
nuevas pginas.
Hasta hace un minuto esa parte de cdigo Html era as:

Y ahora debera quedar as:


Ahora ya sabes que cuando copiemos la plantilla en cada una de las carpetas de las
secciones, solo tenemos que rellenar las partes con XXXXX para personalizar cada pgina, lo
veremos ms adelante. El resto de la plantilla nos vale tal y como est, por ahora. Guarda
la plantilla y seguimos.
Una observacin. Si haces vista previa a la plantilla ahora, vers que sale algo (bastante)
deformada. Algo as:
No te preocupes en absoluto. Eso se debe a que hemos eliminado gran parte del
contenido, de los textos de la parte central. Como apenas tenemos dos frases (las de las
equis) la pgina se queda tan cortita que se desmorona un poco, pero en cuanto le
aadamos algo de contenido todo se arregla solo, la pgina vuelve a recuperar su forma. Si
lo prefieres, escribe muchas ms equis dejando algunos espacios entre ellas, hasta tener las
suficientes como para llenar un espacio considerable de la web. De ese modo no sale esa
deformacin.

Una nueva pgina para la seccin historia


Para crear la pgina historia.html que guardaremos en la carpeta historia, haremos lo
siguiente. Abre el Html Kit, abre la plantilla.html y ahora la guardamos con otro nombre y
en otro lugar. El otro nombre ser historia.html y el lugar donde la vamos a guardar es
dentro de la carpeta historia.
Para hacer eso, en el Html Kit y con la plantilla abierta, pulsa en el men de arriba
donde pone Archivo y del desplegable que se abre, pulsa en Salvar Como:
Se abre entonces una ventana desde la que tienes que elegir la carpeta en la quieres
guardar la copia. En este caso ser la carpeta historia. Adems, antes de guardar o salvar
(es lo mismo) tienes que ponerle un nombre al archivo, pues ya no se va a llamar plantilla
sino historia.html
Ves?

En este caso, al tratarse de una pgina web lo que guardamos, no olvides ponerle la
extensin correspondiente, es decir, el nombre ms un punto y las letras html (en
minscula todo!!)
Pues ya tenemos lista la pgina historia. La pgina que se te queda abierta ahora en el
Html Kit ya no es plantilla.html sino historia.html pero como ambas son idnticas, podemos
usar historia.html que ya est abierta para hacer lo mismo con el resto de pginas de las
dems secciones. De modo que, de nuevo, pulsa sobre Archivo + Salvar Como, y ahora
dentro de la carpeta discografia guarda una copia llamada discografia.html
Cuando hagas eso, repites creando otra llamada conciertos.html dentro de la carpeta
conciertos, despus dentro de la carpeta descargas otra pgina llamada descargas.html y lo
mismo para foro y souvenirs. Quizs te parezca un poco pesado, pero

imagina si tuvieras que hacerlas desde cero.... vaya tela, no? Qu les pasa a los
estilos CSS de estas pginas de seccin?
Vaya, si hacemos vista previa a alguna de esas pginas de seccin que hemos creado....
se ve toda deformada. Por qu puede ser? Parece como si los estilos CSS que tenemos
definidos en la hoja de estilo no funcionaran...
En realidad lo que ocurre es que las pginas no encuentran la hoja de estilos. Vamos a
ver cul es la ruta que tienen en el enlace de la cabecera para descubrir qu es lo que est
mal, vale? [Ms informacin sobre qu son las rutas aqu]
Si miramos el cdigo de, por ejemplo, la pgina historia.html vemos que dentro de la
cabecera (head) el enlace a la hoja de estilos es este:

Bien, vemos que la ruta (relativa) de la hoja de estilos es "estilo-general.css". Esto


significa que el navegador cuando visita la pgina historia.html debe buscar la hoja de
estilos en la misma carpeta en la que est historia.html y ese no es el caso. Para arreglarlo
tenemos dos opciones.
La primera de ellas es colocar una copia de estilo-general.css en cada una de las
carpetas de seccin que tenemos. Esto tiene varios inconvenientes. Tendramos unos
cuantos archivos repetidos. Si un dia decidimos hacer un cambio en la hoja de estilos
tendramos que hacer lo mismo en la el resto de carpetas y eso es un rollo.
La segunda opcin es retocar la ruta para que busque la hoja de estilos donde est
ahora, es decir, fuera de la carpeta historia, en la raiz del servidor. As tendramos una sola
hoja de estilos para todas las pginas de todas las secciones. Esta opcin parece mejor,
pues si alguna vez queremos hacer un cambio basta con retocar una sola hoja de estilo. De
modo que vamos a retocar la ruta.
Y qu ruta tenemos que poner? Si el navegador est visitando la pgina historia.html,
para acceder a estilo-general.css tendr primero que salir de la carpeta historia y despus
abrir estilo-general.css Te acuerdas como se escriba eso en Html? Para salir de una carpeta
se escribian en la ruta dos puntos y despus una contrabarra (../). Y para abrir un archivo
se escribia su nombre. As que la ruta que debemos colocar ser:

<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">

Ests de acuerdo? Bien. Y qu ruta habr que poner por ejemplo en la nueva pgina
discografia.html? Pues si te fijas, sera la misma que la de historia.html pues hace falta lo
mismo, salir de su carpeta (../) y abrir la hoja de estilo.
Fjate el trabajo que tenemos ahora.... tenemos que modificar la ruta de todas las
pginas que tenemos creadas... Y eso no es nada. Imaginas cuando queramos cambiar algo
en todas las pginas de la web y tengamos unas 500 o mil pginas!!! juas! Hay que inventar
algo para evitar eso verdad? Pues no pienses mucho que ya est inventado. Lo vemos en la
leccin siguiente.

Buscar y Reemplazar
Para arreglar las rutas que vimos antes de un solo plumazo podemos recurrir a un
software (programa, recuerda, je je) que trabaje por nosotros. No existen muchos
programas que hagan lo que necesitamos, yo solo conozco un par de ellos. El primero es el
Dreamweaver pero es de pago y cuesta una pasta y el segundo gracias a Dios es gratuito y
se llama EditPad Lite. Este es el que vamos a utilizar, no solo para retocar esta ruta que
tenemos mal, sino para miles de cosas ms adelante. Por el momento vamos a descargarlo a
nuestro ordenador, lo instalamos y aprovechamos el problemilla de las rutas para aprender
a usarlo, oki? Ser tu mejor aliado y un genial complemento para el Html Kit, vers.
El EditPadLite se puede descargar desde este enlace que nos lleva a la web oficial:
Descargar EditPadLite
Al hacer clic se abrir la web oficial del programa en una nueva ventana, para que
puedas ir leyendo estas instrucciones a la vez que lo descargas. El primer paso es hacer clic
en la parte de abajo del todo de esa web, donde pone Download EditPad Lite:
Como ves est en ingls, pero no te preocupes que no nos hace falta entender
demasiado. Adems quizs encuentre algn modo de traducirlo al espaol, pero vamos, que
no va a ser ningn problema, vers que no.
Al hacer clic en Download, aparece una ventana de Windows preguntndonos si
queremos guardarlo. Qu cosas verdad? Pulsa sobre Guardar Archivo:

Creo que una vez te coment que podas tener una carpeta en la que ir guardando todo
el software que vayamos usando, por si algn da te hace falta. Si lo hiciste puedes guardar
este programa tambin all.
Una vez que tengas el archivo de instalacin en tu PC, haz doble clic sobre l para
instalarlo. La instalacin es bien sencilla, le dices a todo que si y listo. Si tienes algn
problema me lo comentas en el foro y lo explico ms detalladamente, pero imagino que no
es necesario.
Una vez instalado el programa puedes ya abrirlo para aprender a manejarlo. Lo vemos a
continuacin.

Poniendo en marcha el EditPad Lite


Nada ms abrir el nuevo programa, el EditPad Lite, nos aparecer una ventana de Tips.
Los Tips son consejos que te dan para que aprendas a usar el programa mejor. Siempre sale
uno al iniciar el programa. Como estn en ingls de poco nos van a servir, je je, as que
desmarcamos (quitamos) la casilla de abajo para que no vuelva a aparecer la prxima vez
que abramos el programa. Despus de desactivarla pulsa sobre Thanks!
Ahora s que vemos la ventana del EditPad Lite. Busca en el men de arriba de ese
programa la opcin Search (que significa Buscar) y dentro del desplegable escoge la opcin
"Show Search Panel" que significa mostrar el panel de bsqueda. Tambin se puede abrir
pulsando a la vez las teclas de tu teclado Ctrl + F:

Se abre entonces el panel de bsqueda del EditPad Lite, que es as:


Pues bien, en la ventanita donde pone "Search", abajo, donde yo he escrito "Codigo que
queremos buscar" podemos poner las lneas de cdigo que ya no nos valen y que queremos
sustituir por otras nuevas. As, el EditPad Lite buscar en todos los archivos que le digamos
esa parte de cdigo. Si encuentra ese trozo de cdigo que hemos colocado en esa ventana,
lo que hace es sustiruirlo por el que pongamos en la ventana de abajo.
Esto que quizs ahora no te diga mucho es de una utilidad bestial! Fjate que a partir de
ahora, cada vez que queramos cambiar algo que est en varias pginas de nuestra web solo
tendremos que abrir el EditPad Lite, pegar el cdigo que queremos sustituir arriba, el nuevo
abajo y Uala! El se encarga de todo en cuestin de segundos.
Vamos a aprovechar que tenemos que corregir la ruta de la hoja de estilo en todas
aquellas pginas para hacer un ejemplo de uso de este programa. Sigue todos mis pasos y
vers que fcil es.

Reparando la ruta de la hoja de estilo


Tienes abierto el EditPad Lite? Pues vamos a reparar las rutas aquellas. Ten en cuenta
que este programa va a buscar y reemplazar el cdigo que le indiquemos solo en las pginas
que abramos con l en ese momento. Es decir, si quiero hacer la "bsqueda y reemplazo" en
tres pginas concretas, tenemos que abrirlas con ese programa, dejarlas abiertas y
entonces hacer eso de buscar y reemplazar. De este modo nos aseguramos de que no se va a
buscar ese cdigo en otras pginas que no nos interesen.
Como nosotros queremos hacer la bsqueda y reemplazo en las pginas de las carpetas
de las secciones que hemos creado antes, lo primero que vamos a hacer es abrirlas con el
EditPad Lite. Cmo se hace esto? Vamos a verlo.
Primero abre el EditPad Lite. Ahora ve a File (significa archivo) que est en el men
horizontal de arriba de ese programa y escoge Open (abrir).

Se abre entonces una ventana como esta, desde la que debes indicar qu archivos
quieres abrir. Ve buscando una por una todas las pginas en las que queremos arreglar las
rutas y las vas abriendo, una por una. As por ejemplo se abre la pgina historia.html:
Ya has abierto todas? Recuerda, son todas estas, historia.html, discografia.html,
conciertos.html, descargas.html, foro.html y souvenirs.html. Bien, pues seguimos en la
pgina siguiente.

Rellenando datos en el EditPad Lite


Ahora, en ese mismo programa, selecciona la lnea completa de la ruta en cualquiera de
esas pginas abiertas. En la imgen de aqu abajo vers como el cdigo Html de las pginas
abiertas aparece en la ventana de arriba del todo del EditPad Lite. Es ah donde puedes
seleccionar esa lnea de cdigo.
Para seleccionarla ya sabes, haces clic al principio de la lnea, arrastras sin soltar el
botn del ratn hasta el final de esa lnea, sueltas (se queda todo azulado) y ahora pulsas
sobre la seleccin (lo azul) con el botn derecho del ratn y escoges Copy, tal y como
puedes ver en la imagen de abajo.
Has merendado ya? No tienes hambre? Pues yo me tomaba ahora mismo un bocata de
nocilla y me quedaba listo, je je je. Vaya, ya me has pillado otra vez escribiendo chorradas
para que se baje un poco la imagen. Jo, es que me tropezaba con el men... je je. Venga
vale, seguimos... aqu tienes la imagen:
En esa imagen tambin puedes ver las lengetas de las pginas abiertas. Las he sealado
con un borde rojo, las ves en la parte de arriba? Solo por curiosidad. Pues ahora que
tenemos el cdigo que queremos cambiar copiado, ve a la ventana de Search y pegas lo que
acabas de copiar. Para pegar, pon el cursor del ratn sobre esa ventana (de las dos de abajo
es la de arriba) y hacindo clic con el botn derecho del ratn sobre ella escoge Paste (que
significa pegar). Queda entonces as:
Ahora, en la ventana de debajo de esa, en la que pone Replace a su izquierda, tenemos
que escribir la nueva lnea que queremos que reemplace a la anterior. Como son casi
iguales, pega de nuevo en esa ventana la que tenemos copiada y le corregimos la ruta luego
a mano, pues lo dems est bien. Tiene que quedar de esta forma:
Como ves, la nica diferencia entre las lneas que hemos pegado es la ruta, que abajo le
hemos aadido ../ para que salga de la carpeta. Ya estamos listos para que el EditPad Lite
haga su trabajo, pero antes hay que marcar la casilla que te he sealado con un circulo
rojo, la de la derecha. Pone "All Files" que significa que ha de buscar y reemplazar esas
lneas en todos los archivos que tiene abierto el programa. Si no se marca, solo har el
trabajo en la pgina que est activa.
Vamos a la pgina siguiente y empezamos a reemplazar. Ser pan comido!

Reemplazando cdigos con EditPad Lite


Bien, vamos all a ver que pasa. Pulsa donde pone Replace All y cruza los dedos!!! El
botn de Replace All te lo sealo en la imagen de abajo por si no lo encuentras:
Tres dos uno.... haz clic!!! .... em... pues con tanto rollo seguro que esperabas un
redoble de tambores, o fuegos artificiales o qu se yo, pero... la verdad es que al apretar
el botn ese no he sentido nada por el cuerpo... Abr funcionado? Pues s! Si te fijas
pulsando en las distintas lengetas de las pginas abiertas en el EditPad Lite podrs ver
como esa lnea ha sido reemplazada y que ahora todos esos archivos tienen la ruta
correcta! Si que ha sido rpido verdad? Ahora solo hace falta cerrar el EdipPad Lite pulsando
sobre la X que hay en la esquina superior derecha.
Cuando pulses sobre esa X para cerrarlo, cmo es lgico, el programa te pregunta si
quieres guardar los cambios. Te pregunta por estas cuatro opciones:

"Save This File": Esto es si quieres guardar la pgina que est activa, no las otras.
"Dont Save This File": Significa que la que est activa no quieres guardarla.
"Save All Files": Escoge esta opcin cuando quieras guardarlas todas. Esta es la opcin
que necesitamos ahora nosotros. Haz clc en ella.
"Dont Save Any": Significa que no quieres guardar ningn cambio.
"Cancel Close": Es para cancelar el cerrar el programa.

Oki? As que elige "Save All Files" y ya te funcionarn los estilos en todas esas
pginas. Grandioso, no? Reparando el logotipo
Bueno, a veces todo arreglo tiene sus daos colaterales, je je je, pero no pasa nada.
Estas cosillas nos sirven muy bien para seguir aprendiendo y practicar con todo lo que voy
enseando as que, sigamos. Resulta que si ahora haces vista previa sobre cualquiera de las
nuevas pginas creadas, como por ejemplo sobre historia.html te dars cuenta de que
ahora no se ve el logotipo que tenamos, el de comocreartuweb de la parte superior.
Adems, ya no funciona su enlace y en lugar de llevarnos a index.html nos da un error. No
es dificil adivinar porqu, pero te lo digo yo que soy ms rpido, je je.
Resulta que ahora las rutas del archivo del logotipo.gif y la del enlace hacia el index no
son correctas. Esto es por el mismo motivo que antes, porque son copia de la plantilla que
antes no estaba dentro de ninguna carpeta y como ahora si lo est, tenemos que reparar las
rutas, corregirlas.
Veamos rpidamente cuales son las rutas de logotipo.gif y la del enlace a index.html en
la pgina historia.html. En el cdigo Html de esa pgina vemos esto:

<div id="cabecera">

<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"


width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio"></a></div>

<div id="publicidad">Bienvenidos a mi Web</div>

</div>

Como ves, el navegador cuando visite esa pgina intentar buscar un archivo llamado
logotipo.gif dentro de la carpeta objetos que hay dentro de la carpeta historia (pues es en
esta carpeta donde est la pgina que est visitando, historia.html). Pero en realidad el
logotipo.gif se encuentra en la carpeta objetos de la raiz de la web, fuera de la carpeta
historia. As que, la ruta correcta sera otra. Para llegar desde historia.html hasta el
logotipo.gif es necesario, primero salir de la carpeta historia (eso se haca con ../ ), luego
entrar en la carpeta objetos (la antigua, en la que guardamos al principio los archivos del
logotipo, etc), y finalmente abrir el logotipo.gif
Por otro lado, para llegar desde cualquier pgina que haya dentro de una de las carpetas
de la web de ejemplo al index.html, es necesario salir de la carpeta. As que la ruta
correcta del enlace ser "../index.html" y no "index.html"
Por tanto las rutas correctas sern:
<div id="cabecera">

<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif"


width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio"></a></div>

<div id="publicidad">Bienvenidos a mi web</div>

</div>

Muy parecidas, solo cambia el aadirle los puntos y la contabarra.


Pero esto hay que cambiarlo en tooodas las pginas web que tenemos dentro de las
carpetas de seccin! Vaya tela, no? Menos mal que ahora sabemos manejar perfectamente
el EditPad Lite y ser coser y cantar! Vamos all y lo recordamos? Esta vez te lo explico de
un modo ms rpido, no creo que necesites mucha ayuda otra vez, no?
Abrimos el EditPad Lite, abrimos desde l todas las pginas que tenemos dentro de
carpetas (las mismas que la vez anterior). Escribimos en la ventana de arriba (la de Search)
esto:

<div id="cabecera">

<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif"


width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio"></a></div>

<div id="publicidad">Bienvenidos a mi web</div>

</div>

Y en la ventana de abajo esto otro:

<div id="cabecera">

<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif"


width="270" height="80"

alt="Haz clic aqu para volver a la pgina de inicio"></a></div>

<div id="publicidad">Bienvenidos a mi web</div>

</div>
Le damos al botn "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos
los archivos y... ya est. Todo reparado. Que gusto verdad? Je je je.

Personalizando un poco cada pgina de seccin


Bien, ya tenemos lista la estructura de carpetas de la web para tenerlo todo bien
ordenado. Adems tenemos la pgina principal de cada una de las secciones. El siguiente
paso sera hacer funcionar el men horizontal (la barra de navegacin que hay bajo la
cabecera, con el fondo gris) de todas estas pginas, es decir, colocar los enlaces en ese
men (un enlace para cada seccin) para que estemos en la seccin que estemos, desde all
podamos dirigirnos a cualquier otra seccin de la web.
Hay una pequea pega y es que, como todas las pginas que tenemos ahora mismo son
exctamente iguales, cuando hagamos funcionar el men horizontal no sabremos si
funciona o no, pues nos dirigir a una pgina idntica y no vamos a observar ningn cambio.
Recuerda que todas ellas son copia excta de la plantilla. Lo pillas? As que antes de
ponernos a arreglar el men y sus enlaces vamos a personalizar un poco cada una de las
pginas de las distintas secciones.
Para ello simplemente abriremos cada una de ellas con el Html Kit y rellenaremos el
titulo (<title>) y pondremos un poco de texto en la parte del contenido principal. vale?
Pues vamos all.
Empezaremos por la pgina historia.html Abrela con el Html Kit y pone como ttulo este,
"Historia de la banda". Ya sabes cmo, no? Escribindolo entre <title> y </title>. Ahora en el
ttulo del contenido, entre <h1> y </h1> escribe esto otro: "Esta es la historia de la banda".
Ya, no es muy original, pero es lo que doy de s a estas horas... je je je. Y para terminar,
invntate algo para poner en el prrafo que hay debajo del ttulo que acabas de retocar.
Quitas las equis y te inventas algo tal que as:
"La banda naci en 1982, cuando tras ver por la tele un concierto de Bruce Springsteen
dos chavalotes se digeron... y si aprendemos a tocar algo? Fue entonces cuando Juanito se
compr su primera batera y Pepito su primer ampli y guitarra. Tras encontrarse con Pablito
y convencerle de que le pidiera el bajo a su tio, empezaron a ensayar en el garaje de uno
de ellos. Al principio intentaban tocar sus canciones preferidas, las que sonaban en esos
momentos por la radio y cosas as. Ms tarde Pepito empez a escribir algunas letras a las
que pusieron msica. As naci la banda, imagino que, igual que muchas otras".
Si yo fuera bueno escribiendo novelas no estara aqu enseandote a crear pginas web,
as que no te rias de m y de lo que me invento y ale, a copiar gandl! je je je. Ahora haz lo
mismo con el resto de las pginas que tenemos en las dems carpetas. Ponle el Title y el
ttulo H1 a cada una e intenta inventarte un par de prrafos para que las pginas recuperen
un poco la forma, oki? Si, se que es un tostn, pero hay que hacerlo para poder seguir,
venga....

Haciendo funcionar los enlaces del men horizontal


Ya estamos en condiciones de hacer funcionar el men horizontal de arriba, tambin
llamado barra de navegacin. Para ello abre una pgina cualquiera de las que tenemos
hechas, por ejemplo historia.html
Si te fijas en su cdigo Html, en la capa navegacion teniamos puesto esto:
<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

</ul>

</div>

Ese cdigo tenemos que transformarlo para que aparezcan enlaces a todas las secciones,
incluida la portada. Para ello basta con aadir 4 lneas ms como las que ya hay, quedando
una para cada uno de los enlaces que necesitamos. Y ya que estamos, en lugar de Seccin
1, Seccin 2, etc, escribiremos el texto que queremos que aparezca en el men, es decir,
Portada, Historia, Discografa, Conciertos, Descargas, Foro y Souvenirs:

<div id="navegacion">

<ul>
<li><a href="#">Portada</a></li>

<li><a href="#">Historia</a></li>

<li><a href="#">Discografa</a></li>

<li><a href="#">Conciertos</a></li>

<li><a href="#">Descargas</a></li>

<li><a href="#">Foro</a></li>

<li><a href="#">Souvenirs</a></li>

</ul>

</div>

Va tomando forma, bien bien. Ahora solo falta colocarle la ruta en lugar de la
almohadilla (#). Cul crees que ser la ruta de estos archivos? Pues, est el navegador en la
pgina que sea, siempre tendr que, primero salir de esa carpeta ( ../ ), despus entrar en
la carpeta de la seccin correspondiente ( nombre de la carpeta) y finalmente abrir el
archivo de la pgina (nombredelapagina.html). Es decir, as:

<div id="navegacion">

<ul>

<li><a href="#">Portada</a></li>

<li><a href="../historia/historia.html">Historia</a></li>

<li><a href="../discografia/discografia.html">Discografa</a></li>

<li><a href="../conciertos/conciertos.html">Conciertos</a></li>

<li><a href="../descargas/descargas.html">Descargas</a></li>

<li><a href="../foro/foro.html">Foro</a></li>

<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>

</div>

Como vers, la ruta de la portada no la he puesto an. Esa ruta ser diferente, pues para
llegar desde la pgina de cualquier seccin a la portada (que como digimos iba a ser la
index.html) la ruta a seguir es simplemente ../ (para salir de la carpeta de seccin en la
que se est) seguido de index.html quedando todo ese cdigo as:

<div id="navegacion">

<ul>

<li><a href="../index.html">Portada</a></li>

<li><a href="../historia/historia.html">Historia</a></li>

<li><a href="../discografia/discografia.html">Discografa</a></li>

<li><a href="../conciertos/conciertos.html">Conciertos</a></li>

<li><a href="../descargas/descargas.html">Descargas</a></li>

<li><a href="../foro/foro.html">Foro</a></li>

<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Ests de acuerdo conmigo en estos cdigos? Si, verdad? Je je je je, ves? Ya hablamos de
cdigos Html de t a t! Ests hecho todo un Webmaster!!!
Bueno, para ser correctos del todo, deberas recordar aqul error que comentamos una
vez que surge en el Internet Explorer si ponemos las lneas de cdigo Html de ese modo. La
norma era que todo el cdigo Html de una lista ha de estar todo seguido, por tanto antes
de reemplazar ese cdigo vamos a ponerlo en una sola lnea. Para ello, pones el cursor al
final de cada lnea y das a la tecla "Supr" hasta que la siguiente quede pegada a la anterior.
Y as con todas. Debe quedar ms o menos as:

<div id="navegacion">

<ul><li><a href="../index.html">Portada</a></li><li><a
href="../historia/historia.html">Historia</a>

</li><li><a href="../discografia/discografia.html">Discografa</a></li><li><a
href="../conciertos/

conciertos.html">Conciertos</a></li><li><a
href="../descargas/descargas.html">Descargas</a></li><li>

<a href="../foro/foro.html">Foro</a></li><li><a
href="../souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo
actualizar los cdigos de los mens horizontales de tooodas las pginas de las secciones. Te
atreves a hacerlo sin ayuda?
Abre el EditPad Lite, abre todas las pginas de las secciones, (Portada, Historia,
Discografa, Conciertos, Descargas, Foro y Souvenirs), y desde una de ellas, escribes el
cdigo a buscar en la parte de arriba y el nuevo cdigo que queremos en la parte de abajo.
Te recuerdo que el cdigo a buscar era este:

<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

</ul>

</div>

El que queremos (que va en la ventada de abajo del EditPad Lite) lo puse antes.
Ahora pulsas sobre "Replace All" y listo, cierras el programa, le dices que guarde todas y...
misin cumplida de nuevo! Corrigiendo la deformacin del men lateral
Si si, ya se que llevamos un montn de lecciones ya corrigiendo cosas, pero.... y lo que
ests aprendiendo? Je je je. Vers como pronto tenemos la web de ejemplo terminada y
puedes entrar a construir la tuya propia. Adems, vers que cada vez que corregimos algo
aprendemos cosas nuevas, no? De eso se trata.
Si haces vista previa en cualquiera de las pginas de seccin, por ejemplo de la pgina
historia.html, vers como ahora el men lateral de la izquierda aparece casi en el centro
deformando la web. Esta deformacin solo se ve bien usando Firefox, pues si usas el
Internet Explorer apenas se aprecia. En cualquier caso hay que arreglarlo.
Adems, vers como los elementos del men horizontal que acabamos de hacer, estn
descentrados. Hay que modificar los margenes de la capa navegacin para ajustarlo mejor y
evitar adems la deformacin que tenemos. Eso se hace muy rpido retocando la hoja de
estilos, estilo-general.css
Mira, esta es la deformacin que te digo usando Internet Explorer:

Y esta es usando Firefox:


Hay un hueco demasiado grande a la izquierda de los enlaces del men horizontal y
adems se nos baja el enlace Souvenirs a una segunda lnea que no queremos. Adems
puedes ver como los usuarios de Firefox van a ver la web deformada por ese mismo motivo,
al desplazarse el enlace Souvenirs a una segunda lnea, desplaza tambin el men lateral.
No te preocupes, lo arreglamos enseguida.
Abre la hoja de estilos, estilo-general.css y echa un vistazo a las lneas donde hemos
definido estilos a la capa navegacin, son estas tres principalmente:

#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }

#navegacion ul { margin-left: 180px }

El problema lo tenemos en la tercera de esas lneas. Al principio le pusimos un margen


por la izquierda de 180 pixeles. Lo hicimos para centrar los tres enlaces que tenamos al
comienzo de la leccin, pero como ahora tenemos unos siete, es necesario hacerlo ms
pequeo. As que en lugar de 180px vamos a ver qu tal se ve con solo 60px, es decir,
modificndo esa lnea para dejarla as:

#navegacion ul { margin-left: 60px }

Si ahora guardas la hoja de estilo y haces vista previa sobre cualquier pgina de seccin,
vers que ahora se ve... genial! No somos unos genios?
An podramos retocarlo un poco ms variando la segunda lnea ( margin: 0px 20px 0px
20px ). Retocando esos parmetros puedes hacer que los enlaces estn ms o menos cerca
unos de otros, pero eso te lo dejo para cuando hagas tu propia web, oki? Solo recuerdalo
por si te hace falta.
Nota: Te recuerdo que si ves que las pginas aparecen un poco deformadas, es por que te
falta escribir algo de contenido en la parte central. Hazme caso y rellenala, as como el
ttulo y esas cosas que te he dicho.
Si se deforman pero no se arregla con eso, tal vez hayas cometido algn error al usar el
EditPad Lite. En ese caso comntanoslo en el foro y te ayudamos a corregirlo, oki? Esto va
viento en popa!!!

La nueva index o portada


Seguramente en muchas ocasiones habrs visto que al entrar en una pgina web aparece
en primer lugar una pgina de presentacin que suele ser ya tpica. Un banner o logotipo
grande de la web en cuestin y un enlace en el que pone con letras grandes "ENTRAR" y...
poco ms. Personalmente y aunque en mis comienzos la usaba en mis webs, hoy en da no
me gusta nada ese tipo de portada o pgina de presentacin.
Los motivos son diversos. Por un lado la apariencia de esas pginas no suele tener mucho
que ver con las que encontramos luego en el interior de la web, perdiendo coherencia con
el resto de pginas. Por otro lado, hoy pienso que el visitante quiere encontrar lo que busca
de un modo rpido y ese tipo de pgina de presentacin no es ms que un clic ms que
tiene que hacer el visitante para acceder a esa informacin que busca.
De modo que, a pesar de que hemos construido una index.html a modo de presentacin,
vamos a eliminarla y a colocar en su lugar una pgina copiada de nuestra plantilla. De este
modo la apariencia ser la misma que la de las dems pginas quedando el conjunto ms
coherente. Desde el men horizontal de arriba de esa pgina el visitante puede ya acceder
a las distintas secciones de la web. En la parte central, donde se coloca el texto o
contenidos, pondremos una breve descripcin de lo que el visitante puede encontrar en la
web. Os parece bien?
Si, si, ya se que despus de lo que hemos trabajado en la index en estas lecciones da un
poco de pena eliminarla as, tan friamente, je je, pero recuerda que al construirla has
aprendido conceptos bsicos que nos servirn para seguir aprendiendo, no creo que haya
sido en vano.
As que para crear la nueva index.html abre tu Html Kit, y abre la plantilla con l. Ahora
lo que haremos es irnos al men de arriba del Html Kit y pulsar sobre Archivo + Salvar
Como.
En la ventana que se abre ponedle de nombre index.html y pusa en Guardar. Te avisa
entonces de que ya existe un documento con ese nombre y te pregunta si quieres
sobreescribirlo. Dile que s y el index antiguo dejar de existir. En su lugar tendremos un
index.html cuyo contenido es idntico al de la plantilla.

Personalizando el index.html
Aunque parezca un poco pesado, realmente esto nos sirve para seguir practicando de
modo que no te quejes demasiado, je je je. Para m sera ms fcil drtelo todo ya
terminado, pero entonces no tendra sentido esto de las lecciones.
El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer
funcionar el men horizontal de arriba igual que hicimos con las pginas de las secciones.
En este caso no nos vale el mismo cdigo que en aquellas pginas, pues esas estaban dentro
de una carpeta mientras que index.html est fuera. Por eso, las rutas no son exctamente
las mismas y tenemos que ponrselas correctamente. Es fcil, ya veras.
Una vez tengas abierta la pgina index.html con el Html Kit, ve a ver su cdigo,
concretamente la parte del men superior horizontal. Ahora mismo es como este:

<div id="navegacion">

<ul>

<li><a href="#">Seccin 1</a></li>

<li><a href="#">Seccin 2</a></li>

<li><a href="#">Seccin 3</a></li>

</ul>

</div>

Hay que aadir los enlaces para el resto de secciones, como hicimos antes. Quedara as:

<div id="navegacion">

<ul>

<li><a href="#">Portada</a></li>

<li><a href="#">Historia</a></li>

<li><a href="#">Discografa</a></li>

<li><a href="#">Conciertos</a></li>

<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>

<li><a href="#">Souvenirs</a></li>

</ul>

</div>

Y ahora le ponemos las rutas correctas. Para la portada es fcil, como estamos en la
portada, para volver a ella otra vez solo es necesario abrir su archivo, por lo que la ruta
sera "index.html" (recuerda que el archivo de la portada es index.html, no portada.html).
Para el resto de pginas de ese men tendramos que, para llegar desde la portada hasta
cada una de ellas hay que, primero entrar en la carpeta correspondiente y despus abrir el
archivo de la pgina, por lo que las rutas al final quedan todas de este modo:

<div id="navegacion">

<ul>

<li><a href="index.html">Portada</a></li>

<li><a href="historia/historia.html">Historia</a></li>

<li><a href="discografia/discografia.html">Discografa</a></li>

<li><a href="conciertos/conciertos.html">Conciertos</a></li>

<li><a href="descargas/descargas.html">Descargas</a></li>

<li><a href="foro/foro.html">Foro</a></li>

<li><a href="souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Ests de acuerdo con esto? Pero recuerda, el cdigo de las listas deben tener todas las
lneas seguidas, de modo que lo pondramos de este modo (eliminando espacios y saltos de
lneas):

<div id="navegacion">
<ul><li><a href="index.html">Portada</a></li><li><a
href="historia/historia.html">Historia</a></li>

<li><a href="discografia/discografia.html">Discografa</a></li><li><a
href="conciertos/conciertos.h

tml">Conciertos</a></li><li><a
href="descargas/descargas.html">Descargas</a></li><li><a href="foro/

foro.html">Foro</a></li><li><a
href="souvenirs/souvenirs.html">Souvenirs</a></li></ul>

</div>

Bien. Pues pon en la index.html ese cdigo y ya lo puedes guardar. Si le haces vista
previa ahora al index.html vers como aparece algo descuadrado. Ya sabes que s por no
tener a penas contenido, de modo que aprovechando que estamos liados con ese archivo,
escrbele un par de prrafos ms o menos largos, ponle un <title> decente, como por
ejemplo:

<title>Pgina Oficial de la banda</title>

y ya puestos, escrbele tambin algn ttulo entre <h1> y </h1>, donde pusimos las equis,
vale? Por ejemplo esto:

<h1>Bienvenidos a la pgina oficial de la banda</h1>

Ahora s debe verse bien la vista previa.


Ahora en teora se puede navegar perfectamente por toda la web que tenemos desde el
men horizontal superior y desde todas las pginas de la web de ejemplo. Por cierto, como
hemos eliminado la antigua index.html, puedes borrar de la carpeta objetos todos los
archivos que usaba el index, como por ejemplo la sonrisa y el buzn de correo. As evitas ir
acumulando archivos que al fin y al cabo no usas en la web y ya no nos hacen falta. Si no
sabes borrar carpetas o archivos con el Html Kit aqu tienes unas pistas.
El siguiente paso es hacer funcionar tambin el men lateral de la izquierda y es ese el
paso que daremos a continuacin. Como poco te mereces ya un diploma!

Completando el men lateral izquierdo


En primer lugar tendramos que decidir qu secciones van a tener o no ese men lateral
izquierdo que ahora mismo poseen todas las pginas de nuestra web. Si recuerdas el
esquema que hicimos al principio, habiamos decidido crear todas estas secciones y
subsecciones:
Si an mantenemos esa estructura, vemos que desde el men horizontal se puede
acceder a la portada y a las pginas principales de cada seccin. Una vez en ellas, haremos
que desde el men lateral izquierdo se pueda acceder a las subsecciones. La portada no va
a tener subsecciones y por tanto no tiene sentido mantener en ella ese men lateral. Lo
mismo ocurre con la seccin Foro, no va a tener subsecciones, de modo que eliminaremos
ese men lateral de ambas, tanto de la portada (index.html) como del foro (foro.html).
Para eliminar el men, basta con borrar las lneas de cdigo que lo definen en los
archivos index.html y foro.html. Recuerda que el cdigo a eliminar es este:

<div id="menu">

<h1>Ttulo de Seccin 1</h1>

<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a


href="#">Enlace 3</a>

</li><li><a href="#">Enlace 4</a></li></ul>

</div>

Las pginas portada y foro no se van a deformar por eliminar esa parte de cdigo. Tan
solo no se ver el men y el espacio que ocupaba pasa a formar parte del contenido
central. En el futuro, si cambiamos de idea y queremos colocar de nuevo el men, bastar
con colocar de nuevo esas lneas de cdigo, de modo que ya lo puedes eliminar sin miedo
de ambas pginas, oki?
Si lo deseas, elimina solo el cdigo que te acabo de decir arriba, pero deja las dos lneas
de comentarios que habamos puesto hace unas pginas. Me refiero a estas dos:

<!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->

<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->

De ese modo, si un da quieres volver a poner el men sabrs dnde iba, vale? Adelante!
Elimina esos cdigos y segui

Men lateral de Historia


El mtodo es muy similar al anterior, al que hemos usado para crear el men horizontal
de la parte de arriba, pero en este caso no vamos a partir de la plantilla sino que vamos a
partir de la pgina que ya existe en cada una de las carpetas de seccin. Es decir, para
generar las pginas de la seccin historia, abriremos el archivo historia.html y la
guardaremos con los nombres de las subsecciones.
Pero antes de hacer eso arreglaremos el men lateral de esa pgina. De ese modo,
cuando guardemos con el nombre del resto de pgina de esa seccin ya se guardan con el
men lateral terminado y no ser necesario acudir al EditPad Lite para reemplazar esa
parte de cdigo. Entiendes? Qu bien! je je.
Empezaremos entonces abriendo el archivo historia.html y mirando el cdigo que por
ahora tenemos para ese men lateral. Ese cdigo es este:

<div id="menu">

<h1>Ttulo de Seccin 1</h1>

<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>

<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>

</div>

Bien, qu cosas hay que cambiar aqu? Para empezar le vamos a poner el ttulo de la
seccin entre <h1> y </h1>. Lo que escribamos ah aparecer en la parte alta del men
lateral. Pondremos entonces "Historia" y quedara as esa lnea:

<h1>Historia</h1>

A continuacin escribimos los anchor text de cada enlace. Aunque ya lo he dicho, quizs
se te haya olvidado. El anchor text es el texto que aparece visible en el enlace, es decir, las
palabras sobre las que hay que pulsar para ir a la pgina enlazada. Como las subsecciones
de la seccin historia son Origen, Miembros, Formacin Actual y Album de Fotos, pondremos
esos textos como Anchor Text. Quedara as por ahora el cdigo del men:
<div id="menu">

<h1>Historia</h1>

<ul><li><a href="#">Origen</a></li><li><a href="#">Miembros</a></li><li><a


href="#">

Formacin Actual</a></li><li><a href="#">Album de Fotos</a></li></ul>

</div>

Ahora solo queda colocar bien las rutas. Pero claro, an no existen los archivos de las
subsecciones, verdad? As que no sabemos qu poner en la ruta de cada uno... No pasa
nada. Decidimos y cmo se van a llamar esos archivos y como sabemos que los vamos a
guardar en la carpeta historia, tenemos todos los datos que nos hacen falta para escribir las
rutas correctamente. Veamos.
Si el archivo de la subseccin Origen lo vamos a llamar origen.html, y sabemos que lo
vamos a guardar (cuando lo generemos) dentro de la carpeta historia, sabremos que para ir
desde cualquier pgina de la seccin historia a la pgina origen.html solo es necesario abrir
dicho archivo. No es necesario salir ni entrar en ninguna carpeta, por lo que la ruta ser
simplemente el nombre del archivo, es decir, "origen.html".

Lo mismo va a ocurrir con el resto de enlaces de las dems subsecciones, no es as?


Entonces es fcil adivinar que el cdigo completo quedara de este modo:

<div id="menu">

<h1>Historia</h1>

<ul><li><a href="origen.html">Origen</a></li><li><a
href="miembros.html">Miembros</a>

</li><li><a href="formacion.html">Formacin Actual</a></li><li><a


href="album.html">

Album de Fotos</a></li></ul>

</div>

Correcto? Pues listo, ya podemos escribir ese cdigo en lugar del antiguo que haba en el
archivo historia.html. Una vez hecho, guarda la pgina historia.html (esta vez con su mismo
nombre).

Generando el resto de subsecciones de Historia


El resto es bien fcil, vuelve a abrir la pgina historia.html y ahora vas arriba, al men
del Html Kit y pulsando sobre Archivo + Salvar Como le vas dando los nombres de los
archivos de las subsecciones uno a uno. Es decir, la guardas como origen.html,
miembros.html, formacion.html y album.html y ya tenemos toda esa seccin completa.
Solo nos faltara ahora personalizar un poco cada una de esas subsecciones. Cmo? Pues
igual que hicimos con las secciones. Le ponemos el ttulo correspondiente en el <title>,
cambiamos el contenido, los prrafos para hablar de lo que toque en cada subseccin, etc,
etc. De lo contrario, cuando naveguemos por la web no nos vamos a dar cuenta de dnde
estamos, pues todo el contenido ser copia de historia.html. De acuerdo?
El resto es cosa tuya. No creo que sea necesario que te explique paso a paso cmo actuar
con el resto de secciones, no? Ya sabes, ahora abres la pgina de la siguiente seccin,
discografia, arreglas el men lateral en ella, la guardas y luego generas el resto de pginas
de las subsecciones de discografia, que son maquetas.html, cd1.html, cd2.html y cd3.html.
Luego le personalizar los ttulos, les pones algo de texto personalizado, algo que hable de
esa seccin y listo, pasas a la seccin siguiente. Si, es una lata, lo se, je je je.
Cuando termines con todo eso tendrs una web completamente lista para ser publicada
en internet. Con solo cambiar los ttulos, los prrafos con la informacin que te de la gana,
aadir o quitar secciones o subsecciones, modificar colores de fondo en la hoja de estilo,
etc, etc, tendrs tu propia pgina web. Qu me dices? Y todo sin costarte un chavo! No ha
sido genial? Ja ja ja ja.
Te dejo aqu un enlace de cmo ha quedado esta web de ejemplo hasta el momento.
Claro que an queda mucho que aprender y cosas que aplicar a este ejemplo, como
aprender a insertar imgenes en la parte central de la web, donde va el contenido, saber
colocarlas a la izquierda o a la derecha, que el texto las rodee o no, hacer que los enlaces
se marquen indicando en qu pgina est el visitante, mejorar cosas para aparecer de los
primeros en Google, aprender a insertar publicidad para costear un hosting y dominio... y
cientos de cosas ms, pero lo bsico ya lo tienes.
Todo eso y mucho ms lo encontrars en las lecciones siguientes de CmoCrearTuWeb.
Por cierto, si te sientes en deuda con CCTW te agradeceramos que cuando cuelgues tu
nueva web en internet coloques un enlace hacia nosotros y por qu no, que recomiendes
estas lecciones a tus amigos. Eso nos ayudar a crecer y repercutir sin duda en la mejora
de esta pgina. Desde ya mis ms sinceros agradecimientos por tu apoyo.
En las prximas lecciones (tengo que terminarlas primero) veremos como mejorar an
ms esta web de ejemplo. Mientras tanto haz tus propios experimentos, retoca todo lo que
puedas para ir practicando y usa el foro para resolver tus dudas y ayudar a los colegas
rezagados!

Aprender a Crear una Pgina Web Paso a Paso


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!!

Software Necesario
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 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 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 podrs 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 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 mostando una ventana de bienvenida y preguntndote si quieres seguir o no...
parece que an no ha entendido que "si".. je je:
Como va siendo habitual, ahora aceptamos los 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? Inicarle en que 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, 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 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.

Arrancando el 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. 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 lmite, 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 "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 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 prxima 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,
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.

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 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 y con
fondo gris para que lo distingais. Pues bien, si eso lo escribimos en un archivo y lo
guardamos con extensin .htm o .html ser una pgina web. Vacia si, 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, 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
Body en ingls). Pues igual que antes hemos escrito en cdigo dnde empieza la pgina y
dnde 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 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 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 util, 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 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 se puede 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.
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 nobre 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: x

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


background-repeat: x }
Para que se repita solo verticalmente se escribe: background-repeat: y

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


background-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 }

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.

Hosting y Dominios. Qu significan estos trminos?


Aunque en las secciones correspondientes de este apartado te lo explico con ms
detalle, te adelanto lo que significan estos dos trminos, hosting y dominio.
Como sabes, para disponer de una pgina web visible necesitas un lugar donde alojarla.
Ese "lugar" (espacio web) nos lo puede ofrecer un servidor de Hosting (que significa
alojamiento de pginas web) bien de forma gratuita o bien pagando cierta cantidad. En la
seccin de Hosting te recomiendo algunos planes gratuitos y de pago donde alojar tu web, e
incluso instrucciones detalladas de cmo registrarte en un servidor gratuito as como la
definicin de los trminos que has de conocer para escoger con conocimiento.
Por otro lado, una vez tenemos el espacio para nuestra pgina web, los visitantes
necesitan escribir algo en sus navegadores para dirigirse a nuestra nueva web. Esto es la
URL o direccin de la web que puede ser o bien un dominio escogido (y pagado) por t,
como por ejemplo www.comocreartuweb.com, o www.google.es o www.mipagina.es o bien
un subdominio (los gratuitos suelen ser subdominios) que tienen una forma algo ms larga.
Veremos entonces cmo registrar un dominio y tambin cmo relacionar un dominio con un
hosting, etc, etc.
Si vienes directamente del Curso Paso a Paso de CCTW quizs te interese ir directamente
a ver las instrucciones de cmo conseguir un espacio web gratuito. En ese caso pasa a la
seccin Registro en Razy, aunque te recomiendo que cuando tengas tiempo te leas bien el
resto de toda esta informacin. Ah! No sobreentiendas que un hosting de pago es cosa de
gente con mucho dinero o para proyectos serios y profesionales. Existen Hostings de pago al
alcance de cualquiera, ya lo vers en estas pginas.

Si encuentras algn error o quieres que ampliemos o expliquemos mejor cualquier


contenido no dudes en hacrnoslo saber en el Foro CCTW en la seccin "Hosting y
Dominios", oki? Pues adelante!
Puedes acceder a todas las pginas de esta seccin desde el men lateral, arriba a la
izquierda.

Servicios de Hosting, Hospedaje o Alojamiento de pginas web.


Los tres trminos significan lo mismo. Las pginas web que puedes ver en internet no
estn pululando por los cables de la red, sino que sus archivos estn bien guardaditos en
alguna parte, en algn disco duro, en algn ordenador. Pero aunque ese ordenador pudiera
ser el tuyo mismo, necesitaras configurarlo como servidor (cosa algo complicada) y adems
de correr el riesgo de que cuando te visiten varias personas tu conexin a internet no sea
suficiente como para darles la fluidez necesaria (la pgina web sera muy lenta) corres
otros riesgos, como por ejemplo que apagues el ordenador o se vaya la luz y la web no sea
accesible, que sufras un ataque de algn hacker graciosillo y te fastidie el ordenador
dejando la web igualmente inaccesible, etc, etc.
Es por eso que se recomienda alojar u hospedar los archivos de tu pgina web en una
compaia que ofrezca este servicio de Hosting o alojamiento de pginas web. Estas
compaas disponen de una o varias salas con decenas, e incluso cientos de ordenadores
(llamados servidores) con unas conexiones a internet mucho ms rpidas que la que t
puedas tener en casa, con servicios climatizacin que mantienen el ambiente idoneo de
temperatura y humedad que necesitan estas instalaciones, con sistemas contraincendios y
de seguridad que te garantizan un correcto funcionamiento y por tanto una accesibilidad a
tu pgina web cercano al 100%, o al menos ese es el objetivo.....

Por tanto ha de quedarte claro que para tener una pgina web accesible a todo el
mundo, necesitas conseguir un espacio web en una de estas compaas de alojamiento. Hay
servicios de Hosting gratuitos y de pago y en ambos casos las caractersticas que te ofrecen
pueden variar de manera considerable. En estas pginas te explicar lo que significa y para
que sirve cada una de las caractersticas que estas compaas suele ofrecer, para que sepas
escoger bien.
Aunque en el caso de hosting gratuito no es muy frecuente, en los de pago siempre
tendrs acceso a paneles de control desde los que podras obtener alguna informacin sobre
tu espacio web o incluso configurar algunas cosas. A veces puedes escoger el tipo de panel
de control y otras veces incluso sers t quien tenga que instalarlo. Por ello, intentar
tambin mostrarte los paneles de control ms usados y populares.
Finalmente te dejo una serie de consejos y advertencias para que no cometas los mismos
fallos que yo o que otros usuarios. Con que tropecemos unos pocos es suficiente, no? je je
je. Y tambin un apartado de preguntas ms frecuentes con la respuesta adecuada. Seguro
que te son tiles, pero si no son suficientes ya sabes que puedes dejar tus dudas,
comentarios y sugerencias en el Foro CCTW donde te responderemos encantados.

Trminos relacionados con el alojamiento de pginas web.


A la hora de escoger un buen hosting es imprescindible saber qu es lo que te ofrecen y
qu es lo que necesitas. As te ahorrars problemas y sorpresas en el futuro. Paso a
explicarte el significado de las caractersticas que generalemente encontrars en cualquier
plan de alojamiento de pginas web, tanto de pago como gratuito. Qu nos puede ofrecer
un hosting? Vamos a verlo...

Espacio web
Es la cantidad de megas de disco duro que tendrs disponible para almacenar todos los
archivos de tu pgina web. Algunos planes te ofrecen tanto espacio que lo miden en Gigas
(un giga o Gb son ms o menos 1.000 megas). Este espacio es ocupado no solo por los
archivos html de tus pginas, sino tambin por los archivos de las imgenes, sonidos etc que
insertes en ellas. Ten en cuenta que todo lo que quieras mostrar en tu web has de subirlo a
tu espacio web, por lo que quizs puedas hacerte una idea de cunto vas a necesitar. A no
ser que tu web sea de descarga de archivos pesados, como juegos, pelculas, programas o
canciones, con unas 100 o 200 megas tedrs ms que suficiente. Esta pgina, CCTW, ocupa
tan solo unas 60 megas, y fjate si es grande. En cambio una sola pelicula de cine puede
ocupar unas 800 megas, de modo que si pones varias.... ya sabes lo que te toca.

Tasa de Transferencia mensual


Imagina que tienes una pgina web con unas 10 pginas. Imagina que los archivos de
cada una de esas pginas ocupan en total (la pgina html en s, ms la imagen de fondo,
ms la msica de fondo si la tiene, ms un par de banners de publicidad, ms... lo que sea)
alrededor de 0.1 Megas. Imagina tambin que te visito en un mes 30 veces, accediendo
entre todos esos das a unas 60 pginas. La cantidad de megas que se han transferido desde
tu hosting hacia mi ordenador para que yo pueda ver tus pginas habr sido de 60 pginas x
0.1 megas cada una igual a 6 megas.
Si adems de mis visitas, tienes 1000 visitas ms de otra gente en todo ese mes y gastan
digamos unas 1000 x 0.1 megas, tendremos un total de Tasa de Transferencia Mensual
gastada de 1000x0.1 + 60x0.1 = 100 + 6 = 106 megas gastadas ese mes.

Normalmente, cuando una web nace, tiene pocas visitas y la tasa de transferencia
mensual que gastas es baja, pero conforme tu pgina web se va haciendo famosa y tiene
ms visitas, o va inlcuyendo archivos de descarga, etc, el gasto va aumentando y llega un
momento en el que nos acercamos peligrosamente al tope que nos ofrece nuestro hosting.
Qu ocurre entonces?
El gasto de transferencia se va sumando da a da desde primero de mes. Si llega un da
en el que superas la tasa de transferencia que te ofrecen pueden ocurrir dos cosas. En
servidores o hosting gratuitos, lo normal es que tu web se deje de ver hasta que comienza
el mes siguiente, es decir, tu web desaparece para volver a renacer con el contador de tasa
de transferencia a cero el primer da del mes siguiente. En servidores de pago puede ocurrir
esto o tambin puede que te permitan seguir consumiendo tasa de transferencia. El
problema ser en este caso que todo lo que gastes de ms te ser cobrado aparte.
Por esto, es importante minimizar al mximo el tamao de los archivos que pretendes
insertar en tu web, con un cuidado especial en el caso de que pretendas ofrecer a tus
visitantes archivos de descarga.
En la tasa de transferencia mensual se suma tambin lo que consumen los emails que
envias o recibes y tambin las transferencias de archivos mediante los famosos FTPs.

Bases de Datos

Es muy frecuente que nos ofrezcan bases de datos en el caso de hosting de pago. En los
hosting gratuitos no es tan normal, aunque podemos encontrarlos tambin. Las bases de
datos se suelen usar para aplicaciones como Registro de usuarios, Foros, Tops, Directorios,
etc, etc, en definitiva, casi todo aquello que necesite de interaccin con el usuario. Por su
facilidad de uso y popularidad te recomiendo las bases de datos del tipo MySql. Las veremos
ms adelante.

Cuentas FTP
Una cuenta FTP te permite, a travs de un programa, subir y bajar archivos desde tu
ordenador hacia tu espacio web en tu hosting. Normalmente es suficiente con disponer de
una cuenta, aunque los servidores de hosting suelen ofrecerte varias. Quizs por si quisieras
darle una cuenta a algn colaborador para que pueda tambin subir archivos a tu web, o
qu se yo.
A veces te ofrecen FTP annimos. Esto se usan (creo) para abrir una carpeta en tu
espacio web y permitir a cualquiera (sin necesidad de registrarse ni nada) subir o bajarse
archivos almacenados en tu hosting.

Cuenta de Correo
Casi todos los hosting te ofrecen varias. Con una es ms que suficiente, pero en fn.
Algunos servidores gratuitos no ofrecen ninguna cuenta, pues el spam que suelen sufrir las
cuentas de email suele sobrecargar un poco sus servidores y prefieren que te busques la
vida por otro lado para el tema de los emails. La verdad, existiendo alternativas como los
emails de google o de hotmail... tampoco es ningn problema, no?

Soporte PHP
Esto si es interesante. El PHP es un leguaje de programacin que solo funciona bajo
Linux y que permite el uso en tu hosting de foros phpBB (como el de CCTW), instalacin de
directorios, tops, etc. Es muy interesante que tu hosting te ofrezca soporte PHP,
especialmente si piensas seguir los cursos de CCTW, pues lo usaremos bastante. No temas si
no te suena de nada, no es necesario ni saber Php ni tener idea de lo que es linux, palabra.

Estadsticas

Esto tambin es bastante interesante. Cmo saber que tus pginas web son de inters
para los visitantes si no sabes con qu frecuencia te visitan? Los servidores (hosting)
gratuitos no suelen ofrecerlas, pero los de pago si y son una herramienta fabulosa para
medir qu tal est funcionando tu web.
Hay muchos ms trminos relacionados, pero con esto ser suficiente por el momento,
oki? Si hay cualquier otra cosa que quieras que expliquemos, hznoslo saber en el Foro
CCTW y lo incluimos enseguida.

Tipos de Hosting o Alojamiento web


Ya sabemos que existen hosting o alojamientos de pginas web gratuitos y de pago, pero
vamos a explicar los tipos que podemos encontrarnos dentro de estos dos.

Alojamiento Compartido
Se trata de un ordenador (servidor) cuyo disco duro est dividido en muchas carpetas.
Cada carpeta tiene una cantidad de megas concreta y cada una de esas carpetas est
dedicada a una sola pgina web. Todas las webs alojadas dentro de este servidor comparten
obviamente la CPU, las megas de Ram y la conexin a internet. Los hosting gratuitos son
siempre de este tipo.
Lo bueno de este tipo de alojamiento (adems de ser gratis en la mayoria de los casos)
es que al compartir los recursos entre todas las webs alojadas en l, sale ms barato (de
hecho algunas compaas como iespana, orange, etc, las regalan... a cambio de publicidad,
pero las regalan...). El problema? que si una de ellas hace trabajar demasiado a la CPU, o
consume mucha Ram o acapara gran parte del ancho de banda (la conexin a internet) por
tener muchas visitas o por lo que sea, el resto de webs sufrirn esos efectos y funcionarn
ms lentas. Para evitar esto, cuando una web crece demasiado y consume mucho, la
compaia que ofrece el hosting no tiene ms remedio que invitarte a marcharte u ofrecerte
un plan ms potente, normalmente de pago.
Hay alojamientos compartidos de pago. En estos casos el ordenador es ms potente y
tiene ms Ram (por eso lo cobran...) pero el problema sigue existiendo. Se te puede quedar
pequeo.

Alojamiento en Servidores Virtuales o VPS


Parecido al anterior, pero en este caso tanto el disco duro como la memoria Ram estn
repartidos entre las webs alojadas en ese servidor. As, los problemas anteriores se
minimizan, y aunque estos servicios suelen ser de pago, el precio no es demasiado alto,
pues el gasto del servidor, etc, se reparte entre varias webs. Adems, la cantidad de webs o
de cuentas alojadas en un servidor virtual suele ser menor, para mejorar el rendimiento. Ya
que pagas.... Te permite adems alojar ms de una web en el mismo plan y por supuesto,
ponerles un dominio de verdad, tipo tunombre.com
ComoCrearTuWeb est alojado en uno de estos servidores virtuales, y me va muy bien.

Servidores Dedicados
Esto es lo mximo. Se trata de un ordenador dedicado solamente para a t. T eres el
nico habitante del mismo, por lo que no corres el riesgo de que tu vecino consuma tanto
que ralentice tu web. Y si eres t el que consume demasiado... pues te aguantas que para
eso eres el culpable, je je je. De todas formas siempre tienes la posibilidad de pedir una
ampliacin de Ram, o que te pasen a un ordenador con un microprocesador ms potente,
etc, etc. Ya sabes, pagando te ponen lo que quieras, hasta luces de neon je je je je.
En este caso de los servidores dedicados ocurre lo siguiente. La compaia te da el
ordenador, instalado en sus locales, con conexin a internet, medidas idoneas de seguridad,
etc, pero eres t quien debe configurarlo todo desde tu casa. Todo significa, instalar el
sistema operativo, paneles de control, cortafuegos, antivirus, bases de datos... todo, con lo
que has de ser un genio en redes o en linux si escoges ese sistema operativo. Para arreglar
esto, algunas compaias te dan la opcin de pagar un poco ms al mes y ofrecerte todo ya
hecho, listo para subir tu web y olvidandote de todo lo dems. Si no controlas mucho,
merece la pena, desde luego. A este servicio lo suelen llamar, servidor dedicado manejado,
o managed.
Falta decir que al ser todo tuyo, puedes alojar en l no solo una web, sino todas las que
quieras.

Housing o Colocation
Otra opcin ms, quizs no tan habitual. Se trata de que t compras tu propio servidor,
en la tienda de al lado de tu casa, lo configuras todo a tu gusto y... como la conexin de tu
casa no es muy rpida, ni quieres correr el riesgo de un apagn, se lo envas a una
compaa que lo instala en sus locales y lo conecta con sus rpidas conexiones a internet.
Solo pagas para que ellos te lo cuiden y se aseguren de que su conexin y seguridad es la
idonea, adems del consumo de transferencia que tengas. En este caso tambin has de
saber configurarlo t todo, claro. Es ms barato que el caso anterior, pero no hay opcin de
que ellos lo manejen, ni de que la compaia le haga ampliaciones.

Planes Reseller
Es como un servidor virtual o dedicado en el que puedes no solo crear las cuentas que
quieras para alojar varias webs, todas la que quieras, sino que adems puedes venderlas a
tus clientes. El servicio tcnico en ese caso lo tendrs que dar t, claro, por lo que
conviene antes controlar todos estos temas.

Servidor Windows, Linux o Mac?


A la hora de escoger un hosting podrs ver que en las caractersticas pondr que trabajan
bajo Windows, Linux o Mac. Se refiere al sistema operativo que usa ese servidor. Escoger
uno u otro no depende de que sepas o no usar Linux o Windows, pues a no ser que hayas
escogido un servidor dedicado no administrado, el sistema operativo del servidor nunca lo
vas a tocar t. Yo no tengo ni idea de usar Linux y mi servidor funciona con ese sistema. A
continuacin te indico algunas caractersticas que te pueden ayudar a elegir uno u otro.

Hosting Windows

Los sistemas bajo Windows se usan para quienes programan en ASP, ASP.NET, y/o usan
bases de datos Access y para usuarios que disean sus pginas web con extensiones de
FrontPage, debido a que han sido especialmente diseadas para trabajar con ese sistema
operativo. Los hostings de Windows requieren la adquisicin de licencias a Microsoft por
parte de las compaas que ofrecen estos servicios, por lo que resulta ligeramente ms
costoso al repercutir estos gastos de alguna manera en el usuario final, que eres t.

Hosting Linux

Los sistemas Linux se usan para cualquier tipo de proyecto que no requiera el uso de las
tecnologas anteriores: ASP, ASP.NET, Access, FrontPage. Son vlidos para cualquier tipo de
proyecto que haga uso de tecnologas como C, o bien se base en PHP*, Perl, o Mysql*, pues
este tipo de servicios est optimizado para entornos Linux. Para la utilizacin de un hosting
Linux no se requieren conocimientos sobre dicho sistema operativo, pues lo que tu terminas
usando es solo el panel de control.
Los servidores o Hostings que soportan Linux estn basados en licencias del tipo GNU
(Software Libre, gratis), y por eso este tipo de hosting resulta bastante ms barato y no por
ello aon peores, ni mucho menos.
* Tanto el Php con MySQL son necesarios para instalar foros del tipo phpBB, Smf, etc.

Hosting Mac

Por norma general los sistemas Mac los usan usuarios con necesidades de programacin
idnticas a las de hosting linux. Necesidad de streaming de alto rendimiento, etc. Son
relativamente nuevos y no se suelen encontrar muy facilmente.

Hosting Gratuitos
La ventaja de los hosting gratuitos es clara, son gratis y segn el que elijamos podemos
encontrar algunos con espacio ms que suficiente para nuestra pgina web, con una tasa de
transferencia normalmente moderada, y con un poco de suerte con php y bases de datos
Mysql que son imprescindibles para alojar foros del tipo phpBB, como el que usamos en
CCTW.
La parte mala? Pues que casi siempre tenemos que soportar un banner de publicidad en
nuestra web, cuyas ganancias iran directamente a parar a los bolsillos de la compaia que
te ofrece el alojamiento gratis. Pero es un precio justo, no? Ellos te dan espacio web a
cambio de un banner suyo, lo veo lgico.
No obstante, hay compaias que piensan que sus servicios son tan buenos que les merece
la pena regalaros planes pequeos con mysql y todo sin publicidad alguna. Es por que saben
o piensan que os va a gustar tanto que cuando se os quede pequeo ese plan no dudareis en
pagar un poco para adquirir un plan superior con ellos. Tambin lo veo coherente, lgico y
justo, no crees?
A continuacin os detallo como registraros en algunos servidores gratuitos. En algunos
casos os dan el espacio web a cambio de publicidad, otras no, pero siempre intentar que
al menos os ofrezcan una base de datos para que siguiendo los cursos de CCTW podis
aprender a insertar foros y esas cosas.
Por el momento no me llevo comisin si os registrais en cualquiera de ellos, pero no sera
mala idea verdad? je je je. Antes de decidiros por uno de ellos mirad bien las
caractersticas de cada uno de ellos. Si has leido la seccin anterior donde te explico qu
significa cada trmino no debes tener muchos problemas para saber cul te conviene ms,
no? Adems, si encuentras algun otro que no est aqu y que crees que merece la pena, no
dudes en decrnoslo en el Foro CCTW, oki?
Est todo detallado para que te puedas registrar sin problemas y conseguir tu espacio
web gratis. Ale, a leer y a elegir!
Ah! Y no olvides que por solo unos pocos euros al mes puedes disponer de un hosting de
pago con todo lo que necesitas. Seguro que te gastas ms en golosinas! je je je. Psate por
AllinHosting y vers como no merece la pena usar un hosting gratis teniendo sus servicios
por tan poco dinero. Os lo recomiendo,

Hosting Gratis con RazyHosting.com


Tras mucho buscar es lo mejor que he visto hasta el momento. Te ofrecen 150 megas de
espacio web, 4 gigas de transferencia mensual (normalmente dal una Gb solamente). Como
guinda, 1 base de datos MySql, la posibilidad de comprar un dominio de verdad, tipo .com o
.es y relacionarlo con ese espacio y encima sin publicidad alguna o si lo prefieres te regalan
un subdominio gratuito. Qu ms puedes pedir? Solo tiene un problemilla (no hay nada
perfecto) y es que su portal est en ingls solamente, pero bueno, como te lo voy a explicar
paso a paso el idioma no ser un problema, ya vers. Si ms adelante se te queda pequeo,
por solo un par de dolares puede mejorar esas caractersticas notablemente o tambin
puedes mirar los hosting baratos que ofrece AllinHosting que son inmejorables.

El registro en RazyHosting Paso a Paso


1.- Visita la web de RazyHosting en http://razyhosting.com (se abrir en una ventana
nueva para que puedas seguir estas instrucciones).
2.- Pulsa en el "Order now" en rojo ("pdelo ahora" significa) que hay encima del S0.00.

3.- Se abre otra ventana en la que se te muestran los distintos planes que puedes elegir.
Si lo quieres gratis escoge el primero de todos llamado "FREE Hosting Plan". Para
seleccionarlo pincha en el circulito que aparece a su izquierda. Lo pones en verde haciendo
clic sobre l.

Si has comprado alguna vez un nombre de dominio y quieres aprovecharlo para este
hosting solo tienes que escribir su nombre un poco ms abajo, donde pone Choose Domain
Name. Si no tienes un dominio de pago Razy te regala un subdominio. En cualquier caso
despus de seleccionar el plan gratuito pulsa sobre Continue que aparece abajo en rojo.

5.- Seguidamente has de rellenar tus datos personales para darte de alta. Realmente no
interesa dar datos falsos, es una tonteria. Adems si pones por ejemplo un correo
electrnico inventado nunca te llegarn los correos de activacin. Si ya has estado
registrado con Razy antes basta con rellenar la primera parte, en la que pone Existing
Client (Cliente existente):

Si eres nuevo en Razy pasa a rellenar los datos de ms abajo, donde pone New Client
(nuevo cliente):

Te traduzco por si acaso:


- First Name: Es tu nombre.
- Last Name: Es tu primer apellido. Fuera de Espaa se usa solo uno. En Espaa se usan
dos, pero puedes poner uno solo.
- Company: En el nombre de tu empresa. Si no tienes no pongas nada, o pon "ninguna".
- E-Mail: Tu direccin de correo. Ha de ser vlida para que te llegue el correo de
activacin!
- Confirm E-Mail: Repite el correo que has puesto antes.
- Address 1: Tu direccin. Es obligatorio llenar los cuadros con asterisco rojo.
- Address 2: Esto es solo por si no tienes suficiente espacio en el cuadro de direccin de
arriba.
- City: Tu ciudad.
- State: Tu provincia.
- ZIP: Es tu cdigo postal. No, no ha de estar comprimido... je je.
- Country: Tu Pais.
- Phone: Tu nmero de telfono. Pone que es obligatorio.
- Fax: Nmero de Fax. Es opcional, sobre todo si no tienes... ;)
Ahora lo siguiente es aceptar los trminos de condiciones marcando la casilla junto al Yes
y pulsar sobre Continue:

Tras pulsar en "Continue" te aparece este mensaje de verificacin. Ests registrado!

Te da las gracias y te dice que tu cuenta ha sido creada. Ahora tienes que abrir tu
programa de correo y mirar, pues en unos segundos recibirs dos E-Milios con tu login o
nombre de usuario y tu contrasea o password. Son algo como esto:
De ese E-Mail de arriba tienes que apuntarte en alguna parte el Client ID y el Password
pues son los dos datos que te pedirn para logearte o iniciar tu sesin en Razy.
En el segundo E-Mail que recibirs de Razy te dan datos para configurar el FTP (si ahora
mismo no sabes ni qu es no te preocupes que lo explico en el curso paso a paso) y el coreo
electrnico:
La informacin del primer recuadro rojo de arriba solo te hace falta si dispones de un
dominio propio (que has comprado) y quieres relaccionarlo con este hosting, es decir, que al
escribir la direccin de tu dominio aparezca la web alojada en este espacio web. Si no
dispones de dominio propio no te hace falta.
Los datos del segundo recuadro rojo son los que necesitars ms tarde para configurar tu
programa FTP y poder as subir los archivos de tu web que tienes en tu Pc hasta el hosting o
servidor para que la gente pueda visitarla.
Para configurar tu programa de correo electrnico y ver en l los correos de la cuenta
que te regala Razy tienes tambin algunos datos al final del E-Milio.
Pues bien, sigamos por orden. Si abres el primer correo que menciono vers en l un
enlace. Tienes que hacer clic en l para acceder a la ventana de login de Razy y confirmar
tu cuenta. Para ello abre ese E-Mail y haz clic donde te he senalado con un circulo rojo:

Acceder as a esta pgina de Razy en la que tienes que indicar los datos que recibiste y
que ya deberas haberte apuntado en alguna libreta. Que luego se te olvida y no puedes
entrar!! je je.

Tras poner tus datos pulsa en "Login" y entrars por fin en tu Panel de Control. Ya sabes,
todo en Ingls pero es lo que hay... Lo importante de la pgina que se te va a abrir en el
navegador est en la parte izquierda. Vers all unos mens con un montn de opciones. A
veces casi uno prefiere que el hosting no te regale tantos extra, je je je, por que se
termina volviendo uno loco con tanta opcin, ja ja ja. Vamos a ver que hay por esos mens.
En el primer men, el de ms arriba, nos contramos con nuestro nombre y algunas
opciones que por el momento no vamos a usar. Todas esas opciones son de pago:
Entre ellas tenemos escoger otro plan mayor de pago (Plan Upgrades), registrar un
dominio de pago (Domain Registration), ofertas especiales y renovar cuenta (Account
Renewal). Como te digo, por el momento las olvidamos.
El resto de mens de abajo son las estadsticas resumidas donde se puede ver el espacio
de disco usado y restante, el trafico generado, etc. Si te fijas, en ese mismo lateral y abajo
del todo pone algo as como "Hosting Settings".

Pulsa sobre "Hosting Settings" para poner en marcha nuestro espacio web. Aparece otra
pgina con este otro men en el lado izquierdo:

Este es el men "Website Manager" y se puede acceder a l tambin pulsando sobre un


enlace con ese mismo nombre en una barra horizontal de enlaces que hay en la pgina de
Razy en la parte de arriba.
Si ahora pulsas sobre "Subdomain Manager" podrs escoger tu subdominio. Esto ser la
direccin de tu pgina web en Razy. La primera parte del nombre la elijes tu y has de
escribirla dentro del recuadro en blanco de esa pgina:

La segunda parte del nombre o subdominio la tienes que elegir de entre los que
aparecen en el desplegable de la derecha. No queda muy muy elegante tener esa segunda
parte, pero es el precio a pagar por no pagar ningn precio, je je je. Si quieres que no
aparezca nada de eso tienes que optar por comprarte un dominio propio. En el ejemplo que
seguimos ac suponemos que lo quieres gratis ;)
Una vez escribas el nombre de tu web en el recuadro y escojas la segunda parte que ms
te guste (o que menos te desagrade) pulsas en Add Subdomain y esperas unos segundos
mientras se genera.
Aparece entonces esta ventana:

En ella te dice que en 5 minutos estar activo (tienen que configurarlo ellos en su
servidor para que te funcione y les lleva un tiempo). Desde esa misma ventana puedes
hacer varias cosas. Si haces clic en las dos ruefas amarilla y azul de la derecha puedes
modificar el nombre del subdominio. Si haces clic en la cruz roja (cuidado, ambas cosas
estn muy cerca) puedes eliminarlo. Tambin puedes pulsar sobre el enlace azul de la
izquierda, que te dirige a.... tu nueva pgina!! Apuntate esa direccin, pues es la URL de tu
web.
Si pulsas sobre ella te aparece una pgina por defecto. No est en blanco sino que
aprovechan para poner cosas suyas. Cuando configures tu FTP y subas tu pgina se ver la
tuya en lugar de esa, no te preocupes.
Contento, no? Fue fcil? Pues claro. Para cualquier aclaracin no dudes en usar el Foro
CCTW que para eso est! Ya puedes volver al Curso Paso a Paso para seguir configurando el
FTP, aprender a crear una pgina y subirla a internet!
Resumiendo:
Si te das de alta en Razy tienes que saber y apuntarte para poder configurar tu FTP los
siguientes datos:
- Nombre de usuario: Es un nmero que te envian en el E-Mail.
- Contrasea: Es el password que te envian en el E-Mail.
- Direccin FTP: es la direccin de tu web, algo parecido a
esteesmisubdominio.atwebpages.com y tiene dos partes, una que te has inventado tu (en mi
caso esteesmisubdominio) y despus del punto, otra que has elegido del desplegable que
salia (en mi caso atwebpages.com).
- Ruta del servidor: es de nuevo la direccin de tu web, como el apartado de antes.
- En tu FTP has de activar la casilla de ACTIVE o servidor ACTIVO.
Sabiendo esas cosas podrs configurar tu FTP sin problema alguno ;=)

Hosting Gratis con iEspana.es


Por si no te gustan las otras opciones, paso a comentarte las caractersticas y cmo
registrarte en iEspana.es. Te ofrecen 100 megas de espacio web, (no dice nada de la
transferencia mensual que te da, o al menos yo no lo he encontrado...). Te dan tambin 1
base de datos MySql y una direccin email. Lo malo es que has de soportar su publicidad en
cada una de tus pginas web. Lo bueno es que todo est en espaol....

El registro en iEspana.es Paso a Paso


1.- Visita la web de RazyHosting en http://web.iespana.es (se abrir en una ventana
nueva para que puedas seguir estas instrucciones).
2.- Pulsa en el "inscribirse" que est en la parte de abajo de esta imagen:

3.- Se abre otra ventanaen la que tienes que poner tus datos (no es necesario mentir...).
Presta atencin, pues el nombre que pongas como "Nombre de Usuario" ser parte de la
direccin de tu web, de forma que si no quieres que tu direccin sea manolito.noseque, en
lugar de tu nombre elije el nombre que deseas para tu web como nombre de usuario, oki?
Si el nombre elejido ya existe te lo dir y tendrs que poner otro. Fjate que de ese
nombre depender la direccin de tu web, la de tu correo y la del blog, si es que te decides
a crear uno algn da.
4.- Continua poniendo tus datos en ese formulario y finalmente escribe el cdigo de
seguridad en el recuadro.
Uno de los datos a introducir es tu E-Mail secundario. iEspana te da un email, pero si
quieres recibir los datos de confirmacin de la creacin del espacio web en otro email que
tengas, has de escribirlo en ese recuadro. Si lo dejas en blanco se te avisar al email que te
va a dar iespana.
En la parte de abajo de todo ese formulario vers un apartado en el que pone "Prefiero
recibir las newsletters e informaciones de iESPAA en mi :" y te da a elegir entre tu
correo de iespana o en el correo secundario. Ya sabes que la activacin de la web se te
enviar al que escojas.
Despus haz clic sobre "Acceder inmediatamente a tus servicios".

y en la ventana que se abre vers que tienes un email en tu nueva cuenta. Accede a ver
ese email haciendo clic en el buzn:

Abre entonces ese email y vers tus datos de acceso a tu cuenta.


5.- Ahora, para crear tu espacio web lee el correo aquel hasta el final, donde encontrars
un enlace en el que pone "Crear tu iWeb". Haz clic all.
6.- En la ventana que se abre tienes que hacer clic en donde pone "Activar este servicio":

7.- Te dice ahora que tu servicio se est creando y que esperes unos segundos. Tras un
momentito te aparecen los datos que necesitas para poder configurar el FTP, un programa
que te permite subir los archivos de tu web al servidor o hosting:

Toma nota de ellos pues te harn falta en varias ocasiones, no los olvides pues con estos
datos puedes configurar ya el FTP para subir los archivos de tu web a tu servidor o hosting.
Fue fcil? Pues claro.
Para cualquier aclaracin no dudes en usar el Foro CCTW que para eso est!

Hosting de Pago
Dame ms tiempo para terminar esta seccin. Por el momento solo decirte que
ComoCrearTuWeb a pasado por dos hosting de pago, el primero fue Dinahosting con un
servicio al cliente genial, y unos planes ms que suficientes para pginas web pequeas y
grandes (no tanto para medianas..). Cambi a otra compaa de hosting porque el foro
saturaba el servidor del plan que tena contratado con ellos y el plan siguiente ms potente
se me salia de presupuesto, no encontr con ellos una cosa intermedia.
El segundo hosting de pago por el que ComoCrearTuWeb ha pasado es el de AllinHosting.
Por el momento me parecen tambin geniales o incluso mejores, adems de tener unos
precios muy competentes, una atencin al cliente rpida y eficaz y muchas opciones para ir
aumentando la potencia del servidor conforme crece tu pgina web. Lo nico que me hizo
dudar fue que tienen los servidores en USA (aunque el servicio al cliente es en castellano) y
tema caer de posiciones en Google, pero por el momento estoy muy contento con ellos y el
cambio de Dinahosting a AllinHosting solo me a traido beneficios. Por solo unos 24 dolares al
ao tienes un espacio para tu web de lo mejor que he encontrado desde que estoy metido
en esto. Si contactas con ellos diles que vas de parte de CCTW y te tratarn muy bien ;), en
serio.
Cualquiera de sus planes incluye bases de datos, estadsticas muy completas, y un buen
panel de control desde el que puedes crear tus conexiones ftp, cuentas de correo e incluso
instalar foros php, blogs, galerias de imgenes, etc, etc, etc con un solo clic.
Y si un da se te queda corto, les envas un email y por muy poca diferencia de precio
puedes aadir ms memoria ram, ms espacio o lo que necesites sin necesidad de cambiar
nada en tu web o servidor.
Haz la prueba, escrbeles y consultales cualquier cosa relacionada con sus hostings y
vers que bien y rpido te contestan. Por cierto, con ellos tambin puedes contratar el
dominio que quieras. Est bien tener tanto el hosting como el dominio en el mismo lugar
pues as ante cualquier cambio ellos se encargan de todo.

Una vez que compres un plan de hosting, los datos que necesitars para configurar el
dreamweaver o el programa que uses para subir los archivos de tu web sern (suponiendo
que tu dominio es "buenosdias.com"):
- Servidor FTP: ftp.buenosdias.com
- Directorio del servidor: public_html/
- Usuario: t sabrs...
- Contrasea: t sabrs...
- Utilizar FTP pasivo: Activar esa casilla.
Toma nota de estas cosas para poder subir tus archivos a tu hosting. Y ten en cuenta que
al principio no funcionar, pues hay que esperar ms o menos un da a que el dominio y el
hosting estn relaccionados el uno con el otro. Si le dices a Allinhosting que te configure los
DNS te lo harn encantados y solo te queda esperar unas horas.
Cuando tenga ms tiempo te comento ms cosas..

Definicin de Nombre de Dominio


Como definicin, es un conjunto de caracteres que identifican un sitio de Internet
accesible por un usuario. El estilo de los nombres de "host"[?] utilizado actualmente en
Internet es llamado "nombre de dominio"[?]. Algunos de los dominios ms usuales son: .com
(para empresas), .edu (para pginas de educacin, escuelas), .org (para organizaciones sin
nimo de lucro), .net (para webs relacionadas con la red), etc. Cada pais adems posee un
dominio propio, como, .us (Estados Unidos de Amrica), .es (Espaa), .au (Australia). As,
por ejemplo, el nombre de dominio ".es" identifica a los usuarios espaoles. Incluso se anda
estudiando el .cat para pginas en cataln.

Dominios Gratuitos y Dominios de Pago.


Para obtener un dominio podemos optar por usar uno gratuito o contratar un dominio de
pago, es decir, registar un dominio.
Respecto a los dominios gratuitos, En realidad son sub-dominos; el dominio principal es
el del servidor gratuito, como por ejemplo Wanadoo, iEspana, etc y el que te ofrecen es un
subdominio del mismo, como por ejemplo www.iespana.es/tu-nombre-de-registro. Su
principal ventaja es que son gratuitos y como inconveniente tenemos que no resultan muy
serios (se nota que no son propios y eso resta seriedad), las URLs que nos ofrecen resultan
algo largas y liosas para recordar (http://perso.wanadoo.es/tu-nombre-de-registro).
La desventaja de los dominios de pago (registro de dominios propios) es que no siempre
estn disponibles los que nosotros deseamos, teniendo que buscar alternativas. Adems,
hay que pagarlos, claro. Como ventajas principales encontramos un nombre fcil de
recordar (www.este-mismo.com) y por supuesto mucho ms serio a ojos de nuestros
visitantes (o clientes).
Por cierto, no se si lo he dicho ya pero lo ms importante para tener visitas es aparecer
bien posicionado en Google. Si tienes un dominio propio en lugar de un subdominio gratis,
Google te tomar ms en serio y te posicionar mejor. Si te gastas unos euros en registrar
tu dominio Google entiende que vas en serio y creer que tu web va a merecer la pena ser
visitada. ;)

Tipos de Dominios disponibles. Cul Escoger


Existen multitud de tipos de dominios que poder registrar. Los ms frecuentes y que
todos conocemos son los .com que son accesibles para todos los pblicos, es decir,
cualquier persona puede registrar un dominio .com
No obstante existen ciertos dominios para los que necesitamos demostrar que cumplimos
algunos requisitos imprescindibles para poder hacer el registro (.es .cat ....) aunque
actualmente esto parece haber cambiado y ya cualquiera puede registrar un punto es.

Cmo saber si est libre el dominio deseado


Para registrar un dominio primero hemos de asegurarnos que ste est libre (que nadie lo
tiene ya registrado). Esto se puede consultar fcilmente visitando la web de cualquier
compaa que venda dominios y escribiendo el nombre que deseas como si fueras a hacer la
compra. Te dir si est o no registrado.

Por ejemplo, entra en la web de AllinHosting y en el men de arriba pon el ratn sobre
donde pone Servicios y despus en Registro de Dominios. Pon el nombre que deseas
registrar y te dir si est libre todava o no. Si no est libre busca una alternativa, un
nombre similar, o colcale la palabra web al principio o al final si te gusta como queda. O
intntalo con otra extensin (aunque recomiendo .com o .net). Si est libre cmpralo antes
de que te lo quiten. Por unos 13 dolares es tuyo (unos 9 euros al ao).

Obtener informacin acerca del propietario de cierto dominio


Si el dominio que deseabamos registrar ya est en uso, an nos queda la posibilidad de
averiguar quin es su propietario y seguramente por cuanto tiempo lo tiene registrado. A
veces, hay personas que registran ciertos nombres de dominio no para utilizarlos, sino por
ser propietarios de algunos nombres que saben que pueden tener cierta demanda. En esos
casos lo registran para negociar un precio alto con las personas interesadas. Si lo quieres,
tendrs que pagar lo que te pidan o esperar a ver si se le acaba el plazo de registro y queda
libre, aunque paree mejor idea ir buscando otro nombre para nuestro dominio, si es
posible....
Hay una web desde donde puedes ver quin es el propietario de cierto dominio, adems
de otros datos. Es bastante interesante, as que te dejo su direccin:
http://whois.domaintools.com
Por ltimo comentarte que una vez tienes el hosting por un lado y el dominio por otro, es
necesario relaccionarlos para que al escribir el dominio aparezca lo que tienes en el
hosting. Si compras el dominio y el hosting en la misma empresa, estos se encargaran de
todo sin cobrarte nada (al menos Allinhosting.com no te cobra nada) y te ahorras trabajo y
lios.
Pronto incluir mucha ms informacin en este apartado dedicado a los dominios y su
registro.

Los 3 Pasos Para Ganar Dinero En Internet


1. Piensa en un tema que te apasione y que la gente est buscando en Internet;
2. Desarrolla un curso o libro electrnico de ese tema;
3. Genera un sistema automatizado que le venda ese curso o libro electrnico a la gente que YA lo
est buscando.
Top of Form

Bottom of Form

Bottom of Form