SEMANA 5 - APLICACION DE FORMATOS Y ESTILOS A UNA PAGINA WEB

1

Semana 5

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

2

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

Contexto Al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia.

DISEÑO

Texto

HTML

<font face="Arial" size=“66" color=“red"> Texto </font>

3 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Contexto Si se quería aplicar la misma apariencia a varios elementos, había que repetir las instrucciones!

TEXTO 1

TEXTO 1

TEXTO 2

TEXTO 2

<font face="Arial” size=“18" color=“red"> Texto 1 </font> ,,, ,,, <font face="Arial” size=“18" color=“red"> Texto 2 </font>

4 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Contexto Aún peor, si se quería aplicar la misma apariencia a varios elementos en varias páginas, las instrucciones se repiten cada vez más.

El desarrollador veía tedioso este proceso, pues no había forma alguna de evitar tantas repeticiones.

TEXTO 1

(

<font face="Arial” size=“18" color=“red"> Texto 1 </font>

TEXTO 1

n )

5 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Contexto Para organizar el contenido se debía recurrir únicamente a las tablas.

No había forma de poner un objeto sobre otro, Para que los vínculos se vieran agradables, había que recurrir a imágenes.

Muchos de los efectos se tenían que realizar con Javascript,

Etc.

6 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Contexto Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML. 7 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

8

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

CSS Siglas de Cascade Style Sheets, que quiere decir “Hojas de Estilos en Cascada”.

Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML. Trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.

9 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Estilo

10 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Estilos 1 El estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, entre otros.

2 El estilo lógico, en cambio, se refiere específicamente a la estructura del documento..

3 CSS se ocupa de adaptar el estilo físico al estilo lógico.

11 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

¿Porqué usar CSS?

Por que es más limpio tener por separado el contenido (HTML) de la presentación (CSS).

Por que para cambiar el formato de un elemento HTML específico, solo se tendría que definir en la hoja de estilos una única vez y no tantas veces como dicho elemento aparezca.

Por que el HTML es muy limitado para lograr una maquetación atractiva de las páginas web (posicionamiento lineal).

12 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

¿Porqué usar CSS?

13

Por que permite mantener una cierta consistencia entre todas las páginas.

Por que permite una carga más rápida de las páginas.

Por que es más accesible que HTML.

Por que es un estándar y los estándares son el camino para que se pueda ver internet de la misma manera.

Por que se trata de definir las características en cascada.

Por que se pueden definir los estilos utilizando unidades diferentes a los pixeles.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Regla CSS

14 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DIV DEMO

15 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Style FORMAS DE CREAR CSS

16 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

17

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

18 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

#menu {

clear: left; float: left; height: 600px; width: 200px; }

19 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

20 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

#contenido { clear: left; float: right; height: 900px; width: 800px; }

21 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

22 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II