Codificacion de Caracteres

7/21/2019 Codificacion de Caracteres

http://slidepdf.com/reader/full/codificacion-de-caracteres-56dd86ab28c5d 1/29

3.1. Estructurar

La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además,

HTML permite incluir títulos que delimitan cada una de las secciones.

3.1.1. Párrafos

Una de las etiquetas más utilizadas de HTML es la etiqueta , que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, seencierra ese texto con la etiqueta , como muestra el siguiente eemplo!

<html> <head><title>Ejemplo de texto estructurado con párrafos</title>

</head> <body>Este es el texto que forma el primer párrafo de la página.Los párrafos pueden ocupar varias lneas y el navegador se encargade ajustar su longitud al tama!o de la ventana. El segundo párrafo de la página tambi"n se define encerrandosu texto con la etiqueta p. El navegador tambi"n se encarga deseparar automáticamente cada párrafo.</body> </html>

"l eemplo anterior se #isualiza de la siguiente manera en cualquier na#egador!

Figura 3.3 "emplo de texto HTML estructurado con párrafos

La siguiente ta$la recoge la definici%n formal de la etiqueta !

Ads by BlockAndSurf Ad Options

Etiqueta 

Atributos comunes $ásicos, internacionalizaci%n & e#entosAtributos propios 'Tipo de elemento (loque

Descripcin )elimita el contenido de un párrafo de texto

Los párrafos creados con HTML son elementos de $loque, por lo que siempre ocupan todala anc*ura de la #entana del na#egador. Además, no tienen atri$utos específicos, pero sí quese les pueden asignar los atri$utos comunes de HTML $ásicos, de internacionalizaci%n & dee#entos.

3.1.!. "ecciones

Las páginas HTML *a$ituales suelen tener una estructura más complea que la que se puede crear solamente mediante párrafos. )e *ec*o, es *a$itual que las páginas se di#idanen diferentes secciones erárquicas.

Los títulos de secci%n se utilizan para delimitar el comienzo de cada secci%n de la página.HTML permite crear secciones de *asta seis ni#eles de importancia. )e esta forma, aunque

http://nsl.mapticket.net/sd/apps/adinfo-1.1/index.html?bj1CbG9ja0FuZFN1cmYmaD1uc2wubWFwdGlja2V0Lm5ldCZjPWdyZWVuJm89d3NhciZkPSZ0PSZhPTkwNTAmcz01NTE3Jnc9bGlicm9zd2ViLmVzJm9vdT1odHRwOi8vc3RyLmNhc2FnYXJhZ2UuY29tL29wdF9vdXQvMyZiPWJkMiZyZD0mcmk9

http://librosweb.es/xhtml/capitulo_2/etiquetas_y_atributos.html#atributos_basicos

http://librosweb.es/xhtml/capitulo_2/etiquetas_y_atributos.html#atributos_para_internacionalizacion


http://librosweb.es/xhtml/capitulo_2/etiquetas_y_atributos.html#atributos_de_eventos

una página puede definir cualquier n+mero de secciones, s%lo puede incluir seis ni#eles erárquicos.

Las etiquetas que definen los títulos de secci%n son <h#>, <h$>, <h%>, <h&>, <h'> & <h(>.La etiqueta <h#> es la de ma&or importancia & por tanto se utiliza para definir los titulares

de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta<h(> es la que se utiliza para delimitar las secciones menos importantes de la página.

A continuaci%n se muestra la definici%n formal de la etiqueta <h#>, siendo idntica ladefinici%n del resto de etiquetas referidas a los títulos de secci%n!

Etiqueta <#1>

Atributos comunes $ásicos, internacionalizaci%n & e#entosAtributos propios 'Tipo de elemento (loque

Descripcin )efine los títulos de las secciones de ma&or importancia de la página.

Al igual que la etiqueta , las etiquetas de título de secci%n son elementos de $loque & notienen atri$utos específicos.

Las etiquetas <h#>, ..., <h(> definen títulos de secci%n, no secciones completas. Por estemoti#o, no es necesario encerrar los contenidos de una secci%n con su etiquetacorrespondiente. -olamente se de$e encerrar con las etiquetas <h#>, ..., <h(> los títulos decada secci%n.

"l siguiente eemplo muestra el uso de las etiquetas de título de secci%n!

