HTML%

Estructura%

Estructura%HTML%
Los%elementos%html%pueden%visualizarse%como%bloque%o%como%en%lnea.%
%%%
Los%elementos%bloques%block%ocupan%todo%el%ancho%de%la%pgina%y%fuerzan%a%una%
%%
nueva%lnea%antes%y%despus.%
%
%
<article> <aside> <canvas> <div> <footer> <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section>
<ul>
hBps://developer.mozilla.org/enEUS/docs/HTML/BlockElevel_elements%

Los%elementos%en%lnea%inline%slo%ocupan%el%ancho%necesario%y%no%fuerzan%
nuevas%lneas.%%%
%
<em> <a> <br> <img> <span> <button> <input> <select>
<textarea>
%
%
% hBps://developer.mozilla.org/enEUS/docs/HTML/Inline_elements%
%

Estructura%HTML%
%%%
DIV,

%%
El%elemento%<div>%es%un%elemento%de%bloque%que%se%emplea%
%
contener%en%su%interior%otros%elementos%HTML.%
%
%El%elemento%<div>,no%Lene%ningn%signicado,%es%semnLcamente%
neutro.%%
%
Empleando%CSS,%el%elemento%<div>,se%puede%uLlizar%para%
estructurar%el%documento%en%grandes%bloques%de%contenido.%
%
El%div%es%la%propuesta%para%susLtuir%a%los%elementos%<table>,para%el%
diseo.%El%propsito%del%elemento%<table>,es%para%mostrar%datos%
tabulados.%
%
%

Estructura%HTML%
%%%
SPAN,

%%
El%elemento%HTML,<span>,es%un%elemento%en%lnea%que%se%emplea%
%
como%un%contenedor%de%texto.%
%
El%elemento%<span>,no%Lene%ningn%signicado%especial,%es%
semnLcamente%neutro.%.%
%
Cuando%se%uLliza%junto%con,CSS,%el%elemento%<span>,se%puede%
uLlizar%para%establecer%los%atributos%de%esLlo%para%las%partes%del%
texto%mediante%un%idenLcador%ID%o%una%clase%class.%
%
%
%
%
%

CSS%
Los%elementos%<DIV>%y%<SPAN>%se%emplean%para%denir%normas%de%
%%%
esLlo%ms%especcas.%%
%%
El%atributo,id,se%emplea%para%idenLcar%un%elemento%nico.%
%
El%atributo%class%cuando%hay%ms%de%un%elemento%que%manLenen%
una%relacin%signicaLva,%puede%ser%comparLr%el%esLlo.%
%
%
%
%
%

Estructura%HTML%
En%HTML5,%los%bloques%,son%susLtuidos%por%bloques%semnLcos%que%
%%%
muestran%signicado%por%si%mismos.%
%%
%%
<header>%
% <nav>%
%
<secLon>%
<aside>%
%
<arLcle>%
%
%
%

<footer>%

Estructura%HTML%
Una%pgina%de%este%Lpo%realizada%con%<div>,quedara%de%la%
%%%
siguiente%manera.
%
%%

Es%habitual%una%caja%contenedor%para%impedir%que%ocupe%toda%la%pgina%cuando%la%ventana%
%
de%la%navegador%es%muy%grande%o%controlar%la%disposicin%de%los%elementos%cuando%es%muy%
pequea.%

%
%
%
%
%
%

+,CSS,

Estructura%HTML%
Una%pgina%de%este%Lpo%realizada%con%los%nuevos%bloques%
%%%
semnLcos%del%HTML5%quedara.%
%%
%%
%
%
%

+,CSS,

Estructura%HTML%
La%estructura%HTML,,debe%realizarse%en%el%senLdo%lgico%de%lectura%
%%%
del%documento,%cuando%la%pgina%se%vea%sin%aplicar%los%esLlos%no%
%%
%
pierda%su%signicado.%
%
%
%
%
%
%
%
%

Herencia%CSS%
Para%entender%como%funcionan%los%selectores%y%la%herencia%CSS%es%
%%%
necesario%entender%qu%es%el%rbol%del%documento.%
%%
%%
%
%
%

Herencia%CSS%
el%rbol%del%documento%del%ejemplo%anterior:%
%%%
%%%
%%
html%
%
%
%

head%

body%

Ltle%

div%.caja%
header%

nav%

h1%

ul%
li%

li%

arLcle%

li%

footer%

Herencia%CSS%
Ancestor%es%un%elemento%conectado%pero%ms%arriba%en%la%
%%%
estructura%del%documento%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%

Ancestor%

header%

nav%

arLcle%

h1%

ul%

descendientes%

li%

li%

li,

footer%

Herencia%CSS%
Descendientes%son%los%elementos%conectados%pero%ms%abajo%en%la%
%%%
estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%

Ancestor%

header%

nav%

arLcle%

h1%

ul%

descendientes%

li%

li%

li,

footer%

Herencia%CSS%
Parent%es%el%elemento%conectado%y%directamente%sobre%un%
%%%
elemento%en%la%estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%
header%

