Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Objetivos Reconocer la etiqueta <div> e identificar su utilidad Conocer y comprender el funcionamiento y la importancia de los Estilos CSS en el diseo de pginas web.
1. LA ETIQUETA <div>
Esta etiqueta forma una caja, un rectngulo, igual que el prrafo. Esta etiqueta es denominada de muchas formas: divisiones, capas, cajas, contenedores En un div podemos colocar lo que queramos, siempre que respetemos la anidacin. Esta etiqueta nos resultara muy til para distribuir los elementos en nuestras pginas. Ejercicio 1 Si queremos colocar la imagen de la pgina de ejercicio en la parte derecha, crearemos una capa con el estilo "flotar a la derecha" y pondremos la imagen dentro. Transcribe el siguiente cdigo al Bloc de notas y observa el resultado:
2. ESTILOS CSS
Hasta ahora has aprendido a utilizar los elementos bsicos de HTML para escribir texto, imgenes y enlaces, pero los resultados han sido muy pobres desde el punto de vista esttico. A continuacin vers cmo mejorar el aspecto de una pgina formateando el texto, con bordes, mrgenes y fondos. Vers un concepto muy importante y potente: el estilo CSS. El aspecto de la pgina se controla con los estilos CSS. Por ejemplo, aadiendo estilos CSS a la pgina del ejercicio anterior se obtiene este resultado:
Ejercicio 2 Para observar la pgina tal como se muestra en la imagen, modifica el cdigo html de la pgina como se muestra a continuacin:
<html> <head> <title> ITSI. Instituto Tcnico Superior Industrial </title> <style type="text/css"> body { font-family: Verdana,Arial,sans-serif; font-size: 15px; color: #111111; text-align: justify; background-color: #063306;} h1 { margin-left: 80px; margin-top: 20px; font-size: 180%; color: #338433;} h2, h3 { font-family: Georgia,Times,serif; font-size: 150%; color: #a52a2a; margin-top: 0; margin-left: 30px;} h3 { color: #916908;} p { margin: 35px; line-height: 1.5em; text-indent: 15px;} img { border: 2px solid #005b00; margin: 10px; float: right;} div.cuerpo { margin: 0 20px 20px; background-color: #f3f3f3;} .azul { font-weight: bold; color: #3333ff;} </style> </head> <body> <div class="cuerpo"> <h1>Bienvenido al ITSI</h1> <div class="img"><img src="file://g:/web/entrada.jpg" width="323" height="242" alt="No se encuentra la imagen" title="Entrada al ITSI" /></div> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre nuestra institucin y una coleccin de fotografas de las instalaciones </p> <p>Visita el portal educativo ms importante de Colombia: <a href="http://www.colombiaaprende.edu.co" target="_blank">Colombia Aprende</a></p> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. Te esperamos.</p> </div> </body> </html>
Si queremos que un estilo afecte a todos los elementos de la pgina, debemos definir un estilo para la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genricos de color y tamao del tipo de letra. En nuestro ejemplo hemos definido el estilo del body as: body { font-family: Verdana,Arial,sansserif; font-size: 15px; color: #111111; text-align: justify; background-color: #063306;} Que quiere decir que, el tipo de letra o fuente, ser Verdana, (o Arial si no existe Verdana, o sans-serif si no existen las anteriores); el tamao ser 15 pixeles, el color ser el definido por el valor #111111, la alienacin del texto ser justificada y el color de fondo de la pgina ser el #063306. A continuacin vamos a definir el estilo de la etiqueta H1, de la siguiente forma: h1 { margin-left: 80px; margin-top: 20px; font-size: 180%; color: #338433;} Que quiere decir que todas las cabeceras h1 tendrn un margen izquierdo de 80 pixeles (si no se pone la unidad, se toman pixeles), un margen superior de 20 pixeles, un tamao de letra de 180% y el color #338433, como puedes comprobar en la imagen del principio de este punto, la cabecera "Bienvenido al ITSI" queda as:
Es decir, el color y tamao de este estilo han prevalecido sobre los ya definidos en la etiqueta Body. Siguiendo con nuestro ejemplo, a continuacin definimos un mismo estilo para las cabeceras h2 y h3, pero como queremos que la cabecera h3 tenga un color diferente, volvemos a definir otro estilo a continuacin para h3 con el valor del color deseado. Es decir, el valor vlido es el ltimo valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). A continuacin definimos el estilo de los prrafos (etiqueta p) con un line-height (interlineado) de 1.5em (2 veces el tamao de la fuente actual), una tabulacin de 15 pixeles y un margen de 35 pixeles. Con lo definido hasta ahora el texto que escribamos en los prrafos tomar las propiedades definidas en los estilos de la etiqueta Body y de la etiqueta p, pero Cmo podemos cambiar el color de una palabra concreta dentro de un prrafo? Para hacer esto tenemos que definir un nuevo tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un nombre elegido por nosotros, por ejemplo: .azul {font-weight: bold; color: #3333ff;} As hemos definido un estilo para la clase azul con tipo de fuente negrita (bold) y color #3333ff. Una vez definida la clase, para aplicrsela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejemplo, para asignarle la clase azul a la palabra informacin (que esta dentro de un prrafo), escribiramos: <p> En esta web encontrars <span class="azul">informacin </span>sobre nuestra institucin y una coleccin de fotografas de las instalaciones.</p> Lo cual, hara que el prrafo se viese as: En esta web encontrars informacin sobre nuestra institucin y una coleccin de fotografas de las instalaciones Puedes observar que la clase azul ha "aadido" las propiedades color azul y negrita a la palabra informacin, manteniendo las otras propiedades que ya tena por pertenecer a un prrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya se tienen.
c. Tres nmeros entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);. d. Un nombre. Algunos colores se pueden expresar con su nombre en ingls. Por ejemplo color: green; o color: DarkGreen;. Como todo esto es un poco lioso, hay herramientas que facilitan el trabajo con los colores, por ejemplo, ColorPic es un pequeo programa gratuito que puedes descargarte en esta direccin: http://www.iconico.com/colorpic/. Si todava no lo has hecho, es conveniente que veas el tema bsico sobre colores en el archivo colores en la web.pdf suministrado por el profesor. Fuente Podemos elegir la fuente (o tipo de letra) a travs del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o fontfamily: "Times New Roman";. Pero hemos de tener en cuenta que puede que quien vea la pgina no tenga instalada la fuente que queramos. Para evitar esto, existen cinco fuentes genricas que s se mostrarn en cualquier equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no quiere decir que slo debamos de utilizar estas cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El navegador elegir, comenzando por la derecha, la primera disponible, por lo que es conveniente terminar por una genrica. Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;. Tamao El tamao se regula a travs de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamao, pero lo ms frecuente es utilizar px (pixeles), o porcentajes % o em, estas dos ltimas son tamaos relativos al tamao de la fuente del elemento que est por encima. 100% o 1em, sera el mismo tamao, mientras que 200% o 2em sera el doble y 50% o 0.5em sera la mitad. Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamao todo el texto de la pgina de forma ms coherente. As los discapacitados visuales podrn utilizar el comando para cambiar el tamao de texto que tienen los navegadores. Inclinacin Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de los siguientes valores: normal. Coloca el estilo de forma normal, sin inclinacin. oblique. Inclina el texto. italic. Adems de inclinarlo, susituye la fuente por su versin en itlica si est disponible. Aunque la mayora de los navegadores no lo hacen. Grosor Podemos aumentar el grosor de la fuente, lo que equivaldra a ponerla en negrita, utilizando font-weight. Puede tomar los siguientes valores: normal. El texto no se muestra en negrita. bold. El texto se muestra en negrita. Nota. En teora se pueden expresar distintas intensidades de negrita, pero los navegadores no las muestran. Decoracin Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo, los distintos tipos de subrayado, con los siguientes valores: none, el texto se muestra sin ningn tipo de decoracin. underline, el texto aparece subrayado. overline, el texto aparece sobrerrayado. line-through, el texto aparece tachado. blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox si). Maysculas y minsculas Aunque escribamos el texto en maysculas o minsculas, luego podemos cambiarlo a travs del estilo. Por ejemplo utilizando text-transform podemos transformar el texto de ejemplo "Es un texto de EJEMPLO" de las siguientes maneras: uppercase, para transformarlo todo a maysculas. "ES UN TEXTO DE EJEMPLO". lowercase, para transformarlo todo a minsculas. "es un texto de ejemplo". capitalize, para poner la primera letra de cada palabra en maysculas. "Es Un Texto De EJEMPLO". none, para no realizar ninguna transformacin. Existe otra propiedad que juega con la maysculas, font-variant. Esta propiedad puede hacer que las minsculas se muestren como maysculas de menor tamao. Vamos a utilizar "Este texto de Ejemplo". small-caps, realiza la conversin de las minsculas. "ESTE TEXTO DE EJEMPLO". normal, no realiza la conversin.
Ejercicio 3: A continuacin, desarrolle en Bloc de Notas el siguiente cdigo y observe cuidadosamente los resultados:
<html> <head> <title>Estilo del Texto</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1 style="font-size:100%">Éste es un h1 del mismo tamaño que un párrafo normal.</h1> <p>Éste es un párrafo normal.</p> <p style="color:red">Éste párrafo es de color rojo, con algunas palabras en <span style="color:blue">azul</span>.</p> <p>Podemos cambiar la fuente: <span style="font-family:serif;">y poner este texto en serif</span>, <span style="font-family:sans-serif;">esta parte en sans-serif</span>, <span style="fontfamily:cursive;"> la familia de esta palabra es cursive</span>, <span style="font-family:fantasy;">también tenemos fantasy</span>, <span style="font-family:monospace;">y acabamos con monospace</span>. </p> <p style="font-weight:bold; text-decoration:underline">Este párrafo (<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>) está en negrita y subrayado. <span style="text-decoration:overline">Este fragmento, además sobrerrayado</span>.</p> <p style="text-transform:lowercase;"><span style="font-size:85%;">ÉSTE,</span> ESTÁ <span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN MAYÚSCULAS</span>, <span style="font-size:130%;">Y ADEMÁS VA</span><span style="font-size:140%;"> CRECIENDO.</span></p> </body> </html>
href indica la ubicacin de la hoja de estilo, tal como lo pondramos en un enlace. rel se refiere a la relacin del archivo con nuestra pgina. Al poner stylesheet le indicamos que se trata de una hoja
de estilo. Por ejemplo, podramos poner alternate stylesheet lo que indicara que se trata de una hoja de estilo alternativa. Algunos navegadores como Firefox, nos permiten elegir entre la hoja normal o la alternativa a travs del men Ver Estilo de pgina. Ejercicio 4 (paso a paso)
1. 2. 3. 4. 5. Haz una copia en el escritorio del archivo estilo_texto.htm, que se encuentra en la carpeta d:\web Abre el archivo copiado en el escritorio con el bloc de notas. Para declarar los estilos en la propia pgina, aade, dentro del head, pero despus de </title>, la etiqueta <style type="text/css"> </style>. Todo lo referente a los estilos ir en estas etiquetas. Comenzamos por lo ms genrico. Declara el selector body{}. Ahora, le asgnale una fuente sin serifa (font-family: Arial, Sans-Serif;) y establece los colores de texto (color: #880000;) y fondo (background-color: #F7F0E2;) de la pgina.
6. 7.
8.
9.
Cmbiale el color de fondo (background-color: #EFD1D1;), dale un poco de margen a la izquierda (padding-left: 1em;), y transforma el texto a maysculas pequeas (font-variant: small-caps;).
11. Separa un poco los prrafos entre s, y un poco ms con los laterales de la pgina ( margin: 1.5em 3em). Para que el lateral derecho no quede dentado, justifica el texto (text-align: justify;). Por ltimo, aumenta el alto de la lnea (line-height: 1.5em;).
Ejercicio Propuesto Copia al escritorio la pgina nuestra_institucion.html, que se encuentra en la carpeta web; utilizando el bloc de notas, modifcala aplicndole los estilos necesarios para que se vea as:
Compromiso: Consultar los estilos CSS para definir bordes y mrgenes (internos y externos). Explique con un ejemplo. Aplique estilos CSS a su hoja de vida y envela nuevamente va e-mail a jecksonloza@gmail.com