<body> <a href=" src="imagenes/imagen01.jpg" width="250" height="354" /></a> </body>
|
|
|
- Isabel de la Cruz Aranda
- hace 6 años
- Vistas:
Transcripción
1 3. CSS en imágenes 3.1 Bordes El uso de imágenes con CSS permite no sólo reforzar el modelo de caja inherente a los estilos, sino reforzar la estética de lo que podría, en principio, parecer hasta limitante 1. Mientras que, por un lado, CSS permite diseños limpios que no requieren excesos de imágenes, los estilos se enriquecen del potencial que ofrece el uso adecuado de las imágenes junto al CSS. Poco a poco, los diseñadores que han aprendido el potencial (y limitantes) de lo que se puede lograr estéticamente con CSS han proporcionado un mundo rico basado en principios simples. Borde de la caja Veamos algunos de estos principios, comenzando por el borde de las imágenes. Como las imágenes siempre son rectangulares, ya tienen en sí mismas el modelo de caja de forma inherente: un rectángulo con bordes. El siguiente código 2 nos permite confirmar la afirmación: una imagen con un enlace simple. <body> <a href=" src="imagenes/imagen01.jpg" width="250" height="354" /></a> </body> Al tener un enlace, algunos navegadores 3 cargarán por defecto el borde para indicar la presencia del link. Con ello, lo que obtendremos es algo parecido a lo que sigue, con un color azul (que es el color por defecto de los enlaces, pues este HTML no tiene ningún CSS que cambie los valores por omisión) Si nos interesara quitar ese borde, tenemos que recurrir al modelo de caja y al uso de CSS 4. El siguiente código CSS nos permite definir el modelo de caja que se aplicará a las imágenes: 1 En el sentido de que una caja, de entrada, no parece lo más creativo o lo más variado del mundo. Conozco a más de un diseñador gráfico pre-web que asocia el diseño web al diseño de un ingeniero (entendiendo que todo son cuadrados y rectángulos) ;-) 2 Ver el fichero 101.html de los recursos del curso (en el Tema 3) 3 Depende del browser y de la versión del HTML o XHTML que se use en la definición del documento. 4 En HTML antiguo había un atributo border en las imágenes, pero se trata de un elemento obsoleto (deprecated) en las versiones actuales de HTML y XHTML. Prof. Alejandro Ramírez 1
2 /* CSS Document */ img{ border-style: none; De modo que, al aplicarlo al HTML 5, estamos indicando que el estilo del borde, border-style, será none, ninguno, y aún con el enlace, la imagen aparecerá sin el borde: Hay más de un lado en una caja Podemos aprovechar para hablar de las notaciones completas y las notaciones de cada lado del modelo de caja. El código anterior obvia que estamos aplicando el estilo nulo a todos los lados de la caja, pero CSS nos da un control absoluto de cada uno, con lo que podríamos usar una notación detallada e indicar explícitamente cada lado. El código sería como el que sigue 6 : /* CSS Document */ img{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; Que nos permite experimentar 7, por ejemplo, quitando sólo dos bordes en vez de los cuatro, por dar un ejemplo: /* CSS Document */ img{ border-bottom-style: none; border-left-style: none; 5 Ver 102.html e imagenes01.css en el Tema 3. 6 El CSS incluye un comentario, que puede incluirse con esa notación (/* */ ), y que nos permite poner notas, organizar un CSS complejo, etc. 7 Vamos, vamos, ya pueden aplicarlo y jugar con las opciones! ;-) Prof. Alejandro Ramírez 2
3 Aquí, es importante destacar que CSS actúa con criterios simples: si uno explicita un lado pero no los demás, se entiende que sólo ajustamos un lado. Los demás, actuarán por omisión al no tener un estilo propio. Este comportamiento es general en el modelo de caja, como veremos con otras opciones más adelante. Retomando la idea de quitar los cuatro bordes, el mismo CSS puede escribirse en una notación corta 8, incluyendo solamente la propiedad border, que incluye en si misma al border-style visto antes. El código sería el siguiente, y el resultado el ya conocido. img{ border: none; Agregar bordes Lo que hemos hecho hasta ahora es quitar el borde por defecto que sale en los enlaces, pero podemos explotar el potencial de CSS para aplicar el borde y controlar su apariencia, independientemente de que la imagen lo tenga o no (por ejemplo, si la imagen no tiene enlace 9 ). El CSS que permite agregar un borde a las imágenes es el siguiente 10 : img{ border-width: 1px; border-style: solid; border-color: #000000; Donde podemos ver nuevas propiedades: border-width (que se encarga del ancho del borde), border-style (ya la conocíamos, pero esta vez asignamos el valor de un borde sólido con solid) y border-color (controlando, obviamente, el color del borde). El ejemplo aplica un CSS a los cuadro lados del modelo de caja 11, y el resultado en el navegador es el siguiente, con un borde negro, sólido, de grosor equivalente a 1 pixel: 8 Más adelante veremos más sobre esta notación. 9 Lo que es una pena, pues el sitio de cine al que se enlaza mola :-) Cita al pie no patrocinada ;-) 10 Ver 103.html del tema 3, y su hoja de estilos, imagenes02.css. 11 A estas alturas no debería sorprender que es posible usar todo el detalle que se desee, con atributos completos como border-top-width, border-right-width, border-bottom-style etc. Prof. Alejandro Ramírez 3
4 Para experimentar por cuenta propia, y seguir aprendiendo variantes, pueden jugar con otros valores de grosor, color, y usar distintas variantes de estilo de borde disponibles, además de solid. Por ejemplo, dotted, dashed, double o groove. Las referencias de CSS 12 son siempre una gran ayuda para tener a mano todas las opciones disponibles y su significado. Notación compacta Aprovecharemos este tema para ver un poco de las notaciones abreviadas de ciertas propiedades. El siguiente código 13 nos muestra la notación abreviada en la propiedad border: /* CSS Document */ img{ border: 1px solid #000000; Como podemos ver, se trata de una única propiedad, en donde se definen -en orden- los parámetros de las opciones border-width, border-style y border-color. Esta notación compacta en ciertas propiedades (en inglés, shorthand) se aplica a los cuatro bordes, lo que permite simplificar la escritura en una sola línea. Sólo a algunas imágenes? Si ponemos atención al código, estamos aplicando el CSS a la etiqueta <img> del HTML. Esto implicaría que todas las imágenes de la página tendrían un ajuste de borde como los que hemos visto, ya que todas usan esa etiqueta de HTML. Para ciertas imágenes eso no sería lo deseado, de modo que cabe recordar que siempre podemos definir clases concretas para nuestros fines, como con el código que sigue 14 :.imgborder{ border: 1px solid #000000; Que podría aplicarse a un HTML como el que sigue: <img src="imagenes/imagen01.jpg" width="250" height="354" class="imgborder" /> Recuerden que podemos definir tantas clases como deseemos, con lo que podríamos tener una clase para imágenes de galería, otras para imágenes de navegación, etc. 3.2 Fondos Las imágenes de fondo se usaron desde los inicios del HTML 15. Los estilos CSS no sólo permiten aplicar una imagen como fondo sino controlar totalmente dicha imagen y su comportamiento respecto del bloque al que se aplica. 12 Como ejemplo, la propiedad del estilo del borde, border-style: en la referencia de Sitepoint. 13 Ver 104.html en el tema 3, y su CSS asociado. 14 Ver 105.html y su estilo asociado, en este tema. 15 Antiguamente, como un atributo (background) de la etiqueta <body>. Prof. Alejandro Ramírez 4
5 Imagen de fondo El siguiente código 16 es una muestra de CSS para aplicar una imagen de fondo 17 (y aprovecharemos el ejemplo para aplicar también un color de fondo): background-image: url(imagenes/imagen01.jpg); background-repeat: no-repeat; background-color: #999966; Como podemos ver, el cuerpo del HTML está enteramente vacío: <body> </body> En el CSS, podemos ver que estamos aplicando, a todo el cuerpo del documento (<body>), una imagen de fondo con la propiedad background-image que carga una imagen del URL deseado. De igual modo, se asigna un patrón de repetición para dicha imagen de fondo (con la propiedad background-repeat, que en este caso no tiene repetición, ya que se usa el valor no-repeat). Además, se ha asignado un color de fondo con la propiedad background-color. En el navegador, el resultado es como el que sigue: Y podemos ver que la imagen aparece (comenzando por la esquina superior izquierda), sin repetirse (debido al valor asignado), y se muestra sobre el color de fondo elegido. Notación compacta La imagen de fondo puede asignarse a través de la notación compacta de la propiedad general background, como en el siguiente código 18. background: # url(imagenes/imagen01.jpg) no-repeat; Donde podemos ver que el primer valor es el color (background-color), el segundo la imagen (background-image) y el tercero la repetición (background-repeat). 16 Ver 201.html en el tema 3, y su estilo asociado, fondos01.css. 17 Sí, los rumores son ciertos ;-), la foto es de una rueda de prensa a la que asistí. 18 Ver 202.html en este tema, y su estilo asociado. Prof. Alejandro Ramírez 5
6 Repetición de patrones Para entender el uso de imágenes de fondo, vale la pena ver la repetición de patrones. Como puede intuirse, background-repeat tiene más de una opción. Repetición horizontal, vertical y mosaico Si deseamos aplicar una repetición horizontal (es decir, sobre el eje x), necesitamos que el valor de repetición sea repeat-x, como en el siguiente ejemplo 19 : background: # url(imagenes/imagen01.jpg) repeat-x; Esta repetición, en los navegadores, se verá como sigue (repitiéndose toda la anchura de la ventana del navegador): Como podemos imaginar, también hay un valor repeat-y, que repite verticalmente (ahora sobre el eje y), para un resultado como sigue: background: # url(imagenes/imagen01.jpg) repeat-y; La repetición de mosaico se logra con el valor repeat (sin ejes, repetición general). background: # url(imagenes/imagen01.jpg) repeat; 19 Ver 203.html y su correspondiente hoja de estilos, en este tema. Prof. Alejandro Ramírez 6
7 Que en el navegador aparecerá así: Imágenes especialmente diseñadas para repeticiones Aprovechando el comportamiento de las repeticiones, es usual utilizar imágenes especialmente diseñadas para las repeticiones. Por ejemplo, podemos usar una imagen suficientemente ancha pero poco alta, como la que sigue: La imagen resulta ideal para repetirse verticalmente (eje y) y, en este caso, aprovechar que el color de la imagen se ha elegido para coincidir con el color de fondo. Por ejemplo, este código 20 busca un efecto compartido del color de fondo, y la imagen diseñada para ese fin. background: # url(imagenes/fondo01.jpg) repeat-y; En el navegador, se muestra como sigue, mostrando la repetición del patrón, y logrando que el fondo. 20 Ver en este tema el 204.html, su css (fondos04.css) y la imagen fondo01.jpg. Prof. Alejandro Ramírez 7
8 El mismo principio podría usarse en otro eje, si pensamos en usar una imagen muy alta pero poco ancha, como esta: Que podría usar un CSS como el de este código 21 : background: # url(imagenes/fondo02.jpg) repeat-x; De modo que en el navegador resulte algo como lo que sigue: Tener en cuenta que las posibilidades son muchas y que hay más cosas que los degradados o gradientes. 21 Ver 205.html, su CSS y su imagen de fondo. Prof. Alejandro Ramírez 8
9 Piensen, por ejemplo, en patrones repetidos verticalmente con imágenes como estas dos que siguen, ajustando o no el color de fondo con los tonos finales, etc. 3.3 Posicionamiento y cajas Terminaremos el tema de CSS en imágenes relacionando su uso con el modelo de caja, lo que permitirá ver más opciones de imagen, y reforzar el uso de este modelo, la base del posicionamiento y diseño avanzado con CSS. Ya vimos algo del modelo de caja con el texto, al poner las sangrías, pero es momento de ampliar las bases. Más del modelo de caja El modelo de caja y los bordes en las imágenes son un buen punto para entender el modelo de caja aplicado, algo que después puede extenderse fácilmente al resto de etiquetas en las que se explote dicho modelo. Reset de la caja principal Comencemos por definir la caja principal: toda la página HTML, y ajustemos para que no tenga ningún margen o relleno 22. margin: 0px; padding: 0px; Esto permitirá que los contenidos del cuerpo (<body>) comiencen a mostrarse justo en el origen (esquina superior izquierda, nuestro origen de coordenadas ) y que no existan márgenes ni relleno. Se usa esto ya que cada navegador tiene ciertos valores de relleno y/o margen por defecto para las etiquetas, que no coinciden, y con un margen y relleno nulos nos aseguramos de que tenemos el control total de nuestra página en términos visuales. Modelo de caja con la imagen En el HTML, tenemos una imagen con la clase boximage a utilizar. <body> <img src="imagenes/imagen01.jpg" width="250" height="354" class="boximage" /> </body> 22 Ver 301.html ( y cajas01.css) en este tema 3. Prof. Alejandro Ramírez 9
10 Para ver la caja y entender los parámetros, podemos hacer uso de un CSS como el que sigue, para la clase de la imagen utilizada..boximage { margin: 25px; padding: 10px; border: 2px solid #990000; Podemos ver que estamos usando propiedades compactas de margen y relleno 23, con margin y padding, además del ya conocido border. Estas dos propiedades en notación shorthand, compacta, permiten asignar un margen y un relleno. En este ejemplo, un margen de 25 píxeles y un relleno de 10. El borde tiene un color rojo, de 2 píxeles de grosor, sólido. En el navegador, se mostrará como sigue (se incluye la esquina superior izquierda de la ventana, como referencia) En el tema 1 se incluyó la imagen general del modelo de caja, y aquí podemos ver cómo actúa esta caja realmente en cuanto al relleno y su margen. La propiedad margin es el margen del elemento al que se aplica. Podemos ver que se trata de lo que rodea a nuestro elemento. La propiedad de padding es el relleno de nuestra caja, teniendo en cuenta que la caja tiene un contenido con un ancho dado (en este caso, el de la imagen) y un relleno que la separa de su borde. En este sentido, el padding se puede interpretar como un margen interior entre el contenido del la caja y su borde. Como podemos ver, la caja con la imagen se muestra con un margen de 25px que la separa de los bordes de la ventana, y entre su contenido (la imagen) y su propio borde, hay un relleno de 10px. Como nota importante, al usar esa notación concreta, todos los valores actúan en los 4 lados de la caja. Es decir, el relleno es de 10px hacia arriba, abajo, iquierda y derecha. Lo mismo pasa con los 25px de margen asignados. 23 A diferencia de las propiedades vistas en el tema anterior, cuando usamos las propiedades de cada lado: margintop, margin-bottom, etc. Prof. Alejandro Ramírez 10
11 Cajas flotantes Veamos qué pasa si integramos un poco de texto. Comencemos por añadir texto a nuestro código 24. <body> <img src="imagenes/imagen01.jpg" width="250" height="354" class="boximage" /> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien nisl. Aenean venenatis dignissim tortor, malesuada...</p> En el navegador, se mostrará como sigue: Con la imagen al inicio, y encima del texto. Si nuestra intención es hacer que la imagen flote, necesitamos hacer uso de una propiedad específica para ello: float..boximage { margin: 25px; padding: 10px; border: 2px solid #990000; float: left; La propiedad float permite que el elemento al que se está aplicando flote respecto de lo que le rodea, es decir, aparezca con libertad respecto al flujo que seguiría normalmente de no haberse aplicado la flotación. Con el valor del ejemplo, left, la imagen flotará hacia la izquierda. Si usáramos el valor de right, sería en el lado derecho. En el navegador, el contenido se mostrará ahora como en la siguiente imagen: 24 Ver 302.html y su CSS asociado, en este tema. Prof. Alejandro Ramírez 11
12 Donde podemos ver que ahora el texto rodea a la imagen, que aparece flotando hacia la izquierda, provocando que el contenido inmediatamente a continuación (el texto) se posicione y se ajuste de acuerdo con esa flotación. Con lo aprendido en los temas que llevamos, debería ser muy simple ajustar las propiedades del texto, para que aparezca alineado, justificado, etc. Les toca experimentar, y aplicarlo para las actividades del curso. Imagen de fondo a cajas pequeñas Como cierre, veamos el uso del bloque <div>, un contenedor 25 dentro del código HTML. Veamos el código que sigue 26 : <body> <p>lorem ipsum dolor sit amet, blandit.</p> <div class="boxedtext">lorem ipsum. Lorem ipsum. Lorem ipsum.</div> <p>lorem ipsum dolor sit met, landit.</p> Podemos ver que tenemos una caja, el contenedor, entre dos párrafos de texto. El CSS de ejemplo es el que sigue:.boxedtext { margin: 10px; padding: 10px; border: 5px solid #339933; float: left; background: url(imagenes/fondo01.jpg); color: #FFFFFF; width: 200px; 25 Pensar que este contenedor <div> puede tener cualquier HTML, no sólo texto. Imágenes, texto, enlaces, etc. 26 Ver 303.html y su CSS asociado, en este tema. Prof. Alejandro Ramírez 12
13 Donde tenemos márgenes, relleno, borde, flotación, y añadimos un color de texto, una imagen de fondo, y un ancho determinado para la caja: 200px, con la propiedad width. Esto, en el browser, aparecerá así: Donde podemos ver que, al igual que la imagen, la caja tiene la flotación, bordes, texto con color controlado, etc. Como podemos ver, la imagen de fondo no es exclusiva del cuerpo del HTML, sino que puede aplicarse a cualquier elemento contenedor donde tenga sentido tener una imagen de fondo aplicada Ancho real: ancho, relleno y margen Como cierre, es muy importante tener en cuenta el modelo caja y el significado del ancho (y, en su caso, del alto) de la caja, ya que el width que hemos visto no es el width del bloque como tal, sino sólo el de su contenido interior. En el ejemplo, se asignó un CSS como este (detalle):.boxedtext { margin: 10px; padding: 10px; border: 5px solid #339933; width: 200px; Donde podemos ver que el contenido de la caja tendrá un ancho de 200 píxeles. Estos, se suman a 10 píxeles de cada lado de relleno, y 5 píxeles de cada lado en el borde. Es decir, La caja mide, realmente, = 230px. El espacio que ocupa es aún mayor, ya que tiene 10px de margen a cada lado, de modo que realmente utiliza 250px de la pantalla. Si tenemos en cuenta que, además, hay un margen definido, podemos ver que las dimensiones comienzan a ser relevantes. Al diseñar una página con CSS, es importante tener presente que los bloques, como este de 200px de ancho, no implican el ancho real de la caja, pues hay que sumar el borde, el relleno y, en su caso, el margen que puede o no tener. La maquetación real de una página implica contar píxeles, y ajustar los CSS de acuerdo con las necesidades concretas de cada bloque, columna, o similar. Prof. Alejandro Ramírez 13
Modelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
Modelo de caja El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente.
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
Contenedores. Elementos <div>
Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del . Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div
Maquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas.
Pag. 1 de 16. Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas. Cursos Thales CICA Web 2006. Curso WEBCSS A. Gámez, L.M. Marín, F. Mesa & S. Fandiño El modelo de cajas Índice del bloque
Diseño de columnas con CSS
Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.
![Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.](/thumbs/65/52446163.jpg "Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.")
Lección 3: Colores y fondos En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán
CSS Flujo y posicionamiento
Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes. Existen tres posibilidades de colocar
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
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
DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D)
APRENDERAPROGRAMAR.COM DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D) Sección: Cursos Categoría: Tutorial básico del programador
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
EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D)
APRENDERAPROGRAMAR.COM EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D) Sección: Cursos Categoría: Tutorial básico del programador web:
DISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
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
8. Otros usos comunes
8. Otros usos comunes 8.1 Clases múltiples En este tema veremos algunos temas generales relacionados con CSS, que se usan comúnmente en los sitios webs actuales. Múltiples clases en un solo elemento Se
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 3 Box
SOMBRAS CON CSS ver. 2
Sombras con CSS para Diseño WEB ver. 2_TICO 1º Bachillerato página 1/6 SOMBRAS CON CSS ver. 2...1 Procedimiento 1: Diseño con Gimp 2.6 de una sombra...2 Procedimiento 2: Diseño Web con Kompozer...3 Código
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Resumen Rápido de CSS
Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de
5.CREACIÓN DE TABLAS.
5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción
Maquetación Web: HTML 5 y CSS
Maquetación Web: HTML 5 y CSS Programa de Estudio Maquetación Web: HTML 5 y CSS Aprende amaquetar sitios Web de forma ágil y profesional sin usar tablas.separa el diseño visual del contenido y optimiza
1. La evolución de HTML La evolución de las CSS 16
HTML5 y CSS3 1. La evolución de HTML 15 2. La evolución de las CSS 16 2.1 La noción de módulo 16 2.2 La evolución de los estados 16 2.3 Los prefijos comerciales 17 2.4 Utilizar los prefijos comerciales
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
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
TABLE. La etiqueta general, que engloba a las siguientes.
TABLE La etiqueta general, que engloba a las siguientes. TR TD En el siguiente nivel, dentro de TABLE, están las etiquetas para formar cada fila de la tabla. Hay que repetirlas tantas veces como filas
HOJAS DE ESTILO EN CASCADA
HOJAS DE ESTILO EN CASCADA Introducción Permiten definir las páginas con aspecto homogéneo sin tanto esfuerzo. Forma de definir los estilos Como atributo de una etiqueta afecta a esa etiqueta Sintaxis:
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.digitalup.guru consultas@digitalup.guru HTML + CSS HTML CSS apariencia {} 2 3 Caja de elemento HTML Convenciones Web Diseño Web El Monitor: Unidad
CSS Avanzado Limpiar Floats
La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos
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
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar 2 Desplazamiento de Artículos HTML + CSS HTML CSS apariencia {} 3 4 Caja de elemento
Cap. IV - Selectores, identificadores, clases y otros by Tux Merlin - Joomla-gnu.com
CSS como dijimos significa Cascading Style Sheet, traducido Hojas de Estilo en Cascada, pero por qué lo de "cascading"? Esto se refiere a la de herencia que poseen los elementos, es decir, cuando definimos
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.
Unidad 5. Imágenes (I) Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades. Imagen Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D)
APRENDERAPROGRAMAR.COM CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Manejo de Textos de Imágenes
Manejo de Textos de Imágenes En ésta práctica se manejará la combinación de textos e imágenes utilizando el framework de Bootstrap. Se continuará trabajando con el proyecto de otras prácticas, pero se
ELECTIVA FE I. Tema 3: Introducción a las hojas
Tema 3: Introducción a las hojas de estilo en cascada CSS Qué son las hojas de estilo en cascada o CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
Texto en movimiento. <MARQUEE> Texto que se desplaza </MARQUEE>
Texto en movimiento Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc. Marquesinas (Marquees)
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.
En la carpeta css, crear una hoja de estilo para cada una de las plantillas, en este caso:
Estilos Personalizados Una vez que se han definido las plantillas, se pueden empezar a crear hojas de estilos para cada una de ellas, esto facilita el modificarlas de manera personalizada sin afectar al
REPASO DE TABLAS HTML
REPASO DE TABLAS HTML Las tablas HTML se dividen en filas y celdas. A la hora de dibujar tablas hay que hacerlo de arriba a abajo y de izquierda a derecha. Es decir, primero empezaremos dibujando la primera
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D)
APRENDERAPROGRAMAR.COM ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D) Sección: Cursos Categoría: Tutorial básico del programador
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
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
Formulario de Contacto
Un formulario es la forma habitual en la que el usuario puede interaccionar con la página web. Vamos a incluir un formulario de contacto en nuestra página contacto.html Paso 1 El formulario en HTML Abre
Ejercicios - HTML5 y CSS3
Índice 1 Ejercicio 1 - Estructura...2 2 Ejercicio 2 - Canvas... 2 3 Ejercicio 3 - Multimedia...2 4 Ejercicio 4 - Geolocalización... 3 5 Ejercicio 5 - Almacenamiento Offline... 3 6 Ejercicio 6 - CSS3...
CSS3 Domine los estándares web con las hojas de estilo
Utilizar las hojas de estilos en cascada 1. Objetivos del libro 13 2. La evolución de las CSS 14 2.1 Los módulos CSS3 14 2.2 Etapas en la concepción de las CSS3 15 3. Los prefijos de los navegadores 19
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
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.
CONCEPTO DE CASCADA Y HERENCIA CSS. QUÉ ES? ESTILOS DE USUARIO. IMPORTANCIA!IMPORTANT. EJEMPLOS. (CU01017D)
APRENDERAPROGRAMAR.COM CONCEPTO DE CASCADA Y HERENCIA CSS. QUÉ ES? ESTILOS DE USUARIO. IMPORTANCIA!IMPORTANT. EJEMPLOS. (CU01017D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde
CSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D)
APRENDERAPROGRAMAR.COM SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D) Sección: Cursos Categoría: Tutorial básico del programador web:
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2.
Barra de navegación vertical con Botones rollovers ver. 2_TIC 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2
1. Estilos CSS. 1.1 Introducción a los estilos. Definición de estilos CSS
1. Estilos CSS 1.1 Introducción a los estilos Definición de estilos CSS Los CSS (del inglés Cascading Style Sheets, hojas de estilo en cascada) son una de las herramientas más poderosas del diseño web
Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015
República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales Ezequiel Zamora Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación
Guía de edición del Recurso Cabecera
Guía de edición del Recurso Cabecera Contenido Acceso a la Edición del recurso... - 2 - Desde el ADE... - 2 - Desde el workplace... - 2 - Cómo editar el recurso... - 2 - Guía Saga Suite Carrusel - 1 -
Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
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
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
Lenguajes de programación HTML y CSS
HTML y CSS 1 Lenguajes de programación HTML y CSS Parte 3: Diseño del sitio Hemos aprendido a crear páginas con HTML básico, para cambiar el formato con CSS, ahora vamos al diseño de nuestro sitio. Al
Tablas Formularios Frames
Tablas Formularios Frames Una tabla nos permite organizar y distribuir los espacios de la página de la manera más optima. Nos puede ayudar a : generar texto en columnas como los periódicos prefijar los
QUÉ SE NECESITA PARA UTILIZAR 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. Existen diferentes versiones del lenguaje HTML,
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
CSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz
CSS: Hojas de Estilo en Cascada Didier Fabián Granados Muñoz Contexto Qué hay detrás de esto? Contexto Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades
ESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil
ESTILIZANDO CON CSS Sesión 08 By Ing. David Gil UNIDADES CSS UNIDADES DE LONGITUD Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que
5. EL EDITOR DE TEXTO HTML.
5. EL EDITOR DE TEXTO HTML. El editor de texto HTML proporciona una interfaz muy parecida a la de un procesador de textos para generar de una forma cómoda el código HTML correspondiente a los elementos
Figura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
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
Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla
HTML 5 (II) Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla interactiva. Serie de bloques de texto
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Si ya tiene texto en un documento que sería mejor mostrar en una tabla, Word puede convertirlo en una tabla.
Insertar una tabla Para insertar rápidamente una tabla básica, haga clic en Insertar > Tabla y mueva el cursor sobre la cuadrícula hasta que haya resaltado el número de columnas y filas que desee. Haga
En Fireworks, puede crear una bar nav creando un símbolo en el Editor de botones y luego poniendo instancias de dicho símbolo en el lienzo.
Creación de barras de navegación Una barra de navegación, también denominada bar nav, es un grupo de botones que ofrece vínculos a otras áreas de un sitio Web. Normalmente, no cambia de aspecto en el sitio,
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
Unidad 2: Navegación básica y Edición
Unidad 2: Navegación básica y Edición 2.0 Introducción Unidad 1: El Cuadro de control de Excel describía varios componentes de la interfaz de Excel. Esta unidad nos muestra los usos más básicos de esta
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
Construcción de páginas web. San&ago Mar+n de Jesús
Construcción de páginas web San&ago Mar+n de Jesús COLORES 2 LOS COLORES Existen diversas e&quetas y atributos en HTML que permiten dar color a los elementos de una página o incluso el color de fondo de
Dar formato a los documentos XML
Dar formato a los documentos XML Ofimática Avanzada Profesor: Víctor Fresno Fernández Hojas de estilo La función de las hojas de estilo CSS es la de separar el contenido de la presentación Lenguaje diseñado
2 meses. septiembre Noviembre Cúcuta
1 Noveno Informática 2 meses septiembre Noviembre 2017 Cúcuta Concienciación Lógico Emplear las herramientas tecnológicas para procesar datos e informar resultados. Emplear la tecnología en el desarrollo
Edición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL
MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN
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
TEMA 4: CREACIÓN Y DISEÑO DE UN BLOG EN BLOGGER
TEMA 4: CREACIÓN Y DISEÑO DE UN BLOG EN BLOGGER Cómo dar de alta un blog en blogger Como paso previo debes disponer de una cuenta de correo electrónico de Google. Debéis utilizar la que creamos a principio
IES SEVERO OCHOA DISEÑO ASISTIDO POR ORDENADOR
IES SEVERO OCHOA DISEÑO ASISTIDO POR ORDENADOR Profesor Manuel Padilla Álvarez Aplicación con COREL DRAW Tutorial traducido de VECTORTUTS 2 Creación de un reloj de pulsera de acero: La técnica básica utilizada
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Para utilizar los marcos en HTML necesitamos un par de etiquetas:
Anexo: frames, iframes, ventanas, temporizadores. 1. Uso de frames con JavaScript Los frames permiten colocar colocar diversas páginas en una sola. Los frames (marcos) eran muy usados en el desarrollo
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
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