conceptos básicos de html

Crear web desde ceroComo crear una pagina web paso a paso

En este sitio aprenderas a crear una pagina web paso a paso, no hace falta que tengas conocimientos de programacion ni codigos raros, todo lo aprenderas aca

Descargar e instalar NVU

Descargar NVU para seguir el curso completo paso a paso y crear una pagina web

Como crear una pagina web paso a paso, con imagenes que te ayudaran a entender todo

Insertando parrafos y saltos de linea en nuestra pagina

Como crear parrafos y saltos de linea con HTML, explicado paso a paso

Crear enlaces con HTML

Como crear un enlace o hipervinculo en HTML, explicado paso a paso y con imagenes ilustrativas

Insertar imagen con HTML

Como insertar una imagen con HTML, paso a paso y con ejemplo simples y claros.

Hoja de estilos CSS

Como crear una hoja de estilos CSS y relacionarla con nuestra pagina web

Conceptos básicos de estilos CSS

En esta lección aprenderemos los conceptos básicos de los estilos CSS, totalmente desde cero.

Poner fondo con estilos CSS

Como poner o aplicar un color de fondo o imagen con estilos CSS paso a paso y con imagenes para que puedas entender mejor

Centrar contenido con CSS

Como centrar texto con estilos CSS paso a paso y con imagenes que te ayudaran a no perderte.

Margen y padding con estilos CSS

Que es margin y padding en los estilos CSS y como aplicarlo a nuestra pagina web

Crear listas con HTML

Como crear listas con codigo html y agregarles estilos CSS

Maquetar pagina web con DIVs (capas o layouts)

Leccion con los conceptos basicos de la maquetacion por DIVs, capas o layouts.

Creando nuestro primer DIV

Leccion paso a paso para aprender a crear capas o divs CSS, explicado paso a paso.

Dar formato a un DIV

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

Flotar y acomodar un DIV

Leccion paso a paso para aprender a usar la propiedad css float.

Evitar que un DIV o capa se superponga con otra

Leccion para aprender a usar la propiedad CSS Clear desde cero.

Maquetando una pagina Web con DIVs o Capas (layouts)

Leccion paso a paso para aprender a maquetar una pagina web con CSS divs y capas

Maquetar el contenedor general con CSS

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

Maquetar cabecera con CSS

Cabecera Teniendo el contenedor general y siguiendo el diagrama de maquetación que vimos antes, es hora de crear la cabecera de nuestro...

Maquetar la barra lateral con CSS

Barra lateral Llegó la hora de crear la capa de la barra lateral, donde pondremos un menu o lo que necesitemos. En esta capa,...

Maquetar contenido con CSS

Contenido Al igual que la capa de la barra lateral, definiremos los mismos atributos solo que cambiaremos algunos valores como el ancho (el...

Maquetar pie de pagina CSS

Pie de pagina En el pie de pagina utilizaremos la propiedad clear que vimos en la lección anterior, también definiremos un color...

Como subir una pagina Web

En este tutorial aprenderas a subir una pagina web mediante ftp, ademas aprenderas a utilizar los programas apropiados, todo explicado paso a paso de una manera bien simple

Conceptos básicos de HTML

Introducción 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 básico, ¿Que es una pagina web? bien, una página Web es un conjunto de lineas de código ordenadas para que formen una estructura, los navegadores web entienden ese código y lo muestran como un sitio web.

Código HTML: sistema de etiquetas

El código 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 código HTML.

Código HTML: Estructura

El código 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 página y la segunda </html> indica que nuestro código HTML ha terminado, todo nuestro código irá dentro de esas etiquetas.

Código HTML: Estructura de una pagina web

Recién 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 página Web que se ven (imágenes, texto, enlaces) y otras que no (Titulo, descripción y demás atributos que veremos mas adelante), las partes de nuestro pagina que no se ven van entre las etiquetas <head> y </head>.

Código 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 página Web</title>

</head>

<body>

</body>

</html>

Código 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 página Web</title>

</head>

<body>

Este es el contenido de la página Web.

</body>

</html>

Ver video de esta lección

Creando la pagina inicial

En esta lección 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 código 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 continuación haremos clic en "nuevo", se nos abrira una mini ventana como esta:

Nos aseguramos de tener la configuración 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 dirección principal de nuestra página no veremos nada

Ahora nos aparecerá una ventana que nos pregunta donde queremos guardar ese archivo, es fácil, 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.


Insertando parrafos y saltos de linea en nuestra pagina

En esta lección aprenderemos las etiquetas basicas de HTML, para insertar parrafos y saltos de linea.

Código HTML: insertar parrafos

La etiqueta que se utiliza para insertar parrafos en HTML es:

<p>

y finalizar el párrafo:

</p>

Ahora vamos a abrir el archivo index.html de nuestra pagina web para probar esta etiqueta:

En la lección de conceptos básicos de HTML vimos que cuaquier tipo de contenido visible debe ir dentro de las etiquetas "<body>" y "</body>", entonces para agregar un párrafo lo haremos así:

<html><head><title>Mi primer pagina Web</title></head><body><p>Este es mi primer párrafo</p></body></html>

Código HTML: insertar saltos de linea

Para insertar saltos de linea en HTML utilizaremos la etiqueta:

<br />

¿o no que es fácil? jeje, al ejemplo anterior le insertaremos un salto de linea y un párrafo mas, de esta forma:

<html><head><title>Mi primer pagina Web</title></head><body><p>Este es mi primer párrafo</p><br /><p>Creado gracias a CCUSW</p></body></html>

Tan simple como eso, y ahora si lo vemos en vista preliminar quedaría así:

Bien, ya sabes crear párrafos y saltos de linea, ¡Pronto tendrás tu primer pagina web terminada! y harás webs mejores que esta, eso te lo aseguro jeje ;)


