Curso Bsico De Estilos Los estilos CSS nos ahorran muchsimo trabajo y permiten: Separar el diseo del contenido Hacer que nuestras Aligerar la carga de nuestras Hacer ms livianas nuest Aplicar estilos fcilmente Al principio puede parecer difcil, pero cua fcil. En las prximas lecciones fcilmente al momento de la maquetacin, habilidad que he detectado como dbil en esta asignatura) Hoja de Estilos CSS Introduccin a los aspectos tcnicos de los estilos CSS, como crear una hoja de estilos y relacionarla con nuestra 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 web tiene mucho contenido. Para eso usaremos los estilos CSS fuentes, mrgenes, espacios, etc. a la web mucho Crear la hoja de estilos CSS La hoja de estilos CSS no contiene cdigo HTML, por lo tanto escribir etiquetas HTML en el 1. Abrir el bloc de notas 2. Clic en Archivo tendremos que decirle en que ubicacin queremos guardar la hoja de estilos(recordemos lo ideal es que este al mismo nivel de carpetas qu en archivo o en su defecto en niveles inferiores )
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Curso Bsico De Estilos CSS Los estilos CSS nos ahorran muchsimo trabajo y permiten: Separar el diseo del contenido Hacer que nuestras pginas web funcionen igual en todos los navegadores Aligerar la carga de nuestras pginas web livianas nuestras pginas web Aplicar estilos fcilmente Al principio puede parecer difcil, pero cuando te acostumbre s prximas lecciones aprendern las nociones bsicas para aplicar estilos CSS fcilmente al momento de crear una pgina web (En especial lo relacionado con la maquetacin, habilidad que he detectado como dbil en esta asignatura) stilos CSS (Repaso) Introduccin a los aspectos tcnicos de los estilos CSS, como crear una hoja de estilos y relacionarla con nuestra pgina 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 web tiene mucho contenido. estilos CSS, con ellos podemos aplicar cambios , espacios, etc. a la web mucho ms fcil. Crear la hoja de estilos CSS La hoja de estilos CSS no contiene cdigo HTML, por lo tanto escribir etiquetas HTML en el, para crear la hoja de estilos vamos a: loc de notas (NOTA: sirve cualquier editor de texto Archivo -> Guardar Como... se nos abrir una ventana donde tendremos que decirle en que ubicacin queremos guardar la hoja de (recordemos lo ideal es que este al mismo nivel de carpetas qu en archivo o en su defecto en niveles inferiores ) http://www.comocrearunsitioweb.com/ por web funcionen igual en todos los navegadores acostumbres todo ser ms las nociones bsicas para aplicar estilos CSS En especial lo relacionado con la maquetacin, habilidad que he detectado como dbil en esta asignatura). Introduccin a los aspectos tcnicos de los estilos CSS, como crear una hoja 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 pgina , con ellos podemos aplicar cambios de colores, La hoja de estilos CSS no contiene cdigo HTML, por lo tanto no deberemos , para crear la hoja de estilos vamos a: (NOTA: sirve cualquier editor de texto) se nos abrir una ventana donde tendremos que decirle en que ubicacin queremos guardar la hoja de (recordemos lo ideal es que este al mismo nivel de carpetas que Este documento fue Extractado James Ir Salazar Torres 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 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 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 dentro de la etiqueta <head> <link href="estilos.css" rel="stylesheet" type="text/css" /> Ah vemos que se especifican varios atributos, cada uno sirve para: href: busca la hoja de estilos rel: le dice la relacin type: le dice que tipo de archivo es, o mejor dicho, que conten 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 tod nuestra pgina de color negro.
Conceptos Bsicos De Estilos Ahora aprenderemos los conceptos bsicos de los estilos CSS, totalmente desde cero.
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Guardamos el archivo con el nombre que le queramos dar ", recuerda, debe terminar en ".css" sin ms. Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr, alguna forma, que los estilos que escribamos en ese archivo sean tomados en cuenta por el archivo HTML. recuerda que NO hay que escribir cdigo HTML en la hoja de estilos. Relacionar la hoja de estilos CSS con nuestra pagina web oja de estilos CSS utilizaremos la etiqueta 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 <head>, de esta forma: <link href="estilos.css" rel="stylesheet" type="text/css" /> Ah vemos que se especifican varios atributos, cada uno sirve para: : busca la hoja de estilos : le dice la relacin : le dice que tipo de archivo es, o mejor dicho, que conten llevar dentro. Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y 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. Conceptos Bsicos De Estilos CSS aprenderemos los conceptos bsicos de los estilos CSS, totalmente http://www.comocrearunsitioweb.com/ por que le queramos dar: Ejm: ", recuerda, debe terminar en ".css" sin ms. tenemos que lograr, alguna forma, que los estilos que escribamos en ese archivo sean tomados en recuerda que NO hay que escribir cdigo HTML en la hoja de estilos. oja de estilos CSS utilizaremos la etiqueta <link>, en ella deberemos especificar la ubicacin, tipo de archivo y la relacin entre la hoja de estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta <link> va Ah vemos que se especifican varios atributos, cada uno sirve para: : le dice que tipo de archivo es, o mejor dicho, que contenido Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y Guardamos y abrimos el archivo index.html con nuestro navegador (Internet o fue bien tendriamos que ver el fondo de CSS aprenderemos los conceptos bsicos de los estilos CSS, totalmente Este documento fue Extractado James Ir Salazar Torres
Conceptos bsicos CSS sirve para aplicar estilos a las etiqueta
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 di le anteponemos un numeral (#), por ejemplo: #mibloque{ font-size:12px; } y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del cdigo HTML de nuestra pagina web, de esta forma: <div id="mibloque">Este es mi primer bloque creado Ese cdigo har que todo el texto dentro de fuente de 12px, lo que este fuera de ese bloque no Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o almohadilla (#) pondremos un punto (.), as: .miclase{font-family: arial} y desde el cdigo HTML la llamaremos as: <span class="miclase">Esta es mi primer clase creada o tambin as:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) 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: ;} Esa instruccin CSS har que el tamao de fuente del texto en todo el contenido tro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles). asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te
Si lo que queremos modificar es un bloque, entonces al nombre del bloque o di le anteponemos un numeral (#), por ejemplo: size:12px; } y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del cdigo HTML de nuestra pagina web, de esta forma: <div id="mibloque">Este es mi primer bloque creado CINOC 2011 que todo el texto dentro de ese bloque tenga un tamao de fuente de 12px, lo que este fuera de ese bloque no tendr ningn Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o la (#) pondremos un punto (.), as: family: arial} y desde el cdigo HTML la llamaremos as: <span class="miclase">Esta es mi primer clase creada CINOC 2011 http://www.comocrearunsitioweb.com/ por Para aplicar estilos CSS a una etiqueta HTML tenemos que hacerlo as: Esa instruccin CSS har que el tamao de fuente del texto en todo el contenido tro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles). asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te Si lo que queremos modificar es un bloque, entonces al nombre del bloque o div y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del CINOC 2011</div> bloque tenga un tamao de ningn estilo. Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o CINOC 2011</span> Este documento fue Extractado James Ir Salazar Torres <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 " para mostrar el cuadro de bsqueda no podremos usarlo otra vez en la misma pagina, en cambio si a " podremos usarlo cuantas veces queramos. Poner Fondo Con Est Ahora vamos a fondo con CSS a nuestra Poner un color de fondo con CSS Para poner un color de fondo con CSS utilizaremos propiedad acepta los siguiente atributos: Cdigo hexadecimal: Nombre: podemos 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 esto: body{background-color:gray} luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo largo del curso-tutorial estilos con el archivo HTML Vemos que aplicandole el estilo a la etiqueta
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) <div class="miclase">Mi primer clase otra vez</div> es todo lo que este dentro de esas etiquetas la veremos con la fuente 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 " l cuadro de bsqueda no podremos usarlo otra vez en la misma pagina, en cambio si a "#busqueda" lo convertimos en una clase " podremos usarlo cuantas veces queramos. Poner Fondo Con Estilos CSS Ahora vamos a poner un color o una imagen de ondo con CSS a nuestra pgina web. Poner un color de fondo con CSS Para poner un color de fondo con CSS utilizaremos background propiedad acepta los siguiente atributos: Cdigo hexadecimal: as #000000 este sera el color negro. 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 e creamos en la leccin de hojas de estilos CSS
luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo tutorial), primero asegrate de haber relacionado la hoja estilos con el archivo HTML. Vemos que aplicandole el estilo a la etiqueta <body> funciona perfectamente http://www.comocrearunsitioweb.com/ por es todo lo que este dentro de esas etiquetas la veremos con la fuente 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" l cuadro de bsqueda no podremos usarlo otra vez en la misma " lo convertimos en una clase ".busqueda" un color o una imagen de background-color, esta as #000000 este sera el color negro. elegir el nombre, aunque no funciona con todos los colores y siempre tendremos que especificarlo en ingls, alguno de ellos Para este ejemplo usaremos el nombre del color, pero antes tenemos que abrir el hojas de estilos CSS) y escribir luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo relacionado la hoja de perfectamente. Este documento fue Extractado James Ir Salazar Torres Poner imagen de fondo con CSS Ahora si queremos poner una imagen de fondo que se repita (un patrn), lo haremos con el atributo 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 Si queremos que repita horizontalmente, sera as: body{background: url(imagen.jpg) r Y si queremos que se repita verticalmente, lo hacemos as:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) 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: 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: http://www.comocrearunsitioweb.com/ por Ahora si queremos poner una imagen de fondo que se repita (un patrn), lo muy chica, pero se repetir de arriba a abajo y quedar as:
Este documento fue Extractado James Ir Salazar Torres body{background: url(imagen.jpg) repeat Bien, ya hemos aprendido a empieza a tomar forma, vamos a la siguiente leccin.
Centrar contenido Ya tenemos un poco mas de idea de lo que hace CSS centrar contenido con CSS, primero crearemos una clase y luego la llamaremos desde el cdigo HTML de nuestra Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo menos, desde la leccin de crearlas. La clase que crearemos para centrar texto se llamar "centrar el atributo "text-align" con el valor " .centrar-texto{ text-align:center; y la usaremos desde el cdigo HTML as: < span class="centrar-texto">Este
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) body{background: url(imagen.jpg) repeat-y;} Bien, ya hemos aprendido a colocar fondos con CSS y nuestra empieza a tomar forma, vamos a la siguiente leccin. Centrar contenido con CSS tenemos un poco mas de idea de lo que hace CSS, ahora centrar contenido con CSS, primero crearemos una clase y luego la llamaremos desde el cdigo HTML de nuestra pgina web. Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo n de estilos CSS donde vemos que es una clase y como La clase que crearemos para centrar texto se llamar "centrar-texto" y contendr " con el valor "center" de esta forma: align:center; } y la usaremos desde el cdigo HTML as: texto">Este es el texto que ir centrado</span> http://www.comocrearunsitioweb.com/ por y nuestra pgina web ahora aprenderemos a centrar contenido con CSS, primero crearemos una clase y luego la Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo donde vemos que es una clase y como texto" y contendr centrado</span> Este documento fue Extractado James Ir Salazar Torres este cdigo se ver as: Nuestro archivo estilos.css va quedando as:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC)
va quedando as:
http://www.comocrearunsitioweb.com/ por
Este documento fue Extractado James Ir Salazar Torres En rojo vemos la clase que creamos.
Margen Y Padding Con Estilos 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 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 ma siguiendo el sentido de las agujas del reloj .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.
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) 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 leccin responderemos todas estas preguntas y veremos ejemplos prcticos. margin sirve para establecer la separacion entre dos , aunque parezca complicado de entender, no lo es :). Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la podremos separar esos dos elementos, asi esta mejor eh?. 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: top: 0px; right: 0px; bottom: 0px; t: 10px; Claro que no hace falta especificar todas las orientaciones, solo basta con poner la que queremos especificar. http://www.comocrearunsitioweb.com/ por CSS Que es el margen? Y el padding? Para que sirven? En esta leccin responderemos todas estas preguntas y veremos ejemplos prcticos. sirve para establecer la separacion entre dos , aunque parezca complicado de entender, no lo es :). Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la podremos separar esos dos elementos, asi esta mejor eh?. 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 rgenes por orientacin, los valores se aplican top: 0px; right: 0px; bottom: 0px; t: 10px; Claro que no hace falta especificar todas las orientaciones, solo basta con poner Este documento fue Extractado James Ir Salazar Torres Nota: siempre debes poner la unidad luego del valor, es decir, si quieres un margen de 10 pxeles debes asegurarte de poner "px" luego 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, ma 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 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 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
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) siempre debes poner la unidad luego del valor, es decir, si quieres un margen de 10 pxeles debes asegurarte de poner "px" luego 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 padding no separa dos elementos, mas bien crea un espacio , 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 edad margin, solo que esta vez se creo un espacio dentro del bloque 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
.clase{ padding: 10px 0px 0px 0px; } top: 0px; Como vemos, su uso es idntico a margin. Ahora vamos a aplicar lo que aprendimos en nuestra pagina web, la que venimos 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: left:320px } esto modificar solo a la etiqueta img: http://www.comocrearunsitioweb.com/ por 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 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 s bien crea un espacio , 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 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 Ahora vamos a aplicar lo que aprendimos en nuestra pagina web, la que venimos 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 Este documento fue Extractado James Ir Salazar Torres y la pagina se ver as: 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"? (recordemos HTML b
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Crear listas con HTML Que son las listas HTML? Aqu aprenderemos que son las famosas listas HTML, para que sirven y como se crean. recordemos HTML bsico) http://www.comocrearunsitioweb.com/ por
Que son las listas HTML? Aqu aprenderemos que son las famosas listas HTML, para Este documento fue Extractado James Ir Salazar Torres 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 que escribiremos siempre que queramos crear una lista desordenada, y la segunda es <li> y </li>. Crear lista desordenada: <ul> <li>Este es el <li>Segundo <li>Tercero</li>
< /ul> Como podemos ver, con la etiqueta <li> creamos los items, un item por cada
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o desordenadas, para entenderlo mejor miremos este ejemplo: primer item de mi lista
El cdigo para crear una lista con HTML desordenada es <ul> y </ul>, esta es la primera que escribiremos siempre que queramos crear una lista desordenada, y la segunda es
el primer item de mi Como podemos ver, con la etiqueta <ul> indicamos que queremos abrir una lista y con creamos los items, un item por cada <li>. http://www.comocrearunsitioweb.com/ por Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o , esta es la primera que escribiremos siempre que queramos crear una lista desordenada, y la segunda es mi lista</li> item</li> indicamos que queremos abrir una lista y con Este documento fue Extractado James Ir Salazar Torres Crear lista ordenada: <ol> <li>Este es el <li>Segundo <li>Tercero</li> < /ol> Ahora apliquemos esto que aprendimos a la este curso, el cdigo quedara as: Quedara as:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) el primer item de mi Ahora apliquemos esto que aprendimos a la pgina que venimos haciendo a lo largo de este curso, el cdigo quedara as: http://www.comocrearunsitioweb.com/ por mi lista</li> item</li> que venimos haciendo a lo largo de
Este documento fue Extractado James Ir Salazar Torres
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 horribles que tienen al costado. Para sacarle el punto negro al costado sera asi: ul{list-style:none;} utilizamos la propiedad "list 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 l listas ordenadas. Si lo que queremos es darle color a los textos de los items, solo hacemos esto: li{color: gray;} Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray", es decir, gris en ingls, recuer "color: #cccccc;".
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Aplicar estilos CSS a listas 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 horribles que tienen al costado. Para sacarle el punto negro al costado sera asi: 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 l Si lo que queremos es darle color a los textos de los items, solo hacemos esto: Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray", es decir, gris en ingls, recuerda que tambien podemos hacer por el hexadecimal, osea http://www.comocrearunsitioweb.com/ por
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 (vieta) negros 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 Si lo que queremos es darle color a los textos de los items, solo hacemos esto: Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray", da que tambien podemos hacer por el hexadecimal, osea Este documento fue Extractado James Ir Salazar Torres Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque entero de la lista y <li> son los items. MAQUETACIN
Maquetar Pagina Web Con Divs (Capas O Layouts) Introduccin a los conceptos bsicos de la maquetacin con CSS y capas, que son las capas? para que sirve?, aqu responderemos a todas las preguntas. Pero, que es eso de la maquetacin? En pocas palabras, maquetar una pagina web es pasar el diseo a cdigo HTML poniendo cada cosa en su lugar (una cabecera, un menu, etc.). Hasta hace unos aos la nica manera de maquetar una pagina web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica de maquetacin fue evolucio 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 mis mental ms fuerte de lo que son, podemos imaginarlos como donde podemos meter lo que queramos dentro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posicin esta manera se van a ir posicionando consiguiendo la estructura que queremos. Veamos un ejemplo grfico
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque entero de la lista y <li> son los items.
AQUETACIN WEB Maquetar Pagina Web Con Divs (Capas
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? maquetar una pagina web es pasar el diseo a cdigo HTML iendo cada cosa en su lugar (una cabecera, un menu, etc.). Hasta hace unos aos la nica manera de maquetar una pagina web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica de maquetacin fue evolucionando con los aos hasta llegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS. Capas, layouts, divs? que es eso? Las capas, layouts o divs son la misma cosa con distinto nombre, para tener 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 esta manera se van a ir posicionando consiguiendo la estructura que queremos. un ejemplo grfico: http://www.comocrearunsitioweb.com/ por Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque Maquetar Pagina Web Con Divs (Capas a los conceptos bsicos de la maquetacin con CSS y capas, que son las capas? para que sirve?, aqu responderemos a todas las preguntas. maquetar una pagina web es pasar el diseo a cdigo HTML, Hasta hace unos aos la nica manera de maquetar una pagina web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica nando 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. , para tener un concepto contenedores o bloques (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. Este documento fue Extractado James Ir Salazar Torres 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 co (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 No te compliques mucho tratando de entender el concepto de golp viendo ms detenidamente durante estas lecciones.
Creando Nuestro Primer 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.
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera: es la capa principal y contenedora capa dentro de la capa contenedora 1 y alineada a la izquierda igual que la capa 2, solo que tiene un margen con respecto a esta ultima (float:left; margin: 10px; ya veremos esto ms en detalle). No te compliques mucho tratando de entender el concepto de golpe, ya lo vamos a ir detenidamente durante estas lecciones. Creando Nuestro Primer DIV En esta leccin aprenderemos a crear nuestro primer DIV para maquetarlo con CSS, darle formato y aplicarle estilos. prender a crear una capa, no te asustes porque no es nada del otro mundo, si seguiste todas las lecciones te ser muy fcil. http://www.comocrearunsitioweb.com/ por
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera: ntenedora 1 y alineada a la izquierda igual que la capa 2, solo que tiene un margen con respecto a esta en detalle). e, ya lo vamos a ir En esta leccin aprenderemos a crear nuestro primer DIV para maquetarlo con CSS, darle formato prender a crear una capa, no te asustes porque no es nada del otro Este documento fue Extractado James Ir Salazar Torres Como crear un DIV La forma de crear una capa DIV es as: recuerda que todo contenido visible de la pgina debe ir ent <body> </body> (esto ya con el cdigo HTML completo quedara as: < html> <head> <title>Curso de maquetacin </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, con un archivo html. Para darle formato a un DIV tenemos 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 cap falta abrir la hoja de estilos que creamos y llamarlo de esta manera:
#capa1{ background-color:green; }
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Como crear un DIV La forma de crear una capa DIV es as: <div></div> recuerda que todo contenido visible de la pgina debe ir ent </body> (esto ya debe estar muy claro). n el cdigo HTML completo quedara as: CSS</title> <div>Esta es mi primer capa!</div> 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, ya sabemos crear una hoja de estilos y relacionarla Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto , 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 pusimos "capa1" de nombre, ahora solo nos falta abrir la hoja de estilos que creamos y llamarlo de esta manera: http://www.comocrearunsitioweb.com/ por recuerda que todo contenido visible de la pgina debe ir entre las etiquetas Como darle formato a un DIV o capa con estilos CSS crear una hoja de estilos y relacionarla que identificarlo de alguna forma, para esto , en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es as: "capa1" de nombre, ahora solo nos falta abrir la hoja de estilos que creamos y llamarlo de esta manera: Este documento fue Extractado James Ir Salazar Torres
esto har que el color de fondo puede apreciar: Como vemos, el color se estira, esto es porque no le definimos un ancho determinado, para hacer agreg forma:
#capa1{ width:210px; background-color:green; }
Ahora seguramente ya vers el fondo verde en un la imagen anterior, pero
Simple, le agregaremos el atributo de esta forma: #capa1{ width:210px; height:300px; background-color:green; }
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) esto har que el color de fondo de esa capa sea verde, en la siguiente imagen se
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 Ahora seguramente ya vers el fondo verde en un rea mucho ms , pero Cmo hacer para que la capa sea Simple, le agregaremos el atributo height con el valor en pixeles que queramos,
http://www.comocrearunsitioweb.com/ por sea verde, en la siguiente imagen se Como vemos, el color se estira, esto es porque no le definimos un ancho a #capa1 de la siguiente ms corta como en que la capa sea ms alta? con el valor en pixeles que queramos, Este documento fue Extractado James Ir Salazar Torres Con esto ya tendremos una especie de texto como queremos. 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 prcticos. La maquetacin por divs CSS para conseguir la estructura que queremos 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;
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC)
Con esto ya tendremos una especie de rectngulo verde donde podremos agregar comodar un DIV Para que sirve la propiedad FLOAT en CSS? Aqu veremos para que sirve y cuales son sus
La maquetacin por divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los no flota la capa. flota la capa hacia la izquierda. 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 ia la izquierda, quedara as: http://www.comocrearunsitioweb.com/ por verde donde podremos agregar Para que sirve la propiedad FLOAT en CSS? Aqu veremos para que sirve y cuales son sus basa en "flotar" unas capas dentro de otras , para esto se utiliza la propiedad Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los 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 Este documento fue Extractado James Ir Salazar Torres background-color:green; float:left; }
<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 coincidan en ambos, de lo contrario no funcionar
Esto se debera ver ms
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC)
y el cdigo HTML sera este: <title>Curso de maquetacion CSS</title> <link href="estilos.css" type="text/css" rel="stylesheet"> <div id="capa1">Esta es mi primer capa!</div> <div id="capa2">Esta es mi segunda capa!</div> 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. o menos as: http://www.comocrearunsitioweb.com/ por estilos como en el cdigo HTML, que Este documento fue Extractado James Ir Salazar Torres Ahora, que pasa si aplicamos un margen izquierdo a la capa2?
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Ahora, que pasa si aplicamos un margen izquierdo a la capa2?
http://www.comocrearunsitioweb.com/ por
Ahora, que pasa si aplicamos un margen izquierdo a la capa2? Este documento fue Extractado James Ir Salazar Torres
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 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
Esta propiedad se utiliza en conjunto con se posicione a cualquiera de los lados 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 ejem
Siguiendo con el ejemplo que hicimos en la leccin anterior vamos a crear una
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Evitar que un DIV o CAPA se uperponga con otra 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 Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa alquiera de los lados, los valores que admite son estos: no deja que una capa flote a la izquierda evita que una capa flote a la derecha 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 http://www.comocrearunsitioweb.com/ por
Evitar que un DIV o CAPA se Para que sirve la propiedad CLEAR en CSS? Aqu veremos para que sirve y 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. sirve para evitar que una capa , los valores que admite son estos: evita que haya capas flotantes en cualquiera de sus lados plo, el pie de pagina. Siguiendo con el ejemplo que hicimos en la leccin anterior vamos a crear una Este documento fue Extractado James Ir Salazar Torres tercer capa #capa3 y le aplicaremos esta propiedad, aadiremos un ancho de 430 pixeles y un alto de 30 pixeles, tambin le aplicaremos un color de fondo naranja.
#capa3{ width:430px; height:30px; background-color:orange; float:left; clear:both; } el cdigo HTML quedara as: <html> <head> <title>Curso de maquetacion CSS</title> <link href="estilos.css" type="text/css" rel="stylesheet"> </head> < body> <div id="capa1">Esta es mi primer capa!</div> <div id="capa2">Esta es mi segunda capa!</div> <div id="capa3">Esta es mi tercer capa!</div> </body> < /html>
Esto dar como resultado algo parecido a esto:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) 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 color:orange; el cdigo HTML quedara as: <title>Curso de maquetacion CSS</title> <link href="estilos.css" type="text/css" rel="stylesheet"> <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> Esto dar como resultado algo parecido a esto: http://www.comocrearunsitioweb.com/ por 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 Este documento fue Extractado James Ir Salazar Torres Ahora vamos a agregar un margen superio (#capa3) de las demas capas o divs.
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Ahora vamos a agregar un margen superior para separe un poco el pie de (#capa3) de las demas capas o divs.
http://www.comocrearunsitioweb.com/ por
un poco el pie de pgina Este documento fue Extractado James Ir Salazar Torres
Si les ha quedado claro estos pasos de maquetar un sitio, para pruebas ntegramente con divs
Maquetando una o Capas (layouts) En esta leccin aprenderemos a maquetar una pagina web integramente en CSS y HTML, cada parte de ella explicada prcticos para entenderlo mejor. A lo largo de este curso de maquetacin CSS bsicos para crear y poder flotar capas entre otras co de poner en prctica lo que aprendimos para maquetar una pagina con la siguiente estructura:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Si les ha quedado claro estos pasos de maquetacin ya estamos listos para para ello en la siguiente leccin maquetaremos un sitio de con divs. Maquetando una Pgina Web con DIVs o Capas (layouts) 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. este curso de maquetacin CSS hemos ido viend bsicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar de poner en prctica lo que aprendimos para maquetar una pagina con la http://www.comocrearunsitioweb.com/ por
a estamos listos para a siguiente leccin maquetaremos un sitio de Web con DIVs En esta leccin aprenderemos a maquetar una pagina web integramente en CSS y HTML, cada paso a paso, con ejemplos endo los conceptos sas, ahora vamos a tratar de poner en prctica lo que aprendimos para maquetar una pagina con la Este documento fue Extractado James Ir Salazar Torres 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: Recuerda: que esto es solo un ejemplo diseo y las diferentes partes que
Entonces comencemos maquetando el contenedor general. Nota: antes de continuar, archivo HTML para que todo lo que hagas a lo largo del curso te funcione.
1. Maquetar el contenedor general con CSS En esta leccin de maquetacin aprender nuestra pgina web.
Contenedor general
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) ac puede ir un logo o el nombre de tu pagina web podemos poner un menu vertical con listas HTML e ir el contenido de la web podemos poner lo que necesitemos, desde el copyright hasta los enlaces recomendados La estructura deber quedar as:
que esto es solo un ejemplo de diseo estructural, tu puedes definir el diseo y las diferentes partes que tendr tu pagina. mos maquetando el contenedor general. antes de continuar, asegrate de relacionar la hoja de estilos con tu para que todo lo que hagas a lo largo del curso te funcione. Maquetar el contenedor general En esta leccin de maquetacin aprenderemos a maquetar el contenedor general de http://www.comocrearunsitioweb.com/ por ac puede ir un logo o el nombre de tu pagina web podemos poner un menu vertical con listas HTML podemos poner lo que necesitemos, desde el copyright
tu puedes definir el relacionar la hoja de estilos con tu para que todo lo que hagas a lo largo del curso te funcione. Maquetar el contenedor general emos a maquetar el contenedor general de Este documento fue Extractado James Ir Salazar Torres La primera capa que tendremos que crear es un contenedor general al que aplicaremos un ancho y alto fijo
Para este ejemplo lo haremos con estas medida Ancho: 900 pixeles Alto: 400 pixeles 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 ar 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.
2. Maquetar C
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) capa que tendremos que crear es un contenedor general al que aplicaremos un ancho y alto fijo para todo el sitio Web. Para este ejemplo lo haremos con estas medidas: 900 pixeles 400 pixeles A este DIV lo llamaremos "contenedor", y sera algo asi: Ahora abrimos el archivo HTML (index.html) y comenzamos a ar por ahora solo tenemos que llamar a la capa "contenedor", as: < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css">
Ya tenemos el contendor general, ahora maquetaremos la cabecera. Maquetar Cabecera con CSS http://www.comocrearunsitioweb.com/ por capa que tendremos que crear es un contenedor general al que le A este DIV lo llamaremos "contenedor", y sera algo asi: Ahora abrimos el archivo HTML (index.html) y comenzamos a armar las capas, por ahora solo tenemos que llamar a la capa "contenedor", as: Ya tenemos el contendor general, ahora maquetaremos la cabecera. abecera con CSS Este documento fue Extractado James Ir Salazar Torres Seguimos con las lecciones para maquetar nuestra primer pagina web, en esta cabecera Cabecera Teniendo el contenedor general vimos antes, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos el alto que queremos que te el contenedor general, obviamente usaremos mucho menos, solo 50 pixeles, y tambin un color de fondo (verde) para ir notando cada capa, quedando as:
y llamamos a esta capa desde el cdigo HTML, pero ojo, tiene que ir dentro de la capa contenedora, as:
<html> < head> < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css"> < /head> < body> <div id="contenedor"> <div id="cabecera">Esta es la cabecera</div> </div> </body> </html>
Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con la barra lateral.
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Seguimos con las lecciones para maquetar nuestra primer pagina web, en esta ocasin veremos cmo contenedor general y siguiendo el diagrama de maquetacin que , 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:
y llamamos a esta capa desde el cdigo HTML, pero ojo, tiene que ir dentro de la < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css">
<div id="cabecera">Esta es la cabecera</div> Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con http://www.comocrearunsitioweb.com/ por Seguimos con las lecciones para maquetar nuestra primer maquetar la el diagrama de maquetacin que , es hora de crear la cabecera de nuestro sitio, a esta le asignaremos nga, 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: y llamamos a esta capa desde el cdigo HTML, pero ojo, tiene que ir dentro de la Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con Este documento fue Extractado James Ir Salazar Torres 3. Maquetar la Barra L Siguiendo con el curso de maquetaci 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 adems de establecer un ancho y alto que utilizar
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">
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) aquetar la Barra Lateral con CSS Siguiendo con el curso de maquetacin, veremos como maquetar la barra 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. color: orange; Si no queremos que ocupe todo el alto de la pagina solo ponemos una cantidad de pixeles determinada, sin porcentajes. < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css"> http://www.comocrearunsitioweb.com/ por ateral con CSS n, veremos como maquetar la barra 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, para flotar la barra a la izquierda, Si no queremos que ocupe todo el alto de la pagina solo ponemos una cantidad Este documento fue Extractado James Ir Salazar Torres <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 planteamos
4. Maquetar Leccin del curso de maquetacin CSS, donde maquetamos el contenido general de nuestro sitio web Contenido Al igual que la capa de la cambiaremos algunos valores como el ancho (el contenido ocupa mas lugar) y el color de fondo (para distingir donde empieza y termina la capa).
y en el HTML agregamos la capa debajo de la barra lateral:
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) <div id="cabecera">Esta es la cabecera</div> lateral">Esta es la barra lateral</div> muy poco para culminar con el esquema de diseo que nos aquetar Contenido con CSS Leccin del curso de maquetacin CSS, donde maquetamos el contenido general de nuestro sitio web 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).
y en el HTML agregamos la capa debajo de la barra lateral: http://www.comocrearunsitioweb.com/ por para culminar con el esquema de diseo que nos ontenido con CSS Leccin del curso de maquetacin CSS, donde maquetamos el contenido general de nuestro sitio web iniremos 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). Este documento fue Extractado James Ir Salazar Torres
Ya solo nos queda maquetar el pie de pagina y es hora de que le des tus toques finales. <html> < head> < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="styleshee < /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> 5. Maquetar pie de P Ultima leccin del curso de maquetacin con CSS y capas, donde aprenderemos a maquetar el pie de p Pie de pagina En el pie de pgina utilizaremos la anterior, tambin definiremos un color de fondo:
#pie {
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) Ya solo nos queda maquetar el pie de pagina y es hora de que le des tus toques < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css"> <div id="cabecera">Esta es la cabecera</div> lateral">Esta es la barra lateral</div> <div id="contenido">Este es el contenido principal</div> Maquetar pie de Pgina CSS Ultima leccin del curso de maquetacin con CSS y capas, emos a maquetar el pie de pgina gina utilizaremos la propiedad clear que vimos en la leccin anterior, tambin definiremos un color de fondo: http://www.comocrearunsitioweb.com/ por Ya solo nos queda maquetar el pie de pagina y es hora de que le des tus toques
Ultima leccin del curso de maquetacin con CSS y capas, gina. que vimos en la leccin Este documento fue Extractado James Ir Salazar Torres background-color: blue; clear: both; }
Finalmente el HTML quedara as: <html> < head> < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css"> < /head> < body> <div id="contenedor"> <div id="cabecera">Esta es la cabecera</div> <div id="barra-lateral">Esta es la barra lateral</div> <div id="contenido">Este es el contenido principal</div> <div id="pie">Este es el pie de p </div> < /body> < /html>
Si queremos agregar un espac "padding:5px;" en todas las capas CSS.
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC)
Finalmente el HTML quedara as: < title>Maquetando con estilos CSS</title> < link href="estilos.css" rel="stylesheet" type="text/css"> <div id="cabecera">Esta es la cabecera</div> lateral">Esta es la barra lateral</div> <div id="contenido">Este es el contenido principal</div> <div id="pie">Este es el pie de pgina</div> Si queremos agregar un espacio entre las palabras y los bordes solo agregamos "padding:5px;" en todas las capas CSS. http://www.comocrearunsitioweb.com/ por io entre las palabras y los bordes solo agregamos Este documento fue Extractado James Ir Salazar Torres
Ya terminamos, ahora ejecuta tu pagina y observa como te quedo, si quieres que todas las pginas de tu sitio tengan esta estructura, simplemente enlaza el contenido de cada documen
Extractado y articulado de http://www.comocrearunsitioweb.com/ James Ir Salazar Torres (Docente IES-CINOC) , ahora ejecuta tu pagina y observa como te quedo, si quieres que de tu sitio tengan esta estructura, simplemente enlaza el contenido de cada documento HTML y el archivo CSS http://www.comocrearunsitioweb.com/ por , ahora ejecuta tu pagina y observa como te quedo, si quieres que de tu sitio tengan esta estructura, simplemente enlaza el