INTRODUCCIÓN A LA ESTRUCTURA DE HTML 5


HTML 5 es el nuevo estándar de la World Wide Web. HTML significa (lenguaje de marcado de hipertexto ) y es lo que yo llamo un lenguaje de etiquetas. Como el pasado paso, no voy a explicar HTML en sus versiones anteriores. si no que voy a explicar directamente en que consiste y comomaquetar una página web básica en HTML5. Como he dicho, HTML 5 es un lenguaje de etiquetas eso quiere decir que todos los elementos que introduzcamos nuestro código estará rodeado de unas etiquetas encerradas por los signos “<” y “>” de modo que para indicar un título de una página HTML pondremos:

HTML 5 es el nuevo estándar de la World Wide Web. HTML significa (lenguaje de marcado de hipertexto ) y es lo que yo llamo un lenguaje de etiquetas. Como el pasado paso, no voy a explicar HTML en sus versiones anteriores. si no que voy a explicar directamente en que consiste y como maquetar una página web básica en HTML5. Como he dicho, HTML 5 es un lenguaje de etiquetas eso quiere decir que todos los elementos que introduzcamos nuestro código estará rodeado de unas etiquetas encerradas por los signos “<” y “>” de modo que para indicar un título de una página HTML pondremos:

<title> MI PÁGINA WEB </title>

Donde:

  • <title> es la etiqueta de apertura
  • “MI PÁGINA WEB” es el titulo que aparecerá en la pestaña del navegador con que abramos la página. Fíjate arriba, en tu navegador, el nombre de la pestaña, y podrás localizar el titulo de esta página
  • </title> es la etiqueta de cierre, es importante que lleve el símbolo “/” al principio.

Lo que hacen los navegadores al encontrarse este código (<title> MI PÁGINA WEB </title> ) en un documento html es lo siguiente: Primero encuentra el símbolo “<” de la primera etiqueta de apertura <title>, y dice: “a ok… a partir de aquí me van a dar el nombre de una etiqueta”. Y recoge todos los caracteres que haya hasta el símbolo de cierre de etiqueta “>“. En este caso obtiene la palabra title. por lo que ya sabe que lo que viene a continuación es el título de la página web. Entonces procede a recoger todos los caracteres entre las etiquetas de apertura <title> y de cierre </title> y halla la cadena de caracteres : “MI PÁGINA WEB”, que es la cadena de caracteres que mostrará como título. Tenemos todo tipo de etiquetas para indicar a los navegadores los distintos elementos de nuestra página web. muchas de estas etiquetas en el nuevo estándar HTML5 tienen un valor semántico adicional que nos permiten identificar con claridad y de forma semántica el contenido que rodea estas etiquetas. Pero todo a su debido momento. antes empecemos por la primera linea que hemos de poner en nuestro documento HTML 5. Antes de nada hemos de comenzar declarando el DOCTYPE al principio del documento. Alguno de ustedes se preguntaran: que demonios es eso???. Pues bien el <!DOCTYPE> no es una etiqueta del estándar HTML si no una “DEFINICIÓN DEL TIPO DE DOCUMENTO” de aquí en adelante “DTD” con esto al principio del documento indicaremos al navegador que tipo de documento se va a encontrar. nuestro DTD para HTML5 sera “<!DOCTYPE html>” y ira siempre al principio del todo de nuestra página web. Después de incluir nuestro DTD al inicio del documento incluiremos la etiqueta <html></html>. entre estas etiquetas ira todo nuestro documento HTML5. Seguido usaremos la etiqueta <head></head>. Dentro de esta etiqueta incluiremos todas las cabeceras de nuestra página web.

IDE de desarrollo Aptana Estudio

Las etiquetas pueden tener atributos y sus atributos tener valores. En el siguiente ejemplo mostramos la etiqueta <p> que representa un párrafo.

<p id=”fijo”>…aqui va el parrafo…</p>

