Cap 02 Resumen HTML

PRIMEROS CONCEPTOS
Estructura de un documento HTML

Las partes principales en que se dividen un documento HTML vienen a ser las siguientes:
<! Declaracin de tipo de documento>
< HTML atributos> <HEAD atributos > <T TLE> T!tulo de la p"gina <# T TLE > $ontenido de la cabecera <# HEAD >
<%&D' atributos > $ontenido del documento <# %&D' > <# HTML >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti na!//E"" "#tt$%//&&&.&3. r'/T(/#t)!4/! s*.+t+", <#t)!, <#*a+ , <tit!*,Pri)*r *-*)$! </tit!*, </#*a+, <. +/, <#1, Mi $ri)*r + 01)*nt HTML</#1, C1rs Pr 'ra)a+ r +* 2$!i0a0i n*s WEB </. +/, </#t)!,
$apitulo ( ) Elementos b"sicos
*esumen HTML +
Declaracin de tipo de documento

E,isten varias versiones de HTML -. adem"s. en el caso de HTML /01+. que es la 2ltima versin. 3a- disponibles tres de4iniciones de tipo de documento di4erentes: una estricta. otra de transicin - una tercera para el uso de marcos0 $uando se escribe un documento HTML 3a- que incluir al inicio. como primera marca. la declaracin de tipo de documento. indicando a qu5 DTD se a6usta0 As! los agentes de usuario. sabr"n interpretar adecuadamente el cdigo - establecer el 4ormato de salida0
La especi4icacin de HTML /01+ promueve la estricta separacin entre contenido - 4ormato0 El contenido - su estructura se encontrar!an separados de la in4ormacin de 4ormato. almacen"ndose esta en 3o6as de estilo en cascada 7$88. $ascade 8t-le 83eets90 8i 3emos codi4icado nuestro documento ateni5ndonos a esta recomendacin. no inclu-endo en los elementos HTML atributos que 3aga re4erencia a colores. tipos de letra. dimensiones. etc0. entonces podremos utili:ar la siguiente declaracin de tipo de documento: <!D&$T';E HTML ;<%L $ =>##?@$##DTD =3ttp:##BBB0B@0org#T*#3tml/#strict0dtd=> HTML /01+##EA=
$on esta declaracin. tericamente el agente de usuario recuperar!a la DTD indicada - comprobar!a que el documento se a6usta a ella. generando un error en caso de que se utili:asen atributos de 4ormato en los elementos HTML o cualquier otro elemento que 3a-a sido designado como obsoleto0 En la pr"ctica. sin embargo. los navegadores actuales no atienden a la DTD - siguen permitiendo el uso de estos atributos - elementos a pesar de que el documento indique que se a6usta estrictamente al est"ndar0 Es una situacin que debe cambiar en el 4uturo. a medida que esas aplicaciones va-an actuali:"ndose. un 4uturo para el que debemos preparar nuestros documentos0
Durante muc3os aCos la combinacin de contenido e in4ormacin de 4ormato 3a sido la tnica en el diseCo de documentos HTML. de a3! que en la versin /01+ esta posibilidad siga teni5ndose en consideracin e,ista una DTD. denominada de transicin. que es un s2per con6unto de la DTD estricta0 Esto signi4ica que se 3a tomado como base esta 2ltima. se 3an aCadido los atributos de 4ormato - los elementos obsoletos - se 3a conseguido una nueva DTD a la que corresponde la siguiente declaracin: <!D&$T';E HTML ;<%L $ =>##?@$##DTD HTML Transitional##EA= =3ttp:##BBB0B@0org#T*#3tml/#loose0dtd=> $apitulo ( ) Elementos b"sicos /01+
*esumen HTML (
Ai la DTD estricta ni la de transicin de HTML /01+ cuenta con los elementos relativos al diseCo de documentos con marcos0 En caso de que nuestra p"gina va-a a usar este recurso visual. tendremos que 3acer re4erencia a una tercera DTD llamada Drameset - que es una versin modi4icada de la de transicin. a la que aCade el elemento D*AME8ET en sustitucin de %&D'0 La declaracin para usar esta DTD ser!a la mostrada a continuacin0 <!D&$T';E HTML ;<%L $ =>##?@$##DTD HTML Drameset##EA= =3ttp:##BBB0B@0org#T*#3tml/#4rameset0dtd=> /01+
Atributos del elemento HTML

;r"cticamente todos los elementos del lengua6e HTML aceptan uno o m"s atributos. si bien su aparicin casi siempre es opcional0 *ecuerde que los atributos siempre se introducen en la etiqueta de apertura del elemento. siguiendo la sinta,is atributoEvalor0 El elemento HTML no es una e,cepcin - puede contar con los siguientes atributos: lang: 8e utili:a para 4acilitar el cdigo del idioma por de4ecto del contenido del documento0 dir: 8irve para indicar el sentido. de i:quierda a derec3a o de derec3a a i:quierda. que deben seguir los elementos de las tablas - los te,tos que no tengan una direccionalidad impl!cita0 version: Este atributo es v"lido 2nicamente con la DTD de transicin. puesto que su 4uncin 3a sido superada por la declaracin de tipo de documento0 El contenido de un documento suele estar al completo en un determinado idioma. si bien es posible tener p"rra4os o secciones de te,to en idiomas distintos0 El atributo lang del elemento HTML indicar!a el idioma por de4ecto. el que se asumir" para todo el te,to en que no se indique otro idioma di4erente0 En el caso de nuestros documentos podr!amos utili:arlo as!: <HTML langE=es=> De esta 4orma comunicar!amos al agente de usuario que el contenido del documento est" en castellano. permiti5ndose a6ustar su proceso para que el resultado sea lo me6or posible0 ;or norma. los valores asignados a los atributos deben delimitarse usando comillas dobles0 Es cierto que los agentes de usuario actuales suelen ser permisibles en este aspecto. aceptando que los valores no est5n delimitados de 4orma alguna. pero no puede garanti:arse que este comportamiento se mantenga en el 4uturo0 A6ust"ndonos a la especi4icacin. por el contrario. estaremos seguros de conseguir siempre un resultado apropiado0
*esumen HTML @
E,isten una serie de cdigos de idioma de los cuales los m"s importantes son los enumerados a continuacin0 Tambi5n 3a- cdigos de idioma compuestos. del tipo es>E8 o en><8. que adem"s de indicar el idioma tambi5n especi4ican una variante: ingl5s de <8A. castellano de EspaCa. etc0 Cdigo be Idioma %ielorruso %2lgaro $atal"n $3eco Dan5s Alem"n Friego ngl5s $astellano Gasco Dranc5s
Fallego
Familia Eslavos Eslavos *omances Eslavos Ferm"nicos Ferm"nicos Latinos#Friegos Ferm"nicos *omances Gasco *omances *omances 8em!ticos Eslavos *omances Asi"ticos Latinos#Friegos Ferm"nicos Ferm"nicos Eslavos *omances *omances Eslavos Eslavos Eslavos Eslavos Ferm"nicos Asi"ticos
bg
ca cs da de el en
es
eu
4r gl 3e
3r it 6a la nl
no pl pt
Hebreo $roata taliano Hapon5s Lat!n Aeerland5s Aoruego ;olaco ;ortugu5s *umano *uso Eslovaco Esloveno 8erbio 8ueco $3ino
ro ru sI
si
sr sv :3
*esumen HTML /
En cuanto al atributo dir. esta !ntimamente ligado al anterior - se utili:a para establecer la direccin por de4ecto del te,to neutro. aqu5l cu-a naturale:a no lleva impl!cito el sentido en el que debe 4luir0 Los valores que puede tomar este atributo son dos: ltr - rtl. asumi5ndose por de4ecto el primero. ltr 7le4t>to>rig3t9 indica que el te,to debe 4luir en el sentido en el que lo 3ace en idiomas como el nuestro. de i:quierda a derec3a. mientras que rtl 7rig3t>to>le4t9 indicar!a el sentido contrario0 A menos que tenga que escribir documentos en idiomas en los que el sentido de la escritura va de derec3a a i:quierda. como ocurre con algu> nos a4ricanos - asi"ticos. puede obviar por completo el atributo dir0 El atributo versin. seg2n se 3a indicado antes. no deber!amos utili:arlo porque la in4ormacin de versin del documento -a la 4acilitamos con la declaracin de tipo de documento ! D&$T';E0 En la DTD de HTML /01+ de transicin. que es la que permite el uso de este atributo. aparece de4inido as!: versin $DATA Transitional##EA= JD KED =>##?@$##DTD HTML /01+
La aparicin de JD KED indica que el valor de este atributo es 4i6o. concretamente el que aparece entrecomillado a continuacin0 De utili:arlo. por tanto. prescindir!amos de la declaracin de tipo de documento -. en su lugar. codi4icar!amos el elemento HTML como sigue: <HTML langE=es= Transitional##EA=> versionE=>##?@$##DTD HTML /01+
Empleando los agentes de usuario actuales no 3abr!a di4erencia alguna en el documento tras su proceso. pero con vistas a que nuestras p"ginas est5n preparadas para el 4uturo es pre4erible olvidarse del atributo versin0 Los atributos lang - dir. conocidos gen5ricamente como atribu> tos de internacionali:acin. est"n disponibles pr"cticamente para todos los elementos de HTML. pudiendo aparecer. por e6emplo. en la etiqueta de apertura de HEAD. %&D'. D G. ;. etc0 De esta 4orma es posible introducir te,tos en di4erentes idiomas en el mismo documento indic"ndolo e,pl!citamente. si bien en la pr"ctica nada nos impide escribir en ingl5s o en 4ranc5s en un documento en castellano. a pesar de no indicarlo con el atributo lang. porque los agentes de usuario no van a anali:ar el te,to en s!0 $onocer el idioma. sin embargo. puede me6orar su elaboracin. especialmente en casos como los sinteti:adores de vo: que pueden adaptar la pronunciacin al idioma adecuado0
*esumen HTML L
Contenido del elemento HEAD

La seccin de cabecera de la p"gina. identi4icada por el elemento HEAD. sirve para contener el t!tulo global de la p"gina0 Msta. sin em> bargo. no es su 2nica aplicacin. porque adem"s tambi5n puede contener los elementos %A8E. 8$* ;T. 8T'LE. META. L AN - &%HE$T. si bien ninguno de ellos es obligatorio mientras que T TLE s! debe aparecer0 A e,cepcin de %A8E - T TLE. todos los dem"s elementos pueden repetirse0 El contenido del elemento HEAD es e,aminado por los agentes de usuario antes de proceder al proceso del elemento %&D'. es decir. del cuerpo del documento0 La in4ormacin de la cabecera de p"gina es in4ormacin global. que a4ecta a todo el documento. - por ello se introduce de una manera independiente - anticipada al cuerpo0 8u naturale:a va asociada a los elementos citados - el contenido ser!a el siguiente: O%A8E: Aporta la direccin base del documento. aquella que debe emplearse como ra!: para componer la direccin completa cuando se encuentre en el cuerpo un <*L relativo0 Esa direccin debe asignarse al atributo 3re4 0 O8$* ;T: Dacilita la introduccin de guiones en la cabecera del documento. de tal 4orma que est5n preparados para e6ecutarse incluso antes de iniciar el proceso del cuerpo0
O8T'LE: ;ermite embeber en el propio documento HTML una 3o6a de esti> los0
OL NN: 8e utili:a para enla:ar ob6etos e,ternos. usualmente 3o6as de estilos alo6adas en un arc3ivo independiente0 O&%HE$T: De uso menos 3abitual en la cabecera. sirve para insertar en el documento ob6etos de distinta naturale:a0
O META: Es un elemento que sirve para introducir in4ormacin diversa que a4ecta a todo el documento. como puede ser el nombre del autor que lo 3a escrito. el de la 3erramienta que se utili: para su diseCo. etc0 Los atributos de uso m"s 3abitual de este elemento son name content. con los que se indica el nombre del dato - su contenido0
<HEAD> <T TLE> ;rimer e6emplo <# T TLE > <%A8E 3re4E =3ttp:##ciden0es#manuales#HTML#=> <META nameE=Autor= contentE= Beb+P=> <#HEAD>
*esumen HTML P
La direccin base indicada como re4erencia en el elemento %A8E. Q3ttp:##ciden0es#manuales#HTML#R . supuestamente es donde reside el documento - el punto de partida para encontrar otros ob6etos. como im"genes. 3o6as de estilo. guiones. etc0 Los elementos %A8E - META. no tienen etiqueta de cierre. siendo opcional en HTML /01+0 &tra manera de escribir el cdigo del e6emplo anterior ser!a la siguiente : <HEAD> <T TLE> ;rimer e6emplo <# T TLE > <%A8E 3re4E =3ttp:##ciden0es#manuales#HTML#=> <#%A8E> <META nameE=Autor= contentE= Beb+P=> <#META> <#HEAD>
Contenido del elemento BODY

Este elemento contendr" todo el cuerpo del documento0 El numero de elementos - la lista de atributos que pueden contener. es mu- e,tensa0
HTML y los espacios en blanco

<n agente de usuario HTML. como lo es un navegador. debe interpretar la in4ormacin de acorde a la especi4icacin del lengua6e. - en 5ste se indica e,pl!citamente que los espacios en blanco. entre los que se cuentan los espacios propiamente dic3os pero tambi5n los tabuladores retornos de carro. indican 2nicamente la separacin entre dos palabras consecutivas0 Es decir. en HTML los espacios sirven para separar las palabras unas de otras. pero no para incluir espacios en si mismos0
Los espacios redundantes son normalmente reducidos a un 2nico espacio0 ;uede comprobarse al insertar varios espacios en blanco entre dos palabras0 Ao 3a- di4erencia alguna. - es que para el agente de usuario los espacios en blanco adicionales no tienen ning2n signi4icado0
*esumen HTML S
Tue los agentes de usuario ignoren los espacios en blanco adicio> nales. o los retornos de carro - tabuladores. no signi4ica que no podamos emplearlos a la 3ora de crear nuestros documentos para conseguir que su estructura sea lo m"s clara posible0 ;ara insertar un espacio en blanco all! donde nos interese. - evitar que el anali:ador del agente de usuario lo elimine por ser redundante. usaremos la entidad nbsp0 UnbspV utili:amos una re4erencia a una entidad con nombre0 Aormalmente para introducir una entidad dentro de un documento. esta deber" limitarse entre los caracteres
& - ; que indican su inicio - 4in0
;odemos modi4icar la primera l!nea de nuestro documento para incluir dos espacios delante de la primera palabra
UnbspVUnbspVMi primer documento HTML
Saltos de lnea
En ocasiones puede ser conveniente introducir un punto - aparte cuando estamos escribiendo un te,to0 En HTML para 3acer esto puede usarse la etiqueta <br>0 $uando el navegador se encuentra con esta etiqueta provoca un salto de l!nea - sigue mostrando el contenido de la p"gina0
Los encabe ados

<sualmente un documento tiene. adem"s de te,to llano. una serie de encabe:ados o titulares0 ;ara ello el lengua6e HTML posee una serie de etiquetas que permiten disponer de titulares de 3asta P niveles de importancia0 Estas etiquetas son: <3+>. <3(>. <3@>. <3/>. <3L> - <HP>0 La letra =3= al principio del nombre de estas etiquetas proviene de la abreviatura de la palabra inglesa 3eading que signi4ica encabe:ado0 8iguiendo a la 3ac3e 3a- un n2mero del uno al seis que indica la importancia del titular siendo el m"s importante el uno - el menos importante el seis0 Los encabe:ados empie:an siempre en una l!nea nueva - el te,to que les sigue comen:ar" en la l!nea siguiente0 Todos los titulares est"n en negrita - el tamaCo de la 4uente usada para cada encabe:ado va decreciendo con4orme decrece la importancia del titular0
*esumen HTML W
Ha- que destacar que los encabe:ados de 3+ a 3/ pueden ser usados como t!tulos -a que los navegadores suelen usar un tamaCo de letra ma-or que el 3abitual para mostrarlos0 8in embargo los encabe:ados 3L - 3P suelen ser mostrados con letra m"s pequeCa a2n que el te,to - por esta ra:n se usan como notas a pie de p"gina o comentarios de poca importancia0
Cdigo fuente ejemplo encabezados
Resultado ejemplo encabezados
*esumen HTML X
Atributos del elemento BODY

Los atributos lang - dir son los mismos e,plicados para el elemento HTML0 ;or regla general. si aparecen en este 2ltimo elemento no apare> cer"n en el elemento %&D' o viceversa. -a que ser!a redundante especi4icar por duplicado el idioma - el sentido en el que debe 4luir el te,to0 El con6unto de atributos generales. pueden utili:arse pr"cticamente con todos los elementos que 4orman parte del cuerpo del documento0 8on los siguientes: id: 8e utili:a para asignar un nombre o identi4icador 2nico a cada elemento del documento. de tal manera que pueda 3acerse re4erencia a ellos por este nombre0 8u utilidad va asociada al uso de 3o6as de estilo0 class: $ada elemento del cuerpo de un documento puede pertenecer a una o m"s clases0 Es tambi5n un aspecto relacionado con las 3o6as de estilo0 st-le: Este atributo permite asociar datos de estilo a cada elemento en particular0 title: Mediante este atributo se asocia a cada elemento un te,to descriptivo o de comentario0 Los navegadores suelen mostrarlo en una pequeCa ventana emergente en el momento en que el puntero del ratn se sit2a sobre el elemento0 8alvo el atributo st-le. que podemos utili:ar para asociar in4ormacin de estilo al cuerpo del documento. los dem"s atributos no son especialmente 2tiles con el elemento %&D'. pero s! con otros muc3os que conoceremos m"s adelante como D G . 8;AA. TA%LE. etc0
Atributos de encabe ados

Los elementos H+ a HP. aceptan todos los atributos gen5ricos enumerados anteriormente para el elemento %&D'0 Esto signi4ica que po> demos asignarle un identi4icador 2nico: id. asociarle un te,to descriptivo: title. etc0 El 2nico atributo espec!4ico de estos elementos. disponible 2nicamente con la DTD de transicin. es align0 8u 4inalidad es establecer la alineacin 3ori:ontal del te,to del encabe:ado0 ;or de4ecto. los encabe:ados se alinean a la i:quierda en los idiomas en que el te,to 4lu-e de i:quierda a derec3a. - lo 3acen a la derec3a en los idiomas donde el te,to va de derec3a a i:quierda0 El atributo align puede tomar uno de los siguientes valores:
*esumen HTML +1
le4t: El t!tulo se a6ustar" al margen i:quierdo0 center: El t!tulo se centrar" entre los m"rgenes 3ori:ontales de p"gina0 rig3t: El t!tulo se a6ustar" al margen derec3o0 6usti4-: El t!tulo se 6usti4icar" entre ambos m"rgenes0 Al usar el valor 6usti4- no siempre se consigue el e4ecto esperado. -a que la 6usti4icacin del te,to. para que quede alineado a ambos m"rgenes de p"gina. es un 4actor que depende del agente de usuario0
Cdigo fuente ejemplo encabezados y atributos
Navegador Firefox - Resultado ejemplo encabezados y atributos
*esumen HTML ++
Navegador nternet !xplorer - Resultado ejemplo encabezados y atributos
Comentarios
8e llama comentario en el "mbito de HTML las notas que el autor o autores ponen en el cdigo para 4acilitar su entendimiento0 Estos comentarios no son mostrados por el navegador - por tanto slo ser"n visibles al leer el cdigo HTML de la p"gina Beb0 En general es recomendable ir insertando comentarios al crear una p"gina para marcar determinadas partes - as! encontrarlas m"s 4"cilmente0 Algunos usos que suelen darse a los comentarios son: O Aotas para recordar detalles del cdigo la pr,ima ve: que va-amos a cambiarlo. como por e6emplo para indicar por qu5 3emos usado una etiqueta - no otra. por qu5 3emos usado una lista numerada - no una no numerada. etc0 Este tipo de comentarios son mu- usados cuando las p"ginas son comple6as0 O Apuntar que queda por 3acer en una determinada seccin o como es conveniente cambiarla0 & bien para indicar el comien:o o 4in de una determinada seccin de la p"gina0 O ;ara identi4icar 4"cilmente partes importantes del cdigo o aquellas que cambian m"s a menudo0 O <sos particulares de cada Bebmaster0 De 3ec3o los comentarios pueden usarse para cualquier cosa - cada programador de p"ginas Beb tiene su propio modo de usarlos0
*esumen HTML +(
;ara crear un comentario no se usa una etiqueta. aunque es una estructura parecida0 En primer lugar ponemos una cadena que indica el comien:o del comentario: <!>>. esto es. el s!mbolo menor que. seguido del s!mbolo 4in de e,clamacin - de dos guiones. todo ello sin espacios entre ellos0 Todo el te,to que le siga ser" parte de comentario. que terminar" cuando insertemos la cadena de 4in: >>> . dos guiones - el s!mbolo ma-or que0 La estructura de un comentario es por tanto: <!>> Esto es un comentario >>> Tal - como 3emos dic3o todo el te,to entre los s!mbolos =<!>> = - =>>>= es un comentario sea lo que sea - tenga el n2mero de l!neas que tenga0 8in embargo el est"ndar de HTML recomienda que los comentarios se limiten a una sola l!nea. - si debe ocupar varias necesariamente se aconse6a incluir los s!mbolos de comentario en cada una de ellas0
Entidades
Algunos caracteres distintos de los 3abituales en los lengua6es anglosa6ones son considerados en el mundo de la in4orm"tica como caracteres especiales0 Dentro de estos se inclu-en las letras acentuadas. la letra eCe0 En los 2ltimos aCos se 3a avan:ado muc3o en conseguir que cualquier ordenador pueda leer todos los caracteres de todos los idiomas0 En concreto es -a poco 3abitual que no se soporten los caracteres latinos0 En cualquier caso es interesante saber que HTML o4rece mecanismos para insertar estos - otros caracteres especiales en aquellos sistemas donde no est"n soportados0 <na regla para recordar qu5 caracteres son considerados especiales por HTML es la siguiente : " Si se puede escribir un carcter pulsando sobre una sola tecla del teclado o usando como ayuda las teclas MAYSCULAS o ALT-GR entonces ese carcter es lido"0 En el teclado espaCol 3a- que 3acer tres e,cepciones: la letra YCY - los s!mbolos YZY - Y[Y que no son v"lidas0 El mecanismo o4recido por HTML consiste en unos cdigos especiales que todos los navegadores pueden entender0 A estos cdigos se les llama entidades de caracteres! Todos estos cdigos comien:an por el s!mbolo YUY 7ampersand9 - terminan con el s!mbolo YVY 7punto - coma90 ;uede distinguirse entre dos tipos:
*esumen HTML +@
O "ntidades de caracteres con nombre: son aquellas en las que los s!mbolos YUY - YVY se pone el nombre 7o abreviatura9 asignado a ese car"cter0 8lo e,isten para los caracteres especiales m"s usados0 O "ntidades de caracteres num#ricas: en este tipo de entidades entre YUY - YVY se escribe el n2mero asignado a ese car"cter en el est"ndar 8&> Latin>+ precedido de una almo3adilla: YJY0 Este tipo de entidades son menos usadas que las anteriores aunque tienen la venta6a de abarcar cualquier letra posible en cualquier idioma0 8in duda. en EspaCa los caracteres considerados cmo especiales en el resto del mundo que m"s se usan son los acentos. la letra eCe - los s!mbolos de apertura de interrogacin 7Z9 - admiracin 7[90 Es mu- importante respetar las ma-2sculas - min2sculas en las entidades de caracteres0 8i se usan indistintamente el resultado obtenido no ser" el deseado o bien la entidad simplemente no 4uncionar"0 En el lengua6e HTML e,isten una serie de caracteres que tienen un signi4icado especial0 Algunos de estos caracteres son: <. >. U - =0 8i necesitamos incluirlos. debemos usar las entidades de los caracteres reservados de HTML en ve: del propio car"cter0 Adem"s e,isten otras entidades de caracteres que son de especial utilidad en la creacin de p"ginas ?eb0 El espacio requiere un comentario especial0 El nombre de su entidades de caracteres. nbsp. signi4ica non brea$in% space que quiere decir espacio que no puede ser roto 7o eliminado90 Este tipo de espacios no es ignorado por los navegadores0 Debe recordarse que si incluimos varios espacios en nuestra p"gina el navegador los reduce a uno slo. pues esto no ocurre con este tipo de espacios0 8i se escribe UnbspV cinco veces el navegador mostrar" cinco espacios. con lo cual se pueden crear m"rgenes - sangrados manualmente0
El porqu de los caracteres especiales. Explicacin tcnica

En los comien:os de la in4orm"tica se cre un cdigo llamado ASC&& 7American 8tandard $ode 4or n4ormation nterc3ange9 para representar los caracteres0 Este cdigo asignaba a cada car"cter un n2mero 7de S bits9 que al 4in - al cabo es lo 2nico con lo que un ordenador sabe traba6ar0 Debido al tamaCo de ese n2mero 7S bits9 ese cdigo constaba 2nicamente de +(W caracteres que inclu!a las letras. n2meros - algunos caracteres 3abituales0 Estos caracteres son entendidos en cualquier ordenador - por tanto pueden ser usados con libertad en un documento HTML0 $on la evolucin e,pansin de los ordenadores pronto surgi la necesidad de aCadir nuevos caracteres. como por e6emplo aquellos espec!4icos de cada idioma0 ;or esta ra:n se crearon e,tensiones del cdigo A8$ que aCad!an un bit al n2mero asociado a cada car"cter con lo que el n2mero de caracteres representable aumentaba a (LP0 El problema es que no 3ubo un acuerdo en este A8$ e,tendido - se crearon varias versiones en los que 3ab!a ligeras di4erencias0
*esumen HTML +/
Los documentos HTML pueden tener todo tipo de caracteres pertenecientes al 8&>Latin>+ 7 8&>WWLX>+9 que es una de estas e,tensiones0 A2n as! los caracteres que no pertene:can al cdigo A8$ de S bits deben introducirse con la secuencia de escape correspondiente para evitar problemas con ordenadores que no soporten el 8&>Latin>+ sino otra e,tensin del A8$ 0 El actual est"ndar del lengua6e HTML 3a llevado m"s le6os la e,tensin del cdigo A8$ soportando el con6unto de caracteres U'&C()"0 Este con6unto inclu-e los caracteres del A8$ 7a los que asigna el mismo n2mero - por tanto es compatible9. pero aCade todos los caracteres de todos los idiomas del mundo 7incluidos los c3inos 6aponeses90 Esto es importante porque <A $&DE se est" imponiendo como uno de los est"ndares del presente - del 4uturo0
Cdigo fuente ejemplo entidades
Navegador Firefox - Resultado ejemplo entidades
*esumen HTML +L
Entidades ms
a!ituales
Entidad con nom!re

Á á &Aci!c; &aci!c; ´ &A+lig; æ &Ag!a/e ; &ag!a/e; &am2 ; &A!ing; &a!ing; Ã ã &Auml ;
Entidad numrica
Á á &#19"; &#22&; &#1(); &#19(; &#23); À &#22"; &#3(; Á å Ã ß &#19&;
Carcter que representa

A mayscula con acento agudo: A minscula con acento agudo: A mayscula con acento ci!cun#le$o: % A minscula con acento ci!cun#le$o: ' Acento: * ,et!as A y + ligadas : ,et!as a y e ligadas : . A mayscula con acento g!a/e: 0 A minscula con acento g!a/e: 1 Am2e!sand: & A mayscula con anillo: 4 A minscula con anillo: 5 A mayscula con tilde: 6 A minscula con tilde: 7 A mayscula con di8!esis: 9
*esumen HTML +P
Entidad con nom!re

&auml ; &;!/;a! ; Ç &ccedil ; &cedil ; &cent ; &co2y; &cu!!en; &deg ; &di/ide ; &+acute ; &eacute ; &+ci!c; &eci!c ; &+g!a/e ; &eg!a/e ; &+NO ; &etD; &+uml ;
Entidad numrica
&#22(; &#1&&; Ç ç &#1("; &#1&2; &#1&9; &#1&"; &#13&; &#2"3; &#2)1; é &#2)2; &#23"; &#2)); è &#2)(; &#2"); &#2)3;

A minscula con di8!esis: : <a!!a /e!tical 2a!tida 2o! el cent!o: = C mayscula con cedilla: > C minscula con cedilla: ? cedilla: @ ABm;olo del c8ntimo: C ABm;olo de co2y!igDt: E ABm;olo de moneda: F ABm;olo de g!ado: G ABm;olo de di/isin: H + mayscula con acento agudo: I + minscula con acento agudo: 8 + mayscula con acento ci!cun#le$o: J + minscula con acento ci!cun#le$o: K + mayscula con acento g!a/e: L + minscula con acento g!a/e: M ,et!a +NO mayscula: P ,et!a +NO minscula: Q + mayscula con di8!esis: R
*esumen HTML +S
Entidad con nom!re

&euml ; &eu!o; &# !ac12 ; &#!ac1"; &# !ac3" ; > &Iacute ; í &Ici!c ; &ici!c ; &ie[cl ; &Ig!a/e; &ig!a/e ; &iXuest ; Ï iuml ; &laXuo; < &mac! ;
Entidad numrica
ë

+ minscula con di8!esis: S ABm;olo moneda: T
&#1(9; &#1((; &#19); &#&2; &#2)5; é &#2)&; &#23(; &#1&1; &#2)"; &#23&; ¿ &#2)3; ï &#&);
ABm;olo de un medio: U ABm;olo de un cua!to: V ABm;olo de t!es cua!tos: W ABm;olo mayo! Xue: Y i mayscula con acento agudo: B i minscula con acento agudo: B i mayscula con acento ci!cun#le$o: Z i minscula con acento ci!cun#le$o: Z ABm;olo de a2e!tu!a de e[clamacin: \ i mayscula con acento g!a/e: ] i minscula con acento g!a/e: ^ ABm;olo de a2e!tu!a de inte!!ogacin: _ i mayscula con di8!esis: ` i minscula con di8!esis: a bo;le ngulo a2untando a la icXuie!da: d ABm;olo meno! Xue: e ,Bnea su2e!io! de su;!ayado: f
*esumen HTML +W
Entidad con nom!re

&mic!o; &middot ; &n;s2; &not ; &ltilde; ñ &)acute ; &oacute ; &oci!c ; &oci!c ; &og!a/e ; &og!a/e ; &o!d# ; &o!dm; &)slasD; &oslasD; õ õ &ouml ;
Entidad numrica
&#1(1; &#1(3; &#1&); &#2)9; &#2"1; Ó &#2"3; Ô &#2""; &#21); &#2"2; &#13); &#1(&; &#21&; &#2"(; Õ &#2"5; &#21";

ABm;olo mic!o: g hunto cent!al: i +s2acio no di/isi;lej ABm;olo de negacin: k m mayscula: m m minscula: n o mayscula con acento agudo: p o minscula con acento agudo: ) mayscula con acento ci!cun#le$o: q o minscula con acento ci!cun#le$o: r o mayscula con acento g!a/e: s o minscula con acento g!a/e: t Indicado! o!dinal #emenino: u Indicado! o!dinal masculino: G o mayscula con ;a!!a inclinada c!ucada: v o minscula con ;a!!a inclinada c!ucada: w o mayscula con tilde: x o minscula con tilde: y o mayscula con di8!esis: z
*esumen HTML +X
Entidad con nom!re

&ouml ; &2a!a; &2lusmn; &2ound; &Xuot ; &!aXuo ; &!eg; &sect ; &sDy; &su21; &su22 ; &su23 ; &sclig; &NOol ; &tDo!n; &times ; ´ &uacute ; &ci!c;
Entidad numrica
&#2"&; &#1(2; &#1&3; &#3"; &#1(3; &#13"; &#1&3; &#1(5; &#13(; ß Þ &#25"; × &#21(; &#25); Û

o minscula con di8!esis: { ABm;olo de 2 !!a#o: | ABm;olo de m s}menos: ~ ABm;olo de la li;!a: Comillas: bo;le ngulo a2untando a la de!ecDa: ABm;olo de !egist!ado: ABm;olo de seccin: uin sua/e: Au2e!Bndice 1: Au2e!Bndice 2: Au2e!Bndice 3: ,et!a AOAh minscula: ,et!a NOol mayscula: ,et!a NOol minscula: ABm;olo de multi2licacin: mayscula con acento agudo: minscula con acento agudo: mayscula con acento ci!cun#le$o:
*esumen HTML (1
Entidad con nom!re

&uci!c ; &g!a/e ; &ug!a/e ; &uml ; &uml ; &uuml ; & acute; ý ¥ ÿ
Entidad numrica
û Õ &#2"9; &#1&(; &#22); ü Ý ý &#1&5; ÿ

minscula con acento ci!cun#le$o: mayscula con acento g!a/e: minscula con acento g!a/e: bi8!esis: mayscula con di8!esis: minscula con di8!esis: mayscula con acento agudo: minscula con acento agudo: ABm;olo del yen: minscula con di8!esis:
*esumen HTML (+

Cap 02 Resumen HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cap 02 Resumen HTML

Hochgeladen von

Copyright:

Verfügbare Formate

PRIMEROS CONCEPTOS

Estructura de un documento HTML

<! Declaracin de tipo de documento>

$apitulo ( ) Elementos b"sicos

Declaracin de tipo de documento

Atributos del elemento HTML

$apitulo ( ) Elementos b"sicos

$apitulo ( ) Elementos b"sicos

$apitulo ( ) Elementos b"sicos

Contenido del elemento HEAD

$apitulo ( ) Elementos b"sicos

Contenido del elemento BODY

HTML y los espacios en blanco

$apitulo ( ) Elementos b"sicos

& - ; que indican su inicio - 4in0

Los encabe ados

$apitulo ( ) Elementos b"sicos

Cdigo fuente ejemplo encabezados

Resultado ejemplo encabezados

$apitulo ( ) Elementos b"sicos

Atributos del elemento BODY

Atributos de encabe ados

$apitulo ( ) Elementos b"sicos

Cdigo fuente ejemplo encabezados y atributos

Navegador Firefox - Resultado ejemplo encabezados y atributos

$apitulo ( ) Elementos b"sicos

Navegador nternet !xplorer - Resultado ejemplo encabezados y atributos

$apitulo ( ) Elementos b"sicos

$apitulo ( ) Elementos b"sicos

El porqu de los caracteres especiales. Explicacin tcnica

$apitulo ( ) Elementos b"sicos

Navegador Firefox - Resultado ejemplo entidades

$apitulo ( ) Elementos b"sicos

Entidad con nom!re

Carcter que representa

$apitulo ( ) Elementos b"sicos

Entidad con nom!re

Carcter que representa

$apitulo ( ) Elementos b"sicos

Entidad con nom!re

Carcter que representa

$apitulo ( ) Elementos b"sicos

Entidad con nom!re

Carcter que representa

$apitulo ( ) Elementos b"sicos

Entidad con nom!re

Carcter que representa

$apitulo ( ) Elementos b"sicos

Entidad con nom!re

Carcter que representa

$apitulo ( ) Elementos b"sicos

Das könnte Ihnen auch gefallen