1. Introducción de estilo en sitios web
|
|
|
- Ángeles Rubio Morales
- hace 8 años
- Vistas:
Transcripción
1 Informática Grado en Ingeniería Agrícola Curso 2011/2012 Nombre: Fecha: /02/2012 Grupo: 1 PRÁCTICA 4 CSS. INTRODUCCIÓN DE ESTILO EN SITIOS WEB Esta práctica estará dividida en dos partes. En la primera aprenderemos los pasos básicos para introducir reglas de estilo en una página web. Veremos distintas formas de conseguirlo, pero en particular nos centraremos en el uso de ficheros externos para conseguir una mayor separación entre contenido (código html) y estilo (css). La segunda parte la dedicaremos a uno de los aspectos en los que CSS es más útil, el posicionamiento de elementos dentro de páginas web. Para ello desarrollaremos una página web, a modo de ejemplo, en la que veremos cómo colocar distintos objetos dentro de la misma por medio de posicionamiento absoluto. 1. Introducción de estilo en sitios web En esta práctica vamos a trabajar con CSS (Cascading Style Sheets), hojas de estilo en cascada, que es una manera de definir la presentación de documentos estructurados escritos en HTML (o en cualquier lenguaje de marcas como XHTML, XML ). Como ya observamos en prácticas anteriores, el propio DTD Strict ya sugería en su introducción ( que todos los elementos de estilo deberían ser desplazados a hojas CSS, así que uno de nuestros objetivos al usar CSS será seguir esta recomendación. Hasta la fecha han aparecido tres versiones de CSS. CSS1 fue aprobado y publicado en Posteriormente, CSS2 y CSS2.1 no han llegado a ser aprobados como definitivos, pero sí que tienen el status de Recomendación por la w3c. CSS3 sigue siendo, por el momento, trabajo en progreso. Además, como se puede observar en _version_support, si bien CSS2.1 es Mostly supported en casi todos los motores de los navegadores, CSS3 sólo dispone de Partial support por el momento. Por los anteriores motivos, nosotros nos atendremos siempre a las especificaciones propias de CSS 2.1. Durante esta práctica vamos a manejar esencialmente tres documentos de Internet como apoyo: Apuntes de CSS (a los que nos referiremos como R1), la especificación CSS2.1 (R2) y, de nuevo, la especificación HTML es/cover.html (R3). Se pueden encontrar múltiples editores de CSS. En realidad, cualquier editor de texto (bloc de notas, Pspad, Notepad++) permite crear y editar hojas de estilo. En las prácticas recomendaremos el uso de TopStyle Lite ( que si bien es una herramienta que en 1-16
2 su versión libre ya no recibe soporte, se puede descargar gratuitamente y permite trabajar de manera más cómoda con hojas CSS. Si quieres aprender un poco más sobre qué son las hojas de estilo, qué nos permiten hacer y cómo, puedes leer la Introducción de R1, la parte de Introducción a CSS 2.1 en R2 ( y el capítulo correspondiente en R3 es/present/styles.html. Para poder hacer la práctica, en primer lugar, vamos a recuperar las página HTML que creamos en la práctica 3, horario.htm y la vamos a renombrar como practica04_horario.htm. Lo primero que debemos saber es cómo introducir estilos CSS, u hojas de estilo, en un documento HTML. Puedes encontrar una explicación detallada en Existen tres formas distintas de hacerlo: 1. Información de estilo en línea: Por medio del atributo style aplicado a cualquier tag de HTML. Al atributo style le asignamos en este caso el valor de estilo que deseemos. Por ejemplo: <p style="font-size: 12pt; color: fuchsia"> Un párrafo con estilo </p> La regla anterior de estilo define para el párrafo <p> </p> afectado un tamaño de fuente de 12 puntos en color fucsia. Esta forma de trabajar está desaconsejada porque no separa el contenido del estilo y porque no permite ninguna portabilidad de los estilos entre distintas páginas html, así que procuraremos evitarla. 2. Información de estilo en cabecera: dentro de la cabecera de nuestro documento HTML (es decir, entre los tags <HEAD> </HEAD>) podemos utilizar el tag <STYLE> </STYLE> para situar una serie de reglas CSS que nos permitan definir el estilo de la página web correspondiente. <HEAD> <STYLE type="text/css"> H1 {border-width: 1px; border: solid; text-align: center </STYLE> </HEAD> El comando anterior especificaría, para todos los encabezados H1 de nuestra página web, un borde de 1 píxel de anchura, de tipo sólido, y que el texto aparezca alineado al centro. Con esta forma de trabajar, si bien hemos conseguido separar el estilo del contenido, de nuevo no hemos conseguido que nuestro estilo sea fácilmente portable (por ejemplo, que se pueda aplicar a todas las páginas web de nuestro sitio web). 3. Hojas de estilo externas: en este caso la hoja de estilo (generalmente un documento con extensión.css) y el sitio web (el documento.html 2-16
3 o.htm) son distintos. La forma de vincular ambos es por medio del elemento <LINK> (cuyo tag de cierre está prohibido). <HEAD> <LINK href="miestilo.css" rel="stylesheet" type="text/css"> <LINK href="miestilo2.css" rel="stylesheet" type="text/css"> </HEAD> En el fragmento de código anterior hemos decidido que vamos a aplicar las hojas de estilo de nombre miestilo.css y miestilo2.css a nuestra página web. Es importante notar que el valor del atributo href puede ser cualquier URI (Uniform Resource Identifier) y por tanto cualquier URL, incluidas las de páginas css ajenas a nuestro sitio web. Esta forma de introducir estilos css es la mejor tanto desde el punto de vista de la separación de contenido y estilo como del de la portabilidad de los estilos, y por tanto será la que utilicemos en adelante. 1. Crea con TopStyle Lite una hoja de estilos horario.css (en la misma carpeta que tengas la página practica04_horario.htm ) y edita tu página HTML para que haga uso de la página css. 2. Recupera ahora el enlace 3. El primer paso para poder insertar estilos en una página web consiste en introducir en la misma ciertos elementos que nos permitan controlar la estructura de la misma. Aunque en este caso no sea necesario, ya que nuestra página html sólo contiene el horario, vamos a crear un elemento <div> </div> que contenga todo el cuerpo de la tabla: <body> <div id= horario > </div> </body> Puedes observar que el elemento <div> </div> no ha introducido ningún cambio en la forma en que se visualiza la página web. Sin embargo, el elemento div nos permite estructurar la página en fragmentos (o áreas) sobre las cuales aplicaremos posteriormente los estilos deseados. El elemento div es un elemento de nivel de bloque. En HTML también disponemos del elemento <span> </span>, de nivel de línea, que si bien tampoco modifica el aspecto de la página, nos permitirá introducir estilos a fragmentos de nuestra página de nivel de línea (tienes más información en Es importante notar también la presencia del atributo id= horario. El atributo id crea un identificador, que debe aparecer una única vez en la página web, y del que luego haremos uso para definir los estilos. Si queremos que un mismo estilo se aplique a múltiples elementos (p.ej. a varias celdas de una tabla, o a varios párrafos de texto), disponemos del 3-16
4 atributo class= nombre. Puedes encontrar una explicación más detallada sobre los atributos id y class en es/struct/global.html#class-id-example. 4. Ahora que ya le hemos dado un primer nivel de estructura a nuestro documento por medio de div, veamos cómo podemos incluir elementos de estilo. En primer lugar, repasa el código html de la página practica04_horario.htm y elimina todos los elementos de estilo que encuentres en la misma (p.ej., elementos border o width de table, elementos align o valign de tbody, etc; mantén el colgroup tal y como lo tenías definido). Comprueba el resultado en tu navegador. Vamos a ver cómo podemos recuperar desde CSS esas propiedades. Introduce en el documento CSS los siguientes comandos: #horario TABLE{ border-style: solid; border-width: 2px 2px 2px 2px; border-color: Black; border-spacing: 0px; Guarda el fichero horario.css y comprueba el resultado en el navegador. Ha cambiado? Veamos un poco más detalladamente cómo hemos definido la regla de estilo CSS. En primer lugar, por medio de #horario TABLE{ señalamos que vamos a modificar alguna de las propiedades de cualquier elemento TABLE que se encuentre dentro del id horario. Es lo que se conoce como el selector de la regla de estilo. Una vez dentro del selector, la definición de propiedades de estilo se hace por medio de pares: propiedad: valor; border-style: solid; border-width: 2px 2px 2px 2px; border-color: Black; border-spacing: 0px; Para la propiedad estilo de bordes, hemos especificado el valor sólido. Para la anchura de los bordes, hemos especificado valores 2 píxeles (arriba), 2px (derecha), 2px (abajo) y 2px (izquierda). Para el color de los bordes hemos especificado el valor negro. Finalmente, para el espacio entre los bordes de la tabla y las celdas de la misma, hemos especificado un valor de 0 píxeles. (Nota: el selector anterior, #horario TABLE{ se refiere a cualquier tabla que se encuentre dentro del id horario. Es importante distinguirlo del selector TABLE#horario{ que haría referencia a la única tabla con id horario, es decir, en nuestro caso concreto, ninguna, ya que el id horario corresponde al div que contiene a todo el body). 4-16
5 5. Trata de recuperar todos los bordes de las celdas de la tabla (selector TD dentro del id horario) introduciendo en la hoja css el selector y los pares propiedad:valor correspondientes (observa que la propiedad border-spacing deja de tener significado en este selector). Utiliza también la propiedad padding (con un valor de 10 píxeles) para separar el contenido de las celdas de los bordes de las mismas. Comprueba el resultado en el navegador. 6. Utiliza el selector tbody del id horario para conseguir que todos los textos aparezcan alineados en las celdas (propiedad text-align, valor center). Comprueba el resultado. 7. Utiliza el selector propio de #horario para modificar la fuente de la página web (propiedad font-family, valor Verdana, Geneva, Arial, Helvetica, sansserif;). Comprueba el resultado. 8. Utiliza el selector caption del id horario para definir las siguientes reglas sobre el título de la tabla. Propiedad text-align, valor left; propiedad fontsize, valor larger; propiedad font-weight, valor bolder. Comprueba el resultado. 9. Veamos ahora cómo podemos conseguir que la celda en la primera fila de la tabla tenga un color de fondo amarillo. Crea tu propio id en la página html en dicha celda (recuerda que no se puede llamar horario ). Ve ahora a la página CSS; define el selector del id que has creado, y especifica las propiedades background-color, font-size y font-weight para que la celda se muestre de color amarillo, con la letra un poco mayor y en negrita. Comprueba el resultado. 10. Nuestro siguiente paso consiste ahora en colorear el nombre de las asignaturas en la tabla. Se podría pensar en hacerlo por medio del selector #horario {color: red pero esto colorearía todo el texto de la tabla de rojo (puedes comprobarlo). Parece necesario utilizar algún otro selector que nos permita trabajar de forma más detallada. Aquí es donde el selector <span> </span> y el atributo class nos van a ser de ayuda. Vamos a definir una class asignatura que vamos a asignar a todos los nombres de asignatura que aparecen en la tabla por medio del elemento span. Puedes conseguir dicho efecto de la siguiente forma: <span class="asignatura">electrotecnia, máquinas y <br> motores </span> Repite el proceso en todo el código html para identificar todos los nombres de asignaturas de la tabla. 5-16
6 Veamos ahora cómo podemos definir las reglas de estilo para la clase asignatura. Añade la siguiente regla de estilo a tu página css y comprueba el resultado: span.asignatura{ color: Red; font-weight: bold; Observa la notación distinta para asignar estilo a elementos en un id (con #) y para elementos en una clase (con.). 11. Define una nueva clase grupo y asígnala a los grupos en el horario. Puedes asignarla en los elementos <em> </em> (si habías hecho uso de ellos) o a través de span. Define la clase grupo para que contenga la propiedad font-style con valor italic, la propiedad font-weight con valor bolder y la propiedad color con valor Teal. 12. Crea una nueva class profesor, asígnala a los profesores que aparecen en el horario y define en el css su propiedad color como Teal. 13. Define una nueva clase horas, asígnala a la primera columna del horario ( cómo?, por medio de span, o también puede hacerse por medio de td?) y asigna su propiedad vertical-align como top. 14. Valida la página html con el validador en Introduce el icono de validación. CSS 2.1 dispone de una especificación formal (R2) y por tanto dispone también de un validador propio. Comprueba la validez de tu página ( e introduce el icono correspondiente en tu página html. El resultado final debería ser parecido al siguiente: 6-16
7 15. Sube la página a belenus y enlázala desde tu página de inicio. 7-16
8 2. Posicionamiento en CSS En esta parte de la práctica vamos a ver algunos nuevos selectores y también algunas ideas sobre posicionamiento en CSS. También veremos cómo se pueden aplicar diversas hojas de estilo css sobre una misma página HTML de forma simultánea. Para ello, lo que vamos a hacer es recuperar el fichero index.htm que generaste en la práctica 3 (y que debería estar colgado en belenus). Haz una copia del mismo como practica03.htm, y sobre el fichero index.htm empezaremos a realizar los cambios sugeridos en esta parte de la práctica. Puedes encontrar un tutorial bastante completo sobre posicionamiento con css en la página 1. En primer lugar, vamos a introducir un poco de estructura en nuestra página web. Para ello vamos a introducir varios elementos div, que nos permitan crear distintas cajas, que serán las que más adelante posicionaremos en nuestra página web. El cuerpo de la página index.htm debería tener el siguiente aspecto: <body> <div id= cabecera > <p>bienvenido a la página web de </p> </div> <div id= indice > <p>aquí es donde va la lista de prácticas</p> </div> <div id= contenido > <p>aquí podrías poner un texto largo contando </p> </div> <div id= piedepagina > <address>aquí deberías poner tu dirección y datos de contacto</address> </div> </body> 2. Crea una hoja de estilo de nombre posiciones.css. Enlázala con tu código html: <head> <LINK rel="stylesheet" type="text/css" href="posiciones.css"> </head> 3. Las propiedades CSS que nos permitirán modificar el posicionamiento de objetos (en nuestro caso de las cajas <div> </div>) serán position, left, top, height, width (hay algunas otras que no vamos a utilizar en este ejemplo, pero que puedes encontrar en las especificaciones de CSS o en el tutorial señalado al principio de la práctica). Los valores que puede tomar position son: 8-16
9 - static: es el valor por defecto, y no hace falta especificarlo. Muestra los elementos en el orden natural en el que aparecen en la página web (de arriba hacia abajo, ajustados a la izquierda). - absolute: por medio de este valor sacamos el elemento del flujo normal de la página y lo posicionamos por medio de coordenadas (definidas con las propiedades left, top, height, width) con respecto a los márgenes y al tamaño de la ventana del navegador (o de la caja contenedora). Las coordenadas (left, top) que fijamos son las de la esquina superior izquierda de la caja. El tamaño (height, width) es relativo al de la caja contenedora. Hay que tener cuidado con el posicionamiento absoluto, porque podríamos situar unos elementos encima de otros, haciendo algunos de ellos invisibles. - relative: el posicionamiento relativo es una mezcla de static y absolute. Los elementos colocados como relativos toman como posición inicial la que tendrían si fueran static, y a partir de ahí los podemos mover conforme a los valores que le asignemos a las propiedades left, top, height, width. Los valores que pueden tomar las propiedades left, top, height, width son: - una longitud: se puede especificar un número de píxeles, centímetros (por lo general usaremos siempre píxeles); - un porcentaje: se puede especificar un tanto por ciento, que hará referencia a la caja contenedora de nuestro elemento. Salvo que tengamos un buen motivo para lo contrario, la recomendación es usar siempre porcentajes en lugar de valores absolutos, ya que eso permitirá que el navegador redimensione y recoloque los elementos de forma adecuada. Basado en las anteriores ideas vamos a introducir ahora en nuestra página de estilos posiciones.css el siguiente código: #cabecera { #indice { position: absolute; top: 2%; left: 2%; height: 10%; width: 93%; position: absolute; top: 13%; left: 2%; width: 25%; height: 75%; #contenido { position: absolute; top: 13%; left: 30%; 9-16
10 #piedepagina { width: 65%; height: 75%; position: absolute; top: 89%; left: 30%; height: 10%; width: 65%; Trata de entender los distintos valores que hemos asignado. Guarda la página y observa el resultado (puedes utilizar la regla de estilo #cabecera, #contenido, #indice, #piedepagina{ border: solid; para comprobar los bordes de cada una de las cajas definidas). 4. En la caja que hemos etiquetado como contenido vamos a separar dos partes. Queremos situar una imagen (por ejemplo, una foto personal) en la parte superior derecha de la caja contenido. El resto de la caja contenido la vamos a usar simplemente como contenedor de texto. Veamos cómo podemos hacer lo mismo por medio del uso de divs. <div id= contenido > <div id= imagen > <img id= mi_foto alt= Foto de src= avatar.png > </div> <div id= texto > <p> Aquí podrías poner un texto largo contando </p> </div> </div> (Puedes encontrar la imagen avatar.png en aunque sería mejor que usaras tu propia imagen). 5. Posiblemente, ni el tamaño de la imagen ni la colocación del texto con respecto a la misma son los que deseas. Veamos cómo podemos modificar ambos. Vamos a modificar los atributos del bloque imagen para que cumpla los dos siguientes fines: - que la imagen quede ajustada en la esquina superior derecha de la caja contenido; - que el texto que escribamos a su izquierda vaya fluyendo a lo largo de la imagen, en vez de situarse justo debajo. Incluye para ello las siguientes reglas de diseño en tu fichero posiciones.css : 10-16
11 #imagen{ float: right; /*Posicionamos la imagen a la derecha con el texto flotando a la izquierda*/ width: 11%; /*Definimos el tamaño de la caja como un 11% de la anchura de la caja contenido */ 6. Ha quedado la imagen escalada al tamaño de la caja que ocupa? Si no es así, e incluso si es así, para asegurarte de que la imagen se reescalará adecuadamente al cambiar el tamaño de la ventana del navegador, haz los siguientes pasos: - Crea un fichero imagenes.css. - Introduce en el mismo la siguiente regla: img#mi_foto{ width: 100%; /*Escalamos la imagen para que su anchura sea el 100% del de la caja imagen */ - En el código html, enlaza la nueva hoja css: <head> <LINK rel="stylesheet" type="text/css" href="posiciones.css"> <LINK rel="stylesheet" type="text/css" href="imagenes.css"> </head> Comprueba el resultado en el navegador. Se redimensiona la imagen al cambiar el tamaño de la ventana del navegador? Si quieres introducir alguna propiedad más sobre la imagen introducida (bordes, padding ), hazlo en el fichero imagenes.css. 7. Veamos ahora cómo podemos modificar las fuentes por defecto que ha elegido el navegador para la página web. Crea un nuevo fichero fuentes.css, y enlázalo con la página html (de igual modo a como has hecho con imagenes.css ). Modifica las fuentes del div cabecera ( qué selectores puedes usar?) para que, al menos: - la familia de fuentes (propiedad font-family ) sea Arial, Helvetica, sansserif; - el estilo de la fuente (propiedad font-style ) sea oblicuo; - el tamaño de la fuente ( font-size ) sea x-large ; - la alineación del texto ( text-align ) sea centrada. Modifica las fuentes del div indice para que, al menos: - el texto sea transformado (propiedad text-transform ) a minúsculas (valor lowercase ); - la familia de fuentes sea Verdana, Geneva, Arial, Helvetica, sans-serif; - el tamaño de la fuente sea large
12 Modifica las fuentes del div contenido para que, al menos: - la familia de fuentes sea Verdana, Geneva, Arial, Helvetica, sans-serif; Modifica las fuentes del div piedepagina para que, al menos: - el peso de la fuente (propiedad font-weight ) sea negrita (valor bold ); - el texto se alinee al centro. Comprueba el resultado en el navegador. 8. Genera un nuevo fichero listas.css y enlázalo con tu página web. En el mismo vamos a modificar algunas de las propiedades de las listas que se muestran en la columna indice. Organiza tu código html en el div indice para que: - la lista de prácticas sea una lista desordenada (tag <ul> </ul>); - las sublistas (como por ejemplo en la práctica 5 ó 6) sean listas ordenadas (tag <ol> </ol>). Ahora, en tu fichero listas.css, modifica las listas desordenadas del div indice ( qué selector debes usar?) para que las mismas no muestren tipo de estilo de lista (propiedad list-style-type, valor none ). Puedes comprobar también otros valores de esta propiedad. Modifica las listas ordenadas del div indice para que tampoco muestren tipo de estilo de lista (propiedad list-style-type, valor none ). Vamos a modificar ahora los elementos li que aparecen dentro de listas ordenadas que son parte de listas desordenadas para que su tamaño de fuente sea más pequeño. Puedes conseguir lo mismo con la siguiente regla de estilo: #indice ul ol li{ font-size: smaller; El anterior selector es lo que se conoce como un selector contextual y lo puedes leer, en lenguaje natural (de atrás hacia delante), como los elementos li que vayan dentro de una ol que está dentro de una ul (y no hará referencia, por ejemplo, a los li que estén dentro de una ul ). Comprueba el resultado. 9. Crea un nuevo fichero enlaces.css y enlázalo con tu página html. Vamos a ver ahora cómo podemos modificar las propiedades de presentación de los enlaces que aparecen en tu página. Visita en la página la sección La pseudo clase :link y observa las propiedades y los valores que podemos asignar sobre enlaces
13 Define en tu fichero enlaces.css las siguientes reglas de estilo: - en el div indice, los enlaces que no han sido visitados todavía ( qué selector debes usar?) deben aparecer con la fuente en color rojo (propiedad color, valor Red ) y sin subrayar (propiedad text-decoration, valor none ); - en el div indice, los enlaces que sean hijos directos de un elemento li y que tengan el ratón situado encima deben aparecer en color gris, con el texto transformado en mayúsculas y el color de fondo blanco. Utiliza la siguiente regla para ello: #indice li>a:hover{ background-color: White; color: Gray; text-transform: uppercase; - en el div indice, los enlaces que ya hayan sido visitados deben aparecer con la fuente en color rojo, en estilo de fuente itálica (propiedad fontstyle, valor italic ) y sin subrayar (propiedad text-decoration, valor none ). En el div piedepagina debería aparecer como enlace, al menos, tu dirección de correo para que te puedan contactar en caso de que alguien tenga dudas o sugerencias sobre tu sitio web. Modifica los enlaces del div piedepagina para que: - los enlaces sin visitar ( a:link ) aparezcan con la fuente en color verde y sin subrayar; - los enlaces, cuando tengan el ratón encima ( a:hover ) aparezcan con color de fondo ( background-color ) blanco, la propiedad border-style con valor solid, la propiedad border-color con valor black, el color de fuente Teal y el estilo de fuente ( font-style ) con valor normal. Comprueba el resultado. 10. Crea un nuevo fichero fondos.css donde vamos a modificar los fondos de cada una de las cajas ( div ) de nuestro sitio web. Primero debes elegir qué imágenes deseas colocar para cada una de tus cajas. En general, deberían ser imágenes que no contengan tonos oscuros (salvo que cambies el color de tu fuente), y a ser posible de un tamaño igual o mayor que el de la caja donde las quieras situar (escalar imágenes al tamaño de un caja automáticamente requiere propiedades que no veremos en esta práctica). Puedes ver algunas imágenes de muestra en o seleccionar algunas de tu gusto. Realiza los siguientes pasos: - selecciona una imagen y colócala como fondo del body de la página web: 13-16
14 body{ background-image: url(mondrian.jpg); Ten en cuenta las siguientes cuestiones. Hemos utilizado como selector body, que hasta hora no conocíamos, y nos permite referirnos a todo el cuerpo de la web. En segundo lugar, la imagen mondrian.jpg debe estar en el mismo directorio en que esté la página css. Observa que podríamos usar como valor de url la url de cualquier imagen accesible por Internet, sin necesidad de que esté en nuestra web (aunque el tiempo de carga de la imagen podría ser muy largo, o incluso la imagen podría dejar de estar disponible en esa url). - selecciona otras imágenes y sitúalas como fondo de los div cabecera, indice, contenido y piedepagina. Comprueba el resultado (y asegúrate de que la legibilidad de la página sigue siendo posible). Si no también podrías intentar modificar el color de alguna fuente de tu página web para que la misma sea legible. Una de las tareas más importantes en el diseño de un página web es la de conseguir un equilibrio entre la legibilidad y accesibilidad de la misma y una presentación atractiva para los usuarios. 11. Los textos que hay en cada caja podrían aparecer demasiado cercanos a los bordes de las mismas. Para evitar ese efecto, que dificulta la legibilidad, vamos a crear un nuevo fichero margenes.css. Enlázalo con tu página web. Especifica en el mismo las siguientes reglas de estilo: - a todos los párrafos (p) del div texto, asígnales una propiedad marginleft con valor 2% ; - a todos los párrafos del div indice, asígnales una propiedad margin-left con valor 2%. Comprueba el resultado. Observa la diferencia entre las reglas que has especificado y la regla #indice{margin-left: 2%;. En qué cambia el resultado? 12. Antes de hacer el último ejercicio, deberías tratar de escribir al menos 6 u 8 líneas de texto en la caja texto y en la caja indice. Si no se te ocurre nada por el momento, puedes añadir líneas simplemente cortando y pegando el texto original que había en las cajas (<p>aquí podrías poner un texto largo contando </p>). Redimensiona la ventana del navegador y hazla más pequeña. Cambia dinámicamente el tamaño de las cajas (o div s)? Qué sucede cuando un texto es más largo que su caja contenedora? Sale de la misma pisando otras zonas de la página web? Vamos a intentar eliminar ese efecto. La solución aquí propuesta consiste en hacer que la caja contenedora añada una barra de scroll en el caso de 14-16
15 que el texto sea más largo que el área de la caja contenedora. Para conseguir ese efecto, también por medio de CSS, crea una nueva página cajas_flotantes.css. Enlaza la página desde tu código html. Añade en la misma la siguiente regla de estilo: #indice, #contenido{ overflow: auto; Comprueba ahora el resultado de disminuir el tamaño de tu página web. Aparecen las barras de scroll en las cajas correspondientes? 13. Con las reglas de estilo aprendidas, modifica tu página index.htm a tu gusto, respetando siempre los principios básicos de legibilidad y accesibilidad del código que toda página debe cumplir (no definas cajas que se sitúen encima de otras o cuyo contenido se salga de las mismas, fondos que no permitan leer el texto ). 14. Comprueba que tu página se ve de forma correcta (aunque no sea idéntica) en Internet Explorer y en Mozilla Firefox (al menos). 15. Asegúrate de que tanto la página web como el código css se adaptan a las especificaciones HTML 4.01 y CSS 2.1 ( y e introduce los iconos. 16. Sube tu nueva página de inicio (index.htm, junto con todos los ficheros css generados) a belenus. Enlaza en la misma también como Práctica 3 la página index.htm (sería conveniente que le asignaras como nombre practica03.htm ) sin estilos que generaste en la práctica 3. A continuación tienes un ejemplo de cómo podría presentarse tu página web de inicio: 15-16
16 16-16
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
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
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
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
Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.
1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio
5.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
PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)
APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial
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.
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
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
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
CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D)
APRENDERAPROGRAMAR.COM CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D) Sección: Cursos Categoría: Tutorial básico
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
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
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
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
UNIDAD 4. MODIFICAR TABLAS DE DATOS
UNIDAD 4. MODIFICAR TABLAS DE DATOS Aquí veremos las técnicas de edición de registros para modificar tanto la definición de una tabla como los datos introducidos en ella. Esta unidad está dedicada, principalmente,
Se abre una ventana que permite especificar el número de filas y columnas para la tabla.
Una tabla está formada por celdas o casillas, agrupadas por filas y columnas. En cada celda se puede insertar texto, números o gráficos. CREAR TABLAS Para crear una tabla accedemos siempre desde la pestaña
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
Práctica 4: Edición de contenidos web
Comercio Electrónico Práctica 4: Edición de contenidos web Antonio Sanz [email protected] Rafael del Hoyo [email protected] Objetivo de la práctica En esta práctica se pretende realizar una introducción a
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
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
Tabletas en el aula. Mi primera hoja de cálculo con WPS Office. Edición Autor: Fernando Posada Prieto canaltic.com
Tabletas en el aula Mi primera hoja de cálculo con WPS Office Edición 2015 Autor: Fernando Posada Prieto canaltic.com Mi primera hoja de cálculo con WPS Office Índice 1. Qué es una hoja de cálculo?...
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.
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
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
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.
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
MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)
APRENDERAPROGRAMAR.COM MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D) Sección: Cursos Categoría: Tutorial básico del programador
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
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
PLANTILLAS. Para utilizar nuestra platilla debemos:
PLANTILLAS Una plantilla es un tipo de documento que crea una copia de sí mismo cuando se abre. Para generar una plantilla en Microsoft Word y PowerPoint se deberán seguir los siguientes pasos: 1. Haga
Constructor de sitios. Manual de Usuario
Constructor de sitios Manual de Usuario Contenido Introducción... 1 Comienza a crear tu sitio... 2 1.- Inicia sesión... 2 2.-Comenzar con la creación... 3 3.-Crear un proyecto... 3 4.-Seleccionar la plantilla...
Herramientas Google Aplicadas a Educación. Primera parte
Primera parte Índice de contenido Índice de contenido... 1 Calendar: programación de eventos, invitaciones, archivos adjuntos e impresión de calendarios... 2 Vista del calendario... 2 Cómo programar un
3. Lógate con la misma contraseña que la de tu correo electrónico
COMO CREAR UN BLOG CON BLOGGER 1. Entra en tu cuenta de correo 2. En la pestaña de la izquierda pulsa en Blogger 3. Lógate con la misma contraseña que la de tu correo electrónico 4. Crear perfil de Blogger
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
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
UNIDAD 2. writer USANDO TABLAS. CURSO: LibreOffice
UNIDAD 2 USANDO TABLAS CURSO: LibreOffice writer 1 Introducción Las tablas son muy útiles para presentar y organizar datos en informes, presentar información sobre conjuntos o crear calendarios u horarios.
Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.
Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje
Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Informes
Ministerio de Educación Base de datos en la Enseñanza. Open Office Módulo 5: Informes Instituto de Tecnologías Educativas 2011 Informes Los informes son la herramienta encargada de presentar los datos
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
Estos márgenes se definen en el menú Archivo, Configurar página... se nos muestra un cuadro de dialogo como este con tres pestañas:
Unidad 7. Diseño de página (I) Configurar página Cuando estamos escribiendo en un documento Word es como si lo hiciéramos en una hoja de papel que luego puede ser impresa. Por lo tanto, existe un área
GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?
GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear
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
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
Primeros Pasos en la Plataforma de Formación
Primeros Pasos en la Plataforma de Formación En este tutorial vamos a mostrar el funcionamiento básico de la plataforma de formación, haciendo un breve repaso por los elementos que nos permitirán navegar
TUTORIAL SOBRE HOJAS DE CALCULO
TUTORIAL SOBRE HOJAS DE CALCULO Octubre de 2007 Página 1 de 12 Tabla de contenido Hojas de Cálculo...3 Software a utilizar y entorno de trabajo...3 Crear una hoja de cálculo...3 Características de las
Microsoft Office Word
Microsoft Office Word Objetivos del capítulo: Aprender lo que es un procesador de textos. Aprender a ejecutar el programa cada que vez que se quiere usar. Aprender los elementos de la pantalla principal
Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas.
Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas. Ejercicio 1: Crear y rellenar una tabla. 3. Selecciona el sitio Cocina en el panel 6. Sitúa el punto de inserción
Preparación de los Documentos de Word para obtener ficheros PDF Accesibles
Guía de Referencia rápida accesibilidad en documentos Introducción Añadir estructura a documentos Word Graficos e imágenes textos Textos alternativos Columnas Estilos y encabezados Teclas rapidas para
9.1. Insertar filas en una hoja
UNIDAD 9. INSERTAR Y ELIMINAR ELEMENTOS (I) Vamos a ver las diferentes formas de insertar y eliminar filas, columnas, celdas y hojas, operaciones muy útiles cuando tenemos un libro ya creado y queremos
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
Escuela Normal Superior Río de Oro (Cesar)
Escuela Normal Superior Río de Oro (Cesar) ÁREA: TECNOLOGÍA E INFORMÁTICA PROGRAMA MICROSOFT EXCEL Responsable: Esp. Emilce Herrera Sánchez GRADO: NOVENO 01-02 FECHA: Febrero 13 y 15 de 2012 TEMA: CAMBIOS
CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil [email protected] Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis
Nociones basicas de HTML
Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador
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
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.
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)
Introducción a Hojas de Estilo
Introducción a Hojas de Estilo Por Héctor Hugo Luna Miranda Conociendo las hojas de estilo De inicio, te presento un par de preguntas cuyas respuestas se obtendrán siguiendo los lineamientos de Vázquez
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
CREACIÓN Y MANEJO DE TABLAS Instructivo N 1
CREACIÓN Y MANEJO DE TABLAS Instructivo N 1 CREACIÓN DE TABLAS 1. QUÉ ES UNA TABLA? Para Excel una tabla es un conjunto de datos organizados en columnas y filas, donde las columnas representan los campos
Tablas en vista hoja de datos
Contenido 1. Comprender lo que son las columnas en hojas de datos... 2 2. Agregar una columna mediante la vista Hoja de datos... 3 3. Quitar una columna mediante la vista Hoja de datos... 3 4. Agregar
CREAR GRÁFICOS Y UTILIZAR FORMATOS PARA LA PRESENTACIÓN DE INFORMES. Unidad N 3. Crear gráficos y utilizar formatos, para la presentación de informes.
CREAR GRÁFICOS Y UTILIZAR FORMATOS PARA LA PRESENTACIÓN DE INFORMES Unidad N 3 Objetivo Crear gráficos y utilizar formatos, para la presentación de informes. Descripción del Material del Curso En esta
Computación Aplicada. Universidad de Las Américas. Aula virtual de Computación Aplicada. Módulo de Excel 2013 LIBRO 4
Computación Aplicada Universidad de Las Américas Aula virtual de Computación Aplicada Módulo de Excel 2013 LIBRO 4 Contenido FORMATO CONDICIONAL... 3 FORMATOS CONDICIONALES... 3 VARIANTES DE LOS FORMATOS
CURSO TÉCNICO DE ACCESIBILIDAD Y USABILIDAD WEB
CURSO TÉCNICO DE ACCESIBILIDAD Y USABILIDAD WEB PROYECTO FINAL: DEFINICIÓN Centro de Referencia en Accesibilidad y Estándares Web Copyright (C) 2008 INTECO. Reservados todos los derechos (reproducción,
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
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
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
1. PRIMEROS PASOS EN POWERPOINT... 3
1 ÍNDICE 1. PRIMEROS PASOS EN POWERPOINT... 3 2. GUARDAR UN DOCUMENTO DE POWERPOINT... 3 3. BARRA DE HERRAMIENTAS... 5 4. FORMATO DE PRESENTACIÓN... 8 5. INSERCIÓN Y AGREGAR OBJETOS... 9 6. IMPRESIÓN DE
FORMULARIO HTML PREPARACION DEL FORMULARIO. Que información debes solicitar al visitante de tu web?
FORMULARIO HTML Con este apunte se realizara un sencillo formulario que creará un nuevo mensaje de e-mail en el computador del usuario; y dicho mensaje se rellenará con tu dirección de e-mail (como destinatario),
MICROSOFT EXCEL 2007
INGRESAR A EXCEL 007 MICROSOFT EXCEL 007. Clic en Inicio. Colocar el puntero del ratón (flecha) en Todos los programas. Colocar el puntero del ratón (flecha) en Microsoft Office. Clic en Microsoft Excel
Manual del gestor Web de la Fundación Picarral www.fundacionpicarral.org
Manual del gestor Web de la Fundación Picarral www.fundacionpicarral.org Manual del gestor Web de la Fundación Picarral Dirigido a Usuarios del gestor Web de la Fundación Picarral VERSIÓN 1.0 FECHA 09/09/2008
Administración de la producción. Sesión 9: Hojas de cálculo (Microsoft Excel)
Administración de la producción Sesión 9: Hojas de cálculo (Microsoft Excel) Contextualización Microsoft Excel es un programa de hoja de cálculo electrónica que permite la representación gráfica y el análisis
Diseño de página y configurar un documento
Contenido 1. Abrir un nuevo documento y empezar a escribir... 3 1.1 Abrir en blanco:... 3 1.2 Crear a partir de una plantilla... 3 1.3 Guardar y reutilizar plantillas... 3 2. Cambiar los márgenes de página...
MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER
1 MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER INDICE 1. Como crear mí sitio. 2. Entorno. 3. Insertar texto. 4. Como crear un vínculo. Formas: 5. Como insertar una imagen. 6. Insertar Tabla. 7.
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
En esta lección vamos a ver más utilidades y opciones sobre la
1. PEGADO ESPECIAL En esta lección vamos a ver más utilidades y opciones sobre la edición de hojas de cálculo de Excel que te pueden ayudar en tu trabajo. Ya sabes cómo cortar o copiar y pegar datos de
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
Guía Saga Suite Galería de Descarga
Guía Saga Suite Galería de Descarga Tabla de contenido Acceso a la Edición del recurso...- 2 - Cómo editar el recurso...- 3 - Pestaña Contenido...- 3 - Pestaña etiquetas...- 4 - Settings...- 6 - Guía Saga
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
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
EJERCICIO 1 DE POWER POINT POWER POINT EJERCICIO 1 PRESENTACIONES CON POWER POINT
POWER POINT EJERCICIO 1 PRESENTACIONES CON POWER POINT Power Point es un programa de presentaciones. Su utilidad: exponer un tema o asunto cualquiera por medio de diapositivas, que se suceden en pantalla
Unidad 3: Personalizar Excel
Unidad 3: Personalizar Excel 3.0 Introducción Puesto que está realizando este curso, posiblemente usted pase o crea que va a pasar un tiempo significativo trabajando con Excel. Por lo tanto, debería saber
CREAR TABLAS EN HTML. ATRIBUTOS COLSPAN Y ROWSPAN. UNIFICAR CELDAS EN HORIZONTAL Y VERTICAL. CAPTION O TÍTULO (CU00719B)
APRENDERAPROGRAMAR.COM CREAR TABLAS EN HTML. ATRIBUTOS COLSPAN Y ROWSPAN. UNIFICAR CELDAS EN HORIZONTAL Y VERTICAL. CAPTION O TÍTULO (CU00719B) Sección: Cursos Categoría: Tutorial básico del programador
Abrir y explorar plantillas de Word
Abrir y explorar plantillas de Word Ejercicio 1: utilizar una plantilla para una carta de empresa El programa Word está abierto con un documento en blanco. Va a abrir una plantilla de carta disponible
Formularios. Contenido TECNOLOGÍA WORD
Contenido 1. Crear un formulario... 2 2. Agregar protección al formulario... 3 2.1 Proteger partes de un formulario:... 4 2.2 Proteger todos los controles de un formulario... 4 3. Controles de contenido...
Manejo de Filas, Columnas, Celdas y Rangos
Manejo de Filas, Columnas, Celdas y Rangos Selección de filas Selección de columnas Selección de celdas y rangos Ingresar, editar y eliminar datos Tipos de datos Agregar nombres a celdas y rangos Insertar
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.
Sistema de Gestión y almacenamiento de archivos en el Campus Virtual
Sistema de Gestión y almacenamiento de archivos en el Campus Virtual Página 1 de 15 GESTIÓN DE ARCHIVOS Dentro del Campus Virtual vamos a tener distintas formas de seleccionar y gestionar los archivos.
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
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
IES María de Molina Ejercicios de KompoZer KOMPOZER. Vamos a crear una página Web que contendrá información sobre MECANISMOS.
KOMPOZER Vamos a crear una página Web que contendrá información sobre MECANISMOS. 1. CREACIÓN DE LA ESTRUCTURA DE UN SITIO 1.1. CREACIÓN DE LA CARPETA DEL SITIO WEB Para empezar hay que crear un sitio
Herramientas para crear páginas.
Herramientas para crear páginas. Herramientas para la creación de páginas Web. Como hemos visto resulta sencillo pero engorroso escribir directamente en HTML. Por ello es más sencillo utilizar un editor
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ódulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN
Módulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN ÍNDICE I) Instalación (v1.6)...3 II) Instalación (v1.5)...5 III) Añadir una imagen...7 IV) Añadir un
Contenido. Introducción Usando di Monitoring como un usuario normal Uso de di Monitoring como un operador de entrada de datos...
1 Contenido Introducción... 3 Características principales... 3 Los niveles de usuario... 4 El aprendizaje de di Monitoring... 4 Usando di Monitoring como un usuario normal... 5 Acceso a di Monitoring...
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
Crear gráficos en Excel Un gráfico es la representación gráfica de los datos de una hoja de cálculo y facilita su interpretación.
CREACIÓN DE GRÁFICOS EN MICROSOFT OFFICE EXCEL Vamos a ver cómo crear gráficos a partir de unos datos introducidos en una hoja de cálculo. Así resultará más sencilla la interpretación de los datos. Terminología