crear pagine web

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:

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

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 de esta forma:

La primera etiqueta indica que comenzamos nuestra pgina y la segunda 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:

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

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 , 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 y de esta forma:

Titulo de nuestra pgina Web

Cdigo HTML: agregando texto en nuestra pagina Web

Todo el contenido lo pondremos dentro de las etiquetas y , de esta forma:

Titulo de nuestra pgina Web

Este es el contenido de la pgina Web.

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:

y finalizar el prrafo:

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 "" y "", entonces para agregar un prrafo lo haremos as:

Mi primer pagina Web

Este es mi primer prrafo

Cdigo HTML: insertar saltos de linea

Para insertar saltos de linea en HTML utilizaremos la etiqueta:

o no que es fcil? jeje, al ejemplo anterior le insertaremos un salto de linea y un prrafo mas, de esta forma:

Creado gracias a CCUSW

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 y , 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:

Crear WebEl texto del enlace va encerrado entre y , esto dara como resultado:

Crear WebNota: 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):

Creado gracias a CCUSW

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:

Texto del enlace

y el resultado es:

Texto del enlaceEn 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 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:

"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 dentro de y , de esta forma:

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 , 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 va dentro de la etiqueta , de esta forma:

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:

Este es mi primer bloque creado gracias a CCUSWEse 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:

Esta es mi primer clase creada gracias a CCUSWo tambin as:

Mi primer clase otra vezEntonces 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 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:

Este es el texto que ir centrado

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

, esta es la primera que escribiremos siempre que queramos crear una lista desordenada, y la segunda es y .

Crear lista desordenada:

Este es el primer item de mi lista

Segundo item

Tercero

Como podemos ver, con la etiqueta

indicamos que queremos abrir una lista y con

creamos los items, un item por cada

.

Crear lista ordenada:

Este es el primer item de mi lista

Segundo item

Tercero

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

(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

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

es el bloque entero de la lista y

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

recuerda que todo contenido visible de la pgina debe ir entre las etiquetas (esto ya esta explicado al comienzo del curso paso a paso).

con el cdigo HTML completo quedara as:

Curso de maquetacion CSS

Esta es mi primer capa!

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

Esta es mi primer capa!

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


Esta es mi primer capa! Esta es mi segunda capa!

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:


Esta es mi primer capa! Esta es mi segunda capa! Esta es mi tercer capa!

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

Maquetando con estilos CSS

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:


Esta es la cabecera

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:


Esta es la cabecera Esta es la barra lateral

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:


Esta es la cabecera Esta es la barra lateral Este es el contenido principal

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:


Esta es la cabecera Esta es la barra lateral Este es el contenido principal Este es el pie de pagina

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.

crear pagine web

Documents