curso html y css, parte 2

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


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


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


forms: etiquetas

<input type="hidden"> Muahahahaha


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


• … en valores que van del 0 al 9 y de A a F (en total, 256 tonalidades por color):

#000000 =

#ffffff = blanco


• … todos los colores con números iguales son grises:

#444444=

#bbbbbb=


#ff0000=

#00ff00=

#0000ff =


#ffff00= amarillo

#ff00ff=

#00ffff =


Los colores pueden abreviarse cuando cada par tiene números exactamente iguales

#ff0000= #f00

#ff66aa= #f6a

#5566dd= #56d

www.fondiu.cl

twitter: @_fondiu

curso html y css, parte 2

Documents