Documentos de Académico
Documentos de Profesional
Documentos de Cultura
HTML&CSS
(Versin1.5)
JosMaraMoralesVzquez
josemaria@morales-vazquez.com
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
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
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
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
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:
Algunoslenguajesdemarcas
HTMLes,sinduda,ellenguajedemarcasmsusadoylabasedelaspginas
web.Suprimeraversin,quedatadelosaos90,describaslo22elementos
diferentes.Laversinactualesla4.01aunquelaversin5estenunafasemuy
avanzadayseempiezaautilizarcadavezmsapesardequesetratadeuna
normaquenoestanaprobadadeformadefinitiva.
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.
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:
<strong>texto normal</strong>
Etiquetasotags: Sonlasmarcaspropiamentedichasyhabitualmentevan
entrecorchetesquebrados<>Lashaydeinicioydefinaunque,enalgunos
casos, ambas pueden coincidir en una sla partcula con una sintaxis
especialcuandoelelementonotienecontenido:
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>
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:
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
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):
Hoy,febrerode2014,lastornashancambiadobastantedesdequeempezamos
aescribirestemanualyyaesperfectamentefactibleencontrarbastantea
menudoaplicacioneswebconstruidascompletamenteentornoaHTML5
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:
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
consecutivasquehagamosmanualmenteennuestrodocumentonoserespetan.
Porejemplo,siyoescribieralosiguiente:
<p>Hola a todos
los compaeros
Enelnavegadorsemostraralosiguiente:
Cuandoaparecenmltiplesespaciosenblancosloserespetaelprimero.Por
ejemplo:
<p>Hola a todos los compaeros del curso de HTML</p>
Severaenelnavegadoras:
2.3.LASETIQUETASMSCOMUNES
<p></p> Define un prrafo
<br /> Salto de lnea
<b></b> Negritas
<strong></strong> Negritas
<i></i> Cursivas
<em></em> Cursivas
<sup></sup> Superndice
<sub></sub> Subndice
<del></del> Texto tachado
<pre></pre> Preformateado
<h1></h1> Encabezado de nivel 1
<h2></h2> Encabezado de nivel 2
...
<h6></h6> Encabezado de nivel 6
<cite></cite> Cita corta
<q></q> Cita corta
<blockquote></blockquote> Cita larga
<hr /> Lnea horizontal
Todaslasetiquetasllevanasociadaunainformacindeestilopordefecto,pero
estapuedevariarentrecadanavegador.Msadelante,cuandoveamosCSS,
veremoscomomodificardichoestiloytratardequesealomsindependiente
posibledelnavegadorqueusemosparaverlas.
Enlasetiquetasenlasquepodemoselegir,preferiremossiemprelasque
conllevaninformacinsemntica(strong,em,cite)frentealasqueslonosdan
informacindeestilo(b,i,q).
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.
Porejemplo:
<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Mircoles</li>
<li>Jueves</li>
</ol>
Laslistassepuedenanidar,peroteniendoencuentaquelanuevalistatieneque
abrirseantesdecerrarelitemanterior.Porejemplo:
<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>
</ul>
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.
Laetiquetalisepuedeusarfueradeunbloqueoloulypuedellevarunatributo
denominadotypeconcualquieradelasopcionesvlidasenoloul(tambinest
desaconsejadosuuso).
Lasimgenes
Para insertar imgenes se utiliza la etiqueta img Es una etiqueta nica (sin
contenido)porloquetenemosqueusarelmtododeautocerradoparacumplir
lasnormasdeXHTML.Lasintaxisbsicaesesta:
Elatributosrcesobligatorioeindicaellugardondeestlaimagen.Sepuedeusar
unarutarelativa,absolutaoindicarunaURLweb.:
<img src=pics/2012/imagen.jpg alt=Texto alternativo />
<img src=http://www.example.com/imagen.jpg alt=Texto alternativo />
Elatributobordermuytilparaindicarquequeremosunaimagenconborde(sin
lcuandollevaincorporadounhiperenlace)estdesaconsejadoenHTML4yno
existeenHTML5.Indicaelnmerodepxelesquetendrelbordedelaimagen.
Por defecto las imgenes se muestran sin borde salvo que pertenezcan a un
hiperenlace(verelpuntosiguiente)
Laetiquetaimgesunaetiquetadelnea.
Loshiperenlaces
Losenlacesaotraspginasserealizanmediantelaetiquetaa
<a href=http://www.google.es />Google</a>
Otrosatributossontitleytarget:
Parahacerunenlaceaunpuntodentrodelamismapginausamoslasiguiente
sintaxis:
<a href="#C4">Ver el captulo 4</a>
...
<a id="C4">CAPTULO 4</a>
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>
<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:
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:
ltrindicaqueeltextovadeizquierdaaderecha(lefttoright)yrtldederechaa
izquierda.Elvalorpordefectoesltr.
Acrnimosyabreviaturas
Usamoslasetiquetas acronym y abbr,respectivamente,conelatributo title que
mostrarunanotaexplicativaotooltipalpasarelratnporencima.
NOTAIMPORTANTE:acroymdesapareceenHTML5,asquenoconvieneusarlo.
Caracteresespeciales
Loscaracteresespecialesqueseusanparalasetiquetasnopuedenescribirsetal
cualenundocumentoHTML,asquehayqueusarunacodificacinespecial.
< <
> >
"
& &
Existentambinuncaracterespecialquepuedensernosti:
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>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
Laetiqueta<table></table>eslaquedefineycontienealelementotabla.Cada
fila va encerrada como contenido de la etiqueta <tr></tr>. Cada celda va
delimitadaporlaetiqueta <td></td>. Elnmerodeceldasquehayenunafila
determinaelnmerodecolumnasdelatabla.
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>
<td>4</td><td>5</td><td>6</td>
</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>
<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>
NOTAimportante: Comohemosdichoenvariasocasiones,HTML5estanen
fase de borrador. Los atributos que aqu aparecen como vlidos o
desaconsejadospuedenvariardelasespecificacionesfinalesdelanorma.Por
2.5.ALGUNASETIQUETASYATRIBUTOSDESACONSEJADOSMS
font y basefont estn desaconsejadas en HTML 4.01 y desaparecen en HTML5.
Paracambiarlascaractersitcasdeltextohayqueusarhojasdeestilo.Unejemplo
deuso:
systrikesedesaconsejan,perolaetiquetadelquehaceexactamentelomismo
siguesiendovlida.
Si queremos mostrar texto tachado deberamos de <del>hacerlo as</del> y
nunca <s>as</s> o <strike>as</strike>.
Laetiquetauparasubrayartextotambindejadeestarsoportada.
bigysmalltambindesaparecenenHTML5
<html>
<frameset cols="25%,*,25%">
<frame name=zona1 src="frame_1.htm" />
<frame name=zona2 src="frame_2.htm" />
<frame name=zona3 src="frame_3.htm" />
<noframes>Tu navegador no soporta frames</noframes>
</frameset>
</html>
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" />
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>
Dentrodelarchivoestilos.cssescribiremosnuestrosestilosconunasintaxisidntica
alavistaenelcasoanterior:
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:
Podemosaplicarestilossimultneamenteamsdeunaetiquetaseparandolos
selectoresconcomas:
h1, h2, h3, h4, h5, h6 {color: blue; }
Observaquesicometesunerrorenlasintaxis,elnavegadorsencillamenteno
tendrencuentaladeclaracindeeseselector.
Selectoruniversal
Existeunselectordenominadouniversalquesesimbolizaconunasterisco.Setrata
deunaespeciedecomodnquepermiteseleccionaracualquerelemento:
Cuidado:asaplicadoserasimilar,peronoigual,aaplicarlamismadeclaracin
sobrelaetiquetabody,comohemosvistoantes.Lomejorparaqueaprecieslas
diferenciasesquepractiquessobrealgunosejemplos.
Coloresypropiedadesbsicasdeltexto
LoscoloresenladeclaracindecualquierselectordeCSSsedefinencondos
propiedades: color (del texto o del elemento en si) y backgroundcolor (del
fondo).Porejemplo:
Losvalorespordefectosonblackparaelcolordelelementoytransparentparael
fondo.Podemosaplicarestaspropiedadesenladeclaracindecualquier
selectordelosyavistosylosqueveremosenadelante:
hr {color: red;}
Qucoloressonvlidos?Porunladotenemoslaposibilidaddeusarunapaleta
de17coloresbsicosusandosunombrepredefinidodeentrelosqueaparecen
enelsiguientemapadecolores:
Unasegundaopcinesindicarelcolorexactoquequeremosmediantesuvalor
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
Sieltipodeletraconstademsdeunapalabratenemosqueindicarloentre
comillasdobles:
em {font-family: Times New Roman;}
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
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;}
fontvariant(desapareceenCSS3y,portanto,noesaconsejablesuuso)esuna
propiedadquenospermitedosnicasopciones:normalosmallcaps(loqueen
espaolconocemoscomoversalesoversalitas).
p {font-weight: bold; font-style: italic; font-variant: small-caps; }
Estapropiedadnosloalineaeltexto,sinoquehacelomismoconlasimgenes
queestncontenidasenuntextocuyoprrafolatengaaplicada.Porejemplo,si
queremos una imagen alineada no podemos aplicarla sobre la etiqueta img,
perosisobrelaetiquetapdelprrafoquecontieneaesaimagen:
p {text-align: center; }
Yluego,meterlaimagendentrodeunprrafo:
<p><img src="logotipo.jpg" alt="Logo de mi empresa" /></p>
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>
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.
Selectoresdeclase
Losselectoresquehemosvistohastaahorafallanenunacosa:nosonflexibles
cuandoqueremosaplicarunestilodiferenciadoaalgunosprrafos,peronoa
todosellos.Unadelassolucionesparaestoesusarlosselectoresdeclase.Para
aplicarlos, lo primero que tenemos que hacer es usar el atributo class en las
etiquetasHTMLcorrespondientesalosprrafoscuyosestilosqueremosdiferenciar:
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;}
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
yelsimboloalmohadilla(#)enlugardelpuntoenladefinicindelareglaCSS.
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:
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.
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;}
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
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;}
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
deberadetenerpordefecto.Podemosvariaresteponiendounporcentaje,un
nmeroounamedidaenvalorabsolutoorelativo.LassiguientesreglasCSSseran
prcticamenteequivalentes:
p { line-height: 1.5;}
p { line-height: 1.5em;}
p { line-height: 150%;}
Comoobservamos,textoeimagensealineanporlabasequeeselvalorpor
defecto.Seraequivalenteausarelvalorbaselineparaestapropiedad.Creemos
ahoralasiguientesreglasCSS:
img {border:1px solid; vertical-align: text-bottom;}
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
equivalentes:
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;}
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%; font-
weight: 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:
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
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>
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; } /* 0,1,0,3 */
.alerta{color: blue;} /* 0,0,1,0 */
li.alerta{color: yellow; background-color: yellow;} /* 0,0,1,1 */
ul .alerta{color: green;} /* 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; }
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:
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
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>
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
/* 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;
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;
/* 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.
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;
Podramossustituirlasporestaotra:
background: url(gotas.gif) blue repeat-x top center fixed;
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>
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;}
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>
<div id="izquierda">
<div class="caja">Caja 1<br/> En un lugar de la mancha de
cuyo
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>
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>
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;
border: 5px solid blue;
z-index: 2; }
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.
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>
Estodejaravisibleunrectnguloque,respectoalelementoenelqueseaplique,
empiezaa0pxdelapartesuperior,llegahastalos200pxhacaladerecha,100px
haciaabajoy0pxdesdelaizquierda(osea,cuatrocoordenadasenelsentidode
lasagujasdelrelojempezandodesdearriba,comosiempre)
PuedesverunejemplocompletoconestareglaCSS:
.caja { width: 25%;
padding: 5px;
position: absolute;
border: 1px dashed black;
clip: rect(0 200px 100px 0);}
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;
border: 1px dashed black;
cursor: crosshair;}
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.
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; }
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; }
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
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;}
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;}
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
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.
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.
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 {
border: 2px dotted black;
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%;
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);
border: 2px dotted black;
margin: 5px auto;
width: 780px;
overflow: auto
}
Laimagenainsertardebaradeseralgoas:
Ynuestratablaas:
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 {
width: 780px;
margin: 5px auto;
color: white;
background-color: purple;
overflow: auto;
outline: 3px solid black;
}
#contenedor4-2 {
width: 500px;
float: right;
background-color: orange;
}
#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
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
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;
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
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.
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
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;
border: 1px solid black;
}
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.
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.
Lasclavesdeestetipodediseossonestas:
Tantoeltextoquedisparaelefectocomoeltextoquesemostrarenel
tooltip aparecern en el HTML como contenidos de elementos
diferenciadosyanidados.Enelejemplo13usamosdosspan:
Yenel14unspandentrodeuna:
Eltextoqueaparecerenlanotasemarcacomoinvisibleusandola
propiedaddisplay:
span.nota span.tip {
display: none;
font-size: .6em;
font-weight: normal;
color: black;
}
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.
Ejemplos15y16Mens
De los tooltips a los mens slo hay un pequeo paso. De hecho el anterior
ejemplo14podraconsiderarseyaunpequeomenmuyprimitivo
Elejemplo16tieneademslapeculiaridaddequeapenenascambiandounas
lneasenelCSSpodemostransformarloenunmenhorizontaloverticalanuestro
antojo.SeadjuntanlasdosCSSnecesariasparacambiarentreunoyotromodelo:
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.
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.
Ejemplos20y21Contorneos
Elcontorneodeimgenes,algotpicodelasrevistas,esunefectosencillopero
laborioso. La forma ms sencilla de hacerlo consiste, bsicamente, en
diseccionarlaimagenacontornearenrodajasdemsomenosalto(segnlo
finoquequeramosqueseaelefecto)yanchovariabley,simplemente,dejarque
lascajasdenuestrotextoseapoyenlateralmenteendichasimgenes,bienala
izquierda,aladerechaoaamboslados.
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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Hola Mundo en Javascript</title>
<script language="javascript">
function holamundo(){
alert(Hola mundo!);
}
</script>
</head>
<body>
<p>texto 1</p>
<script type="text/javascript" >
holamundo();
</script>
<p>texto 2</p>
<script type="text/javascript" >
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>
<meta charset="UTF-8" />
<title>Hola Mundo en Javascript</title>
<script language="javascript">
function holamundo(texto){
alert(texto);
}
</script>
</head>
<body>
<p>texto 1</p>
<script type="text/javascript" >
holamundo(Hola Mundo!);
</script>
<p>texto 2</p>
<script type="text/javascript" >
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>
<meta charset="UTF-8" />
<title>Hola Mundo en Javascript</title>
<script type="text/javascript" src="func.js"></script>
</head>
<body>
<p>texto 1</p>
<script type="text/javascript" >
holamundo(Hola Mundo!);
</script>
<p>texto 2</p>
<script type="text/javascript" >
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:
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
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
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.
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:
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:
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):
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>
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,
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)"
action="respuesta.html">
<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;
}
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:
<form name="form2ASI" action="respuesta.html">
<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.disabled=true;
formulario.botonenv.value="No puedes Enviarlo
as!";
}
else{
alert('Haz escrito: ' +
formulario.cajanombre.value);
formulario.botonenv.disabled=false;
formulario.botonenv.value="Enviar";
}
}
function enviar(){
alert('Haz pulsado el botn de enviar...');
}
function limpiar(formulario){
alert('Haz pulsado el botn de limpiar...');
formulario.botonenv.disabled=true;
}
Veamosahoralaformadevalidaduncamponumrico.Porejemplounnmero
detelfono.Elformularioesmuysimilaralquehemosvistoanteriormente:
<form name="form2ASI" onSubmit="return enviar(this)"
action="respuesta.html">
<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){
alert('Haz pulsado el botn de enviar...');
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.
Laspropiedadesfundamentalesquepodemosalteraroconsultarmediante
cdigojavascriptdecadaunodeloselementosdeunformulariosonlas
siguientes:
Elemento Propiedades
form name, action, method
button name, value, disabled
text y
name, value, disabled, readonly, size, length, maxlength
password
name, value, disabled, readonly, size, length,
textarea
maxlength, cols, rows
radio y
name, value, disabled, checked, length
checkbox
select name, size, disabled, multiple, type
options value, text
file name, size, disabled
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");
}
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
Cuando se hace doble click con el botn izquierdo
onDblClick
del ratn
Cuando la pgina termina de cargarse
onLoad
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
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/
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>
<meta charset="UTF-8" />
<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
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:
<!--[if IE]>
<p>Esto slo se ver en un Internet Explorer</p>
<![endif]-->
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:
<!--[if IE 6]>
<p>Slo en Explorer 6</p>
<![endif]-->
<!--[if lt IE 9]>
<p>Slo en versiones de Explorer menores a la 9</p>
<![endif]-->
<!--[if lte IE 7]>
<p>Slo en versiones de Explorer menores o iguales a la 7</p>
<![endif]-->
<!--[if gt IE 6]>
<p>Slo en versiones de Explorer mayores a la 6</p>
<![endif]-->
<!--[if gt IE 8]>
<p>Slo en versiones de Explorer mayores o iguales a la 8</p>
<![endif]-->
O,incluso,darleotravueltadetuercaalasintaxisymostrarcdigoqueslose
verennavegadoresquenoseanelInternetExplorer:
<!--[if !IE]> -->
<p>Esto slo se ver si no ests con un Explorer</p>
<!-- <![endif]-->
DeestaformayapodemosmostrarunasetiquetasenExploreryotrasenotros
navegadoresdeformarelativamentefcil,peroexisteunmtodomsrpidoy
limpio de solucionar el problema de las nuevas etiquetas de organizacin: la
librerahtml5shivnospermitenqueelExplorerapliqueestilosaetiquetasqueno
conoce.Paraquefuncionenbastaconincluirlasenlaseccinheaddenuestra
weby,siqueremos,podemosincluirlasconuncomentariocondicionalcomolos
vistosparaqueslosecarguencuandorealmentelasnecesitamos:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
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
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,
<!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 type="date" name="nacimiento" />
<input type="month" name="alta" />
<input type="week" name="vacaciones" />
<input type="time" min="07:00" max="23:00" step="3600" value="09:00" />
<input type="datetime" name="fecha1" />
<input type="datetime-local" name="fecha2" />
<input 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:
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
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>
<meta charset="UTF-8" />
<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>
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
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>
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"> Su navegador no soporta la etiqueta
video</video>
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:
<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:
<script>
var canvas=document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00ff00";
ctx.fillRect(0,0,100,100);
</script>
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;
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();
cv.beginPath();
cv.arc(100, 150, 200, 0, Math.PI, false);
cv.lineWidth = 10;
cv.strokeStyle = "black";
cv.stroke();
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
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.
<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;
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.
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
Ysiquieresalgomsdidcticopuedesconsultarellibrogratuitodiveintohtml5:
http://diveintohtml5.ep.io/
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 href="#enlace1">Ir al punto 1</a></p>
<p><a href="#enlace2">Ir al punto 2</a></p>
<p><a name="enlace1"></a>La, la, la...</p>
<p><a name="enlace2"></a>Bra, bra, bra...</p>
Yusemosestareglacombinadaconelselector:before
:target:before{
content: "Ests aqu -> ";
}
Elselectorp:firstchildseleccionaraalosprrafosmarcadosenazul(elprimerhijo
delbodyyelprimerhijodeldiv),mientrasqueelselectorp:lastchildseleccionara
alprrafomarcadoenrojo(elltimohijodeldiv).
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
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; }
Porltimo,seincluyeunselectorqueusaelsmbolo*queseleccionaaaquellas
etiquetasconunatribuyocuyovalorcontengaencualquierposicinlacadena
especificada. En el siguiente ejemplo, seleccionara a cualquier imagen cuyo
ttulocontengalapalabraimportante.
Todoslosselectoresdeatributopuedencombinarseentresiy,porsupuesto,con
otrosselectorescomosiempre.Porejemplo,elsiguienteselectorcuadraraconlas
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%);
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;
border: 1px solid black;
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;
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: 1px solid gray;
border-radius: 20px;
}
#imgredondo {
width: 600px;
height: 150px;
margin: 0 auto;
border-radius: 1em;
border: 1px solid gray;
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;
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"); }
@font-face {
font-family: fantasia;
src: url("fantasia.ttf");
src: url("fantasia.eot");
}
http://www.kirsle.net/wizards/ttf2eot.cgi
Lanuevapropiedadfontsizeadjustpermiteajustarlaalturadefuentesdiferentes
medianteelusodeuncoeficientedeajuste.SloestimplementadaenFirefox:
font-size-adjust: .448;
Aunquepuedeaproximarseaojoporelmtododepruebaydeerror,existeun
recursowebquenoslistalasfuentesdisponiblesennuestrosistemaynoscalcula
loscoeficientesdeajuste:
http://www.brunildo.org/test/xheight.pl
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;
puededividirseentrespropiedadesdistintas:columnrulewidth,columnrulestyle
ycolumnrulecolor.Losestilospermitidossonlosmismosquelosdeunborde.
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
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
-moz-transform: scale(2.5);
-webkit-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
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);
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;
border: 5px solid blue;
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).
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