Está en la página 1de 52

Ctedras paralelas

HTML y CSS 2

www.fondiu.cl
twitter: @_fondiu

y en el captulo anterior
(glosario)

glosario

HTML: Lenguaje de marcado para pags Web / Contenido


CSS: Lenguaje de estilos / Presentacin Apariencia

Etiqueta: Unidad estructural delimitador de contenido


Atributo: Datos complementarios para etiquetas
Head: Encabezado (invisible) de pgina Web
Meta: Informacin de una pgina acerca de s misma

Body: Seccin visible de una pgina Web

glosario

Anidacin: Etiquetas contenidas dentro de otras


Padre/Hijo: Relacin 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)
Declaracin CSS: Conjunto de reglas que modifican un

elemento
Selector: Definicin 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

especificaciones html

HTML es un lenguaje que evoluciona en


el tiempo
Hoy en da coexisten 3 especificaciones
principales: HTML 4, XHTML 1 y HTML 5

especificaciones: html 4

La especificacin "clsica" que usan la


mayora de las pginas
Viene en 3 versiones: Strict, Transitional
y Frameset

especificaciones: Xhtml

Combina HTML 4 con el estndar XML


Ms estricto y "correcto" que HTML 4
Ofrece las mismas funcionalidades

especificaciones: HTML 5

Lenguaje "nuevo"
Permite escribir en HTML y XHTML
Ofrece nuevas funcionalidades
"nativas": video, audio, canvas
Cdigo ms semntico
Ms posibilidades de interfaz
Mejor tolerancia a errores

Html 5: etiquetas
Etiquetas media

<canvas> Lienzo de dibujo


<video> Se imaginarn :)
<audio> Se imaginarn :)

Html 5: etiquetas
Etiquetas semnticas

<nav>
<article>
<aside>
<header>
<footer>
<section>

Men
Unidad de contenido (ej: post de blog)

Sidebar
Encabezado
Pie de pgina

S. Es una seccin (grupo de unidades)

html: forms

Los formularios permiten a una pgina


Web enviar y recibir datos de otras
pginas, un script o base de datos.
Cada vez que envas un e-mail,
comentas en un blog, te suscribes a un
newsletter o cambias tu foto en
Facebook ests enviando un formulario.

html: forms

Los formularios realizan 3 funciones


bsicas:
1. Ofrecen controles de interfaz para
ingresar la informacin
2. Validan la informacin ingresada
3. Envan la informacin visible y oculta
al destino especificado

html: forms

Un formulario SIEMPRE est envuelto


por una etiqueta <form>, que define
dnde ser enviado.
<form action="http://google.com"
method="POST">

html: forms

El atributo action especifica el lugar


donde sern recibidos y procesados los
datos del formulario.
"Envame esto a http://google.com por
favor, y me procesai los datos, atito"
<form action="http://google.com"

method="POST">

html: forms

El atributo method especifica qu tipo de


envo se har:
GET slo consulta datos y no modifica nada
(slo lectura)
POST lee y enva datos y espera la
respuesta del servidor (lectura y escritura).
<form action="http://google.com"

method="POST">

html: forms

Qu datos se envan?
Todos los recopilados en elementos de
"entrada" (inputs)
Esto incluye elementos que interactan
con el usuario (controles) como
elementos invisibles

forms: etiquetas
Controles de formulario

<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 lnea)

Campo de contrasea
Botn genrico
Botn de envo form

Casilla de verificacin
Botn de radio

"Examinar"

forms: etiquetas
Controles de formulario

<input type="image">
<textarea>
<select>
<option>
<optgroup>
<fieldset>
<legend>

Campo texto multilnea


Elemento de men select

Grupo de imagen
Agrupador de campos

Ttulo del fieldset

forms: etiquetas
Controles de formulario

<input type="hidden"> Muahahahaha

Html: tablas
Etiquetas de tabla

<table>
<tr>
<td>
<th>

Definicin de tabla

Fila de tabla (horiz)


Celda de tabla
Encabezado de tabla

Html: tablas

Html: tablas
<table>
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Lcteos</th>
</tr>
<tr>
<td>Manzana</td>
<td>Apio</td>
<td>Yogurt</td>
</tr>
<tr>
<td>Naranja</td>
<td>Brcoli</td>
<td>Queso</td>
</tr>
</table>

Html: tablas

Html: tablas
<table>
<tr>
<th colspan="2">Reino Vegetal</th>
<th>Lcteos</th>
</tr>
<tr>
<td>Manzana</td>
<td>Apio</td>
<td>Yogurt</td>
</tr>
<tr>
<td>Naranja</td>
<td>Brcoli</td>
<td>Queso</td>
</tr>
</table>

Html 5 v/s html 4/xhtml


HTML 4/XHTML

HTML 5

<div class="menu">

<nav>
<article>
<aside>
<header>
<footer>

<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
Tipografa
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 especificacin de CSS
Recin est terminando de ser
implementada por los navegadores
Nuevos selectores, fondos mltiples,
gradientes, efectos visuales

css: cascada
Los estilos se aplican unos sobre otros,
siguiendo una jerarqua.
Lo particular tiene prioridad sobre lo
general.
div {
font-family: Arial, Helvetica, sans-serif;
}
div#contenido {
font-family: Georgia;
}

css: cascada
Una regla especfica tiene prioridad sobre un
shorthand.

div {
font-family: Georgia;
font: Verdana;
}

css: cascada
La excepcin !important tiene prioridad por
sobre todas las dems.
div {
font-family: Georgia;
font: Verdana !important;
}

css: cascada
Si todas las dems condiciones son idnticas,
la regla que va despus 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 ms elementos tiene
prioridad por sobre el que especifica menos.

css: Cdigos de color


Los colores CSS pueden escribirse con
notacin hexadecimal

#rrggbb

css: Cdigos 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: Cdigos de color


todos los colores con nmeros iguales son
grises:

#444444=
#bbbbbb=

css: Cdigos de color

#ff0000=
#00ff00=
#0000ff =

css: Cdigos de color

#ffff00= amarillo
#ff00ff=
#00ffff =

css: Cdigos de color


Los colores pueden abreviarse cuando cada
par tiene nmeros exactamente iguales

#ff0000= #f00
#ff66aa= #f6a
#5566dd= #56d

www.fondiu.cl
twitter: @_fondiu