Cómo crear un enlace en la página web
Lo importante de una página web es la posibilidad de navegar de unas páginas a otras sin más que hacer clic en los enlaces, así que vamos a aprender a crearlos. Para crear un enlace hay que decidir dos cosas, una es desde qué palabra de nuestra web lo queremos hacer y segundo a qué página lo queremos dirigir.
Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que tenemos escrita en el segundo párrago hacia la dirección www.comocreartuweb.com
Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los cambios hechos en la página de antes). Ahora vuelve a abrirlo y aparecerá el Html-Kit en blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios ( la ventana Workspace) y una vez que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido. Ppara terminar, doble clic sobre el archivo index.html para ver su código. Tras esto, como sabes, puedes cerrar la venata de Workspace para tener más espacio.
El código Html de los enlaces o vínculos
Como estarás sospechando, los enlaces empiezan con una etiqueta y terminan con otra de cierre. La etiqueta de inicio para definir enlaces es <a> y la de cierre </a>. La palabra que encerremos entre esas dos etiquetas será la que el visitante pueda pinchar para acceder a la página enlazada. Por lo tanto, si la palabra fuera "palabra" (que poco original, no?) la línea quedaría así:
<a>palabra</a>
Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a qué página queremos enviar al visitante al hacer clic allí, no? Esto se define dentro de la etiqueta de inicio, de este modo:
<a href="ruta">palabra</a>
Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante.
Como queremos enlazar a una web externa, pondremos entre las comillas su ruta absoluta que es esta: http://www.comocreartuweb.com quedando el código del enlace de este modo:
<a href="http://www.comocreartuweb.com">CCTW</a>
Te dejo una vista del Html-Kit para que lo veas más claro, vale?
En la misma o en otra ventana?
Si no se indica ninguna cosa más, cuando el visitante haga clic en el enlace la página destino se abrira en la misma ventana, pero si quieres que en lugar de eso se abra en una ventana distinta (por ejemplo, para que no se pierda la web anterior) has de indicárselo dentro de la primera etiqueta. Yo te recomiendo que todos los enlaces hacia páginas de tu misma web se abran en la misma ventana, y que todos los enlaces hacia páginas externas las abras en ventanas diferentes.
Como este enlace apunta a una página externa (no forma parte de la web de ejemplo) le vamos a indicar que ha de abrirse en una ventana distinta y esto se hace añadiendo este trozo de código target="_blank" quedando por tanto el código así:
Quieres ver como está quedando? Este es el aspecto del ejemplo 3 .
Los estilos css
El mayor problema que encontramos los que hacemos páginas web es el conseguir que se vea idéntica en cualquier navegador. A veces terminamos una web que se ve perfecta en Explorer y de pronto viéndola con el Opera o con el Firefox descubrimos que está toda desordenada. El el peor sueño que podemos tener, je je je. Esto pasa porque no todos lo navegadores interpretan igual las cosas que escribimos en el código Html.
Para evitar esto lo mejor es usar estilos CSS. Mucha gente piensa que es algo complicado, pero como lo vamos a ir aprendiendo sobre la marcha no te va a resultar nada dificil, ya lo verás.
La idea es colocar en las páginas web solamente los contenidos, sin tener en cuenta colores, tamaños, anchuras ni nada de nada, solo contenidos puros y duros. Por otro lado crearemos un archivo aparte donde definiremos todas las características que queremos que tenga cada elemento de cada una de las página de la web. De este modo si un día creemos por poner un caso que el tamaño de la letra es muy pequeño y queremos hacerlo más grande, solo tenemos que indicarlo en ese archivo de características y automáticamente el tamaño de letra quedará cambiado en tooodas las páginas de nuestra web. Genial, no? Lo mismo podremos hacer a la hora de cambiar el fondo de la página, la posición de cierto elemento, el color de fondo de una parte, el coloreado de los enlaces.... todo lo que tenga que ver con el modo de presentar las cosas de la web se queda definido en ese archivo de características, vale?
La hoja de estilos css
Este archivo de características se llama Hoja de Estilos y aunque podemos ponerle el nombre que queramos, vamos a llamarlo siempre estilos.css para no liarnos. La extensión, .css es obligatoria.
Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada una de las páginas de nuestra web que ha de leer esa Hoja de Estilos para saber cómo queremos que se presenten los elementos de la web.
Crear la Hoja de Estilos "estilos.css"
Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para tener a mano el sitio "web-ejemplo-cctw". Igual que hicimos para crear la página principal index.html ahora vamos a hacer algo parecido para crear el archivo estilos.css
Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio "web-ejemplo-cctw" de la ventana Workspace y escogemos New > Create File... Se abre entonces la ventana que nos pregunta qué tipo de archivo queremos crear. Escogemos este que os enseño en la imagen de abajo:
Fíjate que está en la primera pestaña, donde pone StyleSheet que significa Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de Estilo en blanco. Al pulsar Ok nos pregunta qué nombre queremos darle al nuevo archivo. Escribimos "estilos.css"
Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio "web-ejemplo-cctw" de la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.
Esto cada vez pinta mejor, no?
Relaccionar la Hoja de Estilos CSS con la página web
Ahora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay que decirle a la página web index.html que tiene que leer las características que hay en estilos.css para que sepa qué propiedades queremos que tenga cada elemento de la página. No te preocupes si no te enteras mucho de cuáles con estas características, pues lo vamos a ver muy pronto y te va a quedar bien clarito.
Como los estilos no son un elemento que aparecerá en la página sino algo que indica cómo se han de mostrar los elementos (color, tamaño, etc), parece fácil adivinar que los estilos (o la llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head de la página no? Pues vamos allá. La línea de código Html que tenemos que incluir en la cabecera, es decir, entre <head> y </head> es esta:
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
(No pongas lo escrito en rojo. Eso significa que en ese lugar tienes que escribir la ruta, no que tengas que escribir "ruta/" literalmente. Sigue leyendo para tenerlo más claro)
Lo único que tendrás que cambiar en algunas ocasiones de esa línea es ruta/. Y cual será? Si leiste bien el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te hará más fácil entenderlo (leelo ahora si no lo has visto antes). Vamos a usar una ruta relativa para indicar dónde ha de leer la página index.html el archivo estilos.css
Como tanto la página index.html como el archivo estilos.css están en la misma carpeta, basta con escribir el nombre del archivo de la Hoja de Estilo. Esto es, usar rutas relativas. El código Html ha de queda entonces así.
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
De modo que abrimos el Html-Kit, abrimos la página index.html y escribimos esa línea de código dentro del Head, quedando de esta forma:
Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit) verás como no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) está todavía vacia, pero te prometo que te va a encantar el invento este cuando veas de lo que es capaz. Venga, lo estás haciendo genial!
Explicando el color y la imagen de fondo de una página web
Aunque podemos indicar un color y/o un fondo de página directamente en el código Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado en la página anterior. Así de paso, vamos a prendiendo a usar el archivo estilos.css para definir las características de las página web.
Color de fondo
Por defecto, el color de fondo de una página web es el blanco. Si queremos cualquier otro tenemos que indicarlo. El elemento al que tenemos que decir que tiene que tener el color que queramos es el Body, pues engloba a todo "lo que se ve" de la página web. Los colores se definen por un código muy raro (como por ejemplo #E6E6FA). Te dejo aquí un enlace con una lista de colores y sus códigos que te puede venir muy bien. Escoge uno que te guste para el fondo y seguimos.
Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana Workspace y abrimos la Hoja de Estilos creada antes. Escribe en ella este código:
body {background-color: #E6E6FA}
En adelante, cuando escriba códigos de CSS los pondré en color verde para distinguirlos del código Html que lo pondré de color azul. oki? (Cómo crees que hago esto? je je je, pues sí, con estilos CSS..)
Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como queda, verás como el fondo ahora es del color elegido. Bien, no? Y verás que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500 páginas pasaría lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos tendríamos que cambiar el color de fondo en las 500 páginas, una a una, a mano!!... es un buen invento o no? Pues aún hay webmasters que no lo saben usar... vaya tela.
Un poco de estilos CSS
Ya de paso te explico un poco de estilos css. Para dar propiedades a los elementos de la web, se escribe en la hoja de estilos el nombre de la etiqueta y a continuación, encerrado entre los corchetes "{" y "}" se define cada propiedad que queremos pero separándo unas de otras con un punto y coma ";". En el caso anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre corchetes hemos definido la propiedad. Background que significa fondo. background-color se usa para especificar el color de fondo no solo del body sino de otros muchos elementos, como párrafos, enlaces, etc,. Ese número raro, el #E6E6FA es el código que corresponde a uno de los colores que aparecian en la tabla de colores del enlace que te puse antes. En este caso, como solo hemos definido una propiedad, no es necesario poner el punto y coma, pues no hay nada que separar. Te parece muy raro todo esto? No te preocupes, pronto te será familiar y lo harás con los ojos cerrados... bueno con uno un poco abierto sale mejor.. je je.
Imagen de fondo
La imagen de fondo se define de forma similar al color de fondo. Primero vamos a escoger una imagen que nos guste. Tienes un montón en la ,pero puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrás en tu escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginas-web", y una vez copiada allí le cambias el nobre y le pones "fondo.png".
Suponiendo que le hemos puesto de nombre fondo.png el código a insertar en la hoja de estilos sería este:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Explicando el Background-Image
En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo que ha de tener la web. La ruta del archivo de imagen se escribe entre los paréntesis tal y como hemos visto en el código. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetirá horizontal y verticalmente para ocupar todo el fondo de la página, como formando un mosaico.
Se puede hacer que no se repita, que se repita solo horizontalmente, o solo verticalmente e incluso que no se repita y colocarlo en el centro, o en la parte baja o a la derecha.... En cambio no es posible conseguir que solo salga una vez y que a la vez se expanda ocupando toda la página. Vamos a ver todas esas opciones.
Background-Repeat
Para que el fondo solo salga una vez hay que decirle, en la misma línea de la hoja de estilo que no se repita, de este modo: background-repeat: no-repeat quedando así el código de la Hoja de Estilos:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat: x
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: x }
Para que se repita solo verticalmente se escribe: background-repeat: y
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: y }
Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner esto: background-repeat: repeat, tal que así:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: repeat }
Background-Position
También puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas combinaciones con la propiedad background-position. Te dejo un ejemplo para que lo pruebes y veas como funciona:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: left bottom}
Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineación vertical; y left (izquierda) center (centro) y right (derecha) para la alineación horizontal, de modo que puedes usar cualquiera de esas combinaciones.
Aunque no se recomienda, también puedes usar distancias, es decir, indicarle que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba, así: background-position: 50px 100px. Un pixel es una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor, casi pegando las narices a él, verás que todo está hecho con puntitos. Pues cada uno de esos es un pixel. Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho cada letra. Una página web suele tener una achura de 800 pixeles.
Background-Attachment
Esto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras mueves la página con la barra de desplazamiento o que se mueva con ella. Los valores a tomar son fixed o scroll. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no.
Nota:
Realmente, si definimos una imagen de fondo no es necesario el color de fondo. Puede estar bien por si el archivo de la imagen de fondo no se cargara, pero si estamos seguros de que está bien podemos eliminar la propiedad background-color de la línea de la hoja de estilos, no crees? Pues a no ser que la imagen no ocupe toda la página, la imagen tapará el color de fondo. En cambio si la imagen solo ocupa una parte si puede ser interesante colocar el color de fondo. Eso queda ya a tu criterio.
esto los ayudara a entender alguna cosas : http://www.taringa.net/posts/info/3736545/como-crear-tu-pagina-web-gratias-(-de-relleno-).html
MAÑANA AGO EL NUMERO 4 , A LOS QUE SIGUEN ESTOS POST , NO SE LO PIERDAN ...
PD: ACA RESPONDERAN CUALKIER PREGUNTA Q TENGAN : http://www.comocreartuweb.com/phpBB2/
Lo importante de una página web es la posibilidad de navegar de unas páginas a otras sin más que hacer clic en los enlaces, así que vamos a aprender a crearlos. Para crear un enlace hay que decidir dos cosas, una es desde qué palabra de nuestra web lo queremos hacer y segundo a qué página lo queremos dirigir.
Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que tenemos escrita en el segundo párrago hacia la dirección www.comocreartuweb.com
Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los cambios hechos en la página de antes). Ahora vuelve a abrirlo y aparecerá el Html-Kit en blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios ( la ventana Workspace) y una vez que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido. Ppara terminar, doble clic sobre el archivo index.html para ver su código. Tras esto, como sabes, puedes cerrar la venata de Workspace para tener más espacio.
El código Html de los enlaces o vínculos
Como estarás sospechando, los enlaces empiezan con una etiqueta y terminan con otra de cierre. La etiqueta de inicio para definir enlaces es <a> y la de cierre </a>. La palabra que encerremos entre esas dos etiquetas será la que el visitante pueda pinchar para acceder a la página enlazada. Por lo tanto, si la palabra fuera "palabra" (que poco original, no?) la línea quedaría así:
<a>palabra</a>
Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a qué página queremos enviar al visitante al hacer clic allí, no? Esto se define dentro de la etiqueta de inicio, de este modo:
<a href="ruta">palabra</a>
Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante.
Como queremos enlazar a una web externa, pondremos entre las comillas su ruta absoluta que es esta: http://www.comocreartuweb.com quedando el código del enlace de este modo:
<a href="http://www.comocreartuweb.com">CCTW</a>
Te dejo una vista del Html-Kit para que lo veas más claro, vale?
En la misma o en otra ventana?
Si no se indica ninguna cosa más, cuando el visitante haga clic en el enlace la página destino se abrira en la misma ventana, pero si quieres que en lugar de eso se abra en una ventana distinta (por ejemplo, para que no se pierda la web anterior) has de indicárselo dentro de la primera etiqueta. Yo te recomiendo que todos los enlaces hacia páginas de tu misma web se abran en la misma ventana, y que todos los enlaces hacia páginas externas las abras en ventanas diferentes.
Como este enlace apunta a una página externa (no forma parte de la web de ejemplo) le vamos a indicar que ha de abrirse en una ventana distinta y esto se hace añadiendo este trozo de código target="_blank" quedando por tanto el código así:
Quieres ver como está quedando? Este es el aspecto del ejemplo 3 .
Los estilos css
El mayor problema que encontramos los que hacemos páginas web es el conseguir que se vea idéntica en cualquier navegador. A veces terminamos una web que se ve perfecta en Explorer y de pronto viéndola con el Opera o con el Firefox descubrimos que está toda desordenada. El el peor sueño que podemos tener, je je je. Esto pasa porque no todos lo navegadores interpretan igual las cosas que escribimos en el código Html.
Para evitar esto lo mejor es usar estilos CSS. Mucha gente piensa que es algo complicado, pero como lo vamos a ir aprendiendo sobre la marcha no te va a resultar nada dificil, ya lo verás.
La idea es colocar en las páginas web solamente los contenidos, sin tener en cuenta colores, tamaños, anchuras ni nada de nada, solo contenidos puros y duros. Por otro lado crearemos un archivo aparte donde definiremos todas las características que queremos que tenga cada elemento de cada una de las página de la web. De este modo si un día creemos por poner un caso que el tamaño de la letra es muy pequeño y queremos hacerlo más grande, solo tenemos que indicarlo en ese archivo de características y automáticamente el tamaño de letra quedará cambiado en tooodas las páginas de nuestra web. Genial, no? Lo mismo podremos hacer a la hora de cambiar el fondo de la página, la posición de cierto elemento, el color de fondo de una parte, el coloreado de los enlaces.... todo lo que tenga que ver con el modo de presentar las cosas de la web se queda definido en ese archivo de características, vale?
La hoja de estilos css
Este archivo de características se llama Hoja de Estilos y aunque podemos ponerle el nombre que queramos, vamos a llamarlo siempre estilos.css para no liarnos. La extensión, .css es obligatoria.
Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada una de las páginas de nuestra web que ha de leer esa Hoja de Estilos para saber cómo queremos que se presenten los elementos de la web.
Crear la Hoja de Estilos "estilos.css"
Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para tener a mano el sitio "web-ejemplo-cctw". Igual que hicimos para crear la página principal index.html ahora vamos a hacer algo parecido para crear el archivo estilos.css
Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio "web-ejemplo-cctw" de la ventana Workspace y escogemos New > Create File... Se abre entonces la ventana que nos pregunta qué tipo de archivo queremos crear. Escogemos este que os enseño en la imagen de abajo:
Fíjate que está en la primera pestaña, donde pone StyleSheet que significa Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de Estilo en blanco. Al pulsar Ok nos pregunta qué nombre queremos darle al nuevo archivo. Escribimos "estilos.css"
Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio "web-ejemplo-cctw" de la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.
Esto cada vez pinta mejor, no?
Relaccionar la Hoja de Estilos CSS con la página web
Ahora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay que decirle a la página web index.html que tiene que leer las características que hay en estilos.css para que sepa qué propiedades queremos que tenga cada elemento de la página. No te preocupes si no te enteras mucho de cuáles con estas características, pues lo vamos a ver muy pronto y te va a quedar bien clarito.
Como los estilos no son un elemento que aparecerá en la página sino algo que indica cómo se han de mostrar los elementos (color, tamaño, etc), parece fácil adivinar que los estilos (o la llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head de la página no? Pues vamos allá. La línea de código Html que tenemos que incluir en la cabecera, es decir, entre <head> y </head> es esta:
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
(No pongas lo escrito en rojo. Eso significa que en ese lugar tienes que escribir la ruta, no que tengas que escribir "ruta/" literalmente. Sigue leyendo para tenerlo más claro)
Lo único que tendrás que cambiar en algunas ocasiones de esa línea es ruta/. Y cual será? Si leiste bien el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te hará más fácil entenderlo (leelo ahora si no lo has visto antes). Vamos a usar una ruta relativa para indicar dónde ha de leer la página index.html el archivo estilos.css
Como tanto la página index.html como el archivo estilos.css están en la misma carpeta, basta con escribir el nombre del archivo de la Hoja de Estilo. Esto es, usar rutas relativas. El código Html ha de queda entonces así.
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
De modo que abrimos el Html-Kit, abrimos la página index.html y escribimos esa línea de código dentro del Head, quedando de esta forma:
Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit) verás como no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) está todavía vacia, pero te prometo que te va a encantar el invento este cuando veas de lo que es capaz. Venga, lo estás haciendo genial!
Explicando el color y la imagen de fondo de una página web
Aunque podemos indicar un color y/o un fondo de página directamente en el código Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado en la página anterior. Así de paso, vamos a prendiendo a usar el archivo estilos.css para definir las características de las página web.
Color de fondo
Por defecto, el color de fondo de una página web es el blanco. Si queremos cualquier otro tenemos que indicarlo. El elemento al que tenemos que decir que tiene que tener el color que queramos es el Body, pues engloba a todo "lo que se ve" de la página web. Los colores se definen por un código muy raro (como por ejemplo #E6E6FA). Te dejo aquí un enlace con una lista de colores y sus códigos que te puede venir muy bien. Escoge uno que te guste para el fondo y seguimos.
Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana Workspace y abrimos la Hoja de Estilos creada antes. Escribe en ella este código:
body {background-color: #E6E6FA}
En adelante, cuando escriba códigos de CSS los pondré en color verde para distinguirlos del código Html que lo pondré de color azul. oki? (Cómo crees que hago esto? je je je, pues sí, con estilos CSS..)
Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como queda, verás como el fondo ahora es del color elegido. Bien, no? Y verás que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500 páginas pasaría lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos tendríamos que cambiar el color de fondo en las 500 páginas, una a una, a mano!!... es un buen invento o no? Pues aún hay webmasters que no lo saben usar... vaya tela.
Un poco de estilos CSS
Ya de paso te explico un poco de estilos css. Para dar propiedades a los elementos de la web, se escribe en la hoja de estilos el nombre de la etiqueta y a continuación, encerrado entre los corchetes "{" y "}" se define cada propiedad que queremos pero separándo unas de otras con un punto y coma ";". En el caso anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre corchetes hemos definido la propiedad. Background que significa fondo. background-color se usa para especificar el color de fondo no solo del body sino de otros muchos elementos, como párrafos, enlaces, etc,. Ese número raro, el #E6E6FA es el código que corresponde a uno de los colores que aparecian en la tabla de colores del enlace que te puse antes. En este caso, como solo hemos definido una propiedad, no es necesario poner el punto y coma, pues no hay nada que separar. Te parece muy raro todo esto? No te preocupes, pronto te será familiar y lo harás con los ojos cerrados... bueno con uno un poco abierto sale mejor.. je je.
Imagen de fondo
La imagen de fondo se define de forma similar al color de fondo. Primero vamos a escoger una imagen que nos guste. Tienes un montón en la ,pero puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrás en tu escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginas-web", y una vez copiada allí le cambias el nobre y le pones "fondo.png".
Suponiendo que le hemos puesto de nombre fondo.png el código a insertar en la hoja de estilos sería este:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Explicando el Background-Image
En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo que ha de tener la web. La ruta del archivo de imagen se escribe entre los paréntesis tal y como hemos visto en el código. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetirá horizontal y verticalmente para ocupar todo el fondo de la página, como formando un mosaico.
Se puede hacer que no se repita, que se repita solo horizontalmente, o solo verticalmente e incluso que no se repita y colocarlo en el centro, o en la parte baja o a la derecha.... En cambio no es posible conseguir que solo salga una vez y que a la vez se expanda ocupando toda la página. Vamos a ver todas esas opciones.
Background-Repeat
Para que el fondo solo salga una vez hay que decirle, en la misma línea de la hoja de estilo que no se repita, de este modo: background-repeat: no-repeat quedando así el código de la Hoja de Estilos:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat }
Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat: x
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: x }
Para que se repita solo verticalmente se escribe: background-repeat: y
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: y }
Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner esto: background-repeat: repeat, tal que así:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: repeat }
Background-Position
También puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas combinaciones con la propiedad background-position. Te dejo un ejemplo para que lo pruebes y veas como funciona:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: left bottom}
Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineación vertical; y left (izquierda) center (centro) y right (derecha) para la alineación horizontal, de modo que puedes usar cualquiera de esas combinaciones.
Aunque no se recomienda, también puedes usar distancias, es decir, indicarle que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba, así: background-position: 50px 100px. Un pixel es una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor, casi pegando las narices a él, verás que todo está hecho con puntitos. Pues cada uno de esos es un pixel. Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho cada letra. Una página web suele tener una achura de 800 pixeles.
Background-Attachment
Esto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras mueves la página con la barra de desplazamiento o que se mueva con ella. Los valores a tomar son fixed o scroll. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no.
Nota:
Realmente, si definimos una imagen de fondo no es necesario el color de fondo. Puede estar bien por si el archivo de la imagen de fondo no se cargara, pero si estamos seguros de que está bien podemos eliminar la propiedad background-color de la línea de la hoja de estilos, no crees? Pues a no ser que la imagen no ocupe toda la página, la imagen tapará el color de fondo. En cambio si la imagen solo ocupa una parte si puede ser interesante colocar el color de fondo. Eso queda ya a tu criterio.
esto los ayudara a entender alguna cosas : http://www.taringa.net/posts/info/3736545/como-crear-tu-pagina-web-gratias-(-de-relleno-).html
MAÑANA AGO EL NUMERO 4 , A LOS QUE SIGUEN ESTOS POST , NO SE LO PIERDAN ...
PD: ACA RESPONDERAN CUALKIER PREGUNTA Q TENGAN : http://www.comocreartuweb.com/phpBB2/