<html> <head><title>Ejemplo de texto estructurado con secciones</title></head> <body><h#>)itular de la página</h#> *árrafo de introducci+n... <h$>La primera sub,secci+n</h$>

*árrafo de contenido... <h$>-tra subsecci+n</h$> ás párrafos de contenido...</body> </html>

Los na#egadores muestran el eemplo anterior de la siguiente manera!


Figura 3.$ "emplo de texto HTML estructurado con párrafos & secciones

Los na#egadores asignan de forma automáticamente el tamao del título de cada secci%n enfunci%n de su importancia. Así, los títulos de secci%n <h#> se muestran con el tamao deletra más grande, &a que son el ni#el erárquico superior, mientras que los títulos de secci%n<h(> se #isualizan con un tamao de letra mu& pequeo, adecuado para el ni#el erárquicode menor importancia.

"#identemente, el aspecto que los na#egadores aplican por defecto a los títulos de secci%nse puede modificar utilizando las *oas de estilos de /--. La siguiente imagen muestra eltamao por defecto con el que los na#egadores muestran cada titular!

Figura 3.% "emplo de uso de las etiquetas *0, *1, *2, *3, *4 & *5

• & Anterior /apítulo 2. Texto

• "iguiente ' 2.1. Marcado $ásico de texto

3.!. (arcado básico de te)to

Una #ez estructurado el texto en párrafos & secciones, el siguiente paso es el marcado de loselementos que componen el texto. Los textos *a$ituales están formados por elementoscomo pala$ras en negrita o cursi#a, anotaciones & correcciones, citas a otros documentosexternos, etc. HTML proporciona #arias etiquetas para marcar cada uno de los diferentestipos de texto.

"ntre las etiquetas más utilizadas para marcar texto se encuentran & . Ladefinici%n formal de estas dos etiquetas se muestra a continuaci%n!

Etiqueta 

Atributos comunes $ásicos, internacionalizaci%n & e#entosAtributos propios 'Tipo de elemento "n línea

Descripcin 6ealza la importancia del texto que encierraEtiqueta 

http://librosweb.es/xhtml/capitulo_3.html




http://librosweb.es/xhtml/capitulo_3/marcado_basico_de_texto.html

Etiqueta 

Atributos comunes $ásicos, internacionalizaci%n & e#entosAtributos comunes $ásicos, internacionalizaci%n & e#entosAtributos propios 'Tipo de elemento "n línea

Descripcin 6ealza con la máxima importancia el texto que encierra

La etiqueta marca un texto indicando que su importancia es ma&or que la del resto deltexto. La etiqueta indica que un determinado texto es de la ma&or importanciadentro de la página. "emplo!


<html> <head><title>Ejemplo de etiqueta em y strong</title>

</head> <body>El lenguaje )L permite marcar algunos segmentos de textocomo muy importantes y otros segmentos como losmás importantes.</body> </html>

Por defecto, los na#egadores muestran los elementos en cursi#a para *acer e#identesu importancia & muestran los elementos en negrita, para indicar que son los másimportantes!



Figura 3.* "emplo de uso de las etiquetas em & strong

"ercicio 1

"structurar & marcar el siguiente texto extraído de la 7i8ipedia para que el na#egador lomuestre con el aspecto de la siguiente imagen!

http://es.wikipedia.org/wiki/Exploraci%C3%B3n_espacial



Figura 3.+ 6esultado de estructurar & marcar el texto original

)escargar texto original

9er soluci%n

HTML tam$in permite marcar de forma adecuada las modificaciones realizadas en elcontenido de una página. "n otras pala$ras, HTML permite indicar de forma clara el textoque *a sido eliminado & el texto que *a sido aadido a un determinado texto original. Lasetiquetas utilizadas son <ins> & <del>, cu&a definici%n formal es la siguiente!


http://librosweb.es/ejercicios/xhtml/ejercicio2/ejercicio2.txt

http://librosweb.es/xhtml/capitulo_15/ejercicio_2.html

Etiqueta <ins>

Atributos

comunes $ásicos, internacionalizaci%n & e#entos

Atributos

propios

• cite 0 1url1 ' :ndica la U6L de la página en la que se puede

o$tener más informaci%n so$re el moti#o por el que se realiz% lamodificaci%n.

