HTML y CSS

HTML & CSS
HTML&CSS
(Versin1.5)
JosMaraMoralesVzquez
josemaria@morales-vazquez.com
Jos Mara Morales Vzquez
Pgina 1
HTML & CSS
CONTENIDO
1.INTRODUCCIN...............................................................................................................6
Historiadeloslenguajesdemarcas.............................................................................6
Algunoslenguajesdemarcas.......................................................................................7
Componentesdeunlenguajedemarcas..................................................................8
DiferenciasentreHTMLyXHTML....................................................................................9
Editoresdetextoenriquecido.....................................................................................10
Navegadores.................................................................................................................11
HTML4vsHTML5..............................................................................................................11
2.HTMLBSICO..................................................................................................................14
2.1.ESQUELETOBSICO....................................................................................................14
ElDOCTYPE.....................................................................................................................14
LoselementosBsicos..................................................................................................14
2.2.ELEMENTOSDEBLOQUEYELEMENTOSDELNEA.....................................................15
2.3.LASETIQUETASMSCOMUNES.................................................................................16
Listas................................................................................................................................17
Lasimgenes.................................................................................................................18
Loshiperenlaces............................................................................................................18
Comentarios...................................................................................................................20
Direccindeltexto........................................................................................................20
Acrnimosyabreviaturas.............................................................................................21
Caracteresespeciales..................................................................................................21
2.4.TABLAS..........................................................................................................................21
2.5.ALGUNASETIQUETASYATRIBUTOSDESACONSEJADOSMS................................24
3.CSS.SELECTORESBSICOS............................................................................................25
3.1.INTEGRACINDEHTMLCONCSS.............................................................................25
ComentariosenhojasdeestiloCSS...........................................................................26
3.2.SELECTORESBSICOS.................................................................................................26
Selectoresdetipoodeetiqueta................................................................................26
Selectoruniversal...........................................................................................................27
Coloresypropiedadesbsicasdeltexto..................................................................27
Selectoresdescendientes............................................................................................30
Selectoresdeclase.......................................................................................................31
SelectoresdeID.............................................................................................................32
3.3.COMBINANDOSELECTORES......................................................................................32
4.UNIDADESDEMEDIDAYOTRASPROPIEDADES..........................................................34
Unidadesdemedida....................................................................................................34
Unidadesdemedidaespecficasdelastipografas................................................34
Unidadesabsolutas.......................................................................................................34
Unidadesrelativas.........................................................................................................35
Porcentajes....................................................................................................................36
4.1.MSPROPIEDADESPARAELTEXTO..........................................................................36
4.2.APLICARESTILOSALASLISTAS...................................................................................38
4.3.DOSNUEVASETIQUETASHTML:divyspan...............................................................39
4.4.HERENCIA.....................................................................................................................40
Pgina 2
HTML & CSS

4.5.ESPECIFICIDAD............................................................................................................41
Laclausula!important..................................................................................................43
5.ELMODELODECAJAS..................................................................................................44
5.1.ELCONCEPTODECAJA............................................................................................44
diveslacajamsversatil.............................................................................................45
5.2.PROPIEDADESDELACAJA........................................................................................45
Lasdimensionesdelcontenido...................................................................................45
Mrgenesinterioryexterior..........................................................................................45
Elbordedelacaja........................................................................................................46
Imgenesdefondoenlascajasysuspropiedades................................................48
Cajasyjerarquadeelementos..................................................................................49
5.3.POSICIONANDOLASCAJAS(YOTROSELEMENTOS)..............................................49
Laspropiedadesfloatyclear......................................................................................50
Introduciendolaterceradimensineneldocumento...........................................52
Visibilidad,desbordamientosyrecortes....................................................................53
5.4.OTRASPROPIEDADES..................................................................................................54
Cambiarelaspectodelpunterodelratn...............................................................54
Alterandosiunelementoesdebloqueodelnea..................................................55
Modificandoelaspectodelosbordesdelasceldasdeunatabla......................55
6.SELECTORESAVANZADOS.............................................................................................56
Selectordehijos.............................................................................................................56
Selectordehermanosadyacentes(oadyacente,sinms)..................................56
Selectordeatributos.....................................................................................................57
6.1.PSEUDOCLASESYPSEUDOELEMENTOS...................................................................58
Pseudoclases................................................................................................................58
Pseudoelementos.........................................................................................................59
7.ALGUNOSDISEOSYEFECTOSTILES.........................................................................61
7.1.DISEOSDEANCHOFIJO,LQUIDOS(OFLUIDOS)YELSTICOS...........................61
Ejemplo1Cajas..........................................................................................................61
Ejemplo2Trescolumnas............................................................................................65
Ejemplo3Diseodealtoyanchofijo.....................................................................66
Ejemplos4y5Diseosdeancholquido................................................................67
Ejemplo6Diseofijo,fluido,fijo................................................................................67
Ejemplo7Separadoresentrecolumnastransparentes........................................68
Ejemplo8Sombrasydiagonales..............................................................................68
7.2.DISEODETABLAS......................................................................................................69
7.3OTROSTRUCOS.............................................................................................................70
Ejemplos10y11Transpariencias..............................................................................70
Ejemplo12BoxPunch................................................................................................72
Ejemplos13y14Tooltips............................................................................................73
Ejemplos15y16Mens.............................................................................................75
Ejemplo17Esquinasredondeadas..........................................................................77
Ejemplo18Sprites.......................................................................................................77
Ejemplo19Solapas.....................................................................................................78
Ejemplos20y21Contorneos....................................................................................79
Pgina 3
HTML & CSS

8.FORMULARIOSYJAVASCRIPT.......................................................................................81
8.1.FUNCIONESYEMPLAZAMIENTODELCDIGOJAVASCRIPT..................................81
8.1.1Funciones...............................................................................................................81
8.2.FORMULARIOS.............................................................................................................83
8.2.1.Cajadeedicindetexto(type=text)...........................................................84
8.2.2Cajadeedicindecontraseas(type=password).....................................85
8.2.3.Etiquetas(label)...................................................................................................85
8.2.4RadioButtons(type=radio).............................................................................85
8.2.5Checkboxes(type=checkbox).......................................................................86
8.2.6.Agrupacindeobjetos......................................................................................86
8.2.7Cajadeedicindetextodemltipleslneas..................................................87
8.2.8Cajadeseleccindeficheros...........................................................................87
8.2.9Cajasdeseleccin(ComboboxesyListboxes)...............................................87
8.2.10Botones................................................................................................................88
8.2.11.NuevoselementosenHTML5...........................................................................89
8.3.CSSENLOSELEMENTOSDELOSFORMULARIOS......................................................89
8.4.VALIDACINDEFORMULARIOSMEDIANTEJAVASCRIPT.......................................91
8.4.1.Mtodos,eventosypropiedades.....................................................................91
8.4.2.Eventosdelelementoform................................................................................91
8.4.3.Eventosdelosbotones.......................................................................................91
8.4.4.DOM,Modelodeobjetosdeldocumento......................................................92
8.4.5.Validacindelformulario...................................................................................93
8.4.6.ListadeeventosdeJavascriptdisponiblesenlosformularios......................95
8.5.JAVASCRIPTFUERADELOSFORMULARIOS..............................................................97
8.5.1.Alertyotrasventanasdeconfirmacinoentradadedatos.......................97
8.5.2.ListadeeventosdeJavascriptdisponiblesdeformagenrica...................98
8.5.3.Losobjetosdocumentywindow......................................................................99
9.HTML5............................................................................................................................100
9.1.ESTRUCTURADEUNDOCUMENTOHTML5OXHTML5............................................100
9.2.CAMBIOSENLASETIQUETAS....................................................................................101
Etiquetaseliminadas...................................................................................................101
Nuevasetiquetasparalaorganizacindeldocumento......................................101
SolventandolosproblemasdeversionesantiguasdeInternetExplorer.............101
9.3.MEJORASENLOSFORMULARIOS:NUEVOSTIPOSDEINPUT.................................102
9.4.MODERNIZR................................................................................................................104
9.5.ETIQUETASMULTIMEDIA............................................................................................107
Audio.............................................................................................................................107
Formatosdeaudio......................................................................................................108
Vdeo.............................................................................................................................108
Formatosdevdeo......................................................................................................109
ArchivosdeFlash.........................................................................................................109
9.6.DIBUJOMEDIANTELAETIQUETACANVAS..............................................................109
9.7.GEOLOCALIZACIN.................................................................................................113
9.8.MSCOSAS...............................................................................................................114
10.CSS3.............................................................................................................................116
Pgina 4
HTML & CSS

10.1.LOSNUEVOSSELECTORESDECSS3.......................................................................116
Pseudoelementos.......................................................................................................116
Pseudoclases..............................................................................................................116
Nuevosselectoresparausoconformularios...........................................................117
Elselector:not()...........................................................................................................117
Nuevosselectoresdeatributos.................................................................................118
Selectorgeneraldeelementoshermanos..............................................................119
9.2.LASNUEVASPROPIEDADESDECSS3.......................................................................119
Gradientesyunanuevapaletadecolores............................................................119
Fondosmltiples..........................................................................................................120
Esquinasredondeadasybordesdecoradas..........................................................121
Sombras........................................................................................................................122
Opacidad.....................................................................................................................123
Mscontroldelatipografa......................................................................................123
Columnasmsfciles.................................................................................................124
Transformacionesytrancisiones................................................................................125
11.ENLACES,BIBLIOGRAFAYREFERENCIAS..................................................................128
Pgina 5
HTML & CSS
1.INTRODUCCIN
Unlenguajedemarcasesunaformadecodificarundocumentoque,juntocon
el texto, incorpora etiquetas (o marcas) que contienen informacin adicional
acercadelaestructuradeltextoosupresentacin.Talvezlaformamsprimitiva
quehemosusadodelenguajedemarcasfueraundictadoenelquelapersona
quedictanosvadandonotasacercadeloquetenemosqueponerennegritas,
cursivas,etc.Enelmundodelosordenadoresllevamosmuchotiempousando
lenguajesdemarcas.Wordstar,unodelosprimerosprocesadoresdetextoque
existieronparaelmundodelosPCoLatex,elprogramadeautoedicinfavorito
paraedicinprofesionaldetextos,sondosejemplosdeello:
Wordstar
Lalluviaen^BSevilla^Sesuna^Ymaravilla^S.
LATEX
Lalluviaen\textbf{Sevilla}esuna\textit{maravilla}.
Resultado:
LalluviaenSevillaesunamaravilla.
Escomnenmuchosmbitosconfundirunlenguajedemarcasconunlenguaje
deprogramacin.Perono:setratadecosasdiferentes.Hay,fundamentalmente,
trescarenciasdeloslenguajesdemarcasquelosdistinguen:
Notienenfuncionesaritmticas
Notienenvariables
Notienenestructurasdecontrol
Lascaractersticasprincipalesdeunlenguajedemarcasonlassiguientes:
Seusansiempresobretextoplano.
Lasmarcasseentremezclanconelcontenidodeldocumentoaunque,en
general,esfcildistinguirunasdelotro.
Suprocesamientoesmuysencillo.
Sonmuyflexibles.
Historiadeloslenguajesdemarcas
Laprimerareferenciaquesetienedeunlenguajedemarcascomotalestan
alejadodelainformtica.Setratadelaprcticadelosempleadosdeimprenta
deanotarmarcasconinstruccionesenlosmrgenesdelaspruebasdeimpresin:
Pgina 6
HTML & CSS
En el mundo de la informtica el padre de los lenguajes de marcas ms

importantes de la actualidad surge en los aos 80. Se llama SGML (Standard
GeneralizedMarkupLanguage)ydefineunasreglasbsicasparaeletiquetado
dedocumentosmediantemarcas.SGMLnoesenrealidadunlenguajesinoun
metalenguaje, es decir, un lenguaje creado con la finalidad de definir otros
lenguajes a partir de l. RTF (Rich Text Format), HTML (HyperText Markup
Language)oXML(ExtensibleMarkupLanguage)derivandeSGML.
Algunoslenguajesdemarcas
HTMLes,sinduda,ellenguajedemarcasmsusadoylabasedelaspginas
web.Suprimeraversin,quedatadelosaos90,describaslo22elementos
diferentes.Laversinactualesla4.01aunquelaversin5estenunafasemuy
avanzadayseempiezaautilizarcadavezmsapesardequesetratadeuna
normaquenoestanaprobadadeformadefinitiva.
XML deriva de SGML y se trata tambin de otro metalenguaje. Parte de un
subconjunto de SGML y aade algunas restricciones nuevas de forma que los
lenguajesderivadosapartirdeXMLresultenmssencillosyfcilesdeinterpretar
quelosderivadosdirectamentedeSGML.
XHTML(ExtensibleHTML)esequivalenteaHTMLperoderivadeXML.Laversin
actualesla1.1ylaversin2.0estenborrador.LasdiferenciasentreHTML4y
XHTML1sonnmias.
CSS(CascadingStyleSheets)esunlenguajeusadoparadefinirlapresentacinde
un documento en HTML o XHTML. No se trata en realidad de un lenguaje de
marcas,peroseencuentraindisolublementeunidoaestosdos.Laversinactual
esla2ylaversin3seencuentraenfasedeborrador.Aligualqueocurrecon
HTML5,CSS3seusacadavezmsapesardenotratarsedeunanormadefinitiva.
XSL (Extensible Stylesheet Language) describre la forma en que debera de
mostrarselainformacincontenidaenundocumentoconformatoXML.
Pgina 7
HTML & CSS

SGMLestdefinidocomounanormaISOmientrasqueelrestodeloslenguajes
mencionadosestndefinidosporlaW3C(WorlWideWebConsortium).
Componentesdeunlenguajedemarcas
Veamos un primer ejemplo muy simple de HTML y analicemos los diferentes
componentesquepuedenaparecerenunlenguajedemarcasyalgunasdelas
caractersticasparticularesdeHTML:
<html>
<head>
<title>.:: PAGINA DE PRUEBAS ::.</title>
</head>
<body bgcolor="black" text="white">
<center><h1>TITULAR</h1></center>
Prueba de <strong>texto normal</strong><br />
Segunda linea
-Tambien en la segunda linea
</body>
</html>
Se trata de un ejemplo reducido al mnimo y que, incluso, presenta algunos
defectosoincorrecciones,peronosvalecomoprimercontacto.Veamoscomo
severaenunnavegador:
Pgina 8
HTML & CSS

Elementos: Constan deuna etiquetade inicio, una defin y todo lo que
haya enmedio. Los elementos constan, a su vez, de tres elementos:
etiquetas,atributosycontenido.Unejemplodeelementoseraeste:
<strong>texto normal</strong>
Etiquetasotags: Sonlasmarcaspropiamentedichasyhabitualmentevan
entrecorchetesquebrados<>Lashaydeinicioydefinaunque,enalgunos
casos, ambas pueden coincidir en una sla partcula con una sintaxis
especialcuandoelelementonotienecontenido:
<title> ... </title>
<br/>
Contenido:Eseltextobaseinformativodeldocumento.Porejemplo,enel
anteriorelementoconlasetiquetasstrongelcontenidoseraeltextoque
luegoaparecerennegritas.
Atributos: Es una pareja compuesta por un nombre y un valor que se
encuentra dentro de una etiqueta de inicio e identifica las propiedades
asociadasalelemento.
bgcolor="black"
Enrealidad,enHTMLconvencionalesposibleencontraratributossinvalor,
peroenXHTML,quesernuestropreferido,estonoesvlidocomoveremos
acontinuacin.
DiferenciasentreHTMLyXHTML
Comohemosdichohaceunmomento,XHTMLintroduceciertasrestriccionesa
HTMLparahacerqueellenguajeresultanteseamssencilloyfcildeinterpretar.
Estasdiferenciassonlassiguientes:
Los elementos deben de cerrarse siempre. En HTML normal es
perfectamente vlido, por ejemplo, empezar un prrafo con la etiqueta
<p>y,sinponerlamarcadefindeprrafo</p>comenzarunsegundo
prrafodenuevocon<p>.Puestoquenopodemosanidardosprrafos
uno dentro de otro el intrprete debe de reconocer que al empezar el
segundoprrafodeberaantesdeterminarelprimero.EnXHTMLhayque
cerrarelprimeroexplicitamenteoencasocontrariotendremosunerrorde
validacin:
HTML: <p>Primer prrafo <p>Segundo prrafo
XHTML: <p>Primer prrafo</p><p>Segundo prrafo</p>
Los elementos sin contenido deben de cerrarse siempre usando una
etiquetaespecialquerealizaelautocierreenlamismaetiquetadeinicio:
HTML: <br>
Pgina 9
HTML & CSS

XHTML: <br/>
Loselementosanidadosnodebensolaparse.EnHTMLestpermitidopero
enXHTMLesincorrecto:
HTML: <em><strong>Texto</em></strong>
XHTML: <em><strong>Texto</strong></em>
Los valores de los atributos deben de ir siempre entre comillas simples o
dobles:
HTML: <body bgcolor=black text=white>
XHTML: <body bgcolor="black" text='white'>
Losnombresdeetiquetasyatributosdebendeirsiempreenminsculas
HTML: <body BGCOLOT=black text=WHITE>
XHTML: <body bgcolor="black" text="white">
Noestpermitidousarunatributosinvalor(minimizacindeatributos)
HTML: <textarea readonly>
XHTML: <textarea readonly="readonly">
Losatributosyetiquetasdesaprobadosodesaconsejados(deprecated)en
HTML4nosonvlidosenXHTML.Losveremosmsadelante.
Unaaclaracinentodoesto:unficheroquevalidacorrectamentecomoXHTML
siempre validar como HTML pero no a la inversa, es decir, si escribimos de
acuerdoalanormamarcadaporXHTMLtambinconseguimosficherosvlidos
para HTML con una sintaxis ms clara, legible y menos sujeta a errores de
interpretacin.Poresosernuestraeleccinalolargodetodoestemanual.
Editoresdetextoenriquecido
Alahoradetrabajarconlenguajesdemarcas,laeleccindeuneditordetexto
enriquecidoconayudacontextualesmuyimportante:
Pgina 10
HTML & CSS
Existenmuchoseditoresquecumplenparaestalabor,perositevesperdidoala
horadeempezarpuedesprobarconunodeestosdos:
Bluefish(multiplataforma):http://bluefish.openoffice.nl/
Notepad++(sloWindows):http://notepadplusplus.org/
Navegadores
En el caso del HTML y el XHTML, el navegador web funciona como visor o
intrpretedellenguajedemarcasysurespetoporlosestndaresesfundamental.
Muchasvecesenelpasadosehautilizadolaposicindesupremacadeunode
ellos para desviarse del estndar y perjudicar a la competencia.
Afortunadamenteestas prcticas parecenabandonadas hoyen da.Tenemos
variosrecursosparacomprobarlavalidezdeunficheroescritoenHTMLolaforma
enqueelnavegadorimplementalosestndares:
ValidadoresdeHTMLyCSS:
http://validator.w3.org/
http://jigsaw.w3.org/cssvalidator/
Testsdecumplimientodeestndares:
http://acid2.acidtests.org/
http://acid3.acidtests.org/
http://www.css3.info/selectorstest/
HTML4vsHTML5
HTML5, an est en estado de borrador, pero supone un enorme y esperado
cambio.La ltimarevisinde HTML,la4.01,sehizo en 1999y desdeentonces
Internet, nuestros hbitos y nuestras espectativas sobre lo que deberamos de
recibiralvisitarunawebhancambiadomucho.
EnparaleloaHTML5existirunaversindeXHTML5msestrictaquetambinse
encuentraanenestadodeborrador.LasdiferenciasentreHTML5yXHTML5sern
lasmismasquelasyavistasparaHTML4yXHTML4:apenasunasrestriccionesextras
parafacilitarlainterpretacindellenguaje.
HTML5,adems,iracompaadodeCSS3quemejoraysimplificaeldiseoweb.
LasprincipalesnovedadesdeHTML5yCSS3sonlassiguientes:
Ya no se habla de pginas web sino de aplicaciones web. Esto quiere
reforzarelcambioenlafilosofaquesepersigueconestanuevaversindel
lenguaje.
Laseparacinentrepresentacinycontenidosevereforzada.EnHTML5
todolorelativoaldiseoirenlosCSS.HTML5sinCSSesenblancoynegroy
nosedeberasiquieraelegiruntipodeletradiferentealqueelnavegador
Pgina 11
HTML & CSS

nosmuestrapordefecto.
Existeunagranmejoraentodolorelativoalmanejodeformularios
HTML5seencuentraplenamenteintegradoconJavascript.Dehecho,se
encuentraligadodeformacasiindisolubleaunaampliacoleccindeAPI's
de Javascript que le proporcionan soporte para diseo 2D y 3D,
geolocalizacin,arrastrarysoltar,multimedia,etc.
Entonces, si existen todas estas ventajas y el borrador de HTML5 est ya
prcticamentecerradoporqucuestatantotrabajoencontrarwebsrealizadas
enHTML5?Porqunoempezamosnosotrosatrabajardirectamenteconl?La
respuesta est en los navegadores, los intrpretes de todo esto. Veamos una
fotografadelosnavegadoresmsusados(enseptiembrede2011):
Las cifras impresas en rojo representan el porcentaje de HTML5 que ese

navegador es capaz de interpretar correctamente. Como vemos, IE8, el
navegadormsusadoconmsdeuncuartodeltotal,slointerpretael20%dela
normaHTML5.
Enunainfografamsreciente(septiembre2012)seconfirmanestosporcentajes:
unodecadacuatrodelosnavegadoresactualesnoproporcionaansoporte
paraHTML5:
Pgina 12
HTML & CSS
Hoy,febrerode2014,lastornashancambiadobastantedesdequeempezamos
aescribirestemanualyyaesperfectamentefactibleencontrarbastantea
menudoaplicacioneswebconstruidascompletamenteentornoaHTML5
Pgina 13
HTML & CSS
2.HTMLBSICO
En este segundo apartado trataremos los elementos ms bsicos de HTML

siguiendolassiguientesnormas:
Noscentraremosenlaversin4.01,tratandoderespetarlanormaXHTML
1.0 ms estricta (aunque siempre hablaremos de html por simplificar) y
acercndonoscuantopodamosacumplirconloqueestablecerHTML5
parafacilitarunafuturatrancisin.
Veremosenalgunoscasosalgunasdelasetiquetasy/oargumentosdeuso
desaconsejadoindicndolosiempreacontinuacin.Puestoqueennuestro
desempeo no slo haremos pginas web sino que tendremos que
modificarlasqueotroshancreadonecesitamossaberparaquersirven.
Trataremos,tambin,deproporcionarsiemprequepodamosuncontenido
semnticoanuestrasetiquetas
Separaremoslapartedediseo(queenunfuturoaprenderemosaaplicar
medianteCSS)delcontenidodeldocumento.Notepreocupessi,porel
momento,tuspginasresultandemasiadosimples.
2.1.ESQUELETOBSICO
ElDOCTYPE
TodaslaspginasHTMLdeberandecomenzarporunDOCTYPEoDeclaracinde
tipodedocumentoqueeslaqueasociadichapginaconunDTD(Document
TypeDefinition)oDefinicindeTipodeDocumentoeindicaestoalnavegador.
Enrealidad,yparanohacerlomscomplicadodeloquenecesitamossaber,se
tratameramentedeunalneaformalenlaqueindicamosalnavegadorlanorma
quesigueellenguajedemarcasquedebedeinterpretar.
EnlaWikipediatenemosdiferentestiposdeDOCTYPE:
http://es.wikipedia.org/wiki/Declaraci%C3%B3n_de_tipo_de_documento
LadefinicindeHTML4.01Trancisional,lamshabitual,esesta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
ElDOCTYPEdebedeocuparsiemprelaprimeralneadeldocumentohtmlsinque
existaniunsloespacioantesdeellaonotendremosgarantasdequetodoslos
navegadoreslareconozcan.
LoselementosBsicos
LoselementosbsicosenunapginaHTMLson html,head y body.Laexpresin
mnimaformaldeundocumentoHTMLseraeste:
Pgina 14
HTML & CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Lenguajes de Marcas</title>
</head>
<body>
<p>Hola mundo!</p>
</body>
</html>
Elcontenidodelelemento htmlestodanuestrapginaweb(salvoelDOCTYPE).
Llevaunatributodenominadolangqueindicaelidiomaconqueesthechala
web.
El contenido del elemento head est formado, a su vez, por una serie de
elementosquenosevisualizandirectamente(salvoelttulootitlequeaparecer
enlabarradelnavegador).Elelemento meta puedeaparecercondiferentes
indicacionesdentrodeestaseccindecabecera.Lamsimportantees,talvez,
el juego de caractres con que hemos escrito el documento HTML. Si nos
equivocamos puede que algunos caracteres especiales (vocales acentuadas,
signosdepuntuacin,etc.)noaparezcancorrectamente.EnLinuxsesueleusar
UTF8mientrasquesiusaswindowssueleserelISO88591.
Porltimo,elelemento body contendrtodalapartevisibledelaweb.Eneste
caso se trata de un nico prrafo (etiqueta p) con un mensaje tpico de
bienvenida.
2.2.ELEMENTOSDEBLOQUEYELEMENTOSDELNEA
Las pginas web estn hechas siempre de elementos rectangulares que se

colocanunodebajodeotro,unojuntoaotroounoencimadeotro.Nohaynada
ms.Cualquiercosaquenosparezcadiferentesetratadeuntrucodediseo.
Dentrodeesto,tenemosquedistinguirentreloselementosdebloqueylosde
lnea.Losdebloquepodramosasemejarlosconlosprrafosdeuntexto:ocupan
todoelanchodelasuperficietildeldocumento(odelreadeldocumentoal
quehansidorestringidos)ypuedentenerotroselementos,igualesodiferentes,
arriba, abajo o, en algunas ocasiones, en su interior (aunque esto ltimo no
siempre es correcto). Un prrafo, por ejemplo, no debera de contener a otro
prrafoensuinterior.Tambinpuedencontenerelementosdelnea.
Loselementosdelneasesitanunodebajodeotro,unoalladodeotro(como,
por ejemplo, un texto en negrita que puede ir seguido de otro en cursiva) o,
incluso,unodentrodeotro(unacitapuedeteneunapalabraennegritaensu
interior).Loselementosdelneanopuedentenerensuinteriorunelementode
bloque.
Otra caracterstica importante de HTML es que por defecto los saltos de lnea
Pgina 15
HTML & CSS

consecutivasquehagamosmanualmenteennuestrodocumentonoserespetan.
Porejemplo,siyoescribieralosiguiente:
<p>Hola a todos
los compaeros
del curso de HTML</p>
Enelnavegadorsemostraralosiguiente:
Hola a todos los compaeros del curso de HTML
Cuandoaparecenmltiplesespaciosenblancosloserespetaelprimero.Por
ejemplo:
<p>Hola a todos
los compaeros del curso
de HTML</p>
Severaenelnavegadoras:
Hola a todos los compaeros del curso de HTML
2.3.LASETIQUETASMSCOMUNES
<p></p>
<br />
<b></b>
<strong></strong>
<i></i>
<em></em>
<sup></sup>
<sub></sub>
<del></del>
<pre></pre>
<h1></h1>
<h2></h2>
...
<h6></h6>
<cite></cite>
<q></q>
<blockquote></blockquote>
<hr />
Define un prrafo
Salto de lnea
Negritas
Negritas
Cursivas
Cursivas
Superndice
Subndice
Texto tachado
Preformateado
Encabezado de nivel 1
Cita corta
Cita corta
Cita larga
Lnea horizontal
Todaslasetiquetasllevanasociadaunainformacindeestilopordefecto,pero
estapuedevariarentrecadanavegador.Msadelante,cuandoveamosCSS,
veremoscomomodificardichoestiloytratardequesealomsindependiente
posibledelnavegadorqueusemosparaverlas.
Enlasetiquetasenlasquepodemoselegir,preferiremossiemprelasque
conllevaninformacinsemntica(strong,em,cite)frentealasqueslonosdan
informacindeestilo(b,i,q).
Pgina 16
HTML & CSS
Laetiquetapredetextopreformateadodefineunreaenelqueserespetade
formantegralossaltosdelneayespaciosenblancoquehayamosrealizadoal
escribireltexto.
Las etiquetas h1, h2, h3, h4, h5, h6, p, blockquote, y pre son etiquetas que
defienenelementosdebloque,mientrasque strong,b,em,i,sup,sub,del,bdo,
citeoqsonetiquetasdeelementosdelnea.
Listas
Laslistassedefinenmediantelasetiquetasul,liyol.
<ul></ul>
<ol></ol>
<li></li>
Define una lista no ordenada (con boliches)

Define una lista ordenada
Define cada item de la lista en cualquiera de los anteriores
Porejemplo:
<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Mircoles</li>
<li>Jueves</li>
</ol>
Laslistassepuedenanidar,peroteniendoencuentaquelanuevalistatieneque
abrirseantesdecerrarelitemanterior.Porejemplo:
<ul>
</ul>
<li>Punto 1</li>
<li>Punto 2
<ul>
<li>Apartado A del punto 2</li>
<li>Apartado B del punto 2</li>
</ul>
</li>
<li>Punto 3</li>
El atributo type (de uso desaconsejado!!!) nos permitira cambir el tipo de

smboloenlaslistasdesordenadas.Porejemplo<ultype=square>.Otrosvalores
vlidosparaesteatributosondiscocircle.
Conlaetiqueta ol tenemosdosatributos(tambindeusodesaconsejado)que
nospermitencambiarelcomportamientodelalista: start paravariarelnmero
por el que se inicia la lista ordenada (que por defecto es el 1) y type para
cambiarelformatodeenumeracinqueusamos.Ejemplos:<olstart=50>o<ol
type=A>.Otrostiposvlidosson1,I,ioa.
Pgina 17
HTML & CSS
Laetiquetalisepuedeusarfueradeunbloqueoloulypuedellevarunatributo
denominadotypeconcualquieradelasopcionesvlidasenoloul(tambinest
desaconsejadosuuso).
Lasimgenes
Para insertar imgenes se utiliza la etiqueta img Es una etiqueta nica (sin
contenido)porloquetenemosqueusarelmtododeautocerradoparacumplir
lasnormasdeXHTML.Lasintaxisbsicaesesta:
<img src=imagen.jpg alt=Texto alternativo />
Elatributosrcesobligatorioeindicaellugardondeestlaimagen.Sepuedeusar
unarutarelativa,absolutaoindicarunaURLweb.:
<img src=pics/2012/imagen.jpg alt=Texto alternativo />
<img src=http://www.example.com/imagen.jpg alt=Texto alternativo />
El atributo alt tambin es obligatorio en XHTML. Algunos otros atributos tiles y

