You are on page 1of 43

Introduccin al curso para aprender a crear una pagina web desde cero,

aqu veremos que es lo que necesitamos para seguir este


curso, no tengas miedo ser mas fcil de lo que parece!.
Saludos amig@, veo que tienes ganas de crear tu propia pgina Web, quiero decirte que
llegaste al lugar indicado. En este curso vamos a aprender a crear una pagina web paso a
paso, desde cero, no hace falta que sepas programacin ni cdigos raro, todo lo aprenders
en este sitio.
Para comenzar el camino de un Webmaster comenzaremos con lo que llamamos "HTML",
con el aprenderemos a insertar texto, imgenes y enlaces, luego seguiremos con los estilos
CSS, pero antes vamos a instalar un editor HTML para seguir el curso.

Que necesitamos?
Para empezar necesitaremos el programa NVU, un editor HTML muy potente y liviano.
Pero lo que mas necesitaremos es tiempo y dedicacin, sin eso no llegaremos a ningn
lado.

En esta leccin vamos a configurar la interfaz del NVU,


para poder trabajar mas tranquilos a lo largo del curso
para crear una pagina web desde cero.
En la leccin anterior vimos como descargar e instalar el editor HTML NVU, ahora vamos
a ver como configurarlo para adaptarlo a nuestras necesidades.
Lo primero que haremos es abrirlo, si ya lo hicimos tendramos que ver una pantalla como
esta:

Lo que queremos hacer es simplificarlo, por eso vamos a cerrar el "Administrador de sitios"
haciendo clic en la cruz, como esta en la imgen.
Ahora vimos que el espacio en blanco se expandi, por lo tanto podremos escribir mas
cdigo HTML, eso es bueno jeje.

Si no entiendes que hace exactamente cada una de las pestaas que estan marcadas en rojo,
no te preocupes, estoy para explicartelo ;), para que te des una idea:
1. Normal: es el modo WYSIWYG WYSI... QUE!? significa What You See Is
What You Get (en ingls, "lo que ves es lo que obtienes"), todo lo que escribamos
ah ser traducido a cdigo HTML automticamente.
2. Etiquetas HTML: igual al anterior, solo que veremos las etiquetas HTML.
3. Cdigo Fuente: esta es la pestaa que mas utilizaremos, ah es donde vemos el
cdigo de fuente de nuestra pagina web, tambin nos acostumbraremos a escribir
todo ah (Si llegaste hasta aqu no estars pensando en abandonar no? jeje).
4. Vista preliminar: esta pestaa tambin la utilizaremos muy seguido, en ella
podremos ver como va quedando nuestra pagina web, muy til.
Bien, ya sabemos lo que tenemos que saber, ahora es hora de comenzar a ver los conceptos
bsicos del HTML.

Introduccin a HTML, el lenguaje que utilizaremos para


crear una pagina web, todo lo que necesitas saber
para comenzar a crear tu primera pagina web.
Primeros Conceptos
Empezamos por lo bsico, Que es una pagina web? bien, una pgina Web es un conjunto
de lineas de cdigo ordenadas para que formen una estructura, los navegadores web
entienden ese cdigo y lo muestran como un sitio web.

Cdigo HTML: sistema de etiquetas


El cdigo HTML hace uso de etiquetas (palabras que indican una funcionalidad), las
etiquetas siempre se inician de esta forma:
<etiqueta>

y para indicarle que queremos cerrar la etiqueta le anteponemos una barra diagonal (/) antes
del nombre, de esta forma:
</etiqueta>

siempre, recuerda, siempre tenemos que cerrar las etiquetas para evitar resultados
indeseados.
Nota: El navegador Web (programa que utilizamos para navegar por internet,
ej: Firefox, Internet Explorer) es el que entiende el cdigo HTML.

Cdigo HTML: Estructura


El cdigo HTML tiene una estructura que debemos seguir al pie de la letra, primero
debemos escribir la etiqueta <html> de esta forma:
<html>
</html>

La primera etiqueta <html> indica que comenzamos nuestra pgina y la segunda </html>
indica que nuestro cdigo HTML ha terminado, todo nuestro cdigo ir dentro de esas
etiquetas.

Cdigo HTML: Estructura de una pagina web


Recin vimos como comenzar una pagina web, pero aun hay etiquetas que debemos escribir
obligatoriamente al momento de crear una pagina web, la estructura que debemos seguir en
toda pagina web es:
<html>
<head></head>
<body>
</body>
</html>

Hay partes de nuestra pgina Web que se ven (imgenes, texto, enlaces) y otras que no
(Titulo, descripcin y dems atributos que veremos mas adelante), las partes de nuestro
pagina que no se ven van entre las etiquetas <head> y </head>.

Cdigo HTML: definiendo el titulo de nuestra pagina


Web
El titulo es lo que se ve en la ventana del navegador, no se ve directamente en el contenido
de la pagina, por lo tanto tendremos que ponerlo dentro de la etiqueta <head>, pero Como
hacemos para indicarle al navegador que escribiremos el titulo? muy simple, el texto que
nosotros queramos que sea el titulo lo encerramos entre <title> y </title> de esta forma:
<html>
<head>
<title>Titulo de nuestra pgina Web</title>
</head>
<body>
</body>

</html>

Cdigo HTML: agregando texto en nuestra pagina Web


Todo el contenido lo pondremos dentro de las etiquetas <body> y </body>, de esta forma:
<html>
<head>
<title>Titulo de nuestra pgina Web</title>
</head>
<body>
Este es el contenido de la pgina Web.
</body>
</html>

En esta leccin aprenderemos a crear la pagina inicial de


nuestra pagina web, como se debe llamar, donde
ubicarla, etc.
Toda pagina web debe contener un archivo llamado "index" seguido del nombre del cdigo
en el que la estamos haciendo, en nuestro caso se llamar "index.html", esta es la pagina
principal de toda pagina web.
Para empezar a crear nuestra pagina principal primero vamos a crear una carpeta en "Mis
Documentos" con el nombre "ejemplo-ccusw" donde colocaremos todos los archivos de
nuestra pagina web.
Ahora vamos a abrir el editor HTML NVU que instalamos en una de las lecciones
pasadas, luego iremos a "archivo" y a continuacin haremos clic en "nuevo", se nos abrira
una mini ventana como esta:

Nos aseguramos de tener la configuracin igual que en la imagen y hacemos clic en


"Crear". Una vez hecho esto veremos una pagina en blanco, aun no le hemos puesto
nombre, para eso hacemos clic en "archivo" y luego en "guardar".

En la ventana que nos aparece tenemos que poner el nombre del archivo, como dijimos
antes lo llamaremos index.html luego hacemos clic en aceptar.
Nota: Es importante que el nombre sea "index", de lo contrario al entrar a la
direccin principal de nuestra pgina no veremos nada

Ahora nos aparecer una ventana que nos pregunta donde queremos guardar ese archivo, es
fcil, lo hacemos en la carpeta que creamos antes recuerdas? aquella que se llamaba
"ejemplo-ccusw" y estaba en "Mis Documentos", cuando estamos en esa carpeta hacemos
clic en guardar y listo, si vamos a esa carpeta tendremos que ver el archivo index.html:

Ya tenemos la primer pagina de nuestra web, ahora falta lo mas importante, agregarle
contenido jeje.

En esta leccin aprenderemos las etiquetas basicas de


HTML, para insertar parrafos y saltos de linea.
Cdigo HTML: insertar parrafos
La etiqueta que se utiliza para insertar parrafos en HTML es:
<p>
y finalizar el prrafo:
</p>
Ahora vamos a abrir el archivo index.html de nuestra pagina web para probar esta etiqueta:

En la leccin de conceptos bsicos de HTML vimos que cuaquier tipo de contenido visible
debe ir dentro de las etiquetas "<body>" y "</body>", entonces para agregar un prrafo lo
haremos as:
<html>
<head><title>Mi primer pagina Web</title></head>
<body>
<p>Este es mi primer prrafo</p>
</body>
</html>

Cdigo HTML: insertar saltos de linea


Para insertar saltos de linea en HTML utilizaremos la etiqueta:
<br />
o no que es fcil? jeje, al ejemplo anterior le insertaremos un salto de linea y un prrafo
mas, de esta forma:
<html>
<head><title>Mi primer pagina Web</title></head>
<body>
<p>Este es mi primer prrafo</p>
<br />
<p>Creado gracias a CCUSW</p>
</body>
</html>

Tan simple como eso, y ahora si lo vemos en vista preliminar quedara as:

Bien, ya sabes crear prrafos y saltos de linea, Pronto tendrs tu primer pagina web
terminada! y hars webs mejores que esta, eso te lo aseguro jeje ;)

En esta leccin aprenderemos a crear enlaces con cdigo


