Mi primera página

Cómo crear mi primera página en HTML5 y CSS3
Rate This
esmsdn
7 Nov 2011 1:20 AM

19

En este artículo explicaremos cómo crear nuestra primera página en HTML5 y CSS3 con WebMatrix 2, veremos algunas de las novedades en etiquetas y atributos de estos estándares y las ventajas que nos ofrece WebMatrix 2 para esta tarea.

Para ello necesitaremos descargar la herramienta:
Descárgalogratis desde aquí, empieza a desarrollar tu sitio web y ayuda a mejorar la herramienta publicando tu feedback en el foro de WebMatrix.
clip_image001 Internet Explorer 9 es el navegador más compatible con HTML5. Si no lo tienes instalado deberías probarlo. Puedes descargarlo desde aquí.
Empieza con WebMatrix

imageimage

Cuando iniciamos WebMatrix tendremos la opción de abrir un sitio yacreado, de empezar a programar desde una plantilla o instalar una aplicación de la galería. Elegiremos crear nuestro sitio web desde una plantilla, que será la plantilla de sitio vacío para crearlo desde cero.

En la pantalla principal de WebMatrix seleccionamos el icono Files de la parte inferior izquierda y haremos doble clic en el fichero Default.cshtml. Este fichero será nuestra página de iniciodel sitio web. Viene con la estructura base para que podamos empezar a programar en HTML5 y utilizar sintáctica Razor para código de servidor. En este artículo nos centraremos en el código HTML5.
Estructura HTML5

Con HTML5 tendremos una web más simple y semántica gracias a las nuevas etiquetas para identificar mejor algunos elementos y no llenar nuestra página de elementos div sin ningún valorsemántico. El ejemplo más claro son las etiquetas y utilizadas para esta clase de elementos multimedia pudiendo identificarlos mejor que con los típicos div con un id.



















image

Con WebMatrix 2 si no tienes muchos conocimientos de HTML5, su estructura y nuevas etiquetas, no te preocupes, mientras escribes teaparecerán sugerencias mostrándote las etiquetas que puedes utilizar y cuando la selecciones te pondrá la etiqueta de cierre automáticamente para que no se te olvide.

imageSi quieres una ayuda más amplia puedes presionar el icono de ayuda que aparece arriba a la derecha. Este icono abre un panel en el que aparecen enlaces a material y cursos referente al tipo de codificación que tenga la página. Siestamos creando una página .cshtml podremos ver ayuda sobre ASP.NET si es .html será sobre HTML5, etc.


Uso de Header, Nav y Footer

Vamos a editar la estructura para adecuarla a lo que queremos, empezando por cambiar el lenguaje de la página a español y poniendo el título “Mi primer sitio html5”. También pondremos un título, un menú de navegación y el pie de página.

Existe una etiqueta nuevadenominada . Se utiliza para los elementos que sean encabezados, normalmente títulos, que tengamos en nuestra página y pueden haber varias de estas etiquetas. El título lo pondremos dentro de una etiqueta .

Para el menú utilizaremos la etiqueta que es la etiqueta para este tipo de funcionalidad que se ha añadido en HTML5. Añadiremos unos cuantos enlaces en el menú. En HTML5 también existe unaetiqueta pero hay que tener en cuenta que si se trata del menú de navegación se debe utilizar .

El pie de página será un elemento y dentro de este hemos añadido el copyright y una fecha para mostrar la última actualización.









Mi primer sitio HTML5





Mi primer sitio HTML5





inicioblog

vídeos









Copyright © 2011

Actualizado en: 11 Noviembre 2011








Etiquetas Section y Article

Para que no quede tan desolada la página vamos a añadir algo de texto. Para ello insertaremos un elemento entre...