En la entrada de hoy hablaremos sobre HTML5 la nueva versión de tan importante lenguaje para la World Wide Web. Gracias a las ventajas que ofrece está siendo usada por numerosos desarrolladores web. Hay que tener en cuenta que si queremos sacarle todo el provecho tendremos que tener instalado la última versión del navegador puesto que los navegadores de versión más antigua no lo soportan. Así que vamos a la chicha y empecemos ya.
Estructura de una página web
1. HTML: estructura básica
Un documento HTML(Hyper Text Markup Language o Lenguaje de Marcas de HJipertexto en lengua cervantina) está formado por el DOM (Documento Object Model o Modelo de Objetos de Documentos). Dicho DOM está formado por los objetos u elementos que forman una página web ordenados jerárquicamente cuya estructura básica en HTML5 (en HTML 4.0 o XHTML es más extensa) es la siguiente:
<!DOCTYPE html><html> <head> <title></title> <link [parámetros] /> <script [parámetro] /> </head> <body>[resto de componenetes como cabeceras, div, header, footer, etc]</body></html>Cómo sabemos la declaración del tipo de documento, en este caso
<!DOCTYPE html> , indica al navegador web la manera de mostrar la página y puede afectar al funcionamiento de CSS y Javascript. Por ello hay que incluir siempre la etiqueta de tipo de documento, ¡no nos la olvidemos, no funcione las cosas y perdamos horas dándonos cabezazos contra nuestro propio muro!.¿Nos hemos dado cuenta de una cosita en el código?, efectivamente, la estructura está jerarquizada mediante las etiquetas de apertura y cierre (
<html></html>, <head></head>, etc). Dichas etiquetas permiten al navegador conocer donde empieza y acaba la instrucción para poder representarla.2. Qué ofrece HTML5
Lo que ofrece esta nueva versión de HTML lo ha extraído el W3C de las distintas páginas web existentes en la WWW extrayendo de los nombres más usados de los id's de los elementos y que tuviesen un sentido semántico. Veamos a continuación los nuevos elementos más usados:
- header: Cabecera de la página.
- nav: Barra o menú de navegación de la página.
- section: Sección de la página donde van los artículos.
- article: Artículos de la página.
- aside: Nota o explicación. También para agregar contenido secundario como una barra lateral de enlaces.
- figure: Especifican una figura como una imagen, gráfico, foto, etc.
- figcaption: Permite asociar un texto al pie de la etiqueta figure.
- hgroup: Agrupaciones para las etiquetas de encabezado.
- mark: Indica la importancia de un elemento.
- time: Para manejar fechas y horas.
- dialog: Para cuadros de diálogos.
- progress: Para una barra de progreso.
- footer: Pié de lapágina.
- device: Para indicar el tipo de dispositivo a acceder.
- canvas: Para poder realizar dibujos mediante Javascript.
- audio: Para poder reproducir audio en la página.
- video: Para poder reproducir vídeo en la página.
También ofrece mejoras en la etiqueta
<input> ya que permite nuevos tipos y hace más sencilla la validación de datos introducidos.Para entender mejor la nueva estructura veamos el siguiente dibujo:
El resto de las etiquetas estarían dentro de este esquema, generalmente, en
<article> o <aside>.3. Etiquetas HTML5
Pasemos a ver las distintas etiquetas básicas para que una página web funcione correctamente:
<!DOCTYPE html>: Permite al navegador saber que tiene que a interpretar un documento del tipo HTML o página web. Esto hace que reaccione de una manera predeterminada al código que encuentre a continuación, por ejemplo, sabrá cómo interpretar el código Javascript o CSS .<html></html>: Le indica al navegador que la infrmación del documento está escrita en el lenguaje HTML.<head></head>: Indica al navegador que va a interpretar el encabezado de la página HTML o la sección si se ha definido dentro de esta. Aquí se indica la siguiente información:
<title></tile>: El título de la página. Este valor aparecerá en la parte superior del navegador o en la pestaña pertinente.<link />: Indica la hoja de estilo a aplicar. Su formato es:<link rel="stylesheet" href=[ruta donde está la hoja de estilo] type="text/css" />. Podemos ver que la etiqueta posee el cierre al fina de la misma con/>. El valor href poseerá la ruta donde está almacenada la hoja de estilo CSS, por ejemplo,href="css/mihoja.css".<style></style>: Permite escribir código css directamente en la página, sin necesitar referencia a una hoja de estilo como vimos en el punto anterior. Hay que tener cuidado si usamos esta etiqueta y la del punto anterior, pues si en ambas se intenta modificar el mismo elemento sólo se tendrá en cuenta el estilo de la última etiqueta.<meta />: Son etiquetas para metadatos de la página y habrá una por cada tipo de metadatos (autoría, licencia, keywords, etc). Especial interés hay que prestar al tipo de etiqueta keywords pues es el que usan los motores de búsqueda para la indexación de los resultados en sus páginas. Ejemplo:<meta name="keywords" content="curso de internet, curs internt" />. Podemos observar en el ejemplo que los distintos valores van separados por comas y además el segundo posee errores sintácticos, es aposta puesto que el usuario puede teclear mal el texto a buscar en el buscador y de esta forma ayudamos a nuestra página a salir en dicho buscador si la búsqueda mal tecleada coincide con este texto. Hay que tener cuidado con esto porque si lo haces en exceso los motores de búsqueda te penalizarán en la posición. Existen muchos atributos meta con sus distintos valores que veremos en entradas dedicadas a HTML5.<script></script>: Para escribir directamente código Javascript que afecte a la página o para hacer una referencia a un fichero Javascript externo. Por ejemplo:<script src="http://jquery-1.11.1.min.js"></script>
<body></body>: El cuerpo principal de la página. Es la parte del documento HTML que se mostrará al usuario en el navegador. Posee variedad de etiquetas dependiendo del tipo de elementos que queramos usar.<footer></footer>: Indica al navegador que va a interpretar el pié de la página HTML o de la sección si se ha definido dentro de esta. La información indicada en esta parte se refiere a la sección o página donde se ha definido, por ejemplo en el caso de una sección pueden ser las etiquetas a la cual pertenece y en caso de la página lo más normal es que sea el menú principal y los "Términos y Condiciones" de la misma.
En futuras entradas hablaremos más en profundidad de las etiquetas, ¡con ejemplos!, así como del HTML5. Valga esta entrada como primera toma de contacto.
¡Gracias por leerme!.
No hay comentarios:
Publicar un comentario