HTML para tu pagina web.
Para crear un enlace necesitamos la ubicacin, o mejor dicho, la direccin hacia donde nos
llevar ese enlace al hacer clic en el, podemos poner una ruta absoluta (por ejemplo
http://www.comocrearunsitioweb.com/ubicacion-enlace.html) o bien, una ruta relativa
("/enlace.html" si es que el archivo desde donde enlazamos se encuentra en el mismo
directorio del archivo en el que estamos en ese momento, o sea el "index.html" que
creamos al principio).
La etiqueta para crear enlaces es <a> y </a>, pero claro, aun falta algo no?, falta poner la
direccin hacia donde nos llevar ese enlace, para eso esta el atributo href, se utiliza de esta
forma:
<a href="http://www.comocrearunsitioweb.com">Crear Web</a>

El texto del enlace va encerrado entre <a> y </a>, esto dara como resultado:
Crear Web
Nota: cada vez que nos toque crear un enlace hacia otra pagina web (es decir,
que no sea una seccin de nuestra pagina) utilizaremos la direccin absoluta
con el prefijo "http://".

Ahora vamos a insertar un enlace a nuestra pagina web de ejemplo, el texto del enlace ser
CCUSW (ComoCrearUnSitioWeb):
<html>
<head><title>Mi primer pagina Web</title></head>
<body>
<p>Este es mi primer prrafo</p>
<br />
<p>Creado gracias a <a
href="http://www.comocrearunsitioweb.com">CCUSW</a></p>
</body>
</html>

El enlace ya esta creado, ahora cambiaremos de pestaa para ver como queda:

Crear enlace de email


Podemos crear enlaces que al hacer clic nos abra un programa para enviar email
directamente, para crear estos enlaces solo tenemos que escribir "mailto:" antes de la
direccin de email, de esta forma:
<a href="mailto:tuemail@hotmail.com">Texto del enlace</a>

y el resultado es:
Texto del enlace

En esta leccin aprenderemos a insertar o colocar


imgenes con cdigo HTML, y tambin veremos como
hacer que esa imagen tenga un enlace.
Llego el momento de insertar nuestra primera imgen con HTML, la etiqueta que sirve
para agregar imagenes es <img> pero al igual que la etiqueta para crear enlaces,
necesitamos agregar un atributo para especificar la ubicacin, en este caso, de la imgen.
Para insertar una imgen lo haremos as:
<img src="ubicacin" alt="descripcin" />

"alt" sirve para agregar una descripcin a la imgen, que aparecer cuando pasemos el
mouse por encima de ella.

Si cambiamos a la pestaa "Vista preliminar" veremos el resultado final:

Ah vemos como queda en nuestra pagina de ejemplo que venimos creando a lo largo de
todas las lecciones anteriores. Pero que pasa si queremos crear un enlace en la imagen para
que cuando hagamos clic en ella nos abra otra direccin? eso es lo que voy a explicar
ahora :)

Crear enlace en imgen


Para crear un enlace en la imgen para que al hacer clic en ella nos abra otra pagina, solo
debemos poner la etiqueta <img> dentro de <a> y </a>, de esta forma:
<a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen"
alt="descripcion" /></a>

Bastante simple no? ahora comenzaremos a ver estilos CSS, una tecnologa que te
ahorrara mucho trabajo, ya vers :)

Introduccin a los aspectos tcnicos de los estilos CSS,


como crear una hoja de estilos y relacionarla con nuestra
pagina web.

Muchas veces nos vemos un poco limitados al trabajar solo con HTML, aplicar colores,
tamao de fuentes y dems puede ser casi imposible si nuestra pagina web tiene mucho
contenido.
Para eso usaremos los estilos CSS, con ellos podemos aplicar cambios de colores, fuentes,
margenes, espacios, etc. a la web mucho mas fcil.

Crear la hoja de estilos CSS


La hoja de estilos CSS no contiene cdigo HTML, por lo tanto no deberemos escribir
etiquetas HTML en el, para crear la hoja de estilos vamos a:
1. Abrir el bloc de notas (NOTA: con NVU no funciona)
2. Clic en Archivo -> Guardar Como... se nos abrir una ventana donde tendremos que
decirle en que ubicacin queremos guardar la hoja de estilos, nosotros los haremos
en la carpeta ejemplo-ccusw donde estan los demas archivos de este curso.
3. Guardamos el archivo con el nombre: "estilos.css", recuerda, debe terminar en
".css" sin ms.
Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr, de alguna
forma, que los estilos que escribamos en ese archivo sean tomados en cuenta por el archivo
HTML.
Nota: recuerda que NO hay que escribir cdigo HTML en la hoja de estilos.

Relacionar la hoja de estilos CSS con nuestra pagina web


Para relacionar la hoja de estilos CSS utilizaremos la etiqueta <link>, en ella deberemos
especificar la ubicacin, tipo de archivo y la relacin entre la hoja de estilos y la pagina
web, debes acordarte SIEMPRE, que la etiqueta <link> va dentro de la etiqueta <head>, de
esta forma:
<link href="estilos.css" rel="stylesheet" type="text/css" />

Ah vemos que se especifican varios atributos, cada uno sirve para:

href: busca la hoja de estilos


rel: le dice la relacin

type: le dice que tipo de archivo es, o mejor dicho, que contenido llevar dentro.

Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribimos esto:

