HTML5 y CSS3 Domine Los Estándares de Las Aplicaciones Web

HTML5 y CSS3Domine los estándares de las aplicaciones Web (2ª edición) Este libro sobre HTML5 y CSS3  se dirige a todos aquellos lectores que quieran desarrollar, implementar o mantener un sitio Web. En efecto, para comenzar , sobre todo, para progresar en el dise!o de sitios Web es necesario comprender  dominar bien el código fuente de las aplicaciones Web. El libro se "a concebido como una #erdadera "erramienta de información, pedagógico desde la ilustrado ado abundan abundantemente temente co primer pri mera a "as "asta ta la $lt $ltima ima pág página ina,, ilustr con n e%e e%empl mplos os  cap captur turas as de pant pa ntal alla la,, pe pens nsan ando do si siem empr pre e en su ap apli lica caci ción ón pr prác ácti tica ca por pa part rte e de dell We Webm bmas aste terr. De este modo, se repasa el lengua%e HTML (teniendo en cuenta su $ltima #ersión, llena de hoja jas s de es esti tilo lo, in no#edad no# edades), es), las ho incl clu uen endo do el es espe pect ctac acul ular ar a# a#an ance ce qu que e su supo pone ne el estándar CSS3 en t&rminos de presentación de páginas Web  una #isión general de las !" #a$aScript de HTML5   de funcionalidades a#anzadas e inno#adoras. Esta obra no es una enciclopedia e'"austi#a de todas estas t&cnicas sino un recorrido estructurado sobre ellas. roporcionará tanto a los dise!adores principiantes como a los más e'perimentados las reglas rigurosas  esenciales del dise!o profesional de un sitio Web. or ello, el autor nos anima a elaborar un código respetuoso con las prescripciones del W3C  a separar el contenido (*+)  la presentación ("o%as de estilo -) tal  como recomienda, a"ora más que nunca, el estándar *+/. ass a

los s na na$e $ega gado dore res s de nume nu mero rosa sass no no# #ed edad ades es ab abor orda dada dass se "a "an n de deta tall llad ado o pa para ra lo escritorio (0 (0nt nter erne nett E' E'p plo lorrer er,, 1i 1irrefo fo' ', oog ogle le -"r "ro ome  a affar ari) i)  ta tamb mbi& i&n n par ara a na$egad egadores ores mó$ mó$ile iles s (i los na$ (i3 3 afa farri, 4nd ndrroi oid d 5r 5ro o6s 6ser er)) per ero o el aut uto or "a est stad ado o partic par ticula ularm rment ente e ate atento nto a pro propor porcio cionar nar un cód código igo co compa mpatib tible le con los na# na#ega egador dores es men menos os a#anzados para que puedan apro#ec"ar a"ora a"ora este importante paso en el dise!o de aplicaciones Web.

os muc"os e%emplos del libro están disponibles para su descarga en esta página. ara todos aquellos lectores que quieran reproducir reproducir los e%emplos del libro de forma id&ntica, las imágenes  el resto de elementos complementarios están a su disposición. Lo s

cap%tulos

d el

libro&

rólogo 7 arte 89 *+/ 7 resentación de *+/ 7 rimeros elementos de las "o%as de estilo 7 El te'to 7 Estructura del documento 7 Enlaces 7 *ablas 7 0mágenes  fondos 7 Etiquetas semánticas  de organización 7 1ormularios 7 +ultimedia 7 arte 29 -: 7 resentación de las "o%as de estilo 7 ;ociones básicas de - 7 *ipograf
uc >4; 4;-?E@ Desde los comienzos de 0nternet, Luc 'an Lanc(er, entusiasmado por la idea de comunicación uni#ersal que transmite este concepto, se "a consagrado en este ámbito. Es un formador apasionado, mu atento a las no#edad no#edades es tecnológicas ligadas a la Web  un gran pedagogo. uc >an ancAer es autor en Ediciones E;0 de libros sobre *+ B  /, %Cuer, *+, en diferentes colecciones.

3b%eti#os de este libro Este libro es una "erramienta de traba%o preciada por cualquier informático que utilice el sistema de gestión de bases de datos +C  que se dedique al desarrollo de aplicaciones. rese resenta nta los princi principio pioss  los m&tod m&todos os indisp indispens ensabl ables es de +C +C,, que deben deben domin dominars arse e independientemente del lengua%e de desarrollo utilizado (, =a#a u otro). Es el resultado de la dilatada e'periencia del autor en el campo de la administración del soporte al desarrollo de aplicaciones centradas en 5D como +C u 3racle.

rincipales temas tratados en este libro Este libro permitirá en especial9 •

•

•

•

•

4prender las caracter
El cap
3b%eti#os de este libro Este libro es una "erramienta de traba%o preciada por cualquier informático que utilice el sistema de gestión de bases de datos +C  que se dedique al desarrollo de aplicaciones. rese resenta nta los princi principio pioss  los m&tod m&todos os indisp indispens ensabl ables es de +C +C,, que deben deben domin dominars arse e independientemente del lengua%e de desarrollo utilizado (, =a#a u otro). Es el resultado de la dilatada e'periencia del autor en el campo de la administración del soporte al desarrollo de aplicaciones centradas en 5D como +C u 3racle.

rincipales temas tratados en este libro Este libro permitirá en especial9 •

•

•

•

•

4prender las caracter
El cap
G4 qui&n #a dirigido este libroH Esta gu
@equisitos e aconse%a, aunque no es imprescindible, tener unas nociones básicas en estructuras de datos de 5D@. *ambi&n se recomienda conocer un lengua%e de programación especialmente para la implementación de procedimientos procedimientos almacenados. e recomienda conocer al menos un sistema operati#o (Windo6s, inu'...), as< como tener un m
4 1lorence Draton, @amond Del&glise  =ean anagiotis

5re#e "istoria de *+/

-omenzamos esta "istoria en 8MMN con la finalización de la especificación tml B.O. De%ando aparte una ligera re#isión en 8MMM con tml B.O8, no "a "abido nada nue#o en el "orizonte de este primer lengua%e Web. El W:- ( World Wide Web Consortium), organismo que gestiona los estándares de escritura en la red, Gno anunció en su momento que tml, en su #ersión B.O, no conocer
Pna de las primeras aplicaciones concretas de + fue la reformulación de tml B.O seg$n la sinta' sinta'is is estric estricta ta  formal formalist ista a de +. ;ac
ero los d
Cue a no se "ablará de páginas Web sino del concepto más amplio de aplicaciones Web.

•

Cue tml/ es una e#olución (en efecto mu importante) de tml B.O.

•

•

•

Cue tml/ "a sido concebido directamente por los na#egadores más inno#adores del mercado como 1irefo', afari 3pera  oogle. Esto garantiza una adopción rápida de los estándares de tml/. Cue cabe esperar de tml/ grandes cambios en la elaboración de formularios (#&ase los Web !orms "#$). Cue, despu&s de una d&cada sin no#edades, tml/ responde a la necesidad real de los dise!adores de reno#ar la interfaz de las aplicaciones Web. Web.


tml/ es una e#olución de tml. @etoma los grandes principios,  los modifica para me%orar ciertos aspectos. a sido dise!ado para asegurar una compatibilidad "acia atrás con todo lo que se "a desarrollado "asta el presente, en t&rminos de publicación sobre la Web. 4 pesar de que el código es menos formal que "tml, la e'igencia de un código propio, respetuoso con las reglas fundamentales del etiquetado, contin$a e'istiendo.

El principio de separación entre el contenido  la presentación sigue siendo con#eniente e incluso se #e reforzado. El abandono de toda una serie de etiquetas  de atributos de presentación (consulte la sección Etiquetas  atributos tml B.O desaparecidos de este cap
•

a simplificación del código  el deseo de e#itar cualquier complicación in$til son dos de los principios que "an regido la elaboración de tml/. Encontraremos esta simplificación  pragmatismo, por e%emplo, en un tipo de documento doctpe nue#o  simplificado, o en el código tml despo%ado de cualquier aspecto de presentación. a caza de plugLins que enturbian el código  complican la tarea de los dise!adores, sustituidos por una integración directa en el na#egador. as nue#as etiquetas de audio  de #
•

El reconocimiento de =a#acript como socio de tml/ a la "ora de la publicación en la red. *ambi&n de los scripts clásicos usados a la "ora de #erificar la introducción correcta de datos o la #alidez de una dirección de correo electrónico en los formularios. tml/ e#ita estas codificaciones, redundantes, "aciendo que los na#egadores incluan de forma nati#a este tipo de funciones. 3tro e%emplo es el código para el dise!o 2D  mu pronto :D (etiqueta ), muc"o más pró'imo a =a#acript que a un lengua%e etiquetado.

•

tml/ se con#ierte, a su #ez, en una plataforma de interfaces de aplicación (40) que integran funcionalidades a#anzadas como la geolocalización, el almacenamiento de datos en local, la consulta en modo desconectado, etc.

•

Las no$edades de HTML5 as no#edades de tml/  sobre todo del trinomio conceptual Ktml/ R -: R aplicaciones =a#acriptK son numerosas.

Html5 •

•

•

•

•

•

Pn nue#o doctpe, simplificado  unificado. upresión de etiquetas  atributos de presentación. ;ue#as etiquetas semánticas o de organización. ;ue#as etiquetas de audio  de # . rofusión de formularios inno#adores como, por e%emplo, cursores o calendarios,  la integración de forma nati#a en los na#egadores de la #alidación de datos.

•

Etc.

El ob%eti#o principal de este libro es el estudio detallado de la "erencia de tml B.O  de las no#edades de tml/. a que destacar que este $ltimo a está implementado en los na#egadores de $ltima generación. a implantación actual de tml/ a nos permite descubrirlo  utilizarlo. erá preciso, no obstante, se!alar que la integración de tml/ no es del todo completa a$n. *oda#
•

•

•

•

•

•

•

•

•

•

•

•

;ue#os selectores. 5ordes redondeados. 5ordes decorados. *ipos de letra personalizados que permitirán a la tipograf
Estas nue#as especificaciones -: a están disponibles en las #ersiones más recientes de los na#egadores , en particular, en los na#egadores de nuestro estudio (#&ase la sección os na#egadores de nuestro estudio en este cap
•

•

•

•

•

a geolocalización permite localizar al usuario (con su permiso) mediante coordenadas de longitud  latitud. as s$per cooAies con Web %torage permiten guardar una cantidad maor de datos en el na#egador. osibilidad de utilizar aplicaciones Web en modo sin cone'ión tras cac"ear los recursos necesarios. ;ue#os elementos Workers que permiten e%ecutar tareas de fondo en paralelo con el programa =a#acript en un entorno totalmente separado de la página. ;ue#os elementos Websockets que permiten establecer una comunicación bidireccional as
•

•

El atributo Content'ditable "abilita la edición en l
0ncluso aunque estas 40 =a#acript sobrepasan un poco el marco de este libro dedicado al aprendiza%e de tml/  de -, "emos decidido abordarlas al final del libro a que su incorporación en las aplicaciones tml/ #a en aumento. 4lgunas a están implementadas en los na#egadores más recientes, tanto en ordenadores de sobremesa como en smartp"ones. Estas 40 =a#acript son potentes  permiten realizar aplicaciones inno#adoras tales como la geolocalización del usuario, el almacenamiento de datos en el na#egador o la consulta de aplicaciones en modo desconectado en su smartp"one. e puede constatar que para e'plotar toda la potencia del concepto tml/, el conocimiento de =a#acript es indispensable. 4lgunas de estas funciones a están resueltas en frame6orAs =a#acript como Do%o  %Cuer.

*+/ es un lengua%e de etiquetas Digno sucesor de las #ersiones precedentes de tml,  de tml B.O en particular, tml/ sigue siendo un lengua%e de etiquetas.

8. Etiquetas as etiquetas, tambi&n llamadas elementos, son comandos interpretados por los na#egadores e informados entre los signos menor que ( <)  maor que ( >). De este modo una etiqueta se escribe . or regla general, a toda etiqueta de apertura le corresponde una etiqueta de cierre que marca el final del comando indicado por la etiqueta de apertura. a etiqueta de cierre retoma el mismo enunciado que la etiqueta de apertura, aunque precedida por una barra oblicua ( /). De este modo a la etiqueta de apertura le corresponde la etiqueta de cierre . a sinta'is de una etiqueta es, por tanto9 ...

ara comprender el modo de funcionamiento de las etiquetas se propone el te'to siguiente9 SEs importante  aprender el lengua%e tml/ T Esto puede interpretarse de la siguiente manera9 •

•

Escribir KSEsK de forma normal, puesto que no se "a especificado nada. 4 continuación escribir la palabra ($nicamente esta palabra) KimportanteK  ponerla en negrita.

•

@etomar la escritura normal para Kaprender el lengua%eK.

•

Escribir esta #ez la palabra Ktml/K en cursi#a.

•

F terminar por KTK en escritura normal.

Esto dar. ara asegurar la compatibilidad "acia atrás con "tml, estas etiquetas tambi&n pueden escribirse en tml/ con un signo de cierre. De este modo, la etiqueta imagen  tambi&n puede escribirse en "tml . El espacio situado antes de la barra oblicua de cierre es importante por moti#os de compatibilidad con los na#egadores más antiguos. 4lgo que nos limita en cierto modo, a nosotros los castellanoparlantes, es el "ec"o de que las etiquetas "acen referencia a t&rminos o abre#iaturas de t&rminos anglosa%ones #ol#i&ndolas (en un primer momento) abstractas  comple%as. ')emplos



 b por bold  que significa negrita



i por italic que significa cursiva

<>

 p por paragraph que significa párrafo



div por division que significa... división

2. 4tributos de etiqueta

<orm>



 

 

table significa tabla

form significa formulario

img  para imagen

En ocasiones es preciso completar una instrucción con especificaciones más precisas en uno u otro dominio. ara "acer esto, el lengua%e tml/ dispone de los atributos de etiqueta. El atributo se inserta en la etiqueta, entre la palabra de instrucción  el signo > final. a sinta'is completa de una etiqueta con un atributo es9

...

Etc.

El atributo contiene siempre un #alor, que se indica de forma complementaria al atributo mediante el signo igual ( =) seguido del #alor escrito entre comillas. El respeto estricto a la sinta'is e'ige que no e'ista espacio antes o despu&s del signo igual. Es posible usar #arios atributos, separados por espacio, en una misma etiqueta9 ...

Pso correcto de las etiquetas e aqu< algunas reglas simples que será preciso respetar a la "ora de escribir etiquetas tml/. •

•

En tml/, las etiquetas no son sensibles a las ma$sculas o min$sculas. De este modo es indiferente escribir ,  o . 4lgunos #erán en la escritura con ma$sculas un medio eficaz para distinguir el código tml del contenido del documento. ;o obstante, el uso generalizado escribe las etiquetas con min$sculas (como en "tml). a regla general e'ige que toda etiqueta abierta  se cierre . a libertad que se adquirió en la escritura de tml :.2 a causa del funcionamiento más o menos permisi#o de los na#egadores a no está de actualidad. El rigor aportado por tml B.O estricto  "tml 8.O debe seguir guiando su escritura.

•

as etiquetas deben enlazarse correctamente. -uando se aplican #arias etiquetas a un elemento, el orden de cierre de &stas es esencial. a primera etiqueta de cierre debe corresponderse con la $ltima etiqueta de apertura que no "aa sido cerrada. El siguiente e%emplo resultará más claro9 Es correcto9 conteni!o Es incorrecto9 conteni!o

•

os #alores de los atributos deben informarse siempre entre comillas. 4qu< tambi&n sigue siendo necesario el rigor en el código.

Etiquetas  atributos *+ B.O desaparecidos as diferencias, tanto a ni#el de etiquetas como de atributos, respecto a tml B.O son numerosas e importantes.

8. 4 ni#el de etiquetas Destacamos en primer lugar la desaparición por completo de los cuadros. as etiquetas <rame>,<rameset>   "an desaparecido definiti#amente de las "erramientas a disposición de los dise!adores. Esto no es ninguna sorpresa puesto que estaban deprecados desde "ace #arios a!os. os programadores profesionales los e#itaban como la peste despu&s de que oogle anunciara a los Webmasters que no garantizaba una inde'ación correcta de los sitios 6eb que inclueran cuadros. a etiqueta  como tal subsiste en tml/. *ambi&n se produce la desaparición de ciertas etiquetas de presentación como , ,<ont>, ,   . *ambi&n en este caso no "a grandes sorpresas puesto que el principio de separación entre contenido  presentación a está bien establecido en el presente. Estas etiquetas de presentación a"ora se tienen en cuenta en las "o%as de estilo -.

2. 4 ni#el de atributos tml/ apuesta firmemente por el principio de separación entre contenido  presentación. o que asombra es la cantidad de atributos afectados. En resumen, todos los atributos relati#os a la alineación, la anc"ura, los fondos (con color o con imagen), los bordes  la numeración de listas desaparecen. *odos estos atributos deben tenerse en cuenta en las "o%as de estilo, que se con#ierten as< en un elemento inseparable del código tml/. De forma más detallada9 •

align en

las etiquetas , , , , , ,, < %r>, , <%&>, <>, , , , , , ,  .

•

alin#, lin#, te&t  vlin# en la etiqueta .

•

bac#groun!  en la etiqueta .

•

bgcolor  en las etiquetas , , ,   .

•

bor!er en las etiquetas   .

•

cella!!ing   cellsacing  en la etiqueta .

•

ramebor!er  en la etiqueta .

•

%eig%t en las etiquetas   .

•

%sace  vsace  en las etiquetas   .

•

margin%eig%t   margin(i!t%  en la etiqueta .

•

nos%a!e  en la etiqueta <%r>.

•

no(ra en las etiquetas   .

•

rules en la etiqueta .

•

si)e en la etiqueta <%r>.

•

t'e en las etiquetas

,

 
.

•

•

valign en etiquetas

, , , , , ,  .

las

(i!t% en las etiquetas <%r>, , , , ,   <re>.

De este modo, a no es posible fi%ar, en tml/, los bordes, la alineación, los fondos o el tama!o de las tablas sin recurrir a "o%as de estilo -.

-on la desaparición de los atributos color o bgcolor , tml/ se define en blanco  negro. Esta ausencia completa de atributos de presentación nos obliga a re#isar nuestra estructura de aprendiza%e tradicional de tml en la que se estudian por un lado las etiquetas tml  por otro las "o%as de estilo -. 4"ora, a desde nuestros primeros pasos con tml, nos #eremos obligados a incluir nociones elementales de "o%as de estilo para la presentación. ara lograr que los alumnos se e%erciten, por e%emplo, en el aprendiza%e de las tablas es imprescindible incluir elementos de "o%as de estilo para, al menos, #isualizar la tabla con un borde. Pn estudio más pausado  detallado de las propiedades - se aborda, como de costumbre, tras "aber estudiado las etiquetas de tml/.

os na#egadores de nuestro estudio *anto los na#egadores de oficina como los na#egadores mó#iles "an "ec"o grandes esfuerzos para integrar tml/ sin esperar a la finalización pre#ista para el cuarto trimestre de 2O8B. e puede afirmar que tml/ "a sido globalmente bien integrado en los na#egadores actuales. in embargo, esta integración toda#
;ue#o  bonito, 0nternet E'plorer 8O es una e#olución importante sobre todo en el ámbito de las "o%as de estilo -:  en las 40 =a#acript. ero está reser#ado a los usuarios de Windo6s N  U  no para internautas que toda#ista o . a quien dirá que queda 0nternet E'plorer M. ero &ste está reser#ado sólo a los usuarios de Windo6s U  >ista. a que reconocer que aunque 0nternet E'plorer M asimila tml/  una parte de las especificaciones -:, parece a antiguo respecto a la competencia, particularmente en materia de "o%as de estilo  de aplicaciones =a#acript. a que subraar que los e'celentes na#egadores de la competencia (oogle -"rome  1irefo') están disponibles para todas las #ersiones de Windo6s. En lo que respecta a 0nternet E'plorer N, se puede considerar como obsoleto lo que respecta a los a#ances del concepto tml/. El autor solo puede aconse%ar para nuestro estudio la utilización de otro na#egador (#er a continuación). *ambi&n nos podemos preguntar si la opción de publicar una nue#a #ersión de un na#egador cada dos o tres a!os se adapta a la ola de cambios a la que se enfrenta la 6eb. +oogle Chrome 4parecido en septiembre de 2OON, oogle -"rome no "a cesado de incrementar su cuota de mercado. e puede considerar que es, a d
na#egador e'celente. 4 pesar de un ba%ada confusa en el n$mero de #ersiones (estamos en la #ersión 8M)  de un sistema de actualizaciones con un buen rendimiento, de%a al usuario con la desagradable sensación de que no e#oluciona a la #elocidad de su competencia directa, que es oogle -"rome. Ga comunidad +ozilla tiene la suficiente en#ergadura para mane%ar sus m$ltiples proectos, como la #ersión mó#il de 1irefo'  un 3 1irefo', para intentar competir con el sistema 4ndroidH Safari afari es el na#egador de las plataformas +acintos"  de la familia 4pple. En su #ersión Q en este sistema operati#o, es sin duda un e'celente na#egador que está a la $ltima en lo que respecta a la integración de tml/  las "o%as de estilo -:  no tiene nada que en#idiar a su competencia en cuanto a inno#ación  rendimiento. En %unio de 2OOM apareció una #ersión para Windo6s que, a pesar de sus e#identes cualidades, no "a seducido a los internautas. u cuota de mercado es tan marginal que se "abla de la posibilidad que no "aa #ersión Q para Windo6s. a muc"as posibilidades de que la #ersión /.8 de afari sea la $ltima #ersión para Windo6s. -pera e trata de un na#egador desconocido  su cuota de mercado no se conoce. Es un na#egador notable con numerosas cualidades  a menudo inno#ador en el ámbito de la integración de tml/  de -:, por e%emplo, en materia de los nue#os formularios tml/. 4fortunadamente para este agradable na#egador, la #ersión mó#il de 3pera tiene un cierto &'ito  se posiciona como el l
El documento *+/ m

ara darse cuenta de la situación, basta con compararlo con un doctpe de tml B.O. <*+,-TE 0T U3I- "4//56-//+T+ 0T 7.81 Transitional//E9" "%tt://(((.(6.org/T;/%tml7/loose.!t!">

S-laramente muc"o más corto , al fin, posible de memorizarT El doctpe, tambi&n llamado D*D, sir#e para indicar al na#egador a qu& reglas de escritura obedece el código fuente de la página tml o "tml. o usará para mostrar la página seg$n los estándares de W:-. *odos los na#egadores aplican la misma normati#a, por lo que cabe esperar una #isualización id&ntica en los distintos na#egadores. En ausencia de un doctpe el na#egador no sabe seg$n qu& reglas debe procesar la página. e conforma con acogerse a reglas gen&ricas para renderizar a toda costa la página tml. Esto puede suponer diferencias respecto a la #isualización en los distintos na#egadores. Este modo, incompleto, se llama modo de compatibilidad o *uirks mode. uede #erificar fácilmente en su na#egador en qu& modo (quirAs o compatible con los estándares) se encuentra el na#egador. En 1irefo' :.QR, acceda al men$ Herramientas . "nformación de la p/gina L pesta!a +eneral . Modo de representación.

El doctpe debe situarse en la primera l
2. a etiqueta *+ a etiqueta <%tml>  indica al na#egador que se trata de un documento tml. a etiqueta <%tml>  es el elemento más alto o el elemento ra <%tml lang="es"> ...

a etiqueta <%tml> puede incluir el atributo lang="es"  que especifica que el documento está en lengua espa!ola. Esta información es mu #aliosa para los motores de b$squeda como oogle  para los programas de s
En la dirección 666.6:sc"ools.comJtagsJrefVlanguageVcodes.asp podrá encontrar una lista completa de las demás lenguas referenciadas.

:. El encabezado del documento a etiqueta <%ea!> ... que se posiciona %usto despu&s del doctpe  de la etiqueta<%tml>  contiene lo que llamamos el encabezado del documento. En este encabezado del documento se sit$a toda una serie de información relati#a al propio documento, independientemente de su contenido. Esta información puede ser de naturaleza mu di#ersa9 •

El t ...  que se e'plica en el siguiente punto.

•

Declaraciones o llamadas a "o%as de estilo -.

•

1unciones o #
•

•

•

0nformación dirigida a los motores de b$squeda para me%orar la inde'ación  el posicionamiento de la página. 0nformación dirigida a los na#egadores. +etaLetiquetas que retoman la codificación, la descripción de la página, las palabras cla#e asociadas a la página, el nombre del autor, menciones de coprig"t, etc.

-on intención de simplificar, tml/ especifica #alores por defecto para el atributo tipo de estos scripts, estilos  elementos lin#. al#o si necesita un #alor diferente al definido por defecto, podrá omitir en tml/ este atributo type. =a#acript es el lengua%e de script predefinido. 4s<, en tml B.O, era preciso escribir9 ...

F

En tml/, basta con escribir9 ...

F



- es a"ora el lengua%e predefinido para las "o%as de estilo. 4s<, en tml B.O, era preciso escribir9 ...

F

En tml/, basta con escribir9 ...

F

;uestro documento tml/ m <%tml lang="es"> <%ea!> ... ...

De%ando aparte el t ...  se muestra en el na#egador.

B. El t, incluso en el encabezado del documento, es la $nica etiqueta obligatoria del mismo. a etiqueta  le asigna un t
a etiqueta ...

i accidentalmente "ubiera un error en las etiquetas , se mostrar
/. a codificación (c"arset) del documento a noción del %uego de caracteres usado ( charset ) es una noción esencial en el desarrollo de páginas Web. Este concepto está no obstante plagado de trampas, principalmente en t&rminos de interoperabilidad. Ga recibido alguna #ez un correo electrónico en el que algunos caracteres "ab
ASCII

Juego de caracteres básico, aunque relativamente antiguo, que permite el intercambio de textos en ingls a nivel mundial. Se escogió en el origen de la !eb pero como el ingls no tiene acentos, "ab#a que codificar los caracteres acentuados $ especiales con entidades del tipo %eacute& 'para la ( o %euro& 'para el )(.

IS*+ -+/

Extensión de ASCII, IS*+-+/, tambin llamado 0atin+/ o Europa occidental, es la codificación que se utili1a con frecuencia en nuestra 1ona mundial. A2ade numerosos caracteres latinos as# como otros signos de puntuación o s#mbolos. Actualmente, su utili1ación tiende a decrecer en favor de 3nicode

IS*+ -+ /-

4ersión actuali1ada de IS*+-+/ qu e inclu$e, entre otros, el s#mbolo ).

356+

356+ es un formato de codificación de caracteres 'c"arset( creado para codificar el con7unto de caracteres internacionales de 3nicode de diferentes idiomas, a diferencia de los formatos más antiguos como iso+-+/ que requiere una forma de codificación para aceptar, por  e7emplo, letras acentuadas o caracteres especiales. Su principal venta7a para la !eb es que  permite representar los miles de caracteres de los diferentes idiomas $ permite crear sitios 8eb que puedan ser multiling9es 'espa2ol, c"ino o árabe:( sin tener que crear m;ltiples versiones del sitio seg;n la codificación de cada pa#s.

Desde

finales de 2O88, el W:-, siguiendo en esto a la 0E*1 ( +nternet 'ngineering Task !orce) que edita los estándares de 0nternet, recomienda el c"arset P*1LN para la edición de páginas Web en gran medida por su uni#ersalidad. os na#egadores incluen una función de detección automática del %uego de caracteres. 4un as<, de%ar la codificación al criterio del na#egador supone en ocasiones una puerta abierta a errores de interpretación. or ello es importante definir el c"arset que se utiliza en el encabezado del documento. <meta c%arset="UT4">

a siguiente sinta'is, que recuerda a "tml 8.O, tambi&n está aceptada9 <meta c%arset="UT4" />

De este modo no sólo se "a simplificado el doctpe en tml/. @ecordemos la forma que tomaba la declaración de la codificación en tml B.O9 <meta %tt4equiv="-ontent4T'e" content="te&t/%tml? c%arset=iso4@41">

;uestro documento tml/ m <%tml lang="es">

<%ea!> <meta c%arset="iso4@41"> ...

a especificación tml/ recomienda (lógicamente) a los autores el uso de P*1LN. ero nada impide mantener el formato isoLNN/ML8 o isoLNN/ML8/ más europeo. ;o obstante se arriesga a parecer algo anticuado...

Q. El cuerpo del documento as etiquetas ...  definen lo que llamamos el cuerpo del documento. Es entre estas etiquetas donde se situará el código tml/ que se usará para elaborar el contenido de la página. Esta parte del documento tml se #isualizará en la #entana del na#egador  por tanto la que se presentará al internauta. En tml/, los atributos dedicados a la presentación del cuerpo del documento en la etiqueta se abandonan de%ando paso al uso de "o%as de estilo. Estos atributos que determinaban el color de fondo ( bgcolor), la imagen de fondo (bac#groun! ) o el color del te'to ( te&t) a no tienen lugar en tml/. ara finalizar, nuestro documento tml/ m <%tml lang="es"> <%ea!> <meta c%arset="UT4">

+odo de proceder os lengua%es usados en la Web tienen la #enta%a de que no necesitan una "erramienta de desarrollo dedicada. ara escribir el código fuente, Sno "ace falta un programa caroT -on un sencillo editor de te'to, incluido en todos los sistemas operati#os, tendremos suficiente. o fundamental es tener el te'to en bruto sin ning$n tipo de formato.

En Windo6s, puede usar el 5loc de notas o ;otepad. @ecordamos que se accede a tra#&s del men$ de 0nicio en Todos los programas . ccesorios . 0loc de notas. El equi#alente del bloc de notas para los +acintos" es *e'tEdit. a numerosos editores de te'to gratuitos como ;otepad RR ( "ttp9JJnotepadLplusLplus.org) para Windo6s  para +ac, te'tWrangler (666.barebones.comJproductsJte't6ranglerJ ). i su editor de te'to le propone diferentes opciones para el formato P*1LN, utilice ZP*1 sin 53+Z o ZP*1LNZ 6it"out 53+Z.

Este editor de te'to, algo rudimentario, es no obstante KperfectoK para codificar te'to bruto (sin ning$n tipo de formato). Es importante respetar un procedimiento correcto a la "ora de guardar los arc"i#os. *ras "aber "ec"orchi$o . +uardar como1, tenga precaución de acti#ar en la zona Tipo la opción Todos los archi$os.

En el marco de este libro dedicado a tml/, los arc"i#os tendrán como e'tensión [."tm o [."tml. El uso de la e'tensión [."tm parece estar generalizándose. 4ntes de salir del editor de te'to, "a que tratar la codificación. De "ec"o, no sir#e de nada especificar un c"arset en P*1LN, si el documento no está codificado en P*1LN. En la zona Codificación, ponga la opción 2T,..

ara #isualizar su arc"i#o, basta con abrir su na#egador e indicar la ruta del arc"i#o concreto. Esta operación parece mu sencilla. ;o obstante, con la tendencia de una interfaz más  más simplificada de los na#egadores, no es del todo intuiti#a. En 1irefo', afari  3pera, "a que acti#ar la barra de men$s, encontrar el arc"i#o con rchi$o . brir un arc"i#o. En 0nternet E'plorer M  oogle -"rome, donde la interfaz es toda#
En caso de realizar modificaciones al código fuente inicial, no ol#ide actualizar la página para que el na#egador tenga en cuenta los cambios. ')emplo

legados a este paso, contamos con todas las "erramientas para crear nuestro primer documento tml/. <*+,-TE %tml> <%tml lang="es"> <%ea!>

<meta c%arset="iso4@41"> Un rimer !ocumento 0tml.

Cue se muestra en 0nternet E'plorer 8O9

'alidación de código HTML5 i bien tml/ es menos formalista que tml B.O estricto o que "tml 8.O, sigue siendo indispensable #alidar el código fuente. as #enta%as de un código fuente perfecto  por tanto de la #alidación son9 •

•

•

-omprensión  #erificación en profundidad de tml/ por parte de programadores iniciados ( a#anzados). 4segurar que la página se mostrará siempre de forma correcta en la maor
•

os programas de s
i el documento, sometido a un #alidador, no es correcto, se le pro#eerá un análisis de los problemas que le permitirá corregir su código. as primeras #alidaciones pueden ser mu frustrantes pero suponen un e'celente aprendiza%e del código fuente. ;o obstante el informe de errores es, con frecuenta, mu t&cnico. ara realizar su función de #erificación  #alidación, los #alidadores precisan que se defina el doctpe del documento (#&ase la sección El documento tml/ m
•

El propio #alidador de W:-. El #alidador #alidator.nu.

)l $alidador de W3C

W:- presenta un #alidador de código (#alidator.6:c.org). o cual es garant
Destaquemos9 •

•

•

•

•

Cue está en ingl&s. Cue ofrece la #alidación de un arc"i#o a partir de su dirección "ttp, un arc"i#o que est& alo%ado en su ordenador o código que insertemos en una zona de te'to. Cue es mu potente. Cue sus notas  e'plicaciones son mu t&cnicas o, a #eces, incluso sibilinas. Cue es KlaK referencia de los profesionales.

En la #alidación de su documento *+/ solo con la etiqueta de c"arset <meta c%arset=ut4> , el #alidador de W:- (toda# . )l $alidador $alidator4nu

El sitio Web #alidator.nu proporciona, tambi&n en estado e'perimental, un #alidador de tml/ ("tml/.#alidator.nuJ).

Destaquemos que fue el primero en proporcionar un #alidador de tml/. odemos subraar9 •

•

•

•

Cue está en ingl&s. Cue su interfaz es mu sencilla. Cue ofrece la posibilidad de #alidar un arc"i#o a partir de su dirección "ttp, un arc"i#o que est& alo%ado en su ordenador o código que insertemos en una zona de te'to. Cue parece de e'celente calidad.

ara los amantes de las e'tensiones de 1irefo', el módulo Html( ,alidator  le permite, tras su instalación, #alidar su propia página a tra#&s del men$ conte'tual de #alidator.nu. !rueba

;o nos "emos resistido a la tentación de "acer una prueba a partir de un código "tml/ erróneo. El código erróneo es9

1. <*+,-TE %tml> 2. <%tml lang="es"> 6. <%ea!> 7. . <meta c%arset="UT4"> B. C. . < align="center"> @. 0tml 18. 11. 12. 16. 12 17. 1. 1B. 67 1C. 1. 1@. 28.

os errores están9 •

•

•

En la l a no e'iste en tml/. En la l "a sido suprimido en tml/.

El #alidador de W:- detecta sin ninguna dificultad estos errores.  0ine , Column /<

5"e align attribute on t"e p element is obsolete. 3se CSS instead.

< align="center">  0ine , Column =<

5"e s element is obsolete. 3se CSS instead.

0tml  0ine //, Column >/<

5"e !idt" attribute on t"e table is obsolete. 3se CSS instead.



a #isualización de este código erróneo nos proporciona una buena %ustificación de la utilidad de una #alidación del código. En efecto, todos los na#egadores de nuestro estudio muestran el t&rmino tml/ tac"ado cuando lo que "ab.

reámbulo El aprendiza%e de la publicación en la Web se "ac
ropiedades de estilo as "o%as de estilo abarcan todo aquello relacionado con la presentación del documento tml como el color, la alineación, el tama!o, los bordes, los fondos o el interlineado. a declaración de un estilo se "ace mediante el binomio roie!a!: valor? . ')emplo te&t4align: center?

o que puede interpretarse como9 Kalinear el te'to de forma centradaK. Detallemos esta notación9 •

roie!a! indica el elemento de presentación que se #e implicadoI por e%emplo color para el color, te&t4align para la alineación, bor!er para los bordes, ont4si)e  para el tama!o de la fuente.

•

la propiedad está separada por su #alor mediante dos puntos.

•

valor especifica una palabra cla#e, un porcenta%e o un tama!o en función de la

propiedad a la que está asignado. •

•

el punto  coma final indica que se "a terminado la declaración de estilo,  es obligatorio. se permite el uso de espacios. 4s<, ciertos autores tienen la costumbre de incluir un espacio entre los dos puntos  el #alor para me%orar la legibilidad del código.

electores 4 continuación "a que determinar los elementos del código tml que se #erán afectados por el efecto de presentación. Estos elementos se llaman selectores. Selectores b/sicos El primer selector que nos #iene a la mente es la etiqueta tml. De este modo podemos por e%emplo Kenganc"arK la declaración de estilo anterior (alinear el te'to de forma centrada) a la etiqueta <%1>. a sinta'is es9 selector D roie!a!: valor? ')emplo %1 D te&t4align: center?

Comentarios •

•

•

e usa simplemente la etiqueta, sin los signos menor que ( <)  maor que ( >). Es decir, $nicamente el te'to de la etiqueta. a declaración de estilo se efect$a entre dos lla#es. ;o "a que ol#idar la lla#e de cierre, en caso contrario el na#egador no tendrá en cuenta la declaración de estilo.

De este modo, todas las etiquetas <%1> se alinearán de forma centrada. Selectores de clase En ciertas situaciones, no queremos agregar un efecto de presentación a todas las etiquetas de un tipo determinado, sino a ciertas etiquetas elegidas libremente. as "o%as de estilo cuentan, para ello, con la noción de clase ( class) que permite al dise!ador definir sus propios selectores. De a"< el nombre de selector uni#ersal.

a etiqueta a la que se quiere aplicar la declaración de estilo se distinguirá de las demás por el atributo class="nombreFclase" siendo, por e%emplo9 <%1 class="eecto1"> ...

a sinta'is es9 .nombreFclase D roie!a!: valor? El nombre de la clase, precedido de un punto  seguido de la declaración de estilo. ')emplo .eecto1 D te&t4align: center?

4qu< $nicamente la etiqueta <%1> con el atributo class="eecto1" estará centrada. 4demás, esta etiqueta de presentación podrá aplicarse a otras etiquetas del código como, por e%emplo, un párrafo o una imagen. Selector de identificador

u concepto es mu cercano a los selectores de clase pero, aqu<, no se desea aplicar el efecto del estilo más que a un $nico elemento de la página. Este elemento, siendo $nico, podrá tratarse como un ob%eto que se podrá manipular por =a#acript. Este elemento $nico se identifica mediante el atributo i!="nombreFi!entiica!or"  siendo, por e%emplo, <%2 i!="titulo2"> ... . a sinta'is en este caso es9 Gi!entiica!or D roie!a!: valor? ')emplo Gtitulo2 D te&t4align: center?

El nombre del identificador, precedido por el signo de almo"adilla ( G)  seguido de la declaración de estilo.

0ncorporación del estilo E'isten m$ltiples formas de incorporar las declaraciones de estilo en una página tml. En este punto del estudio de - #amos a e'plicar las elementales. )stilo en l%nea a declaración de estilo se agrega directamente a una etiqueta concreta del código tml mediante el atributo stle. ')emplo <%1 st'le="te&t4align: center?"> ...

Esta forma básica no respeta la regla de separación de contenido  presentación. u uso será, por tanto, e'cepcional. )stilo interno as declaraciones de estilo se agrupan en el encabezado del documento entre las etiquetas <%ea!> ... . a sinta'is es la siguiente9 +eclaraciones !e estilo

')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!>

<meta c%arset="UT4"> %1 D color: re!? .eecto1 D a!!ing4let: 28&? ont4st'le: italic? <%1>Titulo 1 en ro$o <%2 class="eecto1">Hubttulo en cursiva <%1>Ttulo 2 en ro$o

*e'to simple *odo el contenido de su página Web se sit$a en el cuerpo del documento tml/, es decir entre las etiquetas ... .

')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Un te&to en

0tml



3bser#e que en tml se ignoran los espacios m$ltiples. El na#egador considera un $nico espacio.

alto de l
')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> 0tml es el sucesor !e 0tml 7.8

>emos que el te'to tml ocupa una sola l. ;uestro e%emplo queda as<9 <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4">

0tml es el sucesor !e
0tml 7.8

Comentarios •

•

a etiqueta
 es una etiqueta llamada $nica pues no tiene etiqueta de cierre. a notación
, usada en "tml 8.O, tambi&n está aceptada en tml/.

;egrita W:- anuncia la separación estricta entre contenido  presentación. tml se encarga solamente de la estructura del documento,  las "o%as de estilo - se encargan de todo el aspecto relacionado con el formato #isual. uede parecer, no obstante, paradó%ico #ol#er a encontrarse

etiquetas de presentación. Est& tranquilo sabiendo que se trata $nicamente de algunos formatos básicos del te'to como la negrita, la cursi#a, los e'ponentes  sub ... . ')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Te&to en negrita

Del forma similar, la etiqueta ...  permite igualmente escribir el te'to en negrita en los na#egadores #isuales. a diferencia entre las etiquetas   es, no obstante, sensible en tml. a etiqueta pro#oca un efecto puramente tipográfico  #isual. a etiqueta  tiene como ob%eti#o principal reforzar el te'to. i bien los na#egadores #isuales "an adoptado la misma representación que para la negrita, la interpretación es mu distinta en los programas de s  refuerza el contenido mediante una entonación de #oz distinta o un ni#el sonoro más ele#ado. El sentido que se da al te'to con la etiqueta  es por tanto mu diferente.

-ursi#a ara escribir un te'to en cursi#a ( italic en ingl&s), "a que incluirlo entre las etiquetas ... . ')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Te&to en cursiva

Comentarios •

Es posible escribir un te'to en negrita  en cursi#a enlazando las etiquetas  e . ;o obstante s< importa el orden en que se enlazan estas etiquetas. Esto significa que el orden de cierre de las etiquetas "a de ser in#erso al orden de apertura de las mismas. De este modo te&to  está enlazado correctamente. or el contrario con te&to  las etiquetas están mezcladas  no se "a respetado la forma de enlazarlas.

•

E'iste tambi&n la etiqueta  (-nasis). Esta etiqueta tambi&n escribe el te'to en cursi#a en los na#egadores. a diferencia con la etiqueta  está en el sentido que se da a ambas etiquetas. a etiqueta es puramente tipográfica  #isual. a etiqueta tiene como ob%eti#o poner de relie#e el te'to que la contiene. Este significado #isual puede interpretarse de otro modo en los na#egadores no #isuales.

E'ponentes  sub ...  escribe el contenido en e'ponente  la etiqueta _... en sub <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Ja K bL2 = a2 K 2ab K b2
0₂,

3tras etiquetas de te'to a otras etiquetas de te'to cuo uso es menos frecuente, incluso raro.

8. *e'to tac"ado a etiqueta ... permite marcar un elemento de te'to como suprimido (delete) o caducado, por e%emplo en la actualización de un precio en un sitio comercial. El te'to aparece tac"ado en pantalla. ')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> a etiqueta 0tml 7.8 0tml ...
lave UH3 al recio !e 2@.@@ 27.@@ M

Comentario

a etiqueta  de tml B.O, que permit, que presenta el te'to como tac"ado, puede ser una alternati#a.

2. *e'to preformateado a etiqueta <re> ...  permite #isualizar el te'to tal  como se "a codificado en el editor de te'to. os espacios, tabulaciones  retornos de carro se respetan tal cual en la pantalla. i inclue te'to, se #isualizará con un tipo de letra de paso fi%o. ')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> <re> El te&to inclui!o en una etiqueta re se visuali)a con un tio !e letra !e aso i$o ' reserva

los esacios

As como los saltos !e lnea.

:. Dirección del te'to 4lgunos sistemas de escritura, tales como los alfabetos árabe  "ebreo, se escriben de derec"a a izquierda al contrario que el sentido de escritura con#encional de izquierda a derec"a de las

lenguas que usan el alfabeto latino (como por e%emplo el castellano). tml, lengua%e uni#ersal, debe tener en cuenta de alg$n modo esta especificación. a etiqueta ...  indica el sentido de #isualización del te'to (de izquierda a derec"a o de derec"a a izquierda). os atributos son9 •

!ir="ltr"  (let to right ) para el sentido de lectura de izquierda a derec"a (por

defecto). •

!ir="rtl"  (right to let ) para el sentido de derec"a a izquierda.

')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> !abale arro) a la )orra el aba!
!abale arro) a la )orra el aba!

-omentarios En ocasiones es $til comentar el código tml (como cualquier otro código de programación), para facilitar la comprensión a la "ora de "acer alguna modificación. En tml/, igual que en tml B.O, los comentarios están precedidos por la etiqueta <*44  se cierran con la etiqueta 44>. *odo lo que escribamos entre estas etiquetas no se #isualizará en la pantalla del na#egador. Destaquemos, no obstante, que estos comentarios s< están #isibles cuando se consulta el código fuente de la página. 4!adiremos que los comentarios pueden ocupar #arias l ...  o en el ... . ')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Te&to en negrita ' cursiva <*44 comentario articular 44>

Caracteres especiales E'iste toda una mara!a de caracteres especiales que es preciso codificar, en ocasiones, de forma especial.

ensemos en un primer momento en los caracteres que se usan en la codificación tml/. or e%emplo, el signo menor que ( <) que marca la apertura de una etiqueta. 4 la "ora de leer este código el na#egador puede encontrarse con alguna dificultad. El #alidador de W:- le ad#ierte de esta ambig^edad a la "ora de #erificar su página. Pn poco como para las palabras reser#adas en un lengua%e de programación, e'iste una lista de elementos a e#itar en la codificación del te'to. Estos elementos son, por e%emplo9 •

•

•

•

El signo El signo El signo El signo

< que indica la apertura de una etiqueta. > que marca el cierre de una etiqueta. " usado en los atributos de la etiqueta. N que marca el inicio de una referencia de carácter.

os distintos signos deben codificarse usando las entidades siguientes9 <

Nlt?

>

Ngt?

"

Nquot?

N

Nam?

reste atención al punto  coma final, pues es obligatorio. or otro lado, e'iste toda una serie de caracteres que no e'isten en el teclado normal como el s
')emplo <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> a etiqueta Nlt?bNgt? ... Nlt?/bNgt? escribe el te&to en negrita.
Nsa!es? Nclubs? N%earts? N!iams?

GCu& ocurre con los demás caracteres especiales que se usaban en tmlH GCu& "a sido en tml/ deNeacute? (para la &), de Negrave? (), de Necirc? (), de Nnbs? (espacio indi#isible), etc.H En principio, si el carácter e'iste en el %uego de caracteres ( charset ) declarado en el documento tml/, no es preciso escribir los caracteres especiales mediantes entidades tml. 4s<, en las codificaciones isoLNN/ML8, isoLNN/ML8/  en P*1LN, la & e'iste  no es necesario recurrir a la entidad Neacute? . Esto me%ora sin duda la legibilidad del código. or el contrario, con la codificación isoLNN/ML8, el signo  no e'iste puesto que es demasiado antigua para soportar el carácter en su %uego de caracteres. En este caso "a que pasar obligatoriamente por el uso de su entidad tml Neuro?. @emarquemos que el s
Etiquetas *+ B.O suprimidas @ecordemos que tml/ pretende separar por completo el contenido de la presentación, suprimiendo toda una serie de etiquetas  de atributos que tienen que #er con la presentación. De este modo, las siguientes etiquetas de tml B.O "an desaparecido en la especificación tml/9 •

a etiqueta  que permit
•

a etiqueta <ont> para el tipo de letra, as< como sus atributos si)e, color  ace que determinaban respecti#amente el tama!o, el color  el tipo de letra.