nav%

h1%

ul%

descendientes%

li%

li%

arLcle%
Parent%
li,

footer%

Herencia%CSS%
Child%es%el%elemento%conectado%y%directamente%debajo%de%un%
%%%
elemento%en%la%estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%

Child%

header%

nav%

arLcle%

h1%

ul%
li%

li%

li,

footer%

Herencia%CSS%
Siblings,son%los%elementos%que%comparten%un%mismo%padre%en%la%
%%%
estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%
header%

nav%

h1%

ul%

Siblings%

li%

li%

arLcle%
Parent%
li,

footer%

Herencia%CSS%
Si%denimos%un%esLlo%en%el%body,%todos%los%elementos%situados%
%%%
debajo%en%el%rbol%del%documento,%heredan%esa%propiedad.%
%%
%%
%
%
%
%
%
%
%
%
%

Selectores%CSS%
El%selector%aplica%a%todos%los%elementos%HTML%de%la%pgina%con%esa%
%%%
eLqueta%(p).%
%%
%%
%
El%selector,mlGple%de%CSS,%incluye%varios%selectores%separados%por%
coma%(,),%aplicando%el%esLlo%a%cualquier%elemento%con%alguna%de%las%
marcas%incluidas:%h1,,h2,,h3.%
%
%
El%selector%puede%incluir%eLquetas%separadas,solo,por,espacios.%El%
selector%aplicar%solo%a%elementos%con%la%lLma%marca%(ul),%con%los%
anteriores%como%ancestros,%es%decir%.caja%deber%ser%ancestro%de%
nav%y%nav%deber%ser%ancestro%de%ul.%
,,
%
%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%0%ID%
%
C%=%0%clases%
D%=%1%elemento%
%
%
%
%

Puntuacin%=%0,0,0,1%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesvamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%
%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%0%ID%
%
C%=%0%clases%
D%=%2%marcas%
%
%
%
%

Puntuacin%=%0,0,0,2%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesvamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%1%ID%
%
C%=%1%clase%
D%=%1%elemento%
%
%
%
%

Puntuacin%=%0,1,1,1%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesvamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%
%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%1%ID%
%
C%=%0%clases%
D%=%2%marcas%
%
%
%
%

Puntuacin%=%0,1,0,2%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesvamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%

Prioridad%CSS%
La%ganadora%es,%#caja%.cabecera%h1%=%0,1,1,1
%
%%%
% %%
%%

Ganadora:%
%
A%=%0%esLlos%en%lnea%
B%=%1%ID%
C%=%1%clase%
D%=%1%elemento%
Puntuacin%=%0,1,1,1%

Prioridad%CSS%
Cuando%dos%declaraciones%Lenen%el%mismo%valor:%
%%%
Ser%la%lLma%especicada%
%%
%%
%
%
%
%

Selectores%CSS%
Selector%universal,
%%%
*,%%
%
Afecta%a%todos%los%elementos.%
%
%
%
%
%
%

Reglas%CSS%
Modicacin%de%esLlos,%por%el%usuario%en%el%navegador:%Lpogradas%
%%%
%%%
%%
%
%

Prioridad%CSS%
Reglas%adicionales%de%prioridad%de%las%declaraciones%CSS%ordenadas%
%%%
de%menor%a%mayor:%
%%
%%
,CSS%por,defecto,del,Navegador%(navegador)%
%CSS%en%preferencias,de,usuario,del,navegador%(usuario),
%CSS%en%pgina,HTML,o,script,CSS%(diseador),
,CSS%en%pgina,HTML,o,script,CSS%con%!important%(diseador),%p.%e.%
body,{color:blue,!important;},%
%CSS%en%preferencias,de,usuario,del,navegador%con%!important%
(usuario),%p.%e.%body,{color:blue,!important;},%
%
%
%
%

Recursos%CSS%
Kseso,CSS:,CSS%bsico:%Cascada,%especicidad%y%herencia%
%%%
hBp://ksesocss.blogspot.com/2012/05/cssEbasicoEcascadaEespecicidadEy.html%
%%
%%
Dev.Opera:,Recorriendo%el%rbol%DOM%
hBp://dev.opera.com/arLcles/view/traversingEtheEdomEes/%
%
LIBROS,WEB:,rbol%de%nodo%
hBp://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html%
%
UOC:,Herencia%y%cascada%
hBp://mosaic.uoc.edu/ac/le/es/m6/ud2/%
%
LIBROSWEB:,Colisiones%de%esLlos%
hBp://librosweb.es/css/capitulo_2/colisiones_de_esLlos.html%
%
CSS:,Specity%Wars%
hBp://www.stuandnonsense.co.uk/archives/css_specicity_wars.html%
%
%