body{background-color:black;}

Guardamos y abrimos el archivo index.html con nuestro navegador (Internet Explorer,


Firefox, Opera, etc), si todo fue bien tendriamos que ver el fondo de nuestra pgina de color
negro.

En esta leccin aprenderemos los conceptos bsicos de los


estilos CSS, totalmente desde cero.
Conceptos bsicos
CSS sirve para aplicar estilos a las etiquetas HTML.

Estructura bsica del cdigo CSS


Para aplicar estilos CSS a una etiqueta HTML tenemos que hacerlo as:
etiqueta{atributo:valor;}

por ejemplo:
body{font-size:12px;}

Esa instruccin CSS har que el tamao de fuente del texto en todo el contenido dentro de
"body" (o sea, todo el contenido del sitio) sea de 12px (pixeles).
Nota: asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te
funcionaran los estilos.

Si lo que queremos modificar es un bloque, entonces al nombre del bloque o div le


anteponemos un numeral (#), por ejemplo:
#mibloque{ font-size:12px; }

y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del cdigo
HTML de nuestra pagina web, de esta forma:
<div id="mibloque">Este es mi primer bloque creado gracias a CCUSW</div>

Ese cdigo hara que todo el texto dentro de ESE bloque tenga un tamao de fuente de 12px,
lo que este fuera de ese bloque no tendra ningun estilo.

Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o almohadilla
(#) pondremos un punto (.), as:
.miclase{font-family: arial}

y desde el cdigo HTML la llamaremos as:


<span class="miclase">Esta es mi primer clase creada gracias a
CCUSW</span>

o tambin as:
<div class="miclase">Mi primer clase otra vez</div>

Entonces todo lo que este dentro de esas etiquetas la veremos con la fuente "Arial".
Nota: La diferencia entre una clase (.) y un bloque (#) es que el bloque es
nico e irrepetible en la pagina, es decir, si creamos un estilo de bloque
"#busqueda" para mostrar el cuadro de bsqueda no podremos usarlo otra
vez en la misma pagina, en cambio si a "#busqueda" lo convertimos en una
clase ".busqueda" podremos usarlo cuantas veces queramos.

En esta leccin a poner un color o una imagen de fondo


con CSS a nuestra pagina web.
Poner un color de fondo con CSS
Para poner un color de fondo con CSS utilizaremos background-color, esta propiedad
acepta los siguiente atributos:

Cdigo hexadecimal: as #000000 este sera el color negro.


Nombre: podemos elegir el nombre, aunque no funciona con todos los colores y
siempre tendremos que especificarlo en ingls, alguno de ellos son; gray, green, red,
etc.

Para este ejemplo usaremos el nombre del color, pero antes tenemos que abrir el archivo
estilos.css (que creamos en la leccin de hojas de estilos CSS) y escribir esto:
body{background-color:gray}

luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo largo del
curso), se tendra que ver as (primero asegurate de haber relacionado la hoja de estilos con
el archivo HTML):

Vemos que aplicandole el estilo a la etiqueta <body> funciono perfectamente, se puede ver
en la imagen.

Poner imagen de fondo con CSS


Ahora si queremos poner una imagen de fondo que se repita (un patrn), lo haremos con el
atributo background as:
body{ background: url(ruta/imagen.jpg); }

En este sitio he utilizado esta imagen:

Es una imagen muy chica, pero se repetir de arriba a abajo y quedar as:

Si nuestra intencin es que no se repita, el cdigo sera as:


body{background: url(imagen.jpg) no-repeat;}

Si queremos que repita horizontalmente, sera as:


body{background: url(imagen.jpg)

repeat-x;}

Y si queremos que se repita verticalmente, lo hacemos as:


body{background: url(imagen.jpg) repeat-y;}

Bien, ya hemos aprendido a colocar fondos con CSS y nuestra pagina web empieza a
tomar forma, vamos a la siguiente leccin.

En esta leccin aprenderemos a centrar contenido con


CSS, primero crearemos una clase y luego la llamaremos
desde el cdigo HTML de nuestra pagina web.
Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo menos, desde la
leccin de estilos CSS donde vemos que es una clase y como crearlas.
La clase que crearemos para centrar texto se llamar "centrar-texto" y contendr el atributo
"text-align" con el valor "center" de esta forma:

.centrar-texto{ text-align:center; }

y la usaremos desde el cdigo HTML as:


<span class="centrar-texto">Este es el texto que ir centrado</span>

este cdigo se ver as:

Nuestro archivo estilos.css va quedando as:

En rojo vemos la clase que creamos.

Que es el margen? Y el padding? Para que sirven? En


esta leccin responderemos todas estas preguntas y
veremos ejemplos prcticos.
Margin o margen CSS
Para que sirve? margin sirve para establecer la separacion entre dos elementos, aunque
parezca complicado de entender, no lo es :). Supongamos que tenemos una imagen y
pegado un bloque con texto dentro, bien, usando la propiedad margin podremos separar
esos dos elementos, asi esta mejor eh?.

Se utiliza as:
.clase{ margin: 10px ;}

Haciendo eso separaremos 10px la imagen del texto, ojo que estamos separando 10px de
arriba, derecha, abajo e izquierda, si queremos separar 10px solo de la izquierda, hacemos
esto:
.clase{ margin: 10px 0px 0px 0px}

Como vemos, podemos aplicar margenes por orientacin, los valores se aplican siguiendo
el sentido de las agujas del reloj, es decir:
.clase{margin: arriba derecha abajo izquierda;}

o tambin podemos hacerlo as:


.clase{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}

Claro que no hace falta especificar todas las orientaciones, solo basta con poner la que
queremos especificar.
Nota: siempre debes poner la unidad luego del valor, es decir, si quieres un
margen de 10 pxeles debes asegurarte de poner "px" luego del 10, de esta
forma: margin:10px;

Padding CSS
El padding a primera vista es igual al margin, incluso en determinadas ocaciones podremos
usar las dos y conseguiremos el mismo resultado visual, la diferencia esta en que padding
no separa dos elementos, mas bien crea un espacio dentro uno de ellos, por ejemplo, si
tenemos un bloque con texto dentro y una imagen al lado bien pegada, al aplicarle padding
al bloque con texto, los elementos siguen pegados, pero vemos un espacio al igual que si
usaramos la propiedad margin, solo que esta vez se creo un espacio dentro del bloque (con
margin se hubiera creado el espacio fuera del bloque) con texto dentro.
La forma de aplicarlo es igual que margin, solo que esta vez el nombre ser padding:

.clase{ padding: 10px; }


.clase{ padding: 10px 0px 0px 0px; }
.clase{

padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;

Como vemos, su uso es idntico a margin.


Ahora vamos a aplicar lo que aprendimos en nuestra pagina web, la que venimos creando
en el curso, lo que haremos es aplicar un padding a la imagen para que quede centrada igual
que el texto, vamos a aplicar un estilo a la etiqueta img desde el archivo estilos.css de esta
forma:
img{ padding-left:320px }

esto modificar solo a la etiqueta img:

y la pagina se ver as:

Eso es todo por esta leccin, lo que sigue es aprender a aplicar estilos CSS a listas.

Que son las listas HTML? Aqu aprenderemos que son


las famosas listas HTML, para que sirven y como se
crean.
Que son las "Listas"?
Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o
desordenadas, para entenderlo mejor miremos este ejemplo:
Lista ordenada:
1. Primer item
2. Segundo
3. etc.

Lista desordenada:

primer item de mi lista

segundo

tercero

etc...

Crear una lista con HTML


El cdigo para crear una lista con HTML desordenada es <ul> y </ul>, esta es la primera
que escribiremos siempre que queramos crear una lista desordenada, y la segunda es <li> y
</li>.

Crear lista desordenada:


<ul>

<li>Este es el primer item de mi lista</li>


<li>Segundo item</li>
<li>Tercero</li>

</ul>

Como podemos ver, con la etiqueta <ul> indicamos que queremos abrir una lista y con
<li> creamos los items, un item por cada <li>.

Crear lista ordenada:


<ol>

</ol>

<li>Este es el primer item de mi lista</li>


<li>Segundo item</li>
<li>Tercero</li>

Ahora apliquemos esto que aprendimos a la pagina que venimos haciendo a lo largo de este
curso, el cdigo quedara as:

Quedara as:

Aplicar estilos CSS a listas


Bien, ya sabemos que son las listas y como crearlas, que rapido no?, ahora veremos como
aplicar estilos a esas listas, por ejemplo, para sacarle los puntos negros horribles que tienen
al costado.
Para sacarle el punto negro al costado sera asi:
ul{list-style:none;}

utilizamos la propiedad "list-style" que define el estilo de la lista, al poner ese atributo en
"none" le estamos diciendo que a la etiqueta <ul> (contenedor de la lista en HTML,
recuerdas?) no le de ningun estilo, con esto sacamos el punto negro o los numeros en las
listas ordenadas.
Si lo que queremos es darle color a los textos de los items, solo hacemos esto:
li{color: gray;}

Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray",


es decir, gris en ingls, recuerda que tambien podemos hacer por el hexadecimal, osea
"color: #cccccc;".
Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque entero
de la lista y <li> son los items.

Introduccin a los conceptos bsicos de la maquetacin


con CSS y capas, que son las capas? para que sirve?,
aqu responderemos a todas las preguntas.
Pero, que es eso de la maquetacin?
En pocas palabras, maquetar una pagina web es pasar el diseo a cdigo HTML,
poniendo cada cosa en su lugar (una cabecera, un menu, etc.).
Hasta hace unos aos la nica manera de maquetar una pagina web era mediante tablas
HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica de
maquetacin fue evolucionando con los aos hasta llegar al punto donde no se usan tablas,
si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.

Capas, layouts, divs? que es eso?


Las capas, layouts o divs son la misma cosa con distinto nombre jeje, para tener un
concepto mental mas fuerte de lo que son, podemos imaginarlos como contenedores o
bloques donde podemos meter lo que queramos dentro (imgenes, texto, animaciones,
otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posicin, de
esta manera se van a ir posicionando consiguiendo la estructura que queremos.
veamos un ejemplo grfico:

Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:

Capa 1: es la capa principal y contenedora


Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)

Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima
(float:left; margin: 10px; ya veremos esto mas en detalle).

No te compliques mucho tratando de entender el concepto de golpe, ya lo vamos a ir viendo


mas detenidamente durante estas lecciones.
Que te parece si empezamos?

En esta leccin aprenderemos a crear nuestro primer


DIV para maquetarlo con CSS, darle formato y aplicarle
estilos.
Es hora de aprender a crear una capa, no te asustes porque no es nada del otro mundo, si
seguiste todas las lecciones te ser muy fcil.

Como crear un DIV


La forma de crear una capa DIV es as:
<div></div>

recuerda que todo contenido visible de la pgina debe ir entre las etiquetas <body></body>
(esto ya esta explicado al comienzo del curso paso a paso).
con el cdigo HTML completo quedara as:
<html>
<head>
<title>Curso de maquetacion CSS</title>
</head>
<body>
<div>Esta es mi primer capa!</div>
</body>
</html>

Como darle formato a un DIV o capa con estilos CSS


Dando formato a un DIV
Esto se hace con estilos CSS, si hiciste el curso para aprender a crear una pagina web ya
sabes crear una hoja de estilos y relacionarla con un archivo html.
Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto existe el
atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de
estilos, la forma de escribirlo es as:
<div id="capa1">Esta es mi primer capa!</div>

Como podemos ver, a esta capa le pusimo "capa1" de nombre, ahora solo nos falta abrir la
hoja de estilos que creamos y llamarlo de esta manera:
#capa1{
background-color:green;
}

esto har que el color de fondo de esa capa sea verde, en la siguiente imagen se puede
apreciar:

Tambin podes ver este ejemplo haciendo clic ac.


Como vemos, el color se estira, esto es porque no le definimos un ancho determinado, para
hacer agregaremos el atributo width a #capa1 de la siguiente forma:

#capa1{
width:210px;
background-color:green;
}

