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 Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML. 6 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
7
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
css
Hojas de estilos en cascada. Instrucciones que debe seguir un navegador para presentar la información
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
CSS Siglas de Cascading Style Sheets, que quiere decir “Hojas de Estilos en Cascada”.
10 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
css
Separar al máximo la forma (presentación) y el fondo (datos)
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Estilo
12 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Su sintáxis Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
body { background-color:#FFFFFF;
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Etiqueta ¿Dónde?
body { background-color:#FFFFFF;
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Identificador individual ¿Dónde?
#encabezado { background-color:#FFFFFF; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Identificador común ¿Dónde?
.datos { background-color:#FFFFFF; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Elemento contextual ¿Dónde?
p strong { background-color:#FFFFFF; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Pseudo elemento ¿Dónde?
a:hover { background-color:#FFFFFF; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Pseudo elemento ¿Dónde?
a:hover Declaración { background-color:#FFFFFF; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Pseudo elemento ¿Dónde?
a:hover Declaración { background-color:#FFFFFF; } Propiedad: Atributo ¿Qué?
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Selector: Pseudo elemento ¿Dónde?
a:hover Declaración { background-color:#FFFFFF; } Propiedad: Atributo ¿Qué?
Ing. Edson Raúl Lazo Alvarez
Valor: ¿Cómo?
INFORMÁTICA II
Reglas básicas
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Jerarquía Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Autor - Usuario - Navegador
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Hola</h1>
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Hola</h1>
Ing. Edson Raúl Lazo Alvarez
Hola
INFORMÁTICA II
<h1>Hola</h1>
Hola
h1 { color:red;
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Hola</h1>
Hola
h1 { color:red;
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Lo específico vence a lo genérico Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Ante un conflicto de definiciones el navegador tomará la que se determinó con mayor especificidad
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Ing. Edson Raúl Lazo Alvarez
Hola Contenido
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
body { color:red; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
body { color:red; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
body { color:red; } body p { color:blue; } Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
body { color:red; } body p {
Elemento contextual
color:blue; } Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
body { color:red; } body p { color:blue; } Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Orden Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
El último en ser leído es quien define la propiedad
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
h1 {
color:red; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
h1 {
color:red; } h1 { color:blue;
} Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
h1 {
color:red; } h1 { color:blue;
} Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Sintaxis estricta
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Un error provoca que el navegador omita la definición del estilo
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido
BODY { color:red; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Unidades de medida
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
p {
font-size:14px; }
Absolutas Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
h1 {
font-size:4em; }
Relativas Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
#encabezado { width:50%; }
Porcentuales Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Propiedades importantes Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
float Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
Ing. Edson Raúl Lazo Alvarez
1 2 3
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1 2 3
#caja1 { border-color:red float:left; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1
2 3
#caja1 { border-color:red float:left; width:25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1
2 3
#caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px;
} Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1
2 3
#caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px;
} Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
clear Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1
2 3
#caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px;
} Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1
2 3
#caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div>
1 3
2
#caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
contenedores Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1 #caja1 { border-color:red float:left; width:25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1 #caja1 { border-color:red float:left; width:25px; padding: }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1 #caja1 { border-color:red float:left; width:25px; padding: }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
5px
1
9px
4px
#caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
10px
<div id=“caja1”> 1 </div>
1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
3px
8px
#caja1 {
1
border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px;
2px
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
7px
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:solid; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { float:left; width:25px; border:4px solid red; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Formato: Las márgenes
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
Titulo
IE
Contenido
MF
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
Titulo
IE
Contenido
h1 { MF
color:red; } p { color:blue; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
Titulo
IE
Contenido
h1 { MF
color:red; } p { color:blue; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
IE
Titulo Contenido
h1 { MF
color:red; } p { color:blue; }
Ing. Edson Raúl Lazo Alvarez
¿? INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
Titulo
IE
Contenido
h1 { MF
color:red; } p {
Titulo color:blue;
}
Contenido
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
Titulo
IE
Contenido
h1 { color:red; margin:0 0 0 0; } p { color:blue; margin:0 0 0 0; }
Ing. Edson Raúl Lazo Alvarez
MF
Titulo Contenido
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
h1 { color:red; margin:0 0 0 0; } p {
Titulo
IE
Titulo
MF
Contenido
Contenido
color:blue; margin:0 0 0 0; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
h1 { color:red; margin:10px 0 10px 25px; } p {
Titulo
IE
Titulo
MF
Contenido
Contenido
color:blue; margin:0 0 10px 25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<h1>Titulo</h1> <p>Contenido</p>
Titulo
IE
Contenido
h1 { color:red; margin:10px 0 10px 25px; } p {
Titulo Contenido
color:blue; margin:0 0 10px 25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
MF
<h1>Titulo</h1> <p>Contenido</p> <p>Contenido</p>
Titulo
IE
Contenido
h1 { color:red; margin:10px 0 10px 25px; } p {
Titulo Contenido
color:blue; margin:0 0 10px 25px; }
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
MF
<h1>Titulo</h1> <p>Contenido</p> <p>Contenido</p>
Titulo
IE
Contenido Contenido
h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px;
Titulo Contenido Contenido
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
MF
Recuerda: Contenedores
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border:1px solid red width:25px; height:25px; }
25px
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
1
#caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px;
25px
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
<div id=“caja1”> 1 </div>
5px
9px
#caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; }
Ing. Edson Raúl Lazo Alvarez
1 4px
25px
INFORMÁTICA II
10px
<div id=“caja1”> 1 </div>
5px
9px
#caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px;
1 4px
25px
}
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
10px
<div id=“caja1”> 1 </div>
3px
5px
8px
#caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px;
9px
1 4px 2px
} 25px
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
7px 10px
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
DIV DEMO
102 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
103
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
En el mismo documento .html <style>
104
<style type="text/css" media="all"> .cuerpo{ display: table; margin-left: auto; margin-right: auto; width: 80%} </style> Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
CSS Separado en un doc .css <link> @charset "utf-8"; .titulo { font-size: 16px; } ----------------------------
105
<link href="style.css" rel="stylesheet" type="text/css" /> Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Style FORMAS DE CREAR CSS
106 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
107
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
108 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
#menu { clear: left; float: left; height: 600px; width: 200px; }
109 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
110 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
#contenido { clear: left; float: right; height: 900px; width: 800px; }
111 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
112 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
113
Ing. Edson Raúl Lazo Alvarez
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
PRÁCTICA Establezca un tema de para desarrollar un sitio web. Por ejemplo: “Las Computadoras” Organice el Contenido y la Estructura del Sitio deberá contener 4 paginas incluyendo la principal. Luego diseñar los Bocetos y generar el WIREFRAME. Luego implementar el sitio web en Dreamweaver aplicando estilos CSS. De manera separada. 114 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II