martes, 23 de abril de 2013


martes, 23 de abril de 2013

que es Internet
que es pagina web
que es una publicación
que conoce sobre el programan  dreamweaver
solocion
1Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en UtahEstados Unidos.
Qué es una página web: Una página web es un documento electrónico diseñado para el World Wide Web (Internet) que contiene algún tipo de información como texto, imagen, vídeo  animación u otros. Una de las principales características de las páginas web son los Hipervínculos — también conocidos como links o enlaces — y su función es la de vincular una página con otra.
Publicación (el efecto de revelar o manifestar al público algo, o difundirlo)
4Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos yaplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de código abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido paraInternet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos comoMySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASPASP.NETColdFusionJSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.

que es Internet
que es pagina web
que es una publicación
que conoce sobre el programan  dreamweaver
solocion
1Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en UtahEstados Unidos.
Qué es una página web: Una página web es un documento electrónico diseñado para el World Wide Web (Internet) que contiene algún tipo de información como texto, imagen, vídeo  animación u otros. Una de las principales características de las páginas web son los Hipervínculos — también conocidos como links o enlaces — y su función es la de vincular una página con otra.
Publicación (el efecto de revelar o manifestar al público algo, o difundirlo)
4Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos yaplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de código abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido paraInternet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos comoMySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASPASP.NETColdFusionJSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.

martes, 16 de abril de 2013

<html>
   <head>
       michael anderson garcia  10B
         </head>
           <tittle>
             mi primera pagina wed
               </tittle>
                 <body>
                   Tecnología es el conjunto de conocimientos técnicos, ordenados científicamente, que permiten diseñar y crear bienes y servicios que facilitan la adaptación al medio ambiente y satisfacer tanto las necesidades esenciales como los deseos de la humanidad. Es una palabra de origen griego, te???????a, formada por téchne (t????, arte, técnica u oficio, que puede ser traducido como destreza) y logía (????a, el estudio de algo). Aunque hay muchas tecnologías muy diferentes entre sí, es frecuente usar el término en singular para referirse a una de ellas o al conjunto de todas. Cuando se lo escribe con mayúscula, Tecnología, puede referirse tanto a la disciplina teórica que estudia los saberes comunes a todas las tecnologías como la educación tecnológica, la disciplina escolar abocada a la familiarización con las tecnologías más importantes.
                    <IMG SRC="/imagen.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="">
                         html>
 <head><title>mi primera pagina</title></head>
 <body bgcolor="gray">
 <center><foat fales"tahoma"sizes color="orange">ILUSTRAMEPUNT.com</foat><…
 <hr color="orange, red,">
 <p>

</body>
 </html>
                          La actividad tecnológica influye en el progreso social y económico, pero su carácter abrumadoramente comercial hace que esté más orientada a satisfacer los deseos de los más prósperos (consumismo) que las necesidades esenciales de los más necesitados, lo que tiende además a hacer un uso no sostenible del medio ambiente. Sin embargo, la tecnología también puede ser usada para proteger el medio ambiente y evitar que las crecientes necesidades provoquen un agotamiento o degradación de los recursos materiales y energéticos del planeta o aumenten las desigualdades sociales. Como hace uso intensivo, directo o indirecto, del medio ambiente (biosfera), es la causa principal del creciente agotamiento y degradación de los recursos naturales del planeta.
                           </body>
                            </html>

martes, 9 de abril de 2013


<html>
  <head>
      Angie Trujillo 10B
        </head>
          <tittle>
            mi primera pagina wed
              </tittle>
                <body>
                  Tecnología es el conjunto de conocimientos técnicos, ordenados científicamente, que permiten diseñar y crear bienes y servicios que facilitan la adaptación al medio ambiente y satisfacer tanto las necesidades esenciales como los deseos de la humanidad. Es una palabra de origen griego, τεχνολογία, formada por téchnē (τέχνη, arte, técnica u oficio, que puede ser traducido como destreza) y logía (λογία, el estudio de algo). Aunque hay muchas tecnologías muy diferentes entre sí, es frecuente usar el término en singular para referirse a una de ellas o al conjunto de todas. Cuando se lo escribe con mayúscula, Tecnología, puede referirse tanto a la disciplina teórica que estudia los saberes comunes a todas las tecnologías como la educación tecnológica, la disciplina escolar abocada a la familiarización con las tecnologías más importantes.
                   <img src="http://www.google.es/search?q=tecnologias&hl=es&site=imghp&source=lnms&tbm=isch&sa=X&ei=BRBkUfnWGYfs8wT6_YGABw&ved=0CAoQ_AUoAQ&biw=1600&bih=799#imgrc=zkS6Uz9XriLkYM%3A%3BRzukbruy0_OKFM%3Bhttp%253A%252F%252Ftecnoweb2.com%252Fsites%252Fdefault%252Ffiles%252Ftecnologia.jpg%3Bhttp%253A%252F%252Ftecnoweb2.com%252Ftecnologias-web%3B1024%3B768" alt="tecnologia"/>
                     <p>Esta es mi primera imagen  
                      <br />
                        <p>creado gracias a >a href="http://tecnoweb2.com">CCUSW</a></p>
                      <body bgcolor="blue">
                         La actividad tecnológica influye en el progreso social y económico, pero su carácter abrumadoramente comercial hace que esté más orientada a satisfacer los deseos de los más prósperos (consumismo) que las necesidades esenciales de los más necesitados, lo que tiende además a hacer un uso no sostenible del medio ambiente. Sin embargo, la tecnología también puede ser usada para proteger el medio ambiente y evitar que las crecientes necesidades provoquen un agotamiento o degradación de los recursos materiales y energéticos del planeta o aumenten las desigualdades sociales. Como hace uso intensivo, directo o indirecto, del medio ambiente (biosfera), es la causa principal del creciente agotamiento y degradación de los recursos naturales del planeta.
                          </body>
                           </html>