Ahora seguramente ya vers el fondo verde en un area mucho mas corta como en este
ejemplo, pero que pasa si queremos que la capa sea mas alta?
Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta
forma:
#capa1{
width:210px;
height:300px;
background-color:green;
}

Con esto ya tendremos una especie de rectangulo verde donde podremos agregar texto
como queremos, ac esta el ejemplo.
En la siguiente leccin veremos una nueva propiedad CSS para posicionar las capas, no te
la pierdas!

Para que sirve la propiedad FLOAT en CSS? Aqu


veremos para que sirve y cuales son sus atributos y usos
prcticos.
La maquetacin por divs CSS se basa en "flotar" unas capas dentro de otras para
conseguir la estructura que queremos, para esto se utiliza la propiedad float.
Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes
valores:

none: no flota la capa.


left: flota la capa hacia la izquierda.

right: flota la capa hacia la derecha.

Siguiendo con el ejemplo de la leccin anterior, vamos a crear otra capa #capa2, le vamos a
aplicar otro color de fondo con el mismo alto y ancho pero vamos a flotar ambas capas
hacia la izquierda, quedara as:
#capa1{
width:210px;
height:300px;
background-color:green;
float:left;
}
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
}

y el cdigo HTML sera este:


<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa1">Esta es mi primer capa!</div>
<div id="capa2">Esta es mi segunda capa!</div>
</body>
</html>