habitualesymuestrauntextoalternativoquesemostrarcuandolaimagenno
puedavisualizarseporcualquiermotivo:
<img src=imagen.jpg alt=Texto alternativo title=Texto resaltado al
pasar el ratn height=200 width=400 />
El atributo title muestra un tooltip al pasar el ratn sobre la imagen. width y

height nospermitenmodificarelanchoy/oelaltodelaimagenexpresandoel
tamao deseado en pxeles. Si no los usamos la imagen se mostrar con su
tamaooriginal.Simodificamosslounodeelloselotroquedarconsutamao
originalylaimagenresultaranamrfica.
Elatributobordermuytilparaindicarquequeremosunaimagenconborde(sin
lcuandollevaincorporadounhiperenlace)estdesaconsejadoenHTML4yno
existeenHTML5.Indicaelnmerodepxelesquetendrelbordedelaimagen.
Por defecto las imgenes se muestran sin borde salvo que pertenezcan a un
hiperenlace(verelpuntosiguiente)
<img src=pics/2012/imagen.jpg alt=Texto alternativo border=2/>
Laetiquetaimgesunaetiquetadelnea.
Loshiperenlaces
Losenlacesaotraspginasserealizanmediantelaetiquetaa
<a
href=http://www.google.es />Google</a>
Pgina 18
HTML & CSS

Elatributo href esobligatorioeindicaladireccindestinodelenlace.Puedeser
unapginawebenelmismodisco,enelmismoservidor,enotroservidor,aun
puntodelamismapgina,aunadireccindecorreo,etc.
<a href="album.html">lbum de fotos</a>
<a href="mailto:josemaria@uponaday.net">Enviar un correo</a>
Otrosatributossontitleytarget:
<a
href="album.html"
title=Texto
target=_blank >lbum de fotos</a>
resaltado
al
pasar
el
ratn
Elatributo title nosmuestrauntooltipalpasarelratnsobrelenlace,mientras

quetargetnospermiteindicardondequeremosqueseabralanuevapginaala
quehacereferenciaelenlace.Elvalorpordefectode target es _self eindica
queseabrirenlamismapginadondelopulsamos.Siusamoselvalor_blank
lapginaseabrirenunasolapaoventananueva.
Parahacerunenlaceaunpuntodentrodelamismapginausamoslasiguiente
sintaxis:
<a href="#C4">Ver el captulo 4</a>
...
<a id="C4">CAPTULO 4</a>
Como vemos, usamos un elemento a para crear el hiperenlace usando un

trmino a nuestra eleccin precedido del carcter especial #. En el punto de
destinodelhiperenlacedebemosdecrearotroelemento a peroenestecaso
usaremoselatributoidycomocontenidodelmismopondremoselmismotrmino
quepusimoscomovalordelatributo href peroenestecasoprescindiendodel
carcter#
Parairaunpuntodentrodeotrapginausamosunformatosimilar:
<a href="otrapagina.html#C4">Ver el captulo 4 de otrapagina.html</a>
Enesaotrapginadeberamosdetenerunelemento a conunatributo id de
formasimilaralcasoquehemosvistoantes:
<a id="C4">CAPTULO 4</a>
AntesdeHTML4seusabaelatributo name enlugarde id. EnHTML4 nameest

desaconsejadoyenHTML5noexiste.Elatributoidquenossirvecomoreferencia
para el destino del hipervnculo no tiene porque ir en un elemento de tipo a.
Podrairencasicualquierotroelemento.Porejemplo:
<a href="#lista_1">Ver la lista de caractersticas</a>
...
Pgina 19
HTML & CSS

<ul id=lista_1>
<li>Procesador ARM</li>
<li>128 Mbytes RAM</li>
<li>16 Gbytes HDD Compact Flash</li>
</ul>
Elvalordelatributoiddebedesernicoynodeberepetirsenuncaenlamisma
pginaweb.
Unejemplomscompletoparaunenlaceaemailenelquerellenamosnosolola
direccindedestino,sinotambinelasuntoyelcampocc:
<a href="mailto:josemaria@uponaday.net?subject=De un alumno de
DAW&cc=departamento@reyfernandovi.com">Enviar correo</a>
NOTAIMPORTANTE:ParaquevalidecorrectamentecomoXHTMLestricto
debemosdesustituirelsigno&porelcdigo&Nosehahechopor
claridad,peroloveremosmsadelante.
Laetiquetaaesunaetiquetadelnea.
Comentarios
LoscomentariosenHTMLseescribenentrelossmbolos<!y>

Unanotarespectoaloscomentariosy,engeneral,sobrecualquierotracosa
que hagamos en las pginas web realizadas con HTML y CSS: Todo,
absolutamentetodoloqueescribamosenellasllegaralnavegadordelusuario
talycomolashayamosescritosyserinterpretadoporeste.Loscomentariosy
algnotroargumentopuedequenoresultenvisibles,perosielusuarioquiere(y
sabehacerlo)siemprepodrverlos,porlogeneralconlacombinacindeteclas
Ctrl+U oeligiendolaopcinadecuadaen el men delnavegador. Por tanto,
tenemos que tener mucho cuidado con lo que hacemos en estos campos
aparentemente ocultos. Como norma general lo que no queramos que vea
ningnusuarionodeberadeescribirse.
Direccindeltexto
Paraindicarsieltextovadeizquierdaaderechaodederechaaizquierdaseusa
laetiquetabdoconelatributodir:
<p><bdo dir="ltr">dbale arroz a la zorra el abad</bdo></p>
<p><bdo dir="rtl">dbale arroz a la zorra el abad</bdo></p>
ltrindicaqueeltextovadeizquierdaaderecha(lefttoright)yrtldederechaa
Pgina 20
HTML & CSS

izquierda.Elvalorpordefectoesltr.
Acrnimosyabreviaturas
Usamoslasetiquetas acronym y abbr,respectivamente,conelatributo title que
mostrarunanotaexplicativaotooltipalpasarelratnporencima.
Mi ordenador tiene 512 <abbr title="Megabytes">Mb</abbr> de memoria
<acronym title="Random Access Memory">RAM</acronym>
NOTAIMPORTANTE:acroymdesapareceenHTML5,asquenoconvieneusarlo.
Caracteresespeciales
Loscaracteresespecialesqueseusanparalasetiquetasnopuedenescribirsetal
cualenundocumentoHTML,asquehayqueusarunacodificacinespecial.
<
>
"
&
<
>
&
Existentambinuncaracterespecialquepuedensernosti:

espacio irrompible y no eliminable
Sinecesitamosalgnotrocaracterquenoapareceennuestroteclado(smbolos
tipogrficos,etc.)podemosrecurriralasiguientetabla:
http://www.ascii.cl/es/codigoshtml.htm
2.4.TABLAS
Las tablas se hanusado durantemucho tiempo en HTML como el sustituto de

otrasalternativasdediseo.Nosotrosnodeberamosdehacerestojams.Una
tabla debe de usarse para lo que es: para presentar datos en un formato
tabulado y no, por ejemplo, para presentar informacin en cuatro columnas
separadas.Paraestoyaveremoslaformacorrectadehacerlo.
Lasintaxisquemuestraunatablasencillaquedaracondosfilasytrescolumnas
seraas:
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
</tr>
</table>
Pgina 21
HTML & CSS

Laetiqueta<table></table>eslaquedefineycontienealelementotabla.Cada
fila va encerrada como contenido de la etiqueta <tr></tr>. Cada celda va
delimitadaporlaetiqueta <td></td>. Elnmerodeceldasquehayenunafila
determinaelnmerodecolumnasdelatabla.
Casi todos los atributos de la etiqueta table (width, cellpadding, cellspacing,
frame, rules y summary) han sido desaconsejados y/o han desaparecido en
HTML5.Elatributoborder(conunvalornmericoqueindicaelnmerodepxeles
deeste)sipuedeseguirusndose.Laetiquetastrtambinhanvistodesaparecer
como desaconsejados sus atributos align y valign. La etiqueta td, por ltimo,
tampoco dispone de bendiciones para usar sus atributos width, height, align,
valign, abbr, axis y scope. Puedes ver para que sirven estos y otros atributos
desaconsejadosenlassiguientesreferencias:
http://www.w3schools.com/tags/tag_table.asp
http://www.w3schools.com/tags/tag_tr.asp
http://www.w3schools.com/tags/tag_td.asp
Laetiquetatdcontinadisponiendodelosatributoscolspanyrowspanquesirven
parafusionarceldashorizontaloverticalmente.
<table border=1>
<tr>
<td colspan=3>1, 2 y 3</td>
</tr>
<tr>
</tr>
</table>
<table border=1>
<tr>
<td rowspan=2>1 y 4</td><td>2</td><td>3</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table>
Laetiqueta <th> seusaparadefinirunaceldacomodeencabezadoypuede

usarsetantoenfilascomoencolumnas:
<table border="1">
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
<tr>
<th>D</th><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
Pgina 22
HTML & CSS

<th>E</th><td>4</td><td>5</td><td>6</td>
</tr>
</table>
Laetiquetacaptionseusaparadarttuloalatabla.Debedeaparecerunasla
vezeinmediatamentedespuedelaaperturadelaetiquetatable:
<table border="1">
<caption>Ttulo de la tabla</caption>
<tr>
...
</table>
Las etiquetas thead, tbody y tfoot nos permiten estructurar de forma lgica la
informacin de la tabla, pudiendo incluso variar el orden de los mismos
(definiendo el cuerpo por delante de la cabecera, por ejemplo) si as nos
conviniera:
<table border="1">
<thead>
<tr>
<th>Mes</th>
<th>Ingresos</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>2800,00 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Enero</td>
<td>1200,00 </td>
</tr>
<tr>
<td>Febrero</td>
<td>1600,00 </td>
</tr>
</tbody>
</table>
Por ltimo, disponemos tambin de la etiqueta colgroup que nos permitir

agrupardeformalgicaalgunascolumnasdelatablaparaaplicarlesestilosde
forma conjunta, pero no tiene sentido ver como funciona hasta que no
trabajemosconCSS.
NOTAimportante: Comohemosdichoenvariasocasiones,HTML5estanen
fase de borrador. Los atributos que aqu aparecen como vlidos o
desaconsejadospuedenvariardelasespecificacionesfinalesdelanorma.Por
Pgina 23
HTML & CSS

ejemplo, an hay discrepancias acerca de que pasar finalmente con los
atributosborderysummarydelaetiquetatable.
2.5.ALGUNASETIQUETASYATRIBUTOSDESACONSEJADOSMS
font y basefont estn desaconsejadas en HTML 4.01 y desaparecen en HTML5.

Paracambiarlascaractersitcasdeltextohayqueusarhojasdeestilo.Unejemplo
deuso:
<font face="arial narrow" color="green" size=+4>Esto no se hace</font>.
center tambin est desaconsejado. El atributo align, de la etiqueta p (que

puedetomarvaloresdeleft,right,centerojustify)tambin.Hayqueusarhojasde
estiloensulugar.
<p align="right">Esto no debe de hacerse</p>
<center>Y esto tampoco</center>.
systrikesedesaconsejan,perolaetiquetadelquehaceexactamentelomismo
siguesiendovlida.
Si queremos mostrar texto tachado deberamos de <del>hacerlo as</del> y
nunca <s>as</s> o <strike>as</strike>.
Laetiquetauparasubrayartextotambindejadeestarsoportada.
<u>As se subrayaba antes</u>. Ahora ya no est permitido.
bigysmalltambindesaparecenenHTML5
<big>Esto no debe de hacerse</big>
<small>Y esto tampoco</small>
frame, frameset y noframes desaparecen en HTML5 y hay mucha controversia

sobre la posibilidad de su uso en versiones anteriores. Sirven para dividir la
superficietildelnavegadorendiferenteszonasdeformaquepodamoscargar
unapginawebdiferenteencadaunadeellas.Unejemplodesuuso:
<html>
<frameset cols="25%,*,25%">
<frame name=zona1 src="frame_1.htm" />
<noframes>Tu navegador no soporta frames</noframes>
</frameset>
</html>
Pgina 24
HTML & CSS
3.CSS.SELECTORESBSICOS
Lashojasdeestilosirvenparasepararcompletamenteelcontenidodeldiseode
unapginaweb,detalformaque,siloestructuramoscorrectamente,esposible
cambiartotalmenteelaspectodenuestrawebhaciendomodificacionesenlas
hojas de estilo (css) sin tocar ni una sla lnea de su contenido (html). Para
empezar,podemoshacerunapequeademostracinconlapginadeejemplo
que hemos creado en la anterior unidad. Si aadimos la siguiente lnea en la
seccindecabecera(head),elnavegadordejardeusarlahojadeestilospor
defecto y tomar una de las que pone a nuestra disposicin la W3C como
demostracin:
<link href="http://www.w3.org/StyleSheets/Core/Traditional"
rel="stylesheet" type="text/css" />
Podemos sustituir la hoja Traditional por otra de las siguientes: Midnight,

Ultramarine,Chocolate,Oldstyle,Modernist,SteelyoSwiss.Cadaunadeellasnos
proporcionarunestilodiferente.
3.1.INTEGRACINDEHTMLCONCSS
Existen tres formas diferentes de integrar las hojas de estilo con HTML. La ms
rudimentariaconsisteenusarelatributo style juntoconcualquieretiquetaHTML.
Porejemplo:
<h1 style="color: red; font-family: Verdana, Arial;" >Ttulo</h1>
La segunda forma sera introducir una nueva seccin dentro de la cabecera

(head)deldocumentoHTMLdondeseinsertaranlosdiferentesestilos:
<style type="text/css">
h1 { color: red; font-family: Verdana, Arial; font-size: large; }
p { color: gray; font-family: Times; font-size: medium; }
</style>
La tercera y ultima sera indicar, tambin en la seccin head de nuestro

documentoHTML,larutaaunarchivoexternodondeseincluiranlosdiferentes
estilos.Yahemosvistounejemploantescuandotombamoslosejemplosdela
W3C.Unopropiopodraseras:
<link rel="stylesheet" type="text/css" href="estilos.css" media="all" />
En la sentencia anterior, en la etiqueta link podemos incluir un atributo

denominado media que nos permitir tener hojas de estilo diferentes segn el
mediodondesevisualizarlapginaHTML.Losvaloresmahabitualesdeeste
atributosonscreen,print,oall,queeselvalorpordefecto.
Dentrodelarchivoestilos.cssescribiremosnuestrosestilosconunasintaxisidntica
alavistaenelcasoanterior:
Pgina 25
HTML & CSS
h1 { color: red; font-family: Verdana, Arial; font-size: large; }

p { color: gray; font-family: Times; font-size: medium; }
UndocumentoHTMLpuedeutilizarunadelastresformasanteriores,dosdeellaso
lastres,incluso,alahoradeaplicarestilos.Elnavegador,encasodeconflicto,
tomarsiemprecomobuenoelestilomscercanoalcontenidodeldocumento.
En caso de conflicto usando la misma forma de aplicar estilos el navegador
tendrencuentalodefinidoenlaltimaocurrenciaaparecida.
ComentariosenhojasdeestiloCSS
Loscomentariosenlashojasdeestilo(cuandoestasseguardanenficheros
independientes)nosehacendelamismaformaqueenHTML,sinoqueusamos
lossmbolos/*paraabirielcomentarioy*/paracerrarlo.Uncomentariopuede
ocuparmsdeunalnea.Unejemplo:
/* Esto es un comentario
y puede ocupar tantas lneas como deseemos
hasta encontrar el smbolo de cierre de comentario */
3.2.SELECTORESBSICOS
Toda regla de formato en CSS est formadas por dos partes: selector y
declaracin. La declaracin indica que formato hay que aplicar y el selector
indicadondehayqueaplicarlo.LadeclaracindelareglaCSSvaencerrada
entrellavesyestformadaporparejas propiedad:valor;terminadassiempreen
puntoycoma.Siobservamosalgunodelosejemplosanterioresesfcilidentificar
cadaunodeestoscomponentesycomprobarlosencillodelasintaxis.
As como en HTML la palabra clave es la etiqueta, el corazn de CSS lo
componenlosselectores.Laversin2.1deCSStieneunadocenadeselectores
diferentesperoesposibledisearcasicualquierwebconloscincotiposbsicos
queveremosacontinuacin.Veremoslosavanzadosmsadelante.
Selectoresdetipoodeetiqueta
Elselectordetipoodeetiquetasirveparadefinirlaspropiedadesdeformatode
todosloselementosdelapginacuyaetiquetaHTMLcoincidaconelvalordel
selector.Losdosejemplosquehemosvistoenelpunto2enlosquesedefinael
formato para h1 y p son ejemplos de selectores de este tipo. Podemos definir
selectoresdeetiquetaparacualquierelementoHTMLqueestdentrodelcuerpo
(body)denuestrapginaHTMLe,incluso,paraelpropiobody:
body {font-family: Courier, Monospace; color: red; text-align: justify; }
Podemosaplicarestilossimultneamenteamsdeunaetiquetaseparandolos
selectoresconcomas:
h1, h2, h3, h4, h5, h6 {color: blue; }
Pgina 26
HTML & CSS
Observaquesicometesunerrorenlasintaxis,elnavegadorsencillamenteno
tendrencuentaladeclaracindeeseselector.
Selectoruniversal
Existeunselectordenominadouniversalquesesimbolizaconunasterisco.Setrata
deunaespeciedecomodnquepermiteseleccionaracualquerelemento:
* {font-family: Courier, Monospace; color: red; text-align: justify; }
Cuidado:asaplicadoserasimilar,peronoigual,aaplicarlamismadeclaracin
sobrelaetiquetabody,comohemosvistoantes.Lomejorparaqueaprecieslas
diferenciasesquepractiquessobrealgunosejemplos.
Coloresypropiedadesbsicasdeltexto
LoscoloresenladeclaracindecualquierselectordeCSSsedefinencondos
propiedades: color (del texto o del elemento en si) y backgroundcolor (del
fondo).Porejemplo:
body {color: white; background-color: green; }
Losvalorespordefectosonblackparaelcolordelelementoytransparentparael
fondo.Podemosaplicarestaspropiedadesenladeclaracindecualquier
selectordelosyavistosylosqueveremosenadelante:
hr {color: red;}
Qucoloressonvlidos?Porunladotenemoslaposibilidaddeusarunapaleta
de17coloresbsicosusandosunombrepredefinidodeentrelosqueaparecen
enelsiguientemapadecolores:
Unasegundaopcinesindicarelcolorexactoquequeremosmediantesuvalor
Pgina 27
HTML & CSS

