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:
Mi primer pagina Web
Este es mi primer prrafo
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):
Mi primer pagina Web
Este es mi primer prrafo
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:
Curso de maquetacion CSS
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:
Curso de maquetacion CSS
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:
Maquetando con estilos CSS
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:
Maquetando con estilos CSS
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:
Maquetando con estilos CSS
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:
Maquetando con estilos CSS
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.