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

Semana 5

1

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

2

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

Contexto

DISEÑO HTML

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

Texto

Al construir un documento HTML se tenía que definir cada una de

las propiedades en las diferentes etiquetas para mejorar su

apariencia.

3

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

Contexto

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

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

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

TEXTO 2

TEXTO 1

TEXTO 2

TEXTO 1

4

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

( )n

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 TEXTO 1

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

5

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

Contexto

Etc.

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,

6

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

Contexto

Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.

7

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

8

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

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

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

Estilo

10

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

Estilos

1

2

3

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.

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

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

11

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

¿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

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

¿Porqué usar CSS?

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.

13

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

Regla CSS

14

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

DIV

DEMO

15

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

FORMAS DE CREAR CSS

Style

16

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

17

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

18

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

19

#menu { clear: left; float: left; height: 600px; width: 200px; }

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

20

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

21

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

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

22