En el ejemplo anterior “id” es el atributo y su valor es “fijo”.El valor tiene que ir siempre entre comillas. El atributo id nos vale para diferenciar unas etiquetas de otras. El párrafo de id=”fijo”, claramente diferenciado de otro con el id=”lateral”. Y podríamos darle a unos unas características distintas que al otro. Pero de esto hablare a su debido tiempo, cuando hablemos de dar formato y estilo a nuestro código HTML5

Algunas de las etiquetas mas importantes que podemos y en ocasiones debemos poner entre las etiquetas <head> y </head> son las siguientes:

Etiqueta de título:

  • <title></title> Como dije, lo que pongamos dentro de estas etiquetas sera considerado por el navegador como título y lo usara para indicar el titulo de la página en buscadores, en favoritos o en la pestaña en la que este abierta. Esta etiqueta es sumamente importante sobre todo de cara a que Google y otros buscadores entiendan e indexen la página correctamente ademas de la utilidad obvia de ayudar a los internautas a comprender rápidamente de que va nuestra página web.

Etiquetas meta:

Las etiquetas <meta> estas etiquetas no necesitan etiqueta de cierre. el cierre de la etiqueta se pone con el símbolo “/” al final de la etiqueta de apertura: <meta ….. ./> Las etiquetas <meta>proveen datos acerca de nuestra propia página web. como por ejemplo:

  • <meta charset=”UTF-8″ /> Nos indica el juego de caracteres que vamos a usar, el juego de caracteres en el que nuestra página web esta codificada. El “UTF-8″ es el estándar multi-idioma que acepta todos nuestros símbolos castellanos.

 

  • <meta name=”description” content=”Descripción de mi página web” /> Al escribir name=”description” estamos diciéndole al navegador que esta meta etiqueta va a tener una descripción de nuestra página web. Y en content=”Descripción de mi página web” estamos escribiendo la descripción de nuestra página web. Esta etiqueta es muy útil, es el texto que aparece debajo de nuestro titulo en los resultados que presentan los buscadores. Una buena descripción es importante para animar a los visitantes a entra en nuestra página web.

 

 

  • <meta name=”author” content=”Joao Maria Arranz” /> Al escribir name=”author” estamos diciendo que vamos a especificar al autor de la página web , osea, el tuyo propio. Y en: content=”Joao Maria Arranz” Le indicamos el nombre del autor.

 

 

  • <meta http-equiv=”……….” content=”……….” /> La comunicación en la WWW se hace principalmente a través del protocolo HTTP. Esto no son mas que unas reglas que configuran el lenguaje mínimo necesario para que dos maquinas: cliente y servidor puedan comunicarse.En estos mensajes siempre hay una parte que se llama encabezados y ofrecen información acerca del mensaje. Los encabezados que podemos modificar y nos pueden resultar de gran ayuda a la hora de crear una página web son los siguientes:
    • <meta http-equiv=”expires” content=”……….” />: Indica la fecha de caducidad de una página. Antes de esa fecha la página sera cargada desde el cache. Una vez pasada la fecha la página sera recargada desde el servidor. Esto es útil para indicar a los buscadores hasta cuando mantener una versión de nuestra página web y cuando volverán a pasarse a actualizarla. ejemplo: <meta http-equiv=”expires” content=”tue, 01 Jun 2012″> Es importante que la fecha este en formato RFC1123, “día, ddmmyyyy”. Y usando: <meta http-equiv=”expires” content=”0″> La página es recargada directamente del servidor.
    • <meta http-equiv=”pragma” content=”no-cache”/>: Con el valor “pragma” del atributo “http-equiv”, estamos evitando que el navegador guarde la página en la cache del navegador de los visitantes.
    • <meta http-equiv=”content-language” content=”es”/>: El valor “content-language” del atributo “http-equiv” le indica al navegador en el idioma en que nuestra página esta escrita.
    • <meta http-equiv=”cache-control” content=”no-cache”/>:Este valor del atributo “http-equiv” nos permite controlar de que forma guardaran los navegadores nuestra página web. Y los valores que puede tomar el atributo “content” son:
      • max-age: nos indicaría el numero de segundos en lo que la página expira desde que se visito: <meta http-equiv=”cache-control” content=”max-age=259200″/>
      • S-maxage: Es como la anterior. Pero este atributo solo podremos aplicarlo a caches compartidas como en un proxy: <meta http-equiv=”cache-control” content=”no-cache”/>
      • Public: este valor permite que la cache sea guardada por por servidores y proxys intermedios para que pueda estar accesible públicamente: <meta http-equiv=”cache-control” content=”no-cache”/>
      • private: Esto nos indica que la página podrá ser cacheado por el visitante pero no por proxys y servidores intermedios: <meta http-equiv=”cache-control” content=”no-cache”/>
      • No-cache: Esto indica claramente que nuestra página web no será guardada en cache. Lo importante para páginas que a través de una misma url pueda devolver resultados distintos: <meta http-equiv=”cache-control” content=”no-cache”/>
      • No-store: Indica al navegador que solo ha de guardar en cache el documento el tiempo necesario para visualizarlo: <meta http-equiv=”cache-control” content=”no-cache”/>
  • <meta http-equiv=”refresh” content=”600″>: Este atributo nos sirve para determinar la recarga de una determinada url pasado un determinado tiempo medido en segundos.
  • <meta name=”date” content=”February 28, 2012″>: Nos permite indicar la fecha de creación del documento de la página web.

 