Recursos%HTML%
Bruce,Lawson:,HTML5%arLcles%and%secLons:%whats%the%dierence?%
%%%
hBp://www.brucelawson.co.uk/2010/html5EarLclesEandEsecLonsE
%%
%
whatsEtheEdierence/%
%
html5,Doctor:,The%arLcle%element%
hBp://html5doctor.com/theEarLcleEelement/%
%
HTM5,paso,a,paso:,div,%secLon%y%arLcle%
hBp://html5pasoapaso.blogspot.com.es/2011/08/divEsecLonEyE
arLcle.html%
%
ondho:,HTML5%(discusiones%entre%aLcle%y%secLon)%
hBp://www.ondho.com/html5EdiscusionesEentreEarLcleEyEsecLon/%
%
%
%

HTML/CSS%
Navegacin%

Navegacin%HTML%
Un%men%es%una%lista%de%enlaces.%Se%recomienda%usar%las%marcas%de%
%%%
lista%%<ul>,<li>,y%el%enlace%<a>,%que%es%lo%establecido%por%las%normas%
%%
de%accesibilidad.%%
%
%
%
%
%
%
%
%
%
%
%
%
%

Navegacin%HTML%
Men%verLcal,
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%
%

Navegacin%CSS%
Los%valores%CSS%por%defecto%de%la%lista%y%del%enlace,%deben%ser%
%%%
ajustados%a%nuestras%necesidades.,
%%
%
%
%
%
%
%
%
%
%
%
%
%

Ejemplo%men%verLcal%
myspace%

Navegacin%HTML%
Men%horizontal,
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%
%

Navegacin%CSS%
CSS%men%horizontal.,
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%

% Ejemplo%men%horizontal%
BBC%

Mens%Firefox%OS%
Los%mens%recomendados%para%las%aplicaciones%en%Firefox%OS%%
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%
%

Firefox%OS%App%BuBons:%
hBp://www.mozilla.org/enEUS/styleguide/products/refoxEos/buBons/%
%

Iconos%para%aplicaciones%Firefox%OS%
Un%icono%para%una%aplicacin%Firefox%OS%es%una%imagen%de%pxeles%
%%%
60x60%pxels%en%formato%PNG%de%24%bits.%
%%

%
%
%
%
%
%
%
%
%
%
%
%

Hay%otras%tamaos%%
necesarios%para%otros%
disposiLvos:%
16px,%32px,%48px,%
60px,%128px,%256px.%

Guas%de%diseo%de%mozilla,,para%descargar%las%planLllas%de%los%iconos%
hBp://www.mozilla.org/enEUS/styleguide/products/refoxEos/icons/%

Recursos%navegacin%CSS%
Cristalab:,Mens%verLcales%
%%%
hBp://www.cristalab.com/cursoEhtml/menusEverLcales/%
%%
%%
CSS,Blog:,Crear%un%men%horizontal%simple%con%CSS%
hBp://www.cssblog.es/crearEunEmenuEhorizontalEsimpleEconEcss/%
%
w3schools:,men%horizontal%
hBp://www.w3schools.com/css/tryit.asp?lename=trycss_oat5%
%
%
%
%
%
%
%

HTML/CSS%
Texto%

Texto%CSS%
Las%marcas%que%permiten%denir%las%propiedades%y%aspectos%
%%%
visuales%de%una%fuente.%
%%
%
font^family%es%la%propiedad%que%permite%denir%la%fuente%para%un%
elemento.%
P {
font-family: "Times New Roman, Georgia,
Serif; }
%
%
%
%
%
%

hBp://www.w3.org/TR/CSS2/fonts.html%%

