Upload
sergio-nouvel-castro
View
3.278
Download
7
Embed Size (px)
Citation preview
HTML y CSS 2
Cátedras paralelas
www.fondiu.cl
twitter: @_fondiu
y en el capítulo anterior…
(glosario)
glosario
HTML: Lenguaje de marcado para pags Web / Contenido
CSS: Lenguaje de estilos / Presentación – Apariencia
Etiqueta: Unidad estructural – delimitador de contenido
Atributo: Datos complementarios para etiquetas
Head: Encabezado (invisible) de página Web
Meta: Información de una página acerca de sí misma
Body: Sección visible de una página Web
glosario
Anidación: Etiquetas contenidas dentro de otras
Padre/Hijo: Relación entre contenedor y contenido
Block: Comportamiento visual de "caja" de un elemento
Inline: Comportamiento visual estilo "destacador"
Regla CSS: Atributo a ser modificado por un valor (ej: color)
Declaración CSS: Conjunto de reglas que modifican un
elemento
Selector: Definición del elemento a ser modificado
glosario
Class: Atributo HTML que permite agrupar similares
ID: Atributo HTML que permite identificar y diferenciar
Pseudo-clase: Selector que permite tomar estados HTML
especiales
Script: Conjunto de instrucciones. En HTML, referido a
JavaScript
• HTML es un lenguaje que evoluciona en el tiempo
• Hoy en día coexisten 3 especificaciones principales: HTML 4, XHTML 1 y HTML 5
especificaciones html
• La especificación "clásica" que usan la mayoría de las páginas
• Viene en 3 versiones: Strict, Transitional y Frameset
especificaciones: html 4
• Combina HTML 4 con el estándar XML
• Más estricto y "correcto" que HTML 4
• Ofrece las mismas funcionalidades
especificaciones: Xhtml
• Lenguaje "nuevo"
• Permite escribir en HTML y XHTML
• Ofrece nuevas funcionalidades "nativas": video, audio, canvas
• Código más semántico
• Más posibilidades de interfaz
• Mejor tolerancia a errores
especificaciones: HTML 5
Html 5: etiquetas
<canvas>
<video>
<audio>
Lienzo de dibujo
Se imaginarán :)
Se imaginarán :)
Etiquetas media
Html 5: etiquetas
<nav>
<article>
<aside>
<header>
<footer>
<section>
Menú
Unidad de contenido (ej: post de blog)
Sidebar
Encabezado
Pie de página
Sí. Es una sección (grupo de unidades)
Etiquetas semánticas
• Los formularios permiten a una página Web enviar y recibir datos de otras páginas, un script o base de datos.
• Cada vez que envías un e-mail, comentas en un blog, te suscribes a un newsletter o cambias tu foto en Facebook estás enviando un formulario.
html: forms
• Los formularios realizan 3 funciones básicas:
1. Ofrecen controles de interfaz para ingresar la información
2. Validan la información ingresada
3. Envían la información visible y oculta al destino especificado
html: forms
• Un formulario SIEMPRE está envuelto por una etiqueta <form>, que define dónde será enviado.
html: forms
<form action="http://google.com"
method="POST">
• El atributo action especifica el lugar donde serán recibidos y procesados los datos del formulario.
• "Envíame esto a http://google.com por favor, y me procesai los datos, ñatito"
html: forms
<form action="http://google.com"
method="POST">
• El atributo method especifica qué tipo de envío se hará:
• GET sólo consulta datos y no modifica nada (sólo lectura)
• POST lee y envía datos y espera la respuesta del servidor (lectura y escritura).
html: forms
<form action="http://google.com"
method="POST">
¿Qué datos se envían?
• Todos los recopilados en elementos de "entrada" (inputs)
• Esto incluye elementos que interactúan con el usuario (controles) como elementos invisibles
html: forms
forms: etiquetas
<input type="text">
<input type="password">
<input type="button">
<input type="submit">
<input type="checkbox">
<input type="radio">
<input type="file">
Campo de texto (1 línea)
Campo de contraseña
Botón genérico
Botón de envío form
Casilla de verificación
Botón de radio
"Examinar…"
Controles de formulario
forms: etiquetas
<input type="image">
<textarea>
<select>
<option>
<optgroup>
<fieldset>
<legend>
Campo texto multilínea
Elemento de menú select
Grupo de imagen
Agrupador de campos
Título del fieldset
Controles de formulario
forms: etiquetas
<input type="hidden"> Muahahahaha
Controles de formulario
Html: tablas
<table>
<tr>
<td>
<th>
Definición de tabla
Fila de tabla (horiz)
Celda de tabla
Encabezado de tabla
Etiquetas de tabla
Html: tablas
Html: tablas
<table> <tr> <th>Frutas</th> <th>Verduras</th> <th>Lácteos</th> </tr> <tr> <td>Manzana</td> <td>Apio</td> <td>Yogurt</td> </tr> <tr> <td>Naranja</td> <td>Brócoli</td> <td>Queso</td> </tr> </table>
Html: tablas
Html: tablas
<table> <tr> <th colspan="2">Reino Vegetal</th> <th>Lácteos</th> </tr> <tr> <td>Manzana</td> <td>Apio</td> <td>Yogurt</td> </tr> <tr> <td>Naranja</td> <td>Brócoli</td> <td>Queso</td> </tr> </table>
Html 5 v/s html 4/xhtml
HTML 4/XHTML HTML 5
<nav>
<article>
<aside>
<header>
<footer>
<div class="menu">
<div class="post">
<div class="sidebar">
<div class="header">
<div class="footer">
CSS: Modelo de caja
… que se aplica a elementos BLOCK
CSS: unidades de MEDIDa
px
%
em
CSS: reglas
Tipografía
font-family: Verdana, "Lucida Grande", sans-serif; font-size: 20px; font-variant: small-caps; text-transform: uppercase; text-decoration: underline; color: black; letter-spacing:-0.01em; line-height: 1.5; text-align: justify;
CSS: reglas
Borde
border-top-color: #000;
border-right-style: solid;
border-bottom-width:2px;
Margen
margin-left:10px;
Relleno
padding-top:2em;
CSS: reglas
Lista
list-style-type: disc; list-style-position: outside; list-style-image: url('bullet.gif');
Posicionamiento float: left; width: 80%; height: 20px; z-index: 3000; position: relative;
CSS: reglas
Display
visibility: hidden; display: none; display: block; display: inline;
CSS: reglas
Fondo
background-color: #ffad05;
background-image: url("images/fondo.jpg");
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top;
Efectos CSS2 y CSS3 box-shadow: 10px 10px 5px #888; text-shadow: 2px 2px 4px #333;
CSS: shorthands
• Abreviaturas de reglas
• Combinan varias reglas en una sola
• Los diferentes valores se especifican mediante espacios
• MEMORIZAR ESTE ORDEN:
• top-right-bottom-left
CSS: shorthands
border: 1 px solid #ccoo66;
border-top
border-top-color
border-top-style border-top-width
border-right
border-bottom
border-left
border-color
border-style
border-width
CSS: shorthands
padding: 5px 10px 3px 2px;
padding-top
padding-right
padding-bottom
padding-left
margin: 5px auto 3px auto;
margin-top
margin-right
margin-bottom
margin-left
CSS: shorthands
font: 15px/1.5 Verdana, 'Lucida Sans', sans-serif #333;
font-size line-height font-family color
background: url('foto.jpg') top 5px no-repeat fixed #444;
background-image background-position background-repeat background-attachment background-color
CSS: shorthands
list-style: url(bullet.gif) disc inside;
list-style-image
list-style-type
list-style-position
CSS 3?
• Última especificación de CSS
• Recién está terminando de ser implementada por los navegadores
• Nuevos selectores, fondos múltiples, gradientes, efectos visuales
css: cascada
• Los estilos se aplican unos sobre otros, siguiendo una jerarquía.
• Lo particular tiene prioridad sobre lo general.
div { font-family: Arial, Helvetica, sans-serif; } div#contenido { font-family: Georgia; }
css: cascada
• Una regla específica tiene prioridad sobre un shorthand.
div { font-family: Georgia; font: Verdana; }
css: cascada
• La excepción !important tiene prioridad por sobre todas las demás.
div { font-family: Georgia; font: Verdana !important; }
css: cascada
• Si todas las demás condiciones son idénticas, la regla que va después tiene prioridad sobre la que va antes.
div { color: black; color: blue; }
css: cascada
• ID tiene prioridad sobre class.
• Class tiene prioridad sobre etiqueta.
• A igualdad de clases, etiquetas y Ids, el selector que especifica más elementos tiene prioridad por sobre el que especifica menos.
css: Códigos de color
• Los colores CSS pueden escribirse con notación hexadecimal…
#rrggbb
css: Códigos de color
• … en valores que van del 0 al 9 y de A a F (en total, 256 tonalidades por color):
#000000 =
#ffffff = blanco
css: Códigos de color
• … todos los colores con números iguales son grises:
#444444=
#bbbbbb=
css: Códigos de color
#ff0000=
#00ff00=
#0000ff =
css: Códigos de color
#ffff00= amarillo
#ff00ff=
#00ffff =
css: Códigos de color
Los colores pueden abreviarse cuando cada par tiene números exactamente iguales
#ff0000= #f00
#ff66aa= #f6a
#5566dd= #56d
www.fondiu.cl
twitter: @_fondiu