•

a etiqueta  que permit
•

a etiqueta  que permit
•

a etiqueta  que permit
Dar formato al te'to con las "o%as de estilo -omo se "a e'plicado en el cap
8. ;egrita Es posible escribir un te'to en negrita con las "o%as de estilo - sin tener que recurrir a la etiqueta. <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> san D font-weight: bold;

Te&to en negrita

a propiedad de estilo ont4(eig%t  (te'tualmente, el tama!o o la importancia de la fuente) se define a bol! (es decir en negrita). Esta propiedad - aplica a las etiquetas . a propiedad completa san D ont4(eig%t: bol!?  escribirá todas las etiquetas  del documento en negrita.

2. -ursi#a Es posible escribir un te'to en cursi#a con las "o%as de estilo - sin tener que recurrir a la etiqueta. <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> .cursiva D font-style: italic; Te&to en cursiva

4qu< la propiedad de estilo ont4st'le  (el estilo de la fuente) se pone a italic (en cursi#a). Esta propiedad - aplica a las etiquetas con un atributo de clase que "emos D ont4st'le: definidoclass="cursiva" . a propiedad completa .cursiva italic?  escribirá todas las etiquetas del documento con el atributo class="cursiva"  en cursi#a.

:. *ama!o de letra -on la eliminación de la etiqueta <ont>  de su atributo si)e, el tama!o de la fuente se define $nicamente mediante la propiedad de estilo - ont4si)e . <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Ggran!e D font-size: 36px; Te&to en gran!e