RGB,yaseaenhexadecimal,decimaloporcentual:
h1 { color: rgb(255, 20, 147); }
h2 { color: rgb(100%, 8%, 58%); }
h3 { color: #FF1493; }
CiertoscoloresexpresadosenRGBhexadecimalsepuedenpresentarmediante
una forma abreviada. Son aquellos en los que los tres componentes de color
tienensuscifrasiguales,porejemplo #660099 puedeexpresarsetambincomo
#609. Un subconjunto formado por 216 de estos colores constituyen lo que se
conocecomopaletadecoloresWebSafeyseusancuandoqueremosgarantizar
que los colores que escojamos se vern exactamente igual en todos los
dispositivos, incluidos aquellos que slo pueden visualizar 256 colores (muchos
ordenadoresy,sobretodo,dispositivosmvilesantiguos).Puedesconsultaresta
paletaenesteenlace:
http://en.wikipedia.org/wiki/Web_colors#Websafe_colors
Mediante la propiedad fontfamily elegimos la tipografa que queremos usar.
Podemosindicar,eltipodeletraconcretaquequeremosolafamiliatipogrfica.
Porejemplo:
p {font-family: Arial; }
strong {font-family: serif; }
Sieltipodeletraconstademsdeunapalabratenemosqueindicarloentre
comillasdobles:
em {font-family: Times New Roman;}
Las familias tipogrficas genricas admitidas son serif, sansserif, monoespace,

cursive,ofantasy.Lastresprimerossonlasnicasqueseusanhabitualmente.
Eltipodeletraasindicadodecualquieradeestasformasdebedeestarinstalado
en el ordenador o ser accesible a travs de Internet (y, en ese caso, indicar
donde)paraquesemuestrecorrectamente,poresoesmsseguroindicaruna
familiatipogrficao,mejoran,unalistadepreferenciasquesiempreacabaen
unafamiliatipogrfica.Porejemplo:
h1 {font-family: Verdana, Helvetica, Arial sans-serif; }
p { font-family: Georgia, "Times New Roman", Times, serif; }
pre {font-family: "Courier New", Courier, monospace; }
OtraposibilidadesescogerunafuentedisponibleenInterneteindicarellugar
donde est disponible para que el navegador se la descargue y la use. El
directoriomspopulardefuenteseselqueGoogleponeanuestradisposicin:
http://www.google.com/webfonts
Pgina 28
HTML & CSS

Elfuncionamientoessencillo:elegimoslasfuentesquevamosausaryGooglenos
proporcionalalneaquetenemosqueincluirenelheaddenuestroHTMLyla
parejapropiedad:valorquedebemosdeusarennuestrasreglasCSS.Porejemplo,
para usar la fuente Gochi Hand debemos incluir esto en la seccin head de
nuestroHTML:
<link href="http://fonts.googleapis.com/css?family=Gochi+Hand"
rel="stylesheet" type="text/css">
YnuestrareglaCSSseraas:
h1 {font-family: "Gochi Hand", cursive;}
Lapropiedad fontweight nospermitircambiarelgrosordeltrazodelafuente.

Tenemosdosopcionesparaello:especificarestemedianteunapalabraclave
predefinida(lighter,normal,boldobolder)ousarunvalornumricotambinde
entreunalistadeposibilidades(100,200,300,400,500,600,700,800o900)donde
el400secorrespondeconnormalyel700con bold.Slotenemosgarantade
que funcionen normal y bold. El resto depender de la forma en que est
diseadanuestratipografa.
La propiedad fontstyle nos permite elegir entre normal, italic u oblique. La
diferenciaentreitalicyobliqueesquela italic debedeexistirdentrodeldiseo
tipografco de la fuente (y si no no se muestra) mientras que la oblique se
consigue forzando una inclinacin de entre 8 y 12 grados la fuente regular.
Siemprequeexistaesaposibildadobtendremosresultadosdemejorcalidadcon
italic.
fontvariant(desapareceenCSS3y,portanto,noesaconsejablesuuso)esuna
propiedadquenospermitedosnicasopciones:normalosmallcaps(loqueen
espaolconocemoscomoversalesoversalitas).
p {font-weight: bold; font-style: italic; font-variant: small-caps; }
La justificacin del texto la realizamos mediante la propiedad textalign cuyos

valoresposiblesson left,right,center o justify. textalign conelvalor center esel
sustitutodelaetiquetacentercuyousoestdesaconsejado.
h1 {text-align: center; }
Estapropiedadnosloalineaeltexto,sinoquehacelomismoconlasimgenes
queestncontenidasenuntextocuyoprrafolatengaaplicada.Porejemplo,si
queremos una imagen alineada no podemos aplicarla sobre la etiqueta img,
perosisobrelaetiquetapdelprrafoquecontieneaesaimagen:
p {text-align: center; }
Pgina 29
HTML & CSS

Yluego,meterlaimagendentrodeunprrafo:
<p><img src="logotipo.jpg" alt="Logo de mi empresa" /></p>
Dospropiedadesmsantesdeterminarestepunto: textdecoration nospermite

cinco efectos adicionales sobre nuestro texto: none, underline, overline, line
throught y blink.Lapropiedad texttransform tienecuatrovaloresposibles: none,
capitalize,uppercaseylowercase.
ExistenmspropiedadesreferentesaltextoLapropiedad fontsize, porejemplo,
eslaquenospermitecambiareltamaodelasfuentes.Tambintenemoslas
relativas al interlineado y alguna ms. Las veremos ms adelante cuando
hayamoshabladodelasdiferentesunidadesdemedidaquepodemosusar.
Selectoresdescendientes
Es una forma de seleccionar elementos que se encuentran dentro de otros
elementosparaaplicarlesunestilopersonalizado.Imaginemos,porejemplo,que
quieroaplicarunestiloparticularalaetiquetadecursivas(em)peroslocuando
estaseaplicaauntitular.Necesitousarunselectordescendiente:
h1 em {color: red; }
Elestiloseaplicaratodaslasetiquetasemdentrodeunelementoh1sin
importarelniveldeprofundidad.Esdecir,enelsiguientefragmentoHTMLtambin
seaplicaran:
<h1><a id="INICIO">Titular de la <em>pagina</em></a></h1>
El selector descendiente debe de estar formado por, almenos, dos selectores

peropodratenermssiasloprecisamos:
p strong em {font-variant: small-caps; }
Elestiloanteriorseaplicaraalascursivas(em),dentrodeunaetiquetadenegrita
(strong)y,asuvez,dentrodeunprrafo(p).
Podemoscombinarestetipodeselectoresconelselectoruniversalpararealizar
restricciones. Por ejemplo, tengamos en cuenta las siguientes dos variantes de
selectoresylosdosfragmentosdecdigoHTMLacontinuacin:
p a { color: green; }
p * a { color: green; }
<p><a id="INICIO">Enlace</a></p>
<p><strong><a href="#">Enlace</a></strong></p>
SiusamoslaprimerareglaCSSsecolorearnenverdelasdoslneas,mientrasque
siusamoslasegundaregla,slosecolorearlasegunda.
Pgina 30
HTML & CSS
Selectoresdeclase
Losselectoresquehemosvistohastaahorafallanenunacosa:nosonflexibles
cuandoqueremosaplicarunestilodiferenciadoaalgunosprrafos,peronoa
todosellos.Unadelassolucionesparaestoesusarlosselectoresdeclase.Para
aplicarlos, lo primero que tenemos que hacer es usar el atributo class en las
etiquetasHTMLcorrespondientesalosprrafoscuyosestilosqueremosdiferenciar:
<p class="verde">Este prrafo debe de ir en verde.</p>
<p>Este prrafo va en color normal.</p>
LareglaCSSseespecificaanteponiendounpuntoalvalorindicadoenelatributo
class:
.verde {color: green; }
LareglaCSSseaplicaracualquieretiquetaHTMLqueincluyaunatributoclass
cuyovalorseaverde,ynosloalasetiquetas p.Esdecir,seraperfectamente
vlido que, adems de los prrafos anteriores, tuvieramos algo as en nuestro
HTML:
<p> Si aplicamos el atributo class con valor verde a <strong
class="verde">estas negritas</strong> o a <em class="verde">estas
cursivas</em> tambin aparecen en verde.</p>
Siquisiramosrestringirelusodelselectordeclaseparaquesloseavlidoen
combinacindeunadeterminadaetiqueta,podemoscombinarloconelselector
detipooetiqueta:
p.verde {color: green; }
Ojo,nodebemosdeconfundirlastresdiferentesformasdecombinacinde
selectoresquehemosvistohastaahora:
p, .verde {color: green; }
p .verde {color: green; }
p.verde
{color: green; }
Enelprimercasolareglaseaplicaacualquieretiquetapoacualquieretiqueta
que tenga un atributo class con valor verde. En el segundo caso se aplica a
cualquieretiquetaconunatributoclassconvalorverdequeseencuentredentro
deunelementodetipop.Enelltimocaso,sloseaplicaenlasetiquetasdetipo
pquetenganunatributodetipoclassconvalorigualaverde.
Podemosaplicartambinelformatodemsdeunselectordeclasealmismo
elementoHTML.ImaginemoslassiguientesreglasCSS:
.codigo {font-family: monoespace; color: rojo; }
.versalita {font-variant: small-caps;}
Pgina 31
HTML & CSS

YennuestrapginaHTML:
<p class="codigo versalita">Prrafo en rojo con fuentes monoespaciadas y
usando versalitas</p>
Porltimo,podemosusartambinlosselectoresdeclasemltiple.LareglaCSSse
expresaas:
.codigo.versalita {font-family: monoespace; color: blue; font-variant:
small-caps;}
Siincluimosestareglaennuestroejemploanterior,tendrpreferenciasobrelas
reglasindividualesynuestroprrafoaparecerenazulenlugardeenrojo.
SelectoresdeID
El selector de id es muy similar al de clase. La principal diferencia es que se
deberadeusarslocuandoesprecisoaplicarestilosaunelementonicoenla
pgina.EnesecasousaremoselatributoidenlugardeclassenlaetiquetaHTML
<p id="destacado">Parrafo destacado en negritas y color azul.</p>
yelsimboloalmohadilla(#)enlugardelpuntoenladefinicindelareglaCSS.
#destacado {font-weight: bold; color: blue; }
Una nota muy importante: la restriccin de usar la etiqueta id en un nico

elementoesalgoquenosotrosdebemosdeimponernosperoque,silaobviamos
ylaponemosenmsdeunsitioelnavegadornosequejare,incluso,aplicar
correctamente los estilos indicados en todas las ocurrencias de la misma. No
obstante,nopodramosconsiderarcomocorrectodeformaestrictaelcdigoas
escritoy,portanto,deberamosdeevitarlo.
Casitodolodemsdichoenreferenciaalosselectoresdeclase(laformade
restringir su uso, de combinarlo con otros selectores, etc) es aplicable a los
selectores de id con una salvedad: no existen selectores de id mltiple y no
podemos poner dos id diferentes a una misma etiqueta HTML al igual que
hacamosconelselectordeclase.
3.3.COMBINANDOSELECTORES
Todoslosselectoresaquvistospuedencombinarseentresi.Algunosejemplosya
loshemosvistoenestedocumento.Peropodemoscomplicarlocuantoqueramos
onecesitemos.Veamosalgunosejemplos:
.aviso .especial { color: red; background-color: yellow; }
El anterior selector solamente selecciona aquellos elementos con un

class="especial" que se encuentren dentro de cualquier elemento con un
Pgina 32
HTML & CSS

class="aviso",
es
decir,
estamos
aplicando
selectores de clase y selectores descendientes.
simultaneamente
p.aviso strong.especial { ... }
Ahora, el selector solamente selecciona aquellos elementos de tipo <strong>

conunatributo class="especial" queestndentrodecualquierelementode
tipo <p> que tenga un atributo class="aviso". O sea, estamos aplicando
selectores descendientes junto con selectores de clase que tienen su uso
restringidoaciertasetiquetas.
ul#menu li.destacado a#inicio { ... }
Elanteriorselectorhacereferenciaalenlaceconunatributoid=inicioquese
encuentra dentro de un elemento de tipo <li> con un atributo
class=destacado, que forma parte de una lista <ul> con un atributo
id=menu. De nuevo selectores descendientes pero en esta ocasin con tres
niveles yencadaunodeellostenemosunselectordeclaseodeIDconuso
restringido.
Pgina 33
HTML & CSS
4.UNIDADESDEMEDIDAYOTRASPROPIEDADES
EnestecaptuloveremosalgunosdeloselementosbsicosdeCSSqueannos
restan. Estudiaremos las diferentes unidades de medida que podemos utilizar,
algunaspropiedadesmsrelativasaltexto,introduciremoslasdosetiquetasdivy
spanyveremoslosconceptosdeherenciayespecificidad.
Unidadesdemedida
CSStieneunamplioyflexibleconjuntodeformasdeexpresartamaosymedidas.
Manejarlascorrectamenteesnecesarioparaexpresareltamaodelasfuentes
que usamos y para otras caractersticas esenciales en un buen diseo:
interlineado,mrgenes,separaciones,etc.
Paraexperimentarconellaspresentaremosunanuevapropiedad: fontsize que
nospermitedefinireltamaodelatipografaqueestamosusando.Algunasdelas
formasdeespecificarmedidasqueveremosaqusonslovlidasparalostipos
deletrasmientrasqueotrassonmsgeneralesynosservirnparacualquierotra
cosa.
Unidadesdemedidaespecficasdelastipografas
La forma ms sencilla es expresar esta medida como una palabra clave que
expreseunvalorfijoabsoluto.Losvalorespermitidosson xxsmall,xsmall,small,
medium,large,xlargeyxxlarge.
h1 {font-size: xx-large;}
p#piedepagina {font-size: x-small;}
La segunda forma deexpresarel tamao de la tipografa sera mediante una

palabra clave que expresa un tamao relativo. Dos son las palabras claves
permitidasenestecaso:largerysmaller.Elprimervalorelevarlafuentesobrelo
quelecorresponderapordefectomientrasqueelsegundoloreducir.
p {font-size: medium;}
p.grande {font-size: larger;}
Unidadesabsolutas
Podemos expresar medidas absolutas en pulgadas (in), centmetros (cm),
milmetros (mm), puntos (pt) o picas (pc). Estas dos ltimas son medidas
especficasdelasimprentasymediosgrficos.Unpuntoequivalea1/72pulgadas
(aproximadamente0,35milmetros)yunapicaequivalea12puntos(alrededor
de4,23milmetros).Elpuntotambinesconocidoporqueeslamedidaquesuele
usarseenloseditoresdetextoparaelegireltamaodeunafuente.
Cuatronotasatenerencuentaentodasellas:
Parasepararlascifrasdecimalesusaremoselpuntoqueeslanormaenlas
medidasanglosajonas.
Silaparteenteradeunamedidaescerosepuedesuprimir.
Silamedidaesceronosetienequeponerunidaddemedida.Unceroes0
Pgina 34
HTML & CSS

ybasta.
Entre la magnitud y la unidad de medida no debe de haber nunca
espaciosenblanco.
Lassiguientesreglasserancorrectas:
h1 {font-size: .5in;}
p {width: 25cm; font-size: 8.5pt;}
p.destacado {width: 100mm; }
td {width: 10pc; }
Unidadesrelativas
Las unidades relativas son mucho ms flexibles que las absolutas. Adems, es
altamente recomendable usarlas siempre que se pueda porque ante la gran
diversidaddedispositivosquesepuedenusaralahoradeverunapginaweb
(porttiles,grandestelevisoresdeplasma,tablets,telfonosmviles...),estasson
lasquemejorseadaptanacualquiersituacin.
Lospxelessonlamedidarelativamsconocida.Setratadeunamedidarelativa
a las dimensiones del dispositivo donde estamos viendo la pgina web. Un
ejemplo:
hr {width: 500px;}
em(ojo:noconfundirloconlaetiquetaemdeHTML)yexsonmedidasrelativasa
las dimensiones de la tipografa que estamos usando. Son medidas muy
conocidas por los profesionales de la tipografa. 1em representa,
aproximadamente, el ancho de la letra M mayscula que estamos usando
teniendoencuentatantolatipografacomoeltamaodelamisma:noeslo
mismo una m si estamos usando una Arial Narrow que si estamos usando una
CourierNew.Igualmente,paracualquieradeambaseltamaovarasiestamos
usandounafuentea12puntosoa18. 1ex equivalealaalturadeunaletrax
minscula.Aunquenosetratadeunareglaexacta,1emsueleaproximarsecomo
eltamaodelafuentequeestamosusando(esdecir,siestamosusandouna
fuentea12puntos,1emequivalea12puntos).
body {font-size: .9em;}
Siconsideramosciertalaaproximacinquehemosdichoantes,podemosdecir
que una fuente con un tamao de .9em es, aproximadamente, el 90% de la
fuentenormalquedeberadeteneresaetiqueta.Unacon1.5emseradel150%
p {font-size: 1.5ex;}
Tambin se suele aproximar, aunque esto es bastante ms irregular, que 1ex

equivaleaproximadamentea0.5em
Aunque a primera vista son medidas que parece que slo tienen sentido
aplicadasatiposdeletra,podemosusarlassobrecualquierelementodenuestra
web:
Pgina 35
HTML & CSS

hr {width: 1em;}
Yunanotaimportante:lareferenciasobrelaquesecalculaeltamaorelativo
deunelementocuandousamosestasmedidasessiempreeseltamaodeletra
de su elemento padre, es decir, del elemento en el que se encuentra. Si el
elementonoseencuentradentrodeningnotroelemento,lareferenciaesel
tamaodeletradelelemento body.Sinoseindicadeformaexplcitaunvalor
paraeltamaodeletradelelemento body,lareferenciaeseltamaodeletra
pordefectodelnavegador.Lopodemosverconesteejemplo:
body { font-size: 10px; }
h1 { font-size: 1em; font-weight: normal;}
Alaplicarestoanuestraweb,definimoseltipodeletrabasea10pxelesyel
tamaodelostitularesdeprimerordena1emque,comohemosdicho,equivale
aproximadamentealtamaodelaletrabase,esdecir,quenohabradiferencia
entrelostitularesdeprimerordenyeltextonormal.Otroejemplo:
body { font-size: 12px; }
strong { font-size: 1.2em;}
Conesto,todaslasnegritasseran,aproximadamente,un20%msgrandessobre
eltamaodeltextoenelquesecolocan.
Porcentajes
ElporcentajeesotraformadeexpresarunamedidausadaampliamenteenCSS
que,adems,tambinseconsideraunaunidadrelativa.Sepuedenusarpara
expresareltamaodeunafuente:
p {font-size: medium;}
p.grande {font-size: 200%;}
Cuandoaplicamosunporcentajecomounaunidaddemedidageneral,estese
refiere al espacio que el objeto debera de ocupar. Por ejemplo, una linea
horizontalocupanormalmenteelanchodelapantallacompleta.Siaplicamosla
siguientereglaCSSocuparsolamentelamitad:
hr {width: 50%;}
LaW3Crecomiendaencarecidamenteusarpxelesyporcentajescomounidades
de medida para especificar el tamao de los diferentes objetos y em como
unidad para especificar el tamao de las fuentes. Cuando se prepara un
documento HTML cuya finalidad es tener salida impresa en papel y no en un
dispositivoptico,esmejorelusodepuntosypicas.
4.1.MSPROPIEDADESPARAELTEXTO
Veremos a continuacin algunas propiedades aplicables al texto de nuestros

documentosqueannoconocemos.
Lapropiedadlineheightajustaelinterlineadodeltexto.Elvalornormaleselque
Pgina 36
HTML & CSS

deberadetenerpordefecto.Podemosvariaresteponiendounporcentaje,un
nmeroounamedidaenvalorabsolutoorelativo.LassiguientesreglasCSSseran
prcticamenteequivalentes:
p { line-height: 1.5;}
p { line-height: 1.5em;}
p { line-height: 150%;}
La propiedad textindent nos permite que la primera lnea de cada prrafo

aparezcadesplazadahacaladerecharespectoalrestodelprrafo.Sepuede
usarunamedida(poejemplo,2.5em)ounporcentajerelativoalanchototalde
la lnea del prrafo (un 50% hara que la primera lnea empezara justo en su
mitad). Admite valores negativos que haran que la primera lnea del prrafo
empiecemsalaizquierdadelmismo.
letterspacingywordspacingsondospropiedadesquenossirvenparacontrolar
el espacio en blanco que separa cada dos letras o cada dos palabras,
respectivamente.Losposiblesvaloresson normal ounamedida,representando
esta el espacio adicional que se suma o resta (admite valores negativos) al
espaciadopordefecto.
h1.juntito{letterspacing:.2em;}
p.separado { word-spacing: .5em; }
Lapropiedad whitespace controlalaformaenquesetrataranlosespaciosen

blanco, los saltos de lnea y el ajuste de las mismas. Los posibles valores son
normal, pre, nowrap, prewrap y preline. normal y pre son las ms usadas. La
primerarepresentaelcomportamientonormaldelnavegador(sloserespetael
primerespacioenblancoyningnsaltodelneaperoestasseajustan)y pre el
queobtendramosusandolaetiquepredeHTML(serespetantodoslosespacios
enblancoysaltosdelneaquehagamosperolaslneasnoseajustanysisonmuy
largasdesbordanelespacioasignado).Lastresrestantessonvariantesdeestas
tresposibiliddes. nowrap seriacomonormalperosinajustarlaslneas, prewrap
seracomo pre pero ajustandolaslneasy,porltimo, preline seracomo pre
perosinrespetarlosespaciosenblanco.
Lapropiedad verticalalign nosayudaaalinearelementosdediferentesalturas
situadosenlamismalnea.Lamejorformadeverloescolocandounapequea
imagen junto a una lnea de texto y hacer pruebas con los diferentes valores
posibles.SupongamoslasiguientelneadeHTML:
<p><img src="http://moodle.uponaday.net/logo.jpg" alt="FP" /> IES Rey
Fernando IV</p>
Comoobservamos,textoeimagensealineanporlabasequeeselvalorpor
defecto.Seraequivalenteausarelvalorbaselineparaestapropiedad.Creemos
ahoralasiguientesreglasCSS:
img {border:1px solid; vertical-align: text-bottom;}
Pgina 37
HTML & CSS

Ladiferenciaentreelvalortextbottomybaselineesprcticamenteinapreciable:
apenas veremos que la lnea de texto asciende un poco. El primero alinea la
parte inferior de la imagen con la parte ms baja de las letras, mientras que
baseline realizalaalineacinconlalneabasedeescrituradeestas. middle es
unodelosvaloresmscorrientesyalineaelcentrodelaimagenconelcentrode
la lnea de texto, mientras que texttop alineara la parte superior de ambos
elementos.topybottomsondosatributossimilaresa,respectivamente,texttopy
textbottom peromsorientadosacuandoqueremosalineardiversasimgenes
dediferentesalturas.subysupersondosvaloresraramenteusados.Alnearianla
basedelaimagenconlalneabasedelossubndicesodelossuperndicesdel
texto,respectivamente.Porltimo,podemosponerunamedidaounporcentaje.
Lamedidapuedeserpositivaonegativayrepresentaladistanciadesdelabase
de la imagen con la base de la lnea de texto (medidas negativas haran
descender la lnea de texto). El porcentaje tiene el mismo efecto
correspondiendoel100%conelaltodelalneadetexto.Conunatipografade
12puntos,undesplazamientode100%ode12ptdeberadeserprcticamente
equivalente.
Lapropiedadtextdecorationpermitelosvaloresnone(pordefecto),underline,
overline, line-through o blink.
La propiedad texttransform admite los valores none (por defecto), capitalize,
uppercaseylowercase.
4.2.APLICARESTILOSALASLISTAS
Losestilosseaplicanalaslistasmediantetrespropiedades:liststyletype,list
styleimageyliststyleposition.
liststyletypedefineeltipodeencabezadodecadaunodelositemsdelalista.
circle, disc, square o none sonalgunosdelosmsusados,perotambinexisten
otrosmuchosquepuedesconsultaraqu:
http://www.w3schools.com/cssref/pr_liststyletype.asp
liststyleimage nos permite usar una imagen de nuestra eleccin como
encabezadodecadaitemenlugardeunodelospredefinidosconlapropiedad
anterior.ComosiempreenestoscasoshayqueespecificarlaURLdeaccesoala
imagen.Siseespecificajuntoconliststyletype,estasegundaslosetendren
cuentasilaimagenqueespecificamosnoesaccesible.
liststylepositionesunadeesaspropiedadesdeajustefinodelformatoyseusa
paraespecificiarsielmarcadordeprincipiodelitemdeberadeaparecerdentro
(inside)ofueraalaizquierda(outside)delacajaenlaquedeberadeaparecer
cadaitemdelalista.Elvalorpordefectoesoutside.
Existeunapropiedadabreviadallamada liststyle quepermitedefiniralastres
anteriores en una sla regla. Las siguientes declaraciones, por tanto, seran
Pgina 38
HTML & CSS

equivalentes:
ul.milista { list-style-type: square;
list-style-image: url(redicon.jpg);
list-style-position: inside; }
ul.milista2 { list-style: square url(redicon.jpg) inside; }
Existen muchas otras propiedades CSS que admiten reglas abreviadas que
englobanavariasotrasrelacionadas.Algunaslasiremosviendomsadelantey
otrassonfcilesdeidentificarenlosejemplos.
4.3.DOSNUEVASETIQUETASHTML:divyspan
div y span sondosnuevasetiquetasHTMLcuyoobjetivoesnohacernadapor

defecto.PuedeshacerlapruebadecolocarlasenundocumentoHTMLypodrs
comprobarlo por ti mismo. El objeto de ambas es dar estructura a nuestro
documento.Seusanconjuntamenteconlashojasdeestilo y,particularmente,
conlosselectoresdeclaseeID.
div esunaetiquetadebloqueideadaparaestructurardeformalgicanuestra
pgina. Sera similar a un prrafo pero, mucho ms flexible y, adems, por
defectonoconllevalaaplicacindeningnestilo.
Laetiqueta span esmuysimilarperosetratadeunaetiquetadelneayseusa
paraagruparelementosalosqueaplicarestilosdiferenciados.
VeamoselbodydelsiguienteHTML:
<body>
<div class="verde">
<h1><a id="INICIO">Titular de la <strong>pagina</strong></a></h1>
<p>Si meliora dies... bra, bra...</p>
<hr />
<p>Otro prrafo... bra, bra, bra...</p>
</div>
<p>Este bloque ya est fuera del efecto del anterior bloque div y, por
tanto, su fondo ser blanco.</p>
</body>
YloacompaamosdeestareglaCSS:
.verde { background-color: green;}
Observamos que, efectivamente, mediante div podemos agrupar diferentes

elementos de bloque y aplicar propiedades de forma conjunta a todos ellos.
Podramosconseguirelmismoefectoaadiendo class=verde comoatributoa
todos los elementos de bloque incluidos en el elemento div, pero sera ms
pesado,menosclaroypodradarlugaramserroreseinconsistencias.
Imaginemosahoraquequeremosmarcardeformaespecialconotroestiloyotro
Pgina 39
HTML & CSS

tamao,laprimeraletradelprimerprrafodeunlibrodecuentosquequeremos
publicar en la web. Usaremos para ello una fuente de Google Fonts, as que
incluimosestoenelheaddenuestroHTML:
<link href='http://fonts.googleapis.com/css?family=Rock+Salt'
rel='stylesheet' type='text/css'>
Luego,ennuestrashojasdeestilo,definimoslosiguiente:
.primeraletra {font-family: 'Rock Salt', cursive; font-size: 500%; fontweight: bolder; }
Ylosprrafosdenuestrawebiranas:
<p><span class="primeraletra">S</span>i meliora dies, ut vina</p>
<p><span class="primeraletra">V</span>Veteresne poetas, an quos et
praesens et postera respuat aetas?</p>
(NOTA: Msadelanteveremosqueexisteotraformamsprofesionaldehacer
estomismomediantelospseudoelementos).
4.4.HERENCIA
PodemosexpresarcualquierdocumentoHTMLmedianteunaestructuraenforma
de rbol. Por ejemplo, tengamos el siguiente HTML sencillo (en el que,
intencionadamente,hemossuprimidoalgunasdelasetiquetasyatributospara
simplificarlo):
<html>
<head>
<title>Mi web</title>
</head>
<body>
<h1>La web del profe de Lenguaje de Marcas</h1>
<p>Jos Mara Morales es el <strong>profesor</strong> de este ao
de la asignatura y, entre otras cosas, vamos a ver con l:</p>
<ul>
<li>HTML y <em>XHTML</em></li>
<li>CSS</li>
<li>XML</li>
</ul>
</body>
</html>
PodramosverlaestructuradenuestrodocumentoHTMLesquematizadacomoel
siguienterbol:
Pgina 40
HTML & CSS
Pues bien, la herencia de CSS hace que las propiedades de los diferentes
elementossetrasladesiemprehaciaabajoatravsdelrbolsalvoquedichas
propiedadesseanreescritas,bienporlosestilospordefecto,bienporunaregla
apropiadaquehayamosintroducidonosotros.
Porejemplo,elelementoconlaetiquetastrongaparecerennegrita,noporque
nosotroslohayamosespecificadoas,sinoporqueasestdefinidopordefectoy
aunque definamos la propiedad fontweight: normal para el selector body
seguirnsiendonegritas.
Sinembargo,sidefinimoslapropiedadcolor:orange;ybackgroundcolor:black
enelselectorbody,todoaparecerconfondonegroyletrasnaranjas.
Si nuestra pgina web sencilla llevara un enlace (etiqueta a) el fondo si
aparecera negro, pero el color sera azul porque esa etiqueta si tiene la
propiedadcolorsobreescrita.
Endefinitiva:laspropiedadesdeestiloseheredansiemprehacaabajoenelrbol
salvoquedichapropiedadsearescrita,bienesplicitamente,bienconunaregla
pordefecto.
4.5.ESPECIFICIDAD
Anadieseleescapaaestasalturasqueamedidaquevayamoshaciendoms
complejasnuestrashojasdeestilo,msdificilsersaberenalgunasocasionesque
reglaprevalecersobreotra.Yahemosdichoque,enigualdaddecondiciones
(porejemplo,dosreglasquehacenreferenciaaestiloscontradictoriosparala
Pgina 41
HTML & CSS

etiquetap),seledarpreferenciaalaqueestmscercanaalcontenidosilas
reglasseencuentranendiferentessitios(lasmsprioritariasseranlasconsignadas
a travs del atributo style en el propio HTML, las siguientes las que escribimos
directamenteenlaseccinheaddelmismoy,porltimo,aquellasquevanenun
ficheroexterno).Antedosreglasqueestnenelmismositio(porejemplo,ambas
endoslneasdiferentesdeunmismoarchivoexternoCSS)seledarpreferencia
alaqueestescritaenltimolugar.
Estasreglasnosayudanasolucionarloscasosmssimplesdeconflictopero,que
ocurrecuandoelproblemaloplanteandosreglastotalmentediferentesquese
deberan de aplicar al mismo elemento? Para eso surge lo que llamamos
especificidad.
ImaginemosquenuestroCSStienelassiguientesreglas:
ul ol li.alerta {color: red; }
.alerta{color: blue;}
li.alerta{color: yellow; background-color: yellow;}
ul .alerta{color: green;}
YennuestroHTMLaparecealgocomoesto:
<ul>
<li>Uno
<ol>
<li>Dos</li>
<li class=alerta>TRES</li>
</ol>
</li>
<li>Cuatro</li>
</ul>
Qureglaoreglasseaplicaranalelementocuyoatributo class corresponde

conalerta,correspondiendoesteconlascuatroreglasqueaparecenenelCSS?
Puedes probar que cualquiera de ellas se corresponde con el elemento
ponindolasunaauna.Silasponestodasjuntas,independientementedelorden
enqueestnobservarsqueeltextoaparececoncolorrojoyelfondoconcolor
amarillo,esdecir,seestaplicandolaregla1y,parcialmente,laregla3.
Elhechodequeelfondoaparezcaamarilloesbiensencillo:apareceasporque,
noentraenconflictoconningunapropiedaddeotraregla.Dehecho,podemos
ver que si movemos esa propiedad a cualquiera de las otras reglas el fondo
seguirapareciendoamarillo.Estoesporqueenrealidadlasestamosaplicando
todasysloenelcasodequeexistaunconflictoentrepropiedadesendiferentes
reglastenemosquedecidircualeslaquehayqueusar.Estosearbitracalculando
laespecificidaddelaregla.
Laformamsampliamenteaceptadadecalcularlaespecificidadesmediante
unconjuntodecuatronmerosseparadosporcomas(porejemplo0,1,0,5).Los
nmeros alaizquierdatienenunrangomayorquealaderechay,portanto,
definenaunselectormsespecficoyqueportantoprevalece.Anteempateen
un nivel, miramos en el siguiente. En caso de empate en todos los niveles
Pgina 42
HTML & CSS

prevalecelareglaescritaenltimaposicin.
EJEMPLOS:entreunareglaconvalor0,0,1,0yotraconvalor0,0,0,13prevalecela
primerayentreunareglaconvalor0,1,3,1yotraconvalor0,1,3,2prevalecerala
segunda.
Cmosecalculanestosnmeros?Elprimeroesfcilyseusacuandoelestilose
aplicaenelpropioHTMLmedianteelatributostyle.Estenmeroslopuedevaler
0o1(puestoquenopodemosduplicaratributosenunamismaetiqueta)ytiene
siemprelamximaprioridad.Losotrostressecalculansumando1segnlostipos
deselectoresqueaparezcanenlaregla:
Elsegundonmerosecalculasumandounoporcadaselectordeidque
aparezcaenlaregla
Eltercernmerosecalculasumando1porcadaselectordeclase,selector
deatributoopseudoclasequeaparezcaenlaregla(losdos ltimoslos
veremosenelcaptulosobreCSSavanzado)
Elcuartonmero,eldemenorprevalencia,secalculasumando1porcada
selectordeetiquetaopseudoelemento(esteltimoloveremostambinen
CSSavanzado)queaparezcaenlaregla.
As,sicalculamoslaespecificidaddelascuatroreglasanteriores:
ul ol li#alerta {color: red; }
.alerta{color: blue;}
li.alerta{color: yellow; background-color: yellow;}
ul .alerta{color: green;}
/*
/*
/*
/*
0,1,0,3
0,0,1,0
0,0,1,1
0,0,1,1
*/
*/
*/
*/
Loquenosconfirmaque,efectivamente,elcolordeltextodeberadesalirrojo
independientemente del orden en que se situen las reglas. Si eliminamos esa
regla,eltextosaldrenverde,peropuestoquehayunempateentreestareglay
laquedictaquedeberadesaliramarilloyprevalecelaescritaenltimolugar.
Los selectores de hijos y hermanos (tambin los veremos ms adelante) no
aportanunamayorespecificidadalasreglas.
Laclausula!important
Laclausula!importantsepuedeaplicaracualquierreglaaumentandoassunivel
deprioridaddeformaqueprevalezcasobredefinicionesposterioresdelmismo
selector e, incluso, sobre las valoraciones de especificidad. Ante las siguientes
reglas, un texto etiquetado como strong, dentro de un prrafo (selector
descendiente)yconelidminegrillaapareceraconcolorrojo:
strong {color: red !important;}
p strong#minegrilla {color: blue; }
Pgina 43
HTML & CSS
5.ELMODELODECAJAS
El modelo de cajas se trata, posiblemente, del concepto ms importante

relacionadoconlashojasdeestiloCSS.Comoyahemosdichoantes,todoen
HTML est formado por cajas rectangulares que contienen a los diferentes
elementos.Mediantelasreglasqueveremosacontinuacinpodremoscambiar
elaspectoycomportamientodelasmismas.
5.1.ELCONCEPTODECAJA
HTML y CSS definen una caja como una zona rectangular constituida por los
siguienteselementos:
Tenemos, adems, control total y de forma individual de cada una de las

dimensionesdelastrescapasexternas.Elcontenidosueleserdinmico(enunao
en sus dos dimensiones) o especificarse con dos valores: ancho y alto. Como
unidadesdemedidatenemostodaslasqueyaconocemos
Laprincipalconfusinquesuelentenerlosprimerizoseslaformadecalcularlas
dimensionestotalesdelacaja.Supongamosunacajacuyocontenidotieneun
ancho de 200 pxeles, el margen interior es de 20 pxeles, el borde de 5 y el
margenexternode25pxelesCuleselanchototaldelacaja?
Hazlascuentas:son300pxelesverdad?.Esmuchomejorverloantesdeecharle
unvistazoalasintaxisqueesanmsengaosa:
.ejemplo { width: 200px;
height: 100px;
border: 5px solid blue;
padding: 20px;
margin: 25px;
background-color: yellow; }
Yaqu,unanotaporsialguienannosehadadocuentadelaimportanciadel
DOCTYPE: El internet explorer ha considerado durante mucho tiempo que el
borde interior y los mrgenes forman parte del contenido pese a que la
Pgina 44
HTML & CSS

especificiacin de la W3C jams ha dicho esto. An con Explorer 9, si nuestro
HTML no especifica un DOCTYPE, nos visualizar la pgina en modo de
compatibilidad (quirk mode) y nos dibujar una caja con un tamao de 250
pxeles,deformaqueelcontenidotilserdeslo150pxeles.
diveslacajamsversatil
AunquemuchoselementosdebloquedeHTMLsonsusceptiblesdeserusados
comocajas,laqueporreglageneralusaremoscomotaleslaetiquetadiv.Esla
msversatilyaquenotieneestilospropiossalvolosquedefinamosnosotros.
5.2.PROPIEDADESDELACAJA
Lasdimensionesdelcontenido
Lasdimensionesdelcontenidodelacajasedelimitanconlaspropiedadeswidth
y height. Ambaspuedetenerporvalorunporcentaje,unamedidaolapalabra
autoqueharaquesutamaoseajustaralomejorposiblealcontenidorealdela
misma. Los valores por defecto de estas dos propiedades son width: 100% y
height:auto;
Cuandollevanunporcentaje,esteseaplicasobreeltamaodelacajadentro
de la que, a su vez, se encuentran (su elemento padre o contenedor). Por
ejemplo,siunacajatieneporanchoel50%ynoestdentrodeningunaotra,esto
seaplicasobreeltamaototaldelasuperficietildelnavegador.Sidentrode
estametemosotratambinconunanchodel50%,tendrunanchodelamitad
de la caja donde se encuentra, es decir, un 25% de la superficie til del
navegador. Cambiemos el ancho de la regla .ejemplo vista antes por 50% y
pongamosestoennuestroHTML:
<div class="ejemplo">Hola caja 1
<p class="ejemplo">Hola caja 2</div>
</div>
NOTA IMPORTANTE: La altura slo puede valer un porcentaje si su padre o

elementocontenedortienedefinidaunaalturaconunvalorconcreto.Encaso
contrarioseignorarytomarelvalorauto.
Mrgenesinterioryexterior
Alternativamentetenemoslaspropiedades maxheight,minheight,maxwidth y
minwidthparafijarlasdimensionesmximasymnimas.Enestecasonopodemos
usarlapalabraautosinosloporcentajesomedidasconcretas.
Losmrgenesinterioresyexterioressecontrolanconlaspropiedades padding y
marging respectivamente y tenemos varias posibilidades. Podemos poner auto
(paradejarloalarbitriodelopredefinidoporelnavegador),unvalorexactooun
porcentajequeestarareferidoaltamaodelelementopadre.Adems,tambin
podemosespecificarunmargenigualparacadaunadelascuatrodimensiones
delacajaoespecificarquevalorconcretoqueremosparaellas.Laspropiedades
Pgina 45
HTML & CSS

para esto son margintop, marginright, marginbottom y marginleft para el
margen externo y paddingtop, paddingright, paddingbottom y paddingleft
para el interno. Una ltima posibilidad, ms compacta, es usar la propiedad
marginconuno,dos,tresocuatrovalores:
/* 20px para cada margen */
margin: 20px;
/* 20px para superior e inferior y 10px para derecho e izquierdo */
margin: 20px 10px;
/* 20px para el superior 10px para los laterales y 30 para el inferior */
margin: 20px 10px 30px;
/* los cuatro en el sentido de las agujas del reloj: 20px superior, 10px
derecho, 30px inferior y 10px izquierdo */
margin: 20px 10px 30px 10px;
Un truco habitual para mostrar una caja centrada con respecto al elemento
dondeestcontenidaeshacerquelosmrgenesaizquierdayderechasean
igualesycalculareltamaoexactoquedebentener.Estoesrelativamentefcil
cuandotrabajamosnicamenteconporcentajes,peronosiempreesposible.El
navegadorloharsoloestableciendolosmrgeneslateralesaauto.
Existeunapeculiaridadconrespectoalosmrgenesexterioresdelascajas.As
comolosmrgenesderechoeizquierdodecajascontiguassesuman,lossuperior
einferiordecajasadyacentessesolapan.Imaginemos,porejemplo,doscajas
conmargenexteriorde20pxelesencadaunadesuscuatrodimensiones.Silas
situamosunajuntoaotratendremos40pxelesdeseparacinperosiponemos
unaencimadelaotrasloestarnseparadaspor20pxeles.
Para la propiedad padding la sintaxis es similar. Adems, el margen exterior
permite valores negativos (experimenta con los resultados!) mientras que el
interiortraducirunvalornegativoporcero.
Yunltimodetalle:elbodydeundocumentoHTMLestambinunacajaypuede
tenerpredefinidosvaloresparaelmarginyelpadding deformaquenosquede
unpequeobordesinusarenlasuperficiedelnavegador.Sinoqueremosque
estoseaaspodemosusarestaregla:
body {margin: 0px; padding: 0px; }
Elbordedelacaja
Elbordedelacajasedefinemediantetrespropiedades:color,grosoryestilo:
bordercolor, borderwidth y borderstyle, aunque luego veremos que tenemos
msposibilidadestantoparasimplificarladefinicincomoparaparticularizarla
conmuchomsdetallecomohemoshechoconlosmrgenes.
Laformaabreviadadeespecificarlascaractersticasdelbordedelacajaesesta:
border: red double 5px;
Pgina 46
HTML & CSS

Dondeelprimerparmetroeselcolor(decualquieradelasformasquehemos
aprendidoadefinirlo),elsegundoelestilo(siendovlidoslosvaloressolid,dashed,
dotted, double, groove, ridge, inset, outset, hidden o none) y el tercero es el
anchodelbordequepuedeserunvalordelongitud(nuncaunporcentaje)olas
palabrasclavethin,mediumothick.
Esteformatoabreviadosloesvlidocuandolascuatrodimensionesdelborde
soniguales.Losparmetrospuedenirencualquierordenperodeberandeirlos
tres(aunquelamayoradelosnavegadoresnosadmitiranunoodossolamente).
Los valores por defecto si prescindimos de alguno son black para el color,
mediumparaelgrosorynoneparaelestilo.
La diferencia entre none y hidden es que aunque en ninguno de los casos el
bordeesvisible,enelsegundoinfluyerespectoallugardondesedibujaraun
elementoadyacentemientrasqueelprimeroseconsideraconunanchode0px.
Podemosespecificarcadaunadeestastrespropiedadesporseparadoconlos
atributos bordercolor, borderstyle y borderwidth. Asimismo,podemoscambiar
losvaloresdecadaunadelascuatrodimensionesencadaunodeellosusando
atributos especficos (bordertopcolor, borderbottomcolor, borderleftcolor y
borderrightcolor,porejemplo)oconunalistadedos,tresocuatrovaloressobre
elatributoprincipaligualquehemoshechoconlosmrgenes:
/* 5px para superior e inferior y 50px para derecho e izquierdo */
border-width: 5px 50px;
/* dotted el superior, solid para los laterales y dashed el inferior */
border-style: dotted solid dashed;
/* los cuatro en el sentido de las agujas del reloj: red superior, blue
derecho, gree inferior y purple izquierdo */
border-color: red blue green purple;
UNANOTAMUYIMPORTANTE: todosestoselementossonvlidosparacualquier
selectorqueapliquemostantoaunelementodelneacomodebloqueaunque,
tienenmuchomssentido(sobretodoalgunosdeellos)sobreunodebloque.
Existeotrapropiedadllamadaoutlinemuchomenosflexibleparaaplicarbordesa
lascajas.
outline: 3px solid black;
outlinenorobaespacioalasdimensionesdelacajay,portanto,noafectaa
lasdimensionesdeesta.Es,pordecirlodealgunaforma,comosiusramosun
bordeexterioralbordedelacaja.Porcontraesmuchomenosflexiblequeborder
y,porejemplo,nopodemosespecificarpropiedadesdiferentesasusdiferentes
segmentos.
Pgina 47
HTML & CSS
Imgenesdefondoenlascajasysuspropiedades
Nuestrascajasnoslopuedenteneruncolordefondo:tambinpuedentener
unaimagen.Lasintaxisdelapropiedadeslasiguiente:
background-image: url(http://cort.as/1KYH);
Silaimagenestenelpropiodirectoriodondeseencuentralaimageny,por
ejemplo,sellamaburbujas.jpgseraas:url(burbujas.jpg).Aligualqueocurracon
elvalordelatributosrcdelaetiquetaimg,silaimagenseencuentraenelpropio
servidorperoenotrodirectoriodiferentepodramosespecificarunarutaabsoluta,
relativa,etc.
Pordefectolaimagensecolocaenformatodemosaico.Podemoscontrolareste
valor mediante la propiedad backgroundrepeat cuyos posibles valores son
repeat,repeatx,repeatyonorepeat.Elvalorpordefectoesrepeat.
Mediante la propiedad backgroundposition podemos dar posicin a nuestra
imagen de fondo, tanto si estamos usando norepeat, como si lo estamos
haciendo(encuyocasoposicionaraunadelasimagenesycrearaelmosaicoa
partirdeesta.)Tenemostresposibilidades:
/* Posiciona la esquina superior izquierda de la imagen en la caja. Est
permitido el uso de valores negativos */
background-position: 50px 100px;
/* Idem al anterior pero usando porcentajes sobre las dimensiones de la
caja */
background-position: 20% 50%;
/* alinea la imagen en la caja admitiendo los valores left center o right
para la posicin horizontal y top center o bottom para la vertical. El
orden es indiferente */
background-position: center center;
Otra propiedad interesante es backgroundattachment. Tiene dos posibles

valores: scroll o fixed. Elprimervaloreseldelcomportamientopordefecto:la
imagen se desplaza al mismo tiemp que se desplaza la pgina. El segundo
permitequeestasefijeensuposicinyquelonicoquesedesplacesobreella
seaelcontenidodelapgina.
Al igual que en otras de las opciones vistas, tambin tenemos un formato
abreviadoparadefinirtodasestaspropiedadesdeunaslavez.Porejemplo,si
tenemoslassiguientesreglas:
background-image: url(gotas.gif);
background-color: blue;
background-repeat: repeat-x;
background-position: center top;
background-attachment: fixed;
Podramossustituirlasporestaotra:
background: url(gotas.gif) blue repeat-x top center fixed;
Pgina 48
HTML & CSS
Elordendelosvaloresesindiferenteysiomitimosalgunodeelloselnavegadorlo
completarconlaopcinquetengadefinidapordefecto.
Cajasyjerarquadeelementos
ObservalaformaenqueapareceestecdigoHTMLentunavegadorusandola
reglaCSScorrespondientealaclase.ejemplovistaanteriormente:
<h1 class="ejemplo">Hola Mundo</h1>
<div class="ejemplo">Soy la caja nmero 1
<div class="ejemplo">Soy la caja nmero 2</div>
</div>
<p>Hola <strong>mundo</strong> de las cajas. Esto es una prueba.</p>
Ponatencinadoscosas:enprimerlugarlaposicindelsegundo div serealiza

de forma relativa al primero. Adems, el prrafo final se superpone a la caja
nmero2verdad?Paraentenderlacausadeambascosaspiensaenelrbol
formado por las etiquetas HTML. El segundo div es hijo del primero y por eso
calculasuposicindeformarelativaaladesupadre.Porelmismomotivo,como
elprrafofinaleshermanodelprimer div constituyesureferenciaparafijarsu
posicinenlapantalla.
5.3.POSICIONANDOLASCAJAS(YOTROSELEMENTOS)
Hastaahoranonoshemospreocupadodecontrolarlaposicindeloselementos
que colocamos en nuestro HTML y dejamos que estos se vayan situando uno
debajooalladodelanterioryqueseaelnavegadorelquelodisponga.Estose
debeaque,pordefecto,usamosunmododeposicionamientoquesedenomina
esttico(static).LapropiedadCSSquelocontrolasellamaposition.
Apartede static,estapropiedaddisponedetresposiblesvaloresms: relative,
absoluteyfixed.
Siusamos elvalor relative,la posicinseindicarespecto alaque deberade
tenerdeformanormaldichoelemento.Sehacemediantelaspropiedades top,
bottom,leftyrigth.leftytop,lasmsusadas,aplicanundesplazamientomedido
desdelaesquinasuperiorizquierdadelelementopudiendoserestenegativosise
expresamedianteunvalormientrasquebottomyrightmidenesedesplazamiento
desdelaesquinainferiorderechadelelemento.Lgicamente,notienemucho
sentidousarconjuntamentetopybottomoleftyright.Sepuedenusarporcentajes
siendoestosrelativosaltamaodelelementopadrealquepertenecen.
div.caja1 {position: relative; left: 10%; top -20px;}
div.caja2 {position: relative;right: -40px; bottom: 40px;}
Si usamos el valor absolute el elemento se posiciona exactamente en las

coordenadas que indiquemos. La forma de indicar la posicin usa las mismas
propiedades vistas en el caso del posicionamiento relativo pero en este caso
estnreferidasasuelementopadre. Sidichoelementopadreesel body del
Pgina 49
HTML & CSS

documento HTML estamos haciendo que la posicin de este elemento sea
independientedelrestodeldocumentoHTMLdeformaquenadaqueaadamos
oquitemosaestepuedealterarsuposicin.Sieststrabajandoconcajas,no
olvidesqueelmargenexteriordelacaja,espartedelamisma.
Elltimovalores fixed.Funcionadeformamuysimilaralanteriorencuantoala
forma de marcar el lugar donde lo posicionamos salvo que en este caso la
posicindelelementoquedafijainclusocuandonosdesplazamosatravsdel
documentoHTMLusandolasbarrasdedesplazamiento.
Laspropiedadesfloatyclear
La propiedad float, una de las ms tiles en el mundo de las cajas, nos va a
permitirmodificarelposicionamientodenuestrosbloquesyelementosdeforma
horizontal,colocndolasdeformaflotanteenellugarquedeseamos.Tienetres
posiblesvalores:right,leftononequeessuvalorpordefecto.Vamosaverlocon
unejemplo.EstassernnuestrasreglasCSS:
div#contenedor{width: 90%;
margin-left: 5%;
margin-top: 30px; }
div#top{width: 100%;
background-color: green;
text-align: center;
color: white;
font-weight: bold;
font-size: 3em;
font-family: Verdana, Helvetica, Arial, Sans; }
div#izquierda{width: 80%;
height: 50%;
background-color: aqua;
float: left;}
div.caja{width:90%;
margin-left:5%;
margin-top:10px;
background-color: red;}
div#derecha{width: 20%;
height: 50%;
background-color: teal;
float: right; }
div#pie{width: 100%;
background-color: orange;
font-size: .8em;
text-align: right;
font-family: Courier, Monoespace;}
YahorapondremosestoenelbodydenuestroHTML:
<div id="contenedor">
<div id="top">Cabecera de la pgina</div>
Pgina 50
HTML & CSS
cuyo
<div id="izquierda">
<div class="caja">Caja 1<br/>
En un lugar de la mancha de
nombre no quiero acordarme no hace mucho que viva un