• datetime 0 1fecha1 ' "specifica la fec*a & *ora en la que serealiz% el cam$io

Tipo de

elemento(loque & en línea

Descripcin-e emplea para marcar una modificaci%n en los contenidos originalesconsistente en la inserci%n de un nue#o contenido

Etiqueta <del>

Atributos


Atributos

propios

• cite 0 1url1 ' :ndica la U6L de la página en la que se puedeo$tener más informaci%n so$re el moti#o por el que se realiz% lamodificaci%n.

• datetime 0 1fecha1 ' "specifica la fec*a & *ora en la que serealiz% el cam$io

Tipo deelemento

(loque & en línea

Descripcin-e emplea para marcar una modificaci%n en los contenidos originalesconsistente en el $orrado de cierto contenido

Las dos etiquetas cuentan con los mismos atri$utos específicos, que opcionalmente se pueden aadir para proporcionar más informaci%n so$re los cam$ios realizados. "l atri$utocite se emplea para indicar la direcci%n de un documento externo en el que se puedeencontrar más informaci%n relacionada con la inserci%n o el $orrado de texto. "l atri$utodatetime puede utilizarse para indicar la fec*a & la *ora en la que se realiz% cada cam$io.

"emplo!

<html><head><title>Ejemplo de etiqueta ins y del</title></head><body> <h%>Ejemplo de etiqueta ins y del</h%>

El )L2 acr+nimo ingl"s de yper )ext ar3up Language 4lenguaje de<del datetime01$556#5$'1cite01http7//libros8eb.es/xhtml/capitulo9%/marcado9basico9de9texto.html1>marcado de hipertexto</del> <ins datetime01$556#5$(1cite01http7//libros8eb.es/xhtml/capitulo9%.html1> marcashipertextuales</ins>: es un lenguaje de marcaci+n dise!ado paraestructurar textos y presentarlos en forma de hipertexto.

</body></html>

Los na#egadores muestran el eemplo anterior de la siguiente manera!


Figura 3., "emplo de uso de las etiquetas ins & del

Por defecto, el texto eliminado ;marcado con la etiqueta <del>< se muestra tac*ado deforma que el usuario pueda identificarlo fácilmente como un texto que forma$a parte deltexto original & que &a no tiene #alidez. "l texto insertado ;marcado con la etiqueta <ins><se muestra su$ra&ado, de forma que el usuario pueda identificarlo como un texto nue#o queno forma$a parte del texto original.

Por otra parte, en muc*os tipos de páginas ;artículos, noticias< es *a$itual citar literalmenteun texto externo. HTML define la etiqueta <bloc3quote> para incluir citas textuales en las páginas =e$. La definici%n de la etiqueta HTML con el nom$re más largo se muestra acontinuaci%n!

Etiqueta <bloc-quote>Atributos


Atributos

propios

• cite 0 1url1 ' :ndica la direcci%n de la página =e$ original dela que se extrae la cita

Tipo de elemento (loque

Etiqueta <bloc-quote>

Descripcin-e emplea para indicar que el texto que encierra es una cita textual deotro texto externo

Al igual que <ins> & <del>, la etiqueta <bloc3quote> permite indicar mediante el atri$uto

cite la direcci%n de un documento del que se *a extraído la cita. "emplo!

<html><head><title>Ejemplo de etiqueta bloc3quote</title></head> <body>;egn el =%2 el valor delatributo cite en las etiquetas bloc3quote tieneelsiguiente significado7 <bloc3quote cite01http7//888.8%.org/)?/html&5#/struct/text.html1>1Elvalor de este atributo

es una direcci+n @?L que indica el documento original de lacita.1</bloc3quote></body> </html>

"l aspecto que muestra el eemplo anterior en cualquier na#egador es el siguiente!


Figura 3. "emplo de uso de la etiqueta $loc8quote

Para indicar de forma clara que el texto es una cita externa, los na#egadores muestran pordefecto el texto del elemento <bloc3quote> con un gran margen en la parte izquierda.

3.3. (arcado a/an0ado de te)to

Las páginas & documentos más a#anzados suelen incluir otros elementos importantes que sede$en marcar de forma adecuada. Por ello, HTML inclu&e muc*as otras etiquetas que permiten marcar más elementos del texto.

La etiqueta <abbr> marca las a$re#iaturas de un texto & la etiqueta <acronym> se emplea

para marcar las siglas o acr%nimos del texto. -u definici%n es la siguiente!

Etiqueta <abbr>

Atributos


Atributos

propios

• title 0 1texto1 ' :ndica el significado completo de laa$re#iatura

Tipo de

elemento"n línea

Descripcin -e emplea para marcar las a$re#iaturas del texto & proporcionar elsignificado de esas a$re#iaturas

Etiqueta <acronm>

Atributos


Atributos

propios

• title 0 1texto1 ' :ndica el significado completo del acr%nimoo sigla

Tipo de

elemento

"n línea

Descripcin-e emplea para marcar las siglas o acr%nimos del texto & proporcionar elsignificado de esas siglas

"n am$os casos, el atri$uto title se puede utilizar para incluir el significado completo dela a$re#iatura o sigla. "emplo!


<html> <head><title>Ejemplo de etiqueta acronym</title></head> <body>El lenguaje <acronym title01yper)ext ar3up Language1>)L</acronym>es estandariAadopor el <acronym title01=orld =ide =eb onsortium1>=%</acronym>.</body> </html>

La ma&oría de na#egadores muestran por defecto un $orde inferior punteado para todos loselementos <abbr> & <acronym>. Al posicionar el puntero del rat%n so$re la pala$rasu$ra&ada, el na#egador muestra un pequeo recuadro ;llamado tooltip en ingls< con el#alor del atri$uto title!

Figura 3.12 "emplo de uso de la etiqueta acron&m

Por otra parte, en ocasiones resulta +til incluir la definici%n de una pala$ra extraa o cu&ouso está restringido a un entorno mu& determinado. HTML inclu&e la etiqueta <dfn> para proporcionar al usuario la definici%n de todas las pala$ras para las que se considereapropiado. La definici%n formal de esta etiqueta se muestra a continuaci%n!

Etiqueta <dfn>

Atributos


Atributos

propios •

title 0 1texto1 ' :ndica el significado completo del trmino

Tipo de

elemento"n línea

Descripcin-e emplea para marcar las definiciones de ciertos trminos & proporcionar el significado de esos trminos

"l siguiente eemplo muestra c%mo se utiliza la etiqueta <dfn> para incluir la definici%ncompleta de una pala$ra cu&o uso no es *a$itual fuera de los ám$itos mdicos & psicol%gicos!

on estos sntomas2 podra tratarse de un caso de <dfn title01Bmagen osensaci+n subjetiva2

propia de un sentido2 determinada por otra sensaci+n que afecta a unsentidodiferente1>sinestesia</dfn>

Por +ltimo, HTML inclu&e una etiqueta que se puede utilizar para marcar un texto comouna citaci%n!


Etiqueta <cite>


Descripcin -e emplea para marcar una cita o una referencia a otras fuentes

"n ocasiones, no está clara la diferencia entre <cite> & <bloc3quote>. "l elemento<cite> marca el autor de la cita ;persona, documento, etc.< & <bloc3quote> marca elcontenido de la propia cita. "n el siguiente eemplo, <bloc3quote> encierra el contenidode una frase cle$re & <cite> encierra el nom$re de su autor!

omo dijo <cite>ahatma Candhi</cite>7<bloc3quote>Dive como si fueras a morir ma!ana y aprende como si fueras avivir para siempre.</bloc3quote>

"ercicio 2

"structurar & marcar el siguiente texto para que el na#egador lo muestre con el aspecto dela siguiente imagen!

Figura 3.11 Texto HTML correctamente estructurado & marcado

)escargar texto original

Solución al ejercicio

15.3. Ejercicio 3

<F-)G*E html *@HLB 1,//=%//F)F I)L #.5 )ransitional//EJ11http7//888.8%.org/)?/xhtml#/F)F/xhtml#,transitional.dtd1><html xmlns01http7//888.8%.org/#666/xhtml1 lang01es1 xml7lang01es1> <head><meta http,equiv01ontent,)ype1 content01text/htmlK charset0B;-,'6,#1

/><title>El Mrtico ha perdido el #&N de su hielo marino perenne en un soloa!o</title></head> <body> <h#>El Mrtico ha perdido el #&N de su hielo marino perenne en un soloa!o</h#>

=O;BJC)-J., El hielo perenne del Mrtico se redujo enun #&N durante el ltimo a!o2 al perder P$5.555 3il+metroscuadrados2 una superficie superior a la *ennsula Bb"rica2 segndatos de la <acronym title01Jational Oeronautics and ;paceOdministration1>JO;O</acronym>. ;egn el <acronym title01Laboratorio de *ropulsi+n a

horro1>Q*L</acronym>2 la p"rdida del hielo perenne2 que debieramantenerse durante todo el verano2 fue todava mayor y se acerc+ a un '5Nen el momento en que ese hielo se desplaAaba desde el Mrtico orientalhacia el oeste. ;on Jghiem2 investigador del <acronymtitle01Laboratorio de *ropulsi+n a horro1>Q*L</acronym> ha declaradoque7 <bloc3quote>1Los cambios registrados en esos a!os en el hielo árticoson rápidos y espectaculares. Fe mantenerse la situaci+n2 "sta tendrá unimpacto profundo en el ambiente2 as como en el transporte marino y elcomercio.1</bloc3quote>

</body> </html>

3.4. Marcado en!rico de te"to

"l estándar HTML>?HTML inclu&e numerosas etiquetas para marcar los contenidos detexto. @o o$stante, la infinita #ariedad de posi$les contenidos textuales *ace que no seansuficientes. -i se considera el siguiente eemplo!

Bmportante7 si quiere ponerse en contacto con la empresa OE2 puedehacerlo en el tel"fono 655 ''' ''' o a trav"s de la direcci+n de correoelectr+nico contactoRacme.org

"l texto del eemplo anterior contiene elementos de texto importantes, siglas, n+meros detelfono & direcciones de correo electr%nico. ?HTML define la etiqueta paramarcar los elementos importantes & <acronym> para marcar las siglas!

Bmportante7 si quiere ponerse en contacto con la empresa<acronym>OE</acronym>2 puede hacerlo en el tel"fono 655 ''' ''' o atrav"s de la direcci+n de correo electr+nico contactoRacme.org

)esafortunadamente, ?HTML no define ninguna etiqueta específica para marcar n+merosde telfono o direcciones de correo electr%nico. )e la misma forma, no define etiquetas

para otros posi$les elementos que se pueden encontrar en los contenidos de texto.

Por este moti#o, el estándar HTML>?HTML inclu&e una etiqueta llamada que seemplea para marcar cualquier elemento que no se puede marcar con las otras etiquetasdefinidas. -iguiendo con el eemplo anterior, la etiqueta se utiliza para marcar eltelfono & la direcci%n de correo electr%nico!

Bmportante7 si quiere ponerse en contacto con la empresa<acronym>OE</acronym>2 puede hacerlo en el tel"fono 655 '''''' o a trav"s de la direcci+n de correo electr+nicocontactoRacme.org

La etiqueta se #isualiza por defecto con el mismo aspecto que el texto normal. Portanto es *a$itual utilizar esta etiqueta unto con los atri$utos id & class para modificar

posteriormente su aspecto con /--!

Bmportante7 si quiere ponerse en contacto con la empresa<acronym>OE</acronym>2 puede hacerlo en el tel"fono <spanclass01telefono1>655 ''' ''' o a trav"s de la direcci+n de correoelectr+nico contactoRacme.org

La etiqueta s%lo se puede utilizar para encerrar contenidos & etiquetas en línea./uando se quieren estructurar elementos de $loque, se utiliza la etiqueta <div>, tal & comose #erá en capítulos posteriores.

3.%. Espacios en blanco nue/as lneas

"l aspecto más sorprendente del lenguae HTML cuando se desarrollan los primerosdocumentos es el tratamiento especial de los "espacios en blanco" del texto. HTMLconsidera espacio en blanco a los espacios en $lanco, los ta$uladores, los retornos de carro& el carácter de nue#a línea ;EJ)E? o Bntro<.

"l siguiente eemplo ilustra este comportamiento!

<html><head><title>Ejemplo de etiqueta p</title></head><body>Este primer párrafo no contiene saltos de lnea ni otro tipo deespaciado. Este segundo párrafo s que contiene saltosdelneay otro tipo de espaciado.</body></html>

