Funcionamiento básico de CSS

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Funcionamiento básico de CSS"

Transcripción

1 Funcionamiento básico de CSS Índice de contenido Funcionamiento básico de CSS Introducción Cómo funcionan las hojas de estilo en cascada?...3 Veamos un ejemplo concreto de cómo se expresarían las reglas anteriores en el lenguaje de las CSS: Los conceptos clave en las hojas de estilo CSS...3 Reglas, selectores y propiedades...3 La cascada: herencia, sobreescritura y conflictos de estilos...4 Un ejemplo práctico...4 Propiedades básicas que deberías conocer Vincular los estilos CSS a páginas HTML Hojas de estilo CSS inline Hojas de estilo CSS internas Hojas de estilo CSS externas Comentarios Selectores básicos Selector universal * Selector de tipo o etiqueta Selector descendente Selector de clase Selectores de ID pag 1 de 12 -

2 1.- Introducción. Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS: <html> <head> <title>ejemplo de estilos sin CSS</title> </head> <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 de texto no muy largo.</font></p> </html> El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el tamaño de letra de cada elemento de la página. El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. La solución que propone CSS 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 CSS</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> <h1>titular de la página</h1> <p>un párrafo de texto no muy largo.</p> </html> CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página. En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio. - pag 2 de 12 -

3 2.- Cómo funcionan las hojas de estilo en cascada? Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero.css y que describen el aspecto que deben tener los diferentes elementos HTML de una página. Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos: Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respetivamente. El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro. Veamos un ejemplo concreto de cómo se expresarían las reglas anteriores en el lenguaje de las CSS: 3.-Los conceptos clave en las hojas de estilo CSS Este ejemplo muy sencillo de reglas CSS ya nos sirve perfectamente para habla de los conceptos clave que hay que tener claros en todo esto. Reglas, selectores y propiedades En el ejemplo anterior tenemos un total de 3 reglas, cada una se compone de un selector que indican a qué elementos HTML aplica la regla que es el texto que precede a las llaves de apertura y cierre de la regla. En la primera regla, el selector es h1, h2, en la segunda h2 y en la tercera p. Cada regla se compone a su vez de propiedades que especifican qué exactamente se hará con esos los elementos HTML a los que aplica. El selector de la primera regla, por ejemplo, indica que esta regla se refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarán el color negro (propiedad color ) y un tamaño de letra de 16 pixeles al texto (propiedad font-size ). Otra forma mucho más sofisticadas de diseñar selectores. Un ejemplo rápido de esto: En la primera regla se han anidado dos elementos para indicar que esta regla sólo se refiere a enlaces (etiqueta <a> en HTML) dentro de párrafos de texto (etiqueta <p> en - pag 3 de 12 -

4 HTML) y que a estos enlaces se le aplicará un subrayado. Es decir, esta regla no aplica a elementos <a> que no se encuentren dentro de un párrafo (<p>). En la segunda regla se ha especificado algo parecido, pero jugando con un elemento y un atributo de clase (ver estos conceptos en el tutorial HTML). Es decir, esta regla aplicará a párrafos que contienen un atributo class con el valor text-izq tal como éste: Fíjate que en la regla text-izq empieza con un punto. Es la manera de especificar en el lenguaje CSS que text-izq se refiere a un atributo de clase. La cascada: herencia, sobreescritura y conflictos de estilos El nombre de hojas de estilo en cascada no es casual, expresa que los estilos que especifican con reglas se pueden heredar de una manera jerárquica. Es decir, veamos esta regla: Aquí estamos diciendo que la etiqueta que es la que envuelve el contenido de cualquier página web tenga un tipo de letra Arial. Esto no tendría mucho sentido si no fuera porque gracias a la capacidad de herencia de las reglas de este modo por defecto cualquier elemento hijo como un título o un párrafo va a heredar ese estilo, salvo que especifique lo contrario como, por ejemplo, en esta regla: En esta última regla aplica el principio de especificidad. En principio, se plantearía un conflicto entre la regla general de con lo que dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la regla más específica y referirse a un párrafo es más específico que referirse a los elementos hijos que pueden dentro de. Igualmente, una regla con un selector p a (enlace dentro de un párrafo) tendría precedencia sobre una regla con un selector a que se refiere a un enlace a secas. De nuevo, sabiendo esto, te apañaras bien en el 99% de los casos. Pero lo cierto es que el tema de la precedencia de las reglas entre sí tiene cierta tela, si lo quieres conocer más a fondo, échale un vistazo a esta referencia. Un ejemplo práctico Modificar el diseño este blog cambiando una de sus reglas CSS, concretamente el color de los títulos de los posts. Y tranquilo: el cambio sólo afectará a la página en tu navegador, mi blog no sufrirá daños smile Para ello te propongo utilizar la herramienta de inspección de código que traen consigo las versiones actuales de los navegadores FireFox, Chrome e Internet Explorer. Se activa la herramienta con F-12, en el ejemplo he usado Firefox que es la que más me gusta en conjunto, aunque utilizo también mucho la de Chrome. El ejercicio que te propongo es cambiarle el color a los títulos <h1> de los posts en este blog. - pag 4 de 12 -

