Estructura básica de una plantilla HTML5

Por Víctor Calderón Oyarce el lunes, junio 10, 2013

Actualización: Nueva entrada en el siguiente enlace:

Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger.

Esta entrada es un tanto especial, ya que es complementaria para un vídeotutorial que he realizado y que dentro de estos días publicaré en el blog, en el vídeo construiremos una plantilla en HTML5 y en esta entrada anexaremos la estructura básica y un pequeño ejemplo.

La estructura de un documento HTML5 es la siguiente (Incluyendo el tipo de codificación necesario para Blogger en la primera línea):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>


     </head>


    <body>


    </body>
</html>

Si nosotros intentamos guardar este código desde nuestro editor HTML, Blogger nos advertirá que no es posible debido a que no se encuentra una etiqueta b:skin, para solucionarlo incluiremos dicha etiqueta en el <head>:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin> <!-- Hoja de estilos del blog,
           la cual no utilizaremos posteriormente
           debido a que usaremos un archivo externo -->

     </head>


    <body>


    </body>
</html>

Otra vez, si intentamos guardar el código nos aparecerá otro mensaje de error, indicando que debe existir una sección (Para gadgets) dentro de nuestra plantilla, lo solucionamos con una etiqueta b:section y su respectivo identificador:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin> 

     </head>


    <body>
    <b:section id="main" /> <!-- Los b:section son secciones para almacenar gadgets -->

    </body>
</html>

Esta sección la utilizaremos posteriormente para incluir las entradas de nuestro blog, de momento es irrelevante pero necesaria para poder guardar el documento.

Sabiendo todo esto, podrán dar el siguiente paso para construir sus propias plantillas en formato HTML5, en la siguiente entrada anexaré el vídeotutorial explicando la forma de convertir todo esto en una plantilla válida, ya que como reitero, esta entrada es complementaria.

Ir a la página principal Subir A favoritos