Nota: asegurate de escribir bien los ID, tanto en la hoja de estilos como en el cdigo
HTML, que coincidan en ambos, de lo contrario no funcionar.

esto se debera ver mas o menos as:

para ver el ejemplo en tu navegador hace clic ac.


Ahora, que pasa si aplicamos un margen izquierdo a la capa2?
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
margin-left:10px;
}

se vera as:

para ver el ejemplo hace clic ac.

Para que sirve la propiedad CLEAR en CSS? Aqu


veremos para que sirve y cuales son sus atributos y usos
prcticos.
Seguramente cuando estes maquetando tu sitio web necesitars tener una capa o bloque que
no tenga capas a su/s lados, para eso esta la propiedad CSS Clear.
Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se
posicione a cualquiera de los lados, los valores que admite son estos:

left: no deja que una capa flote a la izquierda


right: evita que una capa flote a la derecha

both: evita que haya capas flotantes en cualquiera de sus lados

Nosotros lo usaremos para crear, por ejemplo, el pie de pagina.


Siguiendo con el ejemplo que hicimos en la leccin anterior vamos a crear una tercer capa
#capa3 y le aplicaremos esta propiedad, aadiremos un ancho de 430 pixeles y un alto de
30 pixeles, tambin le aplicaremos un color de fondo naranja.
#capa3{
width:430px;

