de que puedo puedo: Tutorial HTML5 : 5.Estructura básica de un documento HTML5

Hola y bienvenido a esta parte, en esta ocasión vamos a ver la estructura básica de un documento HTML5 ya que es necesario aprenderla y que se va a usar en todos los documentos

Solo una pequeña aclaración:
Las etiquetas que van a ir dentro de la etiqueta body tales cono header,nav,article etc no son esenciales pero sí que nos ayudan a semántica nuestros documentos.

La estructura es la siguiente:

<!DOCTYPE html>
 
<html lang="es">
 
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
</head>
 
<body>
    <header>
       <h1>Mi sitio web</h1>
 <nav>
  <ul>
   <li>este es un menú</li>
</ul>
 </nav>
    </header>
    <section>
       <article>
           <h2>Titilo de contenido<h2>
       </article>
    </section>
    <aside>
       <h3>Titulo de contenido</h3>
    </aside>
    <footer>
        Saludos esto es un pie de pagina
    </footer>
</body>
</html>

Podemos ver que es un documento sencillo así que analicemos cada parte
Vemos que una etiqueta va dentro de otra esto va pareciendo a unas ramas así que más adelante veremos que a esto se le llama DOM

1. El primero de ellos y que no debe faltar es indicar que tipo de documento es con el doctype y como ya hemos dicho en HTML5 es :

<!DOCTYPE html>

2. el siguiente es la etiqueta HTML que es padre de las demás etiquetas y no queda más que decir así que es este:

<html>

</html>

3. otra cosa que es importante puedes ver que a la etiqueta HTML estamos agregando un atributo lang que sirve para indicar el tipo de documento (idioma humano) que se va a escribir:

<html lang="es">

4. continuamos con el head esta etiqueta como su nombre lo dice es la cabecera aquí usualmente se coloca enlaces a las hojas de estilos (CSS3), al favicon, al JavaScript, y claro al título como podemos observar

<head>
      <title>Titulo de la web</title>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="estilos.css" />
</head>

5. continuamos con el “body” y al igual como lo dice es el cuerpo del documento aquí si que va lo visual ya sea imágenes párrafos, texto de cualquier tipo, formas con canvas, etcs.

<body>
</body>

6. despues viene la etiqueta semántica “header” y es el encabezado de forma distinta al “head” ósea el “header” es el que indica mira aquí es la cabecera del contenido comprendes si no es muy fácil mira

“head”=cabecera del documento

“header”=cabecera del contenido

Y su etiqueta es la siguiente

<header>
</header>

7. la siguiente etiqueta que esta dentro de “header” es h1 para colocar un texto grande pero la que nos importa ahora es la “nav” que como lo dice su nombre es una etiqueta semántica que indica un menú y de ejemplo colocamos una lista con “ul” así:

<nav>

     <ul>
 <li>este es un menú</li>
    </ul>
</nav>

8. la siguiente etiqueta semántica es “section” y me imagino que ya sabes que significa es sección digamos que tenemos secciones en nuestro documento uno para el articulo y otro para comentarios

Así que es así:

<section>
</section>

9. dentro de “section” encontramos “article” al igual es digamos un artículo y esta la puedes repetir cuentas veces sea necesario hacerlo al igual que “section”

<article>
</article>

10. y por ultimo encontramos “footer” y es el pie de página digamos que quieras poner los derechos del autor como mucho blog los hace pero no solo se limita a ello sino que también puedes colocar párrafos, imágenes, etcs.

Así que es una estructura básica en un documento HTML5 y no solo eso puede ser mas sencilla sin las etiquetas semánticas pero para que desperdiciarlas

saldudos

martes, 2 de julio de 2013

Tutorial HTML5 : 5.Estructura básica de un documento HTML5

No hay comentarios:

Publicar un comentario