lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML
|
|
|
- Margarita Pereyra Hidalgo
- hace 8 años
- Vistas:
Transcripción
1 : Introducción En la primera parte del curso (XHTML) se comentó en numerosas ocasiones que el aspecto de la página podía modificarse mediante las hojas de estilo. Qué es el? es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML. es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc. Funcionamiento básico del Antes de la adopción de, los diseñadores de páginas web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ejemplo de estilos sin </title> </head> <body> <h1><font color="red" face="arial" size="5">titular de la página</font></h1> <p><font color="gray" face="verdana" size="2">un párrafo.</font></p> </body> </html> 1
2 El ejemplo anterior utiliza la etiqueta con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento. Si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se compone de páginas diferentes, habría que definir etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos. Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio web. La solución que propone es mucho mejor, como se puede ver en el siguiente ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ejemplo de estilos con </title> <style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; p { color: gray; font-family: Verdana; font-size: medium; </style> </head> <body> <h1>titular de la página</h1> <p>un párrafo de texto no muy largo.</p> </body> </html> permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página. 2
3 Cómo incluir en un documento XHTML Una de las principales características de es su flexibilidad. Existen 3 opciones para referenciar una hoja de estilos a un fichero HTML. INCLUIR EN EL MISMO FICHERO HTML Los estilos se definen en una zona específica del propio documento HTML (dentro de la sección <head>). Se emplea la etiqueta <style> de HTML. Sirva el siguiente ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>ejemplo de estilos en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; </style> </head> <body> <p>un párrafo de texto.</p> </body> </html> Cuándo emplear este método: cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. Inconvenientes: si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ejemplo de estilos sin </title> </head> <body> <h1><font color="red" face="arial" size="5">titular de la página</font></h1> <p><font color="gray" face="verdana" size="2">un párrafo.</font></p> </body> </html> 3
4 El ejemplo anterior utiliza la etiqueta con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento. Si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se compone de páginas diferentes, habría que definir etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos. Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio web. La solución que propone es mucho mejor, como se puede ver en el siguiente ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ejemplo de estilos con </title> <style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; p { color: gray; font-family: Verdana; font-size: medium; </style> </head> <body> <h1>titular de la página</h1> <p>un párrafo de texto no muy largo.</p> </body> </html> permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página. 4
5 DEFINIR EN UN ARCHIVO EXTERNO Es la opción más común. Consiste en crear un archivo externo con extensión (el cuál contendrá todos los estilos de la página) y deberá enlazarse desde el documento XHTML. Para el ejemplo anterior debería procederse de la siguiente manera: 1.- Crear un archivo de texto y añadirle el siguiente contenido: p { color: black; font-family: Verdana; 2.- Guardar el archivo de texto con el nombre "estilos.css" (al cuál se referenciará posteriormente). Se debe poner especial atención a que el archivo tenga extensión.css y no.txt. 3.- Enlazar el fichero desde la página HTML utilizando la etiqueta <link>. Quedará de la siguiente manera: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ejemplo de estilos en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> <body> <p>un párrafo de texto.</p> </body> </html> Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo : 1.- rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo ) y la página HTML. Para los archivos, siempre se utiliza el valor stylesheet. 2.- type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos su valor siempre es "text/css". 3-. href: indica la URL del archivo que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. 5
6 4.- media: indica el medio en el que se van a aplicar los estilos del archivo. Los valores pueden ser "print" o "screen" : Sintaxis y conceptos define una serie de términos que permiten describir cada una de las partes que componen los estilos. El siguiente esquema muestra las partes que forman un estilo muy básico: A continuación se detallan cada uno de los términos: Regla: cada uno de los estilos que componen una hoja de estilos. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (). Selector: indica el elemento o elementos HTML a los que se aplica la regla. Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades. Propiedad y valor: La propiedad permite modificar el aspecto de una característica del elemento y el valor indica el nuevo valor de la característica modificada en el elemento. selector { propiedad: valor; ejemplo: body { color: black; selector { propiedad1: valor1; propiedad2: valor2; ejemplo: body { color: black; background-color: white; selector1, selector2{ propiedad:valor; ejemplo: h1, h2, h3 { color: maroon; 6
7 Por ejemplo, si quisiera definirse un fondo blanco con letras grises y fuente Arial de 10 puntos de tamaño, la regla sería la siguiente: body { background-color: #fff; color: #666; font-family: Arial, sans-serif; font-size: 10pt; Cada una de las líneas deberán terminar en punto y coma. Además, #fff representa al color blanco y #666 un gris oscuro. : Selectores Los selectores se emplean para elegir a qué elementos se aplican cada una de las propiedades que se definen. Hay diferentes tipos de selectores. A continuación se tratan los más importantes. Como se vio en el capítulo anterior, una regla de está formada por una parte llamada "selector" y otra parte llamada "declaración". La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". A continuacón se explican los tipos de selectores. Selector universal Se utiliza para seleccionar todo y cada uno de los elementos de la página y se indica mediante un asterisco (*). El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML: * { margin: 0; padding: 0; 7
8 Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML: h1 { color: red; h2 { color: blue; p { color: black; Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos: h1 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; h2 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; Sería equivalente a: h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; 8
9 Lo más óptimo para que el fichero resultante ocupe lo mínimo posible consiste en agrupar las propiedades comunes de varios elementos en una única regla y posteriormente definir las propiedades específicas de esos mismos elementos. Véase el siguiente ejemplo, donde se establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación el tamaño de letra de cada uno de ellos: h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; h1 { font-size: 2em; h2 { font-size: 1.5em; h3 { font-size: 1.2em; También pueden seleccionarse ciertos elementos, pero sólo cuando estén contenidos dentro de otros. Por ejemplo, si se quisiera aplicar un estilo a todos los items (<li>) de una lista desordenada (<ul>): ul li {... Selector de clase Supóngase que se nos plantea siguiente problema, donde quiere aplicarse un estilo únicamente al primer párrafo. El código original es el siguiente: <body> <p> permite definir los estilos de una página XHTML de forma sencilla.</p> <p>las posibilidades son múltiples</p> <p>y permite separar el contenido de la presentación</p> </body> El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. 9
10 La solución consistiría en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla que se ha de aplicar: <body> <p class="destacado"> permite definir los estilos de una página XHTML de forma sencilla <p>las posibilidades son múltiples</p> <p>y permite separar el contenido de la presentación</p> </body> Posteriormente deberá definirse una nueva regla en el con los estilos que se van a aplicar. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:.destacado { color: red; El selector.destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumplirá esa condición. Combinando selectores de tipo con selectores de clase Combinando las dos técnicas anteriores pueden obtenerse selectores mucho más específicos: Véase el siguiente ejemplo: p.destacado { color: red El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado". 10
11 Selectores de ID En ocasiones, es necesario aplicar estilos a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso. El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página. La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla : #destacado { color: red; La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class. De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML. 11
12 : Colores Los colores en se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece. Colores en : Palabras Clave define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color. Los valores posibles son los que se definen a continuación. aqua black blue fuchsia gray green lime maroon navy olive orange purple red silver teal white yellow Aunque es una forma muy sencilla de referirse a los colores básicos, este método prácticamente no se utiliza en las hojas de estilos de los sitios web reales, ya que se trata de una gama de colores muy limitada 12
13 Colores en : RGB El modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtenerlo. RGB DECIMAL Si todas las componentes valen 0, el color creado es el negro y si todas las componentes toman su valor máximo, el color obtenido es el blanco. En, las componentes de los colores definidos mediante RGB decimal pueden tomar valores entre 0 y 255. El siguiente ejemplo establece el color del texto de un párrafo: p { color: rgb(71, 98, 176); RGB PERCENTUAL Otra forma de indicar las componentes RGB de un color es mediante un porcentaje. El funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal. La única diferencia en este caso es que el valor de las componentes RGB puede tomar valores entre 0% y 100%. El mismo color del ejemplo anterior se puede representar de forma porcentual: p { color: rgb(27%, 38%, 69%); 13
14 Colores en : RGB HEXADECIMAL Aunque es el método más complicado para indicar los colores, se trata del método más utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método. Conseguir definir un color en formato RGB Hexadecimal es algo complicado. Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales, por lo que no no será necesario conocer la fórmula de conversión: Un ejemplo sería el siguiente: h1, h6 { color: #C00; 14
15 : El box model (o modelo de caja) El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos, ya que condiciona el diseño de todas las páginas web. El "box model" es el comportamiento de que hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares. permite controlar el aspecto de todas las cajas. El diseño de cualquier página XHTML está compuesto por cajas rectangulares. permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada una de ellas. Además, permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento. En realidad, todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página: 15
16 Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes: 1.- Contenido (content): contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.). 2.- Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra. 3.- Borde (border): línea que encierra completamente el contenido y su relleno. 4.- Imagen de fondo (background-image): imagen que se muestra por detrás del contenido y el espacio de relleno. 5.- Color de fondo (background-color): color que se muestra por detrás del contenido y el espacio de relleno. 6.- Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes. 16
17 : Div y span Los elementos div y span fueron introducidos en la especificación de HTML 4 para proveer un mecanismo genérico para agrupar y dar estructura a los documentos. EL TAG DIV Esta etiqueta se encarga de crear una capa, que es un elemento de bloque que sirve de contenedor a otros elementos de bloque e inline. El uso de las capas viene dado por dos motivos: para organizar semánticamente la páginay para maquetar. Por ejemplo, el layout típico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral4 y la del pie de página. Mediante podrá controlarse la disposición de las capas. El elemento div es un contenedor en bloque (block) y span es un contenedor en linea (inline). Un elemento id y/o class suele asociarse con el div o span para utilizarlo como ancla para estilos css. Este conceptio surgió cuando los desarrolladores reemplazaron los layouts creados con tablas por layouts. Sin embargo, ha habido un abuso de los elementos div hasta el punto de casi crear su propio lenguaje compuesto básicamente de elementos div anidados. El elemento div es semánticamente neutro: no tiene ningún otro significado a parte de ser un contenedor. Debe usarse cuando no exista otro elemento que pueda actuar como contenedor, no como reemplazo de elementos con un significado reconocido y aceptado, como los encabezados, párrafos, listas, etc. EL TAG SPAN El tag <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos. Para su correcta comprensión, supóngase la siguiente cita: <p>el que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p> 17
18 Se quiere resaltar en rojo las palabras 'saludable', 'rico' y 'sabio'. La solución consiste en utilizar el atributo </span>. A cada elemento span se le añadirá el atributo class, que podría definirse así en nuestra hoja de estilo:.destacado-en-rojo{ color:red; Una vez definida la clase el resultado HTML sería el siguiente: <p>el que pronto y pronto se levanta, es hombre <span class="destacado-en-rojo> <span class="destacado-en-rojo>rico</span> y <span class="destacado-enrojo>sabio</span>.</p> Y el resultado en el navegador: El que pronto... y pronto se levanta, es hombre saludable, rico y sabio. 18
19 : El box model (o modelo de caja): TIPOS DE CAJA Como se ha comentado anteriormente, todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma en que el diseñador le haya indicado para maquetar la página. Existen dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Es decir, aparecen solos, insertando saltos de línea. Los elementos inline siguen el flujo y están contenidos dentro de elementos de bloque. Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no corta el texto donde está metido. Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la figura: 19
20 ELEMENTOS INLINE O ELEMENTOS EN LÍNEA Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, b, strong, sub, sup, textarea, tt, u, var. ELEMENTOS DE BLOQUE Los elementos de bloque definidos por HTML son: address, blockquote, center, frameste, dir, div, dl, dd, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li, tbody, td, tfoot, th, thead, tr. 20
21 : Anchura y altura Las propiedades que controlan anchura y altura en son width y height respectivamente: width y height no pueden tomar valores negativos. WIDTH (ANCHURA) "width" representa el ancho de la caja. Pero es el ancho interior, es decir, sin bordes, márgenes, ni padding. Puede indicarse este ancho en medidas absolutas (normalmente píxeles) o relativas (normalmente %). Aunque los elementos inline tienen width, si se modifican con no se verá resultado visual alguno. Esto es porque el ancho de estos elementos se establece automáticamente para que se ajuste a las dimensiones del elemento inline. Por ejemplo, un enlace que consista en un texto de cinco caracteres tendrá el ancho (width) fijado a esos 5 caracteres que ocupe. Para solventar esta "carencia" los diseñadores hacen uso del box model hack. HEIGHT (ALTURA) Sobre el alto de la caja, se controla con la propiedad height; todo lo que se ha comentado sobre el width es aplicable a la altura del mismo modo. VALORES "AUTO" E "INHERIT" El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura (o altura, dependiendo si se aplica a width o a height) del elemento teniendo en cuenta sus contenidos y el sitio disponible en la página. El valor inherit indica que la anchura (o altura, dependiendo si se aplica a width o a height) del elemento se hereda de su elemento padre. El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera: #cabecera { height: 60px; <div id="cabecera">... </div> 21
22 : Márgenes Los márgenes se controlan con la propiedad margin, y es la distancia entre el borde de la caja y los elementos que la rodean. define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento: margin-top margin-right margin bottom margin-left Las unidades más utilizadas para indicar los márgenes de un elemento son: 1.- píxeles (cuando se requiere una precisión total) 2.- em (para hacer diseños que mantengan las proporciones) 3.- porcentajes (para hacer diseños líquidos o fluidos). Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento. SIMPLIFICAR MÁRGENES EN UNA SOLA LINEA Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento, define una propiedad que permite establecer los cuatro márgenes de forma directa empleando una única propiedad (margin). Para ello se indican los valores en el mismo orden que las agujas del reloj (arriba, derecha, abajo, izquierda). Los dos códigos siguientes son equivalentes: 22
23 margin-top: 5px; margin-right: 10px; margin-left: 7px; margin-bottom: 6px; margin: 5px 10px 6px 7px; Otra manera de simplificar aún más el código es especificar únicamente 2 medidas: una corresponderá a los márgenes superior e inferior y la otra a los laterales. Supónganse unos márgenes superiores e inferiores de 10px y unos laterales de 20px: margin: 10px 20px; 23
24 : Padding (Relleno) define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento. define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento: Padding-top padding-right padding-bottom padding-left 24
25 La siguiente imagen muestra la diferencia entre el margen y el relleno de los elementos: El código HTML y del ejemplo se muestra a continuación:.margen { margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em;.relleno { padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; <p class="margen">lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p> <p class="relleno">lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p> Como sucede con la propiedad margin, también define una propiedad de tipo "shorthand" para establecer los cuatro rellenos de un elemento de forma directa. Sirvan los siguientes ejemplos: 25
26 body {padding: 2em /* Todos los rellenos valen 2em */ body {padding: 1em 2em /* Superior e inferior = 1em, Izquierdo y derecho = 2em */ body {padding: 1em 2em 3em 4em /* Superior = 1em, derecho = 2em, inferior =3em, izquierdo Las unidades más utilizadas para indicar los rellenos de un elemento son: a) píxeles (cuando se requiere una precisión total) b) em (para hacer diseños que mantengan las proporciones) c) porcentajes (para hacer diseños líquidos o fluidos). 26
27 : Bordes permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo. ANCHURA DE LOS BORDES La anchura del borde se define por medio de la propiedad border-width, que dispone de los valores thin, medium y thick, o de un valor numérico indicado en píxeles. Es posible definir un comportamiento diferente para cada uno de los cuatro bordes utilizando las propiedades individuales border-top-width, border-right-width, borderbottom-width y border-left-width. Además existe la posibilidad (como se ha visto en margin y padding) de agrupar los valores en una sola linea. Sirvan los siguientes ejemplos: p { border-width: thin /* thin thin thin thin */ p { border-width: thin thick /* thin thick thin thick */ p { border-width: thin thick medium /* thin thick medium thick */ p { border-width: thin thick medium thin /* thin thick medium thin */ Si se indica un solo valor, se aplica a los cuatro bordes. Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y derecho. Si se indican tres valores, el primero se aplica al borde superior, el segundo se aplica al borde izquierdo y derecho y el tercer valor se aplica al borde inferior. Si se indican los cuatro valores, el orden de aplicación es superior, derecho, inferior e izquierdo. 27
28 COLOR DE LOS BORDES La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores de color que se explicaron en capítulos anteriores. Por ejemplo, "#faa" (en notación hexadecimal), "rgb(123,123,123)" (en notación RGB) o "yellow" (por nombre del color). Para definir colores diferentes para cada uno de los bordes, se utilizarán las propiedades border-top-color, border-right-color, border-bottom-color y border-left-color. ESTILO DE BORDES Existen 8 diferentes estilos de borde. El valor de esta propiedad puede modificarse mediante el atributo border-style. Por defecto tendrá asociado el valor none, por lo que no se mostrará ningún borde. La siguiente figura muestra los posibles valores y su interpretación (testeado en la versión 3.0 de Firefox): 28
29 Para definir estilos diferentes para cada uno de los bordes se utilizarán las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style. COMBINACIÓN DE TODAS LAS PROPIEDADES DE BORDES Como ocurre en otros muchos casos, usando la propiedad border se pueden combinar otras muchas propiedades en una sola. El orden será el siguiente: border: grosor estilo color; Un ejemplo sería: p { border: 1px solid red; También es posible definir las propiedades para un borde individual: border-bottom: 3px double #369; 29
30 : Fondos El último elemento que forma el box model es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes. Existen cinco propiedades para establecer el fondo de cada elemento (backgroundcolor, background-image, background-repeat, background-attachment, backgroundposition) y otra propiedad que es un 'atajo' (o shorthand) de las anteriores (background). Color de fondo (background-color) Esta propiedad permite modificar el color de cualquier elemento. Su valor inicial es "transparent". El siguiente ejemplo muestra una página web con un color gris claro de fondo: body { background-color: #F5F5F5; Imagen de fondo (background-image) En ocasiones será necesario crear fondos algo más complejos o sofisticados que aquellos generados mediante un simple color. ofrece la posibilidad de utilizar una imagen para ello. Esta propiedad es aplicable a cualquier elemento HTML. Existe la posibilidad de definir un color de fondo y una imagen a la vez. En este caso la imagen se mostrará encima del color, por lo que éste último únicamente se mostrará en caso de que la imagen sea transparente. El siguiente ejemplo muestra una imagen como fondo de toda la página: body { background-image: url("imagenes/fondo.png"); Las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa. Suele ser recomendable crear una carpeta de imágenes que se encuentre en el mismo directorio que los archivos y que almacene todas las imágenes utilizadas en el diseño de las páginas. 30
31 Así, las imágenes correspondientes al diseño de la página se mantienen separadas del resto de imágenes del sitio y el código es más sencillo (por utilizar URL relativas) y más fácil de mantener (por no tener que actualizar URL absolutas en caso de que se cambie la estructura del sitio web). Imágenes demasiado grandes o demasiado pequeñas Si la imagen que se quiere mostrar es demasiado grande para el fondo del elemento, solamente se muestra la parte de imagen comprendida en el tamaño del elemento. Si la imagen es más pequeña que el elemento, la repite horizontal y verticalmente hasta llenar el fondo del elemento. Este comportamiento es útil para establecer un fondo complejo a una página web entera. El siguiente ejemplo utiliza una imagen muy pequeña para establecer un fondo complejo a toda una página: body { background-image: url("imagenes/fondo.gif") Imagen original: Resultado: 31
32 Con una imagen muy pequeña (y que por tanto, se puede descargar en muy poco tiempo) se consigue cubrir completamente el fondo de la página, con lo que se consigue un gran ahorro de ancho de banda. Repetición de imagen vertical y/u horizontalmente (background-repeat) En ocasiones, no es conveniente que la imagen de fondo se repita horizontal y verticalmente. Para ello, introduce la propiedad background-repeat que permite controlar la forma de repetición de las imágenes de fondo. Los valores posibles para la propiedad background-repeat son los siguientes: -background-repeat: repeat: Es el valor por defecto, lo que hará que la imagen se repita tanto vertical como horizontalmente hasta ocupar todo el tamaño del elemento. -background-repeat: no-repeat: Muestra una sola vez la imagen y no la repite en ninguna dirección. -background-repeat: repeat-x: Repite la imagen sólo horizontalmente. -background-repeat: repeat-y: Repite la imagen sólo verticalmente. Controlar la posición de la imagen en el fondo (background-position) Además de seleccionar el tipo de repetición de las imágenes de fondo, permite controlar la posición de la imagen dentro del fondo del elemento mediante la propiedad background-position. Esta propiedad es aplicable a cualquier elemento e indica la distancia que se desplaza desde la esquina superior izquierda. Para esta propiedad se especificarán 2 valores: Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior izquierda). Si solamente se indica un porcentaje o una medida, se considera que es el desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%. Además existe la posibilidad de definir la posición de la imagen de fondo mediante palabras clave. Los posibles valores son los siguientes: top left center bottom right 32
33 Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es lo mismo indicar top left y left top. Comportamiento de la imagen de fondo (background-attachment) Opcionalmente, se puede indicar que el fondo permanezca fijo cuando la ventana del navegador se desplace mediante las barras de scroll mediante la propiedad backgroundattachment. Este comportamiento en general no es deseable y algunos navegadores no soportan correctamente. Los posibles valores para background-attachment y sus comportamientos son: background-attachment: scroll: Es el valor por defecto. background-attachment: fixed: La imagen de fondo se mostrará fija al desplazar la ventana del navegador. Agrupando comportamientos de imagen y fondo Por último, define una propiedad de tipo "atajo" para indicar todas las propiedades de los colores e imágenes de fondo de forma directa. La propiedad se denomina background. El orden en el que se indican las propiedades es indiferente, aunque en general se sigue el formato indicando el color, url de imagen, repetición y posición. El siguiente ejemplo muestra la propiedad background: /* Color e imagen de fondo de la página mediante una propiedad shorthand (o atajo) */ body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; /* La propiedad shorthand anterior es equivalente a las siguientes propiedades*/ body { background-color: #222d2d; background-image: url("./graphics/colorstrip.gif"); background-repeat: repeat-x; background-position: 0 0; 33
34 La propiedad background permite asignar todos o sólo algunos de todos los valores posibles que se pueden definir para los fondos de los elementos: background: url("./graphics/wide/bg-content-secondary.gif") repeat-y; background: url("./graphics/wide/footer-content-secondary.gif") no-repeat bottom left; background: transparent url("./graphics/navigation.gif") no-repeat 0-27px; background: none; background: # url("./graphics/icon-permalink-big.gif") no-repeat center left; 34
35 : Posicionamiento y visualización de elementos Cuando los navegadores descargan el contenido HTML y de las páginas web, aplican un procesamiento muy complejo antes de mostrar las páginas en la pantalla del usuario. Para cumplir con el modelo de cajas presentado en el capítulo anterior, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son: Las propiedades width y height de la caja (si están establecidas). El tipo de cada elemento HTML (elemento de bloque o elemento en línea). Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante). Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.) Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador. A continuación se mostrarán los cinco tipos de posicionamientos definidos para las cajas (normal, relativo, absoluto, fijo o flotante)y se presentarán otras propiedades que afectan a la forma en la que se visualizan las cajas. 35
36 : Posicionamiento Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, permite al diseñador modificar la posición en la que se muestra cada caja, pudiendo realizar efectos muy avanzados y diseños que de otra forma no serían posibles. El posicionamiento de las cajas se establece mediante la propiedad position (no confundir con la propiedad de fondos 'background-position') Los posibles valores para esta propiedad son 'static', 'relative', 'absolute', 'fixed' e 'inherit'. A continuación se detalla el comportamiento de cada uno de ellos: A continuación se detallará el comportamiento de cada uno de ellos. : Posicionamiento estático o normal (position: static) El posicionamiento normal o estático es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. En este modelo, ninguna caja se desplaza respecto de su posición original, por lo que sólo se tiene en cuenta si el elemento es de bloque o en línea. POSICIONAMIENTO DE ELEMENTOS BLOCK En caso de que las cajas sean del tipo 'block' (párrafos, por ejemplo), se mostrarán una debajo de otra y las distancias se controlarán mediante los márgenes verticales. 36
37 ELEMENTO PADRE O CONTENEDOR Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y determina tanto la posición como el tamaño de todas sus cajas interiores. Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es el elemento <body> de la página. Normalmente, la anchura de los elementos de bloque está limitada a la anchura de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el espacio disponible. POSICIONAMIENTO DE ELEMENTOS INLINE Los elementos en línea forman los "contextos de formato en línea". En este tipo de contextos, las cajas de tipo inline se muestran una tras otra de forma horizontal comenzando desde la posición más a la izquierda de su elemento contenedor. La distancia entre las cajas se controla mediante los márgenes laterales. Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de cajas se muestran en las líneas inferiores. Si las cajas en línea ocupan un espacio menor que su propia línea, se puede controlar la distribución de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la derecha o justificarlas. 37
38 : Posicionamiento relativo Este tipo de posicionamiento difiere mucho del anterior (estático o normal). El posicionamiento relativo permite desplazar una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left. El desplazamiento de una caja no afectará al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original. La imagen siguiente aclara el concepto: La caja 2 se ha desplazado hacia la derecha y hacia abajo. Como el resto de cajas de la página no modifican su posición, se producen solapamientos entre los contenidos de las cajas. El único problema de posicionar elementos de forma relativa es que se pueden producir solapamientos con otros elementos de la página. 38
39 La propiedad left desplaza la caja hacia su derecha, la propiedad right la desplaza hacia su izquierda, la posición top desplaza la caja de forma descendente y la propiedad bottom desplaza la caja de forma ascendente. Si se utilizan valores negativos en estas propiedades, su efecto es justamente el inverso. Sirva el siguiente ejemplo, donde inicialmente las cajas están posicionadas de forma estática o normal: Ahora se le aplicará un posicionamiento relativo para desplazar la primera imagen hacia abajo: img.desplazada { position: relative; top: 8em; <img class="desplazada" src="imagenes/imagen.png" alt="imagen genérica"/> <img src="imagenes/imagen.png" alt="imagen genérica" /> <img src="imagenes/imagen.png" alt="imagen genérica" /> 39
40 El resultado visual sería el siguiente: 40
41 : Posicionamiento absoluto El posicionamiento absoluto se emplea para establecer de forma precisa la posición en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante las propiedades top, right, bottom y left. La interpretación de los valores de estas propiedades es mucho más compleja que en el posicionamiento relativo, ya que en este caso dependen del posicionamiento del elemento contenedor. Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada. Al igual que en el posicionamiento relativo, cuando se posiciona de forma absoluta una caja es probable que se produzcan solapamientos con otras cajas. En el siguiente ejemplo, se posiciona de forma absoluta la caja 2: La caja 2 está posicionada de forma absoluta, lo que implica que el resto de elementos ignoran que esa caja exista. Por este motivo, la caja 3 deja su lugar original y pasa a ocupar el hueco dejado por la caja 2. En el estándar de, esta característica de las cajas posicionadas de forma absoluta se explica como que la caja sale por completo del flujo normal del documento. Por otra parte, el desplazamiento de una caja posicionada de forma absoluta se indica mediante las propiedades top, right, bottom y left. A diferencia de posicionamiento relativo, en este caso la referencia de los valores de esas propiedades es el origen de coordenadas de su primer elemento contenedor posicionado. 41
42 DETERMINANDO EL PUNTO DE ORIGEN DE COORDENADAS Determinar el origen de coordenadas a partir del cual se desplaza una caja posicionada de forma absoluta es un proceso complejo que se compone de los siguientes pasos: 1.- Se buscan todos los elementos contenedores de la caja hasta llegar al elemento <body> de la página. 2.- Se recorren todos los elementos contenedores empezando por el más cercano a la caja y llegando hasta el <body>. 3.- De todos ellos, el navegador se queda con el primer elemento contenedor que esté posicionado de cualquier forma diferente a position: static. 4.- La esquina superior izquierda de ese elemento contenedor posicionado es el origen de coordenadas. Una vez obtenido el origen de coordenadas, se interpretan los valores de las propiedades top, right, bottom y left respecto a ese origen y se desplaza la caja hasta su nueva posición. A continuación se muestran algunos ejemplos: 42
43 El código HTML y para esa página es el siguiente: div { border: 2px solid #CCC; padding: 1em; margin: 1em 0 1em 4em; width: 300px; <div> <img src="imagenes/imagen.png" alt="imagen genérica" /> <p>lorem ipsum...</p> </div> EJEMPLO 1 a.- Posicionar de forma absoluta la imagen mediante la propiedad position e indicar su nueva posición mediante las propiedades top y left: div img { position: absolute; top: 50px; left: 50px; El resultado visual se muestra en la siguiente imagen: 43
44 Para posicionar la imagen de forma absoluta, el navegador realiza los siguientes pasos: 1. Obtiene la lista de elementos contenedores de la imagen: <div> y <body>. 2. Recorre la lista de elementos desde el más cercano a la imagen (el <div>) hasta terminar en el <body> buscando el primer elemento contenedor que esté posicionado. 3. El primer elemento contenedor es el <div>, pero su posicionamiento es el normal o estático, ya que ni siquiera tiene establecida la propiedad position. 4. Como el siguiente elemento contenedor es el <body>, el navegador establece directamente el origen de coordenadas en la esquina superior izquierda de la página. 5. A partir de ese origen de coordenadas, la caja se desplaza 50px hacia la derecha (left: 50px) y otros 50px de forma descendente (top: 50px). Además, el párrafo que se mostraba debajo de la imagen sube y ocupa el lugar dejado por la imagen. El resultado es que el elemento <div> ahora sólo contiene el párrafo y la imagen se muestra en un nivel superior y cubre parcialmente los contenidos del párrafo. EJEMPLO 2 b.- Posicionar de forma relativa el elemento <div> que contiene la imagen sin modificar el resto de reglas. La única propiedad añadida al <div> es position: relative, por lo que el elemento contenedor se posiciona pero no se desplaza respecto de su posición original: div { border: 2px solid #CCC; padding: 1em; margin: 1em 0 1em 4em; width: 300px; position: relative; div img { position: absolute; top: 50px; left: 50px; En este caso, el origen de coordenadas para determinar la nueva posición de la imagen corresponde a la esquina superior izquierda del elemento <div>: 44
45 Si se quiere posicionar un elemento de forma absoluta respecto de su elemento contenedor, es imprescindible posicionar el elemento contenedor. Para ello, sólo es necesario añadir la propiedad position: relative, por lo que no es obligatorio desplazar el elemento contenedor respecto de su posición original. : Posicionamiento fijo El estándar considera que el posicionamiento fijo es un caso particular del posicionamiento absoluto, ya que sólo se diferencian en el comportamiento de las cajas posicionadas. Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve la página HTML en la ventana del navegador, no existe ninguna diferencia entre estos dos modelos de posicionamiento. La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador. Si la página se visualiza en un medio paginado (por ejemplo en una impresora) las cajas posicionadas de forma fija se repiten en todas las páginas. Esta característica puede ser útil para crear encabezados o pies de página en páginas HTML preparadas para imprimir. El posicionamiento fijo apenas se ha utilizado en el diseño de páginas web hasta hace poco tiempo porque el navegador Internet Explorer 6 y las versiones anteriores no lo soportan. 45
46 : Posicionamiento flotante El posicionamiento flotante es el más difícil de comprender pero al mismo tiempo es el más utilizado. La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante. Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba. La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la derecha la caja 1: Si en el anterior ejemplo la caja 1 se posiciona de forma flotante hacia la izquierda, el resultado es el que muestra la siguiente imagen: 46
47 La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la página y el resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2. Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posición en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posición de la caja 2 y tapa todos sus contenidos. MÚLTIPLES CAJAS FLOTANTES Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene en cuenta y se respeta el sitio disponible. En el siguiente ejemplo se posicionan de forma flotante hacia la izquierda las tres cajas: Las cajas no se superponen entre sí porque las cajas flotantes tienen en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba posicionada lo más a la izquierda posible, la caja 2 sólo puede colocarse al lado del borde derecho de la caja 1, que es el sitio más a la izquierda posible respecto de la zona en laque se encontraba. 47
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B)
APRENDERAPROGRAMAR.COM CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B) Sección: Cursos Categoría: Tutorial básico del programador web:
Yusef Hassan Montero Francisco Jesús Martín Fernández. Introducción a DOM. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Introducción a DOM Todos los derechos reservados www.nosolousabilidad.com INTRODUCCIÓN DOM, Document Object Model o Modelo de Objetos de Documento,
Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Referencia CSS Todos los derechos reservados www.nosolousabilidad.com Introducción Este documento tiene por objetivo servir de material de apoyo y
CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3
ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una
Cursito 28: Curso de HTML Parte 4
Por Roxana Bassi rox@roxanabassi.com.ar / http://www.roxanabassi.com.ar Publicado en la sección los cuadernos de Internet World en la revista Internet World Latinoamérica en el período 1995-1999 Cursito
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 3 Box
Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web
Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo
Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS
49 1.7 Hojas de estilo CSS 50 1.7 Hojas de estilo CSS 1.7.1 Qué es una hoja de estilo? Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla
Capítulo 3 Estilo para un documento HTML: CSS
Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/-..3.1 Propiedades y valores 0 )" & + 1& &1& 2 " '" Medidas: 3 + 14 "56 1'#/ 1/5-7 3 1 1 + 1' Colores:
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers
Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3
Menús. Gestor de Menús
Menús Para dar acceso a las categorías, artículos y generar espacio para los módulos se deben crear menús, éstos son enlaces a determinado recurso en el portal Web, sin ellos no es posible visualizar ninguno
Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.
Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.
HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE
HTML HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE Se elaboró un protocolo para soportar e envío de información por la red. HTTP (Hyper Text Transfer Protocol)
MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico
MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas
Creación y uso de Hojas de Estilo
Creación y uso de Hojas de Estilo Definición de Hojas de Estilo con la etiqueta Definición de Hojas de Estilo en Ficheros Externos Definición de Clases de Estilo Definición de Estilos Individuales
7. Definición de un estilo en función del contexto.
7. Definición de un estilo en función del contexto. Este otro recurso que provee las CSS es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada.
CSS. Cascading Style Sheets (Hojas de estilo en cascada)
1 CSS Cascading Style Sheets (Hojas de estilo en cascada) INTRODUCCIÓN Las Hojas de estilo son un conjunto de reglas de estilo definidas por el programador sobre elementos HTML, que definen la apariencia
La ventana de Microsoft Excel
Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft
Operación de Microsoft Word
Trabajar con tablas Las tablas permiten organizar la información y crear atractivos diseños de página con columnas paralelas de texto y gráficos. Las tablas pueden utilizarse para alinear números en columnas
La visualización de la ventana de Word tiene las siguientes partes:
TRABAJANDO CON WORD Ventanas de Word La visualización de la ventana de Word tiene las siguientes partes: Visualización de página Barra de título, Barra de Menús, donde se indica el nombre de la aplicación
Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen
Curso CSS Clase 5 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo
ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea.
ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea. Ministerio de Gobierno y Reforma del Estado Secretaría de Tecnologías para la Gestión Secretaría de Comunicación
Instituto Mar de Cortés Elaborar Documentos en Procesador de Texto
Instituto Mar de Cortés Elaborar Documentos en Procesador de Texto Configurar página Cuando estamos escribiendo en un documento Word es como si lo hiciéramos en una hoja de papel que luego puede ser impresa.
HTML El idioma de Internet (Parte 1)
HTML El idioma de Internet (Parte 1) El lenguaje HTML Lenguaje de marcas de hipertexto Sintaxis extremadamente sencilla Documentos en archivos de texto simples Texto sin formato Diferenciación de los distintos
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
Amnistía Internacional Sección Española
Amnistía Internacional Sección Española Webs locales Manual para editores Diciembre 2007 Versión 1.0 INTERNO SECRETARIADO ESTATAL. FERNANDO VI, 8, 1º IZDA. 28004 MADRID Telf.: + 34 91 310 12 77 Fax: +
Imágenes y objetos IMÁGENES
IMÁGENES Y OBJETOS Imágenes y objetos 2 IMÁGENES Uno de los elementos más vistosos e importantes de las páginas web. Su introducción puede explicar de manera más fácil y agradable nuestra información al
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
SELECTOR UNIVERSAL. NTH-OF-TYPE Y NTH-LAST- CHILD. COMBINAR SELECTORES. EJEMPLOS Y EJERCICIOS RESUELTOS CSS. (CU01016D)
APRENDERAPROGRAMAR.COM SELECTOR UNIVERSAL. NTH-OF-TYPE Y NTH-LAST- CHILD. COMBINAR SELECTORES. EJEMPLOS Y EJERCICIOS RESUELTOS CSS. (CU01016D) Sección: Cursos Categoría: Tutorial básico del programador
Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:
Mi primera web... El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto
CÓMO CREAR NUESTRO CATÁLOGO
CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,
Índice general de materias LECCIÓN 7 74
Índice general de materias LECCIÓN 7 74 BUSCAR 74 BUSCAR CON FORMATO 77 REEMPLAZAR 78 REEMPLAZAR CON FORMATO 79 NOTAS AL PIE DE PÁGINA 79 CONFIGURAR LAS NOTAS 81 INSERTAR NOTAS AL PIE 83 MODIFICAR NOTAS
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto).
GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP. EJERCICIO RESUELTO EJEMPLO SENCILLO. (CU00733B)
APRENDERAPROGRAMAR.COM GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP. EJERCICIO RESUELTO EJEMPLO SENCILLO. (CU00733B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha
Manual Impress Impress Impress Impress Impress Draw Impress Impress
Manual Impress Se puede definir Impress como una aplicación dirigida fundamentalmente a servir de apoyo en presentaciones o exposiciones de los más diversos temas, proyectando una serie de diapositivas
Manual Word 2010. Tablas
Manual Word 2010 Tablas CONTENIDO Insertar Tabla Seleccionar tablas Eliminar Tablas Agregar - eliminar filas, columnas y celdas Combinar y dividir celdas Dividir tablas Establecer alto y ancho de la celda
Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.
1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio
5.2.1 La Página Principal
5.2 Las Páginas WEB Una página Web es un documento electrónico escrito en un lenguaje de ordenador llamado HTML, o Hypertext Markup Language (lenguaje de marcación de hipertexto). Como ya hemos dicho,
LABORATORIO Nº 2 GUÍA PARA REALIZAR FORMULAS EN EXCEL
OBJETIVO Mejorar el nivel de comprensión y el manejo de las destrezas del estudiante para utilizar formulas en Microsoft Excel 2010. 1) DEFINICIÓN Una fórmula de Excel es un código especial que introducimos
Páginas multimedia Pizarra www.webardora.net
Página donde el usuario tiene un espacio (pizarra) para crear sus propias composiciones con gráficos y textos previamente insertados por el autor; además de poder escribir sus propios textos: PESTAÑA IMÁGENES
PASOS PARA CREAR UNA PÁGINA WEB
http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura
Para ingresar a la aplicación Microsoft PowerPoint 97, los pasos que se deben seguir pueden ser los siguientes:
Descripción del ambiente de trabajo Entrar y salir de la aplicación Para ingresar a la aplicación Microsoft PowerPoint 97, los pasos que se deben seguir pueden ser los siguientes: A través del botón :
UF0320: Aplicaciones informáticas de tratamiento de textos
UF0320: Aplicaciones informáticas de tratamiento de textos TEMA 1. Conceptos generales y características fundamentales del programa de tratamiento de textos TEMA 2. Introducción, desplazamiento del cursor,
Flash. Los chilos de la Web: Recordando la Web. Etiquetas de HTML. Recuerda 12/04/13 HTML = ESTRUCTURA CSS = DISEÑO DE LA ESTRUCTURA
Flash Tecnología Desarrollada por Macromedia en 1995, y posteriormente adquiridad por Adobe, para la manipulación de Vectores, Gráficos, Audio y Video. Actual y recientemente descontinuada en dispositivos
Dividir automáticamente las palabras en todo un documento
Guiones Si una palabra es demasiado larga para caber al final de una línea, Word lleva la palabra a la línea siguiente sin dividirla con un guión. Sin embargo, puede utilizar la característica de división
Microsoft Excel 2003. Unidad 6. La Hoja de Cálculo
Microsoft Excel 2003 Unidad 6. La Hoja de Cálculo Las hojas de cálculo son aplicaciones informáticas que se suelen incluir con frecuencia dentro de conjuntos de programas más amplios destinados normalmente
Formularios HTML. Elementos de Programación y Lógica
Formularios HTML Elementos de Programación y Lógica Formularios HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo,
Centro de Capacitación en Informática
Fórmulas y Funciones Las fórmulas constituyen el núcleo de cualquier hoja de cálculo, y por tanto de Excel. Mediante fórmulas, se llevan a cabo todos los cálculos que se necesitan en una hoja de cálculo.
Módulo II - Word. Eliminar caracteres... 2. Selección de texto... 2. Selección de una palabra... 4. Selección de varias palabras...
Módulo II - Word Índice Eliminar caracteres... 2 Selección de texto... 2 Selección de una palabra... 4 Selección de varias palabras... 4 Selección de una frase... 5 Selección de un párrafo... 6 Configuración
Combinar comentarios y cambios de varios documentos en un documento
Combinar comentarios y cambios de varios documentos en un documento Si envía un documento a varios revisores para que lo revisen y cada uno de ellos devuelve el documento, puede combinar los documentos
generar columnas de texto y números disponer texto en columnas paralelas (para traducciones por ejemplo) situar imágenes junto a textos.
Módulo 3 Herramientas de Cómputo Tablas y Gráficos Las tablas de Word tienen una función similar a las tabulaciones pero con muchas más opciones de formato permitiendo mejores acabados. Mediante tablas
Un kilobyte (KB) son 1024 bytes, un Megabyte (MB) son 1024 KB, un Gigabyte son 1024 Mb
El Explorador de Windows es la herramienta básica en un Sistema Operativo porque con ella controlaremos toda la información que tenemos guardada en nuestro disco duro, disquete, CD, USB, etc. Terminología
WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario.
WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario. Índice contenido. INTRODUCCIÓN... 1-2 1. ENTORNO DE TRABAJO... 1-2 2. EDICIÓN DE PROGRAMAS...
IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM RESPONSIVE DESIGN. Bernardo Chenlo
IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 RESPONSIVE DESIGN Bernardo Chenlo 2 INTRODUCCIÓN Qué es Responsive Design? Responsive Design El contenido se adapta a la pantalla
ENTORNO DE TRABAJO DE WORD 2007
ENTORNO DE TRABAJO DE WORD 2007 Esta nueva versión de Office no contiene las 4 barras que son comunes a versiones anteriores, en esta ocasión solo contiene una barra llamada barra de título, una banda
Elementos de Microsoft Word
Contenido 1. Distintas formas de iniciar Word 2007... 2 2. Ayuda de Word... 2 3. Las barras de herramientas... 3 4. Funcionamiento de las pestañas. Cómo funcionan?... 4 5. Personalizar barra de acceso
Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín
Desarrollo de Aplicaciones para Internet I Unidad III - CSS Profesor: M.C. Martín Olguín Cascading Style Sheets (CSS) Aunque el HTML desde sus orígenes privilegia el contenido sobre la apariencia, esta
Manual Usuario Wordpress. Índice
2 Índice 1. Manual usuario...2 1.1 Zona de mensajes...2 1.2 Zona de usuarios...5 1.2.1 Identificarse...5 1.2.2 Registrarse...6 1.3 Categorías...6 1.4 Subscribirse...6 1.5 Archivos...7 1.6 Calendario...7
Manual de Usuario. Servidor Cartográfico SIRAD
SIRAD SISTEMA DE INFORMACIÓN SOBRE RECURSOS PARA ATENCIÓN DE DESASTRES Manual de Usuario Servidor Cartográfico SIRAD Febrero de 2011 Guías de uso Presentación general del servidor: El acceso se hace con
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
2. ABRIR UN NUEVO DOCUMENTO DE TRABAJO
2. ABRIR UN NUEVO DOCUMENTO DE TRABAJO 18 Introducción Hasta ahora hemos visto como abrir una imagen para tratarla en Photoshop CS3, y a guardarla en cualquiera de los estados en los que se encuentre en
InfoPath forma parte del paquete ofimático de Microsoft desde la versión XP (2003).
Formularios Los Sistemas Informacionales utilizan los datos derivados de los OAS y Transaccionales (nóminas, facturaciones, etc.) para, en su aspecto más básico, generar informes que ayuden a los directivos
... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4
CAPÍTULO 4. Formas alternativas de escribir un texto........ Columnas Para fijar columnas se posiciona el Punto de Inserción donde se desee que comiencen las columnas, o bien se selecciona el texto que
Operación de Microsoft Excel. Guía del Usuario Página 79. Centro de Capacitación en Informática
Manejo básico de base de datos Unas de las capacidades de Excel es la de trabajar con listas o tablas de información: nombres, direcciones, teléfonos, etc. Excel puede trabajar con tablas de información
CASO PRÁCTICO DISTRIBUCIÓN DE COSTES
CASO PRÁCTICO DISTRIBUCIÓN DE COSTES Nuestra empresa tiene centros de distribución en tres ciudades europeas: Zaragoza, Milán y Burdeos. Hemos solicitado a los responsables de cada uno de los centros que
MANUAL BÁSICO DE WRITER
MANUAL BÁSICO DE WRITER Los contenidos que vamos a tratar en este pequeño manual son los siguientes: 1. 2. 3. 4. 5. 6. 7. 8. Qué es OpenOffice y qué es Writer? Cómo accedemos a Writer? Principales opciones
PRÁCTICAS DE GESTIÓN GANADERA:
PRÁCTICAS DE GESTIÓN GANADERA: MANEJO DE HOJA DE CÁCULO (EXCEL) 1. INTRODUCCIÓN AL MANEJO DE EXCEL La pantalla del programa consta de una barra de herramientas principal y de una amplia cuadrícula compuesta
EJEMPLO DE APERTURA Y CIERRE DE UNA ETIQUETA.
DOCUMENTOS HTML QUÉ SON? Los documentos HTML son archivos creados con etiquetas en lenguaje de hyper text markup language (lenguaje de hipertexto). Estos documentos son interpretados por los programas
Observe las diferencias entre las distintas posibilidades de alineación del texto. En la figura 3.38 se muestra Alineación del texto.
3.6.3 Alineación del texto. La manera más fácil de cambiar la alineación del texto en el documento es utilizar los botones de alineación de la barra de herramientas Formato. En el Cuadro de diálogo Párrafo
Novell Vibe 4.0. Marzo de 2015. Inicio rápido. Inicio de Novell Vibe. Introducción a la interfaz de Novell Vibe y sus funciones
Novell Vibe 4.0 Marzo de 2015 Inicio rápido Cuando se empieza a usar Novell Vibe, en primer lugar se recomienda configurar un área de trabajo personal y crear un área de trabajo de Este documento explica
MATERIAL 2 EXCEL 2007
INTRODUCCIÓN A EXCEL 2007 MATERIAL 2 EXCEL 2007 Excel 2007 es una planilla de cálculo, un programa que permite manejar datos de diferente tipo, realizar cálculos, hacer gráficos y tablas; una herramienta
Proyecto Rediseño de los webs públicos de OMIE. Aplicación de resultados del mercado. Uso
Proyecto Rediseño de los webs públicos de OMIE Aplicación de resultados del mercado Uso Índice Índice... 2 0 Introducción... 3 1 Visión general de la aplicación... 3 2 Navegación por los informes... 4
Páginas web ::: Tablas Diseño de materiales multimedia. Web 2.0. 1.6 Tablas
42 1.6 Tablas 43 1.6 Tablas 1.6.1 Introducción Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que intersectan se denominan celdas. Aunque es una práctica muy
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
ETIQUETAS HTML 5 Diseño de Sitios Web TUW
Etiqueta Descripción Define un comentario nueva nueva nueva nueva
Práctica 2: Diseño Web inicial. XHTML avanzado.
Grado de Información y Documentación Curso 2011-2012 33864-Informática II Práctica 2: Diseño Web inicial. XHTML avanzado. 1. Introducción y objetivos Introducción En esta práctica el alumno tendrá un tema
1. La nueva interfaz del programa
1. La nueva interfaz del programa 13 1. La nueva interfaz del programa 1.1 La interfaz del nuevo Flash CS4 Al acceder por primera vez a Adobe Flash CS4 llama la atención la nueva disposición de las paletas,
Tema: Estilos CSS. Combinadores. Posicionamiento.
Diseño Digital V. Guía 5 1 Tema: Estilos CSS. Combinadores. Posicionamiento. Objetivos Contenidos Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V A través del desarrollo
Módulo 8: Ofimática básica. Unidad didáctica 4: Introducción y modificación de datos. Access
Módulo 8: Ofimática básica Unidad didáctica 4: Introducción y modificación de datos Access UNIDAD DIDÁCTICA 4 Introducción y modificación de datos Créditos Autor/es: Fuentes Innovación y Cualificación
Módulo II - PowerPoint
Módulo II - PowerPoint Índice Copiando diapositivas Menú Edición... 2 Copiando diapositivas utilizando la barra de herramientas... 3 Copiando diapositivas utilizando el menú contextual... 3 Copiando diapositivas
Introducción a Microsoft Word
La barra de herramientas de Word La barra de herramientas de Word ha evolucionado a través de las distintas versiones, manteniéndose más o menos constante desde la versión 97 hasta la 2003 y cambiando
En este tutorial vamos a calificar una tarea por el método "Calificación simple directa"que es el que utiliza por defecto moodle.
1 de 9 Calificar Tarea En este tutorial vamos a calificar una tarea por el método "Calificación simple directa"que es el que utiliza por defecto moodle. La evaluación por guías de calificación y las rúbricas
Manual del Profesor Campus Virtual UNIVO
Manual del Profesor Campus Virtual UNIVO Versión 2.0 Universidad de Oriente UNIVO Dirección de Educación a Distancia INDICE 1. Campus Virtual. 03 1.1 Accesos al Curso 04 1.2 Interfaz del Curso...06 1.3
HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es
HTML-5 / DIVS + IFRAMES Prof: Moisés Mañas Moimacar@esc.upv.es Básico Define una división o sección en un documento Atributos: align= left/right/center/justify Alineación de la división
Instalación del programa PSPP y obtención de una distribución de frecuencias.
Práctica 2. Instalación del programa PSPP y obtención de una distribución de frecuencias. Con esta práctica instalaremos el programa PSPP. El programa es un software específico para el análisis estadístico
Informática I Notas del curso
EXCEL Objetivo: Identificar la funcionalidad general de Excel, sus herramientas y recursos Excel Objetivo Particular: Conocer los métodos básicos de trabajo de Excel, para el manejo de registros, datos
Cuando creas tu blog, puedes albergarlo de forma gratuita en Blog*Spot. Escoge simplemente una URL disponible y ya puedes utilizarlo.
Un blog es un diario personal de colaboración y una fuente de noticias impactantes. Su blog será como usted quiera que sea, no debe seguirse ningún patrón. Puedes accesar a Blogger desde la barra de direcciones
Microsoft PowerPoint
Microsoft PowerPoint Microsoft PowerPoint (en adelante PowerPoint) es una aplicación para la realización de presentaciones que van a ser expuestas para su visualización a través de o bien de la pantalla
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL II
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL II [Escriba texto] Contenido CAPÍTULO I: ESTRUCTURANDO UN REPORTE... 4 CAPÍTULO II: FICHA DE INFORMES... 5 CAPÍTULO III: BARRA DE HERRAMIENTAS INFORME... 19 EJERCICIOS...
Manual de OpenOffice Impress
Manual de OpenOffice Impress. Capítulo 4. Trabajando con gráficos, esquemas y plantillas 1 Manual de OpenOffice Impress Capítulo 4: Trabajando con gráficos, esquemas y plantillas Este material es una adaptación
Ofimática Aplicada UNIDAD II : HERRAMIENTAS DE ESCRITORIO WORD
Ofimática Aplicada UNIDAD II : HERRAMIENTAS DE ESCRITORIO WORD Contenido: Edición Básica. Formato del documento (color, efecto y tamaño) Ejercicios Elaborado por: Lic. Ronald Méndez 1 Guía Rápida de Microsoft
Como dibujar las vistas de una pieza en Autocad
El problema de las vistas de una pieza. Una vez que he dibujado la pieza en el espacio modelo (página con el fondo en negro). Haz el render a un archivo. Elige el fondo blanco. Abro una presentación. Para
IDENTIFICACIÓN DE LA ACTIVIDAD PEDAGÓGICA
PROGRAMA DE FORMACIÓN UNIDAD DE APRENDIZAJE ACTIVIDAD OBJETIVOS IDENTIFICACIÓN DE LA ACTIVIDAD PEDAGÓGICA OFIMATICA Y AUXILIAR DE SISTEMAS II-A GESTORES DE CONTENIDO INSTALACIÓN DE JOOMLA Y CREACIÓN DE
PROGRAMA INFORMÁTICO PARA LA CUMPLIMENTACIÓN DE RECETAS EN FORMATO XML VERSIÓN: 1.0
PROGRAMA INFORMÁTICO PARA LA CUMPLIMENTACIÓN DE RECETAS EN FORMATO XML VERSIÓN: 1.0 MARZO 2013 1 Índice de contenido 1. Introducción......3 2. Instalación...5 3. Menú Opciones...6 3.1. Abrir directorio
reemplaza menú archivo y esta situado en la esquina superior izquierda de estos programas de
Taller de Computación Básica Curso de Apoyo a la Modalidad Presencial Lección 1: Conociendo Word Indicaciones: 1. Identifica los elementos principales e interfaz de Word. 2. Maneja los elementos principales