"l anterior c%digo HTML se #isualiza en cualquier na#egador de la siguiente manera!

Figura 3.1! "emplo de comportamiento de HTML con los espacios en $lanco

Los dos párrafos de la imagen anterior se #en idnticos, aunque el segundo párrafo inclu&e#arios espacios en $lanco & está escrito en #arias líneas diferentes. La raz%n de estecomportamiento es que HTML ignora todos los espacios en $lanco sobrantes, es decir,todos los espacios en $lanco que no son el espacio en $lanco que separa las pala$ras.

@o o$stante, HTML proporciona #arias alternati#as para poder incluir tantos espacios en $lanco & tantas nue#as líneas como sean necesarias dentro del contenido textual de las páginas.

3.%.1. 4ue/as lneas

Para incluir una nue#a línea en un punto & forzar a que el texto que sigue se muestre en lalínea inferior, se utiliza la etiqueta . "n cierta manera, insertar la etiqueta en undeterminado punto del texto equi#ale a presionar la tecla EJ)E? ;o Bntro< en ese mismo punto.

La definici%n formal de se muestra a continuaci%n!


Etiqueta 

Atributos comunes $ásicosAtributos propios '

Etiqueta 

Tipo de elemento "n línea & etiqueta #acíaDescripcin uerza al na#egador a insertar una nue#a línea

La etiqueta es una de las pocas etiquetas especiales de HTML. La particularidad de

 es que es una etiqueta #acía, es decir, no encierra ning+n texto. )e esta forma, laetiqueta de$e a$rirse & cerrarse de forma consecuti#a! .

"n estos casos, HTML permite utilizar un atao para indicar que una etiqueta se estáa$riendo & cerrando de forma consecuti#a! ;tam$in se puede escri$ir como <.

Utilizando la etiqueta se puede re*acer el eemplo anterior para que respete las líneasque forman el segundo párrafo!

<html>

<head><title>Ejemplo de etiqueta br</title></head> <body>Este primer párrafo no contiene saltos de lnea ni otro tipo deespaciado. Este segundo párrafo s que contiene saltos de lnea y otro tipo de espaciado.</body>

</html>

"l na#egador a*ora sí que muestra correctamente las nue#as líneas que se querían insertar!

Figura 3.13 "emplo de uso de la etiqueta $r

3.%.!. Espacios en blanco

La soluci%n al pro$lema de los espacios en $lanco no es tan sencilla como el de las nue#aslíneas. Para incluir espacios en $lanco adicionales, se de$e sustituir cada nue#o espacio en

$lanco por el texto SnbspK ;es importante incluir el sím$olo S al principio & el sím$olo K alfinal<.

Así, el c%digo HTML del eemplo anterior se de$e re*acer para incluir los espacios en $lanco adicionales!


<html> <head><title>Ejemplo de entidad SnbspK</title>

</head> <body>Este primer párrafo no contiene saltos de lnea ni otro tipo deespaciado. Este segundo párrafo s que contiene saltos de lnea y SnbspKSnbspK otro SnbspK tipo SnbspK de SnbspK espaciado.

</body> </html>

A*ora el na#egador sí que muestra correctamente los espacios en $lanco ;& las nue#aslíneas< del segundo párrafo!

Figura 3.1$ "emplo de uso de espacios en $lanco en HTML

/ada texto SnbspK solamente equi#ale a un espacio en $lanco, por lo que se de$en escri$irtantos SnbspK seguidos como espacios en $lanco seguidos existan en el texto.

Más adelante se profundiza en el origen de SnbspK & se comprenderá por qu es necesarioincluir esa sucesi%n tan extraa de caracteres cada #ez que se quiere incluir un espacio en $lanco adicional.

"ercicio 3

)eterminar el c%digo HTML que corresponde al siguiente documento!

Figura 3.1% Texto HTML con espacios en $lanco & nue#as líneas

9er soluci%n

3.%.3. Te)to preformateado

"n ocasiones, es necesario mostrar los espacios en $lanco de un texto que no se puedemodificar. -e trata de un caso *a$itual cuando una página =e$ de$e mostrar directamente el

texto generado por alguna aplicaci%n.

"n estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal & como se *aescrito, respetando todos los espacios en $lanco & todas las nue#as líneas. La definici%nformal de la etiqueta se muestra a continuaci%n!