hidalgo... </div>
<div class="caja">Caja 2</div>
<div class="caja">Caja 3</div>
</div>
<div id="derecha">Esto est en la columna de la derecha</div>
<div id="pie">Todos los derechos reservados</div>
</div>
Observamos que las cajas que usan el selector de id derecha e izquierda se

posicionan, respectivamente, a derecha e izquierda de la superficie til de su
elementopadre,queaqumarcamoscomocontenedor.Elresultadoyaempieza
aparecerseaunawebactual,peroannosquedamuchotrabajoparaque
puedaconsideraseaceptabledesdeelpuntodevistaesttico.Observatambin
quepuestoquehemosusadoporcentajesenlasdimensionesclavedelasreglas,
la pgina se redimensiona cuando cambiamos la superficie til de nuestro
navegador.Yunaltimacosa:paraquetedescuentadeloimportantedelas
medidasenCSS,tratademodificarconunacantidadirrisoriaelanchodelacaja
izquierda(pon,porejemplo,80.005%)ointroduceunpequeo padding enlas
reglas correspondientes al estilo del selector id izquierda y vers como se
descuadratodoelconjunto.
floatesunparmetroqueseusanosloparaposicionarcajassino,porejemplo,
paraposicionarunaimagendentrodeunprrafo.LareglaCSS:
.aderecha {float: right; }
YelHTML:
<img class="aderecha" src="cup.png" alt="copa" />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa,
varius a, semper congue, euismod non, mi.</p>
Porlgica,setratadeunatributoquenotieneningnefectocuandoestamos
usandoposicionamientoabsoluteofixed.
Lapropiedad clear nospermiteanularlosefectosdelapropiedad float.Tiene
cuatro valores posibles: none (por defecto), right, left o both. Los dos primeros
anularanunfloatrightoleft,respectivamente.Elvalorbothlosanularaaambos.
Paraverelefecto,aadamoslasiguientereglaanuestroCSSanterior:
.sinfloat {clear: right;}
YahoraaadamosalfinaldelHTMLestenuevoprrafo:
<p class="sinfloat"> Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
Pgina 51
HTML & CSS
Comopodemosver,elnuevoprrafosaltaalaparteinferiordelaimagencomo
sehabracomportadosiestanotuvieraelatributo float mientrasqueelprrafo
anteriorsigueatenindoseasuexistencia.
Introduciendolaterceradimensineneldocumento
Lapropiedad zindex nospermitirestructurarentresdimensionesloselementos
denuestrodocumentoHTML.Pordefectoloselementosaparecenestratificados
segn su aparicin en el documento, de forma que un elemento aparece
siempresobretodoslosanterioresal.Lapropiedad zindex nospermitealterar
esteordenindicandounnmeroentero,positivoonegativo,queindicaelnivelo
lacapaenlaquesituamoselelemento.Unejemplo.Primeroveamoslasreglas
CSS:
.caja1 { position: relative;
background-color: yellow;
z-index: 2; }
background-color: purple;
top: 1px;
left: 80px;
z-index: 1; }
top: -100px;
left: -1px;
z-index: -1; }
YluegoestefragmentodeHTML:
<p class="caja1">Hola caja 1!</p>
<p class="caja2">Hola caja 2</p>
<p class="caja3">Hola caja 3</p>
Siprescindimosdelapropiedad zindex,lacaja3solaparala2yestaala1.
Conlapropiedadzindexlacaja3serlaquevayaalfondomientrasquela1se
encontrarenprimerplano.Pordefectoelvalordezindexesautoyelndicede
capabaseseasignaal0.Porconvencinsesueleusarel1comolacapade
fondoyel999comolacapaquequeremosenprimerplano,peroenrealidad
como hemos dicho, la propiedad admite cualquier valor entero negativo o
positivo.Entenders,adems,queestapropiedadnotieneningnefectoante
elementosquenosesolapan.
Porltimo,comovesenlacaja1sehaestablecidolapropiedadpositioncomo
relative aunquenoseefectuaningndesplazamientosobresuposicinnormal.
Estoesporquelapropiedadzindexslotieneefectosobreelementosenlosque
sehanmodificadolaspropiedadespositionofloat.
Pgina 52
HTML & CSS
Visibilidad,desbordamientosyrecortes
Lapropiedad visibility,comosunombreindica,permiteocultarunelementosin
que este deje de ocupar su espacio en la pgina. Tiene dos posibles valores:
visibleohiddenysonautoexplicativos.Insisto:elelementonoseveperoestah
ysientramosenlaopcindevercdigodelnavegador(habitualmenteCtrl+U)
podremosverlo,asquecuidadocondondeyparaqulousamos!
Lapropiedad overflow ledicealnavegadorloquetienequehacercuandoun
elemento no cabe completamente dentro de la caja o elemento que lo
contiene.Suvalorpordefectoes auto ydejaestagestinalnavegador.Otras
posibilidades son hidden (corta y oculta lo que no cabe), scroll (coloca unas
barrasdedesplazamientoparapoderverloquenocabe)o visible (loqueno
cabedesbordaasucontenedorysemuestraenlapgina).Unpequeocdigo
CSSparaverlo:
.caja { width: 200px;
padding: 5px;
height: 100px;
border: 1px dashed black;
overflow: hidden;}
YesteseraelHTMLdeprueba:
<div class="caja">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</div>
Modificaelvalorde overflow paraverlasdiferentesposibilidades.Ycuidado.Al

igualqueocurraconlapropiedadvisibility,siaquusamoselvalorhiddenestono
implica que no se pueda ver en la vista de cdigo de la pgina. Existen las
propiedades overflowx e overflowy porsiqueremoscontrolarindividualmente
lasdosposiblesbarrasdescrollposibles.
Lapropiedadclipnospermitefijarlapartevisibledeunelementodefiniendouna
zona rectangular y slo es aplicable en elementos cuya posicin se ha fijado
comoabsolute.Lasintaxisesas:
clip: rect(0 200px 100px 0);
Estodejaravisibleunrectnguloque,respectoalelementoenelqueseaplique,
empiezaa0pxdelapartesuperior,llegahastalos200pxhacaladerecha,100px
haciaabajoy0pxdesdelaizquierda(osea,cuatrocoordenadasenelsentidode
lasagujasdelrelojempezandodesdearriba,comosiempre)
PuedesverunejemplocompletoconestareglaCSS:
.caja { width: 25%;
padding: 5px;
position: absolute;
clip: rect(0 200px 100px 0);}
Pgina 53
HTML & CSS
YestecdigoHTMLquelausa:
<div class="caja">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</div>
Ylamismaadvertenciadesiempre:recuerdaquelapartequenoesvisiblese
puedeverconlaopcindeVercdigodelnavegador!
5.4.OTRASPROPIEDADES
Cambiarelaspectodelpunterodelratn
Podemoscambiarelaspectodelcursorcuandopasamossobreunelementocon
lapropiedadcursor.Losvaloresposiblesysuaparienciason:
auto.Elnavegadordeterminaporsmismoelcursorsegnelcontexto.
crosshair.Elcursormuestraunacruz.
default.Elcursorpordefectodelsistemaoperativo,amenudounaflecha.
eresize.Cursorapuntandohaciaeleste.
neresize.Cursorapuntandohaciaelnoreste.
nwresize.Cursorapuntandohaciaelnoroeste.
nresize.Cursorapuntandohaciaelnorte.
seresize.Cursorapuntandohaciaelsureste.
swresize.Cursorapuntandohaciaelsuroeste.
sresize.Cursorapuntandohaciaelsur.
wresize.Cursorapuntandohaciaeloeste.
help. El cursor indica una ayuda. A menudo se muestra un signo de
interrogacin.
move.Elcursorindicaunobjetoquesepuededesplazar.
pointer.Elcursorpresentaundedoqueindicaunenlace.
progress.Elcursormuestraunaflechaconunrelojdearena.
text.Elcursorindicaqueesposibleseleccionareltexto.
wait. El cursor indica una progresin. A menudo se muestra un reloj de
arena.
url.Especificaunarchivodondeseencuentralaimagenquesedeseausar
comocursor.ElarchivodeimagenespecificadoenlaURLdebetenerel
formatocur(cursor)oani(cursoranimado).
Unejemplo:
.caja { width: 50%;
padding: 5px;
cursor: crosshair;}
Pgina 54
HTML & CSS
Alterandosiunelementoesdebloqueodelnea
Lapropiedaddisplaynospermiteredefinirelcaracterdeunelementocomode
bloque o de lnea. block, inline o none. son los valores ms usados. Los dos
primeros son autoexplicativos. El tercero hace que el elemento no se muestre
pero,alcontrariodeloqueocurraconlapropiedad visibility yelvalor hidden,
ahoraelespacioqueocuparaelelementonosereserva.Este,sinembargo,sigue
visiblealdaralaopcindevercdigo.
Una utilidad habitual de esta propiedad es mostrar uno al lado del otro los
elementosdeunalistapara,porejemplo,construirunmen(ampliaremoseste
usoenuncaptuloposterior):
li{ display: inline;
list-style-type: none; }
Enrealidadlapropiedaddisplayesmuchomscomplejaytieneotrasopciones
disponibles, pero no vamos a detenernos a verla. Existe una buena referencia
acercadeellaaqu:
http://www.librosweb.es/referencia/css/display.html
Modificandoelaspectodelosbordesdelasceldasdeunatabla
Las propiedades bordercollapse y borderspacing controlan la forma en que
vemoslosbordesdeunatabla.Laprimeratienedosposiblesvalores:collapsey
separate.Enelprimercasolosbordesadyacentesseunirnenunoslosiempre
queseaposiblemientrasqueconelsegundovalorlaseparacinentrebordesse
controlar mediante la propiedad borderspacing. El valor por defecto es
separate.
borderspacing indica el espacio que habr entre los bordes de celdas
adyacentes,porejemplo:
border-spacing: 2px 0;
Siseindicandosvaloreselprimerohacereferenciaalaseparacinhorizontalyel
segundo a la vertical. En el caso de indicar un slo valor se aplica a ambas
distancias
Por ltimo, la propiedad emptycells tiene dos posibles valores (show o hide)
controlaqueseveanonolosbordesyfondodelasceldasvacasdeunatabla.El
valorpordefectoesshow.
Pgina 55
HTML & CSS
6.SELECTORESAVANZADOS
Aunquehemosdichoqueprcticamentecualquierpginawebpuedehacerse
con los cinco selectores bsicos que ya conocemos, existen algunos que se
llaman avanzados que nos van a permitir, bien simplificar algunas tareas de
aplicacindeestilosobienpermitirnosalgunosefectosimposiblesdeconseguir
deningunaotraformacomoeselcasodelautilidadproporcionadaporalguna
delaspseudoclases.Lospresentaremosenlassiguientespginas.
Selectordehijos
Elselectordehijosesmuysimilaralselectordescendienteperoesmuchoms
especfico.Cuandousounselectordescendiente,porejemplop.destacadoslo
meimportaqueelelementopertenecientealaclase destacado seencuentre
dentrodelelementop,sinimportarmecuanprofundoseencuentredentrodel
rboljerrquicodeetiquetasdeldocumento.Siusoelselectordehijoesporque
quieroqueelelementoconlaclasedestacadoseahijodirectodelelementopy
noundescendientecualquiera.Ysesimbolizaas:
p > .destacado {color: purple; }
Selectordehermanosadyacentes(oadyacente,sinms)
El selector de hermanos es aquel que nos permite seleccionar elementos que
compartenelmismopadreyestnadyacentesunoalotro.Enelsiguientegrafico
podemos ver destacados los hermanos de un HTML sencillo ya visto en otros
ejemplos:
Paraaplicarundeterminadoestiloalprimerprrafodespusdeuntitulardenivel
1,usaramoslasiguientesintaxis:
h1 + p {text-indent: 2.5em; }
Pgina 56
HTML & CSS

El selector de hermanos es una forma muy til de crear estilos para ciertas
combinacionesdeelementosmuyutilizados:elprimerprrafodeuncaptulo,el
primerprrafoposterioraunatabla,etc.Tambinestilparaseleccionartodos
loselementosmenoselprimeroenunasecuenciadeterminada.Porejemplo:
p + p { text-indent: 1.5em; }
Selectordeatributos
Losselectoresdeatributosnospermitenaplicarestilosadeterminadoselementos
enfuncindelosatributosqueacompaenalaetiquetaHTMLodelosvalores
quetengandichosatributos.Sinosparamosapensar,enrealidadlosselectores
declaseodeIDsonunaespeciedeselectoresdeatributoporqueaplicanestilos
en funcin del valor de un atributo (class o ID, respectivamente), as que no
vamosavernadademasiadonuevoenesteapartado.
Existencuatrotiposdiferentesdeselectoresdeatributo.Losprimerosseleccionan
loselementosenfuncindeundeterminadoatributoindependientementedesu
valor:
td[rowspan] {background-color: black; color: white; }
Lossegundosseleccionanunelementoenfuncindeunatributoconunvalor
determinado:
a[href="http://www.google.es/"] {color: red; text-weight: bold; }
La tercera clase de selectores de atributos realiza su seleccin en funcin del

atributoydelaexistenciadeundeterminadovalorperoquenotieneporquser
unico,sinosimplementeaparecerenunalistaseparadaporespacios:
div[class~=alerta] {color: red;}
Podemoscorrerelriesgodepensarquesimplementeesunaformadehacerms
complicado lo que ya sabemos hacer con otros selectores ms simples. Por
ejemplo,estasdefinicionessoncasiidnticas:
div.alerta {color: red;}
div[class=alerta] {color: red;}
div[class~=alerta] {color: red;}
Perotambinpodemospensarenotrasposibilidadesmsinteresantes:
img[alt~=ilustracin] {border: 2px solid;}
table[summary~=2010] {background-color: green;}
*[title~=importante] {color: red; cursor: crosshair; }
Elcuartotipodeselectordeatributoapenastieneutilidad.Permiteseleccionar
elementos con cierto atributo y que incluyen un determinado valor como el
primerelementodeunalistaseparadaporguiones.
*[lang|="es"] { color: blue; }
Elanteriorejemploseleccionaraatodosloselementosconunatributolangque
Pgina 57
HTML & CSS

empiece por es (por ejemplo esES, esMX, esAR, etc.) De hecho esta es su
principal (y casi nica) utilidad: la seleccin de elementos segn los cdigos
estndaresdeidiomas.
6.1.PSEUDOCLASESYPSEUDOELEMENTOS.
ExistenciertosestadosocaractersticasdenuestrodocumentoHTMLalosquees
tilyapropiadoaplicarleunestilodiferenciado:unenlaceyavisitado,laprimera
letra de un prrafo, etc. Esto se consigue mediante las pseudoclases. Para
identificarquehablamosdeunapseudoclaseenunareglaCSSusamoslosdos
puntos comosigno diferenciadoryestaspuedenaplicarsesobreselectores de
tipo,declase,etc.Veremosejemplosenseguida.
Y una nota: en algunos textos se hace una separacin entre pseudoclases y
pseudoelementos mientras que en otras se engloban todas bajo la misma
categora. Aqu haremos la diferenciacin clsica porque, si bien no existen
grandesdiferencias,siqueesnecesariohacerladistincinalahoradecalcularla
especificidaddelasreglasCSS.
Pseudoclases
Las pseudoclases son aquellas que se aplican fundamentalmente sobre los
selectoresdeenlace(aunquealgunadeellaspudeaplicarsetambinsobreotros
elementos).Setratade:link,:visited,:hover,:activey:focus.
Lapseudoclase :link hacereferenciaaunenlacequeannohasidovisitado,
mientrasque :visited hacereferenciaaloopuesto,esdecir,losenlacesqueya
hansidovisitadosporelusuario.Dosejemplos:
a:link {color: green; background-color: yellow;}
a:visited {color: yellow; background-color: green; }
Lapseudoclase:hovernosdictalosestilosaaplicaralpasarelratnporencima
delelementoalqueelselectorhacereferencia.Sesueleusarfundamentalmente
conenlacesperoesaplicableacualquierotroelemento:
a:hover, p.destacado:hover{font-weight: bold; }
em:hover {color: blue;}
:active es una pseudoclase cuyos estilos se aplican al hacer click sobre un

elementooactivarlomediantelateclaIntrocuandotieneelfoco:
h1:active {color: orange; background-color: black;}
Como imaginamos, muchas de estas propiedades pueden activarse

simultaneamente:unenlacepuedehabersidovisitadoy,podemospasarelratn
porencimadel,etc.ELordenenquesecolocanenlahojadeestilosesporello
fundamental para aplicarlos correctamente cuando queremos aplicar reglas
distintivasatodosellos:
a:link {color: blue;}
a:visited {color: green;}
a:hover {color: orange;}
Pgina 58
HTML & CSS

a:active {color: red;}
Podemos aplicar tambin reglas a dos pseudoclases simultaneamente. Por

ejemplo, la siguiente regla se aplicara sobre un enlace visitado sobre el que
hacemosclick:
a:visited:active {color: black; background-color: orange;}
Porltimo,:focusesunareglaqueseaplicacuandoelelementotieneelfoco,
es decir, cuando se activara si pulsamos la tecla Intro. Para poder usarla
debemosdedefinirqueelementostienenelfocoennuestrapginayelordenen
elqueloreciben(cadavezquepulsamossecuencialmenteeltabulador).Estose
hace mediante el atributo tabindex que podemos usar en las etiquetas a
(enlaces)denuestrawebposibilitandoaslanavegacinsinnecesidadderatn.
Porejemplo:
<p>Un enlace a <a href="http://www.google.es/" alt="Google"
tabindex="1">Google</a>, otro a <a href="http://www.bing.es" alt="Bing"
tabindex="2">Bing</a> y un tercero a <a href="http://www.yahoo.es"
alt="Yahoo" tabindex="3">Yahoo</a>.</p>
Yahorayasipodemosverlosefectosdelapseudoclase:focus
a:focus {background-color: black; color: white; font-size: 1.8em;}
La pseudoclase :firstchild nos permite seleccionar un determinado elemento

siempreycuandoseaelprimerhijodesupadre.Porejemplo,veamoslasreglas
siguiente:
p:first-child {color: blue; }
p:first-child em {background: yellow; }
Laprimeraseleccionayaplicaestiloaunprrafosiempreycuandoseaelprimer
hijodesupadre,mientrasquelasegundahacelomismosobrelascursivasdeese
mismotipodeprrafos.
Existeunaltimapseudoclasedeaplicacinmuylimitadallamada:langquenos
permiteaplicarestilosdiferenciadosenfuncindelidiomaenqueestescritoel
elemento.Porejemploas:
p:lang(es) {color: red; }
Aunquetienenunusomuysimilaralvistoenunodelosselectoresdeatributo,
existe una ligera diferencia. El selector de atributo es aplicable slo a los
contenidos que usen el atributo lang, mientras que esta pseudoclase sera
aplicable tambin en otras circunstancias, como por ejemplo si el propio
navegadorfuesecapazdeanalizarelcontenidoydetectarelementosescritosen
diferentesidiomas(cosaque,porelmomento,nohacendemasiadobien...).
Pseudoelementos
Losdosprimerospseudoelementosqueveremossonaplicablesaladecoracin
Pgina 59
HTML & CSS

de prrafos de texto. Se llaman :firstletter y :firstline y sus nombres son
autoexplicativos
p.decorado:first-letter {margin-right: 4px; font-size: 4em; color: red;
font-weight: bolder;}
p.decorado:first-line {font-variant: small-caps; font-weight: bold;}
Existenotrosdospseudoelementosllamados:beforey:afterqueusadosjuntocon
la propiedad content nos permiten insertar contenido (texto, imgenes, etc.)
antesodespuesdeunelemento.
p#insert1:after{ content: " (TM Marca Registrada) ";}
p.insert2:before{ content: url(icon_new.gif);}
Enlosanterioresejemplos,elprimeroinsertaeltextoqueapareceentrecomillasal
finaldecadaprrafoidentificadoconelselectordeIDinsert1,mientrasqueel
segundo inserta el gif animado icon_new.gif delante de cada prrafo
identificadocomopertenecientealaclaseinsert2.
Pgina 60
HTML & CSS
7.ALGUNOSDISEOSYEFECTOSTILES
Con HTML slo pueden dibujarse cajas. Cajas y rectngulos absolutamente

