In%tit'ción: Instituto de Electrónica Aplicada IEA-UMSA
E%t'#iante: Univ. Juan Pablo Patón Mamani
LA PAZ !"LI#IA I$%&'(
Similitudes y diferencias entre HTML y HTML5
' "b)etivo Encontrar las similitudes * di+erencias entre ,tml tradicional * ,tml
'.' "b)etivos espec/cos E+ectuar una comparación entre dos p01inas2 una escrita en ,tml tradicional * otra en ,tml. #er las caractersticas * e3uivalentes en el documento paralelo. 4eali5ar un dise6o de p01ina con ,tml tradicional * con ,tml * ver las caractersticas de ambos tomando en cuenta las observaciones de la anterior actividad.
% 7esarrollo M"#i-cación #el ti," #e #e-nición #e #"c'&ent" En la eti3ueta de apertura ,tml tradicional se usa un comentario tipo 7"89PE ;tipo de documento< 3ue se declara p=blico * se relaciona con el 797 ;7ocumento 9*pe 7e/nition< caracteri5ando a la p01ina * enla50ndola a validación. En esta caso es >,tml o ,tml dinamico estricto. ?@7"89PE ,tml PU!LI8 -$$BC8$$797 D9ML '.& Strict$$EF ,ttp:$$GGG.GC.or1$94$>,tml'$797$>,tml'-strict.dtdH 9ambien se especi/ca en la eti3ueta de apertura de ,tml el tipo2 el tipo de len1ua)e * 3ue lleva >ml embebido se1=n la especi/cación de la GCc. ?,tml >mlns,ttp:$$GGG.GC.or1$'$>,tml >ml:lan1es lan1esH En el documento de ,tml se sobreentiende esta especi/cación. solo es necesario establecer el len1ua)e de la p01ina en la eti3ueta de apertura.
M"#i-cación a la #e-nición #e &eta#at"% E>iste una variación en cuanto a la de/nición de los metadatos de la cabecera en un arc,ivo ,tml respecto de ,tml. En el primero se re3uiere aclarar todo en una cadena de te>to como valor /)ado para el atributo ,ttpe3uiv. Para ,tml solo se re3uiere la especi/cación del tipo de aco)etamiento en el atributo c,arset se1=n el tipo de codi/cación de la re1ión en la 3ue se acceder0 a la p01ina solicitada. ?meta ,ttp-e3uiv8ontent-9*pe contentte>t$,tmlK c,arsetut+- $H 4eempla5ado por: ?meta c,arsetut+- $H
C"ntene#"re% #i$ ree&,la.a#"% ,"r /ea#er
La eti3ueta ,eader crea un contenedoren lu1ar de div para encabe5ado de pa1ina ,tml. ?div id,eaderH
cambio por: ?,eaderH
Artíc'l"% ( encae.a#"% 7entro de contenedores tipo ,eader se sit=an contenedores tipo ,1roup. Por otra parte se controla los contenidos mediante ?navH en lu1ar de usar ?divH en lo menus de cabecera de usuario. ?div idnavH
cambio por:
?navH
Los artculos se inclu*en como se ,ace en un diario2 un encabe5ado principal * artculos con encabe5ados * contenido2 similar a los 3ue se ,ace con un periódico dividido de +orma escalonada.
C"ntene#"re% ti," ,ie #e ,agina Se sit=an en el documento pie de p01ina mediante ?+ootterH contrario a la anterior división de blo3ues de contenido mediante ?divH. ?div id+ooterH
cambio por:
?+ooter
7ise6o de un +ormulario 9ML respecto a 9ML Se emplea los elementos propios de ,tml * se crea un +ormulario para ,tml * ,tml tradicional:
F"r&'lari" *TML tra#ici"nal: /** * @author Juan Pablo PM * @copyright 2016 */ --!> :or$ulario M' <or$> <i= cla557)po5t-at9)>Dato5 P9r5onal95
o$br95 y p9llio5
orr9o #l9ctroacut9Anico
9l9ono
Dir9ccioacut9An Particular
Pai5
<59l9ct>
Nenero la si1uiente p01ina en el nave1ador:
Generación #el #"c'&ent" &e#iante /t&l+ Se escribió el si1uiente códi1o para 1enerar la p01ina en ,tml:
/** * @author Juan Pablo PM * @copyright 2016 */ --!> :or$ulario M':or$ulario 9 ato5 p9r5onal95 <or$>
o$br95 y p9llio5
orr9o #l9ctroacut9Anico
9l9ono
Dir9ccioacut9An Particular
Pai5<59l9ct>
Se 1eneró la si1uiente inter+a5 en el nave1ador:
C 8onclusiones Se ,a comparado ambas p01inas * se la identi/cado las principales caractersticas de ambas en cuanto al mane)o de sus eti3uetas. Uno de los detalles relevantes +ue la sustitución de contenedores tipo div por contenedores dedicados a los encabe5ados2 en los artculos * pie de p01ina como un documento com=n de te>to. Se ,a lo1rado obtener la misma inter+a5 en ambos tipos * se puede apreciar 3ue cambia el tipo de or1ani5ación del documento en su estructura la presentación no mostro cambios notables pero internamente tiene una or1ani5ación distinta.
