HTML 5 - Introducció
El llenguatge HTML 5 és un llenguatge pensat per a la publicació de documents a través d'un navegador. Per tant, no es centra en l'estructura de la informació sinó en quina estructura es vol donar per a la seva visualització. HTML i XML tenen com a origen el llenguatge SGML i, per tant, moltes de les regles de SGML són també comunes per als dos llenguatges. Tot i això, el llenguatge HTML és bastant menys restrictiu que el llenguatge XML. Algunes de les diferències entre HTML i XML són:
- HTML no obliga a tancar totes les etiquetes.
- HTML és case-insensitive
- HTML està format per un conjunt finit d'etiquetes i atributs.
HTML 5 - Estructura document
En tot document HTML es poden diferenciar tres parts: la declaració del tipus de document, un capçalera i el contingut propi del document.
Declaració tipus document
La declaració del tipus de document sempre s'ha de fer a l'inici del document. Utilitzem la paraula reservada DOCTYPE per a realitzar la declaració. En aquesta declaració s'indica que s'utilitzarà el llenguatge HTML, la versió que s'utilitzarà i en el cas que hi hagi diferents ramificacions dins una versió, quina d'elles s'utilitzarà. Per exemple, en HTML 4 disposem de diferents tipus de declaracions:
<!-- Declaració per HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Declaració per HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Declaració per HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Per sort, la declaració d'un document HTML 5 és força més simple:
<!-- Declaració document HTML 5 -->
<!DOCTYPE html>
Capçalera document HTML 5
Tot document HTML es pot visualitzar en forma d'arbre, on cada una de les etiquetes és un node de l'arbre.
Com es pot visualitzar en la imatge, tots els documents HTML tenen com a node arrel l'etiqueta "html". Després de l'etiqueta "html" hi ha l'etiqueta "head" i l'etiqueta "body". En aquest cas, l'ordre és important i sempre cal especificar primer l'etiqueta "head".
L'etiqueta "head" és el node arrel del que hem anomenat la capçalera del document. Dins de la capçalera s'hi emmagatzemen tots els elements no visibles en el navegador i com a mínim sempre inclourà l'etiqueta "title": aquesta és l'única informació visible en la pantalla continguda en l'etiqueta "head".
En l'etiqueta "head" és recomanable afegir l'atribut "lang" (language) que determina l'idioma del text del document (no de les etiquetes!). Alguns dels valors comuns relacionats amb l'atribut "lang" són: "en" per anglès (english), "ca" per a català, "es" per castellà, ... En el següent link hi ha una llista completa de tots els idiomes amb la seva codificació: llista completa.
Contingut document HTML 5
L'etiqueta "body" sempre s'ubica després del tancament de l'etiqueta "head". En el body s'hi detallen totes aquelles etiquetes que ens han de permetre estructurar la presentació de la informació: capçalera de plana, peu de plana, ... com el propi contingut: paràgrafs, títols, enllaços ...
Creació i validació document HTML 5
Per a crear els documents HTML utilitzarem l'editor Brackets. Es tracta d'un editor disponible per als sistemes operatius Linux, Windows i Mac. Aquest editor té algunes funcionalitats com el tancament automàtic d'etiquetes que ens ajuda a minimitzar el nombre d'errors tipogràfics en l'elaboració dels docuemnts HTML.
Windows
Video: Instal·lació navegador Opera en un sistema Windows
Video: Instal·lació editor Brackets en un sistema Windows
Linux
Video: Instal·lació navegador Opera en Linux Debian/Ubuntu
https://www.youtube.com/watch?v=Y9V0WzMtE-8 Video: Instal·lació editor Brackets en Linux Debian
Video: Instal·lació navegador Opera en un sistema Windows
Sempre que haguem finalitzat un document HTML és una bona pràctica procedir a la seva validació: validant el document sabem que no s'han comès errors en el document. Els documents HTML es poden validar a través de la web: https://validator.w3.org/
Video: Creació i validació document HTML 5
<!DOCTYPE html> <!-- Document type declaration for HTML 5 -->
<html lang="en"> <!-- Root element is always html tag. "lang" attribute is recomended -->
<head> <!-- Defining head section for document -->
<title>Introduction to HTML 5</title> <!-- Visible on window title space browser -->
<meta charset="utf-8"> <!-- Defining character set for document -->
</head>
<body> <!-- Document's contents -->
<h1>HTML 5 Introduction</h1>
<p>A very simple HTML 5 document ... </p>
</body>
</html>