cuadrados.Estoesverdadal99.00%(sobretodohastalaaparicindeHTML5)
pero,sinembargo,noesesoloquevemosenlaweb.Existennumerosostrucosy
efectosdediseoparaengaaralespectadorydarlelasensacindequeest
viendoalgoconuncontenidomuchomselaboradodeloqueenrealidadtiene
delante.Enestecaptuloaprenderemos adibujarcajasmucho mejoresdelas
que ya conocemos, pero tambin a decorarlas de forma que parezcan otras
muchascosas.Nosapoyaremosparaelloenlaampliacoleccindeejemplos
queacompaanalcaptulo(yque,siannolohashecho,puedesdescargarte
desdehttp://blog.unlugarenelmundo.es/hechoencasa/)ydesdeaqulosiremos
analizandounoaunoeindicaremoscualessonlasclavesdediseoqueusamos
enlosmismos.
7.1.DISEOSDEANCHOFIJO,LQUIDOS(OFLUIDOS)YELSTICOS
Lastresestrategiaspurasdeafrontarundiseowebson:diseosdeanchofijo,
deancholquido(ofluido)odeanchoelstico.
Losdiseosdeanchofijoconfiguransusmedidasmediantepxeles.Sonfcilesde
realizarynotenemosquehacerdemasiadaspruebasniajustesparaasegurarnos
quesevernbien.Puestoqueyacasinoexistenmonitoresconresolucininferior
a800pxelesdeanchosesueletomarcomoestndarunanchode760o780
pxelesparaelcontenido.
Losdiseosdeancholquidosonaquellosquetrabajanmedianteporcentajes.
Aprovechanmuchomejorlasuperficieenlaspantallasgrandesperonosexigen
mspruebasparaasegurarnosdequetodosevecorrectamenteenresoluciones
bajas.
Losdiseoselsticossonlosmsdifcilesdeimplementar.Basansusmedidasenla
unidad em, de forma que si incrementamos el tamao del texto, tambin
aumentamosproporcionalmentelasdimensionesdenuestrodiseo.
Nos encontraremos por ah muchos modelos hbridos pero estos son los
fundamentales.Porejemplo,sehabladeundiseohbridolquidofijocuandolo
fundamentaldeldiseoeslquidoperoexisteenlalgnelementodeanchofijo.
Porejemplo,podemospensarenundiseoadoscolumnasdondeunadeellases
de ancho fijo (para emplazar mens, publicidad, etc.) mientras que la otra,
destinadaaloscontenidos,tieneundiseolquido.
Ejemplo1Cajas
Enelejemplonmero1nosencontramoscuatrodiseosdecajasbsicosdonde
aprendemosasolventardiferentesproblemas.Hastaahoralascajasconlasque
habamostrabajado(enelcaptulo5)tenanelancho,obienfijo,obienlquidoy
elaltofijo.Enelmundorealnecesitamosdisearcajasdealtovariableenfuncin
delcontenidoypartiendodelapremisadequenoconocemoseltamaodeese
contenido.
Pgina 61
HTML & CSS

Si metemos dos columnas dentro de una caja contenedora, que suele ser la
estrategia habtual, y no definimos alturas fijas las cajas desbordarn al
contenedordescuadrandoeldiseo.Tenemosvariasformasderesolveresto:
Poner un pie al diseo. Este pi debera de llevar definida la propiedad
clearpararomperelefectodelosfloat.Sinoqueremostenerpionolo
necesitamospodemosponerunoinvisible.
#pie{
color: white;
width: 760px;
padding: 10px;
}
Unasegundasolucinesusartambinlapropiedadfloatenelcontenedor.
#contenedor2 {
border: 2px dotted black;
margin: 5px auto;
width: 780px;
float: left;
}
Unaterceraopcinseradefinirlapropiedadoverflowaautoohiddenen
lacajacontenedora:
#contenedor {
margin: 5px auto;
width: 780px;
overflow: auto;
}
Encontramosotroproblemacuandoqueremoscolocartresomscolumnas.
Hastaahoraslohemosusadodosycolocamosunaaladerechaconfloat:right
y otra a la izquierda con float: left. En realidad, si ajustamos bien el espacio
podramoshaberusadodosvecesunouotroporquelosfloatseapilaranen
horizontal llenando todo el espacio disponible. Esto nos da la idea de como
hacerlo con, por ejemplo, tres columnas: podemos apilar la central a la
derechaoalaizquierdapero,esosi,calculandosiemprebienlasdimensiones:
#izquierda2 {
float: left;
width: 31%;
padding: 1%;
}
#centro2{
float: left;
width: 32%;
padding: 1%;
}
#derecha2 {
float: right
width: 31%;
padding: 1%;
Pgina 62
HTML & CSS

}
Observemosunacosaenelejemploanteriorenelque,comovemos,eldiseo
delanchoeslquido.Elanchototalsehacalculadoparallenarcompletamente
elcontenedorloves?Elpaddingeselespaciointeriorentreelcontenidodela
cajayelbordedelamismaysedejatantoaderechacomoaizquierda,esdecir,
un2%porcadacolumna.Entotalhacenel100%Silascolumnastuvieranbordes
pasaralomismo:unbordedel.5%ocuparaun1%porcadacolumna.Esunerror
muycomnhacermalestosclculos,tantoendiseoslquidoscomofijos,yen
ese caso las cajas se desbordaran, quedaran descuadradas, con mrgenes
antiestticos,etc.
Enlosdosejemplosanterioreshemosusado,intencionadamente,coloreschillones
paracadacolumnaparaquequedeclaroquelacolumnamsalta,seacual
sea, es la que marca el alto total del diseo. Puedes hacer pruebas de esto
sumandooquitandocontenidoenunasuotras.Elproblemaquetenemoscon
estos diseos es que, o el fondo es blanco para todas, o si queremos usar
imgenesocoloreselresultadoesbastantepocoprofesional.Idemsiquisiramos
usarbordesseparadoresparacadacolumna.Cmolosolventamos?Enlacaja
nmero tres de este ejemplo tenemos una forma rpida de hacerlo pero slo
vlidaparadiseosdeanchofijo:usarunaimagendefondoparaelcontenedor
denuestrascolumnasdondevandibujadoslosfondosyseparadoresdecada
unadeellas.Tanfcilcomoesto:
#contenedor3 {
background-image: url(fondo3.jpg);
margin: 5px auto;
width: 780px;
overflow: auto
}
Laimagenainsertardebaradeseralgoas:
Ynuestratablaas:
Pgina 63
HTML & CSS
Perolasolucinrealvlidaparacualquiertipodesituacionesnoesesta.La
tieneseneldiseonmero4deesteejemplo1.Eltrucoconsisteenusaruna
estructuracondoscontenedoressiguiendolossiguientespuntos:
El primer contenedor tendr, como siempre, el ancho total del diseo y
llevar como color de fondo el que queramos dar a la columna de la
izquierda.
Elsegundocontenedoriradentrodelprimeroconunfloat:right;,ocupando
el ancho de la columna de la derecha y con el color de fondo que
queramosquelleveesta.
Dentrodeestesegundocontenedormetermoslasdoscolumnas.Ladela
derechaocupandoelanchodedichocontenedor.Ladelaizquierdacon
lapropiedad position:relative; yun margin:left; convalornegativopara
desplazaresacolumnaalaposicinalaizquierdaquelecorresponde.El
HTMLsimplificadoalmximoquedaraas:
<div id="contenedor4">
<div id="contenedor4-2">
<div id="izquierda4">Lorem ipsum dolor sit amet</div>
<div id="derecha4">Lorem ipsum</div>
</div>
</div>
YelCSS:
#contenedor4 {
Pgina 64
HTML & CSS

width: 780px;
margin: 5px auto;
color: white;
background-color: purple;
overflow: auto;
outline: 3px solid black;
}
#contenedor4-2 {
width: 500px;
float: right;
}
#derecha4 {
width: 480px;
float: right;
padding: 10px;
color: black;
}
#izquierda4 {
width: 260px;
float: left;
padding: 10px;
position: relative;
margin-left: -280px;
}
Ejemplo2Trescolumnas
Ysinecesitamostrescolumnas?Elsistemaseramuysimilaralvistoenelltimo
casoconlasalvedaddequeahoranecesitaramosuncontenedorporcadauna
Pgina 65
HTML & CSS

de las columnas (para darle color al fondo de cada una de ellas de forma
diferenciada)ytodaslascolumnasrealesconcontenidoirandentrodelltimo
contenedor,aladerecha,conlosdesplazamientosalaizquierdaqueveamos
oportunos.Yaspodramosseguirconcuatro,cinco,etc.
Enelejemplo2tieneseldiseotpicoatrescolumnasdelmismoanchoalquese
haaadidoalgoqueahoraestdemodaentodoslosdiseosweb:uncintillofijo
en la parte superior de la pgina donde habitualmente se sitan enlaces a
mens,alperfildeusuario,cerrarsesin,etc.Estoseconsiguedeformafcilcon
una caja en la que hemos definido dos propiedades: position: absolute: y z
index:99;
#cintillo {
width: 100%;
height: 18px;
padding: 2px 10px;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: gray;
color: white;
font-weight: bolder;
font-family: monospace;
}
Ejemplo3Diseodealtoyanchofijo
Losdiseosdealtoyanchofijosnotienenmayorcomplejidadyseincluyeeste
Pgina 66
HTML & CSS

ejemplosloparacompletarlacoleccindecasosposibles.
Ejemplos4y5Diseosdeancholquido
Lacomplejidaddeldiseodeancholquidoconmltiplescolumnasresideenlos
clculos paraajustarestas sinquesedesborden o descuadren almodificarel
anchodelnavegador.Enelejemplo4tienesuncasoatrescolumnasenelquese
hatratadodedetallarenloscomentarioslaformaderealizarestosclculos.El
ejemplo 5 sera exactamente igual pero aqu ya usamos adicionalmente la
estrategiadecontenedoresanidadosquenospermitequetodaslascolumnas
tengan la misma altura independientemente de cual sea la que tenga ms
cantidad de contenido. En ambos casos usamos, adems, dos columnas
auxiliaresparausarlascomoseparadoresentrelascolumnasprincipales.
Ejemplo6Diseofijo,fluido,fijo
En este ejemplo presentamos una estructura en la que las columnas laterales,
derechaeizquierda,sondeanchofijoyeslacolumnacentrallaquemodificar
suanchodeformafluida(porcentual)enfuncindelanchodelnavegador.
Lostrucosdediseosonlossiguientes:
Suponemosqueelcontenidoprincipalestarenlacolumnacentrallacual
siempretienequeexcederenlongitudalaslaterales.Encasocontrarioel
diseonopodrasertansimplecomosepresentaaqu.
Lascolumnaslateralesllevantrespropiedades: position:absolute;top:0; y
luego,segncorresponda, rigth:0; paralacolumnadeladerechay left:0;
Pgina 67
HTML & CSS

paraladelaizquierda.
Elpaddingaderechaeizquierdadelacolumnaprincipalcentralhadeser
fijoysuficientecomoparacubrirelespacioqueocupanlascolumnas
laterales.
Ejemplo7Separadoresentrecolumnastransparentes
Enesteejemplousamos unavariantedelmtodovisto paraqueelseparador
entrelascolumnasseatransparenteydejeverelfondodelawebque,eneste
caso,esundegradadodecolorvertical.Paraelloelcontenedorprincipalocupa
elespaciodelacolumnadeladerecha,elsecundario,dentrodeeste,tienelos
atributos de position: relative; y marginright: 260px; para desplazarlo a la
derecha,dejandounespaciovacoentreambosqueactuarcomoseparadory
dejarverelfondodelaweby,porltimo,dentrodeestesegundocontenedor
alojaremoslasdoscolumnas,unadeellas,laizquierda,denuevocon position:
relative;yunmarginleft:710;paradesplazarlaasuposicinenlaizquierda.
Ejemplo8Sombrasydiagonales
Elejemplo8estextraidodirectamentedelawebyesuncasosencillodecomo
introducirsombras,bordesredondeadosylneasdiagonalesennuestrodiseode
formasencilla.Elefectoseconsiguemediantetresimgenes:unadecabecera
queintroduceunosbordesredondeadosyunadiagonalquecruzadepartea
parteeldiseo,unadepiconlosbordesredondeadosylasombrainferior,yotra
que se repite verticalmente a lo largo de todo el cuerpo del diseo para
completar el efecto de sombreado. La eleccin de introducir la imagen de
cabeceraenelhtmlynoenelcssesdiscutible,perohequeridodejareldiseo
Pgina 68
HTML & CSS

talycomoloencontrenlawebconlosmnimoscambiosparasuestudio:
CabeceradeldoumentoenelHTML:
<div id="header">
<img src="eldiario.png" width="883" height="260" alt="eldiario.es">
</div>
<div class="article">
</div>
RepeticindelaimagenenelcuerpodeldiseoenelCSS:
div.article {
padding: 0px;
width: 883px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-image: url(fondo-eldiario.png);
background-repeat: repeat-y; }
Pideldocumento,enelCSS:
#abajo {
background-image: url(fondo-abajo-eldiario.png);
background-repeat: no-repeat;
height: 25px;
margin: 0px;
padding: 0px; }
7.2.DISEODETABLAS
Elejemplo9muestracomodarunaspectoprofesionalaunatablaconapenas
unas pocas propiedades. El fondo del diseo tiene un degradado de color
vertical conseguido mediante la repeticin de una imagen de fondo. Las
propiedades, como puedes ver, no tienen nada especial ms que una
adecuadautilizacindetipografas,coloresyespaciados.Tansolohayunanota
especialatenerencuenta.Latablausalapropieadborderspacing:01px;que
defineelespaciodeseparacinentreceldasadjacentes.Elprimervaloreselque
tendrencuentaparaelespaciadohorizontalyelsegundoparaelvertical(si
hubiera slo un valor aplicara a ambas magnitudes). Con esto conseguimos
anularelespaciadohorizontalpordefecto(deunpixel)quedejaraunpuntoen
blancoentreceldayceldaenlaslneashorizontalesquedelimitanlasfilas.Porlo
demsnoexistenadamsaresear.
Pgina 69
HTML & CSS
7.3OTROSTRUCOS
Ejemplos10y11Transpariencias
Losefectosconimgenestranslcidasyqueparecenfijarsealfondodelaweb
mientras que el contenido se desplaza son muy utilizados y fciles de
implementar.Enestosdosejemplospodemoscomprobarlo.Lasbasesdeestetipo
dediseosonlassiguientes:
Debemosdecontarconunjuegodeimgenesespecialmentepreparadas.
Todasellassimilaresperoconalgnefectodiferenciador
Situaremoscadaunadeestasimgenesenunacajadiferentedeforma
queelcolordefondodelacaja(backgroundcolor)coincidaconelcolor
defondodelaimagen
Pgina 70
HTML & CSS

Fijaremostodaslasimgenesdelamismaformausandolaspropiedades
backgroundattachmentybackgroundposition
EnelsiguienteCSSextraidodelejemplo1semuestranestaspropiedadesen
formato comprimido salvo en la caja correspondiente al body del
documento:
body {
background-color: #ded;
background-image: url(world-1.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 1% 5%;
}
div#contenedor {
background: white url(world-2.jpg) top left no-repeat fixed;
width: 800px;
margin: 15px auto;
border: 1px solid black;
padding: 40px;
}
div#contenedor h2 {
background: #cbb196 url(world-3.jpg) top left no-repeat fixed;
color: white;
padding: 20px;
margin: 20px auto;
}
Pgina 71
HTML & CSS
Ejemplo12BoxPunch
El Box Punch es otro ejemplo muy socorrido para disimular el hecho que ya
conocemos de que slo podemos trabajar con cajas perfectamente
cuadrangulares.Mediantelailusindecombinarcoloresdefondoybordesen
diferentes cajas superpuestas se consigue el efecto de hacer creer que estas
cajassonmsirregularesdeloqueenrealidadloson.
Pgina 72
HTML & CSS

Enelejemplo12tenemos4variantesdeesteefectoaplicadosaconseguiruna
letra capital destacada en un texto y un quinto caso para crear un texto
destacado, pero con un poco de imaginacin se nos pueden ocurrir muchas
otrasaplicaciones.Lasclavesdediseosonlassiguientes:
Trabajamossiemprecondoscajassuperpuestasyunadefondo.Lacajaen
primerplano,laquepretendedarelefectodearrancarunbocadoala
queestensegundoplanodebedetenerelmismocolorqueelfondo.En
unadelasvariantesquevemosnoesas:lacajaenprimerplanotieneel
mismocolorqueladesegundoyeselbordedeladeprimerplanolaque
tieneelmismocolorqueelfondo.
Usamos float enlacajadeprimerplanoparasituarlay margin y padding
paraestablecerunaseparacinconeltextoprincipal.
Cuando lacaja donde est el texto principal lleva un borde usamos un
margendevalornegativoenlacajadeprimerplanoparasuperponerlaa
este y borrarlo. El margen negativo tendr el mismo tamao que el
borde.
Ejemplos13y14Tooltips
El ejemplo 13 nos muestra como hacer tooltips, ventanas emergentes que nos
muestraninformacinalpasarelratnporencimadealgnpuntodefinidode
nuestraweb.Enelcasodelejemplo13estasventanassemuestransiempreenel
mismopunto,enelpidelaweb.
En el ejemplo 14 se muestran en un punto dependiente del lugar por el que

pasamoselratnyqueactivasuvisualizacin.
Pgina 73
HTML & CSS
Lasclavesdeestetipodediseossonestas:
Tantoeltextoquedisparaelefectocomoeltextoquesemostrarenel
tooltip aparecern en el HTML como contenidos de elementos
diferenciadosyanidados.Enelejemplo13usamosdosspan:
<p>En un <span class="nota">lugar de la Mancha<span class="tip">lugar: no
con el valor de sitio o paraje, sino como localidad y en especial
pequea entidad de poblacin, en nuestro caso situada concretamente en
el Campo de Montiel (I, 2, 47, y 7,93), a caballo de las actuales
provincias de Ciudad Real y Albacete. Seguramente por azar, la frase
coincide con el verso de un romance nuevo.</span></span>, de cuyo nombre
Yenel14unspandentrodeuna:
<a href="http://www.yahoo.es/">Yahoo <span class="txtayuda">1.219
pginas<br/>0,5%</span></a>
Eltextoqueaparecerenlanotasemarcacomoinvisibleusandola
propiedaddisplay:
span.nota span.tip {
display: none;
font-size: .6em;
font-weight: normal;
color: black;
}
Al pasar el ratn sobre el elemento disparador (usaremos para ello la

pseudoclasehover)aplicaremosunnuevoestiloalanota.Fijarosbienenla
construccindelselectorporqueeslomsimportantedetodoelefecto.En
esecasoreescribimoslapropiedad display:block paraquesemuestrela
notayusamoslaspropiedadesadicionalesquecreamosoportunassegn
comoydondequeramosmostrardichanota.
Pgina 74
HTML & CSS
span.nota:hover span.tip{
display: block;
/* La nota ir siempre en la parte inferior de la pantalla */
position: fixed;
width: 96%;
margin: 1%;
padding: 1%;
bottom: 0;
left: 0;
background: #cde;
border: 1px solid gray;
}
Enelcasoanteriorlanotairsiempreenlaparteinferiordelapantalla
(ejemplo13)yporesousamoslapropiedadposition:fixed.bottomyleft
marcaranellugardeaparicin.Enelejemplo14quebuscamosuna
posicindiferenteparacadanotausamosposition:absolute.
ul.menu li a:hover span.txtayuda {
display: block;
width: 10em;
position: absolute;
top: 0;
left: 100%;
margin: -1em 0 0 1em;
padding: 1em;
background: #cde;
}
Ejemplos15y16Mens
De los tooltips a los mens slo hay un pequeo paso. De hecho el anterior
ejemplo14podraconsiderarseyaunpequeomenmuyprimitivo
Pgina 75
HTML & CSS

Elejemplo16tieneademslapeculiaridaddequeapenenascambiandounas
lneasenelCSSpodemostransformarloenunmenhorizontaloverticalanuestro
antojo.SeadjuntanlasdosCSSnecesariasparacambiarentreunoyotromodelo:
Pgina 76
HTML & CSS
Ejemplo17Esquinasredondeadas
ExistenmuchostrucospararealizaresquinasredondeadasconHTML4yCSS2.El
mssencilloconsisteenusarimgenesemplazadasdentrodeunacajamediante
la propiedad position con valor absolute. La caja debera de tener un borde
slidoylaimagendelaesquinadeberadeestarespecialmentepreparadapara
integrarseconelcolordelfondodelapginaydelacajay,adems,morder
el borde de la caja en la que se encuentra para hacer desaparecer
parcialmentelasesquinasdelbordecuadradohabitualdeesta.
Con HTML5 tenemos otros mecanismos ms fciles para hacer bordes
redondeadossimples,perosibuscamosefectosmsllamativos(comoalgunode
losqueacompaanaesteejemplo)tendremosqueseguirusandoestemtodou
otrosimilar:
Ejemplo18Sprites
La carga de una pgina web implica que cada elemento individual que la
compone se recuepera mediante una peticin al servidor. En pginas con
muchasimgenespequeasenlasquequeremosunacargaexcepcionalmente
rpidasesueleusaruntrucoparamejorarelrendimientoqueconsisteenagrupar
variasdeestasimgenesenunaslayseleccionarencadamomentoeltrozode
imagen que queremos ver mediante la propiedad backgroundposition. Se
conoceaestatcnicacomodeSpritesyenelsiguienteejemplopodemosver
comousarla.
Pgina 77
HTML & CSS
ElejemploqueseacompaausadostiposdeSprites:unoconslotresimgenes
y otro, ms complejo, con seis en el que el desplazamiento de la propiedad
backgroundposition implica moverse tanto en el eje horizontal como en el
verticaldelaimagen.
Ejemplo19Solapas
El efecto de solapas, ampliamente usado en la web actual, es similar en su
construccin inicalal de un men. El truco consiste en mantenemos una caja
diferente por cada contenido y alternar entre su visualizacin o no, segn
corresponda,mediantelapropiedad display ylosvaloresdelamisma block o
none,respectivamente.
Pgina 78
HTML & CSS
Ejemplos20y21Contorneos
Elcontorneodeimgenes,algotpicodelasrevistas,esunefectosencillopero
laborioso. La forma ms sencilla de hacerlo consiste, bsicamente, en
diseccionarlaimagenacontornearenrodajasdemsomenosalto(segnlo
finoquequeramosqueseaelefecto)yanchovariabley,simplemente,dejarque
lascajasdenuestrotextoseapoyenlateralmenteendichasimgenes,bienala
izquierda,aladerechaoaamboslados.
Pgina 79
HTML & CSS
Pgina 80
HTML & CSS
8.FORMULARIOSYJAVASCRIPT
Javascript es un lenguaje de programacin interpretado por el navegador y

creado por Netscape. Su funcin original era mejorar la funcionalidad de los
formulariosenlosdocumentosHTML.Hoyendaesellenguajamsusadoenel
lado del cliente de una aplicacin web para aportar a estas dinamismo e
interactividad con el usuario. Contina muy ligado al funcionamiento de los
formulariosperoyanoselimitaaesoenexclusiva.Adems,lanuevaversindel
estndard HTML (HTML5) incluye multiud de nuevas libreras en Javascript que
amplianenormementelafuncionalidaddeunapginaweb.
El programa ms sencillo escrito en Javascript sera la siguiente versin del ya
clsicoHolaMundodondesehausadoparamayorsencillezelesqueletoque
usanlosdocumentosdeHTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" / >
<title>Hola Mundo en Javascript</title>
</head>
<body>
<script type="text/javascript" >
alert("Hola Mundo!");
</script>
</body>
</html>
El cdigo javascript es el contenido del elemento con la etiqueta script que
aparece en el ejemplo anterior. Es lo nico que aparece en el body, pero si
introducesotroselementoshtml(ttulos,prrafos,ocualquierotracosa)diferentes
antesy/o despusdelscript vers como laejecucindelmismo interrumpeel
renderizadodelapginaHTML.Hastaquenopulsemoselbotnqueapareceen
eldilogoydesaparezcaelmensaje,noproseguireldibujodelapgina.
8.1.FUNCIONESYEMPLAZAMIENTODELCDIGOJAVASCRIPT
AligualqueocurraconlosCSS,elcdigoJavascriptsepuedesituardediferentes
formasdentrodelHTML.Laformamsdirectaeslaquehemosvistoenelejemplo
anterior:directamenteenelpuntodelcuerpodeldocumentodondequeremos
queseejecute.Perosilasfuncionessonmscomplejasquemostrarunmensajeo
queremos reutilizarlas debemos de crear funciones y emplazarlas en una
ubicacindiferente.
8.1.1Funciones
Unafuncinesunapiezadecdigoquepuedeinvocarsedesdedistintospuntos
y en diferentes momentos. El cdigo que vimos en el ejemplo anterior slo se
ejecutacuandoelnavegadorestdibujandolapginayenelmomentoenque
leeeltrozodecdigoquelacontiene.Hagamosalgunoscambios:
Pgina 81
HTML & CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<script language="javascript">
function holamundo(){
alert(Hola mundo!);
}
</script>
</head>
<body>
<p>texto 1</p>
holamundo();
</script>
<p>texto 2</p>
holamundo();
</script>
<p>texto 3</p>
</body>
</html>
Hemos creado una funcin que hace exactamente lo mismo que antes y la
hemosemplazadoenlaseccinheaddenuestrohtml.Luegolahemosinvocado
dosvecesendistintospuntosdelrenderizadodenuestrapgina.Esevidenteque
setratadeunejemploenelquelainvocacinalafuncinocupalomismoque
lafuncinensi,peroimaginmosquenoesasyquesetratandevariasdecenas
delneasdecdigo.Ahoratienemssentidoverdad?
Como puedes observar, en algunos puntos se usa el argumento
language="javascript" yenotros type="text/javascript".Elnavegadorentender
cualquieradeellos(lamayora,incluso,loentendersinoponesninguno!)pero
locorrectoenlasltimasversionesdeHTMLserausarelargumentotype.
Lasfuncionestienen,adems,otraparticularidadyeslaposibilidaddequecada
ejecucin sea diferente gracias a la personalizacin que permite el paso de
parmetrosalasmismas.Hagamosunaterceramodificacinalcdigoanterior:
<!DOCTYPE html>
<html lang="es">
<head>
<script language="javascript">
function holamundo(texto){
alert(texto);
}
</script>
Pgina 82
HTML & CSS

</head>
<body>
<p>texto 1</p>
holamundo(Hola Mundo!);
</script>
<p>texto 2</p>
holamundo(He dicho ya eso de Hola Mundo?);
</script>
<p>texto 3</p>
</body>
</html>
CuandoundocumentoHTMLnecesitademuchasfuncionesenjavascriptoestas
son utilizadas desde diferentes pginas html lo ms cmodo, al igual que
hacamos con los css, es sacarlas a un fichero externo de forma que el
documento html slo queden las llamadas a las mismas. Veamos una ltima
versindelejemploanterior:
<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript" src="func.js"></script>
</head>
<body>
<p>texto 1</p>
holamundo(Hola Mundo!);
</script>
<p>texto 2</p>
holamundo(He dicho ya eso de Hola Mundo?);
</script>
<p>texto 3</p>
</body>
</html>
Yenelinteriordelficherofunc.jstendramosesto:
function holamundo(texto){
alert(texto);
}
8.2.FORMULARIOS
Elelementoquesirveparaidentificarunformulariollevalaetiquetaform.Dentro
deltendremosdiferenteselementosporcadaobjetoquequeramosmostraren
elmismo.Veamoselejemploelformulariomssencillo:
Pgina 83
HTML & CSS

<form name="form2ASI" action="respuesta.html">
<p><label for=nombre>Nombre:</label>
<input type="text" id=nombre name="cajanombre" /></p>
<p><input type="submit" value="Enviar" name="botonenv"
/></p>
</form>
Elelementoformtieneunnicoargumentoimprescindible(action)queindicalo
quehayquehacerparaprocesarelfuncionario.Enelejemploanteriorselepide
que cargue la pgina respuesta.html que en realidad no hace nada y slo
muestraunmensaje.Lonormalserallamaraunscriptcgiounafuncinjavascript
quevalidaralosdatos,aunapginaphpquelosproceseenelladodelservidor
o,muchomsrudimentario,enviarlosresultadosporcorreoelectrnicoconun
mailto (por ejemplo action="mailto:josemaria@uponaday.net"). En este ltimo
casodeberadeaparecertambinelargumento method ysuvalordeberade
serpost(loveremosacontinuacin).
Elargumentomethodindicalaformaenqueelformularioenvalosdatosqueel
usuariohaescritooseleccionadoenl.Tienedosvaloresposibles:getypost.Por
defectotomaelvalorget.
ElmtodogetenvalosdatosdelformularioconcatenadosalaURLdelapgina.
Los limita a 100 caracteres y es un mtodo muy til cuando, por ejemplo,
queremosguardarelresultadoenfavoritosoenvirseloaalguienporcorreo.La
URLqueobtendramosdespusdeescribirPepeypulsarelbotndeenviarenel
ejemploanteriordeberadeseralgosimilaraesto:
http://10.0.0.1/ej2/respuesta.html?cajanombre=Pepe&botonenv=Enviar
Elmtodo postnotienelmiteensuextensinyelresultadonoesvisibleparael
usuariopero,cuidado,esonoquieredecirqueseaunmtodoseguroparaenviar
informacinsensible.Ningunodeambosmtodosloespuestoqueelresultadode
rellenarlosdatosdelformularioseenviarenclaroancuandoconelmtodo
postnopodamosverlosdirectamente.
En los siguientes puntos iremos viendo uno a uno los distintos elementos que
puedenformarpartedeunformularioyalgunosdesusargumentosmsusados.
Lamayorpartedeellosusanlaetiquetainputeindicaneltipodeobjetodeque
setratamedianteelvalordelargumentotype.
8.2.1.Cajadeedicindetexto(type=text)
Comosunombreindica,sirveparaintroducirtextoconlarestriccindequeeste
nopuedetenermsdeunalnea.
<input type="text" name="nombre" size="20" maxlength="40"
value= "Escribe aqu tu nombre" />
El argumento size indica el tamao en caracteres de la caja mientras que
maxlength indica la longitud mxima que puede introducirse. value sirve para
introducir un valor por defecto que aparecer al cargar la pgina (en caso
Pgina 84
HTML & CSS

contrario aparecer en blanco). Cuando no queremos queel usuario edite el
campousaremoselparmetro readonly concualquiervalor(recuerdaqueen
XHTMLnoestpermitidolaminimizacindeatributosoatributossinvalor,asque
lo normal es poner readonly=yes o readonly=readonly aunque si ponemos
readonly=no o solamente readonly tambin deshabilitar la escritura en el
campo).Adems,puedenaparecerlosargumentos class e id quenosserviran
paraaplicarestilosmedianteCSS.Elargumentoidsirve,adems,paraasociarla
cajadetextoconunaetiqueta(vermsadelante).
8.2.2Cajadeedicindecontraseas(type=password)
Similaralaanteriorperoenestecasoloqueescribamossobreellaaparecer
camufladomediantepuntos,asteriscosoalgosimilar(segnelnavegador).Los
argumentosquepodemosusartambinsonlosmismosqueenelanterior.
<input type="password" name="pwd" size="12" maxlength="12" />
8.2.3.Etiquetas(label)
Elelementolabelsirveparaasociaruncampodetextoconunobjetodeedicin
de forma que, por ejemplo, si el usuario pulsa con el ratn sobre la etiqueta
asociadaauncampodeedicindetextoelcursosapareceraenmodoedicin
enelinteriordedichocampocomosielusuariohubierapulsadoenl.Setrata,
portanto,deunaformadeextenderlasuperficiededichosobjetosdeformaque
resultemscmodolacumplimentacindelosformularios.
Tenemos dos formasdiferentesderealizarestaasociacin. La primeradeellas
consistesimplementeenanidarelelementodeedicindentrodelcontenidodel
elementolabel:
<label>Direccin:<br/><input type="text" name="direccion"
size="80" maxlength="120" /></label>
Elsegundomtodoconsisteenidentificarambosobjetosmedianteelvalordel
argumento for delelemento label yelvalordelargumento id delelementode
edicin:
<label for=txtdir>Direccin:</label><br/><input type="text"
name="direccion" size="80" maxlength="120" id=txtdir />
ATENCIN. Siusamoselprimerodelosmtodoshayquetenermuchocuidado
porquelosestilosqueapliquemosalelemento label seextenderantambinal
objetodeedicin.
8.2.4RadioButtons(type=radio)
Losradiobuttonssonloscaractersticosobjetosredondosparaelegirentrevarias
opciones alternativas pero con la restriccin de que slo puede seleccionarse
unodeellos,deformaquemarcarcualquieraimplicaqueseeliminalaseleccin
delquehubiramosseleccionadopreviamente.Adems,deberadehaberuna
Pgina 85
HTML & CSS