Etiqueta link:

  • La etiqueta <link>. Esta etiqueta nos indica la relación entre nuestra pagina y recursos externos. Su principal uso es para enlazar con nuestra hoja de estilos CSS de lo que hablare otro día. Su estructura del tipo: <link rel=”stylesheet” type=”text/css” href=”otrocss.css” /> El atributo “rel” de la etiqueta <link> nos indica el tipo de relación del recurso externo con nuestra página. El atributo “type” no es necesario ponerlo en HTML5 pero es recomendable ponerlo para compatibilidad con navegadores antiguos. Este atributo nos indica el tipo de documento al que estamos enlazando. El atributo “href” lo que hace es indicarnos la ubicación del recurso.

Etiquetas script:

  • <Script language=”JavaScript”></script> Esta etiqueta nos sirve para escribir código o enlazar a un archivo externo escrito en un lenguaje de programación de scripting. Pequeños fragmentos de código generalmente que nos permiten dar un poco de vida a nuestras páginas web. Desde un barner que se mueve, a un reloj on-line o incluso un contador de visitas. Los posibilidades son casi tan amplias como nuestra mente pueda imaginar. Pero este tema tan apasionante no es el que tratamos ahora aquí. Ya tendremos tiempo mas adelante para poder profundizar en lenguajes de scripting. especialmente en JavaScript.

Aunque creo que estos son los principales y mas importantes, hay muchas mas etiquetas para las cabeceras. No estaría mal que hicieras una búsqueda y aprendieras algo mas.

Una vez incluidas todas las etiquetas de las cabeceras cerramos la etiqueta <head> con su etiqueta de cierre </head> Hasta ahora todo lo que hemos escrito no en el cuerpo de la página web. Todo lo que sera visible en el documento web vendrá ahora a partir de la etiqueta <body> La etiqueta <body> es el cuerpo de nuestra página web. aquí incluiremos la mayor y mas importante parte de nuestro contenido web. Pero eso lo dejo para el siguiente articulo. No dejaros un ejemplo del código visto hasta ahora.

<!doctype html>
<html>
    <head>
        <meta charset=”utf-8“>
        <title>Mi primera página web</title>
        <meta name=”description” content=“Esta es la primera página web echa en informatico-madrid.com“/>
        <meta name=”author” content=”Joao Maria Arranz“/>
        <link rel=”shortcut icon” href=”favicon2.ico” type=”image/x-icon“/>
        <link rel=”stylesheet” href=”css/style.css“/>
        <script src=”js/experimentalcss3.js“></script>

    </head>
    <body>
        AQUI ESCRIBIREMOS TODO EL CUERPO DE NUESTRO DOCUMENTO HTML EN EL PROXIMO ARTICULO.
        <footer>
            AQUI ESCRIBIREMOS EL PIE DE PÁGINA
        </footer>
    </body>
</html>

Publicado el 04/01/2013 a las 15:52

Comentarios en el post


Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +