Vistiendo nuestras Páginas Web
Quienes conozcan a CENICIENTA, pueden comprender fácilmente el concepto de style (estilos), el hada madrina vino y le aplicó unas reglas de estilo para que vaya al baile como una princesa.
A diferencia del cuento, los elementos HTML que vimos pueden tener estilos para siempre y no sólo hasta medianoche.
Estilos CSS
La sección STYLE se define dentro de la sección HEAD del documento, como vimos la clase pasada después de <HEAD> y antes de </HEAD> que son "reglas" para que los elementos del documento tengan nuevas propiedades (estilos CSS).
En éste caso definiremos la FONT-FAMILY como SANS SERIF para todos los textos que estén dentro de segmento <BODY></BODY>
Se define dentro de las llaves de HTML { } la regla que afectará todo lo marcado en Amarillo, como ven a la derecha, la letra pasa a ser ARIAL que no tiene serifa (sans-serif significa SIN SERIFA).
Dentro de la misma regla de estilo (o sea, dentro de las llaves { } ), agregamos la propiedad COLOR:BLUE; que definirá el color de todos los textos del documento como azules.
En la siguiente imagen, redefinimos el color blanco para el texto y la regla background:black; nos da el fondo oscuro para todos los elementos.
Luego definimos que todos los párrafos serán de color CYAN, o sea que reescribirá la propiedad anterior para éste tipo de elementos.
UN POCO DE MAGIA NEGRA
Hay muchos diseñadores que crean sitios con efectos usando Estilos CSS como éste Texto 3D para que podamos robarles un poco de código.
Como ven en la imagen de la derecha, este diseñador nos da el estilo para generar un sencillo efecto en el H1, así que copiar y pegar dentro de la sección <STYLE></STYLE>
y tenemos un encabezado con letras 3D.
UN POCO DE MAGIA NEGRA DE YOUTUBE
Los chicos miran mas Youtubeo que televisión (eso me hace sentir viejo) por ello están familiarizados con el entorno, pero en las opciones de compartir, hay un botón llamado INSERTAR VINCULO, que nos ofrece una larga etiqueta <IFRAME></IFRAME> que es una de las formas de insertar un bloque de otra web en la nuestra, youtube ya incluye todo el formateo de la etiqueta, así que copiamos y pegamos en algún lugar del BODY.
Como se ve en la siguiente imagen podemos agregar width (ancho) y height (alto) para dar tamaño a la imagen o modificar el embebido para que los objetos puedan estar uno junto al otro.
INSERTANDO MAS
Utilizaremos éste tipo de INSERCIONES a nuestra página para crear documentos ricos en medios, ya sea audios, videos, modelos 3D, y todo lo que la web pueda proveernos.
Estos son algunos ejemplos que incrusté en ésta página como un Xwing que subí a mi Sketchfab y una actividad de SCRATCH que hice el año pasado para explicar movimiento de objetos a los chicos de tercer grado:
Código HTML
<html lang="es-ES">
<header>
<title> 2 de Abril </title>
<style>
body {
font-family: sans-serif;
color: white;
background:black;
}
p { font-family: sans-serif; color: cyan; }
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</header>
<body>
<h1> Día del Veterano y de los Caídos en la Guerra de Malvinas </h1>
<p>
En la Argentina, el 2 de abril de cada año se conmemora el Día del Veterano y de los Caídos en la Guerra de Malvinas. Creado por la ley 25.370 de noviembre de 2000, desde junio de 2006 es un feriado nacional inamovible, por lo cual no podrá ser trasladado al lunes anterior o siguiente para conformar un fin de semana largo. La elección de esta fecha se debe a que el 2 de abril de 1982 las Fuerzas Armadas Argentinas desembarcaron en las Islas Malvinas con el objetivo de recuperar ese territorio, arrebatado por fuerzas británicas en el año 1833.
</p>
<img width="300" height ="220" src="soldados.jpg">
<iframe width="300" height="220" src="https://www.youtube.com/embed/p-2qrgMb6Fg?rel=0?ecver=1" frameborder="0" allowfullscreen>
</iframe>
</body>
</html>