Crear enlaces con HTML

En esta lección aprenderemos a crear enlaces con código HTML para tu pagina web.

Para crear un enlace necesitamos la ubicación, o mejor dicho, la dirección 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 dirección 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 daría como resultado:

Crear Web

Nota: cada vez que nos toque crear un enlace hacia otra pagina web (es decir, que no sea una sección de nuestra pagina) utilizaremos la dirección 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 párrafo</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 pestaña 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 dirección de email, de esta forma:

<a href="mailto:[email protected]">Texto del enlace</a>

y el resultado es: Texto del enlace


Insertar imagen con HTML

En esta lección aprenderemos a insertar o colocar imágenes con código HTML, y también veremos como hacer que esa imagen tenga un enlace.

Llego el momento de insertar nuestra primera imágen 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 ubicación, en este caso, de la imágen.

Para insertar una imágen lo haremos así:

<img src="ubicación" alt="descripción" />

"alt" sirve para agregar una descripción a la imágen, que aparecerá cuando pasemos el mouse por encima de ella.

Si cambiamos a la pestaña "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 dirección? eso es lo que voy a explicar ahora :)

Crear enlace en imágen

Para crear un enlace en la imágen 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 tecnología que te ahorrara mucho trabajo, ya verás :)


Hoja de estilos CSS

Introducción a los aspectos técnicos 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, tamaño de fuentes y demás 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 fácil.

Crear la hoja de estilos CSS

La hoja de estilos CSS no contiene código 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 ubicación 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 más.

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 código 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 ubicación, tipo de archivo y la relación 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 relación 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 página de color negro.


Curso de html Curso de estilos css Posicionamiento web Rentabilizar una pagina web Maquetación con divs

En esta lección aprenderemos los

conceptos básicos de los estilos CSS, totalmente desde cero.Conceptos básicosCSS sirve para aplicar estilos a las etiquetas HTML.Estructura básica del código CSSPara aplicar estilos CSS a una etiqueta HTML tenemos que hacerlo así:etiqueta{atributo:valor;}por ejemplo:body{font-size:12px;}Esa instrucción CSS hará que el tamaño 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 código HTML de nuestra pagina web, de esta forma:<div id="mibloque">Este es mi primer bloque creado gracias a CCUSW</div>Ese código hara que todo el texto dentro de ESE bloque tenga un tamaño 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 código HTML la llamaremos así:<span class="miclase">Esta es mi primer clase creada gracias a CCUSW</span>o también 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 búsqueda 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.

Poner fondo con estilos CSS

En esta lección 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:

Código hexadecimal: así #000000 este sería el color negro. Nombre: podemos elegir el nombre, aunque no funciona con todos los colores y

siempre tendremos que especificarlo en inglés, 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 lección 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 tendría 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 patrón), 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 intención es que no se repita, el código sería así:

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

Si queremos que repita horizontalmente, sería 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 lección.

Cursos relacionados

Curso de html Curso de estilos css Posicionamiento web Rentabilizar una pagina web Maquetación con divs

Sitios amigos Diseño paginas web MadridSegurojoven

Centrar contenido con CSS

En esta lección aprenderemos a centrar contenido con CSS, primero crearemos una clase y luego la llamaremos desde el código HTML de nuestra pagina web.

Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo menos, desde la lección 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 código HTML así:

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

este código se verá así:

Nuestro archivo estilos.css va quedando así:

En rojo vemos la clase que creamos.

Margen y padding con estilos CSS

¿Que es el margen? ¿Y el padding? ¿Para que sirven? En esta lección responderemos todas estas preguntas y veremos ejemplos prácticos.

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 orientación, los valores se aplican siguiendo el sentido de las agujas del reloj, es decir:

.clase{margin: arriba derecha abajo izquierda;}

o también 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 píxeles 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 idéntico 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 lección, lo que sigue es aprender a aplicar estilos CSS a listas.

Crear listas con HTML

¿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 item2. Segundo3. etc.

Lista desordenada:

primer item de mi lista segundo tercero etc...

Crear una lista con HTML

El código 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> <li>Este es el primer item de mi lista</li> <li>Segundo item</li> <li>Tercero</li></ol>