eleccinobligatoria.
<input type="radio" name="sexo" value="hombre"
checked="checked" /> Hombre<br/>
<input type="radio" name="sexo" value="mujer" /> Mujer
Puesto que en un mismo formulario podemos tener diferentes grupos de radio
buttons,eselvalordelargumentonameelquelosmantieneasociadosentresi.El
argumentocheckedsirveparaseleccionarlaopcinpordefectoqueaparecer
marcadaalcargarlapgina.Adems,podemosusarelargumento disabled si
queremosquealgunodeellosnoseaseleccionable.
ATENCIN. Cuidadoconlaspropiedadesqueaparentementefuncionanpero
nolohacen.Siponemosunargumentoreadonlyenunradio(oenuncheckbox
que veremos a continuacin), este cambia de aspecto pero puede seguir
usndose.Elargumentocorrectoparadeshabilitarlosseradisabled.
El valor del argumento value es lo que se transmitir en las respuesta del
formulariosieseelementoseencuentraseleccionado.
8.2.5Checkboxes(type=checkbox)
Loscheckboxessonmuysimilaresalosradiobutons.Sediferencianbsicamente
en dos aspectos: visualmenteson cuadrados y desde el punto de vistalgico
deberandepermitir,siaslodeseamos,laeleccindemsdeunaopcindentro
deunmismogrupodeobjetos.Adems,deberadepermitirnosnoelegirninguno
deellos.
<input type="checkbox" name="vehiculo" value="motocicleta"
disabled="disabled" /> Motocicleta<br/>
<input type="checkbox" name="vehiculo" value="moto"
checked="checked" /> Moto<br/>
<input type="checkbox" name="vehiculo" value="coche" />
Coche<br/>
<input type="checkbox" name="vehiculo" value="camin" />
Camin<br/>
<input type="checkbox" name="vehiculo" value="tractor" />
Tractor</p>
Todolodichoencuantoalosargumentosenlosradioesvlidotambinpara
estos.
8.2.6.Agrupacindeobjetos
Podemosagruparvisualmentediferentesobjetosdenuestroformulariomediante
elelementofieldset:
<fieldset>
<legend>Informacin personal</legend>
...
</fieldset>
Pgina 86
HTML & CSS

Esto,pordefecto,dibujaunrecuadroalrededordeloselementosquecontiene.El
elementolegendsirveparaponerttuloadichorecuadro.
8.2.7Cajadeedicindetextodemltipleslneas
Elelementotextareanoscreaunacajadeedicinqueadmitemsdeunalnea.
Lasdimensionesinicialesdelamismaseasignanmediantelosargumentosrowsy
cols.
<textarea name="comentarios" rows="8" cols="50" >Escribe tus
comentarios...</textarea>
No existe forma de limitar desde HTML el nmero de caracteres mximo que
admitelacaja(estosecontrolahabitualmentemediantejavascript).Elcontenido
delelemento,siexiste,serelvalorinicialquecontengalacajadeedicin.
Todoslosnavegadoresmodernospermitencambiareltamaodeestascajasde
texto visualmente mediante un control que aparece en su esquina inferior
derecha.Lamejorformadeevitaresto,siaslodeseamos,esenlosCSS.
8.2.8Cajadeseleccindeficheros
Nosabreunaventanadedilogo(cuyoaspectodependedelnavegadoryel
sistemaoperativo)quenospermiteseleccionarunficherodenuestrodiscoduro
<label>Fotografa:<br/><input type="file"
name="fichero"/></label>
Norealizaningntipodevalidacindelaeleccin.Esonoscorrespondehacerlo
anosotrosposteriormentemediantejavascriptoenelservidorcuandoenviemos
losdatos.
8.2.9Cajasdeseleccin(ComboboxesyListboxes)
Existendoscajasdeseleccintpicasenentornosgrficos:loscomboboxesson
cajascondistintasopcionesenlasqueslopodemosseleccionarunadeellas.
Adems,aunquepodemosdesplegarlaenelmomentodelaseleccin,cuando
elegimos la lista se cierra y slo permanece visible nuestra eleccin. Adems,
debera de ser obligatorio hacer al menos una eleccin. Los listboxes, por el
contrario, nos suelen permitir elegir ms de una opcin simultaneamente (o
ninguna)ysiempresuelenestartotaloparcialmenteabiertos.
EnHTMLambosseimplementamedianteelelementoselectysonlosargumentos
que usemos los que hacen que se comporte de una u otra forma. Veamos
inicialmenteuncombobox:
<select name="oficina" >
<option>Madrid</option>
<option>Sevilla</option>
<option selected="selected" >Alcorcn</option>
<option>Lisboa</option>
<option>Burdeos</option>
</select>
Unlistboxseradeestaforma:
Pgina 87
HTML & CSS

<select name="aficiones" multiple="multiple" size="4" >
<option>Toros</option>
<option>Cante</option>
<option>Ftbol</option>
<option>Juegos de Rol</option>
<option>Ponerse tibio de beber cocacola</option>
<option>Dormir en el sof</option>
</select>
Comovemos,ladiferencialamarcandosargumentos: size queindicacuantos
elementosdelalistasernvisiblessimultaneamente(pordefectoesslo1,quees
comodeberadecomportarseuncombobox)y multiple quees elargumento
queindicaquepodemoshacermsdeunaseleccin.Tambinpodemosusarel
argumentodisabledyavistoenotroscontrolesanteriores.
En las opciones se usa el argumento selected para indicar si queremos que
algunadelasopcionesaparezcainicialmenteseleccionada.
Tantoenunocomoenotropodemosusarelelementooptgroupparaagruparlas
distintasopcionesencategoras:
<select name="oficina">
<optgroup label="En Espaa">
<option>Madrid</option>
<option>Sevilla</option>
<option selected="selected" >Alcorcn</option>
</optgroup>
<optgroup label="En el extranjero">
<option>Lisboa</option>
<option>Burdeos</option>
</optgroup>
</select>
8.2.10Botones
Todoformulariodeberadetener,almenos,unbotnquesirvaparaindicarque
yahemosterminadodecumplimentarloyquedapasoalprocesadoy/oenvo
delosdatosquehemosrellenado.Estebotndebedeestaridentificadoconel
argumento type y el valor submit y el comportamiento normal al pulsarlo es
invocar el enlace que hemos puesto como valor del argumento action del
elementoform.Dichoesto,tenemosdosformasdeimplementarestebotn:
<input type="submit" value="Enviar" />
<button type="submit">Enviar</button>
Amboselementossecomportaranigualyharanlomismo.Ladiferenciaesten
que el texto que aparece en el primero es el que aparece como valor del
argumento value (o un texto por defecto que pone el navegador si ese
argumentonoaparece)yque,portanto,nopodemosaplicarleestilosmientras
que en el segundo botn el texto es el contenido del elemento y podemos
aplicarestiloscontotallibertado,incluso,ponerunaimagen:
Pgina 88
HTML & CSS

<button type="submit" ><img src="ok.jpg" alt="Ok" /></button>
Ambostiposdebotonesadmitenelargumentodisabled.
El segundo tipo de botones caractersticos de un formulario es uno que nos
permitelimpiarloydejartodoslosvaloresdelmismocomosilapginasehubiera
cargadaporprimeravez.Seidentificamedianteelargumentotypeconsuvalor
aresetypodemos,igualmente,implementarlodeambasformas.Todolodicho
antessirvetambinenestecaso:
<input type="reset" />
<button type="reset" ><img src="clean.jpg" alt="Limpiar"
/></button>
Tenemos, adems, la posibilidad de introducir en nuestro formulario botones
genricos sin una accin previamente definida que posteriormente nosotros le
asignaremosusandocdigojavascript:
<input type="image" src="button.png" />
<input type="button" value="Botn" /><br/>
<button type="button">Botn</button>
Elprimeronoespropiamenteunbotn,sinounaimagenperoalaquetambin
se le asocia por defecto las mismas propiedades que a un botn con el
argumentotypeconvalordesubmit.Losotrosdossonbotonessinningntipode
accinasociadaalosqueposteriormenteselespuedeaplicaralgunausando
cdigojavascript.
8.2.11.NuevoselementosenHTML5
Los elementos aqu presentados son, por as decirlo, los clsicos que pueden
usarseconlaversin4deHTML.Perounadelascosasquemshapotenciado
HTML5sonlosformularios apareciendomuchos elementos tiles ymuyvistosos.
Puedesecharleunvistazoenelapartadoenelquesetrataestanuevaversin
dellenguajealfinaldeestedocumento.
8.3.CSSENLOSELEMENTOSDELOSFORMULARIOS
Con algunas limitaciones, es posible cambiar el estilo y las propiedades de

visualizacindelosformulariosmedianteCSS.Nonospararemosendetalle,pero
como ejemplo debe de valer la diferencia de aspecto entre los siguientes
formulariosalosqueslolosseparaunahojadeestilosdeapenas30lneas(y
algnelementoadicionalqueusaremosposteriormenteparalasvalidaciones):
Pgina 89
HTML & CSS
Pgina 90
HTML & CSS
8.4.VALIDACINDEFORMULARIOSMEDIANTEJAVASCRIPT
Para entender correctamente la forma de manipular un formulario mediante

Javascript tenemos que entender previamente los principios bsicos de la
programacinvisualorientadaaeventos.
8.4.1.Mtodos,eventosypropiedades
Sinmeternosendemasiadaprofundidad,diremosqueloseventossonacciones
queocurrensobreloselementosdenuestroformulario,generalmentedebidoala
accindelusuario:rellenarunacajadeedicindetexto,pulsarconelratn,etc.
Los eventos vienen predeterminados segn el elemento del formulario y no
podemosaadirningunonuevo.
Losmtodossonlasfuncionesqueseinvocanalproducirseloseventos.Existenya
algunosmtodospordefectoquevienenpredefinidosconlosformulariospero
nosotrossiempretendremoslaposibilidaddecrearotrosnuevosomodificarlosya
existentes.
Porltimo,laspropiedadesson,porreglageneral(aunquenosiempre),losvalores
delosargumentosconqueestnconstruidosloselementosdelformularioylos
valores de los mismos introducidos o elegidos por el usuario y que nosotros
podremosmanipulardesdenuestrosmtodos.
8.4.2.Eventosdelelementoform
ElelementoformrespondeadoseventosdenominadosonSubmityonResetyque
se corresponden con la pulsacin de los botones de submit y/o reset
respectivamente. Por defecto los mtodos que se invocan en cada uno de
ambos casos reciben los nombres de submit y reset, pero nosotros podemos
introducir nuestros propios mtodos. Esto lo hacemos introduciendo nuevos
argumentosenelelementoform.As,porejemplo:
<form name="form2ASI" onSubmit="alert('Enviando el
formulario')" onReset="alert('Limpiando el formulario')"
method="post" action="respuesta.html">
</form>
IMPORTANTE: como ves, en el interior de las funciones alert se usan comillas
simples.Estoesparanoconfundiralnavegadorconlascomillasdoblesquese
usanparaelvalordelargumento.
Hemos introducido sendas llamadas a alert, pero tambin podramos haber

llamadofuncionesmselaboradasconstruidaspornosotros.
8.4.3.Eventosdelosbotones
Losbotones,yaseandeltipoquesean,tienenalmenostreseventos: onClick,
onFocus(cuandoobtienenel'foco'delaaplicacin)yonBlur(cuandolopierden)
peroporreglageneralelquenosinteresausarescasisiempre onClick,evento
Pgina 91
HTML & CSS

quesegeneracuandolopulsamos.
<input type="submit" value="Enviar" onClick="enviar()"
name="btnenv" />
<input type="button" value="Enviar" name="btnenv"
onClick="enviar()" />
Estosdosbotonestienencomportamientosdiferentesyesmuyimportantequelos
distingamos. El primero, puesto que es del tipo submit, cuando sea pulsado
ejecutarlafuncinenviar() yluegotambininvocarelevento submit() (salvo
queloimpidamosdesdedentrodelafuncin). Elsegundoejecutarlafuncin
enviar() pero no ejecutar el evento submit() (salvo que nosotros lo hagamos
expresamente). La diferencia es importante cuando queremos hacer una
validacinpreviadelformulario.
8.4.4.DOM,Modelodeobjetosdeldocumento
ElllamadoDOMeslainterfazquenosvaapermitirinteractuarconlatercerapata
queannohemosmencionado:laspropiedades.Setrata,nimsnimenos,de
una nomenclatura especial (que a los programadores habituados a la
orientacin a objetos le resultar familiar) que nos va a permitir identificar los
elementosdelformularioysuspropiedadesypoderleerlasymodificarlas.
ElDOMnosvaapermitirdarlenombrealosobjetosdelformulariodeformamuy
sencilla.Vamosaverunejemplomuysencillo.Imaginemosestebotn:
<input type="submit" value="Enviar" onClick="enviar()"
name="botonenv" disabled="disabled" />
<input type="reset" value="Limpiar"
onClick="limpiar(this.form)" />
Hemosvistoyaquealasfuncionesjavascriptselespuedenpasarparmetros.
this.formesunareferenciaalformularioenelqueapareceelelementodesdeel
quehacemoslareferencia.Lafuncinlimpiarseraas:
function limpiar(formulario){
alert('Haz pulsado el botn de limpiar...');
formulario.botonenv.disabled=true;
}
Siquisieramoshacerlareferenciaalformulariodesdeeleventoform,usaramos
simplementethis:
<form name="form2ASI" onSubmit=enviar(this)
action="respuesta.html">
...
</form>
Apartirdelparametroquelehemosenviadoalafuncinidentificamosalbotn
deenviaratravsdelvalordesuargumento name yalapropiedad disabled
mediante su nombre. De esta forma conseguimos variar su valor y hacer que
cuandoelformularioestlimpioelbotndeEnviaraparezcadeshabilitado.
ExistenotrasreferenciastilesquepodemoshaceratravsdeDOM.Porejemplo,
Pgina 92
HTML & CSS

document hacereferenciaalapginawebensiy document.forms.length nos
dice el nmero de formularios que hay en la pgina. Cada uno de estos
formularios puede referenciarse mediante la estructura document.form[x],
siendo x unnmeroentero.Paraelprimerformulariodelapgina x valdra0,
paraelsegundo1,etc.
El siguiente cdigo nos pintara dos botones. Al pulsar el primero nos dira el
nmerodeformulariosdelapginayalpulsarelsegundoelnombredeeste(el
valordelargumentoname):
<input type="button" value="Botn 1" onClick="alert('En
esta pgina hay ' + document.forms.length + '
formulario')" />
<input type="button" value="Botn 2" onClick="alert('El
nombre del formulario es ' + document.forms[0].name)" />
</form>
8.4.5.Validacindelformulario
Laestrategiahabitualaseguiralahoradevalidadunformulariosigueunodelos
dospatronessiguientes:
Validamosunoaunoloselementosdelformulariomientrasqueserellenan
(respondiendoaloseventosonKeyDown,onKeyUp,onKeyPress,onChange
y/oonBlur)
Validamostodosloselementosdelformulariounavezquesehapulsadoel
botndeenviarrespondiendoaleventoonSubmit
Avecessepuedeusarunaestrategiacombinadadeambos.
Elprimermtodoeselmssencillo.Veamosunejemplomuysimpleenelquela
validacin consiste slo en comprobar que un campo no se ha quedado sin
rellenar.Elformularioseraeste:
<form name="form2ASI" onSubmit="return enviar(this)"
<p><label>Nombre: <input type="text" name="cajanombre"
/></label></p>
<p><input type="submit" value="Enviar" name="botonenv" />
<input type="reset" value="Limpiar" /></p>
</form>
Lafuncinjavascriptquerealizalavalidacinseraalgoas:
function enviar(formulario){
alert('Haz pulsado el botn de enviar...');
if(formulario.cajanombre.value.length == 0){
alert('No puedes dejar este campo en blanco');
validacionOK = false;
Pgina 93
HTML & CSS

}
else{
alert('Haz escrito: '+ formulario.cajanombre.value);
validacionOK = true;
}
return validacionOK;
}
Laotraestrategia,msdinmicaperotambinmscomplicada,consistiraen
validar uno a uno los campos a rellenar y no dejar que el formulario se enve
(deshabilitandoinclusoelbotndeEnviar)hastaquenoestntodoscorrectos.
Veamosunpequeoejemplotambin.Primeroelformulario:
<p><label>Nombre: <input type="text"
onBlur="validar(this.form)" name="cajanombre"
/></label></p>
<p><input type="submit" value="Enviar" onClick="enviar()"
name="botonenv" disabled="disabled" /> <input
type="reset" value="Limpiar" onClick="limpiar(this.form)"
/></p>
</form>
YluegoelcdigoJavascript:
function validar(formulario){
if(formulario.cajanombre.value.length == 0){
alert('No puedes dejar este campo en blanco');
formulario.botonenv.value="No puedes Enviarlo
as!";
}
else{
alert('Haz escrito: ' +
formulario.cajanombre.value);
formulario.botonenv.disabled=false;
formulario.botonenv.value="Enviar";
}
}
function enviar(){
}
function limpiar(formulario){
alert('Haz pulsado el botn de limpiar...');
}
Veamosahoralaformadevalidaduncamponumrico.Porejemplounnmero
Pgina 94
HTML & CSS

detelfono.Elformularioesmuysimilaralquehemosvistoanteriormente:
<form name="form2ASI" onSubmit="return enviar(this)"
<p><label>Telfono: <input type="text" name="cajatlf"
/></label></p>
<p><input type="submit" value="Enviar" name="botonenv" />
<input type="reset" value="Limpiar" /></p>
</form>
Enelcdigojavascriptvalidaremosporunladoquelalongitudseaexactamente
de siete dgitos y por otro que sean todos numros y no letras o caracteres
extraos.Estosegundolohacemosapoyndonosendosfuncionesdejavascript:
parseInt que convierte una cadena de texto a su valor numrico entero (el
contenidodelosformulariossiempreseleecomotextoaunquesetratedecifras)
ylafuncinisNANquedevuelveun0sielargumentoquerecibenoesunnmero
correcto.
function enviar(formulario){
if(formulario.cajatlf.value.length != 9 ||
isNAN(parseInt(formulario.cajatlf.value)) == false){
alert('No es un telfono correcto');
validacionOK = false;
}
else{
alert('Haz escrito: ' + formulario.cajatlf.value);
validacionOK = true;
}
return validacionOK;
}
Lgicamente se puede complicar mucho ms y hacer una validacin ms
estricta: comprobar que empiece por 9, 6 o 7, permitir el uso de prefijos
internacionales,etc.
Enlosejemplosqueacompaanaestetextotienesalgnejemploms, como
porejemplocomovalidarquelacontrasearepetidadosvecescoincidaola
longitudmximadeuntextarea(ejemplo5)ocomocambiarelcontenidodeun
listbox en funcin de la seleccin hecha en un combobox y como pasar
elementosentredoslistboxes(ejemplo6).
8.4.6.ListadeeventosdeJavascriptdisponiblesenlosformularios
A continuacin tienes una tabla con los eventos que podemos usar en un
formulario,loselementosalosqueafectanyunabrevedescripcindelosmismos.
Pgina 95
HTML & CSS

Evento
Descripcin
Elementos
onBlur
button, checkbox,
Cuando un elemento pierde
password, radio, select,
el foco
text, textarea, file
onChange
Cuando un elemento pierde file, select, text,

el foco y su valor se ha password, textarea, radio,
modificado
checkbox
onClick
Cuando se pulsa sobre el

elemento con el botn
izquierdo del ratn
button, checkbox, radio,

text, password, textarea
onFocus
Cuando el elemento
adquiere el foco
button, checkbox, file,

password, radio, select,
text, textarea
onKeyDown
Cuando el elemento tiene

el foco y se pulsa una
tecla
onKeyPress

el foco y se mantiene
pulsada una tecla
onKeyUp

el foco y se deja de
pulsar una tecla
onMouseOut
Cuando se mueve el ratn

fuera de un determinado
objeto
onMouseOver
Cuando el ratn entra en

un determinado objeto
onReset
Cuando se pulsa el botn

de reset del formulario
form
onSelect
Cuando se selecciona un
texto con el ratn
text, password,textarea
onSubmit
Cuando se pulsa el botn

de submit del formulario
form
Laspropiedadesfundamentalesquepodemosalteraroconsultarmediante
cdigojavascriptdecadaunodeloselementosdeunformulariosonlas
siguientes:
Pgina 96
HTML & CSS