5 Para ello, necesitamos encontrar la(s) regla(s) CSS que determina(n) la estética de estos títulos. Gracias a estas herramientas esto es tan simple como realizar los siguientes 4 pasos que puedes ver en la captura de abajo: 1. Activar el selector de elementos con el icono al que apunta la flecha en el paso Una vez activado, puedes colocar el ratón sobre el elemento a examinar. En Firefox me gusta particularmente cómo los resalta. Además puedes ver cómo en el cuadro indica que el selector empleado en el HTML es h1.entry-title, es decir, aplican las reglas para etiquetas <h1> y la clase entry-title. Luego vemos estos conceptos un poco más despacio. 3. Dentro del árbol de código HTML, se ha identificado el elemento HTML exacto que has seleccionado antes con el ratón. Fíjate como concuerda con las reglas CSS. 4. En el lado derecho se listan todas las reglas que concuerdan con el elemento <h1> y la clase entry-title que corresponden al elemento HTML seleccionado. Los blogs WordPress suele tener muchas reglas CSS de diferentes ficheros, por eso verás que salen varias reglas. Lo importante es que el orden de prioridad es de arriba abajo. Echa ahora un vistazo con calma a la siguiente captura de pantalla y observa cómo se reflejan estos cuatro pasos en ella. Intenta reproducirlos en tu ordenador. Si usas Chrome o Internet Explorer te costará algo más porque sus interfaces de usuario varían algo, pero el proceso y resultados son idénticos. Ahora toca modificar el título. Para ello vamos a modificar la siguiente regla: - pag 5 de 12 -

6 Añadimos una línea (haz clic con el ratón justo delante de font-size y podrás editarla) para que quede así: El resultado estético es discutible, pero desde luego nadie podrá discutir que el cambio se ve con claridad smile Propiedades básicas que deberías conocer Mi consejo es: juega un poco con las siguientes propiedades y diferentes selectores para ver qué pasa. 1. Maquetación básica width: Ancho de un elemento. height: Alto de un elemento. vertical-align: Alineamiento vertical dentro de un elemento. margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha). padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuenta para el tamaño del elemento. float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. 2. Fuentes y texto font-family: Tipo de letra font-size: Tamaño de letra font-weight: Peso (normal, negrita, ) font-style: Estilo (normal, cursiva, ) text-decoration: Decoraciones como subrayado, tachado, etc. text-align: Alineación del texto (izquierda, derecha, etc.) text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas. 3. Color y fondos 4. Listas color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal. background-color: Color del fondo del elemento. background-image: Permite especificar una imagen de fondo. background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades. box-shadow: Crear un efecto de sombra para un elemento. - pag 6 de 12 -

7 list-style-image: Usar la imagen especificada como viñeta para la lista. list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista. 5. Bordes border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.) border-color: Color del borde. border-style: Diferentes estilos para el borde (sólido, puntos, etc.) border-radius: Permite crear esquinas redondeadas para un elemento. 4.-Vincular los estilos CSS a páginas HTML Ya sabes cómo crear reglas CSS, pero cómo se aplican a una página HTML? Para ello tienes básicamente 3 opciones: 4.1. Hojas de estilo CSS inline La primera opción consiste en usar el atributo style en un elemento HTML tal como se puede ver aquí: En este caso, no hay selector puesto que no hay elemento que seleccionar, es el que es. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión. Este tipo de reglas tienen mayor prioridad de todas las reglas. 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 CSS en el propio documento</title> </head> <p style="color: black; font-family: Verdana;">Un párrafo de texto.</p> </html> 4.2. Hojas de estilo CSS internas La segunda opción es escribir las reglas dentro de un elemento <style> dentro de esta etiqueta que, a su vez, se encontraría dentro del elemento <head> de la página HTML. Obviamente la desventaja es que en este caso las reglas sólo son visibles para esa página concreta en las que se han declarado y no se pueden usar para otras páginas. Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>). - pag 7 de 12 -

