[Tutorial] Como colocar un color de fondo a una web.

[Tutorial] Como colocar color de fondo a una web.


Primeramente informarles sobre ScriptingWeb.Net

[Tutorial] Como colocar un color de fondo a una web.


Hola amigos de Taringa, pues hoy estoy armando este nuevo tutorial para todos ustedes, siempre comenzando con lo básico para las personas que comienzan en la programación (En este caso HTML y un poco de CSS) y poco a poco ir avanzando en la complejidad y dificultad de los tutoriales.
Comenzamos:


1- Crear hoja de estilos CSS.


Bueno, para crear un fondo en nuestra web (En este caso) necesitamos crear una hoja de estilos CSS. Para crear esta hoja de estilos CSS, necesitaremos abrir nuestro Editor o Creador Web como HTML Kit, DreamWeaver, Notepad++ e incluso nuestro Bloc de Notas o una pagina de Microsoft Word.
Una vez tengamos abierto nuestro Editor o Creador Web, como cada uno varia en su estructura, modelo o posiciones, les dejare como encontrar ese "Botón" para crear la hoja de estilos en los editores de HTML Kit y DreamWeaver que son los más comunes que se ocupan.

Como abrir una nueva hoja de estilos CSS en Dreamweaver.
Bueno, principalmente abriremos nuestro Dreamweaver, no importa la versión. Yo en mi caso uso (Perdonen la desactualización) Dreamweaver 8.
Una vez tengamos abierto el Dreamweaver, se nos abrirá el menú principal.
web

Bien, ahí vemos los distintos lenguajes que están disponibles a trabajar en Dreamweaver, pero hasta abajo veremos el lenguaje de CSS.
Programacion

Bueno, le damos click y listo.

Como abrir una nueva hoja de estilos CSS en HTML Kit.
Para crear la hoja de estilos vamos a abrir el Html Kit y activamos la vista de Workspace para tener a mano el sitio que estamos colocando fondo.
Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio que le estamos agregando fondo y en 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 les enseñare en la imagen de abajo:
html

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"
css

Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio que le crearemos fondo en la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.
color

Y bien, ya tenemos la hoja de estilos creada en HTML Kit



2- Relacionar hoja de estilos con nuestra web HTML.


Bien, ya tenemos creada la hoja de estilos, ahora necesitamos relacionarla o unirla a nuestra web HTML que es a la que le colocaremos el fondo.
Esto es para decirle a nuestra página que le queremos poner el fondo que tiene que leer las características que habrán en la hoja de estilos.
Como los estilos no son un elemento que aparecerá en la página sino algo que indica cómo se han de mostrar los elementos como color, tamaño, etc... (En este caso el fondo) parece fácil adivinar que la hoja de estilo hay que indicarlos dentro de la cabecera de la página.
Bueno, este es el código que usaremos para relacionarla:
[color=#000000]<link rel="stylesheet" href="rutadelahoja/nombredelahoja.css"     
type="text/css" media="all">[/color]

Recordar que esto va entre las etiquetas de <head> y </head>.

Explicación del código:
<link rel="stylesheet" Indica que esta relacionándose o mejor dicho, "uniéndose" la hoja de estilos con el index o cualquier pagina que estemos colocándole el código.
href="rutadelahoja/nombredelahoja.css" Bueno, esto indica la ruta o el enlace que tiene que seguir hacia la ubicación de la hoja de estilos.

Una vez teniendo puesto el código de relación en nuestra pagina, comenzaremos a hacer lo más importante pero no difícil que sera colocar el fondo.


3- Colocando el color de fondo a la web.


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).
Acá encontré un enlace donde está una lista de colores y sus códigos. (Haz click acá) Bueno, para indicar el color deseado, abrimos el Editor o Creador Web y abrimos la Hoja de Estilos creada antes. Escribe en ella este código:
[color=#000000]body {background-color: #E6E6FA}[/color]

Explicación del código:
body Quiere decir que esto va aplicado al cuerpo o "Body" de nuestra web, es decir lo que se ve.
{background-color: #E6E6FA} Bueno, el {background-color... Indica que es un color de fondo, osea que ese color estará en el fondo (Es muy obvio jeje). Y el #E6E6FA Es un ejemplo de color, ustedes pueden colocar el que quieran.

Bueno, esto es todo, al ver el preview de la página podrás ver el color que elegiste de fondo, esto es muy sencillo pero como digo siempre "Es útil".
Saludos.


-------------------------------------------------------------------
Si deseas saber más sobre esto. Dirígete a ScriptingWeb.Net

tutorial

Fuentes de Información - [Tutorial] Como colocar un color de fondo a una web.

El contenido del post es de mi autoría, y/o, es un recopilación de distintas fuentes.

Dar puntos
0 Puntos
Votos: 0 - T!score: 0/10
  • 0 Seguidores
  • 1.711 Visitas
  • 1 Favoritos

0 comentarios - [Tutorial] Como colocar un color de fondo a una web.