El tama!o de la fuente ( ont4si)e ) se fi%a a :Q p<'eles ( 6B&). ;o aplicará más que a la etiqueta identificada por el i!="gran!e" .

B. -olor del te'to -on la eliminación del atributo color de la etiqueta <ont>, el color del te'to se define mediante la propiedad de estilo - color. <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> %1 Dcolor: re!? <%1>Ttulo en ro$o

*odas las etiquetas <%1> escribirán su te'to en color ( color) ro%o ( re!).

/. 4lineación a alineación del te'to se realiza mediante la propiedad de estilo - te&t4align . <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> Gcentra!o D text-align: center;  Te&to alinea!o al centro

a propiedad te&t4align  indica que la alineación del te'to es centrada ( center).

Q. ubraado En la red, el subraado es la con#ención adoptada para se!alar un enlace. -ualquier otro subraado del te'to no puede sino inducir a error a su #isitante. or ello deber es un buen e%emplo. ;o obstante sigue siendo posible subraar un te'to mediante una propiedad de estilo. <*+,-TE %tml> <%tml lang="es"> <%ea!> <meta c%arset="UT4"> .subra'a!o D text-decoration: underline; Te&to subra'a!o

×

Report "HTML5 y CSS3 Domine Los Estándares de Las Aplicaciones Web"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close