Las páginas web estan formadas por cuadros encajados unos dentro de otros, y en CSS se les aplica el principio de herencia:
* Todos los cuadros dentro del cuadro body heredarán el formato aplicado a body.
Por eso body es el perfecto para establecer el formato básico de la fuente, ya que los demas elementos lo heredarán.
1.- Modifica la regla CSS, para body como sigue:
body
{
color: black;
background-color: #8c8c8c;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small; /* Tamaño de la fuente*/
}
miércoles, 12 de noviembre de 2008
Color de fondo y fuente para el encabezado
La sección del encabezado de las dos páginas también debe tener un color de fondo, y como ya hemos visto aprovecharemos para definir el color de fuente.
1.- Añade la siguiente regla CSS al final de la hoja de estilos.
#encabezado
{
color: black;
background-color: #f3c600;
}
2.- Guarda la hoja de estilos y abre las páginas en el navegador.
Podemos volver a asignar un fondo blanco a la imagen mediante CSS, y para ello utilizaremos lo que se conoce como selector anidado, que solamente afectará al gráfico del encabezado.
1.- Añade la siguiente regla al css al final de la stylesheet:
/* Selector anidado: sólo el gráfico en el encabezado*/
#encabezado img
{
background-color: white;
}
Guarda la hoja de estilos y abre la o las páginas que contengan este stylesheet.
1.- Añade la siguiente regla CSS al final de la hoja de estilos.
#encabezado
{
color: black;
background-color: #f3c600;
}
2.- Guarda la hoja de estilos y abre las páginas en el navegador.
Podemos volver a asignar un fondo blanco a la imagen mediante CSS, y para ello utilizaremos lo que se conoce como selector anidado, que solamente afectará al gráfico del encabezado.
1.- Añade la siguiente regla al css al final de la stylesheet:
/* Selector anidado: sólo el gráfico en el encabezado*/
#encabezado img
{
background-color: white;
}
Guarda la hoja de estilos y abre la o las páginas que contengan este stylesheet.
Definición de colores de fondo y fuente.
El primer paso será definir los colores de fondo y de fuente para body y el contenedor < div id="wrapper" >.
1.- Escribe las siguientes lineas debajo del comentario:
body
{
color: white; /* color de fuente*/
background-color: #8c8c8c; /* color de fondo */
}
#wrapper
{
color: black;
background-color: white;
}
2.- Guarda la hoja de estilos y abre el archivo html.
Quizás habrás observado que el color de fuente que hemos definido para body con la propiedad que hemos definido para body con la propiedad color no se utiliza en la pagina, porque todo el texto se encuentra en wrapper.
Es recomendable adquirir la costumbre de definir el color de fuente y de fondo juntos, para que no se den combinaciones desafortunadas como "fuente blanca sobre fondo blanco".
Las indicaciones de colores hexadecimales como #8c8c8c ya nos resultan familiares de HTML, pero en CSS podemos utilizar nombres en inglés para determinardos colores, como white o black.
Esto es el comienzo.
1.- Escribe las siguientes lineas debajo del comentario:
body
{
color: white; /* color de fuente*/
background-color: #8c8c8c; /* color de fondo */
}
#wrapper
{
color: black;
background-color: white;
}
2.- Guarda la hoja de estilos y abre el archivo html.
Quizás habrás observado que el color de fuente que hemos definido para body con la propiedad que hemos definido para body con la propiedad color no se utiliza en la pagina, porque todo el texto se encuentra en wrapper.
Es recomendable adquirir la costumbre de definir el color de fuente y de fondo juntos, para que no se den combinaciones desafortunadas como "fuente blanca sobre fondo blanco".
Las indicaciones de colores hexadecimales como #8c8c8c ya nos resultan familiares de HTML, pero en CSS podemos utilizar nombres en inglés para determinardos colores, como white o black.
Esto es el comienzo.
Descubrir CSS: Fuentes, colores e hipervinculos
CSS (Cascading Style Sheets es un lenguaje creado especialmente para dar formato a los elementos HTML.
Una stylesheet es una recopilación de instrucciones de formato para elementos HTML. Y cascade es, entre otras cosas, una "caida desde cierta altura del agua de un río o corriente". Esta definicion es correcta pero no dice mucho. Es díficil aclarar el significado de cascading en este momento, lo dejaremos para mas adelante.
CSS da formato a los cuadros rectangulares que se crean con HTML. Las posibilidades de formato se pueden dividir en tres areas:
1. Fuentes y colores: formato del contenido de los cuadros.
2. Distancia y bordes: formato de los propios cuadros.
3. Layout: modificar la posición de los cuadros en la pagina web.
* Crea un archivo vacio con un editor de texto (puede ser el blog de notas)
* Guarda el archivo con el nombre de little-boxes.css, en la misma carpeta que los archivos HTML.
* Inserta el siguiente comentario CSS en la primera linea del archivo
/* Stylesheet para los ejercicios de Little Boxes/*
* Guarda el archivo.
El vinculo entre HTML y CSS: link
Solo tenemos que modificar la ruta de acceso al archivo en el elemento link para que el formato de las paginas se base en nuestras styles-sheet.
* Abre cualquier archivo ya creado (HTML)
* Modifica el código fuente HTML como sigue dentro del head:
< link href="little-boxes.css" rel="stylessheet" type="text/css"/ >
* Guarda y abrelas con el navegador.
Ahora ya no se aplicaran los formatos de la hoja de estilos del W3C. Este es el significado de los tres atributos del elemento link.
* href indica la ruta de acceso al archivo.
* rel es la abreviatura de "relation" rel="stylessheet" significa "este archivo es una hoja de estilos para mi"
* type le indica al navegador que littleboxes.css es un archivo de texto CSS: "Tipo archivo de texto, mas concretamente Cascading Style Sheet".
El elemento se cierra con un tag final integrado: espacio en blanco y signo mayor que.
Una stylesheet es una recopilación de instrucciones de formato para elementos HTML. Y cascade es, entre otras cosas, una "caida desde cierta altura del agua de un río o corriente". Esta definicion es correcta pero no dice mucho. Es díficil aclarar el significado de cascading en este momento, lo dejaremos para mas adelante.
CSS da formato a los cuadros rectangulares que se crean con HTML. Las posibilidades de formato se pueden dividir en tres areas:
1. Fuentes y colores: formato del contenido de los cuadros.
2. Distancia y bordes: formato de los propios cuadros.
3. Layout: modificar la posición de los cuadros en la pagina web.
* Crea un archivo vacio con un editor de texto (puede ser el blog de notas)
* Guarda el archivo con el nombre de little-boxes.css, en la misma carpeta que los archivos HTML.
* Inserta el siguiente comentario CSS en la primera linea del archivo
/* Stylesheet para los ejercicios de Little Boxes/*
* Guarda el archivo.
El vinculo entre HTML y CSS: link
Solo tenemos que modificar la ruta de acceso al archivo en el elemento link para que el formato de las paginas se base en nuestras styles-sheet.
* Abre cualquier archivo ya creado (HTML)
* Modifica el código fuente HTML como sigue dentro del head:
< link href="little-boxes.css" rel="stylessheet" type="text/css"/ >
* Guarda y abrelas con el navegador.
Ahora ya no se aplicaran los formatos de la hoja de estilos del W3C. Este es el significado de los tres atributos del elemento link.
* href indica la ruta de acceso al archivo.
* rel es la abreviatura de "relation" rel="stylessheet" significa "este archivo es una hoja de estilos para mi"
* type le indica al navegador que littleboxes.css es un archivo de texto CSS: "Tipo archivo de texto, mas concretamente Cascading Style Sheet".
El elemento se cierra con un tag final integrado: espacio en blanco y signo mayor que.
Los elementos mas importantes de HTML
Html, contiene aproximadamente 85 elementos distintos. Pero solo veremos los mas importantes.
1.- div: Dividir la página en secciones.
Sintaxis:
< div >
Texto
Cualquier Texto
Y Otro mas
< /div >
Para poder distinguir las secciones en el código fuente, se le asigna un nombre único mediante el atributo id. ejemplo
< div id="encabezado"> < /div >
2.- Titulos: h1 a h6. Mediante el uso de titulos, párrafos y listas podemos ofrecer puntos en los que el usuario puede fijar la vista en su recorrido por el texto.
Ejemplo: < h1 > Ejemplo de Texto < /h1 >
3.- Parrafos: p de paragraph.
Elemento mas utilizado en html. Cualquier parrafo comienza con < p > y termina < /p >.
Ejemplo: < p > Diseño de paginas web con CSS. Fundamentos < /p >
4.- Resaltar texto: strong y em
Estan pensados para resaltar texto. Son elementos inline, por lo que solamente son tan anchos como el texto y no crean ningun salto de linea
*strong significa muy resaltado y por lo general los navegadores lo representan como negrita.
* em significa emphasize, enfatizar. em se suele representar en cursiva
ejemplo:
< p > Las páginas web están compuestas de < strong >cuadros rectangulares< strong > que se suelen colocar < em >unos juntos a otros.< em >
5.- Viñetas y numeraciones. Una lista esta compuesta por dos elementos en html:
* < ul > y < /ul > identifican el principio y el final de la lista con viñetas.
* < li > y < /li > marcan todos los elementos dentro de la lista.
ul significa "unordered list", es decir, "lista no ordenada".
< ul > le indica al navegador "aqui empieza una lista no ordenada". Entre < li > y < /li > se encuentran los distintos elementos de la lista antes de que ésta termine con < /ul >.
6.- Numeraciones: listas ordenadas con ol y li
Las listas ordenadas ("ordered lists") se suelen conocer como numeraciones. Su construcción es idéntica a la de las listas no ordenadas. pero ul se sustituye por ol.
7.- Skip-Link (1): un hipervinculo para saltar la navegación.
hipervinculo que salte a otro punto de la misma página web. Los usuarios que lean la página tienen que pasar previamente por toda la navegación antes de llegar al contenido propiamente dicho. Sin embargo, con skip-link el usuario puede saltarse la navegación.
Skip-Link(2): Hipervinculo para volver arriba.
Si tenemos una pagina muy larga y queremos ofrecer a los usuarios un enlace para volver arriba, podemos utilizar la misma tecnica.
ejemplo: < a href="#wrapper" > Arriba< /a > Este vinculo salta al elemento < div id="wrapper" >
8.- Ruta de acceso a la imagen: img.
El elemento para insertar una imagen se llama img, abreviatura de image. No existe un tag de cierre. en su lugar se utiliza un espacio en blanco, una barra y el signo mayor que.
< img scr="logo.gif" alt="Little Boxes" widh="222" height="32" />
9.- Otros elementos utiles.
Nueva Linea: < br />
address para direcciones
blockquote y cite para citas
span es un elemento inline neutro
character Entities: caracteres especiales
**** LAS TABLAS NO ESTAN PROHIBIDAS ****
Durante mucho tiempo, las tablas fueron la única opción disponible para posicionar objetos en una pagina web. CSS ha tomado el relevo y ahora las tablas se utilizan para su propósito inicial: para representar datos en forma de tabla.
< table border="1" >
< tr >
< td > Fila 1, Columna1 < /td >
< td > Fila 1, Columna2 < /td >
< /tr >
< tr >
< td > Fila 2, Columna1 < /td >
< td > Fila 2, Columna2 < /td >
< /tr >
< /table >
¿Todo correcto? Dejemos que un experto en gramatica de Html verifique nuestras instrucciones. Podemos hacerlo en la siguiente dirección.
http://validator.w3.org/
CSS para probar: los w3c core styles
Para ver darnos una idea de las posibilidades de CSS revisa la página:
http://csszengarden.com/
1.- div: Dividir la página en secciones.
Sintaxis:
< div >
Texto
Cualquier Texto
Y Otro mas
< /div >
Para poder distinguir las secciones en el código fuente, se le asigna un nombre único mediante el atributo id. ejemplo
< div id="encabezado"> < /div >
2.- Titulos: h1 a h6. Mediante el uso de titulos, párrafos y listas podemos ofrecer puntos en los que el usuario puede fijar la vista en su recorrido por el texto.
Ejemplo: < h1 > Ejemplo de Texto < /h1 >
3.- Parrafos: p de paragraph.
Elemento mas utilizado en html. Cualquier parrafo comienza con < p > y termina < /p >.
Ejemplo: < p > Diseño de paginas web con CSS. Fundamentos < /p >
4.- Resaltar texto: strong y em
Estan pensados para resaltar texto. Son elementos inline, por lo que solamente son tan anchos como el texto y no crean ningun salto de linea
*strong significa muy resaltado y por lo general los navegadores lo representan como negrita.
* em significa emphasize, enfatizar. em se suele representar en cursiva
ejemplo:
< p > Las páginas web están compuestas de < strong >cuadros rectangulares< strong > que se suelen colocar < em >unos juntos a otros.< em >
5.- Viñetas y numeraciones. Una lista esta compuesta por dos elementos en html:
* < ul > y < /ul > identifican el principio y el final de la lista con viñetas.
* < li > y < /li > marcan todos los elementos dentro de la lista.
ul significa "unordered list", es decir, "lista no ordenada".
< ul > le indica al navegador "aqui empieza una lista no ordenada". Entre < li > y < /li > se encuentran los distintos elementos de la lista antes de que ésta termine con < /ul >.
6.- Numeraciones: listas ordenadas con ol y li
Las listas ordenadas ("ordered lists") se suelen conocer como numeraciones. Su construcción es idéntica a la de las listas no ordenadas. pero ul se sustituye por ol.
7.- Skip-Link (1): un hipervinculo para saltar la navegación.
hipervinculo que salte a otro punto de la misma página web. Los usuarios que lean la página tienen que pasar previamente por toda la navegación antes de llegar al contenido propiamente dicho. Sin embargo, con skip-link el usuario puede saltarse la navegación.
Skip-Link(2): Hipervinculo para volver arriba.
Si tenemos una pagina muy larga y queremos ofrecer a los usuarios un enlace para volver arriba, podemos utilizar la misma tecnica.
ejemplo: < a href="#wrapper" > Arriba< /a > Este vinculo salta al elemento < div id="wrapper" >
8.- Ruta de acceso a la imagen: img.
El elemento para insertar una imagen se llama img, abreviatura de image. No existe un tag de cierre. en su lugar se utiliza un espacio en blanco, una barra y el signo mayor que.
< img scr="logo.gif" alt="Little Boxes" widh="222" height="32" />
9.- Otros elementos utiles.
Nueva Linea: < br />
address para direcciones
blockquote y cite para citas
span es un elemento inline neutro
character Entities: caracteres especiales
**** LAS TABLAS NO ESTAN PROHIBIDAS ****
Durante mucho tiempo, las tablas fueron la única opción disponible para posicionar objetos en una pagina web. CSS ha tomado el relevo y ahora las tablas se utilizan para su propósito inicial: para representar datos en forma de tabla.
< table border="1" >
< tr >
< td > Fila 1, Columna1 < /td >
< td > Fila 1, Columna2 < /td >
< /tr >
< tr >
< td > Fila 2, Columna1 < /td >
< td > Fila 2, Columna2 < /td >
< /tr >
< /table >
¿Todo correcto? Dejemos que un experto en gramatica de Html verifique nuestras instrucciones. Podemos hacerlo en la siguiente dirección.
http://validator.w3.org/
CSS para probar: los w3c core styles
Para ver darnos una idea de las posibilidades de CSS revisa la página:
http://csszengarden.com/
martes, 11 de noviembre de 2008
Así funciona HTML
Todos los miles de millones de páginas web de la Red están escritas en HTML. Y cualquiera que quiera hacernos creer que es posible crear buenas páginas web sin saber como funciona HTML esta realizando una afirmación, cuando menos, atrevida.
Las páginas web se componen de cuadros rectangulares que se colocan unos junto a otros o se superponen en la ventana del navegador. Cuanto mas nos acostumbremos a esta idea, más facil será diseñar páginas web. Cualquier forma redonda es un truco, un gráfico o ambas cosas.
En su relación con dichos cuadros, los lenguajes HTML y CSS tienen dos objetivos claramente diferenciados
* HTML es un albañil que construye la casa y ajusta la distribución de las habitaciones.
Con Html se crean los cuadros rectangulares y se llenan de contenido.
* CSS es el decorador que diseña la casa y las habitaciones. CSS permite dar forma a los cuadros y al contenido y posicionarlos.
El diseño de páginas web con CSS empieza por unos buenos conocimientos básicos de HTML.
HTML significa Hypertext MarkUp Language (en español, "lenguaje para el marcado de hipertexto") Aunque esta traducción es correcta, no es especialmente descriptiva, por lo que veremos a continuación una explicación mas detallada de cada letra.
*********************************************************************************
HT de Hypertext: creación de hipervinculos.
M de Markup: asignación de etiquetas. ejemplo:
L de language: vocablos y reglas gramaticales, es necesario aprenderlo todo.
*********************************************************************************
XHTML: La última versión de HTML. La "X" corresponde a eXtensible (ampliable). Las reglas gramaticales de XHTML son algo mas rigidas que las de HTML, lo que sin embargo resulta bastante útil.
Las páginas web se componen de cuadros rectangulares que se colocan unos junto a otros o se superponen en la ventana del navegador. Cuanto mas nos acostumbremos a esta idea, más facil será diseñar páginas web. Cualquier forma redonda es un truco, un gráfico o ambas cosas.
En su relación con dichos cuadros, los lenguajes HTML y CSS tienen dos objetivos claramente diferenciados
* HTML es un albañil que construye la casa y ajusta la distribución de las habitaciones.
Con Html se crean los cuadros rectangulares y se llenan de contenido.
* CSS es el decorador que diseña la casa y las habitaciones. CSS permite dar forma a los cuadros y al contenido y posicionarlos.
El diseño de páginas web con CSS empieza por unos buenos conocimientos básicos de HTML.
HTML significa Hypertext MarkUp Language (en español, "lenguaje para el marcado de hipertexto") Aunque esta traducción es correcta, no es especialmente descriptiva, por lo que veremos a continuación una explicación mas detallada de cada letra.
*********************************************************************************
HT de Hypertext: creación de hipervinculos.
M de Markup: asignación de etiquetas. ejemplo:
Este texto es normal
L de language: vocablos y reglas gramaticales, es necesario aprenderlo todo.
*********************************************************************************
XHTML: La última versión de HTML. La "X" corresponde a eXtensible (ampliable). Las reglas gramaticales de XHTML son algo mas rigidas que las de HTML, lo que sin embargo resulta bastante útil.
Diseño de Páginas con tablas?
La web fue creada por cientificos para cientificos y los cientificos suelen estar mas interesados en el contenido que en la forma.
En los inicios las páginas web eran practicamente identicas: fondo gris, letra negra e hipervinculos azules que pasaban a ser lilas cuando aputaban a una página ya visitada.
Cuando la Red se convirtió en un gran boom mundial a mediados de los noventa, el mundo quería paginas llenas de color y las queria rápido.
El World Wide Web consortium (hhtp://w3.org) trabajó para elaborar CSS para el diseño atractivo de elementos html, pero cuando Netscape invento la etiqueta para el diseño de fuentes y < table > para las tablas (casi) todo el mundo quedó entusiasmado y el diseño web clásico empezó a cobrar forma.
En cierto sentido, esta forma de aplicar formato supuso un paso atrás hacia el familiar mundo de la mentalidad centrada en papel.
El formato de fuentes mediante CSS se impuso de forma relativamente rápida a finales de los noventa. Si se planificaba bien, podia aligerar mucho el trabajo, porque una hoja de estilos puede utilizarce para tantas páginas como se desee.
Aunque CSS también ofrecia teóricamente la posibilidad de posicionar objetos en una página web, en aquel entonces los navegadores no interpretaban CSS correctamente. Por este motivo, los diseños de varias columnas se seguían realizando con tablas.
En los inicios las páginas web eran practicamente identicas: fondo gris, letra negra e hipervinculos azules que pasaban a ser lilas cuando aputaban a una página ya visitada.
Cuando la Red se convirtió en un gran boom mundial a mediados de los noventa, el mundo quería paginas llenas de color y las queria rápido.
El World Wide Web consortium (hhtp://w3.org) trabajó para elaborar CSS para el diseño atractivo de elementos html, pero cuando Netscape invento la etiqueta para el diseño de fuentes y < table > para las tablas (casi) todo el mundo quedó entusiasmado y el diseño web clásico empezó a cobrar forma.
En cierto sentido, esta forma de aplicar formato supuso un paso atrás hacia el familiar mundo de la mentalidad centrada en papel.
*** Formato por control Remoto ***
El formato de fuentes mediante CSS se impuso de forma relativamente rápida a finales de los noventa. Si se planificaba bien, podia aligerar mucho el trabajo, porque una hoja de estilos puede utilizarce para tantas páginas como se desee.
Aunque CSS también ofrecia teóricamente la posibilidad de posicionar objetos en una página web, en aquel entonces los navegadores no interpretaban CSS correctamente. Por este motivo, los diseños de varias columnas se seguían realizando con tablas.
*** Diseño sin tablas ***
Actualmente la situación ha cambiado.Los navegadores modernos son tan compatibles con CSS que los diseñadores web ya no tienen ninguna excusa, a excepción de uan pereza innata y una acusada falta de tiempo, para no diseñar páginas por completo con CSS.
Actualmente la situación ha cambiado.Los navegadores modernos son tan compatibles con CSS que los diseñadores web ya no tienen ninguna excusa, a excepción de uan pereza innata y una acusada falta de tiempo, para no diseñar páginas por completo con CSS.
***¿ Olvidar lo aprendido ? ****
La diferencia con el diseño tradicional basado en tablas HTML de la decada de los noventa es abismal y si ya se han diseñado páginas con tablas, lo mejor es olvidarse de todo lo aprendido. No hay punto de comparación con CSS.
Suscribirse a:
Entradas (Atom)