La Estructura Global de Un Documento HTML

25/3/2015
LaestructuraglobaldeundocumentoHTML
HostingdeAltaCapacidad
anteriorsiguientecontenidoselementosatributosndice
7LaestructuraglobaldeundocumentoHTML
Nota:EstedocumentoespartedeunatraduccinalcastellanodelaRecomendacindel
W3C"HTML4.01Specification"(msinformacin).Puedeconsultarlaversinoriginaldel
mismo.Paracualquiercomentarioocorreccinacercadelatraduccinpngaseencontacto
coneltraductorenjrpozo@conclase.net.Graciasporsucolaboracin.
VaseelAvisodecopyrightdelatraduccin.
Contenidos
1.
2.
3.
4.
IntroduccinalaestructuradeundocumentoHTML
InformacinsobrelaversindeHTML
ElelementoHTML
Lacabeceradeldocumento
1. ElelementoHEAD
2. ElelementoTITLE
3. Elatributotitle
4. Metadatos
Especificacindemetadatos
ElelementoMETA
Perfilesdemetadatos
5. Elcuerpodeldocumento
1. ElelementoBODY
2. Identificadoresdeelementos:losatributosidyclass
3. Elementosenbloqueyelementosenlnea
4. Agrupacindeelementos:loselementosDIVySPAN
5. Encabezados:loselementosH1,H2,H3,H4,H5,H6
6. ElelementoADDRESS
7.1IntroduccinalaestructuradeundocumentoHTML
UndocumentoHTML4secomponedetrespartes:
1. unalneaquecontieneinformacinsobrelaversindeHTML,
2. unaseccindecabeceradeclarativa(delimitadaporelelementoHEAD),
3. uncuerpo,quecontieneelcontenidorealdeldocumento.Elcuerpopuedeserespecificado
medianteelelementoBODYomedianteelelementoFRAMESET.
Puedeaparecerespacioenblanco(espacios,saltosdelnea,tabulacionesycomentarios)antesy
despusdecadaseccin.Lassecciones2y3deberanestardelimitadasporelelementoHTML.
AqutenemosunejemplodeundocumentoHTMLsencillo:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
http://html.conclase.net/w3c/html401es/struct/global.html#h7.5.2
1/16
25/3/2015
<HEAD>
<TITLE>MiprimerdocumentoHTML</TITLE>
</HEAD>
<BODY>
<P>Holamundo!
</BODY>
</HTML>
7.2InformacinsobrelaversindeHTML
UndocumentoHTMLvlidodeclaraquversindeHTMLseutilizaeneldocumento.La
declaracindeltipodedocumentoespecificaladefinicindeltipodedocumento(DTD)queseusa
eneldocumento(ver[ISO8879]).
HTML4.01especificatresDTDs,demodoquelosautoresdebenincluirunadelassiguientes
declaracionesdeltipodedocumentoensusdocumentos.LosDTDsvaranencuantoalos
elementosquesoportan.
ElDTDHTML4.01Estricto(StrictDTD)incluyetodosloselementosyatributosquenohan
sidodesaprobadosoquenoaparecenendocumentosconmarcos.Paralosdocumentosque
usenesteDTD,utiliceestadeclaracindeltipodedocumento:
ElDTDHTML4.01Transicional(TransitionalDTD)incluyetodoloqueincluyeelDTDestricto
msloselementosyatributosdesaprobados(lamayoradeloscualesestnrelacionadoscon
lapresentacinvisual).ParalosdocumentosqueusenesteDTD,utiliceestadeclaracindel
tipodedocumento:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
ElDTDHTML4.01paraDocumentosconMarcos(FramesetDTD)incluyetodoloqueincluye
elDTDTransicionalmslosmarcos.ParalosdocumentosqueusenesteDTD,utiliceesta
declaracindeltipodedocumento:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
ElURIqueapareceenladeclaracindeltipodedocumentopermitealosagentesdeusuario
descargarelDTDylosconjuntosdeentidadesqueseannecesarios.LossiguientesURIs(relativos)
serefierenalosDTDsyconjuntosdeentidadesdeHTML4:
"strict.dtd"DTDestrictopordefecto
"loose.dtd"DTDnoestricto
"frameset.dtd"DTDparadocumentosconmarcos
"HTMLlat1.ent"entidadesLatin1
"HTMLsymbol.ent"entidadesSymbol
"HTMLspecial.ent"entidadesespeciales
Lavinculacinentreidentificadorespblicosyficherospuedeespecificarseutilizandounficherode
catlogosegnelformatorecomendadoporelOasisOpenConsortium(ver[OASISOPEN].Al
comienzodelaseccinsobrelareferenciaSGMLdeHTML4.01seincluyeunficherodecatlogo
demuestraparaHTML4.01.LasdosltimasletrasdeladeclaracinindicanelidiomadelDTD.
ParaHTML,steessiempreingls("EN").
Nota.EnloqueconciernealaversindeHTML4.01del24dediciembre,elGrupodeTrabajo
HTMLsecomprometealasiguientepoltica:
LosposiblescambiosenlosDTDsfuturosdeHTML4noinvalidarnlosdocumentosque
seanconformesconlosDTDsdelapresenteespecificacin.ElGrupodeTrabajoHTMLse
2/16
25/3/2015
reservaelderechodecorregirloserroresconocidos.
LosprogramasqueseanconformesconlosDTDsdelapresenteespecificacinpuedenno
tenerencuentalascaractersticasdelosDTDsfuturosdeHTML4quenoreconozcan.
Estosignificaqueenunadeclaracindeltipodedocumento,losautorespuedenutilizarcon
seguridadunidentificadordesistemaqueserefieraalaltimaversindeunDTDHTML4.Los
autorestambinpuedenoptarporusarunidentificadordesistemaqueserefieraaunaversion
especfica(antigua)deunDTDHTML4cuandoseanecesarialavalidacinconrespectoaese
DTDenparticular.ElW3Chartodoloposibleparaquelosdocumentosarchivadosestn
siempredisponiblesensusdireccionesoriginalesyensuformaoriginal.
7.3ElelementoHTML
<!ENTITY%html.content"HEAD,BODY">
<!ELEMENTHTMLOO(%html.content;)elementorazdeldocumento>
<!ATTLISTHTML
%i18n;lang,dir
>
Etiquetainicial:opcional,Etiquetafinal:opcional
Definicionesdeatributos
version=cdata[CN]
Desaprobado.ElvalordeesteatributoespecificaquDTDHTMLgobiernaeldocumento
actual.Esteatributohasidodesaprobadoporqueesredundanteconlainformacinsobrela
versinproporcionadaporladeclaracindeltipodedocumento.
Atributosdefinidosenotroslugares
lang(informacinsobreelidioma),dir(direccindeltexto)
Despusdeladeclaracindeltipodedocumento,elrestodeundocumentoHTMLestcontenido
enelelementoHTML.As,undocumentoHTMLtpicotieneestaestructura:
<HTML>
...Lacabecera,elcuerpo,etc.vanaqu...
</HTML>
7.4Lacabeceradeldocumento
7.4.1ElelementoHEAD
<!%head.misc;definidopreviamentecomo"SCRIPT|STYLE|META|LINK|OBJECT">
<!ENTITY%head.content"TITLE&BASE?">
<!ELEMENTHEADOO(%head.content;)+(%head.misc;)cabeceradeldocumento>
<!ATTLISTHEAD
%i18n;lang,dir
profile%URI;#IMPLIEDdiccionariodemetainformacinconnombre
>
profile=uri[CT]
Esteatributoespecificalalocalizacindeunoomsperfilesdemetadatos,separadospor
3/16
25/3/2015
espacioenblanco.Convistasaextensionesfuturas,losagentesdeusuariodeberan
considerarestevalorcomounalista,sibienestaespecificacinslotieneencuentaelprimer
URI.Sehablasobrelosperfilesmsadelante,enlaseccinsobremetadatos.
ElelementoHEADcontieneinformacinsobreeldocumentoactual,comoelttulo,palabrasclaveque
puedenserdeutilidadparamotoresdebsqueda,yotrosdatosquenoseconsideranpartedel
contenidodeldocumento.Engeneral,losagentesdeusuarionorepresentanloselementosque
aparecencomocontenidodelHEAD.Sinembargo,puedenponerlainformacindelHEADa
disposicindelosusuariosatravsdeotrosmecanismos.
7.4.2ElelementoTITLE
<!ElelementoTITLEnoseconsiderapartedelflujodetexto.
Deberasermostrado,porejemplo,comoelencabezadodelapgina
ocomoelttulodelaventana.Serequiereexactamenteunttulo
pordocumento.
>
<!ELEMENTTITLE(#PCDATA)(%head.misc;)ttulodeldocumento>
<!ATTLISTTITLE%i18n>
Etiquetainicial:obligatoria,Etiquetafinal:obligatoria
TodoslosdocumentosHTMLdebentenerunelementoTITLEenlaseccinHEAD.
LosautoresdeberanutilizarelelementoTITLEparaidentificarloscontenidosdeundocumento.
Debidoaquelosusuariosamenudoconsultandocumentosfueradecontexto,losautoresdeberan
proporcionarttulosricosencontexto.As,envezdeusarunttulocomo"Introduccin",queno
proporcionamuchainformacinacercadelcontexto,losautoresdeberanponerensulugarun
ttulodelestilo"Introduccinalaapiculturamedieval".
Porrazonesdeaccesibilidad,losagentesdeusuariosiempredebenponerelcontenidodel
elementoTITLEadisposicindelosusuarios(incluyendoloselementosTITLEqueaparezcanen
marcos).Elmecanismoparaellodependedelagentedeusuario(p.ej.,comounttulo,hablado).
Losttulospuedencontenerentidadesdecaracteres(paracaracteresacentuados,caracteres
especiales,etc.),peronopuedencontenercdigo(incluyendocomentarios).Aqutenemosun
ejemplodettulodedocumento:
<HTML>
<HEAD>
<TITLE>Unestudiosobreladinmicadelapoblacin</TITLE>
...otroselementosdecabecera...
</HEAD>
<BODY>
...cuerpodeldocumento...
</BODY>
</HTML>
7.4.3Elatributotitle
4/16
25/3/2015
title=texto[CS]
Esteatributoofreceinformacinconsultivasobreelelementoparaelcualseestablece.
AdiferenciadelelementoTITLE,queproporcionainformacinsobreundocumentoenteroyqueslo
puedeaparecerunavez,elatributotitlepuedeanotarcualquiernmerodeelementos.Parasaber
siunelementosoportaesteatributoconsulteladefinicindelelemento.
Losvaloresdelatributotitlepuedenserrepresentadosporlosagentesdeusuariodediferentes
maneras.Porejemplo,losnavegadoresvisualessuelenrepresentarelttulocomoun"tooltip"(un
mensajecortoqueaparececuandoeldispositivoapuntadorsedetienesobreunobjeto).Los
agentesdeusuariodevozpuedenpronunciarlainformacindelttuloenuncontextosimilar.Por
ejemplo,alestablecerelatributoenunvnculo,losagentesdeusuario(visualesynovisuales)
puedendeciralosusuarioslanaturalezadelrecursovinculado:
...texto...
Aquhayunafotoma
<Ahref="http://algunsitio.com/cosascheveres.gif"title="Yohaciendosubmarinismo">
haciendosubmarinismoelveranopasado
</A>
...mstexto...
ElatributotitletieneunpapeladicionalcuandoseutilizaconelelementoLINKparadesignaruna
hojadeestiloexterna.Consultelaseccinsobrevnculosyhojasdeestiloparamsdetalles.
Nota.Paramejorarlacalidaddelasntesisdevozenloscasosenquelastcnicasestndar
logranmalosresultados,lasversionesfuturasdeHTMLpodranincluirunatributoparacodificar
informacinfonmicayprosdica.
7.4.4Metadatos
Nota.ElMarcodeDescripcindeRecursos(ResourceDescriptionFramework)delW3C(ver
[RDF10])seconvirtienRecomendacindelW3Cenfebrerode1999.ElRDFpermitealos
autoresespecificarmetadatoslegiblespormquinasobredocumentosHTMLyotrosrecursos
accesiblesporlared.
ElHTMLpermitealosautoresespecificarmetadatosinformacinsobreundocumentomsque
contenidodelpropiodocumentodediferentesdemaneras.
Porejemplo,paraespecificarelautordeundocumento,puedeutilizarseelelementoMETAcomo
sigue:
<METAname="Author"content="DaveRaggett">
ElelementoMETAespecificaunapropiedad(aqu"Author")yleasignaunvalor(aqu"Dave
Raggett").
Estaespecificacinnodefineunconjuntodepropiedadeslegalesdemetadatos.Elsignificadode
unapropiedadyelconjuntodevaloreslegalesparaesapropiedaddeberaestardefinidaenun
diccionariodereferenciallamadoperfil.Porejemplo,unperfildiseadoparaayudaralosmotores
debsquedaaindexardocumentospodradefinirpropiedadestalescomo"author","copyright",
"keywords",etc.
Especificacindemetadatos
Engeneral,laespecificacindemetadatosimplicadospasos:
1. Declaracindeunapropiedadydeunvalorparaestapropiedad.Estopuedehacersededos
maneras:
1. Desdedentrodeundocumento,pormediodelelementoMETA.
2. Desdefueradeundocumento,vinculandolosmetadatospormediodelelementoLINK
5/16
25/3/2015
(vaselaseccinsobretiposdevnculos).
2. Referenciaaunperfilenelquesedefinenlapropiedadysusvaloreslegales.Paradesignar
unperfil,seusaelatributoprofiledelelementoHEAD.
ObsrvesequealestardefinidounperfilporelelementoHEAD,seaplicaelmismoperfilatodoslos
elementosMETAyLINKdelacabeceradeldocumento.
Losagentesdeusuariononecesitansoportarlosmecanismosdemetadatos.Paraaquellosque
optenporsoportarmetadatos,estaespecificacinnodefinecmodeberaninterpretarselos
metadatos.
ElelementoMETA
<!ELEMENTMETAOEMPTYmetainformacingenrica>
<!ATTLISTMETA
%i18n;lang,dir,parausarconcontent
httpequivNAME#IMPLIEDnombredeencabezadoderespuestaHTTP
nameNAME#IMPLIEDnombredelametainformacin
contentCDATA#REQUIREDinformacinasociada
schemeCDATA#IMPLIEDseleccionarformadecontenido
>
Etiquetainicial:obligatoria,Etiquetafinal:prohibida
Paralossiguientesatributos,losvalorespermitidosysuinterpretacindependedelperfil:
name=name[CS]
Esteatributoidentificaunnombredepropiedad.Estaespecificacinnoenumeralosvalores
legalesparaesteatributo.
content=cdata[CS]
Esteatributoespecificaelvalordeunapropiedad.Estaespecificacinnoenumeralosvalores
legalesparaesteatributo.
scheme=cdata[CS]
Esteatributoespecificaunesquemaqueseusarparainterpretarelvalordelapropiedad
(vaselaseccinsobreperfilesparamsdetalles).
httpequiv=name[CI]
Esteatributopuedeutilizarseenlugardelatributoname.LosservidoresHTTPutilizaneste
atributoparaobtenerinformacinsobrelosencabezadosdelmensajederespuestaHTTP.
ElelementoMETApuedeutilizarseparaidentificarpropiedadesdeundocumento(p.ej.,elautor,la
fechadecaducidad,unalistadepalabrasclave,etc.)yparaasignarvaloresaesaspropiedades.
Estaespecificacinnodefineunconjuntonormativodepropiedades.
CadaelementoMETAespecificaunaparejapropiedad/valor.Elatributonameidentificalapropiedady
elatributocontentespecificaelvalordelapropiedad.
Porejemplo,lasiguientedeclaracinestableceunvalorparalapropiedadAuthor:
<METAname="Author"content="DaveRaggett">
PuedeutilizarseelatributolangdeMETAparaespecificarelidiomadelvalordelatributocontent.Esto
permitealossintetizadoresdevozaplicarreglasdepronunciacindependientesdelidioma.
Enesteejemplo,sedeclaraqueelnombredelautorestenfrancs:
6/16
25/3/2015
<METAname="Author"lang="fr"content="ArnaudLeHors">
Nota.ElelementoMETAesunmecanismogenricoparalaespecificacindemetadatos.Sin
embargo,hayalgunoselementosyatributosHTMLqueyamanejandeterminadosmetadatosy
quepuedenserutilizadosporlosautoresenlugardeMETAparaespecificardichosmetadatos:el
elementoTITLE,elelementoADDRESS,loselementosINSyDEL,elatributotitle,yelatributocite.
Nota.CuandounapropiedadespecificadamedianteunelementoMETAtomaunvalorqueesun
URI,algunosautoresprefierenespecificarlosmetadatosmedianteelelementoLINK.As,la
siguientedeclaracindemetadatos:
<METAname="DC.identifier"
content="http://www.ietf.org/rfc/rfc1866.txt">
tambinpodrahaberseescritoas:
<LINKrel="DC.identifier"
type="text/plain"
href="http://www.ietf.org/rfc/rfc1866.txt">
METAyencabezadosHTTP
Elatributohttpequivpuedeutilizarseenlugardelatributoname,locualtieneunsignificadoespecial
cuandolosdocumentosseobtienenmedianteelProtocolodeTransferenciadeHipertexto(HTTP).
LosservidoresHTTPpuedenusarelnombredelapropiedadespecificadaporelatributohttpequiv
paracrearunencabezadoalestilo[RFC822]enlarespuestaHTTP.VealaespecificacinHTTP
([RFC2616])paramsdetallessobreencabezadosHTTPvlidos.
LasiguientedeclaracinMETAdeejemplo:
<METAhttpequiv="Expires"content="Tue,20Aug199614:25:27GMT">
resultarenelencabezadoHTTP:
Expires:Tue,20Aug199614:25:27GMT
Estolopuedenutilizarlascachsparadeterminarcundoobtenerunanuevacopiadeldocumento
asociado.
Nota.AlgunosagentesdeusuariosoportanelusodeMETApararefrescarlapginaactual
despusdeunnmeroespecificadodesegundos,conlaopcindereemplazarlaconunURI
diferente.Losautoresnodeberanutilizarestatcnicaparadirigiralosusuariosapginas
diferentes,yaqueestohacelapginainaccesibleparaalgunosusuarios.Enlugardeeso,la
redireccinautomticadepginasdeberarealizarseusandoredireccinenelladodelservidor.
METAymotoresdebsqueda
UnusocomndeMETAesespecificarpalabrasclavequepuedenusarlosmotoresdebsqueda
paramejorarlacalidaddelosresultadosdeunabsqueda.Cuandoseproporcionenvarios
elementosMETAconinformacinparavariosidiomas,losmotoresdebsquedapuedenutilizarel
atributolangcomofiltroparamostrarlosresultadosdelabsquedausandolaspreferenciasde
idiomadelusuario.Porejemplo,
<!Parahablantesdeinglsamericano>
<METAname="keywords"lang="enus"
content="vacation,Greece,sunshine">
<!Parahablantesdeinglsbritnico>
<METAname="keywords"lang="en"
content="holiday,Greece,sunshine">
<!Parahablantesdeespaol>
7/16
25/3/2015
<METAname="keywords"lang="es"
content="vacaciones,Grecia,sol">
TambinpuedeincrementarselaefectividaddelosmotoresdebsquedausandoelelementoLINK
paraespecificarvnculosatraduccionesdeldocumentoenotrosidiomas,vnculosaversionesdel
documentoenotrosmedios(p.ej.,PDF),y,cuandoeldocumentoespartedeunacoleccin,
vnculosaunpuntoapropiadodepartidaparaexaminarlacoleccincompleta.
Sepuedeencontrarmsayudaenlaseccinsobrecmoayudaralosmotoresdebsquedaa
indexarsusitioWeb.
METAyPICS
LaPlataformaparalaSeleccindeContenidoenInternet(PICS,especificadaen[PICS])esuna
infraestructuraparaasociaretiquetas(metadatos)concontenidodeInternet.Diseada
originalmenteparaayudaralospadresyalasescuelasacontrolarloslugaresalosquepueden
accederlosniosenInternet,tambinfacilitaotrosusosparalasetiquetas,incluyendofirmasde
cdigo,privacidad,ygestindelosderechosdelapropiedadintelectual.
EsteejemploilustracmopuedeusarseunadeclaracinMETAparaincluirunaetiquetaPICS1.1:
<HEAD>
<METAhttpequiv="PICSLabel"content='
(PICS1.1"http://www.gcf.org/v2.5"
labelson"1994.11.05T08:150500"
until"1995.12.31T23:590000"
for"http://w3.org/PICS/Overview.html"
ratings(suds0.5density0color/hue1))
'>
<TITLE>...ttulodeldocumento...</TITLE>
</HEAD>
METAeinformacinpordefecto
ElelementoMETApuedeutilizarseparaespecificarlainformacinpordefectodeundocumentoen
losaspectossiguientes:
Ellenguajedescriptspordefecto.
Ellenguajedehojasdeestilopordefecto.
Lacodificacindecaracteresdeldocumento.
ElsiguienteejemploespecificaquelacodificacindecaracteresdeundocumentoeslaISO88595
<METAhttpequiv="ContentType"content="text/html;charset=ISO88595">
Perfilesdemetadatos
ElatributoprofiledeHEADespecificalalocalizacindeunperfildemetadatos.Elvalordelatributo
profileesunURI.LosagentesdeusuariopuedenutilizaresteURIdedosmaneras:
Comounnombrenicoanivelglobal.Losagentesdeusuariopuedensercapacesde
reconocerelnombre(sinnecesidaddeobtenerelperfil)yrealizaralgunaaccinsegnlas
convencionesconocidasrelativasaeseperfil.Porejemplo,losmotoresdebsquedapodran
proporcionarunainterfazparabsquedaencatlogosdedocumentosHTML,demodoque
todoslosdocumentospodranusarelmismoperfilpararepresentarentradasdeuncatlogo.
Comounvnculo.LosagentesdeusuariopuedenseguirelURIyrealizaralgunaaccin
segnlasdefinicionescontenidasenelperfil(p.ej.,autorizarelusodelperfildentrodel
documentoHTMLactual).Estaespecificacinnodefineformatosdeperfiles.
8/16
25/3/2015
Esteejemplohacereferenciaaunperfilhipotticoquedefinepropiedadestilesparaindexar
documentos.Alaspropiedadesdefinidasenesteperfilincluyendo"author","copyright",
"keywords"(palabrasclave)y"date"(fecha)selesasignanvaloresmediantedeclaracionesMETA
subsiguientes.
<HEADprofile="http://www.acme.com/profiles/core">
<TITLE>CmocompletarportadasdeMemoranda</TITLE>
<METAname="author"content="JosPrez">
<METAname="copyright"content="©1997AcmeCorp.">
<METAname="keywords"content="empresarial,instrucciones,catlogos">
<METAname="date"content="19941106T08:49:37+00:00">
</HEAD>
Enelmomentodeescribirestaespecificacin,laprcticacomnesusarlosformatosdefechas
descritosen[RFC2616],seccin3.3.Comoestosformatossonrelativamentecomplicadosde
procesar,recomendamosquelosautoresutilicenelformatodefechas[ISO8601].Params
informacin,vanselasseccionessobreloselementosINSyDEL.
Elatributoschemepermitealosautoresproporcionaralosagentesdeusuariomscontextoparala
interpretacincorrectadelosmetadatos.Aveces,estainformacinadicionalpuedesercrtica,por
ejemplocuandolosmetadatospuedenserespecificadossegnformatosdiferentes.Porejemplo,
unautorpodraespecificarunafechaenelformato(ambiguo)"10997"significaesto9de
octubrede1997o10deseptiembrede1997?Elvalor"MesDaAo"paraelatributoscheme
eliminaralaambigedaddeestevalordefecha.
Enotrasocasiones,elatributoschemepuedeproporcionarinformacintilaunquenocrticaalos
agentesdeusuario.
Porejemplo,lasiguientedeclaracinschemepodraayudaraunagentedeusuarioadeterminarque
elvalordelapropiedad"identificador"esunnmerodecdigoISBN:
<METAscheme="ISBN"name="identificador"content="0823023559">
Losvaloresdelatributoschemedependendelapropiedadnameydelprofileasociado.
Nota.UnejemplodeperfileselDublinCore(ver[DCORE]).Esteperfildefineunconjuntode
propiedadesrecomendadasparadescripcionesbibliogrficaselectrnicas,ysuobjetivoes
promoverlainteroperabilidadentremodelosdescriptivosdispares.
7.5Elcuerpodeldocumento
7.5.1ElelementoBODY
<!ELEMENTBODYOO(%block;|SCRIPT)++(INS|DEL)cuerpodeldocumento>
<!ATTLISTBODY
%attrs;%coreattrs,%i18n,%events
onload%Script;#IMPLIEDeldocumentohasidocargado
onunload%Script;#IMPLIEDeldocumentohasidoquitado
>
background=uri[CT]
Desaprobado.ElvalordeesteatributoesunURIquedesignaunrecursodeimagen.En
generallaimagenserepitepararellenarelfondo(ennavegadoresvisuales).
text=color[CI]
Desaprobado.Esteatributoestableceelcolordeprimerplanoparaeltexto(ennavegadores
visuales).
link=color[CI]
9/16
25/3/2015
Desaprobado.Esteatributoestableceelcolordeltextoquemarcalosvnculosdehipertexto
novisitados(ennavegadoresvisuales)
vlink=color[CI]
Desaprobado.Esteatributoespecificaelcolordeltextoquemarcalosvnculosdehipertexto
visitados(ennavegadoresvisuales).
alink=color[CI]
Desaprobado.Esteatributoespecificaelcolordeltextoquemarcalosvnculosdehipertexto
cuandosonseleccionadosporelusuario(ennavegadoresvisuales).
id,class(identificadoresaniveldedocumento)
title(ttulodelelemento)
style(informacindeestiloenlnea)
bgcolor(colordelfondo)
onload,onunload(eventosintrnsecos)
onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,
onkeydown,onkeyup(eventosintrnsecos)
Elcuerpodeundocumentocontieneelcontenidodeldocumento.Elcontenidopuedeser
presentadoporunagentedeusuariodedistintasmaneras.Porejemplo,paralosnavegadores
visuales,sepuedeimaginarelcuerpocomounlienzosobreelqueapareceelcontenido:texto,
imgenes,colores,grficos,etc.Paraagentesdeusuarioporvoz,elmismocontenidopodraser
pronunciado.Debidoaqueahoraelmtodopreferidodeespecificarlapresentacindeun
documentosonlashojasdeestilo,losatributospresentacionalesdelelementoBODYhansido
desaprobados.
EJEMPLODESAPROBADO:
ElsiguientefragmentoHTMLilustraelusodelosatributosdesaprobados.Estableceelcolorde
fondodellienzoenblanco,elcolordeprimerplanodeltextoennegro,yelcolordelos
hipervnculosenrojoinicialmente,fucsiacuandosonactivadosymarrnunavezquehansido
visitados.
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
</HEAD>
<BODYbgcolor="white"text="black"
link="red"alink="fuchsia"vlink="maroon">
</BODY>
</HTML>
Usandohojasdeestilo,sepodraconseguirelmismoefectodelasiguientemanera:
<HTML>
<HEAD>
<STYLEtype="text/css">
BODY{background:white;color:black}
A:link{color:red}
A:visited{color:maroon}
A:active{color:fuchsia}
</STYLE>
</HEAD>
<BODY>
10/16
25/3/2015
</BODY>
</HTML>
Elusarhojasdeestiloexternas(vinculadas)nosdaflexibilidadparacambiarlapresentacinsin
tenerquerevisareldocumentofuenteHTML:
<HTML>
<HEAD>
<LINKrel="stylesheet"type="text/css"href="estilolisto.css">
</HEAD>
<BODY>
</BODY>
</HTML>
MarcosycuerposHTML.LosdocumentosquecontienenmarcosreemplazanelelementoBODY
conelelementoFRAMESET.Consultelaseccinsobremarcosparamsinformacin.
7.5.2Identificadoresdeelementos:loselementosidyclass
id=name[CS]
Esteatributoasignaunnombreaunelemento.Estenombredebesernicoenundocumento.
class=listadecdata[CS]
Esteatributoasignaunnombredeclaseounconjuntodenombresdeclaseaunelemento.
Sepuedeasignarelmismonombreonombresdeclaseacualquiernmerodeelementos.
Losnombresdeclasemltiplesdebenestarseparadosporcaracteresdeespacioenblanco.
Elatributoidasignaunidentificadornicoaunelemento(locualpuedeserverificadoporun
analizadorSGML).Porejemplo,lossiguientesprrafossedistinguenporsusvaloresdeid:
<Pid="miparrafo">Estoesunprrafoconunnombrenico.</P>
<Pid="tuparrafo">Estotambinesunprrafoconunnombrenico.</P>
ElatributoidtienevariospapelesenHTML:
Comoselectorparalashojasdeestilo.
Comovnculodestinoparavnculosdehipertexto.
Comomediodehacerreferenciaaunelementoenparticulardesdeunscript.
ComonombredeunelementoOBJECTdeclarado.
Paraprocesosgeneralesporpartedeagentesdeusuario(p.ej.,paraidentificarcampos
cuandosetransfierendatosdesdepginasHTMLhastaunabasededatos,paratraducir
documentosHTMLaotrosformatos,etc.).
Elatributoclass,porotraparte,asignaunoomsnombresdeclaseaunelementosepuededecir
queelelementoperteneceaestasclases.Varioselementospuedencompartirelmismonombrede
clase.ElatributoclasstienevariospapelesenHTML:
Comoselectorparahojasdeestilo(cuandounautordeseaasignarinformacindeestiloaun
conjuntodeelementos).
Paraprocesosgeneralesporpartedeagentesdeusuario.
Enelsiguienteejemplo,elelementoSPANseutilizajuntoconlosatributosidyclassparacodificar
mensajesinformativos.Losmensajesaparecentantoeninglscomoenespaol.
<!Mensajeseningls>
<P><SPANid="msg1"class="info"lang="en">Variabledeclaredtwice</SPAN>
11/16
25/3/2015
<P><SPANid="msg2"class="advertencia"lang="en">Undeclaredvariable</SPAN>
<P><SPANid="msg3"class="error"lang="en">Badsyntaxforvariablename</SPAN>
<!Mensajesenespaol>
<P><SPANid="msg1"class="info"lang="es">Variabledeclaradadosveces</SPAN>
<P><SPANid="msg2"class="advertencia"lang="es">Variablenodeclarada</SPAN>
<P><SPANid="msg3"class="error"lang="es">Sintaxisincorrectaparaelnombre
delavariable</SPAN>
LassiguientesreglasdeestiloCSSdiranalosagentesdeusuariovisualesquerepresentaranlos
mensajesinformativosenverde,losmensajesdeadvertenciaenamarillo,ylosmensajesdeerror
enrojo:
SPAN.info{color:green}
SPAN.advertencia{color:yellow}
SPAN.error{color:red}
Obsrvesequeel"msg1"espaolyel"msg1"inglsnopuedenaparecerenelmismodocumento,
yaqueamboscompartenelmismovalordeid.Losautorespuedenhacerunusomayordelatributo
idpararefinarlapresentacindemensajesindividuales,hacerlosvnculosdestino,etc.
SelespuedeasignarinformacindeidentificadoryclaseacasitodosloselementosHTML.
Supongamos,porejemplo,queestamosescribiendoundocumentosobreunlenguajede
programacin.Eldocumentodebeincluirunnmerodeejemplospreformateados.Usamosel
elementoPREparaformatearlosejemplos.Tambinasignamosuncolordefondo(verde)atodos
losejemplaresdelelementoPREquepertenezcanalaclase"ejemplo".
<HEAD>
PRE.ejemplo{background:green}
</STYLE>
</HEAD>
<BODY>
<PREclass="ejemplo"id="ejemplo1">
...cdigodelejemplo...
</PRE>
</BODY>
Alestablecerelatributoidparaesteejemplo,podemos(1)crearunhipervnculoaly(2)sustituir
lainformacindeestilodelaclaseporinformacindeestilopropia.
Nota.Elatributoidcomparteelmismoespaciodenombresqueelatributonamecuandoseusa
paranombresdevnculos.Consultelaseccinsobrevnculosconidparamsinformacin.
7.5.3Elementosenbloqueyelementosenlnea
AlgunosdeloselementosHTMLquepuedenaparecerenBODYsellamanelementos"enbloque"(o
tambin"aniveldebloque")mientrasqueotrossonelementos"enlnea"(o"aniveldetexto").Esta
distincinsebasaenvariosaspectos:
Modelodecontenido
Generalmente,loselementosenbloquepuedencontenerelementosenlneayaotros
elementosenbloque.Generalmente,loselementosenlneaslopuedencontenerdatosya
otroselementosenlnea.Inherentementeaestadistincinestructuralestlaideadequelos
elementosenbloquecreanestructuras"msgrandes"queloselementosenlnea.
Formato
Loselementosenbloquetienenpordefectounformatodiferentequeeldeloselementosen
lnea.Generalmente,loselementosenbloquecomienzanenunanuevalnea,yloselementos
enlneano.Parainformacinsobreespacioenblanco,saltosdelnea,yformatodebloques,
consultelaseccinsobretexto.
12/16
25/3/2015
Direccionalidad
Porrazonestcnicasrelacionadasconelalgoritmodetextobidireccionalde[UNICODE],los
elementosenbloqueyenlneadifierenenelmododeheredarlainformacinde
direccionalidad.Paramsdetalles,vealaseccinsobreherenciadeladireccindeltexto.
Lashojasdeestiloproporcionanmediosparaespecificarlarepresentacindeelementos
arbitrarios,incluyendolarepresentacincomoelementoenbloqueoenlnea.Enalgunoscasos,
comoporejemploparainformacinenlneaparaobjetosdelista,estopuedeserapropiado,pero
engeneralnoesaconsejablequelosautoresinvalidenlainterpretacinconvencionaldelos
elementosHTMLdeestemodo.
Laalteracindelestilodepresentacintradicionaldeloselementosenbloqueyenlneatambin
influyeenelalgoritmodetextobidireccional.Vealaseccinsobreelefectodelashojasdeestiloen
labidireccionalidadparamsinformacin.
7.5.4Agrupacindeelementos:loselementosDIVySPAN
<!ELEMENTDIV(%flow;)*contenedorgenricodeidioma/estilo>
<!ATTLISTDIV
>
<!ELEMENTSPAN(%inline;)*contenedorgenricodeidioma/estilo>
<!ATTLISTSPAN
>
align(alineacin)
LoselementosDIVySPAN,juntoconlosatributosidyclass,ofrecenunmecanismogenricopara
aadirestructuraalosdocumentos.Estoselementosespecificansisucontenidoesenlnea(SPAN)
oenbloque(DIV)peronoimponenningnotroestilodepresentacinalcontenido.As,losautores
puedenusarestoselementosjuntoconhojasdeestilo,elatributolang,etc.,paraadaptarelHTML
asuspropiosgustosynecesidades.
Supongamos,porejemplo,quequisiramosgenerarundocumentoHTMLbasadoenunabasede
datosdeinformacinsobreclientes.ComoHTMLnoincluyeelementosqueidentifiquenobjetos
talescomo"cliente","nmerodetelfono","direccindecorreoelectrnico",etc.,utilizamosDIVy
SPANparalograrlosefectosestructuralesypresentacionalesdeseados.Podramosusarelelemento
TABLEdelmodosiguienteparaestructurarlainformacin:
<!Ejemploderegistrodelabasededatosdeclientes:>
<!Nombre:StephaneBoyera,Tel:(212)5551212,Email:sb@foo.org>
<DIVid="clienteboyera"class="cliente">
<P><SPANclass="clientetitulo">Informacinsobreelcliente:</SPAN>
<TABLEclass="clientedatos">
<TR><TH>Apellido:<TD>Boyera</TR>
<TR><TH>Nombre:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212)5551212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>
13/16
25/3/2015
<DIVid="clientelafon"class="cliente">
<P><SPANclass="clientetitulo">Informacinsobreelcliente:</SPAN>
<TABLEclass="clientedatos">
<TR><TH>Apellido:<TD>Lafon</TR>
<TR><TH>Nombre:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617)5551212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>
Acontinuacin,podemosaadirfcilmentedeclaracionesalahojadeestiloparaajustarla
presentacindeestasentradasdelabasededatos.
Paraotroejemplodeuso,consulteelejemplodelaseccinsobrelosatributosclasseid.
Engenerallosagentesdeusuariovisualescolocanunsaltodelneaantesyotrodespusdelos
elementosDIV,porejemplo:
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
quenormalmenteserepresentacomo:
aaaaaaaaa
bbbbbbbbb
ccccc
ccccc
7.5.5Encabezados:loselementosH1,H2,H3,H4,H5,H6
<!ENTITY%heading"H1|H2|H3|H4|H5|H6">
<!
Hayseisnivelesdeencabezados,desdeH1(elmsimportante)
hastaH6(elmenosimportante).
>
<!ELEMENT(%heading;)(%inline;)*encabezado>
<!ATTLIST(%heading;)
>
align(alineacin)
Unencabezadodescribebrevementeeltemadelaseccinqueintroduce.Lainformacinde
encabezadopuedeserutilizadaporlosagentesdeusuario,porejemplo,paraconstruirunatabla
decontenidosdeundocumentoautomticamente.
HayseisnivelesdeencabezadosenHTML,siendoH1elmsimportanteyH6elmenosimportante.
Losnavegadoresvisualespuedenrepresentarlosencabezadosmsimportantesconfuentesms
grandesquelosmenosimportantes.
ElsiguienteejemplomuestracmousarelelementoDIVparaasociarunencabezadoconlaseccin
14/16
25/3/2015
deldocumentoquelesigue.Estonospermitedefinirunestiloparalaseccin(colordelfondo,
fuentedeltexto,etc.)conhojasdeestilo.
<DIVclass="seccion"id="elefantesdelaselva">
<H1>Elefantesdelaselva</H1>
<P>Enestaseccindescubriremosaesosgrandesdesconocidos:
loselefantesdelaselva.
...laseccincontina...
<DIVclass="subseccion"id="habitatdelajungla">
<H2>Hbitat</H2>
<P>Loselefantesdelaselvanovivenenlosrboles,sinoentreellos.
...lasubseccincontina...
</DIV>
</DIV>
Podemosdecorarestaestructuraconinformacindeestilotalcomosta:
<HEAD>
DIV.seccion{textalign:justify;fontsize:12pt}
DIV.subseccion{textindent:2em}
H1{fontstyle:italic;color:green}
H2{color:green}
</STYLE>
</HEAD>
Seccionesnumeradasyreferencias
HTMLnogeneraporsmismonmerosdeseccinapartirdelosencabezados.Sinembargo
estopodraserofrecidoporlosagentesdeusuario.Prontoloslenguajesdehojasdeestilocomo
CSSpermitirnalosautorescontrolarlageneracindenmerosdeseccin(muytilespara
hacerreferenciasdedocumentosimpresos,comoen"Verlaseccin7.2").
Algunaspersonasconsideranquesaltarsenivelesdeencabezadoesmalaprctica.AceptanH1
H2H1peronoaceptanH1H3H1yaquesesaltaelniveldeencabezadoH2.
7.5.6ElelementoADDRESS
<!ELEMENTADDRESS(%inline;)*informacinsobreelautor>
<!ATTLISTADDRESS
>
ElelementoADDRESSpuedeserutilizadoporlosautoresparaproporcionarinformacindecontacto
enundocumentooenunapartedeundocumento,comoporejemplounformulario.Esteelemento
sueleaparecerelprincipiodeundocumento.
Porejemplo,unapginadelsitiowebdelW3CrelacionadaconHTMLpodraincluirlasiguiente
informacindecontacto:
<ADDRESS>
<Ahref="../People/Raggett/">DaveRaggett</A>,
15/16
25/3/2015
<Ahref="../People/Arnaud/">ArnaudLeHors</A>,
personasdecontactodel<Ahref="Activity">W3CHTMLActivity</A><BR>
$Fecha:1999/12/2423:07:14$
</ADDRESS>
anteriorsiguientecontenidoselementosatributosndice
16/16

La Estructura Global de Un Documento HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

La Estructura Global de Un Documento HTML

Transféré par

Droits d'auteur :

Formats disponibles

25/3/2015

Vous aimerez peut-être aussi