Diseño Web - Taller 3

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL AREA: TEMA: Tecnologa e Informtica Grado 11 Diseo Web Divisiones y Estilos CSS
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:
Capa para cuerpo Capa para imagen
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>
3. Cmo funcionan los estilos CSS?

La forma en que se ven todos los elementos de nuestra pgina web depende del estilo. El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el tamao, la alineacin, los mrgenes, etc... Los valores dependen de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo), blue (azul), ... y a la propiedad tamao fuente le podemos asignar un valor en porcentaje 100%, 120%, ... o en pixels 12px, 15px, .... El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede tener varios valores. Por ejemplo, si queremos que el texto sea de color rojo y un tamao de fuente de 120%, escribiramos el siguiente estilo:
color:red; font-size:120%
y obtendramos el siguiente resultado:
Texto rojo a 120%

Dnde escribimos el estilo? Lo ms recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un bloque dentro de la etiqueta Head que contenga la definicin de estilos. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style> y definir dentro los estilos correspondientes a cada elemento de nuestra pgina.
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.
4. Formato del Texto

Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en ms detalle viendo las posibilidades que ofrecen. Empezaremos con el formato del texto y las propiedades que se le pueden aplicar: color, fuente, tamao, inclinacin, grosor, decoracin y maysculas/minsculas. Color El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas: a. Un nmero hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;. b. Tres nmeros entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.
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>
5. Dnde declarar un Estilo

En casos muy puntuales y concretos, declararemos el estilo incrustado al elemento o en lnea, utilizando el atributo style. Por ejemplo, en un determinado prrafo al que queremos aumentar un poco el margen porque queda mejor.. Si slo tenemos una pgina, podemos definir los estilos dentro del <head>. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style>. En esta etiqueta, definiremos los estilos con el selector y su bloque de declaracin. Pero lo ms habitual es tener varias pginas. En este caso resulta muy til tener los estilos definidos en una hoja independiente, una hoja de estilos. Una hoja de estilos no es ms que un archivo de texto, pero con la extensin .css, donde aparecen definidos los estilos que utilizarn las pginas. Para que funcione, debemos de enlazar con la hoja de estilo, para lo que utilizaremos la siguiente etiqueta en el <head> de nuestras pginas:
<link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" />
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.
body { font-family: Arial, Sans-Serif; background-color: #F7F0E2; color: #880000; }

Declara el selector del ttulo (h1 {}). Cntralo (text-align: center;) y subryalo (text-decoration: underline;).
6. 7.
h1 { text-align: center; text-decoration: underline; }

Declara el selector para el encabezado 2 (h2 { }).
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;).
h2 { background-color: #EFD1D1; padding-left: 1em; font-variant: small-caps;

10. Declara el selector para los prrafos (p { }).
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;).
p { margin: 1.5em 3em; text-align: justify; line-height: 1.5em; }

12. Hay fragmentos de texto con un estilo especial. Utilizaremos un span, as que declara el selector span { }. 13. Al span, dale un fondo blanco (background-color: white;) y un color gris (color: #666666;). Adems, cambia la fuente a monospace (font-family: monospace;) y aumntale un poco el tamao (font-size: 110%;).
span { font-family: monospace; font-size: 110%; color: #666666; background-color: white; }

14. Para acabar, encierra los fragmentos de texto a los que hay que aplicar el ltimo estilo entre etiquetas <span></span>.
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

Diseño Web - Taller 3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web - Taller 3

Cargado por

Copyright:

Formatos disponibles

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL AREA: TEMA: Tecnologa e Informtica Grado 11 Diseo Web Divisiones y Estilos CSS

Capa para cuerpo Capa para imagen

3. Cmo funcionan los estilos CSS?

y obtendramos el siguiente resultado:

Texto rojo a 120%

4. Formato del Texto

5. Dnde declarar un Estilo

body { font-family: Arial, Sans-Serif; background-color: #F7F0E2; color: #880000; }

h1 { text-align: center; text-decoration: underline; }

h2 { background-color: #EFD1D1; padding-left: 1em; font-variant: small-caps;

p { margin: 1.5em 3em; text-align: justify; line-height: 1.5em; }

span { font-family: monospace; font-size: 110%; color: #666666; background-color: white; }

También podría gustarte