Calificación:
  • 2 voto(s) - 4.5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial Estructura completa HTML5
#1
En esta clase vamos a dar un ejemplo de como se utiliza el HTML5 para estructuras que tienen Footer, Menu y Header.

Estructura completa

[Imagen: structure-html51.gif]

Cita:<body>
<header>
<hgroup>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Link 1</a>
<li><a href="#">Link 2</a>
<li><a href="#">Link 3</a>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>Título del post</h1>
<p>Datos del post: autor, fecha, etc.</p>
<time datetime="2010-08-02T13:30:50+07:00"></time>
</header>
<p>Contenido del artículo</p>
</article>
<!--Más artículos -->
</section>
<aside>
Barra lateral / Sidebar
</aside>
<footer>
Footer de la página
</footer>
</body>

Como verán, se usa la etiqueta “aside” para la sidebar, “footer” para el footer, etc. Pero, si queremos darle un diseño a cada uno con CSS, podemos ponerle el atributo div, quedaría algo así:

Cita:<aside id="IDaqui">

Y también, les explicaré la línea de DATETIME:

Cita:<time datetime="2010-08-02T13:30:50+07:00">

La sintaxis es algo así: AÑO-MES-DIA, todo seguido de una T que indica que escribiremos el Tiempo y luego: HORA(Formato24):MINUTO:SEGUNDO+DIFERENCIAGTM
Por ejemplo, si la hora GTM es 12:50:10, y nuestro GTM es +5 pondremos: 12:50:10+5:00
O si somos -7, pondremos: 12:50:10-7:00

Elementos no soportados en HTML5

Los siguientes elementos ya no son soportados en HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>

Nuevas etiquetas

Las principales nuevas etiquetas en HTML5, solo buscan añadir un significado semántico superior a lo que anteriormente significaba un div o un span.

Estás etiquetas se pueden utilizar en conjunto con las etiquetas del estándar HTML4.

Cita:<header> y <footer>

Los elementos <header> y <footer> reemplazan a <div id=”header”> y <div id=”footer”> y generalmente contienen la sección de la cabecera y pié de página del diseño, pero también pueden ser usados como cabecera y/o pié de página de una sección en especial. Estas etiquetas pueden usarse varias veces en un mismo diseño.

Cita:<hgroup>

Este elemento es usado para agrupar varias etiquetas de cabeceras (<h1> <h2> <h3> <h4> <h5> <h6>) cuando se van a utilizar títulos, subtítulos, etc para evitar cortar el flujo del esquema del documento.

Cita:<nav>

Esta etiqueta esta diseñada para que coloques los menús de navegación ya sea de la página principal o para un artículo en especial.

Cita:<section>

Esta etiqueta indica una sección genérica del sitio: La etiqueta <section> es una agrupación temática de contenidos, generalmente con una cabecera.

Cita:<article>

Esta etiqueta representa una sección de contenido independiente. Esta etiqueta se utilizaría para respuestas en un foro, artículos en un blog o comentarios de un artículo.

Cita:<aside>

Esta etiqueta se utiliza para representar contenido que no este directamente relacionado con el contenido de la página. Por lo general esta etiqueta es utilizada para representar las barras laterales de los blogs.

Cuando necesites una sección con propósitos netamente de posicionamiento, estilos, etc, es recomendable seguir usando la etiqueta <div> en vez de usar las etiquetas mencionadas anteriormente.
#2
Estupendo mannualillo Gracias
WWW
#3
Podria poner este rapido manual en mi web?? "@HILARION"
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#4
No había visto este tema Gran sonrisa

La estructura de HTML5 es más limpia y dinámica, ahora a esperar a que sea estandar en todos los navegadores ya sea para PC's de escritorio, Laptops/Netbooks y para móviles.
WWW
#5
muy bueno gracias
Yo estuve siguiendo algunos manuales de mejorando.la y me sirvio muchisimo
Saludos..
#6
Muchas gracias, estoy aprendiendo un poco, parece un lenguaje muy bueno.
#7
seria bueno que hubiera un post q definiera bien con exactitud como defiinr el html y html5
WWW
#8
Le pongo la chincheta que bien que se la merece.

Pondré el tuto en mi web, linkeando a este post Sonrisa
WWW
#9
Gracias, actualizando a HTML5
#10
Muy buen topic... yo acabo de empezar a dar asesorias sobre HTML5 a los alumnos del http://www.itsc.edu.mx
me gustaria compartir las experiencias en desarrollo web, ademas me gustaria mas ejemplos en css3 para aprender cosas nuevas...


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Aporte] Libro html5 De distribucion libre gassip 5 278 04-01-2016, 01:27 PM
Último mensaje: Taquion
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 156 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Formulario de inicio de session con html5 luis.ml 0 911 16-08-2015, 12:52 AM
Último mensaje: luis.ml
  Como hacer un menu horizontal con html5 y css3 torgar22 4 554 16-12-2014, 02:07 PM
Último mensaje: Demozz
  HTML5: Cómo crear una barra de progreso nativa con estilo imgur 0 279 19-11-2014, 11:17 PM
Último mensaje: imgur
  Cómo hacer un formulario con validación en HTML5 imgur 0 287 19-11-2014, 10:24 PM
Último mensaje: imgur
  Curso C++: 2.- Estructura básica y hola mundo Samo30 3 308 15-05-2014, 03:19 PM
Último mensaje: darklion93
  Menu HTML5 - CSS3 gamesd 8 832 27-10-2013, 02:20 PM
Último mensaje: ilopezbdn
  CURSO HTML5 ONLINE billyjac 6 927 19-10-2013, 03:12 AM
Último mensaje: tyler
  5 Nuevas Plantillas HTML5 y CSS3 lukas 13 2,448 12-09-2013, 06:40 PM
Último mensaje: lyo21



Usuarios navegando en este tema: 1 invitado(s)