Creación y uso de Hojas de Estilo
|
|
|
- José Carlos Flores Ortega
- hace 8 años
- Vistas:
Transcripción
1 Creación y uso de Hojas de Estilo Definición de Hojas de Estilo con la etiqueta <STYLE> Definición de Hojas de Estilo en Ficheros Externos Definición de Clases de Estilo Definición de Estilos Individuales con Nombre Uso de Criterios de Selección Contextual Especificación de Estilos para Elementos Individuales Combinando Hojas de Estilo Propiedades de Formato de Elementos de Bloque Formato de Bloques: Introducción y Ejemplos Márgenes Bordes Separadores Herencia de Propiedades de Formato de Bloque Manual de Referencia de Hojas de Estilo Comentarios en las Hojas de Estilo Nuevas etiquetas HTML Nuevos atributos para las etiquetas HTML 1
2 Nuevas propiedades de objetos JavaScript Propiedades de las Hojas de Estilo Unidades Definición de Hojas de Estilo con la etiqueta <STYLE> Creación y hojas de Estilo Para definir una hoja de estilo directamente dentro de un documento se utiliza la etiqueta <style> dentro de la sección <head>... </head>. La etiqueta <style> abre la hoja de estilo, y la etiqueta la cierra. Asegúrate de utilizar <style> antes de <body>. Cuando use <style> podrá especificar el atributo type para indicar que tipo de sintaxis se va a emplear. Los dos posibles son "text/css" y "text/javascrip". EL valor por defecto es "text/css". El siguiente ejemplo define una hoja de estilo que especifica que todos los títulos de nivel 4 serán en mayúsculas y azules, y todos los bloques en cursiva y rojos: <head> <style type="text/css"> h4 {text-transform: uppercase; color: blue;} blockquote {font-style: italic; color: red;} </head> <body>... </body> <head> <style type="text/javascript"> tags.h4.texttransform = "uppercase" tags.h4.color = "blue" tags.blockquote.fontstyle = "italic" tags.blockquote.color = "red" </head> <body> 2
3 ... </body> Uso de la hoja de estilo <h4>este titulo es azul y esta en mayúsculas.</h4> <blockquote>este bloque en cursiva es rojo.<blockquote> Resultado del ejemplo ESTE TITULO ES AZUL Y ESTA EN MAYÚSCULAS. Este bloque en cursiva es rojo. Definición de Hojas de Estilo en Ficheros Externos Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y después enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo así definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio Web sin más que incluir un enlace al fichero con el estilo en cada página. La sintaxis para definir estilos en ficheros es idéntica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la etiqueta <style>. He aquí un ejemplo: /* hoja de estilo externa estilo.html */ all.boldblue {color: blue; font-weight: bold;} h1 {line-height: 18pt;} p {color: yellow;} /* fin de fichero */ /* hoja de estilo externa estilo.html */ tags.boldblue.all.color = "blue"; tags.boldblue.all.fontweight = "bold"; tags.h1.lineheight = "18pt"; tags.p.color = "yellow"; /* fin de fichero */ Para utilizar esta hoja de estilo, se usa la etiqueta <link> como se muestra en el siguiente ejemplo: <head> <title>el titulo</title> <link rel = stylesheet type = "text/css" href = "estilo.html"> 3
4 </head> <head> <title>el titulo</title> <link rel = stylesheet type = "text/javascript" href = "estilo.html"> </head> Definición de Clases de Estilo Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarán dicho estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solución correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento. <style type="text/css"> all.greenbold {color: green; font-weight: bold;} <style type="text/javascript"> classes.greenbold.all.color = "green"; classes.greenbold.all.fontweigth = "bold"; Uso de la hoja de estilo <h3 class=greenbold>este titulo es muy verde</h3> <p class=greenbold> Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML. </p> <blockquote class=greenbold> Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques resalten del resto de la página. </blockquote> Resultado del ejemplo 4
5 Este titulo es muy verde Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML. Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques resalten del resto de la página. Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de JavaScript. Los nombres de clases no pueden contener tampoco operadores como: -, +, *, /, %,. Cuando se definen clases de estilo se puede especificar a qué elementos se podrán aplicar dicha clase, o usaremos la palabra clave all para indicar que todos los elementos podrán utilizarla. En el siguiente ejemplo se crea una clase de estilo amarillo que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques. <style type="text/css"> all.amarillo {color: yellow; font-weight: bold;} p.rojo {color: red; font-weight: bold;} blockquote.rojo {color: red; font-weight: bold;} <style type="text/javascript"> tags.amarillo.all.color = "yellow"; tags.amarillo.all.fontweight = "bold"; tags.rojo.p.color = "red"; tags.rojo.p.fontweight = "bold"; tags.rojo.blockquote.color = "red"; tags.rojo.blockquote.fontweight = "bold"; Uso de la hoja de estilo <p class="rojo">este párrafo es rojo.</p> <p>este párrafo es del color por defecto, porque no utiliza la clase rojo</p> <blockquote class="rojo">este bloque usa la clase rojo.</blockquote> <h4 class="rojo"> Este título intenta usar la clase rojo, pero no le está permitido </h4> <p class="amarillo">este párrafo es amarillo</p> <h4 class="amarillo"> Este título es amarillo porque usa la clase amarillo </h4> 5
6 Resultado del ejemplo Este párrafo es rojo. Este párrafo es del color por defecto, porque no utiliza la clase rojo Este bloque usa la clase rojo. Este título intenta usar la clase rojo, pero no le está permitido Este párrafo es amarillo Este titulo es amarillo porque usa la clase amarillo Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizará la primera. Por ejemplo, en el siguiente código un párrafo intenta usar las clases rojo y amarillo. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica. Ejemplo: Resultado: Otro párrafo rojo. <p class="rojo" class="amarillo">otro párrafo rojo.</p> Definición de Estilos Individuales con Nombre Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar un clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL. También son útiles para definir capas de contenidos HTML posicionadas de forma precisa. Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo #. En JavaScript se utiliza la propiedad ids. Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como valor del atributo ID. En el siguiente código se define una clase de estilo PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlinea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo color es azul. <style type="text/css"> all.principal { line-height: 20pt; font-size:15pt; font-weight: bold; color: red; 6
7 } #AZUL1 {color: blue;} <style type="text/javascript"> with(classes.principal.all) { lineheight = "20pt"; fontsize = "15pt"; fontweight = "bold"; color = "red"; } ids.azul1.color = "blue"; Uso de la hoja de estilo Resultado del ejemplo <p class="principal"> Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlinea y el tamaño de la fuente son mayores de lo habitual. </p> <p class="principal" id="azul1"> Este párrafo es casi igual al anterior. Está en negrita y su fuente es mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1. </p> Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlinea y el tamaño de la fuente son mayores de lo habitual. Este párrafo es casi igual al anterior. Esta en negrita y su fuente es mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1. Uso de Criterios de Selección Contextual Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podríamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si el texto 7
8 enfatizado está en el interior de un título de tamaño 4. Se puede conseguir este nivel de control sobre la aplicación de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicará sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo. Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el método contextual(). <style type="text/css"> h4 em {color: green;} <style type="text/javascript"> contextual(tags.h4, tags,em).color ="green"; Uso de la hoja de estilo <h4>el <em>texto enfatizado</em> de este titulo es verde.</h4> <p>en cambio este <em>texto enfatizado</em> no es verde.</p> Resultado del ejemplo El texto enfatizado de este titulo es verde. En cambio este texto enfatizado no es verde. Ahora se verá otro ejemplo que hace que las marcas de los elementos de la lista que hereden de al menos dos listas desordenadas sean de color azul. ul ul li {color: blue;} contextual(tags.ul, tags.ul, tags.li).color = "blue"; Se pueden utilizar los criterios de selección contextual para buscar etiquetas, clases, ids o combinaciones de estos. En el siguiente ejemplo se crea la clase MAGENTA que lo colorea todo de magenta. Todos los párrafos MAGENTA que estén dentro de un <div> estarán en cursiva. Además los textos dentro de <b> anidados dentro de párrafos dentro de un <div> en MAGENTA usarán una fuente grande. 8
9 <style type="text/css"> all.magenta {color: magenta;} div p.magenta {font-style: italic;} div p.magenta b {font-size: large;} <style type="text/javascript"> classes.magenta.all.color = "magenta"; contextual(tags.div, classes.magenta.p).fontstyle = "italic"; contextual(tags.div, classes.magenta.p, tags.b).fontsize = "large"; Uso de la hoja de estilo <div class=magenta> <h4> Titulo h4 en MAGENTA</h4> <p>este párrafo debería ser magenta y cursivo. Ahora viene un <b>texto grande</b>. Conseguimos este efecto con selección contextual</p> </div> <p class="magenta">este párrafo todavía es MAGENTA, pero como no está dentro de un bloque <div>, no es cursivo.</p> Resultado del ejemplo Titulo h4 en MAGENTA Este párrafo debería ser magenta y cursivo. Ahora viene un texto grande. Conseguimos este efecto con selección contextual Este párrafo todavía es MAGENTA, pero como no esta dentro de un bloque <div>, no es cursivo. Especificación de Estilos para Elementos Individuales De igual forma que se pueden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo. Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Así es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algún cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. También se muestra el uso de <span> para aplicar un estilo a varios elementos. <p style="color: green; font-weight: bold; margin-right: 20%; 9
10 margin-left: 20%; border-width: 2pt; border-color: blue;"> Este párrafo, y sólo este párrafo, es verde, esta en negrita y tiene un borde azul. </p> <p> Este párrafo es del color habitual, pero esta <span style="color: red; font-style: italic;">palabra</span> es diferente al resto. <p> <p style="color = 'green'; fontweight = 'bold'; marginright = '20%'; marginleft = '20%'; borderwidth = '2pt'; bordercolor = 'blue';"> Este párrafo, y sólo este párrafo, es verde, esta en negrita, tiene unos grandes márgenes y un borde azul. </p> <p> Este párrafo es del color habitual, pero esta <span style="color = "red"; fontstyle = "italic";">palabra</span> es diferente al resto. <p> Resultado del ejemplo Este párrafo, y sólo este párrafo, es verde, esta en negrita, tiene unos grandes márgenes y un borde azul. Este párrafo es del color habitual, pero esta palabra es diferente al resto. Combinando Hojas de Estilo Se puede utilizar más de una hoja de estilo para fijar las características de un documento. Esto es deseable si se tienen varias hojas de estilos parciales, de forma que cada una de ellas define diferentes estilos. Supongamos, por ejemplo, que estamos escribiendo un informe sobre los beneficios de un producto de red de una compañía llamada RAD s. Puede que se necesite usar tres hojas de estilo: una definiendo el estilo habitual de los informes, otra que defina el estilo de los productos de red, y otra que defina el estilo de la compañía RAD s. El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento. <style type="text/css" src=" <style type="text/css" src="estilos/informe" <style type="text/javascript" src="estilos/redes" 10
11 <style type="text/css" h1 {color: red;}" /* tiene preferencia sobre las hojas externas */ Entre las hojas de estilo externas, la última tiene precedencia sobre las demás. Así, en caso de conflicto, se escoge el estilo de la última hoja de estilo especificada. Los estilos definidos para elementos individuales tienen precedencia sobre los definidos en el elemento <style> y sobre los definidos en las hojas externas. En general, los estilos locales se sobreponen a los generales, como se muestra en el siguiente ejemplo. <style type="text/css"> p {color: white;} b {color: green;} <style type="text/javascript"> tags.p.color = "white"; tags.b.color = "green"; Uso de la hoja de estilo <p>tal y como debería ser este párrafo es de color blanco, <b>y esta parte en negrita es de color verde</b></p> <p style="color: yellow;">este otro párrafo no es de color blanco, <b style="color: red;"> ni esta parte en negrita es de color verde</b>, porque se ha usado style para cambiarles el color.</p> Resultado del ejemplo Tal y como debería ser este párrafo es de color blanco, y esta parte en negrita es de color verde Este otro párrafo no es de color blanco, ni esta parte en negrita es de color verde, porque se ha usado style para cambiarles el color. Propiedades de Formato de Elementos de Bloque En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, <h1> y <p> son elementos de bloque, pero <em> no lo es. Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Después se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su comportamiento respecto a la herencia de propiedades. 11
12 Formato de Bloques: Introducción y Ejemplos Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una caja. Cada caja puede tener características de estilo propias tales como márgenes, bordes, separadores y una imagen o color de fondo. Los márgenes indican la separación entre el borde de la caja y el borde del documento. Estos bordes pueden tener apariencia plana o tridimensional. Los separadores ("padding") indican la separación entre el borde de los elementos y el contenido de los mismos. También se puede fijar la anchura de los elementos de bloque, bien mediante un valor específico, o bien mediante un porcentaje de la anchura total del documento. En este caso es redundante fijar los márgenes derecho o izquierdo y la anchura. Si se especifican la anchura y los dos márgenes, el valor del margen izquierdo tiene prioridad sobre los demás valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia máxima desde el borde derecho de elemento que lo contiene. El valor de anchura es utilizado sólo si no sobrepasa los límites de anchura del elemento que lo contiene. El alineamiento horizontal puede ser a la izquierda, derecha o centrado. Esto se consigue usando la propiedad float en CSS o la propiedad align en JavaScript. En los siguientes ejemplos se muestra el uso de márgenes, separadores, bordes, fondos y alineamiento. <style type="text/css"> p { color: #ffffff; /* blanco */ /* márgenes */ margin-left: 20%; margin-right: 20%; /* anchura del borde */ border-top-width: 10pt; borde-bottom-width: 10pt; border-right-width: 5pt; border-left-width: 5pt; /* estilo y color del borde */ border-style: outset; border-color: blue; /* separadores */ padding-top: 10pt; padding-bottom: 10pt; padding-right: 20pt; padding-left: 20pt; } h3 { /* tamaño y peso de la fuente*/ font-size: 14pt; font-weight: bold; background-image: url("papel.jpg"); /* centra el titulo y le da una anchura del 90% */ width: 90%; float: center; borde-color: green; borde-style: solid; /* todas las partes del borde tienen la misma anchura */ borde-width: 10pt; /* todos los separadores del borde son igual de anchos */ padding: 5%; 12
13 } Uso de la hoja de estilo <style type="text/javascript"> with (tags.p) { /* márgenes */ marginleft="20%"; marginright="20%"; /* anchura del borde */ bordertopwidth="10pt"; borderbottomwidth="10pt"; borderrightwidth="5pt"; borderleftwidth="5pt"; /* estilo y color del borde */ borderstyle="outset"; bordercolor="blue"; /* separadores */ paddingtop="10pt"; paddingbottom="10pt"; paddingright="20pt"; paddingleft="20pt"; } with(tags.h3) { /* tamaño y peso de la fuente*/ fontsize="14pt"; fontweight="bold"; backgroundimage="papel.jpg"; /* centra el titulo y le da una anchura del 90% */ width="90%"; float="center"; bordecolor="green"; bordestyle="solid"; /* todas las partes del borde tienen la misma anchura */ bordewidths("10pt"); /* todos los separadores del borde son igual de anchos */ paddings("5%"); } <h3>titulo h3 con borde sólido y fondo</h3> <p>los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene.</p> <p>este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparán demasiado espacio.</p> Resultado del ejemplo Titulo h3 con borde sólido y fondo 13
14 Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene. Este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparán demasiado espacio. Márgenes Los márgenes indican la separación entre el borde del bloque y el borde del documento, o elemento padre. Se pueden fijar los márgenes derecho, izquierdo, superior e inferior. Para ello se deben utilizar los siguientes nombres de propiedad: margin-top margin-bottom margin-left margin-right margin margintop marginbottom marginleft marginright margins() En vez de especificar los dos márgenes se puede utilizar la propiedad width. Se pueden utilizar valores específicos, como 200 puntos, o valores relativos, como el 50% de la anchura del elemento padre. Es redundante fijar los dos márgenes y la anchura, pues dos de estos tres valores implican el tercero. Para especificar los márgenes por defecto para un documento se deben especificar para la etiqueta <body>. En el siguiente ejemplo se fijan dichos márgenes en 20 puntos a derecha e izquierda. <style type="text/css"> body {margin-left: 20pt; margin-right: 20pt;} <style type="text/javascript"> with (tags.body) { marginleft="20pt"; maginright="20pt"; } 14
15 Bordes Se puede fijar la anchura del borde que rodea un elemento de bloque usando las siguientes propiedades. border-top-width border-bottom-width border-left-width border-right-width border-width bordertopwidth borderbottomwidth borderleftwidth borderrightwidth borderwidths() Se puede fijar el estilo del borde usando la propiedad border-style de CSS o la propiedad borderstyle de JavaScript. Los valores que pueden tomar son solid, double, groove, ridge, inset y outset. Separadores Los separadores indican la distancia entre el borde de un elemento y su contenido. El separador se muestra incluso si el borde del elemento no lo hace. Se puede fijar el tamaño de los separadores de un elemento de bloque utilizando las siguientes propiedades. padding-top padding-bottom padding-left padding-right paddingtop paddingbottom paddingleft 15
16 paddingright Herencia de Propiedades de Formato de Bloque Las características de anchura, márgenes, bordes y separadores de los elementos padre no son heredadas por sus hijos. Sin embargo, a primera vista, a veces puede parecer que sí son heredados, pues los valores de los elementos padre afectan a sus elementos hijos. Supongamos que a un elemento <div> le fijamos un margen izquierdo de valor 10 puntos. De esta forma la caja que le rodea se encuentra desplazada 10 puntos hacia la derecha. Además supondremos que no tiene bordes ni separadores. Todos sus elementos hijo estarán pegados a su margen izquierdo, que como está 10 puntos desplazado hacia la derecha, causará un efecto parecido si ellos mismos también tuviesen borde izquierdo. Pensemos en qué ocurriría si los hijos heredasen estas características de sus padres. El bloque <div> está indentado 10 puntos. Sus hijos a su vez estarán indentados otros 10 puntos con respecto a él, con lo cual el aspecto global es que los hijos estarían indentados 20 puntos. Manual de Referencia de Hojas de Estilo Comentarios en las Hojas de estilo En las hojas de estilo en cascada y en las hojas de estilo en JavaScript se pueden usar comentarios al estilo C. Por ejemplo: em {color:red;} /* el texto enfatizado será rojo */ tags.em.color="red"; /* el texto enfatizado será rojo */ JavaScript además permite usar comentarios al estilo de C++. Por ejemplo: tags.em.color="red"; // el texto enfatizado será rojo Los comentarios no pueden anidarse. Nuevas etiquetas HTML 16
17 En esta sección se verán las nuevas etiquetas que han sido añadidas para trabajar con estilos. <STYLE> Las etiquetas <STYLE> y </STYLE> se usan para crear una hoja de estilo. En su interior podemos especificar estilos para elementos, definir clases e identificadores y en general establecer los estilos que se utilizarán en todo el documento. Para especificar qué tipo de sintaxis se empleará utilizaremos el atributo TYPE. Su valor por defecto es "text/css" y selecciona la sintaxis CSS. Mediante el valor "text/javascript" podemos seleccionar la sintaxis JavaScript. Ejemplos: <style type="text/css"> body {margin-left: 10%; margin-right: 10%;} all.limon {color: yellow;} <style> <style type="text/javascript"> tags.body.marginleft="10%"; tags.body.marginright="10%"; classes.limon.all.color="yellow"; <style> <LINK> La etiqueta <LINK> sirve para poder utilizar en un documento una hoja de estilo que está en otro fichero. <html> <head> <title>titulo</title> <link rel=stylesheet type="text/css" href=" </head> <body>... </body> </html> 17
18 <html> <head> <title>titulo</title> <link rel=stylesheet type="text/javascript" href=" </head> <body>... </body> </html> <SPAN> Las etiquetas <SPAN> y </SPAN> se utilizan para delimitar el principio y el fin de una trozo de código al que se le va aplicar un estilo. En el siguiente ejemplo se aplica un estilo a una parte del texto: Este texto es normal. <span style="font-weight: bold; color: green;">este texto es diferente gracias a <span>.</span> De nuevo el texto es normal. El resultado del ejemplo es: Este texto es normal. Este texto es diferente gracias a <span>. De nuevo el texto es normal. Veamos otro ejemplo. Este hace diferentes las letras iniciales: <style type="text/css"> all.letron {font-family: times; font-size: 200%; font-weight: bold;} <p><span class="letron">e</span>n un lugar de la Mancha...</p> Resultado: En un lugar de la Mancha... Nuevos atributos para las etiquetas HTML 18
19 En esta sección se enumeran los nuevos atributos que podemos utilizar con las etiquetas HTML y que son útiles para trabajar con estilos. Estos atributos pueden ser usados con cualquier etiqueta para especificar su estilo. STYLE El atributo STYLE determina el estilo del elemento al que se aplique. Por ejemplo: <h4 style="font-weight: bold; color: red;">cabecera h4 en rojo</h4> <h4 style="fontweight='bold'; color='red'">cabecera h4 en rojo</h4> Resultado del ejemplo: Cabecera h4 en rojo CLASS El atributo CLASS permite aplicar una clase de estilo a un elemento. Aunque CSS y JavaScript usen sintaxis ligeramente diferentes para la definición de clases de estilos, la forma de usar dichas clases es común. Ejemplo: <style type="text/css"> h3.cursiva {font-style: italic;} <style> <style type="text/javascript"> classes.cursiva.h3.fontstyle="italic"; <style> Uso de la hoja de estilo: <h3 class="cursiva">cabecera h3 cursiva</h3> Se debe tener en cuenta que para los nombres de clase se distingue entre mayúsculas y minúsculas. Cada elemento HTML sólo puede utilizar una clase de estilo. 19
20 Para especificar que una clase puede aplicarse a todos los elementos se utiliza el selector all cuando se definen las propiedades de la clase. En el siguiente ejemplo todos los elementos de clase limón serán amarillos. <style type="text/css"> all.limon {color: yellow;} <style> <style type="text/javascript"> classes.limon.all.color="yellow"; <style> Uso de la hoja de estilo: <h4 class="limon">una cabecera amarilla</h4> <p class="limon">un párrafo amarillo</p> Resultado del ejemplo Una cabecera amarilla Un párrafo amarillo ID Cuando se definen hojas de estilo, se pueden crear estilos individuales con nombre. Un elemento puede usar clases de estilos y además usar estos estilos individuales con nombre. Con ellos podemos crear excepciones a las clases de estilos para definir un estilo individual con nombre, en sintaxis CSS se utiliza el signo #, mientras que en JavaScript se utiliza el selector ID. En ambos casos se utiliza el atributo ID para especificar el estilo de un elemento HTML. En los nombres de los ID's se distingue entre mayúsculas y minúsculas. En el siguiente ejemplo se define la clase calor, que hace a los párrafos ser de color rojo y estar en negrita. También se crea un nombre de estilo, frío, que es de color azul. Se muestra cómo utilizar frío para crear una excepción a calor. <style type="text/css"> p.calor {color: red; font-weight: bold;} #frio {color: blue;} <style> 20
21 <style type="text/javascript"> classes.calor.p.color="red"; classes.calor.p.fontweight="bold"; ids.frio.color="blue"; <style> Uso de la hoja de estilo: <p class="calor">un párrafo caliente...</p> <p class="calor" id="frio">un párrafo frio...</p> Resultado del ejemplo: Un párrafo caliente... Un párrafo frío... Nuevas propiedades de objetos JavaScript En esta sección se exponen las nuevas propiedades de los objetos JavaScript que son útiles para definir hojas de estilos usando la sintaxis de JavaScript. TAGS Cuando se usa sintaxis JavaScript dentro del elemento <style>, podemos seleccionar estilos usando la propiedad tag del objeto document. El siguiente ejemplo utiliza la sintaxis JavaScript para especificar que todos los párrafos sean de color verde. <style type="text/javascript"> tags.p.color="green"; <style> En sintaxis CSS este ejemplo seria: <style type="text/css"> p {color: green;} <style> La propiedad tags siempre se refiere al objeto document del documento actual, por esto se puede omitir document de la expresión document.tags. Así, las dos siguientes líneas expresan lo mismo: 21
22 document.tags.p.color="green"; tags.p.color=green"; Para definir estilos por defecto a todos los elementos de un documento se debe hacer a través del elemento <body>, porque todos los demás elementos heredan de este. tags.body.marginleft="10%"; /* sintaxis JavaScript */ body {margin-left: 10%;} /* sintaxis CSS */ CLASSES Ver la sección CLASS de los nuevos atributos para las etiquetas HTML. IDS Ver la sección ID de los nuevos atributos para las etiquetas HTML. Propiedades de las Hojas de Estilo Fuentes Tamaño de Fuente : font-size : fontsize tamaño absoluto, tamaño relativo, longitud, porcentaje medium todos los elementos si relativos al tamaño del padre Tamaño absoluto: xx-small, s-small, small, medium, large, x-large, xx-large Tamaño relativo: larger, smaller Longitud: número + unidad Porcentaje: tamaño de fuente relativo al tamaño de fuente del padre. Tipo de Fuente : font-family 22
23 : fontfamily un nombre de fuente la fuente por defecto todos los elementos si no aplicable Tipo de fuente: serif, sans-serif, cursive, monospace, fantasy... Peso de Fuente : font-weight : fontweight normal, bold, bolder, lighter, normal todos los elementos si no aplicable Estilo de Fuente : font-style : fontstyle normal, italic Normal todos los elementos si no aplicable Propiedades del Texto Interlinea 23
24 : line-height : lineheight número, longitud, porcentaje, normal tamaño por defecto para la fuente elementos de bloque Si relativos al tamaño de la fuente Decoración del Texto : text-decoration : textdecoration none, underline, line-through, blink None Todos los elementos Si no aplicable Transformaciones del Texto : text-transform : texttransform capitaliza, uppercase, lowercase, none none todos los elementos si no aplicable Alineamiento del Texto : text-align : textalign 24
25 left, right, center, justify left Elementos de bloque Si no aplicable Indentación de Texto : text-indent : textindent longitud, porcentaje 0 elementos de bloque si relativos a la anchura del padre Longitud: numero + unidad Porcentaje: longitud de indentación relativo a la anchura del padre. Propiedades de Formato de Elementos de Bloque Márgenes : margin-left, margin-right, margin-top, margin-bottom, margin : marginleft, marginright, margintop, marginbottom, margins() longitud, porcentaje, auto 0 Todos los elementos No Relativos a la anchura del padre Separadores : padding-left, padding-right, padding-top, padding-bottom, padding : paddingleft, paddingright, paddingtop, paddingbottom, paddings() 25
26 Longitud, porcentaje 0 Todos los elementos No Relativos a la anchura del padre Anchura del los Bordes : border-left-width, border-right-width, border-top-width, border-bottom-width, border-width : borderleftwidth, borderrightwidth, bordertopwidth, borderbottomwidth, borderwidths() Longitud None Todos los elementos No No aplicable Estilo del Borde : border-style : borderstyle None, solid, double, inset, outset, groove, ridge None Todos los elementos No No aplicable Color del Borde : border-color : bordercolor Color, none 26
27 None Todos los elementos No no aplicable Color: nombre de un color o 6 dígitos hexadecimales indicando su valor rgb. Anchura : width : width longitud, porcentaje, auto auto elementos de bloque no relativos a la anchura del padre Alineamiento : float : align left, right, none none todos los elementos no relativos a la anchura del padre Clear : clear : clear none, left, right, both none 27
28 Todos los elementos No no aplicable Esta propiedad especifica cuando un elemento permite la existencia de elementos flotando a sus lados. Exactamente, el valor de esta propiedad son los lados en que no se aceptan elementos flotantes. Propiedades de Color y Fondo Color : color : color Color Black Todos los elementos Si no aplicable Esta propiedad especifica el color del texto. Color: especificación de un color (nombre, valor rgb). Imagen de Fondo : background-image : backgroundimage url Vacio todos los elementos no no aplicable Color de Fondo : background-color : backgroundcolor color vacío todos los elementos 28
29 no no aplicable Propiedades de Clasificación Display : display : display ninguno, block, inline, list-item según HTML todos los elementos no no aplicable Esta propiedad indica cuando un elemento es en linea, como <em>, de bloque, como <h1> o de lista, como <li>. Estilo de Lista : list-style-type : liststyletype ninguno, disk, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha Disk elementos cuya propiedad display es list-item Si no aplicable Espacios en Blanco : white-space : whitespace normal, pre según HTML elementos de bloque Si 29
30 no aplicable Unidades Unidades de Longitud El formato de un valor de longitud es un signo opcional ('+' o '-', '+' por defecto), un número y una unidad de medida. Ejemplos: 12pt, 2em, 3mm. Hay tres tipos de unidades: absolutas, relativas y pixel. Tipos de unidades absolutas: pt: puntos pc: picas px: pixels in: pulgadas mm: milímetros cm: centímetros Tipos de unidades relativas: em: la altura de la fuente, normalmente la anchura o altura de la M mayúscula ex: la mitad de la altura la fuente, normalmente la altura de la letra'x' px: pixels, relativos a la superficie de dibujo Los elementos hijo heredan los valores calculados y no los valores relativos. Por ejemplo: body {font-size: 12; text-indent: 3em} h1 {font-size: 15pt;} En este ejemplo la indentación del texto en <h1> será 36pt y no 45pt. Unidades de Color Un valor de color es o un nombre de color o una descripción RGB. La lista de colores sugerida es: aqua, black, blue, fuchsia, gray, green, maroon, navy, olive, purple, red, silver, teal, white, yellow. Estos 15 colores se han tomado de la paleta VGA de Windows. body {color: black;} tags.body.backgroundcolor = "white" 30
31 Un color RGB puede especificarse mediante 6 dígitos hexadecimales. Los dos primeros indican rojo, los dos segundos verde y los dos últimos azul. Ejemplos: body {color: #ff0000;} /* rojo */ tags.p.backgroundcolor = "#606060"; /* gris */ También podemos utilizar la función rgb(). Usa tres argumentos: rojo, verde y azul. Cada color puede ser un entero entre 0 y 255, o un porcentaje. Ejemplo: p {color: rgb(200, 20, 240);} /* púrpura brillante */ blockquote {background-color: rgb(100%, 100%, 20%);} /* amarillo brillante */ Creacion de David De Belaustegui Para SOFTDOWNLOAD ARGENTINA 31
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
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
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
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:
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
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,
Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15
Hojas de Estilos - CSS Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Introducción Motivación: Separar el formato del contenido y estructura de una
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
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.
Ejemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)
Anexo: Reglas básicas sobre la sintaxis CSS: Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un
CSS1. manual de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
CSS1 manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre CSS1 disponible en: http://www.w3.org/tr/1999/rec-css1-19990111 Manual de referencia de CSS1-
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:
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
lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML
: 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
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
Paquete de trabajo 3. Diseño Web del Proyecto REMERI. Manual. Enero 2013
Paquete de trabajo 3 Diseño Web del Proyecto REMERI Manual Enero 2013 Red Mexicana de Repositorios Institucionales REMERI 2 HOJA EN BLANCO Red Mexicana de Repositorios Institucionales REMERI 3 Paquete
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)
Resumen Rápido de CSS
Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de
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
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
Wenceslao Zavala. www.producciondigitalup.com.ar
Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:
Creación del sitio web del Laboratorio F1
Creación del sitio web del Laboratorio F1 Jonatan Grandmontagne García Universidad de León, España jon@usuarios.retecal.es Este documento muestra como se ha diseñado el sitio web donde se expone el proyecto
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
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
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
CSS, hojas de estilos
CSS, hojas de estilos 1. Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto
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
Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 3: Formato básico.
Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 3: Formato básico. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Formato del texto La apariencia
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
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2015 GUIA DE LABORATORIO Nº 3 Nombre de la practica: Aplicación de Hojas de estilo Lugar de ejecución: Laboratorio
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
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
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
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
OpenOffice Writer LA PÁGINA
4: CONFIGURARC LA PÁGINA Cuando se escribe de forma manual se empieza por elegir el tamaño del papel, su orientación y los márgenes. En un procesador de texto, como Writer, estas operaciones que habitualmente
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
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
Transformación de documentos XML con
Transformación de documentos XML con X S L T Necesidad de las transformaciones XML se presenta como un estándar para transmitir datos a través de Internet. Ante la posibilidad de que distintos centros
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
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
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
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,
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
Índice. Introducción. Página 2 Empecemos con un ejemplo. Página 3 Crea tu site: Página 3
Índice. Introducción. Página 2 Empecemos con un ejemplo. Página 3 Crea tu site: Página 3 Anexo. Guía para desarrollo de programas en HTML y JavaScript. 1. Introducción. En este anexo vamos a escribir un
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.
Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design
Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design Nivel básico. Duración: 20 horas. Lección 1. Creando tu primera página Web en HTML5. Qué es HTML5 y CSS3? Términos comunes utilizados
GUÍA RÁPIDA DE TRABAJOS CON ARCHIVOS.
GUÍA RÁPIDA DE TRABAJOS CON ARCHIVOS. 1 Direcciones o Ubicaciones, Carpetas y Archivos Botones de navegación. El botón Atrás permite volver a carpetas que hemos examinado anteriormente. El botón Arriba
1.1.- Introducción a la Web Vemos una introducción al medio donde se encajan los lenguajes que vamos a tratar: la web.
Sesión 01: Introducción a los lenguajes web COMPUTACION E INFORMATICA WEB DEVELOPPER III Competencias a Conseguir: - Introducción general a la programación web. - Conocer y diferenciar el concepto de páginas
Hojas de estilo en cascada (CSS) Tecnologías Web
Hojas de estilo en cascada (CSS) Tecnologías Web Motivación El objetivo fundamental de las hojas de estilo CSS es separar el contenido de la apariencia La información de nuestros sitios WEB tienen que
CSS, hojas de estilos
CSS, hojas de estilos Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto
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
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
Unidad didáctica 4 Programación de aplicaciones Web 2.0
Unidad didáctica 4 Programación de aplicaciones Web 2.0 En esta última unidad didáctica del curso vamos a ver las aplicaciones Web 2.0 de un modo distinto de como lo llevamos haciendo hasta ahora: desde
CURSO DE CSS Índice de contenido
Índice de contenido 1.- INTRODUCCION...3 1.1.- Definición...3 1.2.- Versiones...3 1.3.- Test...4 2.- SINTAXIS CSS...5 2.1.- Reglas y su jerarquía...5 2.2.- Comentarios...6 2.3.- Uso CSS...6 2.4.- Test...8
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE TEMA: XHTML CATEDRA: INTRODUCCION A LA PROGRAMACION EN INTERNET
UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE TEMA: XHTML CATEDRA: INTRODUCCION A LA PROGRAMACION EN INTERNET DOCENTE: Ing. CARLOS ARTURO RUANO. INSTRUCTOR: Tec. DANIEL EDENILSON
Tutorial de PowerPoint
Tutorial de PowerPoint Este documento pretende explicar la elaboración de la presentación Los Planetas del Sistema Solar que se comenta en el apartado II de la Guía del curso. Las imágenes utilizadas están
Í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
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.
PROYECTO EDUCATIVO LA CALERA
Introducción a Excel2000. Es una de las planillas de cálculo, más utilizadas en todo el mercado informático - ahora con la novedosa versión de Excel2000 incorpora un conjunto de características nuevas
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
Modulo 1 El lenguaje Java
Modulo 1 El lenguaje Java 13 - Codificación en Java Una de las grandes diferencias entre Java y Pascal en cuando a la codificación es que Java se trata de un lenguaje de los llamados case sensitive Esto
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
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
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
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...
Dar formato significa, en términos generales, fijar los parámetros que definirán el aspecto y la presentación de un documento.
Formato del documento Características de los formatos Dar formato significa, en términos generales, fijar los parámetros que definirán el aspecto y la presentación de un documento. Existen formatos que
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
CALCULAR NOTAS CON EXCEL
CALCULAR NOTAS CON EXCEL Este documento pretende ser una iniciación sencilla a Excel. Empezaremos indicando cómo se abre un libro Excel. A continuación debemos pensar cómo queremos organizar nuestra información
A continuación, se detalla el uso de los accesorios más comunes:
4 Los Accesorios de Windows I El sistema operativo Windows incorpora una serie de programas de utilidad general, de forma que pueda trabajar con su ordenador sin tener que recurrir a programas comerciales.
A25. Informática aplicada a la gestión Curso 2005/2006 Excel Tema 7. Funciones avanzadas de Excel II
DEPARTAMENTO DE LENGUAJES Y SISTEMAS INFORMÁTICOS ESCUELA SUPERIOR DE TECNOLOGÍA Y CIENCIAS EXPERIMENTALES A.D.E.M. Segundo Curso A25. Informática aplicada a la gestión Curso 2005/2006 Excel Tema 7. Funciones
Teclado sobre una PDA para Personas con Parálisis Cerebral
Manual de Usuario - 1 - - 2 - Teclado sobre una PDA para Personas con Parálisis Cerebral Capítulo 1. MANUAL DE USUARIO 12.1 Descripción de la aplicación Este programa le permitirá llevar a cabo las siguientes
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).
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
Dependiendo de la utilización, forma y resultado deseado, Word propone diferentes columnas:
COLUMNAS Dependiendo de la utilización, forma y resultado deseado, Word propone diferentes columnas: de Las periodísticas simples. En ellas, el usuario define las columnas antes de escribir y salta de
Informática Aplicada a la Gestión de Empresas (IAGE) Parte III Excel e Internet Tema 2
Informática Aplicada a la Gestión de Empresas (IAGE) Parte III Excel e Internet Tema 2 1. Rango de celdas. Definición. Selección Contenido. 2. Referencias relativas, absolutas y mixtas. 3. Gráficos. Creación,
CONSEJOS PARA MAQUETAR LA TESIS DOCTORAL
CONSEJOS PARA MAQUETAR LA TESIS DOCTORAL (WORD 2010) MIGUEL ÁNGEL CORREAS MAZUECOS Índice 1. FORMATO DE LA PÁGINA... 3 2. ESTILOS... 5 2.1. Ejemplos de estilos en la tesis.... 5 2.2. Pasos para personalizar
MANEJANDO FICHEROS Y CARPETAS
Tutorial 1 MANEJANDO FICHEROS Y CARPETAS 1.1.- Creando carpetas Para organizar la información que almacenamos en nuestros ordenadores, tenemos una elemento denominado carpeta. Vamos a ver cómo, usando
SESIÓN 3: WORD 2013 PORTADA Y PAGINA EN BLANCO [SESIÓN 3] WORD 2013 INSERTAR UNA PORTADA
![SESIÓN 3: WORD 2013 PORTADA Y PAGINA EN BLANCO [SESIÓN 3] WORD 2013 INSERTAR UNA PORTADA](/thumbs/33/16543540.jpg "SESIÓN 3: WORD 2013 PORTADA Y PAGINA EN BLANCO [SESIÓN 3] WORD 2013 INSERTAR UNA PORTADA")
SESIÓN 3: WORD 2013 PORTADA Y PAGINA EN BLANCO INSERTAR UNA PORTADA Word 2013 ayuda a los usuarios quienes desean entregar un buen trabajo final. En ocasiones la gran mayoría de personas diseñan caratulas
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 TECNICO DE EMAILING BIZBOX
MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos
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
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
Introducción a la Informática Aplicada a la Filología TABLAS
Su creación. Filas y columnas TABLAS Las tablas representan el formato más adecuado para organizar múltiples datos que deben aparecer relacionados. Las tablas constan de casillas de entradas de datos,
Unidad: Representación gráfica del movimiento
Unidad: Representación gráfica del movimiento Aplicando y repasando el concepto de rapidez Esta primera actividad repasa el concepto de rapidez definido anteriormente. Posición Esta actividad introduce
EDICIÓN Y FORMATO (II)
EDICIÓN Y FORMATO (II) 1. INTRODUCCIÓN Writer dispone de una serie de barras de herramientas predeterminadas, en las que se encuentran botones de acceso directo a comandos específicos que se activan con
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
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
INSTRUCCIÓN DE SERVICIO NOCIONES BÁSICAS PARA DIAGRAMAS DE FLUJO. MICROSOFT VISIO
INSTRUCCIÓN DE SERVICIO NOCIONES BÁSICAS PARA DIAGRAMAS DE FLUJO. MICROSOFT VISIO 2007 Fecha: 23/11/07 Autor: Aurora Estévez Ballester. TGRI Sección Normalización y Proceso Técnico Área de Bibliotecas
5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara
5º Unidad Didáctica Hojas de estilo en Cascada CSS Eduard Lara 1 ÍNDICE 5.1 El Origen de CSS 5.2 Hojas de estilo y sus clases 5.3 Las reglas de estilo 5.4 Presentación con estilos 2 5.1 EL ORIGEN DE CSS
MANUAL DE USUARIO DE LA HERAMIENTA CONFIGURACION DE PRESUPUESTOS PARA DISTRIBUIDORES
MANUAL DE USUARIO DE LA HERAMIENTA CONFIGURACION DE PRESUPUESTOS PARA DISTRIBUIDORES Joma ha creado una herramienta con la cual, usted, como distribuidor, podrá generar presupuestos de las agrupaciones
Correspondencias entre taxonomías XBRL y ontologías en OWL Unai Aguilera, Joseba Abaitua Universidad de Deusto, EmergiaTech
Correspondencias entre taxonomías XBRL y ontologías en OWL Unai Aguilera, Joseba Abaitua Universidad de Deusto, EmergiaTech Resumen Todo documento XBRL contiene cierta información semántica que se representa
Tema 3.1: Principios de diseño web accesibles
Tema 3.1: Principios de diseño web accesibles Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Asignatura Humanidades: Evitando las barreras de accesibilidad en
Capítulo 1 Documentos HTML5
Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs
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
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
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: ELABORACIÓN DE HOJAS DE ESTILO Código: CSTI008 total: Horas Objetivo General: Construir Hojas de Estilos para
Recursos de Aprendizaje
1.0 Entorno del programa 2.0 Creación de un nuevo programa 2.1 Guardar un programa o una lista de posiciones 2.2 La apertura de una lista de programa o de posiciones 2.3 El cierre de una lista de programas