Ahora apliquemos esto que aprendimos a la pagina que venimos haciendo a lo largo de este curso, el código quedaría así:

Quedaría 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 sería 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 inglés, 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.

Maquetar pagina web con DIVs (capas o layouts)

Introducción a los conceptos básicos de la maquetación con CSS y capas, ¿que son las capas? ¿para que sirve?, aquí responderemos a todas las preguntas.

Pero, ¿que es eso de la maquetación?

En pocas palabras, maquetar una pagina web es pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menu, etc.).

Hasta hace unos años la única manera de maquetar una pagina web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la técnica

de maquetación fue evolucionando con los años 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 (imágenes, texto, animaciones, otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir posicionando consiguiendo la estructura que queremos.

veamos un ejemplo gráfico:

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?

Creando nuestro primer DIV

En esta lección 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 fácil.

Como crear un DIV

La forma de crear una capa DIV es así:

<div></div>

recuerda que todo contenido visible de la página debe ir entre las etiquetas <body></body> (esto ya esta explicado al comienzo del curso paso a paso).

con el código HTML completo quedaría así:

<html> <head> <title>Curso de maquetacion CSS</title> </head><body> <div>¡Esta es mi primer capa!</div></body></html>

Dar formato a un DIV

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:

También 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 verás 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 lección veremos una nueva propiedad CSS para posicionar las capas, no te la pierdas!

Flotar y acomodar un DIV

¿Para que sirve la propiedad FLOAT en CSS? Aquí veremos para que sirve y cuales son sus atributos y usos prácticos.

La maquetación 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 lección 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, quedaría así:

#capa1{ width:210px; height:300px; background-color:green; float:left;}

#capa2{ width:210px; height:300px; background-color:gray; float:left;}

y el código HTML sería 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 código HTML, que coincidan en ambos, de lo contrario no funcionará.

esto se debería 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 vería así:

para ver el ejemplo hace clic acá.

Evitar que un DIV o capa se superponga con otra

¿Para que sirve la propiedad CLEAR en CSS? Aquí veremos para que sirve y cuales son sus atributos y usos prácticos.

Seguramente cuando estes maquetando tu sitio web necesitarás 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 lección anterior vamos a crear una tercer capa #capa3 y le aplicaremos esta propiedad, añadiremos un ancho de 430 pixeles y un alto de 30 pixeles, también le aplicaremos un color de fondo naranja.

#capa3{ width:430px; height:30px; background-color:orange; float:left; clear:both;}

el código HTML quedaría 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 quedaría así:

Podes ver este ejemplo haciendo clic acá.

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

Maquetando una pagina Web con DIVs o Capas (layouts)

En esta lección aprenderemos a maquetar una pagina web integramente en CSS y HTML, cada parte de ella explicada paso a paso, con ejemplos prácticos para entenderlo mejor.

A lo largo de este curso de maquetación CSS vimos los conceptos básicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar de poner en práctica 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.

Maquetar el contenedor general con CSS

En esta lección de maquetación 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 sería 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.

Maquetar cabecera con CSS

Seguimos con las lecciones para maquetar nuestra primer pagina web, en esta ocación veremos como maquetar la cabecera

Cabecera

Teniendo el contenedor general y siguiendo el diagrama de maquetación 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 también 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 código 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.

Maquetar la barra lateral con CSS

Siguiendo con el curso de maquetación, 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, además de agregar otro color de fondo, comenzaremos a utilizar la propiedad float para flotar la barra a la izquierda, además 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

Maquetar contenido con CSS

Lección del curso de maquetación 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.

Maquetar pie de pagina CSS

Ultima lección del curso de maquetación 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 lección anterior, también definiremos un color de fondo:

#pie { background-color: blue; clear: both; }

Finalmente el HTML quedaría 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á.

Como subir una pagina Web

En esta lección aprenderemos a subir nuestra pagina web, descargaremos el programa FTP y veremos como se usa. Para esta lección necesitaras un hosting, si aún 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 página Web terminada, el último paso es subirla, pero antes debes elegir un hosting (¿que es un hosting?) para alojar tu página y registrar un dominio (¿que es un dominio?) para poder acceder a ella, no te preocupes, es mas fácil 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, deberíamos ver una ventana como esta:

Ahora veremos que significan esos numeros:

1. Servidor: aquí debemos poner la dirección FTP que nos da nuestro hosting, generalmente (en el 90% de los casos) la dirección 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. Contraseña: igual que el anterior, la contraseña 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 verás todas las carpetas y archivos que hay en tu computadora, para subir tu pagina web deberás ir hasta la carpeta donde tienes tu pagina web terminada.

5. Directorio remoto: en este panel verás 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í verás 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 imágen.

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 verás 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 imágen), haremos un clic derecho y luego clic en subir.

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

Eso es todo, ahora puedes instalar un contador de visitar o quizás instalar un foro.

conceptos básicos de html

Documents