Propiedades
Elemento
form
name, action, method
button
name, value, disabled
text y
password
name, value, disabled, readonly, size, length, maxlength
textarea
name,
value,
disabled,
maxlength, cols, rows
radio y
checkbox
name, value, disabled, checked, length
select
name, size, disabled, multiple, type
options
value, text
file
name, size, disabled
readonly,
size,
length,
8.5.JAVASCRIPTFUERADELOSFORMULARIOS
AunqueyahemosdichoqueJavascript nacicomounaformadevalidarde
formarpidalosformularios,suusohoytransciendedeestoypodemoshaceruna
pgina que utilice javascript al margen de los formularios o no slo con ellos.
Veremosalgunosejemplossencillosdeusoenesteltimopunto
8.5.1.Alertyotrasventanasdeconfirmacinoentradadedatos
Hemos usado durante todo el captulo la funcin alert que nos muestra una
ventanaconuntextoyunbotndeAceptar.Estafuncinparalizalaejecucin
hastaqueelusuarionopulsaelnicobotnqueapareceenella.
PeroJavascriptdisponedeotrosdostiposdeventanasmstilessegnparaque
lasnecesitemos.Vamosaverlas.
Laventanaconfirmmuestradosbotones(OKyCancelar)ydevuelvelaeleccin
delusuarioparaqueactuemosenconsecuenciacomounavariablebooleana:
truesihemospulsadoOKyfalsesihemospulsadoCancel:
respuesta = confirm("Pulsa un botn");
if (respuesta == true){
alert("Haz pulsado el botn de OK");
}
else{
alert("Haz pulsado el botn de Cancel");
}
Laventanapromptnosmuestraunacajadetextoydevuelveelvalorquehemos
escritoenella.Adems,muestradosbotonesydevuelveelvalor null sihemos
salidopulsandoelbotndeCancelarenlugardeldeOK:
texto = prompt("Escribe tu nombre, por favor");
if(texto == null){
alert("Haz pulsado el botn de cancelar");
Pgina 97
HTML & CSS

}
else{
if(texto.length!=0){
alert("Hola " + texto + ", buenos das \n Cmo
ests?");
}
else{
alert("Buenos das aunque no quieras decirme tu
nombre... :-(");
}
}
8.5.2.ListadeeventosdeJavascriptdisponiblesdeformagenrica
Loseventosquepodemoscapturarenunapginawebyasociarlosaunmtodo
javascriptyquenotienenrelacindirectaconloselementosdeunformularioson
estos:
Evento
Descripcin
onAbort
Cuando se aborta la carga de una imagen
onDblClick
Cuando se hace doble click con el botn izquierdo

del ratn
onLoad
Cuando la pgina termina de cargarse

completamente
onMouseDown
Cuando se pulsa un botn cualquiera del ratn
onMosueMove
Cuando se mueve el ratn
onMove
Se mueve la ventana
onResize
Se cambia el tamao de la ventana
Adems, alguno de los eventos que se usan en los formularios pueden tener
tambinaplicacinfueradeellos.
Veamosuntrozodecdigoconejemplossencillosdeaplicacin:
<body onLoad="alert('La pgina se ha cargado completamente');"
onResize="alert('Haz cambiado el tamao de la pgina');">
<h1 onMouseOver="alert('Haz pasado el ratn sobre el
titular');" >Titular de la pgina</h1>
<p onClick="alert('Haz hecho click en el primer
prrafo');" >Primer prrafo de texto de la pgina</p>
<p onDblClick="alert('Haz hecho doble click en el primer
prrafo');" >Segundo prrafo de texto de la pgina</p>
</body>
Enelejemplo8queacompaaaestetextotienesunejemplomscomplicado
dondesevecomocambiarelestiloCSSdeunelementodelapginaatravsde
Pgina 98
HTML & CSS

unmtodoqueselanzaalcapturarelenventodehacerClickenunratn.
8.5.3.Losobjetosdocumentywindow
ElmodeloDOMnosproporcionadosobjetosdenominados document y window
con una amplia coleccin de propiedades y atributos que nos permiten
interactuar de forma fcil con caractersticas interesantes del navegador y el
documentoHTML.
Porejemplo,elobjetowindownospermiteobtenerlasdimensionesenpxelesde
la superficie til del navegador. La siguiente funcin nos muestra estas
dimensionesenunaventanadealerta:
function muestraDimensiones(){
alert("Ancho: " + window.innerWidth + " pxeles.\nAlto: "
+ window.innerHeight + " pxeles.");
}
Tienesunabuenareferenciadelasposibilidadesqueteofreceelobjetowindow
aqu:
http://www.w3schools.com/jsref/obj_window.asp
La principal utilidad del objeto document es que nos permite obtener una
referencia acualquier elemento HTML de la pgina para interactuar con l a
travsdelvalordesuatributo id que,comoyasabes,deberadesernico.Lo
hacemosmediantelafuncingetElementById(). Lasiguientefuncinobtienela
referenciadeunobjetoHTMLcuyovalordelatributoides caja1 ymodificasu
estilo por uno llamado estilo2. Dicho estilo debera de existir en los CSS del
documentoyseraplicablealobjetoencuestin(puedesconsultarelejemplo8
queacompaaaestedocumentoparaverelcdigocompleto)
function cambiar_estilo(){
objeto = document.getElementById("caja1");
objeto.className="estilo2";
}
Puedo,incluso,cambiarelcontenidodeunelementoatravsdelapropiedad
innerHTML:
function cambiaTitular1(titular){
titular.innerHTML="Nuevo Texto para el Titular";
}
Paravermspropiedadesdelobjetodocumentpuedesconsultarestapgina:
http://www.w3schools.com/jsref/dom_obj_document.asp
Ysiquieresampliarconocimientosovermsejemplossobrecualquierotracosa
de javascript, aqu tienes una completa referencia de todas las funciones
disponibles:
http://www.w3schools.com/jsref/
Pgina 99
HTML & CSS
9.HTML5
HTML5eslanuevarevisindellenguajeHTMLdefinidoporlaW3C.Seencuentra
anenfasebetaexperimentaly,portanto,hayquetratarconmuchocuidadola
introduccin de sus nuevas caractersticas puesto que muchos navegadores,
sobretodosisonrelativamenteantiguos,nocontemplananestoscambiosono
lohacenensutotalidad.Unadelasgrandesnovedadesesque,porprimeravez,
ladefinicindeHTMLyXHTMLparaestanuevaversin(HTML5yXHTML5)sehan
desarrolladoenparalelo.XHTML5es,bsicamente,HTML5conlasrestriccionesde
sintaxisqueyaplanteamoscuandopresentamosXHTML1
9.1.ESTRUCTURADEUNDOCUMENTOHTML5OXHTML5
Laestructuradeundocumentoconhtml5oxhtml5esmuchomssencillaqueen
versionesanterioresy,adems,idnticaparaambos:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="estilos.css" media="all" />
<title>Html5</title>
</head>
<body>
</body>
</html>
Observaqueyanoesnecesariousarelargumentotypeenlasetiquetaslinkque
declaranelusodehojasdeestilo(tampocoenlasquedeclaranunficherocon
funcionesjavascript).TampocoexistendiferenciasenlosargumentosentreHTML5
y XHTML5. De hecho, podemos escribir documentos denominados polglotas
quepuedanserinterpretadoscomounoocomootroindistintamenteysinningn
problemaobservandolassiguientescondiciones:
ElDOCTYPEnoesobligatorioenXHTMLperosienHTML,asquedebemos
deponerlo.Adems,HTMLnoessensibleamaysculasominsculaspero
XHTMLsi,asquehayqueponerlotalycomoapareceenelejemplode
aquarriba.
DebemosdeusarlasintaxisdeHTML5,yobservartodaslasrestriccionesde
XHTML5queyahabamosvisto,asaber:
Loselementosdebendecerrarsesiempre
Loselementossincontenidodebendeusarlasintaxisdeautocerrado
siempre.
Laaperturaycierredeloselementosanidadosnodebedesolaparse.
Losvaloresdelosatributosdebendeirsiempreentrecomillassimples
odobles
Los nombres de etiquetas y atributos deben de ir siempre en
minsculas
Pgina 100
HTML & CSS

Noestpermitidousarunatributosinvalor
9.2.CAMBIOSENLASETIQUETAS
LoprimeroaresearenHTML5,unlenguajedemarcasbasadoenunconjuntode
etiquetas,deberadeserloscambiossufridosenelconjuntodeestas.Aparecen
25nuevasetiquetas,hayligeroscambiosen7delasantiguasydesaparecen16.
Etiquetaseliminadas
Lasetiquetaseliminadas,delascualesnosotrosnodeberamosdepreocuparnos
demasiadoporqueunaslashemosevitadoexpresamentedesdeelprincipiode
estecursoyotrasnisiquieralashemospresentado,sonlassiguientes:
acronym,applet,basefont,big,center,dir,font,frame,frameset,
isindex,noframes,s,strike,tt,u,xmp
Nuevasetiquetasparalaorganizacindeldocumento.
Dentro de las nuevas etiquetas, el primer grupo que nos interesa ver es el de
aquellas que introducen una mayor informacin semntica a la estructura del
documento.Setratade header,nav,footer,aside,section y article.Setratade
etiquetas que identifican las secciones ms habituales que existen en la gran
mayora de las pginas web y que hasta ahora identificbamos usando la
etiquetadivenfuncinconalgnidoclass,porejempo<divid=footer>o<div
class=article>.
Estasetiquetasnohacennadaespecialynointroducenningunainformacinde
estilo. Su nico propsito es proporcionar informacin semntica a nuestras
pginasdecara,sobretodo,afacilitarsulecturaylavaloracindelcontenido
porpartedelosbuscadores.Pensemos,porejemplo,enunapginawebquese
tituleCarnicerasdecalidadenSevillayotraencuyopidepginaaparezca
elnombredesuautor:JavierCarniceraSevilla.Googlenodeberadetratara
ambasalmismonivelcuandoalguienrealiceunabsquedadecarnicerasen
Sevilla.Estasetiquetasleproporcionan,alyalrestodebuscadores,unaforma
claradevalorarelcontenidodeunawebsegndondesepresentecadatexto.
SolventandolosproblemasdeversionesantiguasdeInternetExplorer
CuandocontemplamoselusodeversionesantiguasdelMicrosoftInternetExplorer
podemostenerunproblemaconestas etiquetas.Elresto denavegadoresnos
permiteinventarnosetiquetasyaplicarlesestilos,peroExplorersinoreconoce
unaetiquetacomovlidalaignora.EstohacequeunaversinantiguadeFirefox
nos permita aplicar estilos a la etiqueta header, aunque no la conozca, pero
Explorer no. Para solucionar esto usamos dos recursos: la posibilidad de incluir
comentarioscondicionalesenInternetExplorerylaslibrerashtml5shiv.
Loscomentarioscondicionalestienenestaforma:

Pgina 101
HTML & CSS

Esfcilverque,segnlasintaxisHTMLqueconocemosesoesuncomentarioyno
se ver, pero Explorer lo reconoce como una secuencia especial y si nos lo
mostrar. Tenemos otras formas ms complejas para detectar una versin
concretadeExplorer,ounamayoromenorqueunadada:





menores a la 9</p>
menores o iguales a la 7</p>
mayores a la 6</p>
mayores o iguales a la 8</p>
O,incluso,darleotravueltadetuercaalasintaxisymostrarcdigoqueslose
verennavegadoresquenoseanelInternetExplorer:

<p>Esto slo se ver si no ests con un Explorer</p>

DeestaformayapodemosmostrarunasetiquetasenExploreryotrasenotros
navegadoresdeformarelativamentefcil,peroexisteunmtodomsrpidoy
limpio de solucionar el problema de las nuevas etiquetas de organizacin: la
librerahtml5shivnospermitenqueelExplorerapliqueestilosaetiquetasqueno
conoce.Paraquefuncionenbastaconincluirlasenlaseccinheaddenuestra
weby,siqueremos,podemosincluirlasconuncomentariocondicionalcomolos
vistosparaqueslosecarguencuandorealmentelasnecesitamos:

9.3.MEJORASENLOSFORMULARIOS:NUEVOSTIPOSDEINPUT
TalvezunadelasmejorasmssignificativassealagranriquezaqueHTML5aade
alosformulariosconobjetodequepodamosconstruirconfacilidadaplicaciones
web. Son13losnuevostiposdisponiblesparalaetiquetainputademsdealgn
argumentoextraaadidoalosyaexistentes.
Elargumentorequired,vlidoparacasitodoslostiposdeobjetospermite,marcar
comoobligatoriouncampodeformaquenosepuedaejecutarlafuncinsubmit
si no est completo y dando, adems, un efecto visualque cada navegador
podrpersonalizar.
Elargumentoautofocus,quedeberadeusarsesloenunobjetoporformulario,
seleccionaelcampodelmismoquetomarelfocodeformaautomticauna
Pgina 102
HTML & CSS

vezcargadalapgina.
El argumento autocomplete puede tomar dos valores (on o off) e indica al
navegadorsipuedehacersugerenciasalusuariodependiendodeloquehaya
escritoenanterioresocasionesenesemismocampo.
Elargumento placeholder,vlidoentodosloscamposdetexto,nosmuestraun
textoconinstruccionessobrequedebemosdecumplimentarenelmismo.
Elargumentowrap,existenteenversionesanterioresaHTML4perodesaparecido
enesta,vuelveenHTML5.Esvlidoenlosinputdetipotextareaynospermite
indicar si queremos que los saltos de lnea que el usuario escriba en ellos se
tranmsitan(wrap=hard)ono(wrap=soft)queeslaopcinpordefecto.
datalistesunanuevaetiquetaquepuedeasociarcealoscamposdetextoyque
nospermitemostraralusuariounalistadesugerenciasdeformamuysimilarala
que,porejemplo,Googleutilizacuandoescribimosensucajadebsquedas.Se
usa en conjunto con la etiqueta option de forma muy parecida a la que
utilizamosenuncamposelect:
<input type="text" name="provincia" list="provincias" />
<datalist id="provincias">
<option value="Sevilla"></option>
<option value="Madrid"></option>
<option value="Cuenca"></option>
<option value="Mlaga"></option>
</datalist>
Laidentificacinentreelinputyeldatalistsehaceatravsdelosargumentoslist
eidcuyosvaloresdebendeseriguales.
Porltimo,elargumento pattern permiteespecificarunaexpresinregularque
debe de cumplir lo que pongamos en el campo para que el formulario sea
validado.Veamosunpardeejemplos:
<input type="text" name="codpostal" pattern="[0-9]{5}" />
<input type="text" name="nif" pattern="[0-9]{8}[A-Za-z]{1}" />
Enelprimeroelpatrnespecificaqueelcamposlovalidarsiconstadecinco
nmerosseguidossinningncaracteradicional.Enelsegundocaso,elcampo
debedeserrellenadoconochonmerosseguidosdeunaletra,yaseaestaen
maysculasominsculas.Paraaprendermssobrecomoconstruirexpresiones
regularesmscomplejaspuedesconsultarelsiguienteenlace:
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
Yunanotaadicionalacercadelospatrones:sielcamponoestmarcadocomo
requeridomedianteelargumentoantesvistoseraposibledejarloenblancoyeso
nocumpliraconelpatrnespecificado.Asquesisequiereobligarnoolvides
tambinesteargumento.
Los tipos nuevos introducidos a los input son email, url, number, date, month,
Pgina 103
HTML & CSS

week, time, datetime, datetimelocal, search, color, range y tel. Proporcionan
controles especializados de diferentes peticiones bastante cotidianas con
validacin automtica. Veamos algunos ejemplos con los argumentos ms
habituales de cada uno de ellos (aparte de los ya vistos: required, disabled,
readonly,etc.yquefuncionaranperfectamenteconlamayoradeellos).
<input type="email" name="email" />
<input type="url" name="web" />
<!funcionanenoperayenchrome>
<input type="number" name="edad" min="18" max="100" step="1" value="18" />
<input name="cursor" name="unidades" type="range" min="3" max="12"
value="6" step="3" />
<!funcionansloenopera>
<input
<input
<input
<input
<input
<input
<input
type="date" name="nacimiento" />

type="month" name="alta" />
type="week" name="vacaciones" />
type="time" min="07:00" max="23:00" step="3600" value="09:00" />
type="datetime" name="fecha1" />
type="datetime-local" name="fecha2" />
type="color" name="color" value="#c0ffee" />
<!Noimplementadosanporningnnavegador>
<input type="search" name="busqueda" /> <input type="button"
value="Buscar" />
<input type="tel" name="telefono" />
Intimamenterelacionadoconlosformularios,aunquemuchomsuniversalysin
dependencia directa con estos, tenemos el nuevo agumento contenteditable
que convierte, cuando su valor es true, a casi cualquier elemento, ya sea de
bloqueodelinea,eneditabledeformadirectaporelusuario:
<h1 contenteditable="true">Titular editable</h1>
<p contenteditable="true">Este prrafo tambin es editable</p>
<div contenteditable="true">Y este bloque div lo mismo</div>
<p>Pero, incluso <strong contenteditable="true">estas negritas</strong>
este <span contenteditable="true">texto con un span</span> que son
elementos de lnea pueden ser editables</p>
9.4.MODERNIZR
Modernizr es una librera escrita en javascript y que nos sirve de ayuda en la

transicinaHTML5.Sufuncionamientoesmuysimple:nospermiteinterrogaral
navegador del usuario que est viendo nuestras pginas sobre si entiende
determinadascaractersticasdeHTML5oCSS3y,enesecaso,elegirloquevamos
amostrarle.Veamosunejemplomuysencilloyexplicamosconlcomoinstalarlas
Pgina 104
HTML & CSS

yhacerlasfuncionardeformabsica.
Loprimeroquedebemosdehaceresdescargarlaslibrerasdemodernizrdela
web http://www.modernizr.com/ ycopiarelficherojseneldirectoriodenuestro
proyecto. Tenemos dos opciones: o descargarnos las libreras completas de la
versin de desarrollo o generar una librera a medida que slo contenga las
comprobacionesdelasetiquetasyatributasqueusamos.Estasegundaopcin
sermuchomsligerayacelerarlacargayejecucindenuestroproyecto.
Ensegundo lugartenemos queincluirunallamadaalalibreraenel head de
nuestrohtml:
<!DOCTYPE html>
<html lang="es">
<head>
<script src="modernizr-2.5.3.js"></script>
<link rel="stylesheet" href="estilos.css" media="all" />
<title>Ejemplo de uso de Modernizr</title>
</head>
<body>
</body>
</html>
Dosindicacionesenestepaso:enprimerlugarelnombredelalibrerapuede
cambiarsegnloquenosdescarguemosdelaweb.Revsaloantesdeincluirloen
tu proyecto. En segundo lugar, la carga de la librera de modernizr debe de
hacerse antes de la carga de las hojas de estilo si queremos hacer
comprobacionestambinenestas.
Ahora ya lo nico que tenemos que hacer es, desde nuestro documento,
interrogar a Modernizr si el navegador es capaz de interpretar determinadas
etiquetas y/o argumentos y actuar en consecuencia. Podemos ver una
demostracinsencillaintroduciendoestecdigoenelbodydenuestroejemplo
anterior:
<script>
if (Modernizr.input.required) {
alert("Tu navegador soporta el atributo required");
}
else {
alert("Tu navegador no soporta el atributo required");
}
if (Modernizr.inputtypes.range) {
alert("Tu navegador soporta el input type=range");
}
else {
alert("Tu navegador no soporta el input type=range");
}
</script>
Pgina 105
HTML & CSS

Peroloquenosotrosrealmentequeremos,lamayoradelasveces,noesadvertir
denadaalusuariosinocrearunapgina'alternativa'deformaqueelnosede
cuenta de nada aunque, lgicamente, pierda algunas de las funcionalidades
queofreceHTML5.Paraellousamoslafuncindocument.writedejavascriptque
nos permite crear parte del documento HTML en el mismo momento de su
ejecucinydependiendodelasindicacionesquenoshagaModernizr.Veamos
unaalternativamstilalcdigoanteriorconestasindicaciones:
<script>
if (Modernizr.input.required) {
document.write("<label>Nombre: <input name='nombre'
type='text' required='required' /></label><br/>");
}
else {
document.write("<label>Nombre: <input name='nombre'
type='text' /></label><br/>");
}
if (Modernizr.inputtypes.range) {
document.write("<label>Edad: <input name='edad' type='range'
min='1' max='120' value='18' step='1' /></label><br/>");
}
else {
document.write("<label>Edad: <input name='edad' type='text'
size='3' maxlenght='3' value='18' /></label><br/>");
}
</script>
Otraposibilidadescargarunahojadeestilosdiferentedeformacondicionalalos
elementosquenuestronavegadorsoporteusandolafuncinloaddeModernizr.
Acontinuacinvemosunejemplosencillo:
<script>
Modernizr.load({
test: Modernizr.input.placeholder && Modernizr.inputtypes.date,
yep : 'estilos1.css',
nope: 'estilos2.css'
});
</script>
EnelejemploanteriortesteamosdoselementosHTML5(eltipodeinputdateyel
argumentoplaceholder)yenfuncindequeestnsoportados,ono,cargamos
una hoja de estilos diferente. Lgicamente, se trata de una funcin que
encontraremosmstilalahoradeprobarelsoportedeelementosdeCSS3,
pero puesto que an no los hemos tocado lo vemos aqu y ms adelante
haremosalgnotroejemplo.
Dosapuntesimportantessobreesto.LafuncinloaddeModernizrnovieneenla
versindedesarrollodelaliberay,portanto,parausarladebemosdegenerar
una librera desde la opcin de produccin incluyendo esta utilidad (est
marcada por defecto en el apartado de extras) y todas las comprobaciones
Pgina 106
HTML & CSS

adicionalesdetipos,argumentosopropiedadesquevayamosahacer.
NOTAIMPORTANTE: Lovistoaqusetratadeunusomuybsicodeestaslibreras
quenoincluyetodaslasposibilidadesycomprobacionespreviasquedeberamos
dehacerenunproyectoprofesional.Paramsinformacinvisitalapginade
documentacin:
http://www.modernizr.com/docs/
9.5.ETIQUETASMULTIMEDIA
HTML5incluyedosetiquetas,audioyvideoparafacilitarlainterpretacindirecta
por parte del navegador de contenido multimedia y embed para incrustar
archivosenformatoflash.
Audio
La etiquetaaudio nos permiteinsertarun archivo deaudio en nuestrapgina
websinnecesidaddeusarflashniunplugindejavascriptcomohacamoshasta
ahora.Serelpropionavegadorelquerealicelareproduccinydependemos
tantodequelaetiquetaestimplementadacomodeloscodecsdeaudioque
seacapazdeinterpretar.Elusobsicoeseste:
<audio src=archivo_audio>Su navegador no soporta la etiqueta
audio</audio>
El argumento src, que define dnde se encuentra el archivo de audio a

reproducir,eselnicoobligatorio.Elcontenidodelaetiquetasloservisiblesiel
navegadornolasoporta,perosiloquenosoportaeselcodecdeaudio,noser
capazdereproducirelarchivoperononosinformarsobreello.Asescrito,el
archivo no se reproducir ni se har visible de ninguna forma. Existen dos
argumentosadicionales,quepuedenusarsealavez,parapermitirqueelarchivo
sereporduzca: controls y autoplay.Elprimeromostrarunpequeocuadrode
mandosconunbotndeplay/pausa,sonidoon/offyunabarradeprogresode
laduracindelarchvio.Elsegundoharqueelsonidosereproduzcaalcargarla
pgina. Ambos son parmetros sin valor por lo que en XHTML tendremos que
usarlosdeestaforma:
<audio src=archivo_audio controls=controls
navegador no soporta la etiqueta audio</audio>
autoplay=autoplay
>Su
Elargumento loop (loop=loop)reproduciraenbucleunayotravezelsonido.

Porltimo,elparmetropreloadnospermitecargarelarchivodeaudioalmismo
tiempoquelapginaynocuandoelusuarioledaaplayparaevitardemoras.
Este ltimo tienetres valores posibles: none, metadata (paraprecargarslo los
metadatosdelarchivooauto).
Pgina 107
HTML & CSS
Formatosdeaudio
Son cuatro los codecs de audio diferente a los que, en la actualidad, se da
soporte(deformairregular)enlosdiferentesnavegadoresqueimplementanesta
etiqueta:ogg,mp3,wavyacc(m4a).Ningnnavegadorlosimplementatodos
niningunodeellosesimplementadoportodoslosnavegadores.Almenosnopor
elmomento.Parasolucionarestotenemoslaetiqueta source quenospermite
especificardiferentesarchivosdeformaqueelnavegadortengaeleccin:
<audio controls="controls" >
<source src="finaldetrayecto.ogg" />
<source src="finaldetrayecto.mp3" />
<source src="finaldetrayecto.wav" />
Etiqueta no soportada
</audio>
Cuandoelnavegadorproceseestasetiquetassequedarconelprimerarchivo
que sea capaz de reproducir. Por tanto el orden en que aparezcan es
importante.Sinosotrospreferimosqueunnavegadorquepuedareproducirtanto
el .ogg como el .mp3 se quede con el primero, este debera de aparecer
tambin por delante. La etiqueta source tiene un parametro opcional para
especificar el tipo de archivo y el codec que usa el mismo, por ejemplo
type="audio/mpeg"otype="audio/ogg;codecs=vorbis"
Vdeo
Laetiquetavideo,suusoyproblemticaesmuysimilaraladeaudio.Elcasoms
sencillodeusoseraeste:
<video
src="archivo_video">
video</video>
Su
navegador
no
soporta
la
etiqueta
Enestecasoalusarlanuevaetiquetasinespecificarautoplaynicontrolssiquese
reserva espacio para el primer fotograma del mismo pero la nica forma de
reproducirloserapulsandoconelbotnderechoyusandoelmencontextual
quenossueleofrecerelnavegador.Elatributo src siguesiendo,pues,el nico
obligatorio.Losparmetros controls,autoplay, loop y preload tambinexisteny
su uso es idntico a los vistos para la etiqueta audio. Los nuevos parmetros
disponiblesparalaetiquetavideosonlossiguientes:
widthyheightnospermitencontrolarlasdimensionesdevisualizacindelvdeo.Si
nousamosningunodeestosparmetroselnavegadornosmostrarelvdeocon
susdimensionesoriginales.Siespecificamosunocualquieradeambos,peronoel
otro, se ajustar el no especificado para respetar la proporcionalidad de la
imagen.
Elatributoposternospermitedefinirunaimagenestticaqueaparecermientras
queelvdeosecargaohastaqueelusuariodecidecomenzarsureproduccin
pulsandoelbotndeplay.Sinoseespecificaaparecerelprimerfotogramadel
vdeo.Unejemploconalgunosdeestosargumentos:
Pgina 108
HTML & CSS
<body>
<video src="video_ogv.ogv" controls="controls" width="700"
poster="thatsallfolk.jpg"> Su navegador no soporta la etiqueta
video</video>
</body>
Formatosdevdeo
Conlosformatosdevdeotenemoselmismoproblemaqueconlosdeaudio:
ningnnavegadorimplementatodoslosreconocidosniexisteningunodeellos
que sea soportado por todos los navegadores. Ogv, H.264, y WebM son las
posibilidadesconlasquejugamosenestecaso.Ogveselmslibre,equivalente
alformatooggdeaudio.H.264yWebMsondosformatospropietarios,elprimero
empujadoporAppleyelsegundopropiedaddeGoogle.Laetiquetasourcese
puedeusartambinenestecasoparaproporcionaralternativasalnavegador:
<video controls="controls" >
<source src="video_ogv.ogv" />
<source src="video_mp4.mp4" />
<source src="video_webm.webm" />
Su navegador no soporta la etiqueta video.
</video>
ArchivosdeFlash
HTML5incorporatambinlaposibilidaddeincrustardirectamentearchivosde
animacinflashatravsdelaetiquetaembed:
<embed src="animacion_flash.swf" />
srces,aligualqueenaudioyvideo,elnicoatributoobligatorio.heightywidth
tambinsonvlidosyfuncionandeigualformaquehemosdescritoenlaetiqueta
vdeo.
9.6.DIBUJOMEDIANTELAETIQUETACANVAS
La etiqueta canvas define un objeto que actuar como un lienzo dibujable

mediante la llamada a funciones de javascript, proporcionando un potente
elementodedibujoydiseocapazdehacercompetenciadirectaconflash.El
siguienteejemplodibujaunrcuadradoverde:
<canvas id="myCanvas" height="300" width="500">
T navegador no soporta la etiqueta canvas.
</canvas>
<script>
var canvas=document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00ff00";
ctx.fillRect(0,0,100,100);
</script>
Pgina 109
HTML & CSS

Elcontenidodelaetiquetacanvasslosevisualizarsinuestronavegadornola
soporta. canvas define un lienzo transparente susceptible de ser rellenado
mediantefuncionesdedibujodeunAPIdejavascriptincorporadoalnavegador.
Enlasdosprimeraslneasdelscriptdelejemploanteriorobtenemosprimerouna
referenciaalobjetoyenelsegundoelegimoselAPIqueusaremosparaeldibujo
enfuncindelargumentodelafuncin.Elcontexto2deselmsextendidopor
el momento aunque existe una especificacin muy avanzada que permite el
dibujoen3Dusandoelargumento webgl ylaslibrerasdedibujoOpenGL,la
competencialibredelasDirectX:
http://www.khronos.org/registry/webgl/specs/latest/
Las dos lneas siguientes del ejemplo dibujan un rectngulo de 100 pxeles de
ancho por 100 de alto (un cuadrado, en realidad) que empieza en la
coordenada0,0(enlaesquinasuperiorderechadelcanvas)yqueserellenade
colorverde(#00ff00enhexadecimal).
Veamosalgunasdelasfuncionesbsicasdeldibujomediantecanvas:
fillStyleystrokeStylesonvariablesquenospermitenelegirelcolor,patrno
gradiente de color que usaremos para relleno o lnea de dibujo,
respectivamente. Para seleccionar un color podemos usar los mismos
mtodos que en CSS (por ejemplo, #c0ffee, #fff, orange o
rgb(255,160,23))perosiempreentrecomillascomosifueseunacadena.
Paraseleccionarungradienteounpatrnasignamoselobjetodondeest
definidoelmismo(veremoscomohacerlomasadelante).
fillRect y strokeRect sonfuncionesquenospermitendibujarunrectngulo
especificandocuatroparmetros:elpuntodesuvrticesuperiorderechoy
lasdimensionesdesuslados(x,y,ancho,alto).
clearRect(x,y,ancho,alto)limpiaelcontenidodelrectnguloespecificado.
Para reiniciar el canvas completo podemos hacer un clearRect con las
dimensionestotalesdelmismooreasignarelvalordeanchoodealtodel
mismo,comoporejemploas:
cv.width = cv.width;
moveTo (x,y) mueve el pincel de dibujo al punto de coordenadas
especificadas.
lineTo(x,y) dibujaunalneadesdeelpuntoactualdoneseencuentrael
pincel hasta el punto especificado en las coordenadas. En realidad las
lneasnosedibujansobreellienzodelcanvassinoquesealmacenanen
unaespeciedebuffertemporalqueslosevolcarrealmenteenlapgina
web cuando llamemos alafuncin stroke(). El colorusado ser elque
hayamosdefinidoenstrokeStyle.
lineWidth esunapropiedadquedefine,enpixeles,elanchodelaslneas
Pgina 110
HTML & CSS
trazadas.
font esunavariablequenospermitedefiniruntipodeletra.Recibeuna
cadena con las caractersticas de este, de forma similar a la de la
propiedadfontdeCSS.Porejemplo"bolditalic30pxmonospace"
fillText(texto,x,y) esunafuncinqueescribeeltextoquerecibecomo
primerparmetroapartirdelpuntodefinidomediantesusegundoytercer
parmetro. El color que escoger ser el ltimo que hayamos definido
mediantefillStyle.
strokeText(texto, x, y) hace lo mismo pero slo dibujando la lnea de
contornodeltextosinrellenarlo.
Eltrabajocongradientesesbastantemsdelicado.Enelsiguienteejemplo
vemoscomodefinirungradienteyrellenarunrectanguloconl:
gradiente = cv.createLinearGradient(250, 50, 350, 250);
gradiente.addColorStop(0, "#0f0");
gradiente.addColorStop(1, "#f00");
cv.fillStyle = gradiente;
cv.fillRect (250, 50, 100, 200);
Laprimeralneacreaelobjetoquecontendrelgradiente.Esteserlinealeir
desdeelpunto250,50hastael350,250.Lascoordenadasestnrefereridasala
superficiedelcanvas.Lasdossiguienteslneasdefinenloscoloresinicialyfinaldel
gradiente.Porltimo,usamoselobjetogradienteparadefinirlavariablefillStyley
dibujamosunrectnguloqueserellenarconelmismo.Notaqueelrectangulo
coincideexactamenteconlasuperficiedelgradienteperonotendraporqueser
as. El gradiente lineal puede crearse mediante una diagonal (como en el
ejemplo) pero tambin mediante una lnea vertical u horizontal. Tambin
podemoscrearunradiantecnicomediantelasiguientefuncin:
createRadialGradient(x0, y0, r0, x1, y1, r1)
Lostresprimerosparmetrosdefinenuncrculoylostresltimosotro.Elgradiente
secreardibujandounasuperficiecnicaentreamboscrculos.
Eldibujodearcosserealizamediantelafuncinarcquerecibeseisparmetros:
lascoordenadas delcentro,elradio,elpuntodeinicioydefinaldelarcoen
radianes y una variable booleana quedefine si elarco se trazar en sentido
horario(false)oantihorario(true).El0delosgradosestarasituadoenelpuntode
lastresenunaesferahoraria.LaconstanteMath.PItambinnosresultartilpara
expresarlosgradosenradianes.Unavezdefinidoelarcooelcrculopodemos
llenarlo o dibujar slo su lnea mediante las funciones fill o stroke,
respectivamente.Veamosunejemplo:
cv.beginPath();
cv.arc(150, 300, 70, 0, 2 * Math.PI, true);
cv.fillStyle = "#9cf";
cv.fill();
Pgina 111
HTML & CSS
cv.beginPath();
cv.arc(100, 150, 200, 0, Math.PI, false);
cv.lineWidth = 10;
cv.strokeStyle = "black";
cv.stroke();
La funcin beginPath sirve para indicar a canvas que comenzamos un nuevo

trazadoindependientedeloquehayamoshechoanteriormenteyesvlidatanto
altrazararcoscomolneasrectas.
Los efectos de sombreado se consiguen mediante las propiedades
shadowOffsetX, shadowOffsetY, shadowBlur y shadowColor que definen,
respectivamente,eldesplazamientohorizontalyverticaldelasombraenpxeles,
eldifuminadoyelcolordelamisma.Unavezajustadosestosvalorestodoslos
elementostendrnsusombrahastaquelospongamosacero.Unejemplo:
cv.shadowOffsetX = 10;
cv.shadowOffsetY = 10;
cv.shadowBlur = 5;
cv.shadowColor = "black"
cv.fillRect(400,250,75,75);
Tenemosdisponiblestresfuncionesquenosvanapermitirhacertransformaciones
sobre los elementos dibujados: translate(x,y), rotate (angulo) y scale(x,y). La
primear desplaza un elemento al punto indicado por las coordenadas que
enviamoscomoparmetros.Lasegundavaarotarelelementoelnmerode
grados(enradianes)enelsentidodelasagujasdelreloj.Por ltimolatercera
permite cambiar la escala de un objeto indicando el factor de escalado
horizontalyverticalcomoparmetros.Todasellassonacumulativasyseaplican
sobretodosloselementosquesevayanadibujardesdeelmomentoenquese
indicanhastaquesedesactivan.Unejemplo:
for(j=0; j<6; j++){
cv.fillRect(400,50,75,75);
cv.translate(50, 50);
cv.rotate(Math.PI/16);
cv.scale(0.7, 0.7);
}
Canvasnosvaapermirtambininteractuarconlascoordenadasdelratnpara
realizargrficosinteractivos.Enelsiguienteejemplodellibrodiveintohtml5puedes
ver un ejemplo y pulsando sobre el enlace etiquetado como Rules of play te
explicanlofundamentaldesufuncionamiento:
http://diveintohtml5.ep.io/examples/canvashalma.html
En los siguientes enlaces tienes todas las funciones, su descripcin y algunos
ejemplosdeloquepuedesusarcomocontenidodelaetiquetacanvasusandoel
Pgina 112
HTML & CSS

API2d:
http://www.whatwg.org/specs/webapps/currentwork/multipage/the
canvaselement.html
http://www.w3schools.com/html5/html5_ref_canvas.asp
9.7.GEOLOCALIZACIN
La geolocalizacin consiste en situar exactamente mediante coordendas

geogrficas(longitudylatitud)alusuarioqueestviendonuestrapginaweben
unplano.HTML5introduceestaposibilidaddeformanativamediantesupropio
APIysinnecesidaddeusarlibrerasexternascomohastaahora.Losdatospara
proporcionardichascoordenadaspuedentomarsedetresformasdiferentes,que
puedensercomplementariasyque,enescalademenoramayorprecisinson
lassiguientes:
AtravsdeladireccinIPpblicadeaccesoaInternetproporcionadapor
nuestroproveedor.
Portriangularizacinatravsdelalocalizacindelospuntosdeaccesowifi
alosqueestemosconectados.
AtravsdeunGPSintegradoennuestroequipo.
El navegador, si soporta esta funcin, tomar las coordenadas de
geolocalizacindelusuariodelaformamsprecisaposibleyenbaseaestos
mtodos (segn los que tenga disponibles) y siempre despus de pedir
autorizacinalusuario.Veamoselbodydeunpequeoejemplo:
<ul>
</ul>
<li>Latitud: <span id="latitud">Favor de esperar...</span></li>

<li>Longitud: <span id="longitud">Favor de esperar...</span></li>
<li>Precisin: <span id="precision">Favor de esperar...</span></li>
<li>Altura: <span id="altura">Favor de esperar...</span></li>
<li>Precisin en la altura: <span id="precisionAltura">Favor de
esperar...</span></li>
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var altura = position.coords.altitude;
var precision = position.coords.accuracy;
var precisionAltura = position.coords.altitudeAccuracy;
document.getElementById("latitud").innerHTML = latitud;
document.getElementById("longitud").innerHTML =
longitud;
document.getElementById("altura").innerHTML = altura;
document.getElementById("precision").innerHTML =
precision;
Pgina 113
HTML & CSS

document.getElementById("precisionAltura").innerHTML =
precisionAltura;
);
}
}
else {
alert("Su navegador no soporta la geolocalizacin");
}
</script>
Elscript,queesdondeusamoslasfunciones,tienetrespartesbiendiferenciadas.
En primer lugar comprobamos si nuestro navegador soporta la funcin de
geolocalizacininterrogandoalavariable navigator.geolocation. Sielresultado
esnegativomostramosunaalertay,encasocontrario,llamamosaunafuncin
(navigator.geolocation.getCurrenPosition)atravsdelacualobtenemoslalatitud
ylalongitud(positions.coords.latitudeyposition.coords.longitude),laprecisinen
estasmedidassegnelmtodoempleadoparaobtenerlasdelostresvistosen
metros (position.coords.accuracy), la altura (position.coords.accuracy) y la
precisinenlamedidadeesta(position.coords.altitudeAccuracy).Laalturayla
precisinenellasloestardisponiblesicontamosconGPSyserceroenotro
caso.Laltimapartedelscriptmuestralosdatosobtenidosennuestrapgina
HTML usando la funcin Javascript document.getElementById que nos permite
sustituirelcontenidodecualquieretiqueta(innerHTML)simplementeindicandoel
IDdelamisma.
Existen otros dos parmetros ms adems de los vistos en este ejemplo:
position.coords.heading que te proporciona la posicin en grados respecto al
norteyposition.coords.speedque,tomandocomoreferencialaltimaposiciny
eltiempotranscurridoentreunayotra,nosproporcionalavelocidadalaquenos
movemosenmetrosporsegundo.
TienesotroejemplomscompletoqueenlazaconelAPIdegooglemapspara
mostrarlascoordenadasenunplanoaqu:
http://benwerd.com/lab/geo.php
9.8.MSCOSAS
ExistenmuchasotrasnovedadesenHTML5:funcionalidaddearrastrarsoltar(drag
drop) nativa en el navegador, un sistema mejorado de comunicaciones
bidireccionales con el servidor, cookies que permitiran almacenar ms
informacin,etc.Muchasdeestasnuevasfuncionalidades,aligualqueocurre
conlasantesvistasdegeolocalizacinodecanvas,todasellasseproporcionan
mediante el uso de un API externo realizado en javascript. Para seguir
aprendiendo y ampliando conocimientos, as como novedades y cambios de
ltimahora,lamejorreferenciaeslaqueproporcionaelcomitdelW3C:
http://dev.w3.org/html5/spec/Overview.html
Pgina 114
HTML & CSS
Ysiquieresalgomsdidcticopuedesconsultarellibrogratuitodiveintohtml5:
http://diveintohtml5.ep.io/
Pgina 115
HTML & CSS
10.CSS3
LoscambiosenCSS3hansidoampliosysignificativosparaconseguirpginasweb
mslmpiasyatractivasconunmenoresfuerzoparaelcodifidador.Repasaremos
algunas de las ms importantes pero no olvidemos que ni el estndar est
cerrado ni lo quehay es compatibleconmuchos delos navegadores quese
siguenusandoampliamente.
10.1.LOSNUEVOSSELECTORESDECSS3
Pseudoelementos
LospseudoelementosexistentesenCSS2.1semantieneninvariablesenCSS3salvo
unpequeodetalle:ahorasedistinguenmsclaramentedelaspseudoclases
usando::delanteenlugarde:comohastaahora.As,porejemplo,usaremos
p::firstletterenlugardep:firstlettercomohastaahora.Adems, seaadeun
nuevo pseudoelemento llamado ::selection que permite aplicar estilos
diferenciados al texto que el usuario ha seleccionado mediante el ratn o el
teclado.
Pseudoclases
ElprincipalcambioenlosselectoresdeCSS3seencuentraaqu,dondesehan
aadido14selectoresnuevos.
Elselector:rootrepresentaalelementorazdeldocumentoHTMLquesiempreha
deserlapropiaetiquetahtml.Noexisteningunadiferenciaapreciableentreusarl
esteolaetiquetabody,salvoque:roottendraunamayorespecificidad.
:emptyesunselectorquedemarcaatodosloselementosvacosdecontenidoy
sinhijos.Porejemplo,tengamoselsiguienteHTML:
<p>A paragraph.</p>
<p></p>
<p>Another paragraph.</p>
Elprrafocentral,vacoysinhijos,seraelnicoqueresponderaaesteselector:
p:empty{ width:200px; height: 40px; background: red; }
Elselector:target sirveparaseleccionarelelementoactivo,osea,aqulenlace
internorealizadomediantelaetiqueta a yqueacabasdevisitar.Veamoseste
cdigo:
<p><a
<p><a
<p><a
<p><a
href="#enlace1">Ir al punto 1</a></p>

href="#enlace2">Ir al punto 2</a></p>
name="enlace1"></a>La, la, la...</p>
name="enlace2"></a>Bra, bra, bra...</p>
Yusemosestareglacombinadaconelselector:before
Pgina 116
HTML & CSS

:target:before{
content: "Ests aqu -> ";
}
:lastchild viene a acompaar al selector :firstchild que ya conocamos y

seleccionaaundeterminadoelementosiempreycuandoseaelltimohijodeun
padrecualquiera.Porejemplo,supongamoselsiguientecdigo:
<body>
<p>Primer prrafo del body</p>
<h1>Titular</h1>
<div>
<p>Primer prrafo del div</p>
<p>Segundo prrafo del div</p>
<p>Tercer prrafo del div</p>
</div>
</body>
Elselectorp:firstchildseleccionaraalosprrafosmarcadosenazul(elprimerhijo
delbodyyelprimerhijodeldiv),mientrasqueelselectorp:lastchildseleccionara
alprrafomarcadoenrojo(elltimohijodeldiv).
Siguiendoenestalnea, :onlychild seleccionariaaunelementoquefuesehijo
nicodesupadre.:nthchild(n)seleccionaraalelementoqueestenlaposicin
ndentrodeladescendenciadesupadre.Elprimerelementoserael1y,porlo
tanto, p:nthchild(1) sera equivalete a p:firstchild. Por ltimo, :nthlastchild(n)
seleccionaraalelementoqueestenlaposicinnperoempezandoacontar
porelltimoynoporelprimero.
:nthchild(n) permite un uso avanzado configurando adecuadamente su
argumentonico.Podemoscambiarlaletranporlaspalabrasclavesoddoeven
y, en ese caso, seleccionaramos a todos los elementos impares o pares,
respectivamente. Tambin podemos usar expresiones como 3n (los elementos
mltiplosde3)ousartresreglasdiferentes(3n+1,3n+2y3n+3)paraalternarentre
tresestilosdiferentesenunalistadeelementosiguales.
Similaresaestos,tenemosunconjuntodeselectoresquesecomportandeigual
formaperoconloselementosdeundeterminadotipo.Son:firstoftype,:lastof
type,onlyoftype,:nthoftype(n)y:nthlastoftype(n).
Nuevosselectoresparausoconformularios
Existen, adems, tres pseudoclases nuevas especificamente pensadas para su
uso conformulariosqueson :enabled,:disabled y :checked.Como sunombre
indica,aplicanaloselementosdetipoinputquecumplenconloespecificadoen
elnombredelselector.
Elselector:not()
Existe una ltima pseudoclase que trataremos aparte por su especial
Pgina 117
HTML & CSS

importancia.Setratadelselector:not()quesirveparaaplicarestilosaaquellos
elementos que no cumplen lo especificado ente parntesis. Veamoslo con
algunosejemplos.Lasiguientereglaseapliaraalcontenidodecualquierdivque
nofuesedelaclasecomun
div:not(.comun){color: red; }
Lasiguientereglaaplicaraatodosloselementosstrongqueestndentrodeun
divperoquenoestndentrodeunp
div *:not(p) strong{color: red; }
Enlasiguiente,locombinamosconunselectordeatributoparaseleccionartodos
losinputsalvoaquellosdetipopassword.
input:not([type="password"]){color: red; }
Podemosusartambinunalistacomoargumentodelnot.Losiguienteseaplicar
a todos los titulares de nivel h2 salvo a aquellos que pertenecen a las clases
politicayeconomia:
h2:not(.politica, .economia){color: red; }
Y,porsupuesto,sepuedecombinarconcualquierotroselectorquehemosvisto
antes:descendientes,etc.
Nuevosselectoresdeatributos
CSS3aade,adems,tres nuevos selectoresdeatributosquenos permitenun
controlmsfino. Elprimerselectorqueveremos,queusaelsmbolodistintivo ^
sirveparaseleccionaraetiquetasconunatributoscuyovalorempiezaporuna
cadena.Enelejemplo,aaquellasetiquetas a conunatributo href cuyovalor
empiezepormailto:
a[href^="mailto:"]{ color: blue; }
El segundo selector de atributo, que usa el smbolo distintivo $ selecciona a

aquellasetiquetasconunatributoconcretocuyovalorterminaendeterminada
cadena.Porejempo,lasetiquetasacuyoatributohrefterminanenhtml:
a[href$=".html"] { color: yellow; }
Porltimo,seincluyeunselectorqueusaelsmbolo*queseleccionaaaquellas
etiquetasconunatribuyocuyovalorcontengaencualquierposicinlacadena
especificada. En el siguiente ejemplo, seleccionara a cualquier imagen cuyo
ttulocontengalapalabraimportante.
img[title*="importante"] {border: 3px red dashed; }
Todoslosselectoresdeatributopuedencombinarseentresiy,porsupuesto,con
otrosselectorescomosiempre.Porejemplo,elsiguienteselectorcuadraraconlas
Pgina 118
HTML & CSS

imgenescuyotituloempiezeporEstadsticasycontengalapalabraimportante:
img[title^="Estadsticas"][title*="importante"] {border: 3px red dashed; }
Selectorgeneraldeelementoshermanos
ElltimodelosnuevosselectoresdeCSS3amplalasposibilidadesdelselectorde
hermanos existente en la versin anterior. Recordemos que el selector de
hermanos(queusabaelsmbolo+)sloseactivabacuandolosdoselementos
de la regla eran hermanos e iban uno a continuacin de otro de forma
inmediata. El nuevo selector usa el smbolo ~ y se activa cuando ambos
elementossonhermanosyelsegundovadespusdelprimeroperosinimportar
queseadeformainmediata.Veamosunejemplosencillo:
<h1>Titular 1</h1>
<h2>Titular 2</h2>
<p>Prrafo 1</p>
<div>
<h2>Titular 3</h2>
</div>
<h2>Titular 4</h2>
Unareglaqueuseelselectordehermanosclsico(porej.h1+h2{color:red;})
slo seleccionarael Titular 2, mientras queusando elselectorgeneralh1 ~ h2
{color:red;}seleccionaraelTitular2yelTitular4.
9.2.LASNUEVASPROPIEDADESDECSS3
SonmuchaslaspropiedadesaadidasenCSS3ymuyirregularlaimplantacinen
losdiferentesnavegadoreshastaelpuntodequecadaunodeellosenmuchos
casoshadesarrolladoporsucuentaalgunasdelasimplementacionesaadiendo
un prefijo distintivo que es o para pera moz para firefox, webkit para
chrome,safariyotrosqueusenelWebkity ms paraInternetExplorer.Veremos
ejemplosdeestoenvariosdelosapartadossiguientes.
Gradientesyunanuevapaletadecolores
CSS3 adopta (con ligeros cambios) la paleta de colores stndard de X11 que
constade147elementosquepodemosusarmedianteunnombrecaracterstico.
LalistadecoloresX11puedesconsultarlaaqu:
http://en.wikipedia.org/wiki/X11_color_names#Color_name_charts
En CSS3 los usaremos siempre en minsculas y eliminando los espacios. Por
ejemplo,elcolorBlanchedAlmondpasaraaserblanchedalmond.
Adems,seincorporalaposibilidadderealizardegradadosdeformaqueyano
necesitamos usar imgenes estticas para estos fines. Existen dos tipos de
gradientes:linealesyradiales.Veamosunejemplodecadauno:
background-image: linear-gradient(bottom, rgb(107,168,104) 13%,
rgb(204,137,180) 57%, rgb(164,219,245) 83%);
background: radial-gradient(center, circle, white, #7DA5CD);
Pgina 119
HTML & CSS

Desglosemoslasparticularidadesdeestasreglas.Enprimerlugar,cualquierade
ellaspuedeirenlapropiedadbackgroundobackgroundimage.Ensegundo,el
valordelapropiedaddeberadeempezarpor lineargradient o radialgradient
segneltipodegradientedeseado.Entercerlugar,ambasdebendellevarun
nmerodeparmetrosseparadosporcomasquesernunmnimodetresenel
casodellinealydecuatroenelcasodelradial.Veamosestosparmetros.
En el caso del lineal, el primer parmetro define la direccin del degradado
definiendosuinicioypudiendousarparaellounaodosdelaspalabrasclavetop,
bottom,rightoleft.Acontinuacinseenumeranloscoloresdeldegradado(dos,
al menos pero pudiendo ser ms). Cada color se define de cualquiera de las
formasadmitidashabitualmenteenCSS(conunvalorhexadecimal,unapalabra
distintivaounafuncinrgb)ypudiendoiracompaadodeunporcentajeque
definelasuavidaddelatrancisinentreunoyotrocolor.
En el caso del radial, el primer parmetro tambin define la direccin pero
ademsdelaspalabrasclavesanteriorestenemosotra,center,queencasode
usarsedeberadeirsola.Elsegundoparmetrodefinelaformadeldegradadoy
puedeser circle o ellipse.Acontinuaciniranlos colores deldegradado que
siguenelmismoformatoexplicadoanteriormenteydeberandeseralmenosdos.
Setrataestadeunadelaspropiedadesdequehablbamoscuyoestndardno
seencuentrageneralizado,asquesiqueremosquelosprincipalesnavegadores
lo entiendad debemos repetir laregla con los diferentes prefijos distintivos. Por
ejemploas:
p.degradadoradial{
background: radial-gradient(center, circle, white, #7DA5CD);
background: -o-radial-gradient(center, circle, white, #7DA5CD);
background: -moz-radial-gradient(center, circle, white, #7DA5CD);
background: -webkit-radial-gradient(center, circle, white, #7DA5CD);
background: -ms-radial-gradient(center, circle, white, #7DA5CD);
}
Enelcasodelosgradienteslineales,tenemosunaherramientawebmuytilque
nospermitegenerarlasreglasdeformaautomticaaqu:
http://gradients.glrzad.com/
Fondosmltiples
CSS3incorporalaposibilidaddeincluirfondosmltiplesenunamismacajasin
necesidaddetenerquesuperponerunacajaporcadaimagen.Laposicin,y
caractersticas de cada imagen (repeticin, etc.) se define tambin de forma
independienteparacadaunadeellas.Veamosunpardeejemplos.Ahoradefinir
imgenes independientes para personalizar las esquinas de una caja es tan
sencillocomoesto:
p.caja2{
padding: 60px;
Pgina 120
HTML & CSS

background: url(esquina1.png)
url(esquina2.png)
url(esquina3.png)
url(esquina4.png)
background-color: white;
}
top left no-repeat,

top right no-repeat,
bottom right no-repeat,
bottom left no-repeat;
Ysiqueremossolapardosimgenesdefondotransparenteenlamismacajanos
bastaconhacerlosiguiente:
p.caja3{
width: 300px;
height: 400px;
background: url(imagen1.gif) bottom no-repeat,
url(imagen2.gif) bottom no-repeat;
}
Esquinasredondeadasybordesdecoradas
CSS3 incluye, por fin, la posibilidad de redondear bordes sin necesidad de
complicadas maniobras como hemos tenido quehacerhastaelmomento.La
propiedadparahacerestosellamaborderradius.Susintaxisesbiensencilla:
border-radius: 10px;
Elvalorindicaelradiodelarcodecircunferenciaquedelimitaelarco.Sepuede
usarcualquierunidaddemedidavlidaenCSS(pulgadas,em,etc.)ydefinirde
formaindependientecadaunadelascuatroesquinasdelacajaconlasiguiente
sintaxis:
border-top-right-radius: 5px;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 3em;
border-top-left-radius: 10px;
Conelformatoabreviadopodemosponerdosvaloresdiferentes(elprimeropara
las esquinasuperiorizquierda einferiorderecha y elotro paralas otras dos)o
cuatrovalores(unoparacadaesquinaempezandoporlasuperiorizquierday
continuandoenelsentidodelasagujasdelreloj):
border-radius: 10px 5px;
border-radius: 10px 5px 20px 25px;
Podemosusartambinesquinasirregularesespecificandodosradiosdiferentes:
unoparaelejeXyotroparaelejeY.Elformatocuandotodaslasesquinasson
igualeseseste:
border-radius: 10px / 50px;
Cuandoespecificamoslasesquinasunaaunanonecesitamoslabarra:
border-top-right-radius: 5px 10px;
Pgina 121
HTML & CSS
Ycuandolasesquinassondiferentesperolasespecificamosengrupo:
border-radius: 10px 10px / 20px 30px;
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
Elredondeadodeesquinasmedianteestapropiedadsepuedeaplicar,adems
deaunacaja,tambindirectamenteaunatablaoaunaimagen:
table {
width: 200px;
background-color: rgb(185,205,225);
text-align: center;
margin: 30px;
border-radius: 20px;
}
#imgredondo {
width: 600px;
height: 150px;
margin: 0 auto;
border-radius: 1em;
background-image: url(header.jpg);
}
Sombras
CSS3incorporadospropiedadesquesirvenpardarsombrasatextosycajasque
se llaman, respectivamente, textshadow y boxshadow. El formato bsico de
ambasessimilar.Veamosunpardeejemplos:
text-shadow: 15px 5px 10px orange;
box-shadow: -5px -10px 5em #000;
Los dos primeros parmetros son el desplazamiento vertical y horizontal de la

sombra. Valores positivos desplazan esta haca abajo y la derecha. Valores
negativoshaciaarribaylaizquierda.Eltercerparmetrosmarcalaintensidady/o
difuminacin de la sombra (valores ms pequeos definen una sombra ms
intensa y marcada, mientras que valores grandes crean una sombra muy
difuminadaypocodefinida).Nosepuedeusarunporcentajecomoningunode
estos tres parmetros. El cuarto parmetro es el color de la sombra y puede
expresarsedecualquieradelasformasvlidavistasenCSS.
boxsahdow permite, adems, dos parmetros opcionales: uno de ellos ira
delantedelcolorydefine,medianteunamedida,ladistanciaalobjetodelfoco
que provoca la sombra, de forma que valores positivos acercan el foco
provocandounasombramayoryvaloresnegativosalejanelfocoprovocando
unasombramenor.Elsiguienteparmetroopcionaleslapalabraclaveinsetque
iraalfinaldeladeclaracinyprovocaraunasombrainterioralacaja.
Pgina 122
HTML & CSS
box-shadow: -5px -10px 5em 15px #000 inset;
Opacidad
La propiedad opacity permite definir elementos parcial o totalmente
transparentes.Elvalordeestapropiedadesunnmerodecimalentre0y1,de
formaque1definelatotalopacidad(cuerposlidoynotranslucido)yel0la
totaltranspariencia.
opacity: .3;
Mscontroldelatipografa
EnCSS3senormalizaelusodetipografasexternas(comolasdeGoogleFonts
quevimoshaceyatiempo)deformaquepodamosusarcualquiertipodefuente
disponibleenlaredennuestraspginas.Laincorporacinydescargadefuentes
sehacemediantelainstruccin@fontfacequetieneelsiguienteformato:
@font-face {
font-family: "fantasia";
url("fantasia.ttf");
}
Siquisiramosimportarmsdeunafuenteennuestroproyectonecesitamosuna
instruccin@fontfaceporcadaunadeellas:
@font-face { font-family: vera; src: url("VeraSeBd.ttf"); }
@font-face { font-family: fantasia; src: url("fantasia.ttf"); }
Inexplicablemente, aunque las fuentes ttf se han popularizado gracias a

Microsoft, estas no son soportadas por ninguan versin de explorer. Microsoft
prefiereusarlastipografaseot.ParaquelosusuariosconExplorerveanlafuentes
necesitamos convertirlas ttfaesteformato yusar esta sintaxis que contempla
ambostipos:
@font-face {
font-family: fantasia;
src: url("fantasia.ttf");
src: url("fantasia.eot");
}
Existen diferentes programas capaces de convertir entre diferentes formatos.

Tambinpuedesusaresterecursoweb:
http://www.kirsle.net/wizards/ttf2eot.cgi
Lanuevapropiedadfontsizeadjustpermiteajustarlaalturadefuentesdiferentes
medianteelusodeuncoeficientedeajuste.SloestimplementadaenFirefox:
font-size-adjust: .448;
Pgina 123
HTML & CSS
Aunquepuedeaproximarseaojoporelmtododepruebaydeerror,existeun
recursowebquenoslistalasfuentesdisponiblesennuestrosistemaynoscalcula
loscoeficientesdeajuste:
http://www.brunildo.org/test/xheight.pl
La propiedad textoverflow decide lo que se har con un texto que no cabe
completamente dentro de la caja en la que se encuentra. Tiene dos posibles
valores: clip (lo corta sin ms) o (lo corta pero antes coloca tres puntos
suspensivos).
Lapropiedadfontstretchpermitirajustarelanchodeloscaracteres,peroporel
momento ningn navegador la implementa. Sus valores posibles son, de ms
ancha a ms estrecha, wider, narrower, ultracondensed, extracondensed,
condensed, semicondensed, normal, semiexpanded, expanded, extra
expandedyultraexpanded.
Lapropiedadtextwrapdefinecomocortarlaslneasdeuntextoytampocoest
implementadaporelmomento.Elvalor normal,pordefecto,indicaqueslose
puedenromperenlosespaciosypuntos.noneindicaquenopuedenromperse,
unrestricted quepuedenromperseentredoscaracterescualesquieray suppress
indicaquenoslonopuedenrompersesinoquesesuprimeninclusolossaltosde
lneamanualesquehayamoscolocado.
Columnasmsfciles
CSS3 dispone de siete propiedades que nos van a permitir mostrar el texto
mediantecolumnasdeformamuyfcil.Son columns, columngap,columnfill,
columnspanycolumnrule.Aligualqueocurreconlaspropiedadesrelacionadas
con los gradientes, esta coleccin de propiedades precisa llevar el prefijo del
navegador(moz,webkit)parafuncionarenfirefoxychromeperonoasen
opera.Explorernolasimplementaan.Losejemplosacontinuacinseverncon
lasintaxisnecesariaparamozillasalvoqueseindiquelocontrario.
columnsdefineelnmerodecolumnasyelanchomnimoesperadoparacada
una de ellas. Puede separarse en dos propiedades independientes: column
widthycolumncount.Elfuncionamientodeambosparmetrosestntimamente
relacionadoperolainterpretacinquehacendeelloslosdiferentesnavegadores
no es unnime. Mozilla, por ejemplo, da preferencia al nmero de columnas
mientrasqueOperalohaceconelanchodeestas.
/* -moz-columns: 200px 3; */
-moz-column-width: 200px;
-moz-column-count: 3;
La propiedad columnrule define un separador entre las columnas y tambin
Pgina 124
HTML & CSS

puededividirseentrespropiedadesdistintas:columnrulewidth,columnrulestyle
ycolumnrulecolor.Losestilospermitidossonlosmismosquelosdeunborde.
/* -moz-column-rule: 1px solid gray; */
-moz-column-rule-width: 1px;
-moz-column-rule-style: solid;
-moz-column-rule-color: gray;
columngapdefineelespaciodeseparacinentrecolumnas:
-moz-column-gap: 50px;
columnspannospermitemarcaralgnelementoparaquenosepropagueentre
diferentes columnas sino queestcompleto enuna deellas.Imaginemos,por
ejemplo, un texto de entradilla o un titular. Tiene dos valores vlidos: 1 y auto
segnquedebalimitarsealaprimeracolumnaoexpandirseporlasqueprecise.
SloloimplementanOperayChrome:
column-span: 1;
-webkit-column-span: 1
columnfill define como se llenaran las columnas. Por defecto su valor es

balance,quehacequeelnavegadordividaelcontenidodelacajaentantas
partesigualescomocolumnasparaqueestasseanlomauniformesyparejas
posible.Sisuvaloresauto,elnavegadorllenarprimerolaprimeracolumnayno
pasaralasegundahastaquenoquepanadaenellayassucesivamente.Esta
propiedadannoestimplementadaenningnnavegador.
Transformacionesytrancisiones
Lapropiedad transform permiterealizardiferentestransformacionesen2Do3D
sobrecualquierelemento(textos,cajas...)denuestraweb.Setratadeunadelas
propiedadessobrelasqueanseesttrabajando(sobretodoenelterrenode
3D),implementadaentodoslosnavegadoresexceptoelexplorer,quehayque
usarconlosprefijospropiosdecadanavegador(moz,webkityo)yparala
quesloveremosalgunosejemplosbsicos.
Las transformaciones disponibles son rotacin cambio de escala, deformacin
oblicuaydesplazamiento.
Larotacinsepuedeexpresarengrados(deg),radianes(rad),aplicarsealosejes
XeYporseparado(rotateXyrotateY),aambosporigual(rotate),yespecificarun
nmero de grados positivo (en el sentido de las agujas del reloj) o negativo
(sentidocontrario).Unejemplo:
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
Loscambiosdeescalaseespecificanmedianteunnmeroenteroodecimalque
Pgina 125
HTML & CSS

puede ser mayor que cero (ampliacin). Menor (reduccin) o negativo
(reflexin).TambinpodemosaplicarunfactordeescaladiferentealejeXyalY
(scaleXyscaleY).Otroejemplo:
-moz-transform: scale(2.5);
-webkit-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
La deformacin oblicua usa el parmetro shew y nos permite especificar un

ngulo en grados, radianes o gradientes (grad), positivos, negativos (para el
sentido, igual que en la rotacin) y especificar una deformacin comn o
separadaparacadaeje:
-moz-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
Porltimo,translatenospermitedefinirundesplazamientoindicandoesteenuna
medidaconcretaoentantoporciento,convalorespositivos(abajoyhaciala
derecha)onegativos(arribayhacialaizquierda).Enestecasoelvalordela
propiedadpuedellevarunoodosvaloresaplicandoenelprimercasoaambos
ejesyenelsegundodistinguiendoentreambos:
-moz-transform: translate(100px, -50px);
-webkit-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
transform: translate(100px, -50px);
Otras transformaciones en diferentes estados de normalizacin son: matrix,

matrix3d,translate3d,translateZ,scale3d,scaleZ,rotate3d,rotateZyperspective.
Lapropiedadtransition,porltimo,nosvaapermitirrealizarpequeosefectosde
animacin sin necesidad de recurrir a javascript. Usamos para ello cuatro
propiedades: transitionproperty, transitionduration, transitiontimingfunction y
transitiondelay (o transition, sin ms). Tampoco est disponible para Explorer.
Veamosprimerounejemployluegoexplicaremoslosdiferentesparmetros:
div.trancision {
margin: 10px auto;
padding: 10px;
text-align: center;
width: 200px;
height: 100px;
background-color: pink;
-webkit-transition: border 5s ease-out ;
-moz-transition: border 5s ease-out;
-o-transition: all 5s ease-out;
Pgina 126
HTML & CSS

transition: border 5s ease-out;
}
div.trancision:hover{
border-right: 200px solid #9cf;
}
Enlaprimerareglaespecificamosquelatrancisinafectaralborde(trancision
property),quedurar5segundos(trancisiontimingfunction)yqueserrpidaal
principioymslentaalfinal(easeout).Enlasegundaregla,queseactivaral
colocarelratnencima,hacemosuncambioenelbordedelelemento(tantode
tamaocomodecolor)ylatrancisinrealizarlatransformacinentreelestado
originalyelfinalconlosdatosespecificados.Alretirarelratnlaanimacinse
invertir.
Lapropiedadpuedeserelancho(width),elalto(height),el color,unalistade
propiedades diferentes separadas por coma o all (todas las propiedades que
cambien entre uno y otro estado). Los tiempos y retrasos se especifican en
segundos (s) o milisengudos (ms). Por ltimo, el timingfunction puede ser
constante(linear),delentoarpido(easein),derpidoalento(ease o ease
out)olentoalprincipioyalfinalymsrpidoenelcentro(easeinout).
Se pueden especificar tambin diferentes parmetros para diferentes
propiedades:
transition: width 2s ease, height 3s linear;
Pgina 127
HTML & CSS
11.ENLACES,BIBLIOGRAFAYREFERENCIAS
Esabsolutamenteimposiblereseartodaslasayudasyreferenciasquealolargo
delaoenqueheredactadoestosapuntesydurantemuchotiempoanteshe
tomado de la web, libros de consulta, ejemplos de pginas encontradas en
Internet,etc.Perosituvieraquequedarmeconalgunascomoreferenciasde
cabecera,serajustomencionaralmenosalassiguientes.
http://www.librosweb.es/ es una coleccin de libros web escritos en
castellanoqueabarcantodaslasdisciplinasquehemostocadoaqu.
http://www.w3schools.com/ es,sinduda,lamejorreferenciaqueexisteen
la web cuando quieres consultar los argumentos de una etiqueta, los
valoresquepuedetomaro,simplemente,veralgunosejemplossimplesde
cualquierelementoHTMLy/oCSS
http://meyerweb.com/ eslapginawebdeEricA.Meyer,unverdadero
monstruo de esta disciplina y artfice de la gran mayora de trucos y
tcnicasquehemosvistoenelcaptulo7
Y,paralosfanticosdelpapel,sitengoquemencionardoslibrosdemibiblioteca
personalsobreestetemamequedoconestos:
HTML5yCSS3.VanLancker,Luc.EdicionesENI.2011
CSS,Tcnicasprofesionalesparaeldiseomoderno.Meyer,EricA.Editorial
AnayaMultimedia.2011
Pgina 128

HTML y CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML y CSS

Enviado por

Direitos autorais:

Formatos disponíveis

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

HTML & CSS

HTML & CSS

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

En el mundo de la informtica el padre de los lenguajes de marcas ms

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

HTML & CSS

Las cifras impresas en rojo representan el porcentaje de HTML5 que ese

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

En este segundo apartado trataremos los elementos ms bsicos de HTML

Jos Mara Morales Vzquez

HTML & CSS

Las pginas web estn hechas siempre de elementos rectangulares que se

HTML & CSS

los compaeros del curso

HTML & CSS

Define una lista no ordenada (con boliches)

El atributo type (de uso desaconsejado!!!) nos permitira cambir el tipo de

Jos Mara Morales Vzquez

HTML & CSS

El atributo alt tambin es obligatorio en XHTML. Algunos otros atributos tiles y

El atributo title muestra un tooltip al pasar el ratn sobre la imagen. width y

Jos Mara Morales Vzquez

HTML & CSS

Elatributo title nosmuestrauntooltipalpasarelratnsobrelenlace,mientras

Como vemos, usamos un elemento a para crear el hiperenlace usando un

AntesdeHTML4seusabaelatributo name enlugarde id. EnHTML4 nameest

Jos Mara Morales Vzquez

HTML & CSS

HTML & CSS

espacio irrompible y no eliminable

Las tablas se hanusado durantemucho tiempo en HTML como el sustituto de

Jos Mara Morales Vzquez

HTML & CSS

Laetiqueta <th> seusaparadefinirunaceldacomodeencabezadoypuede

Jos Mara Morales Vzquez

HTML & CSS

Por ltimo, disponemos tambin de la etiqueta colgroup que nos permitir

HTML & CSS

font y basefont estn desaconsejadas en HTML 4.01 y desaparecen en HTML5.

center tambin est desaconsejado. El atributo align, de la etiqueta p (que

frame, frameset y noframes desaparecen en HTML5 y hay mucha controversia

Jos Mara Morales Vzquez

HTML & CSS

Podemos sustituir la hoja Traditional por otra de las siguientes: Midnight,

La segunda forma sera introducir una nueva seccin dentro de la cabecera

La tercera y ultima sera indicar, tambin en la seccin head de nuestro

En la sentencia anterior, en la etiqueta link podemos incluir un atributo