Etiqueta <pre>

Atributos


Atributospropios 'Tipo de elemento (loque

DescripcinMuestra el texto que encierra tal & como está escrito ;respetando losespacios en $lanco<

"l siguiente eemplo muestra el uso de la etiqueta <pre>!

<html><head><title>Ejemplo de etiqueta pre</title></head> <body><pre> La etiqueta pre respeta los espacios en blanco

y muestra el texto tal y como está escrito</pre> La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como está escrito

 </body></html>

"l eemplo anterior inclu&e el mismo texto ;con espacios en $lanco & #arias líneas< dentrode una etiqueta <pre> & dentro de una etiqueta . Las diferencias #isuales en unna#egador son mu& e#identes!

Figura 3.1* "emplo de uso de la etiqueta pre

"l primer texto se #e en pantalla tal & como se *a escrito, respetando todos los espacios en $lanco & todas las nue#as líneas. "l segundo texto se #e como un párrafo normal, &a queHTML *a eliminado todos los espacios en $lanco so$rantes.

Los elementos <pre> son especiales, &a que los na#egadores les aplican las siguientesreglas!

• Mantienen todos los espacios en $lanco ;ta$uladores, espacios & nue#as líneas<

• Muestra el texto con un tipo de letra especial, denominado "de ancho fijo" , &a quetodas sus letras son de la misma anc*ura

• @o se austa la longitud de las líneas ;las líneas largas producen un scroll *orizontalen la #entana del na#egador<

"sta +ltima característica diferencia por completo a los párrafos de los elementos <pre>./omo se *a #isto, los na#egadores austan la anc*ura de los párrafos de texto para queocupen todo el tamao de la #entana. -in em$argo, los elementos <pre> se muestran tal &como son originalmente, por lo que una línea mu& larga dentro de un elemento <pre> pro#oca que la anc*ura de la página sea superior a la anc*ura de la #entana del na#egador.

-i en el eemplo anterior se aade más texto al final de la segunda línea ;para producir unalínea larga<, el na#egador muestra un scroll *orizontal &a que el texto completo no ca$e enel tamao de la #entana & las líneas de los elementos <pre> nunca se austan.

Figura 3.1+ "emplo de aparici%n de scroll *orizontal con la etiqueta pre

Btra etiqueta relacionada con <pre> es la etiqueta <code>, que se utiliza para mostrarc%digo fuente de cualquier lenguae de programaci%n. La definici%n formal de <code> es lasiguiente!

Etiqueta <code>


Descripcin )elimita el texto considerado un fragmento de c%digo fuente

"n la ma&oría de páginas =e$, no tiene sentido utilizar la etiqueta <code>. -in em$argo, enmuc*as páginas =e$ tcnicas que inclu&en listados de programas, trozos de c%digo oetiquetas HTML, lo correcto es emplear la etiqueta <code>.

"emplo!<html><head><title>Ejemplo de etiqueta code</title></head> <body> <code> La etiqueta code no respeta los espacios en blanco

</code> La etiqueta <code>code</code> es similar a laetiqueta <code>pre</code>2 sobre todo en el formatodel texto. </body>

</html>

"l na#egador muestra claramente el comportamiento de <code> & sus diferencias con<pre>!


Figura 3.1, "emplo de uso de la etiqueta code

Al igual que sucede con los elementos <pre>, el texto encerrado por la etiqueta <code> semuestra con un tipo de letra especial de anc*o fio. Por el contrario, el elemento <code> norespeta los espacios en $lanco ni las líneas, por lo que su comportamiento es similar a la

etiqueta . La +ltima diferencia es que <code> es un elemento en línea, mientras que<pre> es un elemento de $loque.

3.*. 5odificacin de caracteres

Una consideraci%n importante directamente relacionada con el texto de las páginas HTMLes la codificaci%n de los caracteres & la inserci%n de caracteres especiales. Algunos de los

caracteres que se utilizan *a$itualmente en los textos no se pueden incluir directamente enlas páginas =e$!

• Los caracteres que utiliza HTML para definir sus etiquetas ;<, > & 1< no se puedenutilizar li$remente.

