Menu de navegación

miércoles, 15 de enero de 2014

Empezar con HTML5 - Etiqueta Header, Nav y Declarar Doctype

Mirad el vídeo y complementar la información con el artículo:



Bienvenidos a este artículo, trataremos los primero aspectos de HTML y HTML5 para los que queráis iniciaros en este lenguaje de marcado, html se utiliza para dar la estructura a una página web, este no es un lenguaje de programación, lo menciono porque algunas personas al principio lo confunden, para crear una web necesitamos:

  • Un lenguaje de marcado o estructura. (ej: HTML5)
  • Un lenguaje de estilos. (ej: CSS3)
  • Un lenguaje de Programación. (ej:PHP, Javascript)
Html5-la-tecnologia-del-futuro

Bien ahora que sabemos cual es la función de este lenguaje comencemos con lo mencionado en el título:

Doctype

Esta etiqueta se usa para poder identificar en que lenguaje estamos trabajando y se debe declarar de la siguiente forma:

<!DOCTYPE html>

Esta declaración es infinitamente más lógica y clara que la anterior, en versiones viejas de html había que declarar esta locura:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

¿De verdad creéis que alguien en su sano juicio se iba a poner a memorizar eso? Pues esta pregunta llegaría a la W3C que es la desarrolladora del estandar de html, se dieron cuenta de que esto era una verdadera molestia y así lo corrigieron.

Header

Los que llegáis a aprender ahora html no lo apreciaréis como el resto, pero aquella época en que para hacer un header tenías que declarar la etiqueta "div" de esta forma:

<div id"header"><h1>Aquí va nuestro header</h1></div>

Y te tenías que ir a darle estilos.
Ahora la vida es mucho más fácil, simplemente escribes:

<header><h1>Aquí va nuestro header</h1></header>

De la etiqueta h1 hablaré en otro artículo. Bien pues así definimos nuestra cabecera que es donde suele ir el nombre de la web, el eslogan y el logo, como ya veis HTML5 apuesta por la simplicidad y la comodidad a la hora de trabajar con este lenguaje, lo cual hace del diseño web algo ameno y divertido, así que se agradece.

Nav

Se utiliza para incluir los botones de navegación de tu página web. (Inicio, Sobre nosotros, Contacto...) Como pasaba con header antes había que declararlo con un div de esta forma:

<div id"nav">
   <div id"fila">
       <div id"linea-1">Inicio</div>
       <div id"linea-2">Sobre mí</div>
       <div id"linea-3">Productos</div> 
       <div id"linea-4">Contacto</div> 
   </div>
</div>

Ahora después de esta parrafada vete a darle estilos en CSS.
Y vais a alucinar con lo fácil que es en HTML5.

<nav>
   <ul>
       <li>Inicio</li>
       <li>Sobre mí</li>
       <li>Productos</li> 
       <li>Contacto</li> 
   </ul>
</nav>

No hay comparación, sin duda es mucho más rápido e intuitivo este último que la parrafada que hay que escribir para declararlo con un div, esta claro que este es otro punto fuerte de HTML5. 

Continúa el curso de HTML5 más CSS3, aprende a hacer un formulario de contacto: http://informaticayfinanzas.blogspot.com/2014/01/como-hacer-un-formulario-de-contacto.html

Espero que os haya servido y hayáis disfrutado de este artículo tanto como yo escribiendolo.
También sabéis que los comentarios me alegran el día ¿Verdad? ;-)


 

0 comentarios:

Publicar un comentario