martes, 2 de abril de 2013


Colores Hexadecimales

Los colores en HTML se representan mediante un número hexadecimal.
Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.
Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
También podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal.
[1] Enlace a listado de colores

Selector de colores HTML

Desplace la barra de desplazamiento vertical para elegir el color y después haga clic en el cuadro de colores a la izquierda para conseguir el Código de color HTML para elegir el tono de color deseado.
Puede empezar con su propio color escribiendo su código de color en el campo de entrada superior.
Introduzca su código de color:  
  •  °
  •  %
  •  %


Códigos de colores HTML

El sitio web Códigos de colores HTML le proporciona herramientas gratuitas de colores para encontrar colores HTML para su sitio web. Las excelentes herramientas Tabla de colores HTML y Selector de colores HTML harán que esta tarea sea pan comido.
Para empezar rápidamente a usar Colores HTML en su sitio web, échele un vistazo a ¿Cómo usar los códigos de colores HTML?. Si desea aprender qué significa realmente esta combinación de caracteres en Códigos de colores HTML échele un vistazo a la sección Teoría sobre los códigos de colores HTML.
Colores seguros para la Web es la lista de colores que se ven igual en todos los sistemas operativos. Si es daltónico consulte los Nombres de colores HTML para superar ese problema.

Tabla de colores HTML

Con esta Tabla de colores HTML dinámica puede conseguir códigos HTML para los colores básicos. Haga clic en cualquier cuadro de color para conseguir su Código de color HTML:


Vídeo sobre los códigos de colores

Si no está seguro de cómo usar las herramientas de colores en este sitio web, échele un vistazo a este vídeo:

¿Cómo usar los códigos de colores HTML?

Con los Códigos de colores HTML puede establecer el color de fondo del sitio web, el color del texto, de las celdas en las tablas y mucho más.
Usar los códigos de colores HTML para el color de fondo del sitio web:
<body style="background:#80BFFF">

Usar los códigos de colores HTML para configurar el color de la fuente/texto:
<span style="color:#80BFFF">

Usar los códigos de colores HTML para el color de fondo de las tablas:
<table style="background:#80BFFF">

Usar los códigos de colores HTML para los colores de los enlaces:
<a style="color:#80BFFF">

Teoría sobre los códigos de colores HTML

Seguramente se está preguntando: « ¿Tiene algún significado esta extraña combinación de letras y números?» Pues la respuesta es «Sí» y así es como funciona:)

Formato de los códigos HTML: 
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.

Significado de los símbolos: 
Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad delazul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)

Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:     

#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:     

#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:     

#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:     

#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:      

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 las siguientes propiedades CSS:

Color de primer plano: la propiedad 'color'

La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.

 h1 {
  color: #ff0000;
 }
 
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).

La propiedad 'background-color'

La propiedad background-color describe el color de fondo de los elementos.
El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y<h1>.

 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
Fíjate cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.

Imágenes de fondo [background-image]

La propiedad CSS background-image se usa para insertar una imagen de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.
Mariposa
Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la dirección completa del fichero:url("http://www.html.net/butterfly.gif").

Repetir la imagen de fondo [background-repeat]

En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-repeatcontrola este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.
ValorDescripciónEjemplo
Background-repeat: repeat-xLa imagen se repite en el eje horizontalVer ejemplo
background-repeat: repeat-yLa imagen se repite en el eje verticalVer /ejemplo
background-repeat: repeatLa imagen se repite en el eje horizontal y verticalVer ejemplo
background-repeat: no-repeatLa imagen no se repiteVer ejemplo
Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Fijar la imagen de fondo [background-attachment]

La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.
Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.
La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.
ValorDescripciónEjemplo
Background-attachment: scrollLa imagen se desplaza con la página - no está fijaVer ejemplo
Background-attachment: fixedLa imagen está fijaVer ejemplo
Por ejemplo, el siguiente código fijará la imagen de fondo.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Ubicación de la imagen de fondo [background-position]

Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.
Hay muchas formas diferentes de establecer los valores de la propiedad background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.
Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo funciona el sistema:

La tabla siguiente proporciona varios ejemplos.
ValorDescripciónEjemplo
background-position: 2cm 2cmLa imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la páginaVer ejemplo
background-position: 50% 25%La imagen se posiciona en el centro de la página y un 25 % del margen superior de la mismaVer ejemplo
background-position: top rightLa imagen se posiciona en la esquina superior derecha de la páginaVer ejemplo
El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Combinación de propiedades [background]

La propiedad background es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección.
Con la propiedad background se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura.
Por ejemplo, observa estas cinco líneas de código:

 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 
Usando background se puede lograr el mismo resultado con una única línea de código:

 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
 
El orden en que deben aparecer las propiedades individuales es el siguiente:
[background-color] | [background-image] | [background-repeat][background-attachment] | [background-position]
Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. Por ejemplo, si se omiten las propiedades background-attachment y background-positiondel ejemplo anterior, quedando el código de la siguiente manera:

 background: #FFCC66 url("butterfly.gif") no-repeat;
 
Estas dos propiedades que no se especifican se establecerían, sin más, con sus valores por defecto, que, como ya sabes, son scroll y top left.

Resumen

En esta lección has aprendido nuevas técnicas que no serían posibles con HTML. La diversión continúa en la siguiente lección que examina el amplio abanico de posibilidades a la hora de usar CSS para describir las fuentes.