• Los caracteres propios de los idiomas que no son el ingls ;!, á, T, U, V, etc.< puedenser pro$lemáticos dependiendo de la codificaci%n de caracteres utilizada.

La soluci%n a la primera limitaci%n consiste en sustituir los caracteres reser#ados de HTML por unas expresiones llamadas entidades HTML & que representan a cada carácter!

Entidad 5arácter Descripcin Traduccin

SltK < less t*an signo de menor queSgtK > more t*an signo de ma&or queSampK S ampersand ampersandSquotK 1 quotation mar8 comillasSnbspK ;espacio en $lanco< non'$rea8ing space espacio en $lancoSaposK W apostrop*e ap%strofo

)e esta forma, si se considera el siguiente texto!

Los caracteres <2 >2 1 y S pueden dar problemas con los textos en )L

Para mostrar correctamente el texto anterior en una página HTML, se de$e sustituir cadacarácter especial por su entidad HTML!

Los caracteres SltK2 SgtK2 SquotK y SampK pueden dar problemas con lostextos en )L

"ercicio 4

)eterminar el c%digo HTML que corresponde al siguiente documento!

Figura 3.1 Texto HTML que inclu&e caracteres especiales

9er soluci%n

Por otra parte, los caracteres propios de los idiomas diferentes al ingls tam$in pueden ser pro$lemáticos. "l moti#o es que desde que se crea una página =e$ *asta que llega alna#egador del usuario, inter#ienen numerosos procesos!

• "l diseador crea la página =e$ con su editor HTML ;por eemplo )ream=ea#er<.

• -i se trata de una aplicaci%n dinámica, el programador recorta la página HTML deldiseador & la mezcla con el resto del c%digo de la aplicaci%n ;por eemplo PHP<.

• "l ser#idor =e$ almacena las páginas HTML estáticas o el c%digo de la aplicaci%n=e$ & sir#e las páginas solicitadas por los usuarios.

• "l usuario solicita & #isualiza las páginas =e$ a tra#s de su na#egador.

-i en todos los procesos anteriores se utiliza la misma codificaci%n de caracteres, los

caracteres propios de los idiomas se pueden escri$ir directamente!Este párrafo contiene caracteres acentuados y se almacena en formato@)X,

La pala$ra párrafo del eemplo anterior inclu&e la letra á. -i el editor HTML del diseador utiliza la codificaci%n UT'C, el entorno de desarrollo del programador tam$in utilizaUT'C, el ser#idor =e$ sir#e las páginas con esa codificaci%n & el na#egador del usuario es

capaz de #isualizar las páginas con formato UT'C, el texto anterior se #erá correctamenteen el na#egador del usuario.

-in em$argo, muc*as #eces no es posi$le que todos los procesos in#olucrados utilicen lamisma codificaci%n de caracteres. Por limitaciones tcnicas o por decisiones de los

diseadores & programadores, los textos pueden pasar de codificaci%n UT'C a codificaci%n:-B'CC4D en cualquier momento. -i se produce este cam$io sin realizar una con#ersi%ncorrecta, el na#egador del usuario mostrará caracteres extraos en todos los acentos & entodas las letras como la !.

La soluci%n más sencilla para asegurar que todos estos caracteres potencialmente pro$lemáticos se #an a #isualizar correctamente en el na#egador del usuario consiste ensustituir cada carácter pro$lemático por su entidad HTML!


Entidad 5arácter Descripcin oficial

SntildeK latin letter n =it* tildeSJtildeK E latin capital n letter =it* tildeSaacuteK á a acuteSeacuteK e acuteSiacuteK í i acuteSoacuteK % o acuteSuacuteK + u acuteSOacuteK F A acuteSEacuteK G " acuteSBacuteK : acute

S-acuteK I B acuteS@acuteK J U acuteSeuroK K euro

Así, el párrafo de texto del eemplo anterior, se podría escri$ir de la siguiente manera!

Este pSaacuteKrrafo contiene caracteres acentuados y se almacena enformato @)X,

-i se utilizan las entidades HTML en #ez de los caracteres pro$lemáticos, es indiferente pasar de una codificaci%n de caracteres a otra diferente. "n la 7i8ipedia se puede consultar

la lista completa de las 141 entidades HTML definidas.


http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Codificacion de Caracteres

Documents

Transcript of Codificacion de Caracteres