jueves, 18 de octubre de 2012
miércoles, 10 de agosto de 2011
jueves, 4 de noviembre de 2010
Buying And Selling Just Anything Online
InventBuy.com - Buying And Selling Just Anything Online
Available in English and in Spanish, www.InventBuy.com is a new marketplace that aims to let people purchase whatever they want, right when they need it and at the best possible price. Those who use the site
are asked to fill out a short form detailing the products that they want to purchase, and that information is then forwarded to all the vendors who are registered on the site.
If any of these vendors has that item on stock, then he will get in touch with the user. They will be able to start negotiating the price, and if an agreement is reached then they will have a deal.
And if more than one vendor can provide the user with the item in question, then a bidding process will ensue. But at no point will any vendor know the exact price being offered by the others.
The site can be joined and used for free, both by buyers and by vendors. The former will actually be able to individualize as many items as they fancy when asked what they are looking for, and vendors will be allowed to have their own customized storefronts.
Web: www.inventbuy.com
Inventbuy.com
http://www.Inventbuy.com
-----------------------------------------------------
www.Inventbuy.com
Yo he descubierto este sitio para incrementar las ventas por Internet muy muy MUY interesante que se llama Inventbuy.com (comprar y vender coches, motos, libros, relojes, joyas, informática, electrónica) es
una Página web que te permite negociar el precio de lo que necesitas comprar con diferentes vendedores (INVENTBUY.com) que intentarán ofrecerte sus productos a los mejores precios del mercado y negociar un
producto con varios vendedores y conseguir así mejor precio de compra. Además los vendedores tendrán diferentes herramientas de compra y venta como es la posibilidad de tener de manera gratuita una Tienda
Virtual on-line.
www.inventbuy.com
-------------------------------------------------------
Yo os recomendaría www.inventbuy.com que es OTRA forma para facilitar a los usuarios a VENDER y COMPRAR por Internet, tener su propia tienda virtual, etc.. entrar y registrarse gratis, además a los
vendedores sólo les cobra el 1% del total de la venta, muuuuuuucho más barato que Ebay, y sólo cobra si vendes la mercancía, sino no!!
Si necesitas comprar algo pon tu demanda en la web y será los vendedores los que te ofrezcan sus precios, precios que podrás regatear con ellos para sacar el mejor precio para ti.
www.inventbuy.com
Available in English and in Spanish, www.InventBuy.com is a new marketplace that aims to let people purchase whatever they want, right when they need it and at the best possible price. Those who use the site
are asked to fill out a short form detailing the products that they want to purchase, and that information is then forwarded to all the vendors who are registered on the site.
If any of these vendors has that item on stock, then he will get in touch with the user. They will be able to start negotiating the price, and if an agreement is reached then they will have a deal.
And if more than one vendor can provide the user with the item in question, then a bidding process will ensue. But at no point will any vendor know the exact price being offered by the others.
The site can be joined and used for free, both by buyers and by vendors. The former will actually be able to individualize as many items as they fancy when asked what they are looking for, and vendors will be allowed to have their own customized storefronts.
Web: www.inventbuy.com
Inventbuy.comhttp://www.Inventbuy.com
-----------------------------------------------------
www.Inventbuy.com
Yo he descubierto este sitio para incrementar las ventas por Internet muy muy MUY interesante que se llama Inventbuy.com (comprar y vender coches, motos, libros, relojes, joyas, informática, electrónica) es
una Página web que te permite negociar el precio de lo que necesitas comprar con diferentes vendedores (INVENTBUY.com) que intentarán ofrecerte sus productos a los mejores precios del mercado y negociar un
producto con varios vendedores y conseguir así mejor precio de compra. Además los vendedores tendrán diferentes herramientas de compra y venta como es la posibilidad de tener de manera gratuita una Tienda
Virtual on-line.
www.inventbuy.com
-------------------------------------------------------
Yo os recomendaría www.inventbuy.com que es OTRA forma para facilitar a los usuarios a VENDER y COMPRAR por Internet, tener su propia tienda virtual, etc.. entrar y registrarse gratis, además a los
vendedores sólo les cobra el 1% del total de la venta, muuuuuuucho más barato que Ebay, y sólo cobra si vendes la mercancía, sino no!!
Si necesitas comprar algo pon tu demanda en la web y será los vendedores los que te ofrezcan sus precios, precios que podrás regatear con ellos para sacar el mejor precio para ti.
www.inventbuy.com
martes, 24 de marzo de 2009
Crear web, 3ª pagina
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Cómo insertar un enlace a tu E-Mail
Sin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que mejorar, de modo que colocar un enlace donde el usuario pueda hacer clic para escibirte un E-Milio parece algo imprescindible, verdad? Claro que más adelante colocaremos un foro en la web, pero nunca está de más al menos saber como insertar estos enlaces de correo, así que vamos a aprender.
Código Html de un enlace de E-Mail
Como vas a ver, es muy parecido al código Html de un enlace a otra página web. Solo cambian una palabrilla, y por supuesto la ruta, que en este caso será simplemente tu dirección E-Mail. La línea de código en Html es la siguiente:
Texto que quieras poner para hacer clic en él
Donde pone "Texto que quieras poner.." escribe las palabras que verá el visitante y donde ha de hacer clic para enviarte el mensaje. Puedes poner "Envíame un E-Milio", "Clic para escribirme" o simplemente la propia dirección de tu E-Mail.
Problemas de este tipo de enlace
El problema que yo le veo a esto es que hay miles de robots pululando por la red en busca de direcciones de E-Mail para crear bases de datos con ellos y enviarles todo ese spam del que terminamos tan hartos. Por lo que quizás prefieras una alternativa, más incomoda para el visitante pero efectiva contra el spam. Se trata de escribir tu dirección de E-Mail con un programa de dibujo y colocar la imagen en la web. De este modo, como las imágenes no pueden ser leidas, estos robots no pueden cazar tu dirección mientras que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa de correo para mandarte sus felicitaciones.
También puedes colocar un botón cualquiera y hacer el enlace desde allí. El botón sería un simple dibujo con el texto "E-Mail" o el dibujo de un buzón de correo o algo así. En ese caso los robots de spam no pueden leer la imagen, pero quizás puedan sacar la dirección de tu E-Mail desde el código html de tu web, por lo que seguimos con el mismo problema...
Qué hacemos entonces? Por el momento y para el caso del ejemplo, vamos a colocar el enlace de E-Mail en un dibujo de un buzón. Aunque sea para aprender, oki?
Enlace de E-Mail en una imagen
Primero guárdate esta imagen en tu carpeta de "objetos" para poder seguir. Al guardarla ponle de nombre buzon.gif
Ya tenemos tres archivos en la carpeta de "objetos":
Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre, puedes cerrar la ventana de Workspace de la derecha para tener más sitio y maximizar la ventana del index. Mejor, verdad? je je.
Pon el cursor del ratón justo al final de la línea de código del último párrafo (justo antes de ), pulsa con el ratón una sola vez para colocar el cursor allí y pulsa luego el Intro para crear una nueva línea. Como te dije anteriormente, conviene poner las cosas dentro de un párrafo, de modo que creamos ese párrafo aún vacio escribiendo sus etiquetas
.
Ahora situa el cursor dentro de ese párrafo (colocándolo entre
(Fijate como en la línea número 15 del código html en la imagen de arriba, he escrito ya
y he colocado el cursor entre esas dos etiquetas)
Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece:
Fíjate como tras seleccionar el archivo buzón en la ventana derecha de arriba, podemos escribir el "alt" del que hablamos páginas atras, y como por fín he descubierto como poner las unidades en el ancho y alto de la imagen.... era obvio verdad? je je je. Pues si, escribe "px" detrás de cada cifra de auchura y altura después de poner al "alt" y luego pulsa el Ok.
Automáticamente aparece esa nueva línea de código Html en la ventana de nuestro index
y si le das a "preview" podrás ver el buzón en cuestión. Vamos ahora a colocarle el enlace a nuestro E-Mail.
Enlace de E-Mail con Html-Kit:
Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar todo el código html de la imagen primero. Si te cuesta trabajo seleccionarlo, prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la tecla "Shift" (es la flecha que apunta para arriba, esa que se pulsa para escribir mayúsculas, justo encima del "Control") de tu teclado teniendo el cursor al final del código que quieres seleccionar. Lo que tienes que seleccionar es el que he puesto arriba, desde . No selecciones la parte de
Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link...:
Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la imagen seleccionada (aunque puede que no se vea). Ahora en la lista de opciones de la izquierda de esa ventana, en la línea que pone "href" escoge "mailto:", así:
y a continuación de mailto: escribe tu dirección de correo.
Después pulsa Ok y listo!
Los estilos CSS para las imágenes con enlaces
Como verás si pulsas en "Overview" o vista previa, la imagen del buzón de correo aparece recuadrada en azul. Esto es porque por defecto, los enlaces aparecen siempre subrayados con una lína azul, para indicar que son enlaces. Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada aparece recuadrada en azul.
Esto no queda demasiado bien, de modo que vamos a corregirlo.Verás qué rápido y fácil se hace esto con la hoja de estilo y sin tocar para nada el index.
Cierra el index.html de tu Html-Kit y abre la hoja de estilos llamada "estilos.css". Verás como solo tenemos aquella línea que habiamos definido para el body. Vamos a incluir otra línea más con este contenido:
img {border-style: none}
Esto indica que, todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre corchetes, es decir, que no tengan ningúna tipo de borde.
Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa ya no aparece ese recuadro. Tampoco saldrá ya en ninguna de las imágenes de ninguna de nuestras páginas. Buen invento esta hoja de estilos, verdad? Pues aún tiene cosas mejores, ya lo verás más adelante.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Cómo centrar un párrafo de la página web
Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera, pero por lo pronto hemos aprendido ya algunas cosas interesantes. El aspecto de la web conseguida hasta ahora no está mal del todo, pero se le echa en falta por lo menos el conseguir centrar algunos párrafos.
Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como siempre a nuestra grandiosa Hoja de Estilos.
Crear un estilo centrado
La propiedad en CSS que define la alineación de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify (justificado).
Si quisieramos que todos los párrafos aparecieran centrados, bastaría con poner en la Hoja de Estilo esta línea:
p {text-align:center}
El problema de esto es que nos centra TODOS los párrafos y seguramente no queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo.
Por ejemplo, podríamos crear un nuevo tipo o clase de estilo que podemos llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la página le indicamos a un párrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.
Crear una clase de estilo
Abrimos la Hoja de Estilo y escribimos esta línea:
.centrado {text-align:center}
Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuación entre los corchetes hemos dado la propiedad de centrado.
Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas:
- Siempre en minúsculas.
- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y números.
- Nunca empezar el nombre con un número.
- Si necesitas separar el nombre en dos o más palabras usa guiones medios "nombre-nombre", nunca bajos "nombre_nombre".
Bien, una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.html para centrar algunos párrafos.
Centrar párrafos en el Html
Como recordarás, todos los párrafos empiezan con la etiqueta
Si ahora haces vista previa o "Overview" desde el Html-Kit, verás como este párrafo aparece ahora centrado. Fácil, verdad?
A partir de ahora, cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado" dentro de la etiqueta de inicio en su código Html.
Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, más el nombre, y se indica en el html con class="nombre" (aquí sin el punto). Estas cosas no las sabe cualquiera, no te creas... estás empezando a ser un Webmaster de verdad!
Cómo va nuestra página web por el momento?
Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el código Html de la web de ejemplo, te dejo aquí lo conseguido hasta el momento. Recuerda que puedes hacer experimentos creando otro sitio local, creando otra carpeta dentro de la carpeta "mis-paginas-web" que hemos creado en tu escritorio y repitiendo los primeros pasos de estas lecciones. Pero la web del ejemplo es mejor que no la toques mucho pues te podrías perder cuando la usamos en las lecciones siguientes, oki?
La maravillosa Hoja de Estilo queda así:
body { background-color: #E6E6FA ;
background-image: url(objetos/fondo.png) ;
background-repeat: no-repeat ;
background-position: center center }
img { border-style: none }
.centrado { text-align:center }
Y el código Html del index.html de ejemplo así:
Cómo insertar un enlace a tu E-Mail
Sin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que mejorar, de modo que colocar un enlace donde el usuario pueda hacer clic para escibirte un E-Milio parece algo imprescindible, verdad? Claro que más adelante colocaremos un foro en la web, pero nunca está de más al menos saber como insertar estos enlaces de correo, así que vamos a aprender.
Código Html de un enlace de E-Mail
Como vas a ver, es muy parecido al código Html de un enlace a otra página web. Solo cambian una palabrilla, y por supuesto la ruta, que en este caso será simplemente tu dirección E-Mail. La línea de código en Html es la siguiente:
Texto que quieras poner para hacer clic en él
Donde pone "Texto que quieras poner.." escribe las palabras que verá el visitante y donde ha de hacer clic para enviarte el mensaje. Puedes poner "Envíame un E-Milio", "Clic para escribirme" o simplemente la propia dirección de tu E-Mail.
Problemas de este tipo de enlace
El problema que yo le veo a esto es que hay miles de robots pululando por la red en busca de direcciones de E-Mail para crear bases de datos con ellos y enviarles todo ese spam del que terminamos tan hartos. Por lo que quizás prefieras una alternativa, más incomoda para el visitante pero efectiva contra el spam. Se trata de escribir tu dirección de E-Mail con un programa de dibujo y colocar la imagen en la web. De este modo, como las imágenes no pueden ser leidas, estos robots no pueden cazar tu dirección mientras que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa de correo para mandarte sus felicitaciones.
También puedes colocar un botón cualquiera y hacer el enlace desde allí. El botón sería un simple dibujo con el texto "E-Mail" o el dibujo de un buzón de correo o algo así. En ese caso los robots de spam no pueden leer la imagen, pero quizás puedan sacar la dirección de tu E-Mail desde el código html de tu web, por lo que seguimos con el mismo problema...
Qué hacemos entonces? Por el momento y para el caso del ejemplo, vamos a colocar el enlace de E-Mail en un dibujo de un buzón. Aunque sea para aprender, oki?
Enlace de E-Mail en una imagen
Primero guárdate esta imagen en tu carpeta de "objetos" para poder seguir. Al guardarla ponle de nombre buzon.gif
Ya tenemos tres archivos en la carpeta de "objetos":
Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre, puedes cerrar la ventana de Workspace de la derecha para tener más sitio y maximizar la ventana del index. Mejor, verdad? je je.
Pon el cursor del ratón justo al final de la línea de código del último párrafo (justo antes de ), pulsa con el ratón una sola vez para colocar el cursor allí y pulsa luego el Intro para crear una nueva línea. Como te dije anteriormente, conviene poner las cosas dentro de un párrafo, de modo que creamos ese párrafo aún vacio escribiendo sus etiquetas
.
Ahora situa el cursor dentro de ese párrafo (colocándolo entre
y
) y en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen (te dejo una foto para que recuerdes cómo era):(Fijate como en la línea número 15 del código html en la imagen de arriba, he escrito ya
y he colocado el cursor entre esas dos etiquetas)
Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece:
Fíjate como tras seleccionar el archivo buzón en la ventana derecha de arriba, podemos escribir el "alt" del que hablamos páginas atras, y como por fín he descubierto como poner las unidades en el ancho y alto de la imagen.... era obvio verdad? je je je. Pues si, escribe "px" detrás de cada cifra de auchura y altura después de poner al "alt" y luego pulsa el Ok.
Automáticamente aparece esa nueva línea de código Html en la ventana de nuestro index
y si le das a "preview" podrás ver el buzón en cuestión. Vamos ahora a colocarle el enlace a nuestro E-Mail.
Enlace de E-Mail con Html-Kit:
Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar todo el código html de la imagen primero. Si te cuesta trabajo seleccionarlo, prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la tecla "Shift" (es la flecha que apunta para arriba, esa que se pulsa para escribir mayúsculas, justo encima del "Control") de tu teclado teniendo el cursor al final del código que quieres seleccionar. Lo que tienes que seleccionar es el que he puesto arriba, desde . No selecciones la parte de
ni la de
, oki?Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link...:
Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la imagen seleccionada (aunque puede que no se vea). Ahora en la lista de opciones de la izquierda de esa ventana, en la línea que pone "href" escoge "mailto:", así:
y a continuación de mailto: escribe tu dirección de correo.
Después pulsa Ok y listo!
Los estilos CSS para las imágenes con enlaces
Como verás si pulsas en "Overview" o vista previa, la imagen del buzón de correo aparece recuadrada en azul. Esto es porque por defecto, los enlaces aparecen siempre subrayados con una lína azul, para indicar que son enlaces. Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada aparece recuadrada en azul.
Esto no queda demasiado bien, de modo que vamos a corregirlo.Verás qué rápido y fácil se hace esto con la hoja de estilo y sin tocar para nada el index.
Cierra el index.html de tu Html-Kit y abre la hoja de estilos llamada "estilos.css". Verás como solo tenemos aquella línea que habiamos definido para el body. Vamos a incluir otra línea más con este contenido:
img {border-style: none}
Esto indica que, todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre corchetes, es decir, que no tengan ningúna tipo de borde.
Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa ya no aparece ese recuadro. Tampoco saldrá ya en ninguna de las imágenes de ninguna de nuestras páginas. Buen invento esta hoja de estilos, verdad? Pues aún tiene cosas mejores, ya lo verás más adelante.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Cómo centrar un párrafo de la página web
Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera, pero por lo pronto hemos aprendido ya algunas cosas interesantes. El aspecto de la web conseguida hasta ahora no está mal del todo, pero se le echa en falta por lo menos el conseguir centrar algunos párrafos.
Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como siempre a nuestra grandiosa Hoja de Estilos.
Crear un estilo centrado
La propiedad en CSS que define la alineación de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify (justificado).
Si quisieramos que todos los párrafos aparecieran centrados, bastaría con poner en la Hoja de Estilo esta línea:
p {text-align:center}
El problema de esto es que nos centra TODOS los párrafos y seguramente no queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo.
Por ejemplo, podríamos crear un nuevo tipo o clase de estilo que podemos llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la página le indicamos a un párrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.
Crear una clase de estilo
Abrimos la Hoja de Estilo y escribimos esta línea:
.centrado {text-align:center}
Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuación entre los corchetes hemos dado la propiedad de centrado.
Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas:
- Siempre en minúsculas.
- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y números.
- Nunca empezar el nombre con un número.
- Si necesitas separar el nombre en dos o más palabras usa guiones medios "nombre-nombre", nunca bajos "nombre_nombre".
Bien, una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.html para centrar algunos párrafos.
Centrar párrafos en el Html
Como recordarás, todos los párrafos empiezan con la etiqueta
. Pues es dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos así) la clase de estilo que queremos que tome.
Vamos por ejemplo a centrar el párrafo donde ponemos "Bienvenidos...". Para ello vamos a la vista del código html del index y modificamos esa etiqueta
dejándola así:
Bienvenidos a mi página web. Muy pronto estará lista!
Si ahora haces vista previa o "Overview" desde el Html-Kit, verás como este párrafo aparece ahora centrado. Fácil, verdad?
A partir de ahora, cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado" dentro de la etiqueta de inicio en su código Html.
Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, más el nombre, y se indica en el html con class="nombre" (aquí sin el punto). Estas cosas no las sabe cualquiera, no te creas... estás empezando a ser un Webmaster de verdad!
Cómo va nuestra página web por el momento?
Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el código Html de la web de ejemplo, te dejo aquí lo conseguido hasta el momento. Recuerda que puedes hacer experimentos creando otro sitio local, creando otra carpeta dentro de la carpeta "mis-paginas-web" que hemos creado en tu escritorio y repitiendo los primeros pasos de estas lecciones. Pero la web del ejemplo es mejor que no la toques mucho pues te podrías perder cuando la usamos en las lecciones siguientes, oki?
La maravillosa Hoja de Estilo queda así:
body { background-color: #E6E6FA ;
background-image: url(objetos/fondo.png) ;
background-repeat: no-repeat ;
background-position: center center }
img { border-style: none }
.centrado { text-align:center }
Y el código Html del index.html de ejemplo así:
Bienvenidos a mi página web. Muy pronto estará lista!
Y con esta página terminamos con la primera lección. Pulsando arriba, en la barra de navegación naranja sobre "Lección Segunda" o pulsando en la flecha derecha de aquí abajo continuamos con la segunda, donde empezaremos a meter mano a la plantilla.
Espero que me des tu opinión de estas lecciones en el Foro CCTW, eh? Solo con tu punto de vista y tu opinión puedo mejorar todo esto, acuérdate de mí! je je je.
crear una web, segunda parte
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
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 Galería de Imágenes, 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) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.
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.
Aplicando color e imagen de fondo a nuestro ejemplo
Ups, creo que en la página de antes me he pasado un poco escribiendo. Espero no haberte asustado, je je je. Solo acuérdate de que ahí hay información de los fondos por si algún día te hace falta. Vamos ahora a aplicar un color de fondo a la web de nuestro ejemplo.
Aplicando el color de fondo
Tal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la página web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes, abres el Html-Kit y abres la hoja de estilo para insertarle esta línea):
body {background-color: #E6E6FA}
Aplicando una imagen de fondo
Suponiendo que hemos escogido esta imagen para el fondo de la web (lo se, es horrible, pero para el ejemplo sirve, no?):
(Para guardártela, pon el ratón sobre ella, haz clic derecho y escoge guardar como. Luego la guardas en la carpeta "objetos".)
y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo.png", abrimos la hoja de estilo y dejamos la línea de antes así:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Como no quiero que se repita, le pongo tambien esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat }
Además la quiero centrada tanto vertical como horizontalmente, así que le añado esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: center center}
En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma línea que el body va a tener una altura del 100%, esto es... que va a ocupar lo que tenga que ocupar. Una chorrada, lo se, pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%; }
A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es un calentamiento de cabeza tremendo, pero tú tienes la suerte de contar con CCTW, je je je.
La página de ejemplo, tras guardar la hoja de estilo, se vería así con cualquier navegador (espero...):
Si tú la ves diferente, rara, nos lo dices en el foro, en la sección de Html-Kit y así lo reparamos y retocamos la lección, oki?
Qué tal? Mereció la pena el rollo de la página anterior? je je je. Intentaré hacerlo más ameno la próxima vez...
Cómo insertar una imagen en una página web
Ya hemos insertado una imagen como fondo de página pero para insertar una imagen dentro de la misma el procedimiento es algo distinto. Como puedes sospechar, como las imágenes son "visibles" van definidas dentro del Body. En qué lugar? Eso ya depende de donde la queramos insertar.
Dónde insertar la imagen.
Si creamos la línea de código Html en cualquier parte dentro del Body, ésta aparecerá allí, en cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qué parte del código Html insertar la línea de código correspondiente a un elemento para conseguir que aparezca donde deseas, verdad?
Pues bien, una imagen puede insertarse o bien dentro de un párrafo, es decir, entre palabras, como este ejemplo y sin que el párrafo se corte, o bien como una línea independiente. En ambos casos es aconsejable meterla en un párrafo, a pesar de que sea la imagen lo único que haya en esa línea, es decir, siempre encerrada entre
Código Html para insertar una imagen
Para insertar una imagen, se coloca el siguiente código:
Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone . Recuérdalo, oki? Las imágenes nunca tienen etiqueta de cierre. Vamos a ver lo que hay dentro de ese código.
Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o está guardada en tu espacio web) o absoluta (siempre que la imagen la estés obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no lo olvides.
Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo válido es ponerlo junto, así "100px". Estas cantidades las coloca normalmente el Html-Kit automáticamente y si tú las cambias seguramente la imagen se vea desvirtuada y perderá definición. Si necesitas cambiar el tamaño mejor hacerlo con un programa gráfico y luego la vuelves a pegar en la página, oki?
En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la página fallara, el resto de los elementos como párrafos etc, ocuparían el lugar de esa imagen. Sería como si no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra, el navegador dejará un rectángulo con esas medidas en blanco, respetando la estructura de la web, sin mover nada. Eso es bueno, no crees?
Por último vemos un alt="........". No es obligatorio, pero para tener un código válido es necesario poner ese alt y además escribir entre las comillas una breve descripción de la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algún problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las búsquedas de sus usuarios con el contenido de las páginas web, de modo que es bueno además hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripción. En mi caso, si quiero aparecer en Google cuando la gente busque por las palabras "html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las imágenes como "Menú del Html-Kit", o "Así se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen, claro.
Vamos a insertar una imagen en nuestro ejemplo
En primer lugar necesitaremos una imagen guardada en la carpeta "objetos", que para eso está. Copia esta misma que dejo debajo, la guardas en tu carpeta "objetos" y seguimos. Recuerda que para copiártela solo tienes que poner tu ratón sobre ella, apretar el botón derecho del ratón y escoger "Guardar imagen como...". Ponle el nombre sonrisa.gif y seguimos adelante.
Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la página index.html para continuar. Vamos a colocar la imagen entre el párrafo donde dice "Bienvenidos a mi página web" y el que dice "Página creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor después del primer (al final de la línea de código del primer párrafo). A continuación pulsamos Intro para crear una nueva línea e insertamos esto (como te he dicho, la encerramos entre nuevos
Quieres aprender a hacerlo directamente desde las opciones del Html-Kit?
Situa el cursor al final del primer párrafo, como antes. Pulsa Intro para crear una nueva línea y seguidamente ve a la barra de herramientas del Html-Kit y escoge Etiquetas > Imagen > Insertar Imagen...
Aparece entonces esta ventana:
Pulsas sobre Add... y en la ventana que se abre (mira la imagen de aqui arriba) busca la carpeta "objetos". Tras pulsar en Aceptar se ve esto en la misma ventana:
Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha, verás como aparecen una serie de datos que te he señalado en rojo en la foto de arriba. Aparce la ruta relativa, lo que ocupa, el ancho, el alto, etc. Curioso, verdad?
Nos falta ya que estamos ahí poner la descripción. Para eso pulsamos a la derecha de donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la descripción que te dije antes "Bienvenido al Ejemplo de CCTW". Como verás hay muchísimas más opciones para las imágenes en esa ventana, pero por ahora lo dejamos así, para no saturarnos, oki?
Tras escribir la descripción y pulsar Ok, vemos como aparece la línea de código en nuestra index.html aunque le falta colocarle las unidades, es decir, escribir "px" tras cada cantidad de anchura y altura. Ponlo tú mismo a mano (sin dejar espacios entre el número y el px !!!) y seguimos.
Si te soy sincero, estoy aprendiendo a usar el Html-Kit a la vez que hago las lecciones, je je je. En cuanto descubra como hacer para que aparezcan las unidades automáticamente os lo diré
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
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 Galería de Imágenes, 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) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.
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.
Aplicando color e imagen de fondo a nuestro ejemplo
Ups, creo que en la página de antes me he pasado un poco escribiendo. Espero no haberte asustado, je je je. Solo acuérdate de que ahí hay información de los fondos por si algún día te hace falta. Vamos ahora a aplicar un color de fondo a la web de nuestro ejemplo.
Aplicando el color de fondo
Tal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la página web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes, abres el Html-Kit y abres la hoja de estilo para insertarle esta línea):
body {background-color: #E6E6FA}
Aplicando una imagen de fondo
Suponiendo que hemos escogido esta imagen para el fondo de la web (lo se, es horrible, pero para el ejemplo sirve, no?):
(Para guardártela, pon el ratón sobre ella, haz clic derecho y escoge guardar como. Luego la guardas en la carpeta "objetos".)
y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo.png", abrimos la hoja de estilo y dejamos la línea de antes así:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }
Como no quiero que se repita, le pongo tambien esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat }
Además la quiero centrada tanto vertical como horizontalmente, así que le añado esto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: center center}
En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma línea que el body va a tener una altura del 100%, esto es... que va a ocupar lo que tenga que ocupar. Una chorrada, lo se, pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto:
body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%; }
A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es un calentamiento de cabeza tremendo, pero tú tienes la suerte de contar con CCTW, je je je.
La página de ejemplo, tras guardar la hoja de estilo, se vería así con cualquier navegador (espero...):
Si tú la ves diferente, rara, nos lo dices en el foro, en la sección de Html-Kit y así lo reparamos y retocamos la lección, oki?
Qué tal? Mereció la pena el rollo de la página anterior? je je je. Intentaré hacerlo más ameno la próxima vez...
Cómo insertar una imagen en una página web
Ya hemos insertado una imagen como fondo de página pero para insertar una imagen dentro de la misma el procedimiento es algo distinto. Como puedes sospechar, como las imágenes son "visibles" van definidas dentro del Body. En qué lugar? Eso ya depende de donde la queramos insertar.
Dónde insertar la imagen.
Si creamos la línea de código Html en cualquier parte dentro del Body, ésta aparecerá allí, en cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qué parte del código Html insertar la línea de código correspondiente a un elemento para conseguir que aparezca donde deseas, verdad?
Pues bien, una imagen puede insertarse o bien dentro de un párrafo, es decir, entre palabras, como este ejemplo y sin que el párrafo se corte, o bien como una línea independiente. En ambos casos es aconsejable meterla en un párrafo, a pesar de que sea la imagen lo único que haya en esa línea, es decir, siempre encerrada entre
y
.Código Html para insertar una imagen
Para insertar una imagen, se coloca el siguiente código:
Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone . Recuérdalo, oki? Las imágenes nunca tienen etiqueta de cierre. Vamos a ver lo que hay dentro de ese código.
Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o está guardada en tu espacio web) o absoluta (siempre que la imagen la estés obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no lo olvides.
Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo válido es ponerlo junto, así "100px". Estas cantidades las coloca normalmente el Html-Kit automáticamente y si tú las cambias seguramente la imagen se vea desvirtuada y perderá definición. Si necesitas cambiar el tamaño mejor hacerlo con un programa gráfico y luego la vuelves a pegar en la página, oki?
En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la página fallara, el resto de los elementos como párrafos etc, ocuparían el lugar de esa imagen. Sería como si no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra, el navegador dejará un rectángulo con esas medidas en blanco, respetando la estructura de la web, sin mover nada. Eso es bueno, no crees?
Por último vemos un alt="........". No es obligatorio, pero para tener un código válido es necesario poner ese alt y además escribir entre las comillas una breve descripción de la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algún problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las búsquedas de sus usuarios con el contenido de las páginas web, de modo que es bueno además hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripción. En mi caso, si quiero aparecer en Google cuando la gente busque por las palabras "html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las imágenes como "Menú del Html-Kit", o "Así se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen, claro.
Vamos a insertar una imagen en nuestro ejemplo
En primer lugar necesitaremos una imagen guardada en la carpeta "objetos", que para eso está. Copia esta misma que dejo debajo, la guardas en tu carpeta "objetos" y seguimos. Recuerda que para copiártela solo tienes que poner tu ratón sobre ella, apretar el botón derecho del ratón y escoger "Guardar imagen como...". Ponle el nombre sonrisa.gif y seguimos adelante.
Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la página index.html para continuar. Vamos a colocar la imagen entre el párrafo donde dice "Bienvenidos a mi página web" y el que dice "Página creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor después del primer (al final de la línea de código del primer párrafo). A continuación pulsamos Intro para crear una nueva línea e insertamos esto (como te he dicho, la encerramos entre nuevos
y
que también debemos escribir):
Quieres aprender a hacerlo directamente desde las opciones del Html-Kit?
Situa el cursor al final del primer párrafo, como antes. Pulsa Intro para crear una nueva línea y seguidamente ve a la barra de herramientas del Html-Kit y escoge Etiquetas > Imagen > Insertar Imagen...
Aparece entonces esta ventana:
Pulsas sobre Add... y en la ventana que se abre (mira la imagen de aqui arriba) busca la carpeta "objetos". Tras pulsar en Aceptar se ve esto en la misma ventana:
Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha, verás como aparecen una serie de datos que te he señalado en rojo en la foto de arriba. Aparce la ruta relativa, lo que ocupa, el ancho, el alto, etc. Curioso, verdad?
Nos falta ya que estamos ahí poner la descripción. Para eso pulsamos a la derecha de donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la descripción que te dije antes "Bienvenido al Ejemplo de CCTW". Como verás hay muchísimas más opciones para las imágenes en esa ventana, pero por ahora lo dejamos así, para no saturarnos, oki?
Tras escribir la descripción y pulsar Ok, vemos como aparece la línea de código en nuestra index.html aunque le falta colocarle las unidades, es decir, escribir "px" tras cada cantidad de anchura y altura. Ponlo tú mismo a mano (sin dejar espacios entre el número y el px !!!) y seguimos.
Si te soy sincero, estoy aprendiendo a usar el Html-Kit a la vez que hago las lecciones, je je je. En cuanto descubra como hacer para que aparezcan las unidades automáticamente os lo diré
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Crear tu primera página web, y tu primer blog
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Cómo crear la primera página de la web
La primera página que vamos a crear es la página principal. La página principal es la que se muestra por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente index.html sea cual sea el servidor donde la alojemos.
Como esta página va a pertenecer al sitio "web-ejemplo-cctw", tendremos que apañarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla ponemos el cursor del ratón dentro de la ventana de Workspace, justo encima del sitio "web-ejemplo-cctw" y pulsamos el botón derecho del ratón.
Se abre entonces una ventana en la que tenemos que escoger, dentro de la sección New, la opción Create File...
Al hacer clic sobre Create File... aparece esta otra ventana:
Haz clic sobre la lengüeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page" (página html en blanco) y pulsa Ok.
En seguida aparece otra ventana preguntando (este programa no para de preguntar.. verdad? que pesao es... je je) preguntándonos el nombre que queremos que tenga ese archivo. Cuál debe ser? Cómo? Que no lo sabes? Ejem.... hay que estar más atento! je je. Se tiene que llamar index.html pues será la página principal, así que lo escribimos en esa ventana, con la extensión y todo y pulsamos en Ok:
Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido creado. Para verlo solo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace. Haz clic allí.
Como ves, no solo te muestra el archivo index.html sino también la carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta verás como además de la carpeta "objetos" también aparece allí el archivo index.html
Ya estamos listos para escribir contenidos el la página principal, index.html así que vamos a la siguiente página y comenzamos el juego!
Cómo crear un párrafo en la página web
Si has prestado atención a lo dicho hasta ahora, te acordarás de que las cosas que se ven en la web se colocan dentro del cuerpo o Body, es decir, entre las etiquetas y de modo que, si vamos a escribir un párrafo tendremos que hacerlo allí.
Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana Workspace, hacemos clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muetre su contenido y después hacemos doble clic en el archivo index.html o página principal. Se abre entonces la ventana de ese archivo mostrando todo su código Html.
Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana Workspace para tener más sitio visible. De modo que hacemos clic en la x de Workspace para cerrarla y después maximizamos la ventana del index para ocupar toda la ventana del Html-Kit, quedando así:
Esta es la vista llamada "Editor de Html". Como verás, el código de esta página coincide más o menos con el que te expliqué en las primeras lecciones, verdad? Empieza por seguido de la cabecera y después el cuerpo o Body, para cerrarse al final con que como toda etiqueta de cierre lleva su contrabarra "/".
Se ve también esa primera línea de la que no te he hablado aún. Esa línea describe el tipo de página que es, las normas de Html que está siguiento. No tiene mayor importancia, la dejaremos y listo.
Cambiando el título
Vamos a cambiarle el título a esta index. Bastará con escribir el título que quedamos en lugar de donde pone "Page title". Vamos a ponerle todos "Pagina Principal del Ejemplo CCTW". Ya sabes, entre .
Mi primer párrafo
Al igual que un título se escribe entre , un párrafo hay que escribirlo entre las etiquetas
Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cómo quedaría la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo, junto a donde pone "Editor". Haz clic ahí y veamos como queda nuestro ejemplo por el momento, vale?
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Bueno, por el momento no es gran cosa pero... sabías hacer esto antes? Pues pronto aprenderás mucho más. No vamos a parar hasta que aprendas a crear páginas como ComoCrearTuWeb, oki? je je, no va a ser dificil, verás.
Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de código Html. Ya sabemos algo más.
Crear un segundo párrafo en la página
Para crear un segundo párrafo ya imaginarás lo que hay que hacer, no? Basta con incluir ese segundo párrafo debajo del anterior y encerrarlo entre las etiquetas
Esto es lo que hemos conseguido hasta el momento: ejemplo 2.
Cómo guardar los cambios realizados
Para guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas, donde pone Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit sin miedo a perder nada, e irte a merendar, que llevas ya mucho tiempo delante del ordenador, je je je
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 y la de cierre . 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í:
palabra
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:
Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante. Te recomiendo que leas las instrucciones sobre rutas que tenemos en ComoCrearTuWeb. Te evitarán muchos problemas en el futuro.
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:
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í:
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"
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
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.
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 Galería de Imágenes, 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) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.
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.
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.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
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 Galería de Imágenes, 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) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.
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.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Cómo crear la primera página de la web
La primera página que vamos a crear es la página principal. La página principal es la que se muestra por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente index.html sea cual sea el servidor donde la alojemos.
Como esta página va a pertenecer al sitio "web-ejemplo-cctw", tendremos que apañarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla ponemos el cursor del ratón dentro de la ventana de Workspace, justo encima del sitio "web-ejemplo-cctw" y pulsamos el botón derecho del ratón.
Se abre entonces una ventana en la que tenemos que escoger, dentro de la sección New, la opción Create File...
Al hacer clic sobre Create File... aparece esta otra ventana:
Haz clic sobre la lengüeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page" (página html en blanco) y pulsa Ok.
En seguida aparece otra ventana preguntando (este programa no para de preguntar.. verdad? que pesao es... je je) preguntándonos el nombre que queremos que tenga ese archivo. Cuál debe ser? Cómo? Que no lo sabes? Ejem.... hay que estar más atento! je je. Se tiene que llamar index.html pues será la página principal, así que lo escribimos en esa ventana, con la extensión y todo y pulsamos en Ok:
Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido creado. Para verlo solo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace. Haz clic allí.
Como ves, no solo te muestra el archivo index.html sino también la carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta verás como además de la carpeta "objetos" también aparece allí el archivo index.html
Ya estamos listos para escribir contenidos el la página principal, index.html así que vamos a la siguiente página y comenzamos el juego!
Cómo crear un párrafo en la página web
Si has prestado atención a lo dicho hasta ahora, te acordarás de que las cosas que se ven en la web se colocan dentro del cuerpo o Body, es decir, entre las etiquetas y de modo que, si vamos a escribir un párrafo tendremos que hacerlo allí.
Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana Workspace, hacemos clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muetre su contenido y después hacemos doble clic en el archivo index.html o página principal. Se abre entonces la ventana de ese archivo mostrando todo su código Html.
Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana Workspace para tener más sitio visible. De modo que hacemos clic en la x de Workspace para cerrarla y después maximizamos la ventana del index para ocupar toda la ventana del Html-Kit, quedando así:
Esta es la vista llamada "Editor de Html". Como verás, el código de esta página coincide más o menos con el que te expliqué en las primeras lecciones, verdad? Empieza por seguido de la cabecera y después el cuerpo o Body, para cerrarse al final con que como toda etiqueta de cierre lleva su contrabarra "/".
Se ve también esa primera línea de la que no te he hablado aún. Esa línea describe el tipo de página que es, las normas de Html que está siguiento. No tiene mayor importancia, la dejaremos y listo.
Cambiando el título
Vamos a cambiarle el título a esta index. Bastará con escribir el título que quedamos en lugar de donde pone "Page title". Vamos a ponerle todos "Pagina Principal del Ejemplo CCTW". Ya sabes, entre .
Mi primer párrafo
Al igual que un título se escribe entre , un párrafo hay que escribirlo entre las etiquetas
y
Así, para escribir por ejemplo "Bienvenidos a mi página web. Muy pronto estará lista!" basta con escribir esa frase encerrada entre esas etiquetas, dentro del cuerpo de la página es decir, entre y . Quedaría así:Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cómo quedaría la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo, junto a donde pone "Editor". Haz clic ahí y veamos como queda nuestro ejemplo por el momento, vale?
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Bueno, por el momento no es gran cosa pero... sabías hacer esto antes? Pues pronto aprenderás mucho más. No vamos a parar hasta que aprendas a crear páginas como ComoCrearTuWeb, oki? je je, no va a ser dificil, verás.
Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de código Html. Ya sabemos algo más.
Crear un segundo párrafo en la página
Para crear un segundo párrafo ya imaginarás lo que hay que hacer, no? Basta con incluir ese segundo párrafo debajo del anterior y encerrarlo entre las etiquetas
y
Por ejemplo, vamos a poner este segundo párrafo: "Página creada gracias a CCTW". En la vista "Editor" la página quedaría así:Esto es lo que hemos conseguido hasta el momento: ejemplo 2.
Cómo guardar los cambios realizados
Para guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas, donde pone Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit sin miedo a perder nada, e irte a merendar, que llevas ya mucho tiempo delante del ordenador, je je je
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 y la de cierre . 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í:
palabra
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:
Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante. Te recomiendo que leas las instrucciones sobre rutas que tenemos en ComoCrearTuWeb. Te evitarán muchos problemas en el futuro.
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:
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í:
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"
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
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.
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 Galería de Imágenes, 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) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.
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.
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.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
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 Galería de Imágenes, 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) }
Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.
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.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Suscribirse a:
Entradas (Atom)
