-
8/19/2019 Diseño Web Con Html5
1/11
se o conHTML5
EstructuraSemántica
Prof. Esteban V. Solórano !e la "i#a
Pro$ósito
Conocer la semántica principal deHTML5.
"e%uisitos
Conocimiento básico de HTML yDiseño de paginas WEB.
-
8/19/2019 Diseño Web Con Html5
2/11
HTML5
Prof. Esteban V. Solórano !e la "i#
HTML5 es la actualiaci!n de HTML" ellengua#e en el $ue es creada
la %eb. HTML5&iene de la mano de las nue&as tecnolog'ascomo
C(() y nue&as capacidades de
*a&ascript.
Con las estructuras HTML5 se lograra unamayor optimiaci!n
del
(E+,posicionamiento-" una semántica clara yordenada" y un c!digo
me#or estandariado.
-
8/19/2019 Diseño Web Con Html5
3/11
HTML5
Prof. Esteban V. Solórano !e la "i#
Estructura &eneralDeclaraci!n del tipo de documento y del
idioma delmismo
'(D)*T+PE ,tml-
',tml lan/0es1-
El resto del documento lo encontramos di&idido en
',ea!-Metadatos" scripts y otros datos no semánticos
'2,ea!-'bo!3-
Contenido de la pagina. Te/to" audio" imágenes"etc.
-
8/19/2019 Diseño Web Con Html5
4/11
HTML5
Prof. Esteban V. Solórano !e la "i#
E4em$lo !e estructura !el bo!3.
-
8/19/2019 Diseño Web Con Html5
5/11
HTML5
Prof. Esteban V. Solórano !e la "i#
)raniación !el bo!3 con las nue#as eti%uetas!e HTML5.
',ea!er-El 001 de los proyectos %eb tienen unacabecera. está
diseñada para reemplaar la
necesidad de crear di&s sin signi2cadosemántico 3di&
id46eader7.
'2,ea!er-
'na#-Está diseñado para colocar los botones dena&egaci!n
principal.
'2na#-
-
8/19/2019 Diseño Web Con Html5
6/11
HTML5
Prof. Esteban V. Solórano !e la "i#
)raniación !el 'bo!3- con las nue#aseti%uetas !e HTML5.
'section-De2ne un área de contenido 8nica dentro delsitio. En un
blog" ser'a la ona donde están todos
los posts.'2section-
'article-
De2ne onas 8nicas de contenido independiente.En el 6ome de un
blog" cada post ser'a unarticle.
'2article-
-
8/19/2019 Diseño Web Con Html5
7/11
HTML5
Prof. Esteban V. Solórano !e la "i#
)raniación !el 'bo!3- con las nue#aseti%uetas !e HTML5.
'asi!e-Cual$uier contenido $ue no est9 relacionado conel
ob#eti&o primario de la página &a en un aside.
En un blog" ob&iamente el aside es la barralateral de
in:ormaci!n. .
'2asi!e-
'footer-Es el pie de página y todo lo $ue lo compone .
'2footer-
-
8/19/2019 Diseño Web Con Html5
8/11
HTML5
Prof. Esteban V. Solórano !e la "i#
Las eti%uetas nue#as im$ortantes !e HTML5 .
'#i!eo-;nserta &ideo sin necesidad de plugins. Es muy:ácil
usarla" pero cada na&egador soporta codecsdi:erentes de
&ideo" lo $ue 6ace necesario
recodi2car un &ideo en m8ltiples codecs.'2#i!eo-'au!io-
Lo mismo $ue &ideo" pero sin &ideo.
-
8/19/2019 Diseño Web Con Html5
9/11
HTML5
Prof. Esteban V. Solórano !e la "i#
Las eti%uetas nue#as im$ortantes !e HTML5 .
'in$ut -;nput ya e/ist'a como la eti$ueta para insertarca#as de
te/to y botones. =6ora es máspoderosa" con la capacidad de insertar
ca#as tipo
>email $ue se auto&alidan" calendarios tipo>date"
sliders" n8meros" entre otras.
'2in$ut -
'can#as-?n área de dibu#o &ectorial y de bitmaps con
*a&ascript. Es un =
-
8/19/2019 Diseño Web Con Html5
10/11
HTML5
Prof. Esteban V. Solórano !e la "i#
Las eti%uetas nue#as im$ortantes !e HTML5 .
's#-?na eti$ueta" igual $ue 3img7" para insertardibu#os y
animaciones &ectoriales al estilo de@las6.
'2s#-
-
8/19/2019 Diseño Web Con Html5
11/11
lunas !e6niciones
Prof. Esteban V. Solórano !e la "i#
SE) 7$osicionamiento8(e re2ere a las t9cnicas $ue buscan $ue
unapágina %eb apareca en las primeras posicionesde los resultados
en buscadores ,Aoogle"
a6oo" ...- para una serie de palabras o :rases.
=