height:30px;
background-color:orange;
float:left;
clear:both;

el cdigo HTML quedara as:


<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa1">Esta es mi primer capa!</div>
<div id="capa2">Esta es mi segunda capa!</div>
<div id="capa3">Esta es mi tercer capa!</div>
</body>
</html>

Esto dar como resultado algo parecido a esto:

Ver ejemplo.
Ahora vamos a agregar un margen superios para separa un poco el pie de pagina (#capa3)
de las demas capas o divs.
#capa3{

width:430px;
height:30px;
background-color:orange;
float:left;
clear:both;
margin-top:10px;

Esto quedara as:

Podes ver este ejemplo haciendo clic ac.


Ya estamos listos para maquetar un sitio, en la siguiente leccin maquetaremos un sitio de
pruebas integramente con divs, ansios@? jeje

En esta leccin aprenderemos a maquetar una pagina


web integramente en CSS y HTML, cada parte de ella
explicada paso a paso, con ejemplos prcticos para
entenderlo mejor.
A lo largo de este curso de maquetacin CSS vimos los conceptos bsicos para crear y
poder flotar capas entre otras cosas, ahora vamos a tratar de poner en prctica lo que
aprendimos para maquetar una pagina con la siguiente estructura:

Cabecera: ac puede ir un logo o el nombre de tu pagina web


Barra lateral: podemos poner un menu vertical con listas HTML

Contenido: donde ir el contenido de la web

Pie de pagina: podemos poner lo que necesitemos, desde el copyright hasta los
enlaces recomendados

La estructura deber quedar as:

Listos? comenzaremos maquetando el contenedor general.


Nota: antes de continuar, asegurate de relacionar la hoja de estilos con tu archivo HTML
para que todo lo que hagas a lo largo del curso te funcione.

En esta leccin de maquetacin aprenderemos a


maquetar el contenedor general de nuestra pagina web
Contenedor general
La primer capa que tendremos que crear es un contenedor general al que le aplicaremos un
ancho y alto fijo para todo el sitio Web.
Para este ejemplo lo haremos con estas medidas:

Ancho: 900 pixeles


Alto: 400 pixeles

Sabiendo esto podemos ponernos manos a la obra :)


A este DIV lo llamaremos "contenedor", y sera algo asi:
#contenedor {
width: 900px;
height: 400px;
}

Ahora abrimos el archivo HTML (index.html) y comenzamos a armar las capas, por ahora
solo tenemos que llamar a la capa "contenedor", as:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>

Ya tenemos el contendor general, ahora maquetaremos la cabecera.

Seguimos con las lecciones para maquetar nuestra


primer pagina web, en esta ocacin veremos como
maquetar la cabecera
Cabecera
Teniendo el contenedor general y siguiendo el diagrama de maquetacin que vimos antes,
es hora de crear la cabecera de nuestro sitio, a esta le asignaremos el alto que queremos que
tenga, siempre dentro de los limites que definimos en el contenedor general, obviamente
usaremos mucho menos, solo 50 pixeles, y tambin un color de fondo (verde) para ir
notando cada capa, quedando as:
#cabecera {
background-color: green;
height:50px;
padding:5px;
}

y llamamos a esta capa desde el cdigo HTML, pero ojo, tiene que ir dentro de la capa
contenedora, as:
<html>

<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
</div>
</body>
</html>

Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con la barra


lateral.

Siguiendo con el curso de maquetacin, veremos como


maquetar la barra lateral con CSS y DIVs
Barra lateral
Lleg la hora de crear la capa de la barra lateral, donde pondremos un menu o lo que
necesitemos. En esta capa, adems de agregar otro color de fondo, comenzaremos a utilizar
la propiedad float para flotar la barra a la izquierda, adems de establecer un ancho y alto
que utilizar la capa.
#barra-lateral {
background-color: orange;
float: left;
width:140px;
height:100%;
}

Si no queremos que ocupe todo el alto de la pagina solo ponemos una cantidad de pixeles
determinada, sin porcentajes.
El HTML quedar as:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
<div id="barra-lateral">Esta es la barra lateral</div>
</div>