Texto%CSS%
Las%propuestas%de%familia%Lpogrca%terminan%con%una%familia,
%%%
genrica,alternaGva.%
%%
% P {
font-family:"Times New
Roman",Georgia,Serif; }
%
Valores%de%las%familias%genricas%son:%%
'serif'%(Ej.:%Times)%
'sansEserif'%(Ej.:%HelveLca)%
'cursive'%(Ej.:%%ZapfEChancery)%
'fantasy'%(Ej.:%%Western)%
'monospace'%(Ej.:%Courier)%
%
%
%hBp://www.w3.org/TR/CSS2/fonts.html#genericEfontEfamilies%
%

Texto%CSS%
Familia,Gpogrca.%Es%una%serie%de%Lpos%clasicables,%por%su%peso,%
%%%
inclinacin,%proporcin,%espaciado,%ausencia%o%presencia%de%
%%
%
serifas%En%Lpograda%digital,%en%los%formatos%actuales,%una%serie%
completa%esta%incluida%en%un%nico%archivo,%que%conLene%los%Lpos%
independientes.%
%
%
%
%
%
%
%
%
%

Texto%CSS%
Font^weight.%Especica%el%peso%de%la%letra,%segn%los%siguientes%
%%%
valores.%
%%
normal%|%bold%|%bolder%|%lighter%|%100%|%200%|%300%|%400%|%500%|%600%|%700%|%800%|%900%|%inherit%
%

%
%
%
%
%
%
%
%
%
%
%

Texto%CSS%
font^strech,,Especica%el%ancho%de%la%fuente,%la%mayora%de%los%
%%%
navegadores%no%soportan%esta%propiedad%
%%

%
normal%|%ultraEcondensed%|%extraEcondensed%|%condensed%|%semiEcondensed%|%semiEexpanded%|%
expanded%|%extraEexpanded%|%ultraEexpanded%|%inherit%

%
%
%
%
Font^style.%Especica%el%esLlo%de%la%fuente.%Normal,%condensada...%
normal%|%italic%|%oblique%|%inherit%

%
%
%
%
%
%hBps://developer.mozilla.org/enEUS/docs/Web/CSS/fontEstretch%

Texto%CSS%
font^size,,Especica%el%tamao%de%la%fuente%
%%%

<absoluteEsize>%|%<relaLveEsize>%|%<length>%|%<percentage>%|%
inherit%
%%
%
Tamao%predeterminado%para%el%texto%es%de%
16px%(16px%=%1em).%

<absolute^size>,Los%valores%posibles%son:%%

[%xxEsmall%|%xEsmall%|%small%|%medium%|%large%|%xElarge%|%xxElarge%]%

<relaGve^size>,,Un%valor%relaLvo%al%heredado,%mayor%o%menor:%
%[%larger%|%smaller%]%

<length>,es%un%valor%absoluto%del%tamao%generalmente%en%px%
<percentage>,representa%un%valor%en%funcin%al%valor%heredado.%
%
xx^small% x^small%
small%
medium%
large%
x^large%
xx^large%
,%
%
% scaling,
3/5%
3/4%
8/9%
1%
6/5%
3/2%
2/1%
3/1%
factor%
%
h6%
%
h5%
h4%
h3%
h2%
h1%
%
% XHTML,
headings%
%
% hBps://developer.mozilla.org/enEUS/docs/Web/CSS/fontEsize%

Texto%CSS%
font^variant,Especica%la%variante%de%la%fuente.%%
%%%
Valor:%%normal%|%smallEcaps%
%%
%
es%la%versin%versalita%de%una%fuente%
%
%
%
%
%
%
%
%
%

Texto%CSS%
line^height,%dene%el%interlineado%del%texto%
%%%
normal%|%<nmero>%|%<medida>%|%<porcentaje>%|%inherit%
%%
%
El%nmero%que%mulLplicado%el%tamao%de%la%fuente%establece%el%
alto%de%la%lnea%
Medida,%es%la%altura%de%la%lnea%como%un%valor%jo%en%px,%pt%
El%porcentaje%del%alto%de%la%lnea%en%funcin%del%tamao%de%la%
fuente%
hBp://www.w3schools.com/cssref/playit.asp?
lename=playcss_lineEheight&preval=25px%
%
%
%
%
%
%
%

@font%CSS%
Formatos,@font^face
%
%%%
%%%
%% String%
% "wo"%
% "truetype"%
% "opentype"%

Font,Format%

Common,extensions%

WOFF%(Web%Open%
Font%Format)%

.wo%

TrueType%
OpenType%

.%
.,%.o%

opentype"%

Embedded%OpenType%

.eot%

"svg"%

SVG%Font%

.svg,%.svgz%

% "embedded^

@font%CSS%
CompaGbilidad,%Depende%del%navegador%y%del%sistema%operaLvo,%
%%%
La%mayora%de%navegadores%y%SO.%
%%
%%
WOFF%%Web%Open%Font%Format%
El%Web%Open%Font%Format%(WOFF)%es%un%formato%de%Lpo%de%letra%
para%usarse%en%pginas%web.%Fue%desarrollado%por%la%Fundacin%
Mozilla,%Opera%Soware%y%Microso,%y%est%en%el%proceso%de%
normalizacin%por%el%W3C%y%converLrse%en%un%estndar.%%
%
EOT%Embedded%OpenType%
Embedded%OpenType%(%EOT%)%estas%fuentes%son%una%forma%
compacta%de%OpenType%para%su%uso%como%fuentes%incrustadas%en%
las%pginas%web%y%a%su%vez%protegen%los%derechos%de%autor.%%
hBp://caniuse.com/fonace%

@font%CSS%
SVG%Scalable%Vector%Graphics%%
%%%
SVG%es%una%especicacin%para%describir%grcos%vectoriales%
%%
%
bidimensionales,%estLco%o%animado%y%fue%creado%como%alternaLva%
de%formato%abierto%a%Flash.%se%emplea%como%formato%Lpogrco%en%
la%web%para%disposiLvos%iOS%(iPad,%iPhone%y%iPod)%
%
TrueType,,
TrueType%es%un%formato%estndar%de%Lpos%de%letra%escalables%
desarrollado%inicialmente%por%Apple%a%nales%de%la%dcada%de%los%
ochenta.%Es%compaLble%con%Firefox%3.5+%,%Safari%3.1+,%Chrome%4+%y%
Opera%10+.%
%
%ConverLr%fuentes%
%hBp://www.fontsquirrel.com/tools/webfontEgenerator%
%
%

@font%CSS%
@font^face,^,Permite%vincular%fuentes%sin%necesidad%de%que%el%cliente%las%tenga%instaladas%
%%%
en%su%ordenador.%%
%%
fontEfamily%%
%
Valor:%<familyEname>%%
Src,,
[%<uri>%[format(<string>%[,%<string>]*)]%|%<fontEfaceEname>%]%[,%<uri>%[format(<string>%[,%
<string>]*)]%|%<fontEfaceEname>%]*%%
%
@font-face {
font-family: FiraMono;
src: url(FiraMono-Regular.woff) format("woff"),
url(FiraMono-Regular.eot) format("embedded-opentype");
}
p {
font-family: FiraMono, serif;
}

hBp://www.w3.org/TR/css3Efonts/#fontEfaceErule%
hBps://www.mozilla.org/enEUS/styleguide/products/refoxEos/typeface/%

Tipograda%Firefox%OS%
Fira,Sans,para,Firefox,OS,
Firefox%OS%uLliza%Fira%Sans,%una%fuente%Lpogrca%especca%en%diferentes%cuerpos%y%
%%%
pesos.%Diseada%por%Erik%Spiekermann%y%Ralph%de%Carois%para%Firefox%OS.%%
%%
%%

Descargar%la%fuente%y%conocer%las%recomendaciones%de%uso%en:%
hBp://www.mozilla.org/enEUS/styleguide/products/refoxEos/typeface/%
%

@font%CSS%
@font^face,embedding,
%%%
Es%posible%el%uso%de%fuentes%alojadas%en%servidores%externo%
%%
%%
Google,Fonts,
En%la%cabecera%%
<link href='http://fonts.googleapis.com/
css?family=Caesar+Dressing' rel='stylesheet' type='text/
css'>

En%el%esLlo%
%
p {

font-family: 'Caesar Dressing', cursive;

}

%
%hBp://webfonts.info/fontsEavailableEfontEfaceEembedding%
%

Recursos%CSS%
%%%%W3C:,CSS%Fonts%Module%Level%3%
%%%hBp://www.w3.org/TR/2013/CREcssEfontsE3E20131003/%
%% %
w3schools:,CSS%Font%
% hBp://www.w3schools.com/css/css_font.asp%
%,
% FONT,SQUIREL,

% hBp://www.fontsquirrel.com/fonace/generator%
%
Google,FONT,
hBp://www.google.com/webfonts%
%
Typekit,
hBps://typekit.com/%
%
Red,Team,Design:,Google%Font%API%and%Typekit%soluLons%VS%@fontEface%
hBp://www.redEteamEdesign.com/googleEfontEapiEandEtypekitEsoluLonsEvsEfontEface%
%
%
%
%

CSS%
Estructura%

Imgenes%HTML%
Las%imgenes%se%vinculan%en%una%pgina%HTML%con%la%eLqueta%<img>%con%los%
%%%
atributos%
%%
src%=%URL%%%
%
alt%=%texto%alternaLvo%de%la%imagen%
width%=%ancho%
height,=%alto%
%
%
%

%
%

Estructura%CSS%
<div>,y%<span>,son%elementos%de%bloque%y%linea%respecLvamente.%
%%%
Se%emplean%para%formatear%su%contenido%y%sus%cajas%con%CSS.%
%%
%%
<div>,y%<span>%incluyen%el%idenLcador%ID%o%clases%CLASS,%para%
diferenciarlos%entre%si%y%poder%manipular%su%aspecto%individual.%
%
ID,
Cada%elemento%puede%tener%un%solo%ID%
Cada%pgina%puede%tener%un%solo%elemento%con%la%ID%
CLASS,
Puede%uLlizar%la%misma%clase%en%varios%elementos.%
Puede%uLlizar%varias%clases%en%el%mismo%elemento.%
%
<div>,y%<span>,pueden%tener%tanto%un%ID,%como%varios%CLASS,
%
%

Estructura%CSS%
la%eLqueta%<div>%ofrece%a%los%diseadores%la%exibilidad%y%el%control%
%%%
sobre%la%posicin%cuando%se%combina%con%las%propiedades%CSS.%
%%
%%
Una%eLqueta%div%puede%tener,%instrucciones%de%formato%(de%la%
familia%de%fuente,%color,%bordes,%etc),%atributos%de%altura%y%anchura,%
posicionamiento%
%
Tamao,
Hay%que%tener%cuidado%al%emplear%el%tamao,%el%contenido%segn%el%
navegador%puede%desbordar%el%tamao%de%un%div.%Evitar%denir%
altos%si%no%son%necesarios.%
%

div{
width: 400px;
}

Estructura%CSS%
la%propiedad%display,%permite%establecer%el%Lpo%de%caja%de%un%
%%%
elemento.%Los%valores%ms%uLlizados%son:%inline,%block%y%none.%%
%%%%
%
%
%
%
%
%
%
%
%
%
%

Estructura%CSS%
Padding,%margin%y%border,
%%%
%%%
%%
%
%
%
%
%
%
%
%
%

Estructura%CSS%
Background,
%%%
%%%
%%
%
%
%
%
%
%
%
%
%

f03.png,

f02.png,

f01.png,

div {
background: url(texto/f01.png) left bottom
repeat-x,
url(texto/f02.png) left bottom no-repeat,
url(texto/f03.png) left top repeat-x;
background-color: #a4d3ff;
}

Estructura%CSS%
CSS3%permite%aadir%sombras%y%bordes,redondeados,
%%%
%%%
%%
%
%
%
%
%
%
%
%
%
%

hBp://dev.w3.org/csswg/cssEbackgrounds/%

Estructura%CSS%
CSS3%permite%posicionar%los%div%en%la%pgina,%oat%y%clear,
%%%
Con%oat%el%div%ota%a%una%posicin%relaLva.%
%%
%%
%
%
%
%
%
%
%
%
%
%
%
%
%

Estructura%CSS%
CSS3%permite%posicionar%los%div%en%la%
pgina,%oat%y%clear,
,
Con%clear%%rompe%el%esquema%%del%oat.%
%

Estructura%CSS%
%%%
%%
%

CSS3%permite%posicionar%los%div%en%la%pgina,%
mediante%posiLon,%absoluta,%relaLva%o%ja.%
%
Con%posicin%absoluta%el%div%sale%del%ujo%del%
contenido.%

Estructura%CSS%
Con%posicin%ja%el%div%no%cambia%de%posicin%en%
el%escalado%del%navegador%o%el%scroll%en%la%pgina.%
%
%
%
%
%
%
%
%
%
%
%
%
%
%

Recursos%CSS%
CSS3,Generator,
%%%
hBp://css3generator.com/%
%%
%%
CSS3,Gradient,Generator,
hBp://gradients.glrzad.com/%
%
{CSS},Portal,^,on,line,generator,
hBp://www.cssportal.com/css3EroundedEcorner/%
%
CSS3,MAKER:,%
hBp://www.css3maker.com%
%
CSS3.com,
hBp://www.css3.com/%
%
%

Diseo adaptado a PC, Mvil y

Tableta

Juan Quemada, DIT, UPM

Sunday, February 23, 14

Diseo Web adaptable

El diseo adaptable (responsive) busca uniformizar el acceso
! desde cualquier dispositivo, ya sea PC, mvil, tableta, smartTV, ....
" optimizando la experiencia de usuario en cada uno de ellos
El diseo adaptable utiliza una nica definicin HTML de interfaz o pgina
! que se adapta al dispositivo con diferentes ficheros CSS
Utilizamos el atributo media de <link .. media="screen" src="screen.css">
! para seleccionar el fichero CSS especfico de cada dispositivo
Algunas referencias
! Tutorial:
http://www.alistapart.com/articles/responsive-web-design/
! Ejemplos: http://css-tricks.com/resolution-specific-stylesheets/

Juan Quemada, DIT, UPM

Sunday, February 23, 14

El atributo media de <link ..>

El atributo media de la marca <link> de CSS3 detecta el dispositivo utilizado
!

http://www.w3schools.com/tags/att_link_media.asp

El atributo media condiciona la carga del fichero de estilos al dispositivo utilizado

!

Smartphone con pantalla menor de 480 px

" media="only screen and (max-device-width: 480)"

Pantalla ancha con el navegador en una ventana de anchura mayor a 600 px

" media= "only screen and (max-width: 600) and (min-device-width: 481)"

Hay otras formas de adaptacin

!

Antes se consultaba con Javascript. screen.availHeight, screen.availWidth

CSS3 tambin permite incluir media-queries en los comandos CSS

Juan Quemada, DIT, UPM

Sunday, February 23, 14

index.html

Diseo
Adaptativo
Juan Quemada, DIT, UPM
Sunday, February 23, 14

Style.css

Juan Quemada, DIT, UPM

Sunday, February 23, 14

style.css
+
wide.css
Juan Quemada, DIT, UPM
Sunday, February 23, 14

Style.css + Smartphone.css

Juan Quemada, DIT, UPM

Sunday, February 23, 14

Final del tema

Muchas gracias!

Juan Quemada, DIT, UPM

Sunday, February 23, 14

Resumen HTML y CSS

Juan Quemada, DIT, UPM

Sunday, February 23, 14

HTML - HTML5 Quick Guide

http://media.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
Page 1 of 4

Quick Reference Guide

FREE

HTML 5
Tag

Info

Attributes*

<!-- -->

comment

4/5

none

<!DOCTYPE>

document type

4/5

none

<a>

hyperlink

4/5

href | hreflang | media |

ping | rel | target | type

<abbr>

abbreviation

4/5

global attributes**

<acronym>

acronym

<address>

address element

<applet>

applet

<area>

area inside an
image map

4
4/5

global attributes**

Tag

Info
external interactive content
or plugin

<embed>

Attributes*

height | src | type |

width

<ol>

ordered list

4/5

start | reversed

<optgroup>

option group

4/5

disabled | label

disabled | form | name

<option>

option in a
drop-down list

4/5

disabled | label |
selected | value

<output>

some types of
output

<p>

paragraph

4/5

global attributes**

<param>

parameter for
an object

4/5

name | value

<pre>

preformatted
text

4/5

global attributes**

<progress>

progress of a
task of any kind

<q>

short quotation

4/5

<ruby>

ruby annotations

global attributes**

<rp>

provide parentheses around a

ruby text

global attributes**

<rt>

ruby text
component

global attributes**

<fieldset>

fieldset

<figure>

group of media
content, and
their caption

<font>

text font, size,

and color

<footer>

footer for a
section or page

form

4/5

alt | coords | href |

hreflang | media | ping |
rel | shape | target |
type

<form>

4/5

4/5

global attributes**

Tag

global attributes**
action | data | replace |
accept | accept-charset
| enctype | method |
target

Info

Attributes*

form

max | value
cite

<article>

article

global attributes**

<frame>

sub window

<aside>

outside the
main flow of
the narrative

global attributes**

<frameset>

set of frames

<h1> to <h6>

4/5

<audio>

sound content

header 1 to
header 6

<head>

bold text

4/5

global attributes**

information
about the
document

4/5

<b>
<base>

base URL for all

the page links

4/5

href | target

<header>

header for a
section or page

global attributes**

<s>

strikethrough
text

<basefont>

Base font for

the document

<hgroup>

heading section

global attributes**

<samp>

4/5

global attributes**

<bb>

invoked user
agent command

<hr>

horizontal rule

4/5

global attributes**

sample computer code

<html>

html document

4/5

manifest

<script>

script

4/5

async | type | defer |

src | charset

<i>

italic text

4/5

global attributes**

<section>

section

<iframe>

inline sub
window (frame)

4/5

src | name | sandbox |

seamless | width |
height

<select>

selectable list

<small>

small text

<source>

media resources

<bdo>

direction of text
display

<big>

big text

<blockquote>

long quotation

<body>

body element

Sunday, February 23, 14

<br>

inserts a single
line break

4/5

autobuffer | autoplay |
controls | loop | src

type

dir

4/5

cite

4/5

global attributes**

4/5

global attributes**

<img>
<input>

global attributes**
none

Juan Quemada, DIT, UPM

image

4/5

alt | src | height |

ismap | usemap | width

input field

4/5

accept | alt | autocomplete | autofocus |

5
4/5

104 / 5
5

cite
autofocus | data |
disabled | form |
multiple | name
global attributes**
media | src | type

<blockquote>

long quotation

4/5

cite

<body>

body element

4/5

global attributes**

<img>

<br>

inserts a single
line break

4/5

global attributes**

<button>

push button

4/5

autofocus | disabled |
form | formaction |
formenctype | formmethod | formnovalidate |
formtarget | name |
type | value

<canvas>

Graphic area

<caption>

table caption

4/5

<cite>

citation

4/5

global attributes**

<code>

computer code
text

4/5

global attributes**

<col>

attributes for
table columns

4/5

span

<colgroup>

groups of table
columns

4/5

span

<command>

command
button

<ins>

inserted text

<isindex>

single-line input
field

4/5

accept | alt | autocomplete | autofocus |

checked | disabled |
form | formaction |
formenctype | formmethod | formnovalidate |
formtarget | height |
list | max | maxlength |
min | multiple | name |
pattern | placeholder |
readonly | required |
size | src | step | type |
value | width

<small>

small text

4/5

global attributes**

<source>

media resources

media | src | type

<span>

inline section

4/5

global attributes**

<strike>

strikethrough
text

<strong>

strong text

4/5

global attributes**

<style>

style definition

4/5

media | type | scoped

<sub>

subscripted text

4/5

global attributes**

<sup>

superscripted
text

4/5

global attributes**

<table>

table

4/5

summary

<tbody>

table body

4/5

global attributes**

cite | datetime

keyboard text

4/5

global attributes**

<td>

table cell

4/5

colspan | rowspan |
headers

<label>

label for a form

control

4/5

for

<textarea>

text area

4/5

<legend>

fieldset title

4/5

global attributes**

autofocus | cols |
disabled | form | name
| readonly | required |
rows | maxlength |

checked | default |
disabled | hidden | icon
| label | radiogroup |
type

<li>

list item

4/5

value

<link>

resource
reference

4/5

href | rel | media |

hreflang | type | sizes

<tfoot>

table footer

4/5

global attributes**

<th>

table header

4/5

marked text

colspan | rowspan |
scope

disabled

<mark>

<thead>

table header

4/5

global attributes**

<map>

image map

4/5

id

<time>

date/time

datetime | pubdate

<menu>

menu list

4/5

label | type

<title>

document title

4/5

<tr>

table row

4/5

<tt>

teletype text

<u>

underlined text

<ul>

unordered list

4/5

global attributes**

<var>

variable

4/5

global attributes**

<video>

video

src | poster | autobuffer

| autoplay | loop |
controls | width | height

<xmp>

preformatted
text

<datalist>

dropdown list

global attributes**

<dd>

definition
description

4/5

global attributes**

<del>

deleted text

4/5

<details>

details of an
element

open

dialog
(conversation)

<dir>

directory list

<div>

section in a
document

4/5

global attributes**

<dfn>

definition term

4/5

title

<dl>

definition list

4/5

global attributes**

<dt>

definition term

4/5

global attributes**

<em>

emphasized
text

4/5

global attributes**

global attributes**
-

global attributes**

<meta>

meta information

4/5

charset | content | httpequiv | name

<meter>

measurement
within a predefined range

high | low | max | min |

optimum | value

<nav>

navigation links

<noframes>

noframe section

<noscript>

noscript section

4/5

none

<object>

embedded
object

4/5

data | height | type |

usemap | width | object

cite | datetime

<dialog>

Sunday, February 23, 14

4/5

alt | src | height |

ismap | usemap | width

<kbd>

data in a tree,
list or tabular

http://www.veign.com

input field

height | width

centered text

<datagrid>

<input>

4/5

global attributes**

<center>

image

global attributes**

* Attributes: Lists attributes specific to that tag. Deprecated (html4

only) attributes are not listed
** Global Attributes: class | contenteditable | contextmenu | dir |
draggable | id | irrelevant | lang | ref | registrationmark | tabindex |
template | title

Part Number: QRG0009

Juan Quemada, DIT, UPM

none
global attributes**

V = Which version of HTML is this tag valid for

2009 Veign, All Rights Reserved

11

Algunos selectores CSS

SELECTORES DE MARCAS
h1, h2, p {color: blue;} /* aplica estilos a todas las marcas h1, h2 y p */
h1 h2 {color: blue;}
/* aplica estilos a todas las marcas h2 despus de h1 en el rbol */
h1 > h2 {color: blue;} /* aplica estilos a todas las marcas h2 justo despus de h1 en el arbol */
h1 + p {color: blue;}
/* selecciona marca p adyacente a h1 del mismo nivel del rbol */
SELECTORES DE MARCAS CON ATRIBUTOS
h1[border] {color: blue;}
/* aplica estilos a todas las marcas h1 con atributo border */
h1[border=yes] {color: blue;} /* aplica estilos a todas las marcas h1 con atributo border=yes */

SELECTORES DE MARCAS CON ATRIBUTO CLASS

h1.princ {color: blue;} /* aplica estilos a todas las marcas h1 con class=princ */
.princ {color: blue;}
/* aplica estilos a todas las marcas con class=princ */
SELECTORES DE MARCAS CON ATRIBUTO ID
h1#d83 {color: blue;} /* aplica estilos a todas las marcas h1 con id=d83 */
#d83 {color: blue;}
/* aplica estilos a todas las marcas con id=d83 */

Juan Quemada, DIT, UPM

Sunday, February 23, 14

12

Ms selectores CSS
SELECTORES DE HIPERENLACES
a:link {color: blue;}
/* aplica estilos a todas las marcas a antes de visitar enlace */
a:visited {color: blue;} /* aplica estilos a todas las marcas a despues de visitar enlace */
a:hover {color: blue;} /* aplica estilos a todas las marcas a al pasar ratn por el enlace */
a:active {color: blue;} /* aplica estilos a todas las marcas a al hacer click en el enlace */

SELECTORES DE HIJOS
h1.princ:first-child {color: blue;}
/* aplica estilos al primer hijo de todas las marcas h1 con class=princ */

SELECTORES DE LUGAR PARA INSERTAR CONTENIDO

q.princ:before {content: open-quote;} /* introduce content antes de q con clase princ */
q.princ:after {content: close-quote;}
/* introduce content despues de q con clase princ */

Juan Quemada, DIT, UPM

Sunday, February 23, 14

13

margin-area
padding-area

Comados de estilo

Esto es un parrafo de 2 lneas de

content-area
texto
border

inner edge

Ejemplos de comandos de estilo: propiedad: valor

background-color: #CCC

/* color de fondo en RGB (#AB3), nombre (red, ..) */

font-size: 8pt
/* tamao de letra 8pt, 12pt, .., smaler, larger, .. */
font-style: italic;
/* estlo de letra normal, italic, .. */
font-family: Arial: /* estilo de letra Arial, Times, */
font-weigth: bold: /* peso de letra normal, bold, bolder, lighter, */
border-collapse: separate;
border-spacing: 5px 5px;
text-align: center;

/* tipo de borde de tabla: collapse separate, inherit */

/* separacin de borde de tabla */
/* alineacin de texto: left, right, center, ... */

height: 200pt:
width: 1mm;
margin: 1cm;
padding: 10px;

/* altura de caja */
/* anchura de caja */
/* anchura de margen */
/* anchura de padding */

float: right;
clear: both;
position: relative;

/* display flotante: left, right, none, .. */

/* elimina flotacin: left, right, both, none, .. */
/* define como posicionar caja: static, relative, absolute, .. */

display: none;
content: text;

/* tipo de caja generada: inline, block, table, none, .. */

/* inserta text: se utiliza con selector :before o :after */

Juan Quemada, DIT, UPM

Sunday, February 23, 14

14

outer edge

Final del tema

Muchas gracias!

Juan Quemada, DIT, UPM

Sunday, February 23, 14

15