HTML
HTML
HTML
o Que es bsicamente una pagina Web o Conceptos bsicos de HTML 2. Insertar Texto en una web y darle formato Bsico. o Etiquetas HTML para texto. o Conceptos bsicos de CSS o Propiedades CSS ms comunes para texto. 3. Enlaces entre paginas. o Conceptos para vincular paginas entre si o Direcciones Relativas y Absolutas 4. Insertar imgenes y darles formato o Etiquetas Correspondientes o Propiedades de CSS mas utilizadas para las imgenes 5. Elementos para el armado de estructuras mas complejas o Aprender para que sirve un div o Aprender para que sirve una lista 6. Aprendiendo a estructurar paginas con DIVs o Como encarar el problema de diseo de una web o Elementos de CSS que nos permiten manejar los divs y darles un formato que nos permita crear una web de la mejor forma! 7. Ahora si la ultima leccin: Un ejemplo de una linda web o crearemos un ejemplo de pagina web para que veamos la potencia del CSS si se crea un HTML correcto o Estructura de la pagina y formato bsico! o Dando estilos al men! o Reemplazando ttulos, colocando fondo y colocando las imgenes de las fotografas Las Propiedades de CSS
Formalizando mejor el CSS de las paginas y viendo todas las propiedades utiles.
1. Conceptos Basicos CSS Agrupacion, Id, Clases y Contexto. Conceptos utiles para optimizar la creacion de nuestros CSS 2. Herencias, la Propiedad !important y las unidades para CSS 3. Las propiedades de Texto y de Fuentes 4. Propiedades de Color, backgrounds y Fondos 5. El modelo de Caja y propiedades de las Cajas 6. Propiedades de Posicionamiento de elementos
Si tenes una pagina web, difundir el tutor es sin duda la mejor forma de ayudarnos a crecer, por ello les dejo un link para que quien quiera como forma de agradecimiento nos de una mano en el posicionamiento de nuestro blog.
Antes de comenzar necesitaras bsicamente 2 cosas, un editor de texto como puede ser el bloc de notas (Te recomiendo mejor el notepad++ que especial para programar) en Windows y un navegador de Internet. Te recomiendo Mozilla / Firefox. Comenzamos Aqu el tutorial de HTML / CSS. Que es una pagina web?Como esta hecha? Una pagina web es una coleccin de texto y elementos multimedia (Como por ejemplo imgenes y flash) organizados por medio de un lenguaje de etiquetas. Este lenguaje de etiqueta tiene como nombre HTML. Es hora de introducir un pequeo ejemplo de el cdigo de una pagina Web. La metodologa que utilizaremos es que copies el cdigo que esta despus de este prrafo en tu editor, lo guardes como practico0.html y lo ejecutes con el explorador de Internet. De esta forma vas viendo que es lo que estamos hablando. Recomiendo que se tomen el trabajo a menos que estn seguros de que se lo saben.
01 <html> 02 03 <head> 04 <title> Mi Primera Web! </title> 05 </head> 06 07 <body> <!-- Esto es un Comentario en HTML, el explorador cuando ve estas 08 etiquetas 09 10 especiales ignora el texto que esta aca adentro, de esta forma podemos hacer anotaciones para poder acordarnos de encontrar distintas cosas
Ahora simplemente haz doble clic sobre practico0.html y observa que ves.
Es simple no ves nada solo una pagina en blanco y en la barra de titulo del explorador de internet dice Mi Primera Web! Esto es lo que estaba buscando, ahora que significan estas cosas que escribimos y que no se ven? Eso es la estructura bsica de un documento HTML. Todos los elementos en HTML se escriben como etiquetas (o tags), se abre un tag aqu se coloca lo que corresponda y se cierra el elemento con el mismo tag precedido de una Barra invertida ( / ). De esta forma: <html> indica a el navegador que comienza un documento HTML y </html>indica que finaliza este documento. <head> indica a el navegador que comienza un encabezado de un documento HTML y </head>indica que finaliza este encabezado. <body> indica a el navegador que comienza el cuerpo de un documento HTML y </body>indica que finaliza este cuerpo. Ahora voy a explicar brevemente que es el encabezado y que es el cuerpo de un HTML. Encabezado (<head>) En el encabezado se definen todas las partes de la pagina que no son visibles por el usuario pero son tiles para otros propsitos, como por ejemplo indicarle a los robots de bsqueda (Google, Yahoo, etc) una descripcin del sitio o decirle al navegador Web que idioma estamos hablando para que por ejemplo en el espaol agregue la que no esta en el alfabeto ingles. Por el momento la nica etiqueta que nos preocupar en el Encabezado es la etiqueta <title> </title> que es muy til, es el texto que aparecer en la barra de titulo del navegador web (Arriba de el men Archivo, editar, ver, etc). Es muy importante porque es muy til para posicionar tu web en los buscadores y adems sirve para distinguir las ventanas si una persona tiene muchas paginas abiertas. Cuerpo (en ingles <body>) En esta parte del documento HTML se coloca lo ms importante de todo, de hecho se coloca todo lo que va a visualizar el usuario. Ya sea texto, imgenes, flash, y todo lo que se pueda poner a una Web. Bueno creo que estamos en condiciones de hacer el clsico hola mundo que se acostumbra a hacer cuando se est aprendiendo un lenguaje de programacin en el primer ejemplo. Y luego pasaremos a la siguiente seccin donde se pone todo muchsimo ms interesante! Aqu Va!
01 02
<html>
03 <head> 04 <title> Practico 1 </title> 05 </head> 06 07 <body> 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </body> 26 27 </html> <!-- Las etiquetas "strong" se utilizan para resaltar el texto --> <!-- Las etiquetas "P" son las que sirven para colocar prrafos de textos --> <!-Las etiquetas "H1" son las etiquetas que se utilizan para el encabezado mas importante de la web. Lo veremos bien bien mas adelante! --> <!-- No te preocupes si no entendes que es eso de h1, strong ni p Eso lo veremos en la proxima leccion, pero te invito a que los modifiques a gusto para que vayas viendo como cambia todo, asi es como realmente se aprende! --> <h1>Hola Mundo!</h1> <p> Esta es mi primera Web: <strong>Que Grande Yo!</strong></p>
Bueno gente espero que hayan podido seguir la leccin sin problemas, ante cualquier duda por favor posteen que contestare con todo gusto En la siguiente leccin Veremos cmo insertar texto, que es un CSS y como darle formato al texto por medio de un CSS. Bueno en esta leccin procederemos a insertar texto en una pagina y luego veremos como darle distinto formato al mismo. Cmo Insertar texto en una pgina web? Como habamos dicho en la primera leccin las pginas web se escriben en un lenguaje de etiquetas. Para poder hablar un lenguaje hace falta conocer sus palabras, intentaremos aprender este lenguaje primero observando cdigo y luego explicando que hace cada cosa.
Crearemos un artculo que diga porque crear una pgina web, Constara de una pregunta principal y luego encabezados que responden los motivos de la pregunta:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta lnea simplemente ignorarla, ya volveremos sobre el tema--> <title>Practico 3</title> </head> <body> <!-- Insertaremos un encabezado (o titulo) y un texto --> <h1> Porque disear una pgina Web? </h1> <p>Le mostramos las razones por las que su empresa debera tener su espacio en Internet.</p> <h2>Presencia en la web</h2> <p>Internet es uno de los medios de comunicacin con mayor crecimiento de la actualidad y se ha convertido en la herramienta ms utilizada para buscar todo tipo de informacin. Es por esto que cada vez ms empresas desean tener su propio sitio web y de esta manera poder captar los potenciales clientes que prefieren este medio para buscar informacin sobre productos o servicios.</p> <h2>Atencin al pblico las 24 hs</h2> <p>El sitio web de su empresa permanecer abierto todos los das del ao, las 24 hs. del da. Los clientes no tendrn que esperar para buscar la informacin que necesitan sobre sus productos o servicios, porque pueden acceder a ella cuando y desde donde lo deseen. Esto permite a los clientes tomar una decisin con mayor tranquilidad y antes de hacer una consulta al personal. Por otro lado, su empresa ahorra tiempo en la atencin directa al pblico, porque clientes ms decididos realizan consultas concretas, que no requieren de largas muestras o explicaciones.</p> <h2>Ampliacin de mercados</h2> <p>Un sitio web es accesible desde cualquier parte del mundo. Su empresa puede lograr clientes de ciudades en las que quizs no exista una sucursal. En este sentido las posibilidades de expansin son muy importantes y variadas. Actualmente las cadenas</p> o franquicias comerciales aprovechan las ventajas de Internet para buscar inversores dispuestos a instalar nuevas sucursales. <h2>Interaccin con el cliente</h2> <p>Internet brinda mltiples formas de comunicacin (e-mail, chat, foros, videos, redes sociales, etc..) que pueden ser aprovechadas por su empresa para mantener un contacto ms cercano con sus clientes y para lograr la fidelizacin de los mismos.</p> </body> </html>
Bueno ya deberas haber probado el cdigo, y si no lo hiciste podes hacerlo antes de seguir. Y suponemos que sabes que son las etiquetas <head> y <body>. Si no lo sabes volv a la primera leccin, lela y realiza todas las consultas que sean necesarias. Estaremos de acuerdo que el artculo que creamos en el practico3, no tiene el formato ms lindo o elegante que hemos visto jams, de hecho es medio feucho No importa, por el momento tienes que olvidarte de ese detalle y trata de observar lo objetivo de la pagina, ya habr tiempo de darle formato un poco ms adelante. Manejo de Texto en XHTML A continuacin listo las etiquetas utilizadas en HTML para contener texto y una breve explicacin: Headers, Titulos o encabezados Se utilizan para describir ttulos principalmente o frases o contenido importante y tienen la siguiente sintaxis: <h1> texto </h1>: <h2> texto </h2>: <h3> texto </h3>: <h4> texto </h4>: <h5> texto </h5>: <h6> texto </h6>: El ms importante en donde por ejemplo se puede poner el titulo principal de la pgina es el <h1>, un titulo importante pero menos importante que el <h1> es el <h2> y as hasta el <h6> Para ver las diferencias entre los encabezados puedes ver el practico4.html
<!-- practico4.html -> Guardarlo con ese nombre y ejecutarlo con un explorador de internet --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta lnea simplemente ignorala, ya volveremos sobre el tema--> <title>Practico 4</title> </head> <body> <h1>Encabezado <h2>Encabezado <h3>Encabezado <h4>Encabezado <h5>Encabezado h1</h1> h2</h2> h3</h3> h4</h4> h5</h5>
Prrafos Voy a brindar dos elementos que se utilizan en una pgina web para insertar texto, los elementos: <p> texto </p>: Este elemento es uno de los ms utilizados en las webs, nos permite poner texto y es un elemento de bloque (ya veremos ms adelante que es un elemento de bloque), que lo que hace es colocar texto pero al colocar varios <p> los ubica automticamente debajo, porque son prrafos diferentes. <span> texto </span>: Este tambin es un elemento muy utilizado en las webs, nos permite poner texto y es un elemento inline (ya veremos ms adelante que es un elemento de bloque), que lo que hace es colocar texto pero al colocar varios <span> el texto continua digamos que normal. Esta herramienta es muy til por ejemplo para cambiar el color a una parte parcial de un prrafo. Como siempre incluimos un ejemplo para ver de qu se trata:
<!-- practico5.html -> Guardarlo con ese nombre y ejecutarlo con un explorador de internet --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema--> <title>Practico 5</title> </head> <body> <h1>Blog de la Web : Ejemplo Con p</h1> <p>Este intenta ser un espacio para publicar toda clase de artculos que hagan referencia a la Web y a Internet.</p> <p>Todo sobre diseo web, programacion y Posicionamiento en los buscadores.</p> <h1>Blog de la Web : Ejemplo Con span</h1> <span>Este intenta ser un espacio para publicar toda clase de artculos que hagan referencia a la Web y a Internet.</span> <span>Todo sobre diseo web, programacion y Posicionamiento en los buscadores.</span> <h1>Conclusin</h1> <p> El Span sigue el texto como si fuera el mismo y el p los coloca en prrafos diferentes. Si no te das cuenta, modifica este archivo y colocale textos mas largos y coloca mas prrafos para ir viendo.</p>
</body> </html>
Bueno estos elementos que presente aqu son los que generalmente se utilizan para colocar textos y encabezados en las pginas webs y es muy importante que aprendan a utilizarlos de forma correcta, porque esto permite crear pginas webs de forma eficientes, lo que les permitir tener los beneficios de un correcto armado del HTML. Tena pensado incluir aqu los conceptos de CSS y darle formato al texto pero esta leccin ya es lo suficientemente larga, por lo que en la prxima entrega cambiaremos de color a los textos, los ordenes, negritas, cursivas, justificaciones, anchos y altos fijos. Nos vemos! y como siempre ante cualquier duda sobre esta leccin, posteala en esta seccin as mantenemos ordenado el blog. Diprox es mi empresa de Diseo Web, si necesitas algun diseo profesional o posicionamiento web no dudes en contactarnos
Qu es CSS? CSS, es una tecnologa que nos permite crear pginas web de una manera ms exacta. Gracias a las CSS somos mucho ms dueos de los resultados finales de la pgina, pudiendo hacer muchas cosas que no se poda hacer utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos, colores Trabajar correctamente con HTML y CSS tiene muchos beneficios a la hora de posicionar una pgina en los buscadores y tambin a la hora de redisear o retocar la pgina. CSS (Cascading Style Sheets), en espaol Hojas de estilo en Cascada. Como siempre en este tutor aprenderemos con lo prctico, si deseas aprender ms de CSS, puedes buscar en Google ya que existen miles de sitios que explican exactamente que es, aunque prximamente creare un artculo que lo explique. Creamos nuestro practico6.html, en base a un artculo de mi blog, al cual iremos dando formato. El HTML es este:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema--> <title>Practico 5</title> </head>
<body> <h1>Posicionamiento Web: Que es el PageRank?</h1> <p>Una de las principales cosas que se debe saber a la hora de posicionar una pagina en los buscadores, es tener en claro que es el PageRank, ya que muchos webmasters lo utilizan para hacer intercambios. Les presento un excelente artculo acerca del tema.</p> <p>PageRankTM (PR) es un valor numrico que representa la importancia que una pgina web tiene para Google. Google se hace la idea de que cuando una pgina coloca un enlace (link) a otra, es de hecho un voto para esta ltima.</p> <p>Cuantos ms votos tenga una pgina, ser considerada ms importante por Google. Adems, la importancia de la pgina que emite su voto tambin determina el peso de este voto. De esta manera, Google calcula la importancia de una pgina gracias a todos los votos que reciba, teniendo en cuenta tambin la importancia de cada pgina que emite el voto.</p> <p>PageRankTM (desarrollado por los fundadores Larry Page y Sergey Brin) es la manera que tiene Google de decidir la importancia de una pgina. Es un dato valioso, porque es uno de los factores que determinan la posicin que va a tener una pgina dentro de los resultados de la bsqueda. No es el nico factor que Google utiliza para clasificar las pginas, pero s es uno de los ms importantes.</p> <p>Hay que tener en cuenta que no todos los links son tenidos en cuenta por Google. Por ejemplo, Google filtra y descarta los enlaces de pginas dedicadas exclusivamente a colocar links (llamadas link farms).</p> <p>Adems, Google admite que una pgina no puede controlar los links que apuntan hacia ella, pero s que puede controlar los enlaces que esta pgina coloca hacia otras pginas. Por ello, links hacia una pgina no pueden perjudicarla, pero s que enlaces que una pgina coloque hacia sitios penalizados, pueden ser perjudiciales para su PageRankTM.</p> <p>Una manera de conocer el PageRankTM de una pgina es decargndose la barra de bsqueda de Google (solamente disponible para MS IExplorer). Aparece una barra en la que se muestra en color verde el valor de PageRankTM en una escala de 0 a 10. Sitios web con PR10 son Yahoo!, Microsoft, Adobe, Macromedia, o la propia Google. Teneis una lista completa con los sitios con PR10.</p> <p>El algoritmo de PageRankTM fue patentado en Estados Unidos el da 8 de enero de 1998, por Larry Page. El ttulo original es Method for node ranking in a linked database, y le fue asignado el nmero de patente 6,285,999.</p>
</body> </html>
Ahora que ya tenemos nuestro HTML listo (Te invito a mirarlo en tu explorador de Internet) procedemos a agregar el cdigo CSS para ir colocndole el formato que deseamos a nuestro practico6. Existen varias formas de insertar el cdigo CSS, nosotros momentneamente lo incluiremos dentro del encabezado de la pagina (es decir entre las etiquetas <head> y </head>) El cdigo CSS lo pondremos dentro de las etiquetas <style> y </style>. Si no lo comprendes no te preocupes ya vers un ejemplo que t e aclarara todo. Lo que haremos en un principio es cambiar el color de fondo de la pgina y el color de la letra. practico6b.html:
<!-- practico6.html -> Guardarlo con ese nombre y ejecutarlo con un explorador de Internet --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema--> <title>Practico 6</title> <!--Aqu va lo nuevo--> <style> body{ background-color: #C29100; color: blue; } </style> </head> <body> <h1>Posicionamiento Web: Que es el PageRank?</h1> <p>Una de las principales cosas que se debe saber a la hora de posicionar una pagina en los buscadores, es tener en claro que es el PageRank, ya que muchos webmasters lo utilizan para hacer intercambios. Les presento un excelente artculo acerca del tema.</p> <p>PageRankTM (PR) es un valor numrico que representa la importancia que una pgina web tiene para Google. Google se hace la idea de que cuando una pgina coloca un enlace (link) a otra, es de hecho un voto para esta ltima.</p> <p>Cuantos ms votos tenga una pgina, ser considerada ms importante por Google. Adems, la importancia de la pgina que emite su voto tambin determina el peso de este voto. De esta manera, Google calcula la importancia de una pgina gracias a todos los votos que reciba, teniendo en cuenta tambin la importancia de cada pgina que emite el voto.</p> <p>PageRankTM (desarrollado por los fundadores Larry Page y Sergey Brin) es la manera que tiene Google de decidir la importancia de una pgina. Es un dato valioso, porque es uno de los factores que
determinan la posicin que va a tener una pgina dentro de los resultados de la bsqueda. No es el nico factor que Google utiliza para clasificar las pginas, pero s es uno de los ms importantes.</p> <p>Hay que tener en cuenta que no todos los links son tenidos en cuenta por Google. Por ejemplo, Google filtra y descarta los enlaces de pginas dedicadas exclusivamente a colocar links (llamadas link farms).</p> <p>Adems, Google admite que una pgina no puede controlar los links que apuntan hacia ella, pero s que puede controlar los enlaces que esta pgina coloca hacia otras pginas. Por ello, links hacia una pgina no pueden perjudicarla, pero s que enlaces que una pgina coloque hacia sitios penalizados, pueden ser perjudiciales para su PageRankTM.</p> <p>Una manera de conocer el PageRankTM de una pgina es decargndose la barra de bsqueda de Google (solamente disponible para MS IExplorer). Aparece una barra en la que se muestra en color verde el valor de PageRankTM en una escala de 0 a 10. Sitios web con PR10 son Yahoo!, Microsoft, Adobe, Macromedia, o la propia Google. Teneis una lista completa con los sitios con PR10.</p> <p>El algoritmo de PageRankTM fue patentado en Estados Unidos el da 8 de enero de 1998, por Larry Page. El ttulo original es Method for node ranking in a linked database, y le fue asignado el nmero de patente 6,285,999.</p>
</body> </html>
En este caso lo que hemos hecho es por medio del CSS, le decimos al explorador que al elemento <body> le ponga un color de fondo, y tambin a todos los textos que estn dentro del body les coloque un color azul. Por motivos de espacio y facilidad, desde ahora solo incluir el correspondiente CSS, usted deber tomar el practico6.html y cambiar lo que esta entre las etiquetas <style> y </style> para que vaya cambiando su diseo.
<style> body{ background-color: #C29100; color: blue; } </style>
En este caso ese nmero #c29100 es el color de fondo que ve en el practico6b.html, un color mostaza. Para ver ms de los colores en las pginas webs pueden ir aqu Uno puede instanciar un elemento HTML en CSS colocando su nombre, como en este caso body que es el elemento al que quiero modificar. Luego abre una llave { coloca las instrucciones para ese elemento y luego cierra la llave }
Dentro de las llaves puede colocar distintas instrucciones que los exploradores de Internet pueden interpretar y les permite dar formatos a los distintos elementos HTML. En este caso utilizamos: background-color: Esta instruccin nos permite colocar un color de fondo para el elemento. color: Esta instruccin nos permite cambiar el color del texto. Ambos tienen las misma sintaxis: propiedad: valor ; Las distintas instrucciones CSS que estn dentro de un mismo juego de llaves { } se separan por medios de puntos y comas ; Con lo que ya vimos podemos realizar muchos cambios en el texto, pero por supuesto hacen falta mas propiedades para poder modificar mejor el texto:
y y y y
Font Family (Familia de fuente): Nos permite elegir el tipo de letras. Por ejemplo p{ font-family: Arial; } Font Weight (Peso de fuente): Nos permite colocar distintos pesos de la letra, es decir si esta en normal o en negrita. Por ejemplo p{ font-weight: bold; } Font Size (Tamao de fuente): Nos permite especificar el tamao del texto. Por Ejemplo p{ font-size: 12px; } Text Align (Alineacion del texto): Nos permite colocar el texto a la izquiera, derecha, centro o justificada. Por ejemplo p{ text-align: center; }
Ahora veremos como con el mismo HTML podemos hacer que la web cambie solo modificando unas pocas instrucciones en el CSS:
<style> body{ background-color: #defcdd; color: #2E2E2E; font-family: arial;} h1 { color: #940000; font-size: 20px; } p { font-size: 14px; } </style>
Bueno, croe que es suficiente por ahora. Pero quedan muchas cosas por ver con respecto al texto que las iremos cubriendo en los ejemplos de las posteriores lecciones, ya que hacen falta algunos conceptos mas para poder entender como dar margen y tambin faltan elementos HTML importantes para poder maquetar la web. Por lo pronto si quieres saber mas de CSS estuve viendo esta excelente pagina donde tienen listadas todas las propiedades de CSS con su explicacin y su sintaxis. Clic aqu para Ver pagina
Despus de un tiempo inactivo con respecto al Tutor, vuelvo con todo. Para terminar en el lapso de los prximos 7 dias toda la parte de conceptos bsicos, para luego comenzar con el maquetado completo de paginas. Ahora que bsicamente ya sabemos crear paginas web de texto y modificarlas en forma parcial lo que nos interesa por el momento es como llamar de una pagina a otra o movernos dentro de las mismas haciendo clics? Bueno la respuesta a ese problema son los HIPERVINCULOS. Los hipervinculos son otros de los elementos web mas importantes dentro de una pagina, es decir de que serviria la red si no podemos saltar de pagina en pagina? La sintaxis basica de un hipervinculo es las siguiente:
<a href="direccionweb.html">Texto que se muestra en el enlace</a>
Bueno visto esto crearemos 3 archivos html, y ya que estoy estudiando analisis matematico utilizare la informacion basica que hay en el departamento de matematica de mi facultad para crear una mini pagina sobre la materia, donde incluiremos informacion de fechas de parciales, finales y linkearemos una pagina con el programa de la materia y otra con la bibliografia optativa: Aqu va la pagina de el programa, la llamaremos programa-de-analisis-I.html
<!-- Archivo: "programa-de-analisis-I.html" --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Analisis matematco I: Programa de la materia</title> </head> <body> <h1>Programa de la materia</h1> <h2>TOPOLOGA EN R y en Rn .</h2> <p>Completitud de R. Existencia del supremo y equivalencias. Distancia, discos abiertos y discos cerrados. Puntos interiores. Interior de un conjunto. Conjuntos abiertos. Puntos adherentes. Clausura de un conjunto. Conjuntos cerrados. Conjuntos acotados. Lmite de sucesiones de nmeros reales. Lmite de sucesiones en Rn y lmite en cada coordenada.</p> <h2>FUNCIONES DE Rn en Rk ( n, k = 1, 2, ... )</h2> <p>Representacin grfica. Dominio de definicin. Curvas y superficies de nivel. Lmite de funciones de Rn en Rk . Lmite a lo largo de rectas y de curvas. Funciones contnuas. Composicin de funciones contnuas. Propiedades de las funciones contnuas.</p> <h2>CLCULO DIFERENCIAL EN VARIAS VARIABLES</h2> <p>Derivadas parciales. Aproximacin lineal. Diferencial de una funcin. Matriz jacobiana. Plano tangente al grfico de una funcin. Regla de la cadena. Teoremas generales de la funcin inversa y de la funcin implcita. Producto escalar en Rn . Ecuacin del plano ortogonal a un vector. Derivadas direccionales. Gradiente. Relacin con las superficies de nivel y la direccin de mximo crecimiento. Plano tangente a una superficie de nivel. Teorema del valor medio en varias variables. Derivadas de orden superior. Aproximacin polinomial de orden 2. Matriz Hessiana ( o Hessiano ) de una funcin.</p> <h2>EXTREMOS DE FUNCIONES DE VARIAS VARIABLES</h2> <p>Puntos crticos y extremos de una funcin. Formas cuadrticas, matriz asociada. Anlisis de los puntos crticos en varias variables a partir del Hessiano: mximos, mnimos, puntos de ensilladura. Extremos ligados: extremos de una funcin sobre un conjunto dado por una ecuacin G = 0. Condicin para que un punto sea punto crtico. Multiplicadores de Lagrange.</p> <h2>INTEGRALES DOBLES Y TRIPLES</h2> <p>Repaso : integral definida, sumas de Riemann, Teorema fundamental del clculo, regla de Barrow. Integrales impropias : definiciones, propiedades, criterios de convergencia, convergencia absoluta. Aplicacin : convergencia de series. La integral doble sobre rectngulos. La integral doble sobre regiones ms generales. Cambio del orden de integracin : Teorema de Fubini. La integral triple. El Teorema de Cambio de variables. Aplicaciones de las integrales dobles y triples.</p> </body>
</html>
Y por ultimo nuestra pagina principal, index.html. Este nombre es especial, porque todas las paginas webs deben o al menos deberian tener una pagina index.html. Esto le indica al servidor que mostrar cuando uno instancia una carpeta, es decir si por ejemplo alguien entra a www.blogdelaweb.com.ar/miproyecto (la web no existe es solo una suposicin), siendo miproyercto una carpeta, lo que el servidor nos mostrara si existe sera en realidad www.blogdelaweb.com.ar/miproyecto/index.html o en su defecto
manualemente en la barra de direcciones. Lo que habra que hacer es buscar un lugar en que cada pagina para colocar los links correspondientes a cada pagina. Utilizando el primer codigo que puse en esta leccion. Yo lo hare solo en el index, y ustedes deberan colocar un enlace de vuelta al index en las distintas paginas en el lugar que mas les guste. Aqui va el index con los links incluidos y sin trampas xD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Pagina de Analisis Matematico I para computacion</title> </head> <body> <h1>Anlisis I - Anlisis Matemtico I - Matemtica 1 - Anlisis II (C)</h1> <p>Curso regular primer cuatrimestre ao 2009</p> <h3><a href="programa-de-analisis-I.html">Programa de la materia</a></h3> <h3><a href="bibliografia.html">Bibliografia Optativa</a></h3> <!-- Incluire aqu un nuevo elemento HTML, los <ul> <li> nos proveen una forma de organizar la informacion, es decir se agrupan en las famosas vietas, mas adelante aprenderemos a utilizarlo, aunque no resulta dificil de entender su estructura. --> <h2>Primer parcial</h2> <p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p> <h2>Segundo parcial</h2> <p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p> <h2>Primer Recuperatorio</h2> <p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I <h2>Segundo Recuperatorio</h2> <p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II </body> </html> </html>
Enlaces Relativos Una aclaracion importante con respecto a los vnculos es que generalmente si son de una misma web conviene darlos de forma relativa, como lo he hecho yo en ejemplo. Es decir cuando coloque su direccin en el href=" no coloque toda la direccion, por el simple hecho que no tengo ni idea en que disco de su maquina ejecutan el archivo, ni en que carpatas y subcarpetas. Pero si se o al menos supongo que estan colocando todos los archivos en la misma carpetas, entonces de esa forma no hace falta llamar a ningun otro lado. Simplemente llamamos al nombre del archivo. Llamando a un enlace que esta dentro de otra carpeta Si nosotros tenemos por ejemplo nuestro index.html en una carpeta llamada practico, y dentro de esta carpeta tenemos otra carpeta llamada programa y queremos llamar a el archivo dentro de programa que se llama analisis-matematico-I.html nuestro enlace seria:
<a href="programa/analisis-matematico-I.html">Texto que se muestra en el enlace</a>
Eso era algo facil de suponer, y volver a la carpeta anterior se lo realiza con la instruccion .. (dos puntos). Es decir si estamos en el archivo /practico/programa/analisis-matematicoI.html y queremos volver a /practico/bibliografia.html nuestro codigo seria:
<a href="../bibliografia.html">Texto que se muestra en el enlace</a> <!-- Esto es volver un directorio para atras con el ../ y mostrar el archivo bibliografia.html-->
Llamando a paginas externas Las paginas externas, que no tienen alojado el vinculo dentro de el mismo servidor que nosotros, por ejemplo si estas en tu pagina y queres apuntar a www.diprox.com.ar (es donde trabajo), el codigo del vinculo es:
<a href="http://www.diprox.com.ar">Diseo Web</a> <!-- Es necesario incluir el http:// para que el vinculo funcione correctamente, eso le dice que es una pagina externa-->
Si no colocas el http://, pasa esto: clic aqu para ver que pasa Bueno Hemos aprendido a manejar vinculos de manera basica, existen otras opciones y cosas que nos permiten hacer los vinculos, como abrir la pagina automaticamente en una nueva ventana, vinculos dentro de una misma paginas, tambien llamados anclas, y tampoco hemos visto como cambiar ese color azul feo, pero paciencia porque todo llega. Los espero en la proxima leccion, la cual estara seguro antes del jueves
Hola gente despus de prometer llego con un poco de atraso con la leccin de Insertar imgenes y darles formato, para poder ir haciendo cosas mas interesantes en un sitio web. La insercin de una imagen en un documento HTML es extremadamente sencilla, es una etiqueta mas como las que hemos visto, en este caso el cdigo es:
<img src="imagen.jpg" alt="aqui una pequea descripcion de la imagen"/>
Ya te habrs dado cuenta que en la propiedad src se coloca el nombre de la imagen, con las extensin correspondiente. Internet no soporta cualquier clase de imagenes. Tipos de imagenes soportadas en la web Las clases de imagenes soportadas en la web son JPEG (o jpg que es la extensin), los .gif y los .png. Cual conviene usar? y eso depende para que necesitamos las imgenes y lo explicare en lecciones mas avanzadas porque es un tema a evaluar algo extenso. Bueno ahora que ya sebemos como insertar una imagen en una pagina lo que haremos es crear un pequeo articulo que contenga 2 o 3 fotos, para que podamos ver como va quedando. Si no tienes algunas imagenes puedes sacarlas de Google, en imagenes de google para probar. Utilizare este articulo para sacar el codigo HTML.
<!-- Archivo: "ejemplo-imagenes.html" --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Aprendiendo a usar imagenes</title> </head> <body> <img src="Images/imagen-1.jpg" alt="Barra de PageRank" class="imagen1"/> <p>En el anterior artculo se explica <a href="http://www.blogdelaweb.com.ar/posicionamiento-web-que-es-elpagerank/">que es el Pagerank</a>, en este veremos si es necesario tener miles de enlaces hacia su web para obtener un pagerank alto, y si realmente importa tener un pagerank alto.</p> <p>El Pagerank se transmite de una web a otra por medio de los enlaces. Es decir si yo, por ejemplo, enlazo una web desde ac, google considerara este enlace como un boto hacia esa web. Por lo tanto todos los enlaces que se puedan conseguir hacia su web sern tiles a la hora de incrementar el pagerank, o en caso de ser un link farm simplemente no sumara ni restara.</p>
<p>Google admite que una pgina no puede controlar los links que apuntan hacia ella, pero s que puede controlar los enlaces que esta pgina coloca hacia otras pginas. Por ello, links hacia una pgina no pueden perjudicarla, pero s que enlaces que una pgina coloque hacia sitios penalizados, pueden ser perjudiciales para su PageRankTM.</p> <p><strong>Todos los links valen por igual a la hora de transferir Pagerank?</strong></p> <p>La respuesta es un completo NO. La trasferencia de pagerank depende de muchas cosas, las mas importantes son:</p> <ul> <li>Si el pagerank de una pagina es alto la transferencia sera mas alta, es decir si la web es de calidad entonces la transferencia de pagerank valdr mucho mas que si la web es de menor calidad.</li> <li>Que la web donde se incluye el link que va a tu web (se le llama: “Back-link” ) no posea muchsimos links.</li> <li>Que la web en donde tengan el backlink sea de la misma temtica que tu web o no.</li> </ul> <img src="Images/imagen-2.jpg" alt="La imagen 2" class="imagen2"/> <p>Algo importante para tener en evaluacin de posicionamiento de que mucha gente se dedica solo a mejorar la calidad de contenidos cuenta es que el PageRank como mtodo de una web ya no es tan relevante. Debido a aumentar este valor numrico, en vez de de su pagina.</p>
<p>Para tener un buen Pagerank no se necesita miles de links a sus paginas, sino que simplemente se necesita enlaces de calidad que vallan aumentando con el tiempo casi de forma natural y no volverse loco, tener paciencia.</p> <p>El objetivo de el SEO es posicionar su web con palabras claves relevantes, el Pagerank se actualiza diariamente internamente en Google, pero el Pagerank externo que se ve en las distintas barras es actualizado 3 o 4 veces por ao, por lo que es muy inexacto y no creo que sea extremadamente relevante a la hora del intercambio.</p> <img src="Images/imagen-3.jpg" alt="La imagen 3" class="imagen3"/> <p>La mejor forma de saber si el intercambio con otra web sera positiva para conseguir nuevas visitas es evaluar la web, pedirle si es posible ver la cantidad de visitas que recibe su pagina, saber si en la web se incluir nuevos contenidos, si es un proyecto serio y buscar si la web esta posicionada en los motores de bsqueda con las palabras mas importantes. </p> <p>Hay que tener en cuenta que una web que hoy tiene Pagerank 0 o 1 en la prxima actualizacin puede estar con uno 2 o 3 puntos arriba dependiendo de las cosas que hace el webmaster, por lo que ser lo suficientemente inteligente para realizar intercambios con webs que estn subiendo y tomar los riesgos que esto conlleva puede ser muy beneficioso.</p> </body> </html>
Este es nuestro archivo HTML, Al menos ac y para colocar esta clase de imgenes adentro de texto, el cdigo html que coloque es totalmente til para mover las imgenes a los lugares que queremos por medio de CSS, y organizar los textos como queremos. Aad una nueva propiedad que es class, esto nos permite identificar a un grupo de elementos (no tiene que ser imgenes, es valido para textos, links o cualquier otro elemento html) para darle formato en el css. Pueden probar la pagina web, teniendo en cuenta que para poder ver las imgenes, estas deben existir y debe ser colocadas en un directorio que este en la misma carpeta que nuestro ejemplo, y el directorio se llame Images. Las imgenes tienen que tener como nombre imagen-1.jpg, imagen-2.jpg e imagen-3.jpg. o pueden modificar el html con los nombres de imgenes que deseen. Lo que iremos haciendo ahora es colocar entre las etiquetas y distintos css y veremos como se va cambiando la pagina y comenzaremos a ver la potencia de los utilizar correctamente el CSS. Si no viste como se ve la pagina podes hacerlo ahora, si ya viste como queda la pagina agrega esto para ver como va cambiando:
<style> img{ border: 1px solid silver; } /* Esto es una hoja de estilos y no tiene la misma forma que el html y esto es un comentario en css border:1px solid silver; significa que le coloque un borde solido a todas las imagenes y silver es un color. Aca recien termina el comentario =*/ img.imagen1{ margin: 10px 20px 20px 10px; float: left; } /* margin coloca un margen a la imagen, el primer valor es el valor del margen superior img.imagen2{ margin: 20px 10px 20px 20px; float: right; } /* El float: right hace que la imagen se coloque entre el texto a la derecha*/ img.imagen3{ margin: 10px 20px 20px 10px; float: left; } /* El float: left hace que la imagen se coloque entre el texto a la izquierda*/ </style>
Podes ver el ejemplo y ver como se acomoda la pagina, el html es el mismo. Ahora si uno varia por ejemplo los float:right y float:left en el css puede colocar la imagen a la izquierda o a la derecha del texto o de otros objetos y todo sin modificar el html, esto es bsico pero da la idea de que con una misma estructura html puede mostrar la pagina de distintas maneras, ya que como veremos mas adelante los estilos de css se colocan en archivos diferentes al documento HTML, lo que permite tener los codigos centralizados en distintos archivos de forma que las modificaciones sean muchos mas fciles, es decir si uno tiene un css que se utiliza para 500 paginas, con cambiar por ejemplo el color del link en el mismo
css cambia automticamente en las 500 paginas sin tener que tocar nada mas y eso creanme ahorra muuuucho tiempo. Existen mas formas de insertar imgenes, por ejemplo en botoneras, pero eso es un poco mas complicado y lo veremos mas adelante, ya casi se podra decir que tienes los conocimientos bsicos de todos los elementos importantes de una pagina web, y si tenes la duda de esto porque las webs no se ven bien, en la prxima leccin veremos un par de elementos muy utiles para darle formas a las paginas y crearemos una pagina web ya con forma mas profesional y que sea mas bonita. Si te estas preguntando como?, es simple, haremos una mezcla de elementos y veremos como organizarlos, y veremos propiedades tiles de css que hagan falta. Te espero pronto y como siempre digo ante cualquier duda o si ven un error de mi parte, no dudar en postearlo!
Hola, en esta oportunidad saldare la deuda pendiente con este tutorial que ya lo deberia haber terminado hace tiempo pero justamente por falta de tiempo no he podido, Comencemos. Lo que veremos en este articulo del tutor es como armar estructuras de paginas web, para poder ordenar los elementos de manera que sea accesible y de mejor navegacion para los usuarios y les permitira hacer el diseo que necesiten. A la hora de comenzar a maquetar una web, hay que tener claro como funciona. Basicamente uno puede ver el maquetado de una pagina web como cajas adentro de cajas, o cuadrados dentro de cuadrados. No se puede ensear todas las combinaciones posibles de cuadrados dentro de cuadrados, por ello me limitare a un par de ejemplos y luego ustedes tendran que utilizar su creatividad para lograr mayor cantidad de variaciones!.
El elemento div
Un div es una simple caja contenedora, si uno coloca un div con contenido adentro practicamente no se veran cambios si no se realizan modificaciones por medio de css. En este caso veremos que pasa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Analisis matematco I: Programa de la materia</title> </head> <body> <div class="centrado"> <div class="header"> <h1>Analisis I - Analisis Matematico I - Matematica 1 - Analisis II (C)</h1> <p>Curso regular primer cuatrimestre ao 2009</p> </div> <div class="contenido"> <h2>Primer parcial</h2> <p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p> <h2>Segundo parcial</h2> <p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p> <h2>Primer Recuperatorio</h2> <p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I <h2>Segundo Recuperatorio</h2> <p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II </div> </div> </body> </html>
Esta es una de las paginas creadas en uno de los articulos anteriores, pruebela y vera que se ven iguales. La diferecia viene al colocar un CSS que modifique las propiedades. class=nombre nos permite colocarle propiedades css a distintos elementos HTML, de esta forma podemos diferenciarlos! ahora pruebe y analise este codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Analisis matematco I: Programa de la materia</title> <style> .centrado{ width: 700px; border: 1px solid silver; margin: 10px auto 10px auto; padding:0; } .header{ background: #ded4de; } h1{ text-align: center; margin-top: 0; paddingtop: 10px;} .header p{ text-align: center; } h2{ margin: 0; padding: 5px 0 0 0; } .contenido{ padding: 10px 15px 10px 30px; } .contenido p{margin: 0; padding: 5px 0 0 0;} </style> </head> <body> <div class="centrado"> <div class="header"> <h1>Analisis I - Analisis Matematico I - Matematica 1 - Analisis II (C)</h1> <p>Curso regular primer cuatrimestre ao 2009</p> </div> <div class="contenido"> <h2>Primer parcial</h2> <p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p> <h2>Segundo parcial</h2> <p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p> <h2>Primer Recuperatorio</h2> <p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I <h2>Segundo Recuperatorio</h2> <p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II </div> </div> </body> </html>
Pues bien, hemos utilizado los elementos DIV, en un primer lugar para contener toda la pagina y centrarla y ponerle un borde gris, en segundo lugar para contener el titulo y colocarle un fondo de otro color y en tercer lugar para ponerle un margen interno al contenido de la web (padding).
Bueno, creo que con este ejemplo ya se entiende cual es la utilidad del elemento div y por lo tanto se ve que sin este elemento no hay pagina web que pueda tener un diseo complejo sin el. Asi como es importante saber que el elemento div es muy util para el diseo de webs, tambien hay que saber que no se debe abusar de el, hay que usarlo cuando es necesario, y no hace falta colocarlo en todos lados. Es muy importante, principalmente a la hora del posicionamiento web, que se utilicen los elementos que se deben utilizar en cada caso, el orden de la web tiene que se claro, esto ayuda a que el codigo sea mucho mas legible, cuyo beneficio nos permite modificar la pagina de forma rapida en las actualizaciones y ademas en consecuencia los robots de los buscadores entenderan mas facilmente de que se trata la pagina web. Haremos un pequeo repaso de lo los elementos html mas importantes y sus funcionalidades asi nos queda claro y luego veremos como crear una paginas web mas o menos interesante y con un nivel de dificultad un poco mas elevado que los ejemplos que habiamos visto!.
ELEMENTOS MAS UTILIZADOS
EL ELEMENTO P Nos sirve para colocar texto en las paginas web, sin dudas es uno de os mas utilizados su sintaxis es sencilla: <p>aca colocamos el texto, recordemos que los saltos de lineas en el codigo HTML son ignorados</p> EL ELEMENTO H1, H2, H3, H4, H5, H6 Nos da la utilidad de ser las etiquetas para TITULOS, siempre que se escribe un titulo de algo si no estan utilizando alguna de estas etiquetas, deberian revisar su codigo. Por otro lado, mientras mas importante es el contenido del titulo, mas se debe acercar al h1 (por ejemplo el nombre de una pagina o blog) y cuanto menos importancia tenga el titulo (por ejemplo por ser un subtitulo dentro de un articulo) mas cerca del h6. EL ELEMENTO DIV Como vimos hace poco, es el elemento que nos permite ordenar distintas clases de elementos dentro de el y asi poder dividir partes de la pagina, logrando la distribucion de elementos de la forma que queremos por medio de CSS. EL ELEMENTO A (enlaces) Los enalces son fundamentales en las paginas web por permitirnos saltar de una pagina a otra y creo que no hace falta que diga mas nada. EL ELEMENTO IMG (IMAGENES) Hoy en dia una web que posee solo texto y colores simples de fondos es practicamente algo horrible y fuera de moda, por lo que las imagenes como elemento multimedia de la web es algo que hoy en dia es indispensable. el elemento img tiene la siguiente sintaxis: <img src=mi_imagen.jpg alt=Titulo de la imagen/>
LOS ELEMENTOS UL, OL, LI Es uno de los pocos elementos en html que nos permite crear vietas o listas ordenadas por numeros y de esta forma organizar informaciones como por ejemplo instrucciones o tips. Bueno estuve viendo que el articulo quedo muy extenso y falta mucho por explicar, por lo que decidi extender el tutor a 2 lecciones mas, una con propiedades sobre los divs y como organizar los elementos en las paginas webs y otro con varios ejemplos de estructuras web.
Bueno ya vimos en la leccion anterior un ejemplo de como los divs sirven para encapsular elementos en forma de cajas y tambien vimos un repaso de los elementos mas utilizados a la hora de crear una pagina web. Ahora lo que haremos sera incluir un ejemplo de una web con dos columnas a modo de ejemplo y luego veremos porque se forma en dos columnas, la explicacion a esto es uno de los temas que mas dolores de cabeza da al principio a quienes quieren maquetar sin tabla, la explicacion de como funcionan las propiedades float:right/left y clear:both;
Una introduccion basica al float
Como hemos visto en todos los ejemplos generalmente los elementos de html se colocan uno abajo del otro, es decir, si uno coloca una imagen y luego un texto en un documento HTML, el resultado que obtendra es una imagen y abajo de la misma el texto. Este efecto pasa con la mayoria de los elementos en HTML. La explicacion de porque sucede esto es que cada elemento viene con una configuracion predeterminada, y los elementos que se ubican uno debajo del otro tienen seteado por defecto la propiedad float como none. Esto hace que los elementos se comporten de esa manera, ahora la pregunta seria como hacer para que se compoten de otra forma? La propiedad float nos permite ubicar elementos a la derecha o izquierda en vez de colocarse siempre abajo del anterior, por ejemplo para ubicarlo a la derecha, se logra seteando con float: right desde el css al elemento. Y que se coloque a la izquiera es con float: left Aunque parezcan sencillas las cosas asi como se dicen a la hora de disear hay varios problemas que se presentan con este modelo, pero todo tiene solucion. La mejor forma de aprender es con experiencia diseando una y otra vez y cuando sale un problema arreglarselas de alguna forma para solucionarlo! Por ello veremos como hacer una web cuya forma sea de un encabezado con un menu como columna izquierda y algun contenido como columna derecha, aqui el codigo, como siempre
y esta vez mas que nunca, prueben agregar cosas, quitar propiedades a ver que sucede, agregar nuevas y experimentar:
<html> <head> <title>Pagina con dos columnas!</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fef} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #669A00; color: #1A1C1E;} #columna{ width: 200px; float: left; background: #eee} #contenido{ width: 580px; float: left; background: #CCCCCC; padding: 5px 10px 5px 10px;} #pie{clear: both;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Restaurant LA VAQUITA</h1> <h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3> </div> <div id="columna"> <ul> <li>Home</li> <li>Carta</li> <li>Quienes Somos</li> <li>Donde estamos y como llegar</li> <li>Contactenos</li> </ul> </div> <div id="contenido"> <h2>Quienes Somos</h2> <p>LA VAQUITA es un lugar especial en donde podes disfrutar de una de las costumbres mas ricas de la Argentina, una rica parrillada.</p> <p>Un ambiente confortable, comodo y orientado a estar en el campo o una estancia, pero ubicado en pleno corazon de Capital Federal.</p> <h2>Nuestra Parrilla Libre</h2> <ul> <li>Asado</li> <li>Vacio</li> <li>Pollo</li> <li>Bondiola</li> <li>Arrollado de pollo</li>
<li>Provoleta</li> <li>Pechito de cerdo</li> <li>Matambre a la pizza</li> <li>Chorizo</li> <li>Chinchulines</li> <li>Morcilla</li> <li>Rion</li> </ul> </div> <div id="pie"> <p>copyright 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p> </div> </div> </body> </html>
Nuevamente se aclara que en este ejemplo no se busca un diseo bello y atrativo, sino que solo las ubicaciones de los elementos, tambien aprovecho para avisar que en la proxima leccion crearemos esta pagina con todas su secciones completas y con un diseo un poco mas interesante que este. Pero antes que eso todavia faltan aprender otras cosillas.
Propiedades ID y CLASS
En el ejemplo anterior aparecieron dos elementos nuevos dentro de algunos tags (las propiedades id y class) como por ejemplo en
<div id="encabezado"> <h1>Restaurant LA VAQUITA</h1> <h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3> </div>
En el ejemplo de arriba lo que hace el identificador ID es proporcionarnos un metodo para instanciar un div en este caso el encabezado. Para que sirve exactamente? bueno sirve para poder aplicarles propiedades css al elemento que se especifica, tambien es util cuando se trabaja por ejemplo con javascript pero eso es algo que aqui no lo veremos. Como se instancia ese elemento desde el CSS? para instanciar el encabezado por ejemplo desde el CSS lo que hacemos el colocar # (numeral) + nombre del identificador, en nuestro ejemplo seria #encabezado{ aqui las propiedades del CSS que valen para el elemento con id = Encabezado } Un ejemplo practico:
<html> <head>
<title>Aprendiendo que es la propiedad ID</title> <style> #rojo{ color: red; } </style> <head> <body> <p>Este es un texto</p> <p id="rojo">este es un texto con ID = "rojo"</p> </body> </html>
Como veran, el parrafo que contiene el ID=rojo se pone de color rojo porque se lo indicamos desde el CSS. Tambien podemos aclarar que elemento es es decir no solo colocar el #rojo sino que se puede colocar p#rojo lo que identifica mejor el elemento y nos permite saber mirando el codigo css que ese elemento es para un parrafo. Los elementos ID deben ser unicos en la pagina, es decir, no puede haber dos elementos con el mismo ID en un mismo documento HTML. Si lo que deseamos es crear varios elementos que tengan un estilo de css en comun, el identificador necesariamente tiene que ser un CLASS, y la forma de instanciar un class desde CSS es con . (punto) + nombre del elemento, como en el siguiente ejemplo seria p.impar y p.par:
<html> <head> <title>Aprendiendo que es la propiedad CLASS</title> <style> p.impar{ background: #eeeeee; } p.par{ background: #dddddd; color: blue;} </style> <head> <body> <p class="impar">Este es nuestro parrafo numero 1 (impar)</p> <p class="par">Este es nuestro parrafo numero 2 (par)</p> <p class="impar">Este es nuestro parrafo numero 3(impar)</p> <p class="par">Este es nuestro parrafo numero 4(par)</p> </body> </html>
Basicamente esta es la mayor utilidad de estas dos propiedades MUY IMPORTANTES para el diseo de una pagina, ya que nos permite ponerles nombres a los elementos!. La utilizacion de estas propiedades funcionan para todos los elementos de html, es decir a todos los elementos les podemos colocar la propiedad ID o Class segun corresponda para poder instanciarlos, sean estos elementos divs, p, a, span, ul, li, etc
La propiedad Clear
Esta propiedad sirve para limpiar el display de los floats anteriores, es decir para ser mas claro uno por ejemplo puede tener el caso de una presentacion deproductos en columnas de
3, entonces lo que se puede hacer es colocar divisores con un ancho del 33% y asignarles a todos un float: left, como siempre mejor que explicar es que lo vean ustedes mismos y revisen el codigo:
<html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h2{text-align: center;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <div> <h2>Notebook Acer 5536</h2> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 515</h2> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook dell 1520</h2> <ul> <li>15 Pulgadas</li>
<li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook Toshiba L305</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Acer 5526</h2> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 815</h2> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Dell 1772</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Toshiba M375</h2> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div>
A no desesperar si no entienden algo, lo que hice fue decirle por medio de CSS que todos los elementos div que se encuentran adentro de el div con id contenedor tengan ciertas propiedades, es decir para instanciar todos los divs de adentro de un elemento especifico lo que se hace es: elemento#nombre elementos{} o elemento.nombre elementos{} en este caso: div#contenido div{} /*nos dice las propiedades que les ponemos a TODOS los divs contenidos en div#contenido */ Por otro lado a cada elemento se asigno un ancho de 252px y les digo que tengan un float: left, lo que los ubica uno al lado del otro con un margen ademas para que se separen. Y la linea contenido div h2{text-align: center;} nos dice que simplemente centremos los titulos de cada producto. Bueno ademas de todo esto que dije antes quizas las personas que son muy observadoras se dieron cuenta que pusimos que el fondo de contenido sea de color #F1F5F8 y en realidad se ve de color #cccccc, PUES ESTO ES UN ERROR CLASICO QUE BUSQUE QUE SUCEDA, al colocar elementos en float y no cerrarlos con un Clear: both, entonces el div contenedor no se comportara normalmente estirandose todo lo que necesitamos, por el contrario quedara asi como lo estas viendo. La solucion es bastante sencilla, Quizas hay mejores, yo siempre he utilizado que al elemento siguiente que existe le colocamos un clear: both y el problema esta resuelto. Si no hay elemento me invento un div de un pixel de ancho y le coloco el clear both, aunque hay otras soluciones yo siempre termine aplicando esta que no es la mas elegante de todas pero bueno. Aqui la pagina con el problema resuelto:
<html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;}
#contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h2{text-align: center;} #pie{clear: both; text-align: center; padding-top: 10px;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <div> <h2>Notebook Acer 5536</h2> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 515</h2> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook dell 1520</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook Toshiba L305</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div>
<div> <h2>Notebook Acer 5526</h2> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 815</h2> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Dell 1772</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Toshiba M375</h2> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> <div id="pie"> <p>copyright 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p> </div> </div> </body> </html>
Bueno ademas de para solucionar ese problema el clear both nos sirve para decirle que se termine algun float, es decir como habran visto el elemento se ubica a la izquierda siempre por lo que si uno quiere especificamente empezar de nuevo el listado no puede, otra vez un ejemplo:
<html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h3{text-align: center;} #contenido h2{ clear: both; margin-left: 15px; paddingtop: 15px;} #pie{clear: both; text-align: center; padding-top: 10px;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <h2>Notebooks Acer</h2> <div> <h3>Notebook Acer 5536</h3> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h3>Notebook Acer 5526</h3> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <h2>Notebooks Compac</h2> <div> <h3>Notebook Compac 515</h3>
<ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h3>Notebook Compac 815</h3> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Compac 585</h3> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Compac c415</h3> <ul> <li>14,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <h2>Notebooks Dell</h2> <div> <h3>Notebook dell 1520</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h3>Notebook Dell 1772</h3> <ul> <li>15 Pulgadas</li>
<h2>Notebooks Toshiba</h2> <div> <h3>Notebook Toshiba L305</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Toshiba M375</h3> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> <div id="pie"> <p>copyright 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p> </div> </div> </body> </html>
Firjarse que en este ejemplo organice las notebooks por marca, y parece que todo es normal pero si se fijan cada vez que dice Notebooks es un H2 , si van al css veran que los H2 de adentro del div contenido tienen la propiedad Clear: both;, este es el momento de decir, que pasa si lo saco?, pues yo les digo saquenlo y compruebenlo, de esta forma podran entender mejor para que sirve el Clear: both; Bueno, Creo que esta leccion se hizo algo larga, por lo que la dejamos aca y como recomendacion les propongo que armen distintas estructuras webs, con los que se les ocurra y vallan viendo como solucionar los problemas, basicamente esto se aprende por el famoso metodo prueba y error, porque no vale la pena aprenderse todas las variaciones posibles, sino que a medida que se aparecen ver como resolverlas y con el tiempo uno se termina acostumbrando.
Por otra parte las propiedades float y clear estan incluidas para TODOS los elementos HTML y funcionan de igual forma que en los divs
Lo primero que vamos a hacer es la pagina principal, y para comenzar vamos a crear la estructura de la pagina que en este caso sera esta:
Por lo que la estructura HTML por ejemplo podria ser asi ya con la informacion cargada:
<html> <head> <title>Ejemplo pagina web</title> </head> <body> <div id="cont"> <div id="encabezado"> <h1>Dacho Fotografias</h1> <h2>Portafolio Personal</h2> </div> <div id="contenido"> <h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2> <p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p> <p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos aos, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p> </div> <div id="menu"> <h3>Menu</h3> <ul> <li><a>Home</a></li> <li><a>Paisajes</a></li> <li><a>Animales</a></li> <li><a>Gente</a></li> <li><a>Contacto</a></li> </ul> </div> <div id="pie"> <h2>ULTIMAS <span>fotografias tomadas</span></h2> <div id="fotos"> <div id="foto1">Fotografia 1</div> <div id="foto2">Fotografia 2</div> <div id="foto3">Fotografia 3</div> <div id="foto4">Fotografia 4</div> <div id="foto5">Fotografia 5</div> <div id="foto6">Fotografia 6</div> </div> <p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div> </div>
</body> </html>
Bueno la pagina tiene esta estructura de HTML porque es la que se me ocurrio a mi, eso no quiere decir que sea la unica forma ni tampoco la mejor, simplemente es una buena estructura que me permitira obtener lo que se ve en la primera imagen, como siempre te invito a que la pruebes y la veas sin nada de CSS porque despues de eso empezaremos a darle el formato correspondiente!
Centrando la pagina y colocando un ancho fijo
Bueno lo siguiente para que valla quedando con forma es centrar la pagina web y darle un ancho. Como vern toda la pagina web esta rodeada con un div que posee el id=cont este div nos servira para:
1. Centrar la Pagina 2. Colocarle el Ancho fijo!
Bueno para centrar la pagina lo primero que tenemos que hacer es decirle a los exploradores que la pagina tiene un ancho fijo y que ademas ese ancho es mas chico que la pantalla. es decir en este caso el ancho fijo sera de 693 pixeles, y si te preguntas como centrar una pagina de por ejemplo 1200px de ancho para un monitor de 1024 pixeles de ancho? Pues la respuesta es obvia, pues la pagina es ams ancha que el monitor y lo que pasara es que se pondra el scoll horizontal en el navegador y centrar una pagina mas grande que la pantalla carece de sentido en el 99% de los casos. Bueno una vez que le decimos que la pagina tiene 693px de ancho le tenemos que decir que se centre, esto se logra con la propiedad margin de el elemento #cont. Y ademas para arreglar el problema de internet explorer 6 agregaremos al body un text-align: center para que lo centre y a el elementeo #cont un text-align: left para que los textos no queden todos centrados! En limpio el archivo quedaria:
<html> <head> <title>Ejemplo pagina web</title> <style type="text/css"> body{ text-align: center; } #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left; } </style> </head> <body>
<div id="cont"> <div id="encabezado"> <h1>Dacho Fotografias</h1> <h2>Portafolio Personal</h2> </div> <div id="contenido"> <h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2> <p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p> <p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos aos, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p> </div> <div id="menu"> <h3>Menu</h3> <ul> <li><a>Home</a></li> <li><a>Paisajes</a></li> <li><a>Animales</a></li> <li><a>Gente</a></li> <li><a>Contacto</a></li> </ul> </div> <div id="pie"> <h2>ULTIMAS <span>fotografias tomadas</span></h2> <div id="fotos"> <div id="foto1">Fotografia 1</div> <div id="foto2">Fotografia 2</div> <div id="foto3">Fotografia 3</div> <div id="foto4">Fotografia 4</div> <div id="foto5">Fotografia 5</div> <div id="foto6">Fotografia 6</div> </div> <p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div> </div> </body> </html>
A partir de este momento todos los cambios que haremos seran para lo que se encuentra entre en la pagina por lo que no volvere a incluir todo el html, sino que colocare el css correspondiente!
Seguimos dando el formato a la pagina ahora estructuraremos cada cosa en su lugar con la forma que vimos en la imagen de colores mas arriba: Esto se logra basicamente utilizando las siguientes propiedades:
y y y y y y
body{ text-align: center; } #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;} #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;} #contenido{ width: 500px; float: left; margin-bottom: 70px;} #menu{ width: 180px; float: left; text-transform: uppercase} #pie{ clear: both; height: 296px;}
Como se ve ahora la cosa empieza a toma forma como aclaraciones la propiedad texttransform: uppercase de css hace que el texto se vea todo en letra mayuscula.
Elijiendo colores, tipografias y tamaos de letras
El siguiente paso es elegir el todo lo nombrado en el subtitulo anterior, la tipografia elegida para toda la web es Tahoma, por lo que al elemento body (que es toda la pagina web) le asignamos esa tipografia por medio de font-family: Tahoma; y ya que esta elegimos otras tipografias en caso de que esa no este incluida en el sistema operativo del usuario por lo que quedaria font-family: Tahoma, Arial, Geneva, sans-serif; Tambien casi todo el texto de la web tendra el color #797979 por lo que asignaremos al body la propiedad color: #797979 Con respecto a los tamaos les asignaremos a cada elemento en particular el que corresponda, lo podran ver en el codigo (es la propiedad font-size), no pongo la lista porque es algo extensa y no tiene sentido porque nos tenemos que ir acostumbrando a leer el css, entonces el css con todos los cambios quedaria asi:
body{ text-align: center; font-family: Tahoma, Arial, Geneva, sansserif; color:#797979;} #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;} #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;} /*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/ #contenido{ width: 500px; float: left; margin-bottom: 70px;} #contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
#contenido h2 span{ color: #a7a7a7; } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/ #contenido p{font-size: 13px;} #menu{ width: 180px; float: left; text-transform: uppercase} #pie{ clear: both; height: 296px;} #pie h2{ font-size: 18px; color: #464545; font-weight: normal } #pie h2 span{ color: #a7a7a7; } #pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}
Bueno Ya tenemos armada la estructura basica de la pagina y ahora nos queda por hacer:
y y y y
Dar estilo al menu! Colocar imagenes en donde estan los divs de fotografias Reemplazar texto por imagenes en el encabezado colocar un background en el pie de pagina!
Debido a que la leccion se esta extendiendo demasiado vamos a darle formatos a los divs que contendran las imagenes y dejaremos todo lo otro para la siguiente leccion! Bueno la estructura que tiene las fotografias que estan en el pie de pagina es la siguiente
<div id="fotos"> <div id="foto1">Fotografia <div id="foto2">Fotografia <div id="foto3">Fotografia <div id="foto4">Fotografia <div id="foto5">Fotografia <div id="foto6">Fotografia </div> 1</div> 2</div> 3</div> 4</div> 5</div> 6</div>
Por lo que para que cada div se ponga uno al lado del otro le colocaremos la propiedad Float: left; y ademas como las imagenes tendran un tamao de 100px de ancho por 69px de alto, esos seran los valores del las propiedades width y height. Por otra parte estaran separados por un margen de 10px superior, 9px a la derecha, 15px inferior y 9px a la izquiera, por lo que la propiedad margin para cada elemento sera margin: 10px 9px 15px 9px; . Y ademas como queremos que se muestren 2 filas por 3 columnas el contenedor con id=fotos tendra un width que supere los 100*3 + 9*3*3 px esto es 100 de cada width asignado a cada elemento y 9 por cada margen izquierdo de cada y elemento y 9 por cada margen derecho de cada elemento. En total puede tener un ancho de 360px. Por lo que id=fotos quedaria con un width: 370px; Si te quedan dudas de todo esto comenta y lo aclaro mas! En fin de todo esto quedaria mas o menos asi el css:
body{ text-align: center; font-family: Tahoma, Arial, Geneva, sansserif; color:#797979;} #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
#encabezado{ height: 32px; margin-bottom: 40px; width: 693px;} /*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/ #contenido{ width: 500px; float: left; margin-bottom: 70px;} #contenido h2{ font-size: 18px; color: #464545; font-weight: normal } #contenido h2 span{ color: #a7a7a7; } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/ #contenido p{font-size: 13px;} #menu{ width: 180px; float: left; text-transform: uppercase} #fotos {width: 370px;} #fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver; } /*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/ #pie{ clear: both; height: 296px;} #pie h2{ font-size: 18px; color: #464545; font-weight: normal } #pie h2 span{ color: #a7a7a7; } #pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}
Bueno dejamos los otros tres puntos para la siguiente leccion en donde veremos como reemplazar texto con imagenes sin perder semantica web, mejorar el menu y los colores de los enlaces y por ultimo colocar fondos a los elementos que hagan falta. La web en este momento se deberia ver mas o menos de esta forma:
Bueno continuamos con la leccin de una linda pagina de ejemplo, en esta le daremos el estilo a los elementos que se encuentran dentro del div#menu, comencemos!
<h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2> <p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p> <p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos aos, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p> </div> <div id="menu"> <h3>Menu</h3> <ul> <li><a>Home</a></li> <li><a>Paisajes</a></li> <li><a>Animales</a></li> <li><a>Gente</a></li> <li><a>Contacto</a></li> </ul> </div> <div id="pie"> <h2>ULTIMAS <span>fotografias tomadas</span></h2> <div id="fotos"> <div id="foto1">Fotografia 1</div> <div id="foto2">Fotografia 2</div> <div id="foto3">Fotografia 3</div> <div id="foto4">Fotografia 4</div> <div id="foto5">Fotografia 5</div> <div id="foto6">Fotografia 6</div> </div> <p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div> </div> </body> </html>
Bueno ahora estamos en condiciones de continuar, la lista de cosas que nos quedan por hacer son:
1. 2. 3. 4. Dar estilo al menu! Reemplazar texto por imagenes en el encabezado Colocar imagenes en donde estan los divs de fotografias colocar un background en el pie de pagina!
Lo primero que debemos hacer es colocar enlaces dentro del menu, es decir el html no esta completo pues no tiene esos enlaces, los completaremos y como direccion momentanea les colocaremos un # que no hace practicamente nada pero nos permitira formatear el html de los enlaces con css de forma correcta. modificamos el codigo dentro del div#menu, y queda asi:
<div id="menu"> <h3>Menu</h3> <ul> <li><a <li><a <li><a <li><a <li><a </ul> </div>
Bueno la idea es que quede el menu tal como la imagen del principio, para lograr el efecto que deseo las caracteristicas de los li pertenecientes al menu seran las siguientes:
y y y y
Un borde izquierdo de color naranja (usaremos exactamente el color #e93700) con un ancho de 4px. Ademas con margenes externos (propiedad margin del css) de solo 6px en la parte superior y 0 a la derecha, izquierda y debajo. Margenes internos (Propiedad padding de css) de arriba y abajo 2px y de la izquierda 4px y de la derecha 0px Por ultimo le indicaremos que no coloque ninguna vieta con la propiedad list-style: none
Todo esto seria lo que le colocamos a los elementos li que se encuentran encapsulados en un elemento ul dentro del div #menu, por lo que el codigo css a agregar seria:
div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
Ademas nos faltaria arreglar el margen del ul que contiene a los li con los enlaces adentro, le colocaremos 0 de margen y 80px de padding izquierdo por motivos de diseo!
#menu ul{ margin:0; padding-left:80px; }
Por otra parte nos queda la tarea de insertarle tamao y color a los textos de los enlaces, lo que haremos sera colocarles un tamao de letra de 12px, color #464545 (es una tonalidad de gris) y le quitamos el subrayado con text-decoration: none; y ademas utilizando la instancia :hover que nos provee el css para algunos elementos (lo explico mejor mas adelante) le cambiamos el color de cuando pasa el mouse por encima a #e93700
#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
Por ultimo para terminar la parte del menu, falta estilizar el h3 que contiene la palabra menu!, lo haremos con un padding izquierdo de 80px (para que quede igual de parejo que el ul), con un tamao de texto de 18px, con el color #e93700 (el color naranja del menu cuando le pasamos el mouse por encima) y utilizaremos font-weight: normal; para que no se tome como negrita, porque esa tipografia no queda muy linda en ese tamao con letra en negrita. Quedaria
#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; paddingleft: 80px;}
Bueno ya tenemos nuestro punto 1 terminado!, un menu de navegacion con el estilo que necesitabamos!, continuemos que todavia falta!, el codigo completo de lo que va de la pagina es:
<html> <head> <title>Ejemplo pagina web</title> <style type="text/css"> body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;} #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;} #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;} /*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/ #contenido{ width: 500px; float: left; margin-bottom: 70px;} #contenido h2{ font-size: 18px; color: #464545; fontweight: normal } #contenido h2 span{ color: #a7a7a7; } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/ #contenido p{font-size: 13px;}
#menu{ width: 180px; float: left; text-transform: uppercase} #fotos {width: 370px;} #fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver; } /*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/ #pie{ clear: both; height: 296px;} #pie h2{ font-size: 18px; color: #464545; font-weight: normal } #pie h2 span{ color: #a7a7a7; } #pie p{ text-align: center; font-size: 13px; paddingtop: 10px; clear: both;} div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; } #menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;} #menu ul li a:hover{ color: #e93700 } #menu ul{ margin:0; padding-left:80px; } #menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;} </style> </head> <body> <div id="cont"> <div id="encabezado"> <h1>Dacho Fotografias</h1> <h2>Portafolio Personal</h2> </div> <div id="contenido"> <h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2> <p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p> <p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos aos, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p> </div> <div id="menu"> <h3>Menu</h3> <ul> <li><a href="#">Home</a></li> <li><a href="#">Paisajes</a></li>
<li><a href="#">Animales</a></li> <li><a href="#">Gente</a></li> <li><a href="#">Contacto</a></li> </ul> </div> <div id="pie"> <h2>ULTIMAS <span>fotografias tomadas</span></h2> <div id="fotos"> <div id="foto1">Fotografia 1</div> <div id="foto2">Fotografia 2</div> <div id="foto3">Fotografia 3</div> <div id="foto4">Fotografia 4</div> <div id="foto5">Fotografia 5</div> <div id="foto6">Fotografia 6</div> </div> <p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div> </div> </body> </html>
En la siguiente leccion aprenderemos a realizar reemplazos de textos por imagenes y colocaremos el fondo de la pagina!
Bueno esta si es la ultima leccion de nuestro tutorial basico de HTML y CSS, si bien la continuare, lo que haremos sera agragar algunos detalles a la pagina en la proxima leccion, pero ahora continuamos creando nuestra pagina de ejemplo! La habamos dejado de esta forma:
<html> <head> <title>Ejemplo pagina web</title> <style type="text/css"> body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;} #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;} #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;} /*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/ #contenido{ width: 500px; float: left; margin-bottom: 70px;} #contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
#contenido h2 span{ color: #a7a7a7; } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/ #contenido p{font-size: 13px;} #menu{ width: 180px; float: left; text-transform: uppercase} #fotos {width: 370px;} #fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver; } /*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/ #pie{ clear: both; height: 296px;} #pie h2{ font-size: 18px; color: #464545; font-weight: normal } #pie h2 span{ color: #a7a7a7; } #pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;} div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; } #menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;} #menu ul li a:hover{ color: #e93700 } #menu ul{ margin:0; padding-left:80px; } #menu h3 {color: #e93700; font-size: 18px; font-weight: normal; paddingleft: 80px;} </style> </head> <body> <div id="cont"> <div id="encabezado"> <h1>Dacho Fotografias</h1> <h2>Portafolio Personal</h2> </div> <div id="contenido"> <h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2> <p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p> <p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos aos, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p> </div> <div id="menu"> <h3>Menu</h3> <ul> <li><a href="#">Home</a></li>
<div id="pie"> <h2>ULTIMAS <span>fotografias tomadas</span></h2> <div id="fotos"> <div id="foto1">Fotografia 1</div> <div id="foto2">Fotografia 2</div> <div id="foto3">Fotografia 3</div> <div id="foto4">Fotografia 4</div> <div id="foto5">Fotografia 5</div> <div id="foto6">Fotografia 6</div> </div> <p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div> </div> </body> </html>
Para poder continuar es necesario que te descargues las imagenes de la web: Descargar Para que todo funcione correctamente es necesario que coloques la carpeta Images (que esta comprimida) en la misma ubicacion que esta el archivo html en el que estamos trabajando. Una vez dicho todo esto comencemos!
Poner imagen en el titulo de la pagina
Lo que vamos a hacer es un remplazo de texto por imagen (Image Replacement), para poder colocar el logo de nuestra pagina de ejemplo, Si observamos el html vemos que el logo se debe colocar en donde se encuentra el div con id encabezado. Lo que haremos sera:
1. Colocar una imagen de background y esta imagen no so tiene que repetir 2. Una vez colocada esta imagen correctamente tenemos que ocultar el texto del div Colocando la imagen de fondo en el encabezado
Para colocar la imagen de fondo trabajaremos sobre el css en el elemento #encabezado y utilizaremos la propiedad background de CSS, el formato es el siguiente: background: url(Images/titulo.jpg) no-repeat; Le estamos diciendo al CSS que coloque de fonfo la imagen titulo.jpg que se encuentra en la carpeta /Images y no-repeat le dice que la coloque solo una vez! (Que pasa si no colocamos no-repeat? prueben y veran!) El codigo quedaria asi:
#encabezado{ height: 32px; margin-bottom: 40px; width: 693px; background: url(Images/titulo.jpg) no-repeat;}
Bueno ahora si recargamos la pagina con la modificacion anterior veremos que la imagen se coloca de fondo pero tiene el texto encima, entonces debemos quitarselo. Esto se logra colocando las siguientes propiedades de CSS:
y y y
Overflow: hidden; Esto le dira al css que si algo sobrepasa el tamao del div entonces no agrande el div, sino que es contenido quede oculto text-indent: -9999%; Esto le dice que corra todo el texto de ese div -9999% el tamao del div a la izquierda lo que lo obliga a salirse del div y de esta forma no se ve! display: block; Esto hace que el elemento en cuestion se convierta a un elemento en bloque, en este caso no es necesario, pero si lo hacemos en por ejemplo un enlace entonces si lo es.
Colocando todo esto nos quedaria asi la configuracion de CSS para el elemento div con id encabezado:
#encabezado{ height: 32px; margin-bottom: 40px; width: 693px; background: url(Images/titulo.jpg) no-repeat; overflow: hidden; text-indent: -9999%; display: block;}
Una vez Hecho el cambio en el css pueden verificar que el texto desaparecio (Prueben seleccionarlo si no me creen) y que la imagen titulo.jpg esta de fondo en el encabezado. Si quieren saber un poco mas de image-replacement pueden ver en este enlace: reemplazo de texto por imagenes
Colocando camara de fondo en la parte derecha inferior de la web
Colocaremos la imagen camara.jpg de fonde en la parte inferior derecha de la pagina, esto lo podemos hacer colcandola en por ejemplo el div con id pie, lo hacemos por medio de css y con la propiedad background, y background-position nuevamente, solo que no necesitamos correr el texto, porque sino desaparece todo lo que colocamos en el div con id pie. El codigo que debemos agregar al ya existente seria: background: url(Images/camara.jpg) no-repeat; background-position: bottom right; background ya vimos que hace unos parrafos mas arriba, pero background-position no lo habiamos visto antes, esta propiedad nos sirve para indicarle al css que a la imagen de fondo la ubique abajo (bottom) a la derecha (right), mas adelante veremos mas especificamente como usar background-position, pero por el momento nos alcanza con saber esto (si no lo colocamos, la configuracion por defecto es que aparezca arriba a la izquierda, todo lo contrario a lo que necesitamos). En fin el codigo del div con id pie seria el siguiente:
#pie{ clear: both; height: 296px; background: url(Images/camara.jpg) norepeat; background-position: bottom right;}
Por ultimo nos queda colocar todas las imagenes (las 6 en realidad) que deben aparecer en los lugares que ahora estan en gris:
Colocando las imagenes en los lugares grises
Bueno para facilitar que imagen va en que lugar he llamado a las imagenes de una forma que no se pueden confundir, esto es fotoX_n y fotoX_c, resalto la X porque es una variable que va de 1 a 6, es un criterio para seguir en los nombres de las fotografias y el _n o _c nos indica si la fotografia esta en negro o si es color. Una vez interpretado esto vemos la estructura html de esos 6 elementos grises que es esta:
<div id="fotos"> <div id="foto1">Fotografia <div id="foto2">Fotografia <div id="foto3">Fotografia <div id="foto4">Fotografia <div id="foto5">Fotografia <div id="foto6">Fotografia </div> 1</div> 2</div> 3</div> 4</div> 5</div> 6</div>
Una vez repasado cual es el codigo ahora lo que haremos sera nuevamente reemplazar texto por imagenes!, como lo hacemos? sobre cada div con id fotoX (con como x una variable) ponemos la siguientes propiedades de CSS: div#fotoX{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/fotoX_n) no-repat; } Es decir que tendremos que agregar todos este codigo 6 veces cambiando X por el numero que corresponda, quedaria asi:
div#foto1{ overflow: hidden; display: block; text-indent: background: url(Images/foto1_n.jpg) no-repeat; } div#foto2{ overflow: hidden; display: block; text-indent: background: url(Images/foto2_n.jpg) no-repeat; } div#foto3{ overflow: hidden; display: block; text-indent: background: url(Images/foto3_n.jpg) no-repeat; } div#foto4{ overflow: hidden; display: block; text-indent: background: url(Images/foto4_n.jpg) no-repeat; } div#foto5{ overflow: hidden; display: block; text-indent: background: url(Images/foto5_n.jpg) no-repeat; } div#foto6{ overflow: hidden; display: block; text-indent: background: url(Images/foto6_n.jpg) no-repeat; } -999%; -999%; -999%; -999%; -999%; -999%;
Bueno pueden ver que colocando este codigo la pagina queda igual o muy parecida a la de la imagen al principio de la leccion para crear una pagina web, algunos ajustes se pueden hacer para que quede mejor!. El codigo final de nuestro ejemplo es:
<html> <head> <title>Ejemplo pagina web</title> <style type="text/css"> body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;} #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;} #encabezado{ height: 32px; margin-bottom: 40px; width: 693px; background: url(Images/titulo.jpg) no-repeat; overflow: hidden; text-indent: -9999%; display: block;} #contenido{ width: 500px; float: left; margin-bottom: 70px;} #contenido h2{ font-size: 18px; color: #464545; font-weight: normal } #contenido h2 span{ color: #a7a7a7; } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/ #contenido p{font-size: 13px;} #menu{ width: 180px; float: left; text-transform: uppercase} #fotos {width: 370px;} #fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; } div#foto1{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto1_n.jpg) no-repeat; } div#foto2{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto2_n.jpg) no-repeat; } div#foto3{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto3_n.jpg) no-repeat; } div#foto4{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto4_n.jpg) no-repeat; } div#foto5{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto5_n.jpg) no-repeat; } div#foto6{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto6_n.jpg) no-repeat; } /*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/ #pie{ clear: both; height: 296px; background: url(Images/camara.jpg) norepeat; background-position: bottom right;} #pie h2{ font-size: 18px; color: #464545; font-weight: normal } #pie h2 span{ color: #a7a7a7; } #pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;} div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; } #menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;} #menu ul li a:hover{ color: #e93700 }
#menu ul{ margin:0; padding-left:80px; } #menu h3 {color: #e93700; font-size: 18px; font-weight: normal; paddingleft: 80px;} </style> </head> <body> <div id="cont"> <div id="encabezado"> <h1>Dacho Fotografias</h1> <h2>Portafolio Personal</h2> </div> <div id="contenido"> <h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2> <p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p> <p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos aos, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p> </div> <div id="menu"> <h3>Menu</h3> <ul> <li><a href="#">Home</a></li> <li><a href="#">Paisajes</a></li> <li><a href="#">Animales</a></li> <li><a href="#">Gente</a></li> <li><a href="#">Contacto</a></li> </ul> </div> <div id="pie"> <h2>ULTIMAS <span>fotografias tomadas</span></h2> <div id="fotos"> <div id="foto1">Fotografia 1</div> <div id="foto2">Fotografia 2</div> <div id="foto3">Fotografia 3</div> <div id="foto4">Fotografia 4</div> <div id="foto5">Fotografia 5</div> <div id="foto6">Fotografia 6</div> </div> <p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div>
Ademas vamos a agregar una cosita para que quede mas linda, esto es vamos a hacer por medio de CSS que la imagen de las fotografias se pongan en color cuando le pasamos el mouse por encima Y haremos que el menu cambie de color cuando le pasamos el mouse por encima, pero eso en la proxima leccion! Hasta aqui llego el tutor basico de HTML y CSS, comenzaremos con cosas mas avanzadas en la proxima entrega, donde utilizaremos los eventos de css, combinados con cambio de texto por imagenes para lograr menues con efectos, y veremos como maquetar otras estructuras, nos meteremos mas de fonde en como funcionan y que parametros tiene cada propiedad de HTML y de CSS En fin todavia queda mucho por aprender, pero estoy seguro de algo. Con todos los elementos que adquiriste durante el tutor basico ya estas en condiciones de seguir solo, googleando como hacer tal cosa o tal otra, o posteando en este blog para que te explique dudas o cosas que por ahi necesitas para crear tus webs!
En fin Disear webs se aprende solo con mucha practica, asi que A PRACTICAR!!!!!