Contenido Dinámico
Introducción
Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos claros: proporcionar un control absoluto al diseñador de páginas HTML y romper con el carácter estático de este tipo de documentos. Hasta ahora, una vez mostrado un documento HTML, nada podía hacerse para modificarlo.
Los tres componentes del HTML Dinámico son:
• Hojas de Estilo
• Posicionamiento de Contenidos
• Fuentes Descargables
Las hojas de estilo permiten especificar atributos para los elementos de su página web. Con el posicionamiento de contenidos se puede asegurar que las diferentes partes serán mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y posicion tras ser mostrada. Con las fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta, pues podemos enviar la fuente junto con la página.
________________________________________
Introducción a las Hojas de Estilos
Antes de la introducción de las hojas de estilo, los creadores de páginas web sólo tenían un control parcial sobre el aspecto final de sus páginas. Por ejemplo, se podía especificar que cierto texto debia verse como una cabecera, pero no se podían colocar márgenes a una página ni escoger un borde decorado para un texto.
Las hojas de estilo nos permiten un mayor control sobre el aspecto de nuestros documentos. Con ellas podemos especificar muchos atributos tales como colores, márgenes, alineación de elementos, tipos y tamaños de letras, y muchos más. Podemos utilizar bordes para hacer que ciertos elementos resalten del resto de un documento. Podemos especificar que se utilicen diferentes fuentes para diferentes elementos tales como párrafos o cabeceras.
Además podemos emplear hojas de estilo como patrones o páginas maestras de forma que múltiples páginas puedan tener el mismo aspecto.
Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS (Cascade Style Sheets) y JavaScript.
________________________________________
Introducción al Posicionamiento de Contenidos
Ya no se está restringido al posicionamiento secuencial de los elementos sobre la página. Especificando la posición de los bloques podemos decidir donde se mostrara cada elemento en vez de dejar esta tarea al arbitrio del navegador. Por ejemplo, podemos colocar un bloque en la esquina superior izquierda, y otro en la inferior derecha. También podemos hacer que varios bloques compartan espacio, de forma que se puedan solapar. Ahora se puede decidir la posición exacta de los elementos.
Utilizando JavaScript podemos cambiar el aspecto de la página dinámicamente. Podemos hacer que los elementos aparezcan o se desvanezcan, podemos cambiar su color y su posición, etc. Podemos añadir animaciones dentro de nuestras páginas moviendo y modificando ciertas partes de la misma.
El uso conjunto las hojas de estilo y el posicionamiento de contenidos nos permite crear páginas web que utilicen diferentes estilos en diferentes partes de la página.
Para el posicionamiento de contenidos también podemos utilizar dos tipos de sintaxis: CSS y JavaScript.
________________________________________
Introducción a las Fuentes Descargables
Utilizando fuentes descargables podemos adjuntar fuentes con nuestras páginas web. De esta forma se garantiza que las página siempre serán mostradas con la fuente que deseemos. Ya no es necesario emplear las fuentes genéricas para conseguir que sus páginas tengan aproximadamente el mismo aspecto en todas las plataformas. Tampoco estaremos restringidos por las características propias de las fuentes en cada plataforma.
Para protejer los derechos de autor de los diseñadores de fuentes, estas están protegidas de forma que es imposible que el usuario las copie y las pueda usar de nuevo. Asi podemos incluir fuentes en nuestras páginas sin tener que preocuparnos de que los usuarios las puedan copiar.
________________________________________
Hojas de Estilo
En esta sección se introduce el uso de las hojas de estilo. Se da un breve resumen de los diferentes tipos de sintaxis que se pueden emplear para definir estilos, se muestran algunos ejemplos y se explica la herencia de propiedades.
________________________________________
Definición de Estilos mediante Hojas de Estilo en Cascada
Una hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los nombres de las propiedades y los valores se encierran entre llaves {}.
El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de selección es un elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento. El criterio de selección también puede ser una clase, un ID o contextual. Cada una de estos criterios de selección se verán a continuación.
En una definicion de estilo cada propiedad es seguida por dos puntos y el valor de dicha propiedad. Cada par propiedad/valor está separado del siguiente por un punto y coma (;).
Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos. El primero especifica que todos los párrafos,
, se veran en negrita y en color blanco. El segundo hará que todas las cabeceras,
, aparezcan centradas.
La definición de estilos se puede encerrar entre commentarios (), de esta forma los navegadores que no reconozcan la etiqueta
No se pueden encerrar entre comentarios () los contenidos de una hoja de estilo creada mediante JavaScript.
También se puede utilizar with para abreviar la definición de estilos para elementos sobre los que hay que modificar varias propiedades. Este ejemplo especifica que todas las etiquetas
serán verdes, negritas, cursivas y usaran la fuente helvética.
with (tags.p)
{
color = "green";
fontWeight = "bold";
fontStyle = "italic";
fontFamily = "helvetica";
}
________________________________________
Ejemplos
Usando hojas de estilo se pueden especificar muchos atributos de estilo. Algunas de estas características son el alineación, indentación y color del texto, la familia, peso y estilo de las fuentes,... Podemos seleccionar una imagen o un color de fondo para cualquier elemento. También podemos escoger el color y estilo de las marcas de lista.
Se pueden poner márgenes y especificar bordes para elementos de bloque, escoger el relleno de los elementos que tienen bordes, indicar la distancia entre el borde y el contenido del elemento.
El siguiente ejemplo muestra una hoja de estilo sencilla descrita mediante sintaxis CSS y JavaScript. En ella se especifica que todos los elementos
tendran márgenes derecho e izquierdo y que su texto estará centrado. Todos los elementos
estarán subrayados y en verde. Todos los elementos
se mostraran en mayúsculas, tendran un borde con aspecto 3D sobresaliente de 4 puntos de ancho y color rojo. Su texto será rojo y el fondo amarillo. Finalmente, los serán azules y en cursiva, su altura de línea (interlínea) será un 150% mayor que por defecto y su primera línea estará indentado un 10%.
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Titulo subrayado
Esto es un bloque. Normalmente los bloques están indentados,
pero en este, además, la primera línea tiene una indentación
extra. También la interlínea es mayor de lo habitual.
Titulo h5 en mayusculas y con borde
Este párrafo está centrado. También tiene unos amplios
márgenes derecho e izquierdo.
Resultado del ejemplo
Titulo subrayado
Esto es un bloque. Normalmente los bloques están indentados, pero en este, además, la primera línea tiene una indentación extra. También la interlínea es mayor de lo habitual.
TITULO EN MAYUSCULAS Y CON BORDE
Este párrafo está centrado. También tiene unos amplios márgenes derecho e izquierdo.
________________________________________
Herencia de Estilos
Un elemento HTML que contenga a otro se considera como el padre del elemento que contiene, y el elemento contenido se considera el elemento hijo.
Por ejemplo, en el siguiente texto HTML, el elemento es el padre del elemento , que a su vez es padre del elemento .
¡El titulo es importante!
En muchos casos, los hijos adquieren o heredan el estilo de los elementos de sus padres. Por ejemplo, supongamos que asignamos a el estilo color azul:
¡El titulo es importante!
En este caso el elemento hijo hereda el estilo de su padre, que es el elemento . Asi la palabra "es" apareceria en color azul. Supongamos ahora que previamente se habia especificado para el color rojo. En este caso la palabra "es" apareceria en rojo porque las propiedades del hijo tienen preferencia sobre las que hereda del padre.
La herencia comienza desde el elemento de más alto nivel. En HTML, este elemento es , que es seguido de .
Para establecer las propiedades de estilo por defecto para todos los elementos de un documento lo normal es asignárselas al elemento . Por ejemplo, el siguiente código fija el color por defecto del texto a verde:
Sintaxis CSS
Sintaxis JavaScript
Muy pocas propiedades no son heredadas de padres a hijos, pero en la mayoría de los casos el resultado final es el mismo que si lo hiciesen. Por ejemplo, la propiedad color de fondo no se hereda. Si un hijo no especifica un color de fondo propio, se vera el color de fondo del padre a través suyo, tal como ocurriria si heredase la propiedad. Para más información sobre las propiedades que se heredan y cuales no, dirigirse al manual de referencia del final de este tutorial.
________________________________________
Creación y uso de Hojas de Estilo
En esta sección se verán las diferentes formas de definir estilos y como aplicar esos estilos a los elementos HTML.
Una hoja de estilo es una serie de una o más definiciones de estilo. Podemos definir una hoja de estilos en el interior del documento que la utiliza, pero también podemos utilizar hojas de estilo desde un documento externo. Por ejemplo, podemos emplear una única hoja de estilo para definir el estilo empleado por un grupo de personas en sus páginas.
Si la hoja de estilos no va a ser aplicada a otros documentos, es más conveniente definirla en el interior de dicho documento para asi tener la hoja de estilo y el contenido de la página todo en un mismo sitio.
________________________________________
Definición de Hojas de Estilo con la etiqueta la cierra. Asegurese de utilizar
...
Sintaxis JavaScript
...
Uso de la hoja de estilo
Este titulo es azul y esta en mayusculas.
Este bloque en cursiva es rojo.
Resultado del ejemplo
ESTE TITULO ES AZUL Y ESTA EN MAYUSCULAS.
Este bloque en cursiva es rojo.
________________________________________
Definición de Hojas de Estilo en Ficheros Externos
Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y despues enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo asi definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio web sin más que incluir un enlace al fichero con la hoja de estilo en cada página.
La sintaxis para definir estilos en ficheros es identica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la etiqueta
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Titulo subrayado
Esto es un bloque. Normalmente los bloques están indentados,
pero en este, además, la primera línea tiene una indentación
extra. También la interlínea es mayor de lo habitual.
Titulo h5 en mayusculas y con borde
Este párrafo está centrado. También tiene unos amplios
márgenes derecho e izquierdo.
Resultado del ejemplo
Titulo subrayado
Esto es un bloque. Normalmente los bloques están indentados, pero en este, además, la primera línea tiene una indentación extra. También la interlínea es mayor de lo habitual.
TITULO EN MAYUSCULAS Y CON BORDE
Este párrafo está centrado. También tiene unos amplios márgenes derecho e izquierdo.
________________________________________
Herencia de Estilos
Un elemento HTML que contenga a otro se considera como el padre del elemento que contiene, y el elemento contenido se considera el elemento hijo.
Por ejemplo, en el siguiente texto HTML, el elemento es el padre del elemento
, que a su vez es padre del elemento .
¡El titulo es importante!
En muchos casos, los hijos adquieren o heredan el estilo de los elementos de sus padres. Por ejemplo, supongamos que asignamos a
el estilo color azul:
¡El titulo es importante!
En este caso el elemento hijo hereda el estilo de su padre, que es el elemento
. Asi la palabra "es" apareceria en color azul. Supongamos ahora que previamente se habia especificado para el color rojo. En este caso la palabra "es" apareceria en rojo porque las propiedades del hijo tienen preferencia sobre las que hereda del padre.
La herencia comienza desde el elemento de más alto nivel. En HTML, este elemento es , que es seguido de .
Para establecer las propiedades de estilo por defecto para todos los elementos de un documento lo normal es asignárselas al elemento . Por ejemplo, el siguiente código fija el color por defecto del texto a verde:
Sintaxis CSS
Sintaxis JavaScript
Muy pocas propiedades no son heredadas de padres a hijos, pero en la mayoría de los casos el resultado final es el mismo que si lo hiciesen. Por ejemplo, la propiedad color de fondo no se hereda. Si un hijo no especifica un color de fondo propio, se vera el color de fondo del padre a través suyo, tal como ocurriria si heredase la propiedad. Para más información sobre las propiedades que se heredan y cuales no, dirigirse al manual de referencia del final de este tutorial.
________________________________________
Creación y uso de Hojas de Estilo
En esta sección se verán las diferentes formas de definir estilos y como aplicar esos estilos a los elementos HTML.
Una hoja de estilo es una serie de una o más definiciones de estilo. Podemos definir una hoja de estilos en el interior del documento que la utiliza, pero también podemos utilizar hojas de estilo desde un documento externo. Por ejemplo, podemos emplear una única hoja de estilo para definir el estilo empleado por un grupo de personas en sus páginas.
Si la hoja de estilos no va a ser aplicada a otros documentos, es más conveniente definirla en el interior de dicho documento para asi tener la hoja de estilo y el contenido de la página todo en un mismo sitio.
________________________________________
Definición de Hojas de Estilo con la etiqueta la cierra. Asegurese de utilizar
...
Sintaxis JavaScript
...
Uso de la hoja de estilo
Este titulo es azul y esta en mayusculas.
Este bloque en cursiva es rojo.
Resultado del ejemplo
ESTE TITULO ES AZUL Y ESTA EN MAYUSCULAS.
Este bloque en cursiva es rojo.
________________________________________
Definición de Hojas de Estilo en Ficheros Externos
Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y despues enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo asi definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio web sin más que incluir un enlace al fichero con la hoja de estilo en cada página.
La sintaxis para definir estilos en ficheros es identica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la etiqueta
No hay comentarios:
Publicar un comentario