</body>
</html>

Ya nos falta muy poco para terminar la estructura, vamos vamos vamos... jeje

Leccin del curso de maquetacin CSS, donde


maquetamos el contenido general de nuestro sitio
web
Contenido
Al igual que la capa de la barra lateral, definiremos los mismos atributos solo que
cambiaremos algunos valores como el ancho (el contenido ocupa mas lugar) y el color de
fondo (para distingir donde empieza y termina la capa).
#contenido {
background-color: gray;
float:left;
width:740px;
height:100%;
}

y en el HTML agregamos la capa debajo de la barra lateral:


<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
<div id="barra-lateral">Esta es la barra lateral</div>
<div id="contenido">Este es el contenido
principal</div>
</div>
</body>
</html>

Ya solo nos queda maquetar el pie de pagina y es hora de que le des tus toques finales.

ltima leccin del curso de maquetacin con CSS y capas,


donde aprenderemos a maquetar el pie de pagina y
veremos el ejemplo terminado.
Pie de pagina

En el pie de pagina utilizaremos la propiedad clear que vimos en la leccin anterior,


tambin definiremos un color de fondo:
#pie {
background-color: blue;
clear: both;
}

Finalmente el HTML quedara as:


<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
<div id="barra-lateral">Esta es la barra lateral</div>
<div id="contenido">Este es el contenido
principal</div>
<div id="pie">Este es el pie de pagina</div>
</div>
</body>
</html>

Si queremos agregar un espacio entre las palabras y los bordes solo agregamos
"padding:5px;" en todas las capas CSS.
Ya terminamos! para ver el ejemplo terminado haz clic ac.

En esta leccin aprenderemos a subir nuestra pagina


web, descargaremos el programa FTP y veremos como se
usa. Para esta leccin necesitaras un hosting, si an no lo
tienes o no sabes que es te invito a leer el curso de hosting
y servidores.
Muy bien! si todo sali bien ya tienes tu pgina Web terminada, el ltimo paso es subirla,
pero antes debes elegir un hosting (que es un hosting?) para alojar tu pgina y registrar un
dominio (que es un dominio?) para poder acceder a ella, no te preocupes, es mas fcil de
lo que parece.

Que necesito?

Necesitamos un hosting donde subir los archivos y un programa FTP, nosotros utilizaremos
FileZilla.

Ya tengo todo, y ahora que?


Lo primero que haremos ser abrir FileZilla, deberamos ver una ventana como esta:

Ahora veremos que significan esos numeros:

1. Servidor: aqu debemos poner la direccin FTP que nos da nuestro hosting,
generalmente (en el 90% de los casos) la direccin que debes poner ah es
ftp.tudominio.com.
2. Nombre de usuario: el nombre de usuario para la cuenta FTP a la que te quieres
conectar, generalmente es el mismo que utilizas para entrar a tu panel del hosting.

3. Contrasea: igual que el anterior, la contrasea para el nombre de usuario de la


cuenta FTP, generalmente es la misma que la que utilizas para entrar al panel de tu
hosting.
4. Directorio local: en este panel vers todas las carpetas y archivos que hay en tu
computadora, para subir tu pagina web debers ir hasta la carpeta donde tienes tu
pagina web terminada.
5. Directorio remoto: en este panel vers todas las carpetas y archivos que hay en tu
servidor (la computadora donde vas a subir la pagina web), una vez que subas todos
los archivos deberas ver lo mismo en ambos paneles (4 y 5).
6. Barra de estado: aqu vers el progreso de los archivos cuando los subas.

Muy bien, ya conocemos cada parte del programa, ahora vamos a subir nuestra pagina
web :)

Paso 1: nos conectaremos a nuestro servidor, para eso completaremos los campos 1,
2 y 3, una vez que se haya conectado veremos varias carpetas en el panel 5 de la
imgen.

Paso 2: en el panel de directorio local (N 4) buscaremos la carpeta donde estan los


archivos de nuestra pagina web.

Paso 3: en el panel de directorio remoto (N 5) nos dirigiremos a la carpeta


public_html o www (depende de cada hosting, si contrataste hostgator vers la
carpeta public_html).

Paso 4: una vez que tengamos localizada la carpeta de nuestro sitio en el panel 4 y
la carpeta public_html en el panel 5 podemos comenzar a subir la pagina web, para
esto seleccionaremos los archivos que queremos subir (en el panel 4 de la
imgen), haremos un clic derecho y luego clic en subir.

Si todo fue bien veremos en el panel 6, en la pestaa "Transferencias satisfactorias" que hay
un numero con la cantidad de archivos que subimos.

Eso es todo, ahora puedes instalar un contador de visitar o quizs instalar un foro.