la estructura global de un documento html

25/3/2015 LaestructuraglobaldeundocumentoHTML

http://html.conclase.net/w3c/html401es/struct/global.html#h7.5.2 1/16

anteriorsiguientecontenidoselementosatributosndice

7LaestructuraglobaldeundocumentoHTML

Nota:EstedocumentoespartedeunatraduccinalcastellanodelaRecomendacindelW3C"HTML4.01Specification"(msinformacin).Puedeconsultarlaversinoriginaldelmismo.Paracualquiercomentarioocorreccinacercadelatraduccinpngaseencontactoconeltraductorenjrpozo@conclase.net.Graciasporsucolaboracin.VaseelAvisodecopyrightdelatraduccin.

Contenidos

1. IntroduccinalaestructuradeundocumentoHTML2. InformacinsobrelaversindeHTML3. ElelementoHTML4. Lacabeceradeldocumento

1. ElelementoHEAD2. ElelementoTITLE3. Elatributotitle4. Metadatos

EspecificacindemetadatosElelementoMETAPerfilesdemetadatos

5. Elcuerpodeldocumento1. ElelementoBODY2. Identificadoresdeelementos:losatributosidyclass3. Elementosenbloqueyelementosenlnea4. Agrupacindeelementos:loselementosDIVySPAN5. Encabezados:loselementosH1,H2,H3,H4,H5,H66. ElelementoADDRESS

7.1IntroduccinalaestructuradeundocumentoHTMLUndocumentoHTML4secomponedetrespartes:

1. unalneaquecontieneinformacinsobrelaversindeHTML,2. unaseccindecabeceradeclarativa(delimitadaporelelementoHEAD),3. uncuerpo,quecontieneelcontenidorealdeldocumento.Elcuerpopuedeserespecificado

medianteelelementoBODYomedianteelelementoFRAMESET.

Puedeaparecerespacioenblanco(espacios,saltosdelnea,tabulacionesycomentarios)antesydespusdecadaseccin.Lassecciones2y3deberanestardelimitadasporelelementoHTML.

AqutenemosunejemplodeundocumentoHTMLsencillo:

HostingdeAltaCapacidad



MiprimerdocumentoHTMLHolamundo!

7.2InformacinsobrelaversindeHTMLUndocumentoHTMLvlidodeclaraquversindeHTMLseutilizaeneldocumento.Ladeclaracindeltipodedocumentoespecificaladefinicindeltipodedocumento(DTD)queseusaeneldocumento(ver[ISO8879]).

HTML4.01especificatresDTDs,demodoquelosautoresdebenincluirunadelassiguientesdeclaracionesdeltipodedocumentoensusdocumentos.LosDTDsvaranencuantoaloselementosquesoportan.

ElDTDHTML4.01Estricto(StrictDTD)incluyetodosloselementosyatributosquenohansidodesaprobadosoquenoaparecenendocumentosconmarcos.ParalosdocumentosqueusenesteDTD,utiliceestadeclaracindeltipodedocumento:

ElDTDHTML4.01Transicional(TransitionalDTD)incluyetodoloqueincluyeelDTDestrictomsloselementosyatributosdesaprobados(lamayoradeloscualesestnrelacionadosconlapresentacinvisual).ParalosdocumentosqueusenesteDTD,utiliceestadeclaracindeltipodedocumento:

ElDTDHTML4.01paraDocumentosconMarcos(FramesetDTD)incluyetodoloqueincluyeelDTDTransicionalmslosmarcos.ParalosdocumentosqueusenesteDTD,utiliceestadeclaracindeltipodedocumento:

ElURIqueapareceenladeclaracindeltipodedocumentopermitealosagentesdeusuariodescargarelDTDylosconjuntosdeentidadesqueseannecesarios.LossiguientesURIs(relativos)serefierenalosDTDsyconjuntosdeentidadesdeHTML4:

"strict.dtd"DTDestrictopordefecto"loose.dtd"DTDnoestricto"frameset.dtd"DTDparadocumentosconmarcos"HTMLlat1.ent"entidadesLatin1"HTMLsymbol.ent"entidadesSymbol"HTMLspecial.ent"entidadesespeciales

LavinculacinentreidentificadorespblicosyficherospuedeespecificarseutilizandounficherodecatlogosegnelformatorecomendadoporelOasisOpenConsortium(ver[OASISOPEN].AlcomienzodelaseccinsobrelareferenciaSGMLdeHTML4.01seincluyeunficherodecatlogodemuestraparaHTML4.01.LasdosltimasletrasdeladeclaracinindicanelidiomadelDTD.ParaHTML,steessiempreingls("EN").

Nota.EnloqueconciernealaversindeHTML4.01del24dediciembre,elGrupodeTrabajoHTMLsecomprometealasiguientepoltica:

LosposiblescambiosenlosDTDsfuturosdeHTML4noinvalidarnlosdocumentosqueseanconformesconlosDTDsdelapresenteespecificacin.ElGrupodeTrabajoHTMLse



reservaelderechodecorregirloserroresconocidos.LosprogramasqueseanconformesconlosDTDsdelapresenteespecificacinpuedennotenerencuentalascaractersticasdelosDTDsfuturosdeHTML4quenoreconozcan.

Estosignificaqueenunadeclaracindeltipodedocumento,losautorespuedenutilizarconseguridadunidentificadordesistemaqueserefieraalaltimaversindeunDTDHTML4.Losautorestambinpuedenoptarporusarunidentificadordesistemaqueserefieraaunaversionespecfica(antigua)deunDTDHTML4cuandoseanecesarialavalidacinconrespectoaeseDTDenparticular.ElW3Chartodoloposibleparaquelosdocumentosarchivadosestnsiempredisponiblesensusdireccionesoriginalesyensuformaoriginal.

7.3ElelementoHTML

Etiquetainicial:opcional,Etiquetafinal:opcional

Definicionesdeatributos

version=cdata[CN]Desaprobado.ElvalordeesteatributoespecificaquDTDHTMLgobiernaeldocumentoactual.Esteatributohasidodesaprobadoporqueesredundanteconlainformacinsobrelaversinproporcionadaporladeclaracindeltipodedocumento.

Atributosdefinidosenotroslugares

lang(informacinsobreelidioma),dir(direccindeltexto)

Despusdeladeclaracindeltipodedocumento,elrestodeundocumentoHTMLestcontenidoenelelementoHTML.As,undocumentoHTMLtpicotieneestaestructura:

...Lacabecera,elcuerpo,etc.vanaqu...

7.4Lacabeceradeldocumento

7.4.1ElelementoHEAD



profile=uri[CT]Esteatributoespecificalalocalizacindeunoomsperfilesdemetadatos,separadospor



espacioenblanco.Convistasaextensionesfuturas,losagentesdeusuariodeberanconsiderarestevalorcomounalista,sibienestaespecificacinslotieneencuentaelprimerURI.Sehablasobrelosperfilesmsadelante,enlaseccinsobremetadatos.



ElelementoHEADcontieneinformacinsobreeldocumentoactual,comoelttulo,palabrasclavequepuedenserdeutilidadparamotoresdebsqueda,yotrosdatosquenoseconsideranpartedelcontenidodeldocumento.Engeneral,losagentesdeusuarionorepresentanloselementosqueaparecencomocontenidodelHEAD.Sinembargo,puedenponerlainformacindelHEADadisposicindelosusuariosatravsdeotrosmecanismos.

7.4.2ElelementoTITLE

Etiquetainicial:obligatoria,Etiquetafinal:obligatoria



TodoslosdocumentosHTMLdebentenerunelementoTITLEenlaseccinHEAD.

LosautoresdeberanutilizarelelementoTITLEparaidentificarloscontenidosdeundocumento.Debidoaquelosusuariosamenudoconsultandocumentosfueradecontexto,losautoresdeberanproporcionarttulosricosencontexto.As,envezdeusarunttulocomo"Introduccin",quenoproporcionamuchainformacinacercadelcontexto,losautoresdeberanponerensulugarunttulodelestilo"Introduccinalaapiculturamedieval".

Porrazonesdeaccesibilidad,losagentesdeusuariosiempredebenponerelcontenidodelelementoTITLEadisposicindelosusuarios(incluyendoloselementosTITLEqueaparezcanenmarcos).Elmecanismoparaellodependedelagentedeusuario(p.ej.,comounttulo,hablado).

Losttulospuedencontenerentidadesdecaracteres(paracaracteresacentuados,caracteresespeciales,etc.),peronopuedencontenercdigo(incluyendocomentarios).Aqutenemosunejemplodettulodedocumento:

Unestudiosobreladinmicadelapoblacin...otroselementosdecabecera...

...cuerpodeldocumento...

7.4.3Elatributotitle




title=texto[CS]Esteatributoofreceinformacinconsultivasobreelelementoparaelcualseestablece.

AdiferenciadelelementoTITLE,queproporcionainformacinsobreundocumentoenteroyqueslopuedeaparecerunavez,elatributotitlepuedeanotarcualquiernmerodeelementos.Parasabersiunelementosoportaesteatributoconsulteladefinicindelelemento.

Losvaloresdelatributotitlepuedenserrepresentadosporlosagentesdeusuariodediferentesmaneras.Porejemplo,losnavegadoresvisualessuelenrepresentarelttulocomoun"tooltip"(unmensajecortoqueaparececuandoeldispositivoapuntadorsedetienesobreunobjeto).Losagentesdeusuariodevozpuedenpronunciarlainformacindelttuloenuncontextosimilar.Porejemplo,alestablecerelatributoenunvnculo,losagentesdeusuario(visualesynovisuales)puedendeciralosusuarioslanaturalezadelrecursovinculado:

...texto...Aquhayunafotoma

haciendosubmarinismoelveranopasado

...mstexto...

ElatributotitletieneunpapeladicionalcuandoseutilizaconelelementoLINKparadesignarunahojadeestiloexterna.Consultelaseccinsobrevnculosyhojasdeestiloparamsdetalles.

Nota.Paramejorarlacalidaddelasntesisdevozenloscasosenquelastcnicasestndarlogranmalosresultados,lasversionesfuturasdeHTMLpodranincluirunatributoparacodificarinformacinfonmicayprosdica.

7.4.4Metadatos

Nota.ElMarcodeDescripcindeRecursos(ResourceDescriptionFramework)delW3C(ver[RDF10])seconvirtienRecomendacindelW3Cenfebrerode1999.ElRDFpermitealosautoresespecificarmetadatoslegiblespormquinasobredocumentosHTMLyotrosrecursosaccesiblesporlared.

ElHTMLpermitealosautoresespecificarmetadatosinformacinsobreundocumentomsquecontenidodelpropiodocumentodediferentesdemaneras.

Porejemplo,paraespecificarelautordeundocumento,puedeutilizarseelelementoMETAcomosigue:

ElelementoMETAespecificaunapropiedad(aqu"Author")yleasignaunvalor(aqu"DaveRaggett").

Estaespecificacinnodefineunconjuntodepropiedadeslegalesdemetadatos.Elsignificadodeunapropiedadyelconjuntodevaloreslegalesparaesapropiedaddeberaestardefinidaenundiccionariodereferenciallamadoperfil.Porejemplo,unperfildiseadoparaayudaralosmotoresdebsquedaaindexardocumentospodradefinirpropiedadestalescomo"author","copyright","keywords",etc.

Especificacindemetadatos

Engeneral,laespecificacindemetadatosimplicadospasos:

1. Declaracindeunapropiedadydeunvalorparaestapropiedad.Estopuedehacersededosmaneras:

1. Desdedentrodeundocumento,pormediodelelementoMETA.2. Desdefueradeundocumento,vinculandolosmetadatospormediodelelementoLINK



(vaselaseccinsobretiposdevnculos).2. Referenciaaunperfilenelquesedefinenlapropiedadysusvaloreslegales.Paradesignar

unperfil,seusaelatributoprofiledelelementoHEAD.

ObsrvesequealestardefinidounperfilporelelementoHEAD,seaplicaelmismoperfilatodosloselementosMETAyLINKdelacabeceradeldocumento.

Losagentesdeusuariononecesitansoportarlosmecanismosdemetadatos.Paraaquellosqueoptenporsoportarmetadatos,estaespecificacinnodefinecmodeberaninterpretarselosmetadatos.

ElelementoMETA

Etiquetainicial:obligatoria,Etiquetafinal:prohibida


Paralossiguientesatributos,losvalorespermitidosysuinterpretacindependedelperfil:

name=name[CS]Esteatributoidentificaunnombredepropiedad.Estaespecificacinnoenumeralosvaloreslegalesparaesteatributo.

content=cdata[CS]Esteatributoespecificaelvalordeunapropiedad.Estaespecificacinnoenumeralosvaloreslegalesparaesteatributo.

scheme=cdata[CS]Esteatributoespecificaunesquemaqueseusarparainterpretarelvalordelapropiedad(vaselaseccinsobreperfilesparamsdetalles).

httpequiv=name[CI]Esteatributopuedeutilizarseenlugardelatributoname.LosservidoresHTTPutilizanesteatributoparaobtenerinformacinsobrelosencabezadosdelmensajederespuestaHTTP.



ElelementoMETApuedeutilizarseparaidentificarpropiedadesdeundocumento(p.ej.,elautor,lafechadecaducidad,unalistadepalabrasclave,etc.)yparaasignarvaloresaesaspropiedades.Estaespecificacinnodefineunconjuntonormativodepropiedades.

CadaelementoMETAespecificaunaparejapropiedad/valor.Elatributonameidentificalapropiedadyelatributocontentespecificaelvalordelapropiedad.

Porejemplo,lasiguientedeclaracinestableceunvalorparalapropiedadAuthor:

PuedeutilizarseelatributolangdeMETAparaespecificarelidiomadelvalordelatributocontent.Estopermitealossintetizadoresdevozaplicarreglasdepronunciacindependientesdelidioma.

Enesteejemplo,sedeclaraqueelnombredelautorestenfrancs:



Nota.ElelementoMETAesunmecanismogenricoparalaespecificacindemetadatos.Sinembargo,hayalgunoselementosyatributosHTMLqueyamanejandeterminadosmetadatosyquepuedenserutilizadosporlosautoresenlugardeMETAparaespecificardichosmetadatos:elelementoTITLE,elelementoADDRESS,loselementosINSyDEL,elatributotitle,yelatributocite.

Nota.CuandounapropiedadespecificadamedianteunelementoMETAtomaunvalorqueesunURI,algunosautoresprefierenespecificarlosmetadatosmedianteelelementoLINK.As,lasiguientedeclaracindemetadatos:

tambinpodrahaberseescritoas:

METAyencabezadosHTTP

Elatributohttpequivpuedeutilizarseenlugardelatributoname,locualtieneunsignificadoespecialcuandolosdocumentosseobtienenmedianteelProtocolodeTransferenciadeHipertexto(HTTP).LosservidoresHTTPpuedenusarelnombredelapropiedadespecificadaporelatributohttpequivparacrearunencabezadoalestilo[RFC822]enlarespuestaHTTP.VealaespecificacinHTTP([RFC2616])paramsdetallessobreencabezadosHTTPvlidos.

LasiguientedeclaracinMETAdeejemplo:

resultarenelencabezadoHTTP:

Expires:Tue,20Aug199614:25:27GMT

Estolopuedenutilizarlascachsparadeterminarcundoobtenerunanuevacopiadeldocumentoasociado.

Nota.AlgunosagentesdeusuariosoportanelusodeMETApararefrescarlapginaactualdespusdeunnmeroespecificadodesegundos,conlaopcindereemplazarlaconunURIdiferente.Losautoresnodeberanutilizarestatcnicaparadirigiralosusuariosapginasdiferentes,yaqueestohacelapginainaccesibleparaalgunosusuarios.Enlugardeeso,laredireccinautomticadepginasdeberarealizarseusandoredireccinenelladodelservidor.

METAymotoresdebsqueda

UnusocomndeMETAesespecificarpalabrasclavequepuedenusarlosmotoresdebsquedaparamejorarlacalidaddelosresultadosdeunabsqueda.CuandoseproporcionenvarioselementosMETAconinformacinparavariosidiomas,losmotoresdebsquedapuedenutilizarelatributolangcomofiltroparamostrarlosresultadosdelabsquedausandolaspreferenciasdeidiomadelusuario.Porejemplo,



TambinpuedeincrementarselaefectividaddelosmotoresdebsquedausandoelelementoLINKparaespecificarvnculosatraduccionesdeldocumentoenotrosidiomas,vnculosaversionesdeldocumentoenotrosmedios(p.ej.,PDF),y,cuandoeldocumentoespartedeunacoleccin,vnculosaunpuntoapropiadodepartidaparaexaminarlacoleccincompleta.

SepuedeencontrarmsayudaenlaseccinsobrecmoayudaralosmotoresdebsquedaaindexarsusitioWeb.

METAyPICS

LaPlataformaparalaSeleccindeContenidoenInternet(PICS,especificadaen[PICS])esunainfraestructuraparaasociaretiquetas(metadatos)concontenidodeInternet.DiseadaoriginalmenteparaayudaralospadresyalasescuelasacontrolarloslugaresalosquepuedenaccederlosniosenInternet,tambinfacilitaotrosusosparalasetiquetas,incluyendofirmasdecdigo,privacidad,ygestindelosderechosdelapropiedadintelectual.

EsteejemploilustracmopuedeusarseunadeclaracinMETAparaincluirunaetiquetaPICS1.1:

...ttulodeldocumento...

METAeinformacinpordefecto

ElelementoMETApuedeutilizarseparaespecificarlainformacinpordefectodeundocumentoenlosaspectossiguientes:

Ellenguajedescriptspordefecto.Ellenguajedehojasdeestilopordefecto.Lacodificacindecaracteresdeldocumento.

ElsiguienteejemploespecificaquelacodificacindecaracteresdeundocumentoeslaISO88595

Perfilesdemetadatos

ElatributoprofiledeHEADespecificalalocalizacindeunperfildemetadatos.ElvalordelatributoprofileesunURI.LosagentesdeusuariopuedenutilizaresteURIdedosmaneras:

Comounnombrenicoanivelglobal.Losagentesdeusuariopuedensercapacesdereconocerelnombre(sinnecesidaddeobtenerelperfil)yrealizaralgunaaccinsegnlasconvencionesconocidasrelativasaeseperfil.Porejemplo,losmotoresdebsquedapodranproporcionarunainterfazparabsquedaencatlogosdedocumentosHTML,demodoquetodoslosdocumentospodranusarelmismoperfilpararepresentarentradasdeuncatlogo.Comounvnculo.LosagentesdeusuariopuedenseguirelURIyrealizaralgunaaccinsegnlasdefinicionescontenidasenelperfil(p.ej.,autorizarelusodelperfildentrodeldocumentoHTMLactual).Estaespecificacinnodefineformatosdeperfiles.



Esteejemplohacereferenciaaunperfilhipotticoquedefinepropiedadestilesparaindexardocumentos.Alaspropiedadesdefinidasenesteperfilincluyendo"author","copyright","keywords"(palabrasclave)y"date"(fecha)selesasignanvaloresmediantedeclaracionesMETAsubsiguientes.

CmocompletarportadasdeMemoranda

Enelmomentodeescribirestaespecificacin,laprcticacomnesusarlosformatosdefechasdescritosen[RFC2616],seccin3.3.Comoestosformatossonrelativamentecomplicadosdeprocesar,recomendamosquelosautoresutilicenelformatodefechas[ISO8601].Paramsinformacin,vanselasseccionessobreloselementosINSyDEL.

Elatributoschemepermitealosautoresproporcionaralosagentesdeusuariomscontextoparalainterpretacincorrectadelosmetadatos.Aveces,estainformacinadicionalpuedesercrtica,porejemplocuandolosmetadatospuedenserespecificadossegnformatosdiferentes.Porejemplo,unautorpodraespecificarunafechaenelformato(ambiguo)"10997"significaesto9deoctubrede1997o10deseptiembrede1997?Elvalor"MesDaAo"paraelatributoschemeeliminaralaambigedaddeestevalordefecha.

Enotrasocasiones,elatributoschemepuedeproporcionarinformacintilaunquenocrticaalosagentesdeusuario.

Porejemplo,lasiguientedeclaracinschemepodraayudaraunagentedeusuarioadeterminarqueelvalordelapropiedad"identificador"esunnmerodecdigoISBN:

Losvaloresdelatributoschemedependendelapropiedadnameydelprofileasociado.

Nota.UnejemplodeperfileselDublinCore(ver[DCORE]).Esteperfildefineunconjuntodepropiedadesrecomendadasparadescripcionesbibliogrficaselectrnicas,ysuobjetivoespromoverlainteroperabilidadentremodelosdescriptivosdispares.

7.5Elcuerpodeldocumento

7.5.1ElelementoBODY



background=uri[CT]Desaprobado.ElvalordeesteatributoesunURIquedesignaunrecursodeimagen.Engenerallaimagenserepitepararellenarelfondo(ennavegadoresvisuales).

text=color[CI]Desaprobado.Esteatributoestableceelcolordeprimerplanoparaeltexto(ennavegadoresvisuales).

link=color[CI]



Desaprobado.Esteatributoestableceelcolordeltextoquemarcalosvnculosdehipertextonovisitados(ennavegadoresvisuales)

vlink=color[CI]Desaprobado.Esteatributoespecificaelcolordeltextoquemarcalosvnculosdehipertextovisitados(ennavegadoresvisuales).

alink=color[CI]Desaprobado.Esteatributoespecificaelcolordeltextoquemarcalosvnculosdehipertextocuandosonseleccionadosporelusuario(ennavegadoresvisuales).


id,class(identificadoresaniveldedocumento)lang(informacinsobreelidioma),dir(direccindeltexto)title(ttulodelelemento)style(informacindeestiloenlnea)bgcolor(colordelfondo)onload,onunload(eventosintrnsecos)onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup(eventosintrnsecos)

Elcuerpodeundocumentocontieneelcontenidodeldocumento.Elcontenidopuedeserpresentadoporunagentedeusuariodedistintasmaneras.Porejemplo,paralosnavegadoresvisuales,sepuedeimaginarelcuerpocomounlienzosobreelqueapareceelcontenido:texto,imgenes,colores,grficos,etc.Paraagentesdeusuarioporvoz,elmismocontenidopodraserpronunciado.Debidoaqueahoraelmtodopreferidodeespecificarlapresentacindeundocumentosonlashojasdeestilo,losatributospresentacionalesdelelementoBODYhansidodesaprobados.

EJEMPLODESAPROBADO:ElsiguientefragmentoHTMLilustraelusodelosatributosdesaprobados.Estableceelcolordefondodellienzoenblanco,elcolordeprimerplanodeltextoennegro,yelcolordeloshipervnculosenrojoinicialmente,fucsiacuandosonactivadosymarrnunavezquehansidovisitados.

Unestudiosobreladinmicadelapoblacin


Usandohojasdeestilo,sepodraconseguirelmismoefectodelasiguientemanera:

UnestudiosobreladinmicadelapoblacinBODY{background:white;color:black}A:link{color:red}A:visited{color:maroon}A:active{color:fuchsia}




Elusarhojasdeestiloexternas(vinculadas)nosdaflexibilidadparacambiarlapresentacinsintenerquerevisareldocumentofuenteHTML:

Unestudiosobreladinmicadelapoblacin


MarcosycuerposHTML.LosdocumentosquecontienenmarcosreemplazanelelementoBODYconelelementoFRAMESET.Consultelaseccinsobremarcosparamsinformacin.

7.5.2Identificadoresdeelementos:loselementosidyclass


id=name[CS]Esteatributoasignaunnombreaunelemento.Estenombredebesernicoenundocumento.

class=listadecdata[CS]Esteatributoasignaunnombredeclaseounconjuntodenombresdeclaseaunelemento.Sepuedeasignarelmismonombreonombresdeclaseacualquiernmerodeelementos.Losnombresdeclasemltiplesdebenestarseparadosporcaracteresdeespacioenblanco.

Elatributoidasignaunidentificadornicoaunelemento(locualpuedeserverificadoporunanalizadorSGML).Porejemplo,lossiguientesprrafossedistinguenporsusvaloresdeid:

Estoesunprrafoconunnombrenico.Estotambinesunprrafoconunnombrenico.

ElatributoidtienevariospapelesenHTML:

Comoselectorparalashojasdeestilo.Comovnculodestinoparavnculosdehipertexto.Comomediodehacerreferenciaaunelementoenparticulardesdeunscript.ComonombredeunelementoOBJECTdeclarado.Paraprocesosgeneralesporpartedeagentesdeusuario(p.ej.,paraidentificarcamposcuandosetransfierendatosdesdepginasHTMLhastaunabasededatos,paratraducirdocumentosHTMLaotrosformatos,etc.).

Elatributoclass,porotraparte,asignaunoomsnombresdeclaseaunelementosepuededecirqueelelementoperteneceaestasclases.Varioselementospuedencompartirelmismonombredeclase.ElatributoclasstienevariospapelesenHTML:

Comoselectorparahojasdeestilo(cuandounautordeseaasignarinformacindeestiloaunconjuntodeelementos).Paraprocesosgeneralesporpartedeagentesdeusuario.

Enelsiguienteejemplo,elelementoSPANseutilizajuntoconlosatributosidyclassparacodificarmensajesinformativos.Losmensajesaparecentantoeninglscomoenespaol.

Variabledeclaredtwice



UndeclaredvariableBadsyntaxforvariablename

VariabledeclaradadosvecesVariablenodeclaradaSintaxisincorrectaparaelnombredelavariable

LassiguientesreglasdeestiloCSSdiranalosagentesdeusuariovisualesquerepresentaranlosmensajesinformativosenverde,losmensajesdeadvertenciaenamarillo,ylosmensajesdeerrorenrojo:

SPAN.info{color:green}SPAN.advertencia{color:yellow}SPAN.error{color:red}

Obsrvesequeel"msg1"espaolyel"msg1"inglsnopuedenaparecerenelmismodocumento,yaqueamboscompartenelmismovalordeid.Losautorespuedenhacerunusomayordelatributoidpararefinarlapresentacindemensajesindividuales,hacerlosvnculosdestino,etc.

SelespuedeasignarinformacindeidentificadoryclaseacasitodosloselementosHTML.

Supongamos,porejemplo,queestamosescribiendoundocumentosobreunlenguajedeprogramacin.Eldocumentodebeincluirunnmerodeejemplospreformateados.UsamoselelementoPREparaformatearlosejemplos.Tambinasignamosuncolordefondo(verde)atodoslosejemplaresdelelementoPREquepertenezcanalaclase"ejemplo".


PRE.ejemplo{background:green}

...cdigodelejemplo...

Alestablecerelatributoidparaesteejemplo,podemos(1)crearunhipervnculoaly(2)sustituirlainformacindeestilodelaclaseporinformacindeestilopropia.

Nota.Elatributoidcomparteelmismoespaciodenombresqueelatributonamecuandoseusaparanombresdevnculos.Consultelaseccinsobrevnculosconidparamsinformacin.

7.5.3Elementosenbloqueyelementosenlnea

AlgunosdeloselementosHTMLquepuedenaparecerenBODYsellamanelementos"enbloque"(otambin"aniveldebloque")mientrasqueotrossonelementos"enlnea"(o"aniveldetexto").Estadistincinsebasaenvariosaspectos:

ModelodecontenidoGeneralmente,loselementosenbloquepuedencontenerelementosenlneayaotroselementosenbloque.Generalmente,loselementosenlneaslopuedencontenerdatosyaotroselementosenlnea.Inherentementeaestadistincinestructuralestlaideadequeloselementosenbloquecreanestructuras"msgrandes"queloselementosenlnea.

FormatoLoselementosenbloquetienenpordefectounformatodiferentequeeldeloselementosenlnea.Generalmente,loselementosenbloquecomienzanenunanuevalnea,yloselementosenlneano.Parainformacinsobreespacioenblanco,saltosdelnea,yformatodebloques,consultelaseccinsobretexto.



DireccionalidadPorrazonestcnicasrelacionadasconelalgoritmodetextobidireccionalde[UNICODE],loselementosenbloqueyenlneadifierenenelmododeheredarlainformacindedireccionalidad.Paramsdetalles,vealaseccinsobreherenciadeladireccindeltexto.

Lashojasdeestiloproporcionanmediosparaespecificarlarepresentacindeelementosarbitrarios,incluyendolarepresentacincomoelementoenbloqueoenlnea.Enalgunoscasos,comoporejemploparainformacinenlneaparaobjetosdelista,estopuedeserapropiado,peroengeneralnoesaconsejablequelosautoresinvalidenlainterpretacinconvencionaldeloselementosHTMLdeestemodo.

Laalteracindelestilodepresentacintradicionaldeloselementosenbloqueyenlneatambininfluyeenelalgoritmodetextobidireccional.Vealaseccinsobreelefectodelashojasdeestiloenlabidireccionalidadparamsinformacin.

7.5.4Agrupacindeelementos:loselementosDIVySPAN



id,class(identificadoresaniveldedocumento)lang(informacinsobreelidioma),dir(direccindeltexto)title(ttulodelelemento)style(informacindeestiloenlnea)align(alineacin)onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup(eventosintrnsecos)

LoselementosDIVySPAN,juntoconlosatributosidyclass,ofrecenunmecanismogenricoparaaadirestructuraalosdocumentos.Estoselementosespecificansisucontenidoesenlnea(SPAN)oenbloque(DIV)peronoimponenningnotroestilodepresentacinalcontenido.As,losautorespuedenusarestoselementosjuntoconhojasdeestilo,elatributolang,etc.,paraadaptarelHTMLasuspropiosgustosynecesidades.

Supongamos,porejemplo,quequisiramosgenerarundocumentoHTMLbasadoenunabasededatosdeinformacinsobreclientes.ComoHTMLnoincluyeelementosqueidentifiquenobjetostalescomo"cliente","nmerodetelfono","direccindecorreoelectrnico",etc.,utilizamosDIVySPANparalograrlosefectosestructuralesypresentacionalesdeseados.PodramosusarelelementoTABLEdelmodosiguienteparaestructurarlainformacin:

Informacinsobreelcliente:

Apellido:BoyeraNombre:StephaneTel:(212)5551212Email:[email protected]



Informacinsobreelcliente:

Apellido:LafonNombre:YvesTel:(617)5551212Email:[email protected]

Acontinuacin,podemosaadirfcilmentedeclaracionesalahojadeestiloparaajustarlapresentacindeestasentradasdelabasededatos.

Paraotroejemplodeuso,consulteelejemplodelaseccinsobrelosatributosclasseid.

EngenerallosagentesdeusuariovisualescolocanunsaltodelneaantesyotrodespusdeloselementosDIV,porejemplo:

aaaaaaaaabbbbbbbbbcccccccccc

quenormalmenteserepresentacomo:

aaaaaaaaabbbbbbbbbccccc

ccccc

7.5.5Encabezados:loselementosH1,H2,H3,H4,H5,H6



id,class(identificadoresaniveldedocumento)lang(informacinsobreelidioma),dir(direccindeltexto)title(ttulodelelemento)style(informacindeestiloenlnea)align(alineacin)onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup(eventosintrnsecos)

Unencabezadodescribebrevementeeltemadelaseccinqueintroduce.Lainformacindeencabezadopuedeserutilizadaporlosagentesdeusuario,porejemplo,paraconstruirunatabladecontenidosdeundocumentoautomticamente.

HayseisnivelesdeencabezadosenHTML,siendoH1elmsimportanteyH6elmenosimportante.Losnavegadoresvisualespuedenrepresentarlosencabezadosmsimportantesconfuentesmsgrandesquelosmenosimportantes.

ElsiguienteejemplomuestracmousarelelementoDIVparaasociarunencabezadoconlaseccin



deldocumentoquelesigue.Estonospermitedefinirunestiloparalaseccin(colordelfondo,fuentedeltexto,etc.)conhojasdeestilo.

ElefantesdelaselvaEnestaseccindescubriremosaesosgrandesdesconocidos:loselefantesdelaselva....laseccincontina...

HbitatLoselefantesdelaselvanovivenenlosrboles,sinoentreellos....lasubseccincontina...

Podemosdecorarestaestructuraconinformacindeestilotalcomosta:


DIV.seccion{textalign:justify;fontsize:12pt}DIV.subseccion{textindent:2em}H1{fontstyle:italic;color:green}H2{color:green}

SeccionesnumeradasyreferenciasHTMLnogeneraporsmismonmerosdeseccinapartirdelosencabezados.Sinembargoestopodraserofrecidoporlosagentesdeusuario.ProntoloslenguajesdehojasdeestilocomoCSSpermitirnalosautorescontrolarlageneracindenmerosdeseccin(muytilesparahacerreferenciasdedocumentosimpresos,comoen"Verlaseccin7.2").

Algunaspersonasconsideranquesaltarsenivelesdeencabezadoesmalaprctica.AceptanH1H2H1peronoaceptanH1H3H1yaquesesaltaelniveldeencabezadoH2.

7.5.6ElelementoADDRESS



id,class(identificadoresaniveldedocumento)lang(informacinsobreelidioma),dir(direccindeltexto)title(ttulodelelemento)style(informacindeestiloenlnea)onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup(eventosintrnsecos)

ElelementoADDRESSpuedeserutilizadoporlosautoresparaproporcionarinformacindecontactoenundocumentooenunapartedeundocumento,comoporejemplounformulario.Esteelementosueleaparecerelprincipiodeundocumento.

Porejemplo,unapginadelsitiowebdelW3CrelacionadaconHTMLpodraincluirlasiguienteinformacindecontacto:

DaveRaggett,



ArnaudLeHors,personasdecontactodelW3CHTMLActivity$Fecha:1999/12/2423:07:14$

anteriorsiguientecontenidoselementosatributosndice

la estructura global de un documento html

Documents