8 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 CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <p>un párrafo de texto.</p> </html> Este método se emplea cuando se define un número pequeño de estilos 4.3. Hojas de estilo CSS externas La última opción es la más usad y consiste en crear uno o varios ficheros con extensión.css en los cuales se declaran las reglas CSS. La manera de vincular estas reglas a una página HTML consiste en referencia el fichero.css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera. En este caso, la declaración también se incluye dentro del elemento <head> y tiene el siguiente aspecto: Aquí hay que tener también en cuenta que en el caso de usar varios ficheros el orden de inclusión marca precedencia en el orden inverso. En el caso de existir un conflicto por haber diferentes reglas con igual selector en varios ficheros, las reglas de los ficheros siguientes sobreescriben los anteriores. Es decir, si en estilos-1.css tenemos una regla como: Y luego en estilos-2.css otra que dice: La propiedad text-decoration genera un conflicto que se resuelve dando prioridad a la propiedad de estilos-2.css. Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos: 1) Se crea un archivo de texto y se le añade solamente el siguiente contenido: p { color: black; font-family: Verdana; } - pag 8 de 12 -

9 2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que el archivo tenga extensión.css y no.txt 3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>: <!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 CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> <p>un párrafo de texto.</p> </html> Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS: rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento. De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web 5. Comentarios Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario. El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo: /* Este es un comentario en CSS */ Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario: /* Este es un comentario CSS de varias lineas */ - pag 9 de 12 -

10 6. Selectores básicos 6.1. Selector universal * Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS): * { margin: 0; padding: 0; } 6.2. 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 selecciona todos los párrafos de la página: p {... } El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML: h1 { color: red; } 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: En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores: h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece 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; } 6.3. Selector descendente - pag 10 de 12 -

