Cómo Hacer Una Buena Webpage

HTMLcorrecto.Cmohacerunabuenapginaweb.
http://www.danielclemente.com/html/junto.html
men
Cmohacerbuenaspginasweb
Continuamenteveopginastcnicamentemaldiseadas(nisiquieralas empresasgordassesalvan).Losculpablessonwebmastersquedicensaber HTML,peroqueloestudiaronhaceaos,cuandoannoexistaCSS. EstonoesuntutorialbsicodeHTML(aprendeantescmohacerunaweb [http://html.conclase.net/tutorial/html/]),sinoqueintentaserun"manualdebuen comportamiento"paralosqueaportanpginasaInternet.Explicarcmohacer queunapginaseveabienentodoslosnavegadores,usandoHTML4.01Strict, queluegotepermitirpasaralenguajesmejores,comoXHTML,sinesfuerzo. Nosoyexpertoenesto,yloquedigoaquesmiopinin,peroversquecoincide conladecualquieraqueentiendadeltema.Porltimo,sinecesitasejemplos, puedesempezaranalizandoestaweb,pueslaconsiderobienhecha. Septiembre2004(actualizadohastaJun-2005),DanielClementeLaboreo.Licencia FDL.
ndice
Eldocumentoestporsecciones [index.html],todojunto[junto.html],oenPDF [html_correcto.pdf](pensadoparaimprimir). Cmohacerbuenaspginasweb[index.html] Ideasgenerales [#generales] 1. Unawebsetienequepoderverentodoslosnavegadores 2. Separaelcontenidodeldiseo 3. ElcdigoHTMLtienequeservlido 4. ElcdigoCSStambintienequeservlido 5. Scriptsenelservidor Accesibilidad[#accesib]
1de49
26/01/1213:06
1. Elcontenidohadepoderllegaratodos 2. Respetemosalosciegos(ymiopes) Estndaresweb[#estandares] 1. Quesunestndar? 2. Quinloshace? 3. Valelapenaseguirlos? 4. Qupasasinosesiguen 5. Algunasfalacias(mentirasquelagentesecree) 6. Enelmundorealnohaytiempoparahacerlascosasbien 7. Losestndareslimitanalosdiseadoresweb 8. LosestndaresdeInternetExplorersonlosmsusados 9. Microsoftinnovaalsalirsedelosestndares Navegadores [#navegadores] 1. Noslohaydos;haycientos 2. Ningunoimplementaal100%losestndares 3. Nuncahagasunapginaespecficaparaunnavegador 4. Msfalacias(mentirasquelagentesecree) 5. NohayningunapginaquenopuedaverbienconIE 6. EsmejordisearunawebparaIEporqueeslomsusado SobreHTML[#sobre_html] 1. QueselHTML? 2. EsnecesariousarHTML? 3. EsnecesariosaberHTMLparahacerunaweb? 4. EsfcilescribirHTML? 5. EsfcilescribirHTMLcorrecto? 6. CursillodeHTML 7. Cmoesunadireccin(URI) 8. Extensindelosarchivos:htmlohtm? 9. EfectosHTML VersionesdeHTML[#vers_html] 1. Cmo?,quehayversiones? 2. HTML 3. XHTML 4. XSL 5. Culelijo,ycmo? CSS [#sobre_css] 1. Paraqusirve
2de49 26/01/1213:06
2. CmopuedecombinarseconelHTML 3. Formato 4. DndeaprenderCSS 5. Variosejemplos 6. Cambiarelcolordelasbarrasdedesplazamiento ConsejosHTML[#cons_html] 1. LaprimeralneadebeserelDOCTYPE 2. Estructurabsicadeunaweb 3. Elttulo,lomsimportante 4. Escribetodaslasetiquetasenminsculas 5. Cierratodoloqueabras(conexcepciones),yenorden 6. Losatributos,siempreentrecomillados 7. Especificaeljuegodecaracteres(charset) 8. Nouses<font> 9. Darformatoauntrozodetextoountrozodepgina:<span>y<div> 10. Evitael<br>,usaprrafos:<p> 11. Nohacefaltausar parahacermrgenes 12. 14.
<center>noexiste <nobr>noesnecesario
13. Elatributoalignnoexiste 15. Nouses<i>,<b>,<u>,sino<em>,<strong>yCSS. 16. Cuidadoconlos&enlasdirecciones(URI) 17. Aprovechalaslistas 18. Identificarelementos:classeid 19. 21.
<script>y<style>requierentype,nolanguage <body>nonecesitaatributos
20. Lascabeceras<h1>,<h2>,<h3>,...sonparacabeceras 22. ConocelasetiquetasHTML 23. Nouses<marquee>ni<blink> Colores [#colores] 1. Siponesuno,ponlostodos 2. TodosenelCSS 3. Formatosparaespecificarcolores 4. Enhexadecimalllevanel# Imgenes [#imagenes] 1. Cundousarlas
3de49
26/01/1213:06
2. Formatosgrficos 3. Ponsiempreelatributoalt 4. Esetextoquesalealpasarelratnsehacecontitle 5. UsaelCSSparalaaltura,anchurayborde Enlaces [#enlaces] 1. Losbuscadoreslosvisitan(tenloencuenta) 2. Usauntextodescriptivo 3. Noespecifiquesdestinodelenlace(target) 4. Los"enlaces"conJavaScriptnosonenlacesnormales Tablas [#tablas] 1. Casinohacenfalta 2. Estructuradeunatabla 3. Ni<table>ni<tr>ni<td>necesitanatributos Frames [#frames] 1. Nohacenfalta 2. Inconvenientes(framesareevil) 3. "Ventajas"delosframes,desmentidas 4. Quusarentonces 5. Cundousarframes JavaScript[#javascript] 1. Mejorusascriptsenelservidor 2. Losscriptshandehacercosascmodasparaelusuario 3. Queseaopcional 4. Nohagasbrowsersniffing Flash[#flash] 1. NoesparasustituiralHTMLoCSS 2. HadeseropcionalverunaanimacinenFlash 3. CundousarFlash Java[#java] 1. CundoponerJavaenunaweb
Ideasgenerales
Lascaractersticasdeunawebbienconstruidasonlassiguientes:
4de49
26/01/1213:06
Unawebsetienequepoderverentodoslosnavegadores
Ycuandodigoentodos,merefieroatodos,noslolosmscomunes.Elsiseve msbonitaomsfeaesotrahistoria,perocualquiervisitantedebepoderentrar encualquierseccinsinproblemas. Estoesmuchomsfcildeloqueparece,yesloquequieroexplicareneste artculo.
Separaelcontenidodeldiseo
Laregladeoroquehayqueseguiralhacerunaweb.Todoslosnavegadores puedenmostrareltextodeunapgina,peroalgunosnosoportanlasimgenes, colores,animaciones,mensoefectosespeciales.Siconsigueshacertodoesto opcional(sloparanavegadoresavanzados),teasegurasdequecualquierapueda leerlapgina,queprobablementeesloquequierenlosvisitantes.Quien,adems, quieravertuwebbonita,yasepreocupardeusarunnavegadoravanzado. Laclaveparasepararelcontenidodeldiseoesseguirestospasos: 1. Escribirtodalaestructuraycadaseccindelaweb,sinpreocuparseporel diseo.Estoconsisteendospasos: i. escribireltexto(laspalabras,frases,ytodoloquetengasquecontar). ii. usarelHTMLparaanotarlaestructuradeltexto.Sonetiquetasmuy sencillas;slohayqueirrevisandoeltextoeirpensandoestoesun prrafo,estootro,estounacabecera,estounalista,etc. 2. Unavezacabadalapgina(porahorafea),seescribeundiseoenCSS (hojasdeestilo),talvezenunficheroaparte. Elpaso1esparaelcontenido;elpaso2paraeldiseo.Sialguiensepierdeel diseo,sequedaenelpaso1:conunawebestructuradayconcontenido. Siluegoquieresaadirmscosasalaweb,yanotienesquepreocupartedel diseo.Yviceversa:sitecansasdeldiseo,puedescrearotrosintenerquetocarel cdigoHTMLnilasseccionesqueescribiste. MsadelanteexplicoquesesodeHTMLyCSS.
5de49
26/01/1213:06
ElcdigoHTMLtienequeservlido
Paraquetodofuncionebien,tienesqueusarelHTMLqueentiendenlos navegadores,noelquetteinventes. PodrasleertelasespecificacionesdellenguajeHTML[http://www.w3.org /TR/html401/]ycompararlascontucdigo,peroesmsfcilqueusesherramientas comoelvalidadordeHTMLdelW3C[http://validator.w3.org/](esquiencreel estndarHTML).Leponesladireccindelapginaounficherodetudisco,yte dicequerroresleencuentra. Nohagasesodeprobarenvariosnavegadoresaversisevebien;laprueba definitivaesversielcdigovalidaeneltestono.Sivalida,todoslosnavegadores lomostrarnbien,porquetodosentiendenHTML.
ElcdigoCSStambintienequeservlido
CSSesotrolenguaje,ysinoloconocespuedesequivocartealescribirlo.El validadordeCSSdelW3C[http://jigsaw.w3.org/css-validator/]tedirquerroreslevea tucdigo,ysinoleveerroresesqueescorrecto,porquetambinsonellosquienes seencargandelCSS.
Scriptsenelservidor
Silawebesinteractivaytieneprogramitasquenecesitanhacerclculos,es muchomejorsiseejecutanenelservidor,usandounlenguajecomoPHPo medianteCGIs.SiusasJavaScript,appletsJava,ocualquierotracosaparecida, yapuedesestarsegurodequenotodoslosvisitantesverniguallaweb. Lodelosscriptsenelservidoreslanicaformadeasegurarsequerecibanla mismaweb.
Accesibilidad
Sehablamuchodeaccesibilidadyusabilidad.Sontemasmuyextensos,pero fcilesdeentender.
6de49 26/01/1213:06
Elcontenidohadepoderllegaratodos
(Yeldiseo,paraelquequiera). Yasabesquelawebseseparaencontenidoydiseo.Puesbien,unapginaes accesiblesisepuedellegarfcilmenteasucontenido(aquelloquelawebdice). Portanto,notienequeestarescondidodetrsdelargosmensqueaveces funcionanyotrasno,nitienequedependerdelcmohaconfiguradoelusuariosu navegador. ComoelcontenidoseescribeenHTMLytodoslosnavegadoresentienden HTML,conescribirbuenHTMLyaestcasitodohecho.
Respetemosalosciegos(ymiopes)
Siemprequesehabladeaccesibilidadseexplicaquelosciegosusanunlector depantalla,queesunprogramaquecogeeltextodeunawebyloleeenvozalta. Porsupuesto,noexplicalasimgenes,ysupongoquetampocodicenadasihay coloresocambioseneltipodeletra. Otrosnosonciegos,peronecesitanhacercambiosenlaspginasparapoder verlasbien.Porejemplo,puedennecesitaruncontrastefuerteenloscolores,o agrandareltipodeletra.Entrestosmeincluyoyo,queaveces(despusde muchashorasdeordenador)quieroquitarmelasgafasyponerlotodomsgrande paraquelopuedaleermejor. Alseparareltextodeldiseo,elusuariopuedefcilmentedescartareldiseoo inclusousarsudiseofavorito,escritoenunficheroCSS,sinqueentreenconflicto coneldiseooriginaldelapgina. HeodovarioscomentariosdedespreciodelestilodeYamquemeimportan losciegos?Simiwebnovadirigidaaellos...Qumepierdosinoentranlos ciegos,un0'5porciento?.Bueno,puesparavuestrainformacin,Googleesciego. Cuandoentraatuwebparaaadirlaasubasededatos,nopuedeverimgenes, ninavegarporlosmensJavaScript,niusarelportaldeentradahechoenFlash. Enserioquieresmarginaralosquenosoncomot? Noesmiintencinhablarsobrepginasespecialmenteorientadasaciegos, peroencontrarsbuenosconsejosenesteLlibred'estil[http://www.diba.es/lled/](en
7de49 26/01/1213:06
cataln)yenelvalidadorBobby[http://bobby.watchfire.com/bobby/]paraelWCAG1.0, eningls.
Estndaresweb
Lodelosestndarespuedesercomplicadoenotroscampos,peroporsuerteen Internetesttodomuyclaro:
Quesunestndar?
Unestndar(ostandard)eselmodeloaseguiralhaceralgo.Sondocumentos quedanlosdetallestcnicosylasreglasnecesariasparaqueunproductoo tecnologaseusecorrectamente. Unejemplotpicoeseldeloscdigosdebarras,dondelosetiquetadoresylos fabricantesdeaparatoslectoresseentiendenporquehanseguidolasmismas indicacionessobreelcmointerpretarlos. EnlaWorldWideWeb,algunosestndaresactualesson:HTML,SVG,DOM, CSS,PNG,SOAP,XML,oHTTP.Losiento,sontodosiglas. Esimportantequeentiendasqueestndarnoquieredeciralgoqueesmuy usadoycomn.Porejemplo,nopuedodecirqueelchinoeselidiomaestndarde laTierra,nitampocoelingls.Aestetipodecosasselesllamaestndaresde facto[http://es.wikipedia.org/wiki/De_facto]opseudoestndares. Porsinotehabasdadocuentaan,estndareslocontrariodetecnologa propietaria,queeslaquenormalmenteadoptaunagrancompaaynopueden usarlalosdems.Claroquetambinhaytrminosmedios:tecnologasexplicadas amedias,noexplicadasperoconocidas,etc.
Quinloshace?
EnelcasodeInternety,especficamente,eldesarrolloweb,laorganizacinque hacelosestndareseselWorldWideWebConsortium[http://www.w3.org/](W3C),en elquetodospuedenparticiparconsugerencias,crticasymejoras.Otras
8de49
26/01/1213:06
organizacionesdeestndaresconlasquecolaborasonISOoIETF,quetrabajan entemasmsvariados. VersqueelW3Cnolesllamaestndaressinorecomendaciones,porqueno sepuedeobligaranadieaquelossiga.Lomismopasaconotrasorganizaciones quehacenestndares,comoISO.Osea,quenoesobligatorioseguirlos estndares,perosinolohacestesaldrnproblemas.
Valelapenaseguirlos?
Naturalmenteques;siempreesrecomendableseguirlasinstruccionesdel fabricantedeunproductootecnologa. Silohacestodotalcomoestexplicado,saldrbien.Ysisalemal,puedes echarlelaculpaaotro:Ahhh...yoheseguidolasinstruccionesquedais;siestn malnoesmiproblema.Yesqueenmuchossitiosnotedarnsoportetcnicosi nosigueselprocedimientooficial. Fjateensivalelapena:losprogramadoresdenavegadoreswebsehanledoel estndarHTMLdelW3CparasaberenquconsisteelHTML.Situsasel mismoHTML(elquehapropuestoelW3C),todosteentenderndelamisma forma.PoresounapginaconHTMLcorrectosevebienentodoslosnavegadores. Adems,esmsfcilyrpidoescribirHTMLcorrecto.Esmuchomssencillo deloquepuedaspensar(siaprendisteelHTMLhacetiempo,miraelcdigode estawebyvers).
Qupasasinosesiguen
Imaginaquehablasoescribesaunextranjeroqueconocelobsicodelespaol. Siempiezasahablarleentupropiajerga(conabreviaturas,faltasdeortografa, sinacentosoconexpresionesinventadas),lecostarentenderte.Tienedos opciones: Intentardescubrirquesloquequieresdecirconcadapalabra. Directamentedecirtequenoteentiende,yquelehablesclaro. Destas,laprimeraopcinnoesnadacmodaparal,yaquetienequepensar
9de49 26/01/1213:06
muchoeinclusousarsuimaginacin.Esonotefavorece,porquealomejoracaba creyendocosasquetnohasdicho,sloporquelashaentendidomal.Hastapuede pasarqueledigaslamismacosaadosextranjerosdistintos,ycadaunoentienda algodiferente(yesoquecualquieramigotuyoteentendera...). Encambio,siteavisadequelconoceunidioma(espaol)peroquenoesel mismoqueelquetleestshablando,podrsrectificarytenerunaconversacin normal,cmodaparalosdos. Aunquenoloparezca,elestadoactualdeInterneteselprimero:los navegadoreshandeimaginarsequesloquequeradecirelautordecadapgina web,porque,enefecto,ellenguajequesehabla(HTML)noeselqueentiendenlos navegadores.Poresoesnormalquecadanavegadorinterpretedeformadistinta lamismaweb. Porsuerte,elestndarXHTML(elquedebesustituiraHTMLconeltiempo)se comportacomoenelsegundocaso:sithacesundocumentoXHTMLmalescrito, elnavegadorhadepararseydecirquenosabemostrarlo(porqueesque realmentenosabe).As,todoslosdocumentosXHTMLsernlegiblesyclaros. Todoshablarnbienellenguaje,ysloharfaltaevitarlas"frases"sinsentido.
Algunasfalacias(mentirasquelagentesecree)
Haygentequehabladetodosinsaber.Algunasfrasesqueheodo-impactantes paracualquieraqueconozcaCSSyHTML-son: Enelmundorealnohaytiempoparahacerlascosasbien Porsuerte,aquhacerlobienesmsfcil.Siteasegurasdequeentuwebslo hayHTMLyCSScorrecto: Seahorratiempoytrabajo,porqueellenguajeessencilloypreciso.Nohay quehacerhorasextra,niteclearelcdigoamano,niprobarlapginaen cientosdenavegadores.Conescribirlabiendesdeelprincipioyafunciona. Laspginascuestanmenosdemantener,yaquelainformacinestbien estructuradaycualquierapuedeentenderlaweb(inclusoalguiendistintoal quelacre).ElHTMLseusaparasloparadescribirquescadapartede unaweb.Estoformapartedeunconceptomuchomsamplioqueeseldeweb semntica[http://www.w3c.es/divulgacion/guiasbreves/WebSemantica].
10de49 26/01/1213:06
Cadapginaocupamenos:realmenteseahorramuchocdigoconCSS.Esas porquenotienesquecopiar+pegarundiseoportodatupgina,sinoquecon unasolalneasecambiaelestilodelapginacompleta,oinclusodevariasa lavez. Teahorrasproblemasdecompatibilidad:nosenecesitancasi"chapuzas"que unasvecesvanyotrasno.UsarelHTMLvlidoesmuchomsrpidoque probarlawebenvariosnavegadoreshastaquefuncione,porquesiestbien escrita,representarntodotalcomolesmandas,sindecidirellosporti. Evitaproblemasalvisitante:lagenteloquequiereesquelapginafuncione yyaest.Tutrabajoesconseguirqueseaas,ydesdeluegousarelHTMLy CSScorrectoeslomejorquepuedeshacerparaconseguirlo. Osea,quetantosieresun"profesional"quetrabajapordineroounaficionado conpocotiempolibre,teinteresasabercmoconseguirbuenosresultadosconel mnimoesfuerzo.Cuestaunpoquitoaprenderlobsico,peroesimportante saberloyteevitarproblemas. Poresoenelmundorealrealmenteseutilizatodoestodelosestndares,el HTML,XHTML,CSS,etc.Nosloesteora. Losestndareslimitanalosdiseadoresweb Alguienmehallegadoadecir:Perocmovoyarespetarlosestndares,sislo soyundiseador,yademsquierousarFlashyJavaScript?. Puessiteparecequesercorrectoimplicarestringirseynopoderusarunmontn decosas,teequivocas.Siteproponesaprenderyusarlosestndares(en contraposicinalastecnologaspropietarias),tienesatudisposicin: HTML:loquecasitodosusanparahacerpginasweb. CSS:sinofueraporl,nohabramosavanzadonadaenlaweb.Loms importantequeundiseadordewebsdebesaber. JavaScript:s,JavaScriptesunestndar. Flash,Java,yotrosformatos:s,insertarcontenidosexternosenunaweb formapartedelestndarHTML,aunquelospluginsseanpropietarios. XML:elfuturoparaestructurardatos;tilencualquiersitio. PNG:excelenteformatogrfico,muchomejorqueGIF. SVG:grficosvectorialesparalaspginasweb. SOAP:paracompartirinformacinentreaplicacionesporHTTP.
11de49 26/01/1213:06
MathML:paraponerfrmulasmatemticas. P3P:paracontrolarlaspolticasdeprivacidaddeunaweb. Muchasmscosas:XHTML,DOM,HTTP,XSL,RSS,SMIL,yms. Asquenodigasquelosestndarestelimitan,sinoquegraciasalos estndaresabiertostenemosInternet. LosestndaresdeInternetExplorersonlosmsusados Queno...quelosestndaresloshaceelW3C.Siterefieresalastecnologas propietariasdeMicrosoftqueestnmuyextendidas(tantoqueparece"normal" tenerlas,comoWindows),aesoselellamaestndardefactoopseudoestndar. Yno,lastecnologaspropietariasdeMicrosoft(comoVBScript,ActiveX,JScript, opartedelllamadoDHTML)nosonmuycomunes,perocuandoseusanenunsitio webmolestanmucho.LoquesqueescomnesquecadaunoescribaelHTML comoquiera,mezclandocosasdetodoslados. Microsoftinnovaalsalirsedelosestndares Losestndaresquecitoarribanosonnadaanticuados(comopuedapasarconel diccionariodelaRAE);alcontrario:cadasemanasalennuevosdocumentos, propuestaseinformestcnicos [http://www.w3.org/TR/],yseseguirtrabajandoen ellosparasimplificarlosyhacertodomssencillo.Loquesepuedehacerahora conCSS,PNG,oSVGesmaravilloso. Encambio,cuandoMicrosoft,enunodesusproductos-quesiempreson anticuados-implementamalunestndarporvoluntadpropia,creaelcaosporque apartirdeentonceshabrdosformasdehacerlamismacosa:laformabuena,y lamala.Muchosusarnlamala,ycomoalgunosproductosdeMicrosoftsonmuy usados,elmundosellenardecosasmalhechas.Esoesloquepasaconlas pginasweb. Resumiendo:losestndaresnosonanticuados.Nigunaempresatieneque renovarlos;quienpiensequesonmalosqueparticipeensucreacin.Microsoft estropeatodoalnoimplementarlosdelaformacorrecta. Alguiendecaunavez:voyaempezaraconducirendireccincontraria,es malo?No,porqueasobligoalosdemsairmsatentosyhabrmenos
12de49
26/01/1213:06
accidentes,no?
Navegadores
AtodoloqueaccedealaWWWselellamaUserAgent(agenteusuario).LosUA mscomunessonlosnavegadores,perootrosUAsonlosrobotsdelosbuscadores, lostelfonosmviles,olosasquerososprogramasdelosspammersbuscando direccionesdee-mail.
Noslohaydos;haycientos
SeguroquehasodohablardeNetscapeydeInternetExplorer.Puesen realidadhaytantosnavegadoresquenopodrascontarlostodos,yesosdos(los msconocidos)sonprecisamentelopeorquehavistoInternet(sobretodo,IE).Te puedeinteresarmiartculosobrealternativasaInternetExplorerparaWindows [http://www.danielclemente.com/navega/popup.html].
Ningunoimplementaal100%losestndares
Cadanavegadorsecomportadeunamaneradistinta(inclusocuandousanel mismomotor),asquenoesperesconocerlostodos.Loquevasatenerquehaceres quetupginaseveabienencualquieradeellos,usandoloslenguajesestndares. Desgraciadamente,nohayningnnavegadorquesoportetodoslosestndares delW3Calavez,porquesonmuchsimosymuyextensos.Porsuerte,elHTML (versin4.01,porejemplo)squeloentiendentodos,ycasisinerrores,puesesun requisitoindispensableyademsessencillo. PoresounapginaqueusaHTMLcorrectoesaccesibledesdecualquier navegador.Losdemsestndares(CSS,SVG,JavaScript,PNG,...)sirvenpara complementarlapgina,ynosiempresevernentodoslados.Esinevitable. Lopeorvienecuandounnavegadordicesoportarlosestndares,peronolos implementabien.EsohaceelInternetExplorerconalgunascaractersticasde CSSoconlosPNGsconcanalesdetransparenciasalpha.Poresosiempresedice queInternetExplorereselpeorenestetema,yalguienquepruebepginasweb
13de49
26/01/1213:06
nodeberausarlomientraslasprograma. Comonavegadoresquesiganfielmentelosestndaressesuelenponerde ejemploelAmaya[http://www.w3.org/Amaya/](delW3C)oMozilla[http://www.mozilla.org/] (oMozillaFirefox[http://www.mozilla.org/products/firefox/]),quesoportamuchosylohace bien.HayquedestacarquetodoslosnavegadoresquenosonIEhacenbiensu trabajo:puedequehaganmuchascosasopocas,perotodoloquehacenlohacen bien.Nosuelendarquebraderosdecabeza:unacosa,ofuncionabienono funciona.
Nuncahagasunapginaespecficaparaunnavegador
Esmuyfcilhacerunapginaqueseveabienentodoslosnavegadores,asque notemetaseneltemadehacerdiferentesversionesdelamismapgina,una paracadanavegador"soportado".Nuncapodrs"soportarlos"todos,yllevamucho trabajo(intil). EsabsurdovermensajesquediganPginaoptimizadapara...yahun navegadororesolucindepantalla(vasatenerquecambiarlaresolucinoel navegadorsloparaverunapgina?).TuswebstienenqueserOptimizadaspara verseconcualquiernavegador.
Msfalacias(mentirasquelagentesecree)
Encontrarsmuchasms,desmentidas,enelpopupquemuestroalosusuarios deInternetExplorer[http://www.danielclemente.com/navega/popup.html],queescribhace unosmeses. NohayningunapginaquenopuedaverbienconIE InternetExplorermuestramalalgunaspginas;lasdestrozaasumanera.Por eso,muchasvecesnoestsviendobienlapgina.Silaquieresvertalcomoha escritoeldiseador,usaunnavegadorquesigabienlosestndares.Entonces verselaspectorealdecadaweb. LolgicoseraqueelaspectorealyloqueseveenIEcoincidieran,perono siempreesas.
14de49
26/01/1213:06
EsmejordisearunawebparaIEporqueeslomsusado No,esmejordisearunawebvisibledesdecualquiernavegador.Encimams fcilynodaproblemas. Adems,mientrashaceslaweb,noesnadarecomendableusarIEparaprobar siquedabien,porquelamodificarshastaqueseveabienenIE,yesopuede requerirsalirsedelestndar,haciendoqueseveamalenelrestodenavegadores (quenotienenlaculpa).
SobreHTML
Sieresdelosqueusanhabitualmentecosascomo<font>,<br>,<b>o<table>,lee esto,porqueteayudar.ElHTMLcorrectoesmssencilloqueelquetconoces,y permitehacermuchasmscosas.
QueselHTML?
Silaspginasfueranslolneasylneasdetexto,seranmuyaburridas.Para evitaresto,elautorpuededejarescritalaestructuradeltextoparaquelos usuariospuedan-mediantesusnavegadores-darunformatoespecialaalgunas secciones. HTMLessloparadescribirlaestructuradeunaweb.Elautorlecuentaal navegadorcmoeslaweb;yestrabajodelnavegadordecidircmovaamostrar cadaseccin(colores,tamaos,tiposdeletra,...).Sielautorquiereadems especificareldiseo,puedeusarCSS(hojasdeestilo),queexplicomsadelante. NosirveelHTML.
EsnecesariousarHTML?
No,haymsformasdeestructurarcontenido,porejemploXMLoXHTML(que esunamezcladeXMLyHTML). ConeltiempodejardeusarseHTMLenfavordeXHTML,quecumplemejor consuobjetivo.
15de49 26/01/1213:06
EsnecesariosaberHTMLparahacerunaweb?
No.Hayprogramasconlosquepuedesdarlaestructuraaltextocmodamente, ygenerancdigoHTMLcorrecto(exceptoFrontpage).YousoelMozillaComposer paraahorrartrabajo,aunqueluegolorevisoamano. Detodasformas,vamuybiensaberlo,yesunlenguajemuysimple.
EsfcilescribirHTML?
S,tantoquehaymuchoscursillosparaprincipiantesencualquieracademiade informtica.Nohayquesaberprogramar,yslohacefaltauneditordetextos. Esta"facilidad"hacequemuchagenteconsigahacerpginascasisinsaberqu esloquehaescrito,concdigodebajacalidadycomplicndosedemasiado.
EsfcilescribirHTMLcorrecto?
Paraunprincipianteyamano,cuesta,sobretodocuandonosabesques correctoyquno. Noobstante,sehacemuysencillositevitascomplicarlo.Haymuypococdigo HTMLenunapginabienhecha;mirastacomoejemplo.Esoesloqueexplicar enlaseccindeConsejos. Tambinhayunprograma,HTMLTidy[http://tidy.sourceforge.net/],quepuede buscarerroressencillosentucdigoycorregirlosunpoco.Elcdigoresultantees muycomplicadodeentender;esmuchomejorsiloescribesbiendesdeelprincipio.
CursillodeHTML
Eningls:puedesconsultarlapropiaespecificacinHTML4.01delW3C [http://www.w3.org/TR/html401/].Eslomejorquehay,porquenotienefallos.Sihicieron algnerroralescribir,yanoesunerror,ahoraesoficial!. Enespaol:lamayoradecursosenseanHTMLnocorrecto.Elnicoquepuedo
16de49
26/01/1213:06
recomendar,demomento,eseltutorialdeHTMLconclase[http://html.conclase.net /tutorial/html/],algolargoperoquenosedejanadaimportanteporexplicar(hasta habladeCSS).Otroscursos,medianamentebuenos(enmiopinin),son: SelfHTML[http://es.selfhtml.org/],eldeDanielRodrguez[http://www.publispain.com /supertutoriales/diseno/html/cursos/7/index.html],LuCAS [http://es.tldp.org/Manuales-LuCAS/doccurso-html/doc-curso-html/]. SiloqueteinteresaeselXHTML,tienesuntutorialdeXHTML [http://www.danielclemente.com/html/tuto-xhtml_a3.pdf]muybuenohechoporBelnAlbeza (BenKo)[http://cafeina.ladybenko.net/].Consultasuwebparamsinformacin.
Cmoesunadireccin(URI)
UnaURI(esoincluyealasURL)tieneelnombredelprotocolo(sueleserhttp),el ://seguidodelnombredelamquina,yluegolarutadelarchivoalqueseaccede. Porejemplo,
http://www.danielclemente.com/html/index.html http://www.danielclemente.com/html/ mailto://142857@ozu.quitando-esto.es news://netscape.public.mozilla.svg/
sonURIs.Fjateenquelaprimerahacereferenciaaunarhivodemiservidor,y lasegundaaundirectorio,poresollevalabarraalfinal.Sinopusieraslabarra, seteredirigiraaladireccincorrecta;prubalo: http://www.danielclemente.com/html[http://www.danielclemente.com/html](sinlabarra final).
Extensindelosarchivos:html ohtm ?
Porquindex.htmlynoindex.htm,sitambinfuncionayesmscorto? Bueno,megustallamaralascosasporsunombre,yestoesunapginaHTML. HTMnoquieredecirnada;ellenguajesiempresehallamadoHTML. Laculpadeestelo,es,comosiempre,deMicrosoft.DesdequecompraronQDOS
17de49
26/01/1213:06
(MS-DOS),yalimitabanlaextensindeunarchivoa3caracteres.Tardaron14 aosencopiarelmodelodeUNIXyLinux,enelqueelnombreylaextensin puedensertanlargosocortoscomosequiera. Asque:llamaalascosasporsunombre:.xhtmlparaelXHTML,.htmlpara HTML,.phpparaPHP,.xmlparaXML,etc.PorquhabramosdellamarXMal XML?
EfectosHTML
HevistoquemuchosentranenmiwebbuscandoenGoogleefectoshtml.Pues quequedeclaro: HTMLesunlenguajeparaestructurartexto. Noesparahaceranimaciones,niefectosespeciales,nijuegos.Probablementete interesaaprenderCSSparahacervirguerasinimaginablesconeldiseo;esos queesposible.
VersionesdeHTML
Estoesimportante.Muchagenteseloolvidaylesdaproblemasdetodotipo (cadanavegadorlesmuestralapginacomoquiere).
Cmo?,quehayversiones?
Claroquehayversiones.Sehizoestndaren1995,ydesdeentonceslascosas hancambiado(aunqueellenguajenosehamodificadomucho). Encadapginaquehagas,tendrsquedecirlealnavegadorquversinde HTMLestsusando(nopuededetectarlo).Esosehaceconlaprimeralnea,ladel !DOCTYPE.Luegoloexplico.
HTML
18de49
26/01/1213:06
LosestndaresHTMLsonelHTML2.0,elHTML3.2,elHTML4.0yelHTML 4.01.Laverdad,nocreoquesehaganms,porqueelHTMLyaestanticuado (comparadoconXHTML). Todossoncomprendidosporlosnavegadoresactuales,peroelquedebesusares elHTML4.01[http://www.w3.org/TR/html401/].Ansepuedeusarsinproblemasel HTML3.2,perolefaltaalgunaetiquetainteresanteyaqueenesostiemposes cuandoempezaronaintroducirlafilosofaCSS. Adems,cadaversintienevariantes.Tienesqueelegiruna.Porejemplo,el HTML4.01tienetres: HTML4.01Strict:elnormal.PuedesusarlasetiquetasdeHTML4.01yya est. HTML4.01Transitional:unamezcladetodoslosHTML,enlaquese aceptanlasetiquetasobsoletas.SellamaTransitionalporqueestpensado paralosquenoseatrevenausarelStrict,perolesgustaraenelfuturo.En miopininnovabienusarlo,esunlotenertantasformasdistintasdehacer lamismacosa(unasbuenasyotrasmalas). HTML4.01Frameset:lodelTransitional,ysoporteparaframes.Anticuado, comolosframes. YoexplicaryusarHTML4.01Strict,aunqueXHTMLmeparecemuchomejor. PerocomoesmuyfcilpasardeHTML4.01StrictaXHTML1.0(casinohay cambios),prefieroexplicarelHTML.Aparte...esquenopodraexplicarmuchas cosassobreXHTMLcorrecto,porqueesmuyfcilescribirXHTMLcorrecto(sigue leyendo).
XHTML
HTMLestanticuado.Susnormassonmuypocoestrictas,yesodamuchos problemas:muchagenteescribeelcdigo"amedias"(porejemplo,abreetiquetas ynolascierra),ydejanqueseaelnavegadorelque"arregle"lapgina.Poresoun navegadorwebesmuycomplicadoysueletenerproblemasdecompatibilidad. XHTML[http://www.w3.org/MarkUp/#recommendations]traelasventajasdelXML,que sonmuchas.Lasconocidassonquelosnombresdeetiquetasvanenminsculas, quehayquecerrartodaslasqueseabren(ysinanidarse),yquelosatributosvan entrecomillas.
19de49 26/01/1213:06
PeroyoquierodestacarotrasdosventajasmuyimportantesdelXHTML: SiunprogramaonavegadorqueestanalizandoelXHTMLencuentraXML malformado(errneo),estobligadoapararydecirqueesincorrecto.Eso simplificaenormementeelcdigodeunnavegadorweb,yhacequeenInternet slopuedaexistirelcdigoXHTMLbienescrito,compatiblecontodoslos analizadoresdeXML.(Aunqueesonoaseguraquelasetiquetasestnbien usadas). LosnavegadoresXHTMLviejosnofallarncuandoseuseunXHTMLllenode etiquetasnuevas,porqueenXMLlasetiquetasdesconocidasoquenohacen faltaseignoranjuntoconsucontenido.Nohayquehacertrucoscomolode comentarelcdigoJavaScriptparaquenosemuestreennavegadoresHTML antiguos. XHTMLtienequesustituiraHTMLenlosprximosaos,yyaloesthaciendo. Laspginastienenextensin.xhtmlyelservidorwebtienequeestarconfigurado paraservirlascomoapplication/xhtml+xml(nocomotext/html).
XSL
XSLpermitequeelnavegador(oelservidor)transformelosdocumentosXMLy hagacosascomoordenarunatabla,ohacerbsquedas,obucles,cosasqueno puedenhacerseconHTMLniXHTML.Lomaloesquenecesitaqueelnavegadorlo soporte,peromuchosnavegadoresyalohacen. XSL[http://www.w3.org/TR/xsl/]constadelosestndaresXSLT,XPathyXSL-FO.
Culelijo,ycmo?
SiyasabasHTMLperonuncahashechotodoesodesepararcontenidoy diseo,otodosestosestndarestesuenanachino,usaelHTMLnormal,en concretolaversin4.01,queeslaltima.EligelaramaStrictdirectamentesite gustaeltema,oel4.01Transitionalsitecuestaentenderlo. ElXHTMLesparalosqueentiendenqueslodelXML,tienenotrosprogramas quetrabajancondatosdelaweb,osimplementelesgustanmucholosestndares. Paradecirqulenguajeseutiliza,hayqueponerunalneaalprincipiodela
20de49 26/01/1213:06
pgina.Noesunaetiqueta,portantoesalgoraraynohayquecerrarlaniponerla enminsculas.Esos,hayqueponerla. ParaHTML4.01Strict(recomendado):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
ParaHTML4.01Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ParaXHTML:tieneslasdeclaracionesnecesariasenlaespecificacinXHTML delW3C[http://www.w3.org/TR/html/#strict].
CSS
Eselrequisitodecualquierdiseadordewebs(aunquenosepaHTML).
Paraqusirve
HastaahoraheexplicadoqueelHTMLsirveparaestructurareltexto:ya tenemoslapginadivididaensecciones:prrafos,enlaces,cabeceras,citas, imgenes,etc. Quedaaplicarlesunestilo.Esoconsisteendecir,porejemplo,quelas cabecerasvanenrojoysubrayadas,lasimgenestienen2cm.demargenyun bordede1pxel,laprimeralneadecadaprrafoestindentada,elinterlineado esde1'5,ylaprimerafiladecadatablatieneelfondoazul.Todoesosepuede hacerconCSSsinnecesidaddetocarelHTML. Engeneral,elCSSsirveparaaplicarunestiloatodosloselementosdelmismo
21de49
26/01/1213:06
tipoalavez.Bueno,permitehacermuchasmscosas,perolomejorpara descubrirloesverloenaccin.
CmopuedecombinarseconelHTML
LomsnormalesescribirtodoelcdigoCSSenunficheroexterno,deextensin css,yluegoincluirenel<head>decadapginaelcdigo:
<link rel="stylesheet" href="archivo.css" type="text/css">
EstopermiteusarelmismoestiloparavariaspginasHTMLdistintas.Noslo eso:haciendoestotellevasporcompletoeldiseoaotroarchivo,deformalos navegadoressencillos,quenosoportanhojasdeestilo,notendrnquecargar cdigoinnecesario(poresovantanrpido). SiprefieresdejarelcdigoCSSenlamismapgina(sinusararchivos externos),sehacedesdedentrodel<head>conlaetiqueta<style>:
<style type="text/css"> /* Aqu va el cdigo CSS */ /* Recuerda que esto va dentro del <head> */ </style>
Tambinsepuededefinirunestiloparaunsoloelemento,escribiendoelcdigo dentrodesuatributostyle,aunquenolorecomiendoporquecomplicaelcdigo.Ah, ytambinsepuedenincluirarchivosCSSexternosconlaorden@importdeCSS, peroesoyaesmscomplicado. Sidefinierasunestilousandotodaslasformasalavez,laprioridadquese seguiraes: Atributostyledelelemento(estiloespecficoparaunsoloelemento) Estilodefinidoenlacabeceraconlaetiqueta<style> Estilodefinidoenunarchivoexterno,yasociadoalapginacon<link>
22de49
26/01/1213:06
Formato
UnejemplodecdigoCSSes:
h1 { color: red; text-decoration: underline; } p { text-indent: 20px; border: 1px dotted gray; line-height: 200%; }
Estodefineestilosparaloquevaentreetiquetas<h1> </h1>(quesoncabeceras), yloquevaentreetiquetas<p> </p>(quesonprrafos).Hacequelascabeceras salganenrojoysubrayadas,ylosprrafosconinterlineadodoble,conlaprimera lneaunpoquitomsparaladerecha,yconunbordegrisyapuntitosalrededorde cadaprrafo. Elformatogenerales:
etiqueta {propiedad1:valor; propiedad2:valor; propiedadn:valor;}
yasparacadaetiquetaalaquequierasdarestilo.
DndeaprenderCSS
HaymuchostutorialesdeCSSentodoslosidiomas,peroenmiopinin,las mejoresformasdeaprenderson: Mirandoelcdigodewebmastersquesepanmsquet.Cadavezqueveas algounpocobonito,miraelcdigoparavercmoesthecho.Noimportasila pginaesteninglsoentailands;elCSSeselmismoentodoslados. ConsultandolaespecificacinCSSdelW3C[http://www.w3.org/Style/CSS/#specs] cadavezquehayacosasquenoentiendas.Asaprendersaentendery perfeccionarloqueyasabas. SitiosdondepuedesverlapotenciadeCSSyaprendercosasnuevas:Zen Garden[http://www.csszengarden.com/],seamusnsquirrel[http://www.moronicbajebus.com /playground/cssplay/],Positioniseverything[http://www.positioniseverything.net/],ymuchos blogscomoeldeminid[http://www.minid.net/archivos/categorias/css/index.php]oToad
23de49
26/01/1213:06
[http://toad.bitacoras.com/index.php?c=XHTML+y+CSS](queescribiuntutorialdeCSS [http://toad.bitacoras.com/html/tutorial-css/]muybueno).Recuerdaquenecesitarsun
navegadormodernoparaverlaspginastalcomohaqueridoelautor(novale InternetExplorer[http://www.danielclemente.com/navega/popup.html]). Tambinpuedesempezarmirandoelcdigodeestapgina,quenoesmuy complicado.
Variosejemplos
UnamuestramuyvariadadecosasquesepuedenhacerconCSS:
/* Las cabeceras h1, en un color azulado y en maysculas */ h1 {color: #0077ff; text-transform: uppercase;} /* El p que est metido dentro de un div, con imagen de fondo */ div p {background: url(fondo.png);} /* El li que es hijo directo del ol, con borde azul */ ol > li {border: 1px solid blue;} /* Los enlaces, un poco ms grandes al pasar el ratn */ a:hover {font-size: 120%;} /* Prrafos y listas, con indentacin */ p, li {text-indent: 15px;} /* Justo despus de una imagen, no indentar */ img + p {text-indent: 0;} /* Las imgenes con class="separa", con un poco de margen */ img.separa {margin: 20px;} /* El bloque div con id="tabla" tiene el fondo rojo, la letra blanca, ocupa el 75% de la pantalla (centrado), y tiene un margen interno */ div#tabla {background: red; color: white; width: 75%; margin: 0 auto; padding: 20px;}
24de49
26/01/1213:06
Cambiarelcolordelasbarrasdedesplazamiento
Muchagenteentraamiwebbuscandocmocambiarelcolordelasbarrasde desplazamientoconHTMLoCSS.Puesnosepuede,almenosconlasversiones deCSSquehayalescribiresto(2004). Comominavegadorsoportatemasypersonalizacin,lasbarrasdescrolllas modificoyoamigusto,nolaspginas.Unapginacontrolaeltrozodeventanaen elquesemuestra,nolosiconitos,ladisposicindelosbotones,olosmens.Todos estoselementosdenavegacinhandeserreconociblesporelusuario. Hacetiempoescribelcmonodebehacerse,enestedocumento:cambiarel colordelasbarrasdedesplazamientosinCSS [http://www.danielclemente.com /html/barras.htm].QuequedeclaroquenoesCSS,sinoalgoquehainventado nicamenteMicrosoftsinpedirconsejoanadie,ylehallamadoconelmismo nombre.
ConsejosHTML
Ahorallegalointeresante.Pongoerrorestpicosdewebs,queveomuyamenudo (tambinenpginasquehiceyohacetiempo),ycmocorregirlasmalas costumbresparaalfinalconseguirhacerunawebaccesibleporcualquier navegador,condiseoycontenidoporseparado,yqueseafcildemantener. Sontrucossueltosydesordenados,yseguroquevoyaadiendomsconel tiempo.
LaprimeralneadebeserelDOCTYPE
Esobligatorioponerla,ymuyimportante.Esparadecirlealnavegadorqu versindeHTMLeslaqueusasenlapgina.Sinosepone,elnavegadornotiene formadedetectarlo,asqueentraenmodoQuirks(modochapuzas)eintentar arreglarasumaneralascosasquenoentienda,imginandoseququieredecir cadaetiqueta,yrepresentndolastantosisonvlidascomosino. SiseusaunaversindeHTMLqueseaStrict,entonceselnavegadorusael modoStandardscompliance(cumplimientodelosestndares),ycadaetiqueta
25de49 26/01/1213:06
tendrelsignificadonormal. Porejemplo,enestaweblaprimeralneaes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
Recuerdaquenoesunaetiqueta,yporesoestanrara,vaenmaysculas,yno secierra.
Estructurabsicadeunaweb
Unejemplodelomnimoquetienequetener:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> <html> <head> <title>Mi web. Qu bonita que es mi web.</title> </head> <body> Aqu va el contenido. </body> </html>
Elttulo,lomsimportante
Dicenqueel<title>es,conmuchadiferencia,lomsimportantedeunaweb. Laverdadesquesqueesimportante:lousanlosbuscadoresparaindexarla pgina,pero(anmsimportante)lousamoslaspersonasparasaberenquweb entrarcuandounbuscadormuestracientosdeellas.Asqueeligeunbuenttulo,y niseteocurradejarloenblanco.
26de49
26/01/1213:06
Escribetodaslasetiquetasenminsculas
Seaceptantantomaysculascomominsculas,peroesmejorqueelijasun estilofijoynolovayascambiando.Yohedecididolasminsculaspormuchas cosas: esmsfcildeleer. esmsfcildeescribir. enXML(yXHTML)sloseaceptanminsculas,asqueelcambioaXHTML sermuyfcil. CSSsesuelehacerenminsculastambin. unapginasecomprimemejorcuandoseusanetiquetasenminsculas. Bueno,vale,estoesunaraznalgoextraa...peroesquealgunosservidores weblastransfierencomprimidas.
Cierratodoloqueabras(conexcepciones),yenorden
Noestpermitidohacercosascomo<td><a>enlace</td>,ni <ul><li>uno<li>dos<li>tres</ul>,ni<strong>cdigo <em>incorrecto</strong></em>.Esocausa desastresenmuchosnavegadores:imaginaqueempiezasunenlacealprincipiode lapgina,ynolocierrasnunca.Entoncestodalapginaformapartedelenlace!y puedesalirtodasubrayada(esmuyasqueroso). Hayalgunasetiquetasquenosecierranporquenotienencontenidopordentro, como<img>o<br>.EnXHTMLesobligatoriocerrarlas,yparanotenerqueescribir <br></br>,sepermite<br />.PeroesoesXHTML...demomentoenelHTMLno cierres<br>yyaest.
Losatributos,siempreentrecomillados
Enrealidadsloesobligatorioponerentrecomillaslosatributosquetienen caracteresnoalfanumricos,porejemploen<body bgcolor="#E099F5">(porel#). Peroesmuchomejorquelaspongassiempre,porqueasnohayquepensar cundosycundono,yademsescomohayquehacerloenXMLyXHTML.De todasformas,nohacefaltaponercasiatributosenelHTMLcorrecto.
27de49
26/01/1213:06
Puedesusarvariostiposdecomillas,perolomsnormaleslacomilladoble,".
Especificaeljuegodecaracteres(charset)
TuservidoryatienequeestarpreparadoparamandareltipoMIMEdel documento(quedebesertext/html)ylacodificacin(queesISO-8859-1parael espaoloISO-8859-15siusaselsmbolodeleuro,).Pero,porsiacasoal navegadornolellegaestainformacin,puedesdecrselaconestaetiquetadentro del<head>:
<meta content="text/html; charset=utf-8" http-equiv="content-type">
Astambinselediceeljuegodecaracteresausar,yteasegurasdequelos acentossevernbien.OtrocharacterencodingesUTF-8(Unicode),quepermite representarcasicualquierletra(japonesas,tibetanas,consonantesacentuadas, ...).Lomaloesqueanhaynavegadoresqueseconfunden(yaquealgunos caracteresocupanmsdeunbyte),peroeselformatonicoalquehabrque migrarparaevitarproblemasconlascodificaciones.
Nouses<font>
...paranada.Noesnecesariaenabsoluto.ConCSSsepuedehacermuchomejor, eligiendoloscolores/fuente/tamaounasolavez,yaplicndolosatodoslos elementosalavez. Siquieresdarunestiloespecialsloaunasletrasopalabras,miraelsiguiente consejo:
Darformatoauntrozodetextoountrozodepgina:<span> y
<div>
Estasetiquetaslasvasausarmucho.Porssolasnohacennada;tienesque darlesestilo. Primero,unaexplicacinimportantesobreelcmofuncionaelHTML:
28de49
26/01/1213:06
CadaelementoHTMLes(bsicamente)detipoinlineoblock.Loselementosde tipoinlinesiguenelflujodeltexto,ysepuedenmetercomosifueranunapalabra ms.Porejemplo,lasimgenesylosenlacessecomportanas,porquepuedo ponerunenlace[http://www.danielclemente.com/] comosifueranpalabrasnormales(le hepuestounbordeparaqueveasenquconsisteelelemento). Encambio,unelementodetipoblockrompeelflujodetexto:hacequesele dediqueunalneanuevaytodalaanchuradelapgina.Unejemplodeestoson lascabeceras(<h1>,etc):nopuedencompartirespacioconotroelemento.Los prrafostambinsonas:fjatequpasasipongo unprrafo enmediodeunalnea. Bueno,puesel<span>esinlineyel<div>esblock.Cuandoquierasdarformatoa unascuantaspalabras,sinromperelflujodeltexto,meteesaspalabrasdentro del<span>,ycuandoquierasformatearunmontndeelementosjuntos(untrozode pgina,deunalneaovarias),mtelotododentrodeun<div>. Unejemplo(yelcmoqueda):
<p>Puedes aplicar <span style="font-size: 120%; text-transform: uppercase; color: blue; cursor:pointer;">muchos efectos</span> a un trozo de texto sin necesidad de usar la etiqueta font.</p> <div style="text-align: center; border: 3px dashed orange; background: yellow; font-style:italic;"> <p>Y puedes formatear todo un trozo de pgina a la vez...</p> <p>si lo metes dentro de un div.</p> </div>
PuedesaplicarMUCHOSEFECTOSauntrozodetextosinnecesidadde usarlaetiquetafont.
Ypuedesformateartodountrozodepginaalavez...
29de49
26/01/1213:06
silometesdentrodeundiv.
Recuerdaquenoescmodousarelatributostyle.Esmejordefinirclases (atributoclass)yluegodarlesestiloatodoslosdelamismaclasealavez.Lo explicoenotraseccin.
Evitael<br> ,usaprrafos:<p>
Elcontenidodecasicualquierwebseorganizaporprrafos(mirasta,por ejemplo).Losprrafosnohayquesepararlosporsaltosdelnea(<br>),sinoque sloconponer<p>alprincipioy</p>alfinalyaquedanbienordenadosyconla separacinadecuada. Muypocasveceshayqueescribirunsaltodelneadeverdad...slosemeocurre elcasodequequierasponerunlistadodelcdigofuentedeunprograma:consiste envariaslneas(inclusoalgunasenblanco),unadebajodeotra.Cadalneanoes unprrafoporssola,asqueseramsinteligentebajaralasiguienteconun <br>.Peroengeneralnohacefalta;esmuchomscmodousarprrafos.
Nohacefaltausar parahacermrgenes
Parahacerquelaprimeralneadecadaprrafoquedeunpoquitomsala derecha,muchosponentresespacios: .Esoesunachapuza;es mejorusarprrafosyaplicarleslasiguientehojadeestilos:
p {text-indent: 20px}
Conesto,todoslosprrafostendrnlaprimeralnea20pxelsaladerechadel margen.Eligebienlasunidades;ponlasencm.omm.siteaclarasms,aunque quizsiramejornousarunidadesabsolutassinoenrelacinaltipodeletra actual. Entonces,cundohayqueusar ?Puesslocuandoquierasdibujarun espacioenblanco.Cuandohacesundiseo,nocreoquepiensesaqumeirabien ponercincoespacios...,sinoestoloquierounpocomsaladerecha,yparaeso

30de49 26/01/1213:06
seusaelCSS.Sialgunavezrealmentenecesitasponerloscincoespacios(ni4ni 6),pon cincoveces.
<center> noexiste
Laetiqueta<center>yelatributoalign(comoen<table align="center">)nodejan muyclarosufuncionamiento(debenalinearseellosdentrodelapgina,ocentrar eltextoquevieneacontinuacin?).ConCSSsepuedeespecificarmejorlostemas decentrado,perohayqueentenderunpocoquesloquequeremoscentrar,y recordarlodeltipodeloselementos(blockoinline). Paracentrarelcontenidoquehaydentrodeunelemento(porejemplo,todoel textodedentrodeun<div>),bastaconelestilotext-align:center;.Porejemplo:
<div style="border:1px solid green; background:rgb(50,240,60); width:60%; text-align:center;"> Este texto est centrado. </div>
Yqueda: Estetextoestcentrado. Encambio,siloquequierescentrareselpropio<div>(uotroelementotipo block),ynosucontenido,tienesquedarleunaanchura(conwidth:75%;),ydecirque elnavegadorseocupeautomticamentedelosmrgenesizquierdoyderecho.Se haceconmargin-left:auto; margin-right:auto;,o,abreviado:margin: 0 auto;.Lasdos formashacenlomismo,perositeinteresaentenderporqulacortafunciona, buscainformacinsobreCSSshorthand. Ejemploparaalinearunbloque:
<div style="border:1px solid green; background:rgb(50,240,60); width:60%; margin: 0 auto;"> Ahora es el div el que est centrado, y no su contenido. </div>
31de49
26/01/1213:06
Yqueda: Ahoraeseldivelqueestcentrado,ynosu contenido. Asyasabescentrartantoelcontenidodeunelemento,comocualquier elementodetipoblock.Cmosecentraraunelementoinline,comounaimageno un<span>?Puespodrasmeterladentrodeun<div>yusartext-align:center; margin: 0 auto;combinandolosdosmtodosanteriores,peroesmsfcilpedirlequese comportecomounbloque,condisplay:block; margin: 0 auto;(asteahorrasel<div>).
Elatributoalign noexiste
Leeelconsejoanteriorparavercmocentrarcosas. Hevistoquemuchagenteusabaelalign="center"enlos<td>,paracentrarel contenidodelasceldas.EsmuchomsfcilconCSS:
td {text-align:center;}
Yyaestntodaslasceldasdetodaslastablascentradas!Siteinteresa escogersloalgunasceldas,estudialodedarlesnombreyclase(atributosido class,queexplicomsadelante).

<nobr> noesnecesario
Algunosnavegadoreshacenqueeltextoentreun<nobr>y</nobr>nosesepareen variaslneassilaventanaenlaquesemuestraespequea. Enrealidad,cuandousasestaetiquetaesporquequieresdibujarunespacioen blanco(quieresqueseacomounaletramsdeunapalabra,yasegurartedeque sedibujaenpantallacomolasdems),ylocorrectoserausarel yolvidarse del<nobr>. LobuenoesquesepuedehacermsfcilporCSS:
32de49
26/01/1213:06
table tbody tr th {white-space:nowrap;}
As,todaslascabecerasdelastablasocuparnsiempreunasolalnea.
Nouses<i> ,<b> ,<u> ,sino<em> ,<strong> yCSS.

Cuandoestsescribiendoalgoyllegasaunapalabraespecial,supongoqueno pensarsay,estotienequeircursivasinoenquieroresaltaresto.Lode ponerloennegrita,cursivaosubrayadoformapartedeldiseo,yyahemos quedadoenqueeldiseoseharalfinal,cuandoesttodoescrito. Demomento,loquetienesquehaceresmarcarlaspalabrasalasquequieres darnfasisconlaetiqueta<em>,ysiquieresdarunnfasisanmayor,<strong>.Lo normalesquelosnavegadoresrepresentenelnfasisencursivayelnfasis mayorennegrita,perolobuenoesquepuedescambiarlomedianteelCSS (inclusopodrasdesactivarlo). Cuandorealmentequierasespecificarunestiloconcreto,puedesusar font-weight:boldparanegrita,font-style:italicparacursiva,text-decoration:underline parasubrayado,ymuchasmscosas,comotext-decoration:overlineparaunalnea porencima,otext-decoration:line-throughparatachado.
Cuidadoconlos&enlasdirecciones(URI)
Paraponercaracteresespeciales(comoacentos)hayqueescribircosascomo á(sellamanentidades).Empiezanpor&(eningls,ampersand;yoet enespaol)yacabanpor;.Poreso,cadavezqueelnavegadorencuentraun&,se creequevasaescribirunaentidad,ysaeslaraznporlaquehayqueponer& paradibujarunampersanddeverdadenlapgina. PueslasURIs(yURLs)nosonunaexcepcin:siunadireccincualquiera(de unaimagen,enlace,oloquesea)tieneampersandsensuinterior,losdebes escribircomo&.Porejemplo,siquieresponeresteenlaceentuweb: http://www.google.es/search?hl=es&q=142857,tienesquehaceresto:
<a href = "http://www.google.es/search?hl=es&q=142857">
33de49
26/01/1213:06
Información sobre el 142857</a>
Tranquilo,quenisiquieralosnavegadoresviejososimplessevanaconfundir. Precisamenteestolesayudaanoliarseconlasentities.
Aprovechalaslistas
Laslistas(sobretodo<ul>y<ol>)sonloselementosconlosmssepuedejugaral aprenderCSS.SloconHTMLsonmuyaburridas,peroaadiendopocosestilosse puedenhacermaravillascomomensdenavegacin,botones,pestaas,tablas,y muchasmscosas. Enlaspginaswebabundanmuchaslistas,aunquenotehayasdadocuenta. Sonunaformamuybuenadeestructurarlainformacin,apartedesersencillasy deversebienentodoslosnavegadores. PuedesmirarpginascomoListamatic[http://css.maxdesign.com.au/listamatic/]para probarlasposibilidadesdelaslistas.
Identificarelementos:class eid
Muchasvecesquerrsaplicarunestiloavarioselementos,peronoatodosala vez;porejemplo,sientupginatuvierasmuchos<div>conayudaparalos visitantes,yquieresquesalgantodosigual,conelmismoestilo,noteirabien unahojadeestiloscomo:
div {border:2px solid black; background:yellow;}
yaquecambiaraeldiseodetodoslos<div>delapgina(aunquenoseanlosde ayuda).Hacefaltaalgoparaelegirunospocoselementosconcretos,yaplicarel estilosloaesos. Comosiempre,hayunasolucineleganteysencillaquenorequierecopiary pegarestilos.Lasolucinesdistintadependiendodesihayvarioselementosalos queaplicarelestilo,oslouno.
34de49
26/01/1213:06
Cuandotenemosvarioselementosparecidosquequeremosagrupar,loquehay quehaceresinventarseunnombre(nombredeclase)paraasignrseloatodos ellos(porquepertenecernalamismaclase).Esosehaceconelatributoclass.Por ejemplo,entodoslos<div>deayudatendremosqueponer<div class="ayuda">(enlos quenosondeayuda,<div>slo). Entonceslespodemoscambiarelestiloatodoslosdelaclasealavez,conel CSS.Sehaceas:
div.ayuda {border:2px solid black; background:yellow;}
Esoquieredecir:todoslos<div>quepertenecenalaclaseayuda.Tambinpodras poner.ayudaparareferirteacualquierelementoquepertenezcaalaclaseayuda(sea <div>ono),perolaprimeraformaesmsclara. Encambio,habrvecesenlasqueelelementoalquequieresdarestiloesnico, osea,slosaleunavezenlapgina.Lopuedeshacerconclassigualqueantes, claro,perosiprefieresdejarconstanciadequeelelementoesnico,daleun identificadorconelatributoid;porejemplo<div id="titulo">.Nopuedehaberids repetidosyaquesonnicos. Luego,enlahojadeestilos,sepone:
div#titulo {border:12px solid blue; background:gray; color:black;}
conun#(sostenido,almohadilla,ocomoquierasllamarle).Datecuentade queelestiloserefiereaunsloelementodelapgina,noavarios.Tambin podrasponer#tituloyseaplicaraalelementoquetengaid="titulo",seacualsea (enestecasoesun<div>). Otraformade"seleccionar"elementosesintentarsermsespecfico.Por ejemplo,sitodoslosprrafosquehaydentrodeun<div>sonespeciales,envez escribir<p class="especial">paracadaprrafo,definelareglaCSScomodiv p { ........... },quequieredecirlomismo(todoslos<p>queestndentrodeun <div>),yponslo<p>encadaprrafo.
35de49
26/01/1213:06
Porcierto,yahasvistoquhaceclasseid.Anhayotroatributo,name,quenohay queusarporqueeslomismoqueid.
<script> y<style> requierentype ,nolanguage
Hayqueponer<script type="text/javascript">.Elatributolanguagenoseusa(de todasformascadaunoloescribacomoquera,onoloponaporqueibaigual).Lo mismoconel<style>:siesCSS,pon<style type="text/css">. Estainformacinsqueestil,porquesontiposMIMEestandarizados,no palabritascualquiera.
Lascabeceras<h1> ,<h2> ,<h3> ,...sonparacabeceras

Nousesetiquetasdecabecerasloporqueeltextosalemsgrande.Sirvenpara definirlaestructuradeltexto,ypoderponerttulosdeseccin,subsecciones,etc. Losbuscadoreslasusanparasaberdequsehablaenunapgina,asquees importanteusarlassloparaloquesehandiseado. Cuandoquierascambiareltamaodeltexto,usaelCSS(propiedadfont-size).
<body> nonecesitaatributos
Losatributoscomotopmargin,leftmargin,marginheight,marginwidth,background,bgcolor, bgproperties,text,link,vlink,alinksonunejemplodelomalqueestabaInternet antesdeCSS.Todosellosseaplicabanal<body>,aunquealgunosatributosfueron inventadosporciertaempresaynofuncionabanigualentodoslados. Elcasoesquetodosellosformanpartedeldiseodelapgina(mrgenes, fondos,colores,...),ylomejoreshacerloconhojasdeestilo.El<body>hayque acabarescribindolocomo<body>,sinatributos(comolamayoradeetiquetasen HTML).
ConocelasetiquetasHTML
Haymuchasetiquetasparalascosasquesalennormalmenteenpginasweb:
36de49
26/01/1213:06
direcciones,citas,cdigo,referencias,variables,...Conocas<abbr>,<acronym>, <address>,<bdo>,<cite>,<code>,<del>,<dfn>,<ins>,<kbd>,<q>,<samp>o<var>? Bastantessecomportandelamismaforma,peroalqueleeelcdigolesirven paraentendermejorlaestructuradeldocumento.Tambinlevanmuybienal diseador,quepodraplicarestilosdiferentesacadatipodeelementosintener queirdefiniendoclases. PuedesmirarlasetiquetasaceptadasenlaespecificacindeHTML4.01 [http://www.w3.org/TR/html401/index/elements.html].
Nouses<marquee> ni<blink>
Sonetiquetaspropietarias(inventadasporempresasmalas)ysirvenpara molestar.Unalohacecontextoquesemueve,ylaotrahacequeparpadee. Porsuerte,novanenmuchosnavegadores.Siquieresirritaratusvisitantesde unaformamsefectiva,puedesusarimgenes(unGIFanimado,porejemplo), queesosquelopodrnver...amenosquetenganunnavegadorquepermita bloquearlosbannerscondosclics,comoelmo.
Colores
Muyimportantehacerlobien.Elnavegadorcasinolospone,asquetienesque sertquienlohaga.
Siponesuno,ponlostodos
staeslaregladeoroquehayqueseguirconloscolores.Piensaenquenotodos usanlamismaconfiguracindecoloresquet.Porejemplo,amelnegrosobre blancomegustasobrepapel,peroenlapantalladelordenadorprefieroelblanco sobrenegro,yesascomotengoconfiguradominavegador. Qupasaentoncessitponesuntextodecolormarrn?Quetloverasas, peroyoloveraas,quecuestadeleer.Lasolucinessencilla:sivasacambiarel colordeltextoenprimerplano,cambiatambinelcolordelfondo.Asteaseguras
37de49
26/01/1213:06
dequequienpuedaverloscolores,losveatodosbiencombinados.Enestecaso, deberasasegurartedeque,dondesaleeltextomarrn,elfondoseablanco.
TodosenelCSS
Todosloscoloresformanpartedeldiseo.NopongasalgunosmedianteHTMLy otrosmedianteCSS,otepasarelproblemaanterior.
Formatosparaespecificarcolores
Hayvarios.Porejemplo,todasestasreglassonequivalentes(definenelmismo color):
em {color:red;} em {color:#f00;} em {color:#ff0000;} em {color:rgb(255,0,0);} em {color:rgb(100%,0%,0%);}
Laprimeraesconelnombreyseentiendebien,aunquetienesquesaberqu nombressonlosaceptados.LasegundaestenformatoRGBenhexadecimal,con unvalorde0afparacadacolor.Latercerapermiteafinarmsyponercadacolor node0afsinode00aff(256envezde16).Lacuartahacelomismoendecimal,y laquintaconporcentajes. TodoestoloexplicaelapartadodecoloresdelaespecificacinCSS [http://www.w3.org/TR/CSS21/syndata.html#color-units].
Enhexadecimalllevanel#
Noesopcional.Hayqueponercolor:
#0077ff;ynocolor: 0077ff;.
Imgenes
38de49 26/01/1213:06
Notodoslosnavegadoreslassoportan,peroparalosques,hazquelasvean bonitas.
Cundousarlas
Yodividolasimgenesendostipos: Decorativas:complementanaltextoylohacenmsbonito. Necesarias:hacenfaltaparaentendereltexto.Porejemplo,sicontienenun mapa,unafrmulamatemtica,oalgoquenopuedeexplicarseconpalabras. Todoloquedigoaquseaplicaacualquierimagen,peroenespecialalasque sonnecesariasenunapgina.stashayquetratarlasespecialmentebien,porque sonimportantesyhayquedaralternativasalosquenopuedanverlas. Nuncausesimgenesparaespaciarelcontenido.ConCSSlosmrgenesse ponenenunmomentoysincomplicarselavida.
Formatosgrficos
Haypocasalternativas,ycasitodastienenalgomalo.Loqueyosiempre recomiendoes: Parafotosoimgenesborrosasenlasquesalentrozosdifuminadosonote importaperdercalidad,usaelJPG.Ocuparpoco,perolosdetallesque pierdasenlaconversinnolospodrsrecuperar. Paraimgenesenlasquehayzonasgrandesdelmismocolor,sintrozosmuy borrosos,comouncmicounacapturadepantalla,usaPNG.Nosepierde calidad,yocupamuypoco. Silaimagentienetrozostransparentesosemi-transparentes,usaPNG. Soportanivelesdeopacidad,quequedanmuybonitos. Silaimagenesanimada:nohaymuchasopcionesbuenas.Confoenque APNG[http://www.vlad1.com/%7Evladimir/projects/apng/]serunbuenformatocuando estacabado,perodemomentohabraqueusarGIFanimado.MNG [http://www.libpng.org/pub/mng/]esunbuenformatoparausarenIntranetsysitios dondepodamosasegurarnosdequetodoslosnavegadorestenganelsoporte MNGactivado.
39de49
26/01/1213:06
Losdemsformatos(PCX,GIF,BMP,PNM,TIFF,TGA,...)sonmuyanticuados ypocotiles,ademsdeocupardemasiadoparausarseenunapginaweb.
Ponsiempreelatributoalt
Todaslasimgenestienenqueteneruntextoalternativo,quesemostrarsiel usuariotienedesactivadaslasimgenesensunavegador(noquiereverlas)osi poralgunaraznnopuede(porejemplo,sihahabidounerrorenlaconexinola imagennoexiste,otambinsielusuarioesciego).Adems,mientrasnohay ningunaimagenpormostrarporqueseestcargando,elnavegadorponeeste texto. Eltextoalternativohayqueponerloconelatributoalt,porejemplo<img src="imagen3.jpg" alt="Foto de mi ordenador grande">.Debeserunadescripcindela imagen(queslaimagen),ynocomentariosextra,yaquesisemuestraeltextoes porquelaimagennosepuedever. Todaslasimgenesimportantesdelapginadebenllevarunbuenatributoalt. Lasimgenesdecorativasoquenovalelapenaexplicarlasconpalabraspueden llevaralt=""(vaco),peroelcasoesquesiemprehayqueponerelalt.
Esetextoquesalealpasarelratnsehacecontitle
Siquieresquealpasarelratnporencimadeunaimagensalgauncuadritocon untexto,tienesqueponerelatributetitle(ttulodelaimagen).Nosehaceconel atributoalt(verapartadoanterior)yaquesesirvecomosustitutodelaimagen, paracuandonosepuedemostrar.Eltitleesparaaadirinformacinsobrela imagenocomentarla.Naturalmente,puedesponerlosdos. Porejemplo,<img
src="imagen3.jpg" alt="Foto de mi ordenador grande" title="Todos esos
cables molestan mucho y cuestan de limpiar">.
UsaelCSSparalaaltura,anchurayborde
Envezdeusarlosatributosheight,widthyborder,hazalgocomo<img src="imagen3.jpg"alt=""style="height:280px; width:210px; border: 1px solid black;">, porquesoncosasrelacionadasconeldiseo(yelCSSalomejortepermiteusar
40de49
26/01/1213:06
clasesparaevitarrepetirinformacin). Vabienqueelnavegadorconozcalaalturayanchuraantesdecargarlaimagen, porqueaspuededibujaruncuadritodeltamaoexacto,endondesecolocar cuandoestcargada.Sinoloponesylaimagenesmuchomsgrandedeloqueel navegadorsehabaimaginado,todosloselementosdelapginasereajustanpara quequepa,yesoquedamuyfeoymolesta.
Enlaces
SupongoqueeslomsimportanteenInternet.Sinofueraporellos,no conoceramostantaspginasweb.
Losbuscadoreslosvisitan(tenloencuenta)
Googleyotrossepaseanporlaspginaswebbuscandoenlaces,ycuando encuentranuno,aadenladireccinjuntoconlaspalabrasconlasquesehahecho referenciaalapgina.T(elwebmaster)puedescontrolarquinformacinse meteenGoogle,yhacerquepasencosascomosta:laSGAEsaleenprimer puestoalbuscarladrones[http://www.google.es/search?q=ladrones].Ytodoporcrear enlacescomoste:ladrones [http://www.sgae.es/].
Usauntextodescriptivo
Porlaraznanterior,vigilaeltextodetusenlaces.Nohagascosascomo: Aqu[http://www.danielclemente.com/logica/dn.html]puedesvermiartculosobre deduccinnatural. sino: Puedesvermiartculosobrededuccinnatural[http://www.danielclemente.com/logica /dn.html]. porquenotieneningnsentidoquererquesalgalawebcuandoalguienbusca
41de49
26/01/1213:06
aquenGoogle,sinoqueinteresaquesalgacuandobusquededuccinnatural.
Noespecifiquesdestinodelenlace(target )
Notienesquedecircmotienequeabrrselealusuariocadaenlace;lsabe mejorquetcmolegustanencadamomento(enpestaas,enventananueva,en popup,enlamismapgina,...),ysabradministrrselos.Sielvisitanteestan novatoquenosabehacereso,lomejorquelepuedepasaresquecadaenlacesele abraenelmismositio(todolodemsesmuylioso),asquetponelenlace normalyyaest.
Los"enlaces"conJavaScriptnosonenlacesnormales
HaypginasenlasquelosenlacesnollevanaunadireccinURI,sinoque intentanejecutaruncdigoJavaScript.Esohacequemuchagentenopuedaentrar (comoelrobotdeGoogle),yhacemuyincmodalanavegacinparalosvisitantes quesquepuedenverlos,puesimpideesodeAbrirenlaceennueva...pestaao ventana. Nocuestanadaponerunenlacenormal,consuhref.Hazloas.
Tablas
Nosonnecesarias,perolosquenoconocenCSSlasusanparacualquiercosa.
Casinohacenfalta
Lastablas(<table>)pocasvecessonnecesariasenInternet.Debesusarlas cuandotienesquemostrarunosdatosenestructuratabular,osea,organizadosen filasycolumnas.Porejemplo...pueslafamosatablaperidica,ounatablacon correspondenciasentreeurosypesetas.Algunavezhastenidoqueponeralgoas entupgina?Yo,nomuchas. Nuncalasusesparacentrar,aplicarbordes,osepararobjetos.Paratodoeso estelCSS,queesmuchomscmodo,corto,ynolaalosnavegadores.
42de49
26/01/1213:06
Recuerda:nicamenteparadatosenestructuratabular.
Estructuradeunatabla
Enunatablatienesquesepararlacabeceradelasfilasnormales,paraquelos navegadoreslosepan.As,sialguienimprime(enpapel)unatablamuylargaque ocupavariaspginas,elnavegadorsabrrepetirlacabeceraalprincipiodecada pgina. Sinoconoceslasetiquetasusadasparatablas(<table>,<tbody>,<tr>,<th>,<td>,
<caption>yotras),miralaseccindetablasdelHTML[http://www.w3.org/TR/html401 /struct/tables.html],oconsultaunapginamsespecfica.Haycosasinteresantes,
comoel<caption>,quesirveparaexplicardequvalatabla(notodospueden echarunvistazoparasabereso).
Ni<table> ni<tr> ni<td> necesitanatributos

Niwidth,niheight,nibordercolor,nibackground,nibgcolor,...Todoesoformaparte deldiseoysehaceconCSS.Lastablasysusetiquetascorrespondientessirven paraestructurarlainformacin,noparaadornarla.
Frames
Estoyaestanticuado,peroqueraescribirunpoco,porqueunavezhablcon alguienqueanasegurabaqueibanbien.
Nohacenfalta
Lonormalesqueenunapginanohagafaltapartirlapantallaendos.Esoya loharelusuario,sitieneungestordeventanasquelepermitamover, redimensionaryorganizarlasventanas.Aunquelosusuariosnosuelenhacereso deirmoviendolaspginasdesitioporlapantalla...porquenohacefalta.
Inconvenientes(framesareevil)
43de49
26/01/1213:06
Muchos: Nosepuedenguardarenlosmarcadores(Favoritos)fcilmente.Nose guardalapginaqueestsviendo,sinoladel<frameset>. ElbotnAtrsdelnavegadordejadecomportarsecomodecostumbre.Lo mismoconelActualizar:siledas,tellevaraotrapginadistintadelaque estabasviendo. Esuncaosintentarimprimirunapginaconframes. Eltenervariaszonasconbarrasdescrollpuedevolverlocosamuchos usuarios.Peoransinohaybarrasdescrollyelcontenidonocabeenla pantalla. Losbuscadoresselanalvisitarpginasconframes.Sinotelocrees,hazla prueba[http://www.google.es/search?q=%22this%20page%20uses%20frames%22]:-)Porqu pasa?PorquerompesloquesiempresehaseguidoenInternet:cadapgina tieneunadireccin,ycadadireccinrepresentaunapgina. Desperdiciantrozosdepantallaquealgunosnecesitan(comolosqueusamos resolucionesbajas). Danproblemasdeseguridad:testsviendounaURIenlabarrade direcciones,perolapginaqueestsvisitandodentrodelframepuedeno tenernadaqueverconesadireccin. Haymuchaspginasqueestudiantodosestosaspectoscondetalle.Intenta entenderporcompletocadapunto,porquesonproblemasdeusabilidadgravesque debesevitarentuswebs.
"Ventajas"delosframes,desmentidas
Losnovatoscreenque: Hacenquelapginaseamsrpida,porquehayuntrozofijoquenotienen quecargarcadavez.Seolvidandetodoloqueocupaelcdigodelosframes,y delcachdelosnavegadores,quealmacenalasltimasimgenesvisitadasy hacequenosedescargueotravezunaimagenyavista. Sonfcilesdemantener,porqueelmapadelawebycadaapartadoestn separados.Nopiensanenquetienenqueaadirdospginasnuevasslopara losframes,yactualizarlassiemprealavez. Danusabilidad,yaqueelmenestsiemprevisibleenpantalla.Lomaloes quenosepuedenasegurardequeestopasesiempre(concualquier
44de49
26/01/1213:06
resolucin),yquizstampocohayanpensadoenquetenersiemprevisibleel mennosiempreesnecesario. Permitenmantenerlamismadireccinenlabarradedirecciones.Esoes malo(leelaseccinanterior).Alosvisitanteslescostaraadirunapginaa losmarcadores. Nolesveomsventajas...
Quusarentonces
Noesimprescindibletenersiempreelmenencadapgina.Puedesteneruna pginadeentradaconelmen,quetelleveacadaunadelasseccionesdelaweb. Sinecesitasrepetirelmismocontenidoenvariaspginas,hayvariosmtodos, todoscomplicadosomalos: UsaServer-SideIncludesounlenguajecomoPHP,oCGI.Elservidorweb tienequesoportarlo. Incluyeencadapginaun<script src="fichero.js" type="text/javascript">en dondesehagaundocument.write("cdigo repetido");.Estoequivaleanoponer nadadeesecdigoentodoslosnavegadoresquenosoportanJavaScript(que sonmuchos,sobretodosicuentasaGoogle).Asqueponademsenlacesde verdad. Copiarypegar.Puedequesealomscmodo... Piensaunpocoparahacerunprograma(omtodo)quereemplaceunafrase mgicasituadaencada.htmlporelcdigorealquehayquerepetir.Creoque yahayprogramasquehaceneso.
Cundousarframes
Muypocoscasosjustificaneltenerqueusarframes.Comodantantsimos problemasdeusabilidadyaccesibilidad,ponerlosenInternetnotienesentido. salossiquieresquelosbuscadoresnoindexentupgina,losusuariosnote puedanaadiralosmarcadores,notenganqueimprimirse,vayanaverseenel mismotipodepantallas,ycreasquenopuedehaberproblemasdeseguridadode copyright.EsteescenariopodraserunaIntranet,aunqueenesecasovaldrala
45de49
26/01/1213:06
penainstalarunlenguajedeservidor(yaloheexplicadomsarriba).
JavaScript
Estetemaesmuyextenso.PuedesconsultarlaespecificacindeECMAScript [http://www.ecma-international.org/publications/standards/Ecma-262.htm],queescomosellama elestndar. RecuerdaqueJavaScriptnotienenadaqueverconJAVA[http://java.sun.com/]: JAVAesunlenguajecompleto,usadoparacosasmsserias.Tampocoeslo mismoJavaScriptqueJScript[http://es.wikipedia.org/wiki/JScript]:JScriptyVBScript soninvencionesdeMicrosoftparaautomatizartareasdeWindows(ypara programarvirus...).Muchagenteseconfundeconlosnombres,ydecideaprender JScriptporerror(buenatcnica,ladeMicrosoft).
Mejorusascriptsenelservidor
SientuservidorwebpuedesponeralgnlenguajecomoPHP,oCGIs(cualquier lenguaje),hazlosprogramitasenelservidor.Esmuchomejorquetrabajeel servidorquenolosordenadoresdelosclientes,porquenotodosloharnigual;yni siquieraeso:puedepasarquealgnusuarionoquieraonopuedaejecutarningn tipodescript. Sipiensasenestoversquelanicaformadequetodoslosvisitantesreciban elmismotratoeshaciendoquepreparelaspginaselservidor.
Losscriptshandehacercosascmodasparaelusuario
YoveojustificadousarJavaScriptparaayudaralusuarioencosasquenose puedenhacerconHTMLoCSS.Porejemplo,quealcargarlapginayahayaun cuadrodetextoenfocadoparaempezaraescribir,oquesihaymuchascasillasde seleccinjuntas,hayaunaopcinparaSeleccionartodas.Estascosasayudan,y elvisitantelasagradecer.Paraesoesparaloquehayqueusarscripts. Cuandoyanoayudanalanavegacin,escuandocambianlainterfazdela ventana,bloqueaneventos(comoelclicderecho),oestorbanconcosasquese
46de49
26/01/1213:06
mueven.Todoestohacelawebincmoda,yesmejorevitarlo.
Queseaopcional
Losscriptsnohandehacercosasimprescindiblesparaverbienlapgina.Son sloparacomplementaryhacerlawebmsfcildeusar. AsquesiusasunmenJavaScript,asegratedequehayaformasnormalesde llegaracadaseccin(conlosenlaces,<a>,comosiempre).
Nohagasbrowsersniffing
Contodoloqueheexplicado,esfcilhacerqueunawebseveabienentodoslos navegadores,asquenohaynecesidaddemirarmediantescriptsqunavegador usacadaunoparadarleuncdigouotro.
Flash
ElFlashnoesunestndar,aunquesuespecificacinlapuedenvertodosypor tantocualquierapuedecrearprogramasqueusenelformatoSWF. Esunatecnologapropietaria(locontrariodeestndar),porquesu especificacinlahahechonicamenteMacromedia,yessuya(sloellospueden cambiarla).LosestndaresISOoW3Csehanhechoentregentedetodoelmundo, yaceptandocomentariosypeticionesdelosusuariosnormales.
NoesparasustituiralHTMLoCSS
VariasveceshevistoaexpertosenCSSluchandocontraexpertosenFlash, discutiendosobrequesmejoryculhacemscosas.MiopininesqueFlash permitehacermaravillasenunapginaweb,yunmontndecosasquenose puedenhacerconCSSoHTML.PerotodoloquehaceCSStampocosepuedehacer conFlash.Soncosasdistintas:elCSSparahojasdeestiloyelFlashpara aplicaciones(sencillasocomplicadas).
47de49
26/01/1213:06
Enloquesquelesveoelparecidoesenquesirvenparacomplementaral contenidodelapgina.Peronoversquenadielouseparaestructurarcontenido niparaaplicarestilosagruposdeelementosdeunapgina. AunqueparacombinargrficosvectorialesconelHTMLyCSS,probablemente elSVGesmuchomsadecuado,yaqueestbasadoenXML.Esunestndar (puedesversuespecificacin[http://www.w3.org/TR/SVG/]enlawebdelW3C)yest soportadoportodoslosprogramasquetrabajancongrficosvectoriales. Bastantesnavegadoresactualeslosoportan,porejemploMozilla [http://www.mozilla.org/projects/svg/].
HadeseropcionalverunaanimacinenFlash
Enunapginaweblomsimportanteesqueelcontenidoestbien estructuradoconHTMLvlido.Todolodems(CSS,imgenes,JavaScript,Flash, Java,...)esparalosprivilegiadosquelopuedanver. Poresonopuedesobligaranadieaqueparaverunapginaoaccederaotras necesiteteneryusarelplugindeFlash(nipedirlequetengasoporteCSS,ni JavaScript,etc.).TododebeseraccesibledesdeelHTML,yelcontenidoenFlash escontenidoextradestinadoaquienpuedaverlo. PiensaqueesmuynormalnotenerelplugindeFlash,aunquelasestadsticas deMacromediadiganlocontrario.Haymuchossistemasoperativosparalosque noexistevisordeSWF,muchosnavegadoresqueporrazonestcnicasnolo soportan,ymuchosusuariosqueporrazonespersonalesnoquierenver animacionesenFlash.Otros,comoyo,lotieneninstaladoperodesactivadopor defecto,deformaqueslosemuestrasielvisitantedecidehacerclicenunbotn quesale.
CundousarFlash
Cuandohagafalta.Nolousesparaescribirtextoslargos;paraesoestel HTML.Silohaces,esparecidoanotenerpginaweb,porqueesmuydifcilllegar aalgunoscontenidosFlash.Suelenestarescondidos-tantoparahumanoscomo paraprogramas-,asqueesmejornoponerinformacininteresanteahdentro. saloparaanimacionesvectoriales,oprogramitasinteractivossencillos.Casi
48de49
26/01/1213:06
siempresehausadoparahaceranimacionesqueseandivertidas,ytambinpara quelasempresasdediseohagansupropiawebanunciandolomuchoquesaben deFlash(ypocodeaccesibilidad).
Java
Otratecnologapropietaria(porahora),peromuypotenteytambinalgolenta...
CundoponerappletsJavaenunaweb
TenencuentaquenotodostienenplugindeJava,asquenopongascosasmuy importantes. Sisloloquieresparahacerunaanimacinounefectoespecialbonito,esuna malaeleccin,porquenotodoslopodrnver,ycomoeslentoencargar,suele molestar,sobretodosinoaportanadatil.Envezdeappletspuedesusar imgenesbonitas,oGIFanimados,oFlash. ElJavavabienparapoderprobarprogramasdeordenadorenunaweb.Para programasmuycomplicadospodrasdecirBjateelfichero.jaryescribejava -jar fichero.jar,peroalgunosvenmscmodopoderejecutarelprograma directamentedesdelapgina. Locaractersticodecasicualquierprogramaesqueesinteractivo:necesitaque elusuariohagaalgo,trabaja,ydaunasalida.Esotambinsepuedehaceren FlashoJavaScript,peroparacosascomplicadasesmejorelJavaporserportable (multiplataforma,oalmenosmsqueelFlash). Asque,paraprogramasinteractivos,unappletdeJavaestbien.Sinoes nadainteractivo,ponloenotroformatoyevitaelJava.
49de49
26/01/1213:06

Cómo Hacer Una Buena Webpage

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cómo Hacer Una Buena Webpage

Загружено:

Авторское право:

Доступные форматы

HTMLcorrecto.Cmohacerunabuenapginaweb.

http://www.danielclemente.com/html/index.html http://www.danielclemente.com/html/ mailto://142857@ozu.quitando-esto.es news://netscape.public.mozilla.svg/

sonURIs.Fjateenquelaprimerahacereferenciaaunarhivodemiservidor,y lasegundaaundirectorio,poresollevalabarraalfinal.Sinopusieraslabarra, seteredirigiraaladireccincorrecta;prubalo: http://www.danielclemente.com/html[http://www.danielclemente.com/html](sinlabarra final).

(MS-DOS),yalimitabanlaextensindeunarchivoa3caracteres.Tardaron14 aosencopiarelmodelodeUNIXyLinux,enelqueelnombreylaextensin puedensertanlargosocortoscomosequiera. Asque:llamaalascosasporsunombre:.xhtmlparaelXHTML,.htmlpara HTML,.phpparaPHP,.xmlparaXML,etc.PorquhabramosdellamarXMal XML?

pgina.Noesunaetiqueta,portantoesalgoraraynohayquecerrarlaniponerla enminsculas.Esos,hayqueponerla. ParaHTML4.01Strict(recomendado):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link rel="stylesheet" href="archivo.css" type="text/css">

etiqueta {propiedad1:valor; propiedad2:valor; propiedadn:valor;}

navegadormodernoparaverlaspginastalcomohaqueridoelautor(novale InternetExplorer[http://www.danielclemente.com/navega/popup.html]). Tambinpuedesempezarmirandoelcdigodeestapgina,quenoesmuy complicado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">

<meta content="text/html; charset=utf-8" http-equiv="content-type">

Estasetiquetaslasvasausarmucho.Porssolasnohacennada;tienesque darlesestilo. Primero,unaexplicacinimportantesobreelcmofuncionaelHTML:

Recuerdaquenoescmodousarelatributostyle.Esmejordefinirclases (atributoclass)yluegodarlesestiloatodoslosdelamismaclasealavez.Lo explicoenotraseccin.

Yyaestntodaslasceldasdetodaslastablascentradas!Siteinteresa escogersloalgunasceldas,estudialodedarlesnombreyclase(atributosido class,queexplicomsadelante).

table tbody tr th {white-space:nowrap;}

Nouses<i> ,<b> ,<u> ,sino<em> ,<strong> yCSS.

<a href = "http://www.google.es/search?hl=es&amp;q=142857">

Informaci&oacute;n sobre el 142857</a>

div {border:2px solid black; background:yellow;}

div.ayuda {border:2px solid black; background:yellow;}

div#titulo {border:12px solid blue; background:gray; color:black;}

Hayqueponer<script type="text/javascript">.Elatributolanguagenoseusa(de todasformascadaunoloescribacomoquera,onoloponaporqueibaigual).Lo mismoconel<style>:siesCSS,pon<style type="text/css">. Estainformacinsqueestil,porquesontiposMIMEestandarizados,no palabritascualquiera.

Lascabeceras<h1> ,<h2> ,<h3> ,...sonparacabeceras

em {color:red;} em {color:#f00;} em {color:#ff0000;} em {color:rgb(255,0,0);} em {color:rgb(100%,0%,0%);}

cables molestan mucho y cuestan de limpiar">.

Ni<table> ni<tr> ni<td> necesitanatributos

resolucin),yquizstampocohayanpensadoenquetenersiemprevisibleel mennosiempreesnecesario. Permitenmantenerlamismadireccinenlabarradedirecciones.Esoes malo(leelaseccinanterior).Alosvisitanteslescostaraadirunapginaa losmarcadores. Nolesveomsventajas...

siempresehausadoparahaceranimacionesqueseandivertidas,ytambinpara quelasempresasdediseohagansupropiawebanunciandolomuchoquesaben deFlash(ypocodeaccesibilidad).

Вам также может понравиться

<a href = "http://www.google.es/search?hl=es&q=142857">

Información sobre el 142857</a>