11 Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>: p span { color: red; } p a {color:blue; } Si el código HTML de la página es el siguiente: <p>... <span>texto1</span>... <a href="">...<span>texto2</span></a>... </p> Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior. No debe confundirse el selector descendente con la combinación de selectores: /* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ 6.4. Selector de clase Si se considera el siguiente código HTML de ejemplo: <p>lorem ipsum dolor sit amet...</p> <p>nunc sed lacus et est adipiscing accumsan...</p> <p>class aptent taciti sociosqu ad litora...</p> Cómo se pueden aplicar estilos CSS sólo al primer párrafo? Consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar: <p class="destacado">lorem ipsum dolor sit amet...</p> <p>nunc sed lacus et est adipiscing accumsan...</p> <p>class aptent taciti sociosqu ad litora...</p> Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico: p.destacado { color: red } - pag 11 de 12 -

12 6.5. Selectores de ID En ocasiones, es necesario aplicar estilos CSS 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 CSS: #destacado { color: red; } <p>primer párrafo</p> <p id="destacado">segundo párrafo</p> <p>tercer párrafo</p> En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado). La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. 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. Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un atributo id igual al indicado: p#aviso { color: blue; } A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas HTML diferentes. En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos elementos. - pag 12 de 12 -

ING. YIM ISAIAS APESTEGUI FLORENTINO

ING. YIM ISAIAS APESTEGUI FLORENTINO 1 2 CAPÍTULO 1. INTRODUCCIÓN 1.1. Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la

Más detalles

www.librosweb.es Introducción a CSS Javier Eguíluz Pérez

www.librosweb.es Introducción a CSS Javier Eguíluz Pérez Introducción a CSS Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/

Más detalles

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

JAV JA A V S A C S R C I R P I T

JAV JA A V S A C S R C I R P I T JAVASCRIPT Introducción Introducción JavaScript es un lenguaje de programación que se utiliza principalmente para crear paginas web dinámicas. i Una pagina web dinámica incorpora efectos en el texto, animaciones,

Más detalles

ESTRUCTURA DEL CÓDIGO HTML5

ESTRUCTURA DEL CÓDIGO HTML5 ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo

Más detalles

III. Hojas de estilo en cascada (CSS)

III. Hojas de estilo en cascada (CSS) III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS 4. Declaración avanzada de CSS

Más detalles

UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B)

UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B) APRENDERAPROGRAMAR.COM UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde

Más detalles

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite

Más detalles

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.) 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

Más detalles

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.

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

Más detalles

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo: 1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo

Más detalles

Introducción. Qué es CSS? Historia de las CSS

Introducción. Qué es CSS? Historia de las CSS Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación.

Más detalles

UNIDAD 1 GENERALIDADES HTML

UNIDAD 1 GENERALIDADES HTML UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.

Más detalles

Curso de Maquetación Web: HTML 5 y CSS

Curso de Maquetación Web: HTML 5 y CSS Curso de Maquetación Web: HTML 5 y CSS Aprende a maquetar sitios Web de forma ágil y profesional sin usar tablas. Separa el diseño visual del contenido y optimiza al máximo los estilos de las páginas Web.

Más detalles

5.3 CREAR FORMULARIOS

5.3 CREAR FORMULARIOS 5.3 CREAR FORMULARIOS Los formularios están diseñados para obtener información específica, hay diferentes tipos de formularios, como por ejemplo, facturas, formularios de pedidos, de registro DISEÑAR UN

Más detalles

Truco para encontrar y reemplazar líneas manuales por marcas de párrafo

Truco para encontrar y reemplazar líneas manuales por marcas de párrafo 1 Truco para encontrar y reemplazar líneas manuales por marcas de párrafo Esto se hace desde el menú Edición -> Buscar y Reemplazar En vez de buscar una palabra y reemplazarla por otra, esta herramienta

Más detalles

Unidad 2. Elementos de Word2007 (I)

Unidad 2. Elementos de Word2007 (I) Unidad 2. Elementos de Word2007 (I) Vamos a ver varias formas de iniciar Word2007 y cuales son los elementos básicos de Word2007, la pantalla, las barras, etc. Aprenderemos cómo se llaman, donde están

Más detalles

Formato de una presentación

Formato de una presentación Formato de una presentación capítulo 17 Formato de una presentación formato (presentación) En esta unidad aprenderá a crear presentaciones mediante plantillas y a configurar el formato de cada diapositiva,

Más detalles

ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ

ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)

Más detalles

Manual de Usuario. WordPress

Manual de Usuario. WordPress p Manual de Usuario. WordPress Cómo insertar noticias. PLATAFORMA DE SERVICIOS PSUV Sitio Web: http://www.psuv.org.ve Índice de Contenidos Introducción... 3 Cómo añadir una entrada?... 4 Insertar Título

Más detalles

Elaboración de Documentos en Procesadores de Textos

Elaboración de Documentos en Procesadores de Textos Las tablas permiten organizar la información en filas y columnas, de forma que se pueden realizar operaciones y tratamientos sobre las filas y columnas. Por ejemplo, obtener el valor medio de los datos

Más detalles

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar

Más detalles

HTML 2 / Atributos/etiquetas(Tags)

HTML 2 / Atributos/etiquetas(Tags) HTML 2 / Atributos/etiquetas(Tags) ATRIBUTOS bgcolor=#ff0000 Asigna un color en hexadecimal o en RGB a el fondo de todo el body ( la página) FGCOLOR="#00FF00" Asigna un color en hexadecimal

Más detalles

FORMATO CONDICIONAL EN EXCEL

FORMATO CONDICIONAL EN EXCEL FORMATO CONDICIONAL EN EXCEL El Formato Condicional es una herramienta muy útil como información gráfica adicional para los datos numéricos que están en celdas o en rangos. Este tipo de formato tiene un

Más detalles

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. 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

Más detalles

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3

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

Más detalles

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Navegadores Web. Aplicación que opera a través de Internet, interpretando la información de archivos y sitios web para que podamos ser capaces de leerla, (ya se encuentre ésta alojada en un servidor dentro

Más detalles

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

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

Más detalles

Qué es un Procesador de textos? Iniciar Word. Microsoft Word Microsoft Office 2010

Qué es un Procesador de textos? Iniciar Word. Microsoft Word Microsoft Office 2010 Microsoft Word 2010 Qué es un Procesador de textos? Un procesador de textos es una herramienta que sirve para el manejo de textos en general. Con un programa como éste es posible crear desde una carta

Más detalles

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página ACTIVIDADES DE HTML 1.- Estructura básica de un archivo HTML: ejemplo de código HTML Aquí va el contenido de la página Guardamos el archivo

Más detalles

UNIDAD 1. writer PRIMEROS PASOS. CURSO: LibreOffice

UNIDAD 1. writer PRIMEROS PASOS. CURSO: LibreOffice UNIDAD 1 PRIMEROS PASOS CURSO: LibreOffice writer 1 La interfaz En primer lugar vamos a familiarizarnos con los componentes de la pantalla de writer: Barra de título: Muestra el título del documento (O

Más detalles

DREAMWEAVER CS4 Código: 3492

DREAMWEAVER CS4 Código: 3492 DREAMWEAVER CS4 Código: 3492 Modalidad: Distancia Duración: Tipo A Objetivos: Aportar al alumno de un modo rápido y sencillo las competencias necesarias para la creación y diseño de páginas Web en Dreamweaver.

Más detalles

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

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

Más detalles

1. Temario Curso Web Design 2014

1. Temario Curso Web Design 2014 1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página

Más detalles

Microsoft Word 2003 (Completo)

Microsoft Word 2003 (Completo) Página 1 Horas de teoría: 28 Horas de práctica: 34 Precio del Curso: 179 Curso para conocer y aprender a manejar el procesador de textos Microsoft Word 2003, explicando las funciones necesarias para el

Más detalles

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos

Más detalles

MICROSOFT WORD AVANZADO. Nº Horas: 18. Objetivos:

MICROSOFT WORD AVANZADO. Nº Horas: 18. Objetivos: MICROSOFT WORD 2003 1. AVANZADO Nº Horas: 18 Objetivos: Curso para conocer y aprender a manejar el procesador de textos Microsoft Word 2003, explicando las funciones necesarias para el manejo del programa

Más detalles

Práctica de HTML (Curso )

Práctica de HTML (Curso ) Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de

Más detalles

Introducción al desarrollo web (idesweb) - 3 a ed.

Introducción al desarrollo web (idesweb) - 3 a ed. Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 4: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en

Más detalles

TECNOLOGÍA E INFORMÁTICA

TECNOLOGÍA E INFORMÁTICA TECNOLOGÍA E INFORMÁTICA GRADO: SÉPTIMO 01 02 TEMA: INSERTAR O CREAR TABLAS INDICADOR DE DESEMPEÑO: Utiliza la opción de crear tablas en Microsoft Word para agregar, editar y presentar la información tabulada.

Más detalles

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2 ver. 2 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/9 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2...1 Procedimiento 1: Diseño con Gimp de una

Más detalles

Clase 1 Excel

Clase 1 Excel Clase 1 Excel 2000 1 Elementos de Excel Excel es un programa del tipo Hoja de Cálculo que permite realizar operaciones con números organizados en una cuadrícula. Es útil para realizar desde simples sumas

Más detalles

1. Introducción a HTML

1. Introducción a HTML Introducción a HTML 1. Introducción a HTML 1. Introducción a HTML Qué es HTML? El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto estructurado,

Más detalles

Unidad 29: Formato condicional

Unidad 29: Formato condicional Unidad 29: Formato condicional 29.0 Introducción El formato condicional es un formato que depende del valor de una celda o de su contenido. Por ejemplo, en una base de datos de salarios del personal, usted

Más detalles

Antes de empezar... Crear una presentación

Antes de empezar... Crear una presentación Una vez que conozcas los conceptos básicos sobre cómo crear y editar documentos de Google Docs, y cómo acceder a ellos, lee esto para conocer los conceptos básicos específicos de las Presentaciones de

Más detalles

Mantenimiento de WordPress e Introducción a CSS

Mantenimiento de WordPress e Introducción a CSS Mantenimiento de WordPress e Introducción a CSS 6 / Junio / 2016 Alex Ollé @WanderlustTB fb.com/wanderlustmemories @wanderlust_memories PDF en: alexolle.es/tallerwordpress 1. Qué es WordPress? WordPress

Más detalles

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas

Más detalles

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Herramientas de DISEÑO: Recursos Gráficos Software de Diseño Lenguaje de Programación Contenido curso practico; LENGUAJE

Más detalles

Aplicaciones Telemáticas (2014-15)

Aplicaciones Telemáticas (2014-15) Aplicaciones Telemáticas (2014-15) Grado en Ingeniería Telemática (URJC) Jesús M. González Barahona, Gregorio Robles Martínez http://cursoweb.github.io GSyC, Universidad Rey Juan Carlos 23 de mayo de 2015

Más detalles

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos

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

Más detalles

ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA <pre> DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B)

ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA <pre> DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B) APRENDERAPROGRAMAR.COM ENCABEZADOS HTML A , PÁRRAFOS , APLICAR ESTILOS Y ETIQUETA DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4:

CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4: Curso Online Diseño y Desarrollo Web con HTML5, CSS y Dreamweaver CS4 Completo Curso Online de Diseño y Desarrollo Web mediante el lenguaje programación HTML5, la hoja de estilos CSS y el programa de diseño

Más detalles

TABLAS WORD La tercer opción es usar el vínculo Dibujar Tabla, aquí se dimensiona la tabla dibujándola con el mouse

TABLAS WORD La tercer opción es usar el vínculo Dibujar Tabla, aquí se dimensiona la tabla dibujándola con el mouse TABLAS WORD 2007 Las tablas permiten organizar la información en filas y columnas, de forma que se pueden realizar operaciones y tratamientos sobre las filas y columnas. Una tabla está formada por celdas

Más detalles

Programación Aplicada II Ing. Héctor Abraham Hernández. Enlaces HTML Objetivo: Agregar todo tipo de enlaces a los documentos HTML

Programación Aplicada II Ing. Héctor Abraham Hernández. Enlaces HTML Objetivo: Agregar todo tipo de enlaces a los documentos HTML Programación Aplicada II Ing. Héctor Abraham Hernández Guía #3 Fecha: 31/01/2011 Enlaces HTML Objetivo: Agregar todo tipo de enlaces a los documentos HTML Un enlace puede ser fácilmente detectado en una

Más detalles

3.2. MODIFICAR TABLAS. APLICAR FORMATO A LAS TABLAS.

3.2. MODIFICAR TABLAS. APLICAR FORMATO A LAS TABLAS. 79 3.2. MODIFICAR TABLAS. APLICAR FORMATO A LAS TABLAS. Si necesitas diseñar y decorar tablas de forma rápida y profesional, Word tiene la opción de aplicar estilos de tabla predefinidos. Estos estilos

Más detalles

Práctica 4: Edición de contenidos web

Práctica 4: Edición de contenidos web Comercio Electrónico Práctica 4: Edición de contenidos web Antonio Sanz ansanz@unizar.es Rafael del Hoyo rdelhoyo@ita.es Objetivo de la práctica En esta práctica se pretende realizar una introducción a

Más detalles

DISEÑO Y ELABORACIÓN DE PÁGINAS WEB

DISEÑO Y ELABORACIÓN DE PÁGINAS WEB 2015 DISEÑO Y ELABORACIÓN DE PÁGINAS WEB PROFESORA: ARIADNA HERNÁNDEZ ESCAMILLA 20/02/2015 Unidad de aprendizaje: Desarrollo de páginas estáticas Práctica no.1 Propósito de la práctica Insertar texto en

Más detalles

MICROSOFT WORD 2013 (COMPLETO)

MICROSOFT WORD 2013 (COMPLETO) MICROSOFT WORD 2013 (COMPLETO) Curso para conocer y aprender a manejar el procesador de textos Microsoft Word 2013, perteneciente a la suite ofimática Microsoft Office 2013, explicando todas las funciones

Más detalles

Fundamentos de Excel

Fundamentos de Excel Fundamentos de Excel Excel es una potente aplicación de hoja de cálculo y análisis de datos. Pero para usarla del modo más eficaz, es necesario comprender primero los aspectos básicos. Este tutorial presenta

Más detalles

UNIDAD 2 FORMATO BÁSICO DE FUENTE Y PÁRRAFO

UNIDAD 2 FORMATO BÁSICO DE FUENTE Y PÁRRAFO UNIDAD 2 FORMATO BÁSICO DE FUENTE Y PÁRRAFO COMPETIC 3 TEXTOS Formato de fuente 1 Podemos ver las posibilidades más comunes para variar el aspecto de los caracteres que están disponibles en la pestaña

Más detalles

Temario Programación Web para Web

Temario Programación Web para Web Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML

Más detalles

Por qué crear un canal en YouTube

Por qué crear un canal en YouTube Por qué crear un canal en YouTube La creación de un canal en YouTube ofrece numerosas oportunidades a las empresas para mejorar su comunicación. Veamos sus ventajas! Ventajas de un canal YouTube Visibilidad:

Más detalles

Como ya sabes, una lista es una serie de párrafos de texto que

Como ya sabes, una lista es una serie de párrafos de texto que 1. ORDENAR E INTERRUMPIR LISTAS Como ya sabes, una lista es una serie de párrafos de texto que van precedidos por un símbolo o por un número. Para ordenar los elementos de una lista, si es corta, puedes

Más detalles

Manual FOXTIR Editor HTML MOBILE MARKETING

Manual FOXTIR Editor HTML MOBILE MARKETING Manual FOXTIR Editor HTML MOBILE MARKETING Editor de HTML: en las siguientes páginas te explicaré una por una las diferentes funciones del Editor de HTML. Una vez ampliada la pantalla al espacio que te

Más detalles

CREACIÓN Y MODIFICACIÓN DE TABLAS

CREACIÓN Y MODIFICACIÓN DE TABLAS WORD EJERCICIO 8 CREACIÓN Y MODIFICACIÓN DE TABLAS Las tablas sirven para organizar la información de una forma clara, ordenándola en filas y columnas. Existen documentos consistentes todos ellos en una

Más detalles

GLOSARIO DE CONCEPTOS Y TÉRMINOS

GLOSARIO DE CONCEPTOS Y TÉRMINOS GLOSARIO DE OFFICE GLOSARIO DE CONCEPTOS Y TÉRMINOS 1. Que es power point: Es un programa que pertenece a Microsoft office el cual fue diseñado para crear presentaciones, ya que incorpora una gran cantidad

Más detalles

EFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D)

EFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D) APRENDERAPROGRAMAR.COM EFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

de la parte inferior izquierda de la ventana, excepto para el caso de la Presentación preliminar que se activa desde el menú Archivo o desde el botón

de la parte inferior izquierda de la ventana, excepto para el caso de la Presentación preliminar que se activa desde el menú Archivo o desde el botón MICROSOFT WORD NIVEL MEDIO DE WORD CONTINUAMOS CON MICROSOFT WORD DISEÑO DE IMPRESIÓN Y VISUALIZACION DE DOCUMENTOS Word presenta seis vistas de trabajo y de presentación de los documentos: Normal, Diseño

Más detalles

Vamos a crear un EPUB desde cero

Vamos a crear un EPUB desde cero Vamos a crear un EPUB desde cero Qué es un EPUB? El EPUB es un formato abierto de libro digital desarrollado por el IDPF. Tiene vocación de ser formato estándar. EPUB es una especificación abierta para

Más detalles

HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B)

HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B) APRENDERAPROGRAMAR.COM HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA . ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B) Sección: Cursos Categoría: Tutorial básico

Más detalles

Fundamentos de Word. Identificar los elementos de la interfaz de usuario que puede usar para realizar las tareas básicas.

Fundamentos de Word. Identificar los elementos de la interfaz de usuario que puede usar para realizar las tareas básicas. Fundamentos de Word Word es una potente aplicación de procesamiento de texto y diseño. Pero para usarla del modo más eficaz, es necesario comprender primero los aspectos básicos. Este tutorial presenta

Más detalles

Grupo de Ingeniería del Software. Conceptos básicos de formularios HTML

Grupo de Ingeniería del Software. Conceptos básicos de formularios HTML escuela técnica superior de ingeniería informática HTML Estático: Formularios Departamento de Lenguajes Grupo de Ingeniería del Software Noviembre 2004 Conceptos básicos de formularios HTML Los formularios

Más detalles

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver

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

Más detalles

Anexo: Manejo del editor HTML

Anexo: Manejo del editor HTML Anexo: Manejo del editor HTML 1 Anexo: Manejo del editor HTML Advertencia: En aquellas pantallas en las que salga el editor de texto, no hay que usar el tabulador para desplazarse: puede llegar a bloquearlo.

Más detalles

Fabricante: Interno Grupo: Plantilla Subgrupo: Curso

Fabricante: Interno Grupo: Plantilla Subgrupo: Curso C/Comandante Zorita 4 28020 Madrid/ info@ceticsa.es 902 425 524 / 91 700 01 17 Diseño y Desarrollo Web Fabricante: Interno Grupo: Plantilla Subgrupo: Curso Formación: Presencial Horas: 24 Introducción

Más detalles

Elementos de un programa en C

Elementos de un programa en C Elementos de un programa en C Un programa en C consta de uno o más archivos. Un archivo es traducido en diferentes fases. La primera fase es el preprocesado, que realiza la inclusión de archivos y la sustitución

Más detalles

WorfArt. Final. Obra de teatro. Grupo Gesfomedia

WorfArt. Final. Obra de teatro. Grupo Gesfomedia Final MÁS OPCIONES Vas a crear un cartel para anunciar una obra de teatro. Para hacerlo usa el WordArt y algunas de las opciones especiales que has aprendido. El resultado tiene que ser lo más parecido

Más detalles

Ejemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)

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

Más detalles

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 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

Más detalles

ojovoz Una plataforma de código abierto para la creación de memorias comunitarias. Manual del usuario

ojovoz Una plataforma de código abierto para la creación de memorias comunitarias.  Manual del usuario ojovoz Una plataforma de código abierto para la creación de memorias comunitarias. http://ojovoz.net Manual del usuario 1. CÓMO INSTALAR OJOVOZ. 1. ojovoz funciona en la mayoría de teléfonos con sistema

Más detalles

Capítulo 1 Documentos HTML5

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

Más detalles

Manual de Plantillas para Listados

Manual de Plantillas para Listados 1 Manual de Plantillas para Listados www.sagasoluciones.com info@sagasoluciones.com C/ Salado 11 Local 10. 41010 Sevilla T. + 34 954 45 72 75 F. + 34 954 45 75 72 CONTROL DEL DOCUMENTO Realizado 21/09/2010

Más detalles

Kompozer: Crear una hoja de estilos

Kompozer: Crear una hoja de estilos Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

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

Más detalles

PASOS PARA INGRESAR A WORD 2007

PASOS PARA INGRESAR A WORD 2007 PASOS PARA INGRESAR A WORD 2007 1.- Voy al inicio 2.-busco en todos los programas el maicrosft ofice 3.-y luego elijo el maicrosoft word 2007 Hay varias formas de arrancar Word. Desde el botón Inicio,

Más detalles

vatar, que es una imagen que se mostrará cada vez que publiques un post o un comentario.

vatar, que es una imagen que se mostrará cada vez que publiques un post o un comentario. Abre un blog en elcorreo.com Registro en la comunidad de elcorreo.com Debido al cambio de plataforma que hemos realizado, para crear un nuevo blog será necesario que estés registrado como usuario en la

Más detalles

Capítulo 3 Estilo para un documento HTML: CSS

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:

Más detalles

DISEÑO DE PAGINAS WEB

DISEÑO DE PAGINAS WEB DISEÑO DE PAGINAS WEB HTML HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben laspáginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto

Más detalles

Contenido. Curso de Diseño básico de páginas web (online)

Contenido. Curso de Diseño básico de páginas web (online) Contenido Curso de Diseño básico de páginas web (online) ACCIóN FORMATIVA Curso de Diseño básico de páginas web (online) La presente guía tiene como finalidad proporcionar al alumno/a una visión general

Más detalles

Creación de una página web accesible sencilla

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

Más detalles

Hacemos clic con el ratón para situar el cursor donde queremos que aparezca la tabla. Nos vamos a la barra de Menús, Insertar, Tabla

Hacemos clic con el ratón para situar el cursor donde queremos que aparezca la tabla. Nos vamos a la barra de Menús, Insertar, Tabla 8.- Composer: Tablas 8.1. Insertar una tabla Hacemos clic con el ratón para situar el cursor donde queremos que aparezca la tabla. Nos vamos a la barra de Menús, Insertar, Tabla Aparecerá el cuadro de

Más detalles

EFECTOS RÁPIDOS EN LOS TEXTOS

EFECTOS RÁPIDOS EN LOS TEXTOS EFECTOS RÁPIDOS EN LOS TEXTOS Un texto con estilo añade espectacularidad y dota de carácter a cualquier diseño. Gimp ofrece muchas posibilidades creativas para crear, adaptar y manipular texto. Algunas

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

UNIVERSIDAD METROPOLITANA LATIN CAMPUS GUÌA DE ESTUDIO Y EVALUACIÒN. Informática General IV- POWER POINT TEXTO ELECTRÓNICO GRATUITO EDITADO POR UMLA

UNIVERSIDAD METROPOLITANA LATIN CAMPUS GUÌA DE ESTUDIO Y EVALUACIÒN. Informática General IV- POWER POINT TEXTO ELECTRÓNICO GRATUITO EDITADO POR UMLA UNIVERSIDAD METROPOLITANA LATIN CAMPUS GUÌA DE ESTUDIO Y EVALUACIÒN Informática General IV- POWER POINT TEXTO ELECTRÓNICO GRATUITO EDITADO POR UMLA EDUARDO TAGER RAME LICENCIATURA EN DERECHO MATRICULA

Más detalles

Estilos y temas. Contenido TECNOLOGÍA WORD

Estilos y temas. Contenido TECNOLOGÍA WORD Contenido 1. Crear un estilo rápido... 2 2. Cambiar un estilo... 2 3. Aplicar un estilo... 3 4. Hacer que un conjunto de estilos rápidos sea el conjunto de estilos predeterminado... 3 4.1 Elegir un conjunto

Más detalles

Fundamentos de PowerPoint

Fundamentos de PowerPoint Fundamentos de PowerPoint Pow erpoint es una potente aplicación de presentaciones. Pero para usarla del modo más eficaz, es necesario comprender primero los aspectos básicos. Este tutorial presenta algunas

Más detalles

Actividad 3: Codificación básica de un texto en HTML

Actividad 3: Codificación básica de un texto en HTML Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html

Más detalles

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 Código: 1413005 OBJETIVOS: Para diseñar y publicar una página Web, saber maquetar una página Web, saber crear animaciones, etc. CONTENIDOS: DISEÑO

Más detalles