« Le langage HTML/Introduction » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
TouzaxA (discussion | contributions)
Vers le HTML5
Ligne 5 : Ligne 5 :
Le XHTML est quant à lui une évolution du HTML ; le sigle signifie ''Extensible Hypertext Markup Language''. Nous verrons plus loin la différence entre les deux, mais la plupart des informations sont valables pour les deux langages. Le terme (X)HTML signifie donc « HTML ou XHTML ».
Le XHTML est quant à lui une évolution du HTML ; le sigle signifie ''Extensible Hypertext Markup Language''. Nous verrons plus loin la différence entre les deux, mais la plupart des informations sont valables pour les deux langages. Le terme (X)HTML signifie donc « HTML ou XHTML ».


Finalement, ce langage a abouti à une nouvelle version: le HTML5. Cette version possède des ajouts pour les médias (audio, vidéo, application interactives avec CSS3/Javascript). C'est de cette version que ce livre traitera.
== Pourquoi apprendre le (X)HTML ? ==


== Pourquoi apprendre le HTML5 ? ==
Un document (X)HTML est avant tout un document texte (c'est-à-dire lisible par un humain), qui contient une certaine syntaxe afin de mettre en forme ou de décrire ce document. Son nom de fichier a généralement le suffixe <code>.html</code> (réduit à <code>.htm</code> sur les systèmes d'exploitation ne supportant pas plus de 3 caractères de suffixe).


Un document HTML5 est avant tout un document texte (c'est-à-dire lisible par un humain), qui contient une certaine syntaxe afin de mettre en forme ou de décrire ce document. Son nom de fichier a généralement le suffixe <code>.html</code> (réduit à <code>.htm</code> sur les systèmes d'exploitation ne supportant pas plus de 3 caractères de suffixe).
L'immense majorité des gens font leur page Web à l'aide d'un logiciel avec une interface graphique, en utilisant la souris et en ayant un rendu immédiat ; il en existe des gratuits. Ce logiciel génère du code (X)HTML.

L'immense majorité des gens font leur page Web à l'aide d'un logiciel avec une interface graphique, en utilisant la souris et en ayant un rendu immédiat ; il en existe des gratuits. Ce logiciel génère du code HTML5.


Pourquoi alors vouloir taper soi-même du code ?
Pourquoi alors vouloir taper soi-même du code ?


Chacun aura sa réponse à cette question. Cela peut être par curiosité, pour comprendre comment marche le Web ; ou bien encore pour « nettoyer » le code (X)HTML généré par le logiciel, le rendre plus léger.
Chacun aura sa réponse à cette question. Cela peut être par curiosité, pour comprendre comment marche le Web ; ou bien encore pour « nettoyer » le code HTML généré par le logiciel, le rendre plus léger.


<!-- À réécrire en adaptant à la nouvelle orientation HTML + XHTML
<!-- À réécrire en adaptant à la nouvelle orientation HTML + XHTML
Ligne 32 : Ligne 34 :
Bien sûr, pour des raisons esthétiques — tout à fait louables — certains voudront faire du « placement au millimètre ». C'est tout à fait possible, mais plus vous voulez faire des choses compliquées, plus le code devient compliqué… Et surtout, le risque est de faire « n'importe quoi ». Il est par exemple simple de créer des tableaux imbriqués pour placer le texte comme on veut, mais avez-vous pensé aux mal-voyants ? S'ils utilisent un logiciel de lecture vocale, celui-ci lit le contenu des cellules linéairement, de gauche à droite et de haut en bas ; est-ce bien ce que vous désirez ? Voir à ce sujet l'article de Wikipédia ''[[w:Accessibilité du Web|Accessibilité du Web]]''.
Bien sûr, pour des raisons esthétiques — tout à fait louables — certains voudront faire du « placement au millimètre ». C'est tout à fait possible, mais plus vous voulez faire des choses compliquées, plus le code devient compliqué… Et surtout, le risque est de faire « n'importe quoi ». Il est par exemple simple de créer des tableaux imbriqués pour placer le texte comme on veut, mais avez-vous pensé aux mal-voyants ? S'ils utilisent un logiciel de lecture vocale, celui-ci lit le contenu des cellules linéairement, de gauche à droite et de haut en bas ; est-ce bien ce que vous désirez ? Voir à ce sujet l'article de Wikipédia ''[[w:Accessibilité du Web|Accessibilité du Web]]''.


Dans un premier temps, le recours au (X)HTML revient à renoncer à la mise en forme pour la déléguer au navigateur. Ceci peut être frustrant, mais vous gagnez en simplicité et en universalité. La mise en forme viendra dans un deuxième temps, avec le CSS — Rome ne s'est pas faite en un jour…
Dans un premier temps, le recours au HTML5 revient à renoncer à la mise en forme pour la déléguer au navigateur. Ceci peut être frustrant, mais vous gagnez en simplicité et en universalité. La mise en forme viendra dans un deuxième temps, avec le CSS — Rome ne s'est pas faite en un jour…


Notons que le HTML ayant été créé avant le CSS, il contient de nombreux éléments de mise en forme. On trouvera donc de nombreuses références (ouvrages, pages en lignes) et de nombreux exemples (pages Web) utilisant ces balises. Nous vous invitons à ne pas suivre ces « mauvais exemples ».
Notons que le HTML ayant été créé avant le CSS, il contient de nombreux éléments de mise en forme. On trouvera donc de nombreuses références (ouvrages, pages en lignes) et de nombreux exemples (pages Web) utilisant ces balises. Nous vous invitons à ne pas suivre ces « mauvais exemples ».
Ligne 102 : Ligne 104 :
{{fin cadre}}
{{fin cadre}}


<!--Désormais inutile
== Alors, HTML ou XHTML ? ==
== Alors, HTML/XHTML ou HTML5 ? ==


=== Késako ===
=== Késako ===


Nous avons évoqué rapidement tout à l'heure le XHTML. Quelle est la différence entre le HTML et le XHTML, vous demandez vous ?
Nous avons évoqué rapidement tout à l'heure le XHTML et le HTML5. Quelle est la différence entre le XHTML et le HTML5, vous demandez vous ?


Conçu initialement comme un langage simplifié par rapport au SGML, le HTML doit une part de son succès à sa tolérance syntaxique, qui en facilite à première vue l'usage : ainsi, par exemple, toutes les balises ne sont pas nécessairement fermées, l'écriture du code est indifférente à la casse, les valeurs d'attributs peuvent dans certains cas ne pas être entourées de guillemets, … Cependant, cette facilité apparente a son revers : le code HTML ne se prête pas aux traitements automatisés qui sont en revanche l'un des atouts des formats [[Programmation XML|XML]].
Conçu initialement comme un langage simplifié par rapport au SGML, le HTML doit une part de son succès à sa tolérance syntaxique, qui en facilite à première vue l'usage : ainsi, par exemple, toutes les balises ne sont pas nécessairement fermées, l'écriture du code est indifférente à la casse, les valeurs d'attributs peuvent dans certains cas ne pas être entourées de guillemets, … Cependant, cette facilité apparente a son revers : le code HTML ne se prête pas aux traitements automatisés qui sont en revanche l'un des atouts des formats [[Programmation XML|XML]].
Ligne 142 : Ligne 145 :
Comment être sûr que votre site est valide ? Et bien en le faisant passer par le validateur bien sûr ! Par exemple :
Comment être sûr que votre site est valide ? Et bien en le faisant passer par le validateur bien sûr ! Par exemple :
* [http://validator.w3.org/ le validateur du W3C] ;
* [http://validator.w3.org/ le validateur du W3C] ;
* [http://www.htmlhelp.com/tools/validator/index.html.fr celui du WDG].
* [http://www.htmlhelp.com/tools/validator/index.html.fr celui du WDG].-->


== Historique ==
== Historique ==
Ligne 169 : Ligne 172 :
* [http://www.martiusweb.net/tutoriaux,01_00.html Martius web : cours XHTML/CSS]
* [http://www.martiusweb.net/tutoriaux,01_00.html Martius web : cours XHTML/CSS]
* [http://www.siteduzero.com Le site du zéro]
* [http://www.siteduzero.com Le site du zéro]
** [http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html Les cours de XHTML et CSS]
** [http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html Les cours de HTML5 et CSS]

Version du 29 mai 2013 à 13:29

HTML est un langage de description de document utilisé sur Internet pour faire des pages Web. Son sigle signifie « HyperText Markup Language » en anglais, littéralement « langage de marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est interprété par un navigateur Web.

Le XHTML est quant à lui une évolution du HTML ; le sigle signifie Extensible Hypertext Markup Language. Nous verrons plus loin la différence entre les deux, mais la plupart des informations sont valables pour les deux langages. Le terme (X)HTML signifie donc « HTML ou XHTML ».

Finalement, ce langage a abouti à une nouvelle version: le HTML5. Cette version possède des ajouts pour les médias (audio, vidéo, application interactives avec CSS3/Javascript). C'est de cette version que ce livre traitera.

Pourquoi apprendre le HTML5 ?

Un document HTML5 est avant tout un document texte (c'est-à-dire lisible par un humain), qui contient une certaine syntaxe afin de mettre en forme ou de décrire ce document. Son nom de fichier a généralement le suffixe .html (réduit à .htm sur les systèmes d'exploitation ne supportant pas plus de 3 caractères de suffixe).

L'immense majorité des gens font leur page Web à l'aide d'un logiciel avec une interface graphique, en utilisant la souris et en ayant un rendu immédiat ; il en existe des gratuits. Ce logiciel génère du code HTML5.

Pourquoi alors vouloir taper soi-même du code ?

Chacun aura sa réponse à cette question. Cela peut être par curiosité, pour comprendre comment marche le Web ; ou bien encore pour « nettoyer » le code HTML généré par le logiciel, le rendre plus léger.


Description de document ou mise en forme ?

Il faut bien comprendre la différence entre « description de document » et « mise en forme ». « Décrire » un document, c'est indiquer la « fonction » de telle ou telle partie du texte : citation, passage important, titre, paragraphe… La mise en forme, elle, est du ressort du navigateur : c'est lui qui décide comment sera mis en forme un paragraphe (en général avec un espace vertical avant et après), une citation (en général avec une marge plus importante), un passage important (en général en italique ou en gras), un titre (en général en plus grand avec un espace vertical avant et après)…

Vous pouvez donner des indications au navigateur en utilisant une feuille de style (voir Le langage CSS mais il est préférable de lire Le langage HTML avant).

Bien sûr, pour des raisons esthétiques — tout à fait louables — certains voudront faire du « placement au millimètre ». C'est tout à fait possible, mais plus vous voulez faire des choses compliquées, plus le code devient compliqué… Et surtout, le risque est de faire « n'importe quoi ». Il est par exemple simple de créer des tableaux imbriqués pour placer le texte comme on veut, mais avez-vous pensé aux mal-voyants ? S'ils utilisent un logiciel de lecture vocale, celui-ci lit le contenu des cellules linéairement, de gauche à droite et de haut en bas ; est-ce bien ce que vous désirez ? Voir à ce sujet l'article de Wikipédia Accessibilité du Web.

Dans un premier temps, le recours au HTML5 revient à renoncer à la mise en forme pour la déléguer au navigateur. Ceci peut être frustrant, mais vous gagnez en simplicité et en universalité. La mise en forme viendra dans un deuxième temps, avec le CSS — Rome ne s'est pas faite en un jour…

Notons que le HTML ayant été créé avant le CSS, il contient de nombreux éléments de mise en forme. On trouvera donc de nombreuses références (ouvrages, pages en lignes) et de nombreux exemples (pages Web) utilisant ces balises. Nous vous invitons à ne pas suivre ces « mauvais exemples ».

Balises et compagnie

Pour faire une page HTML (c'est à dire une page Web) vous n'avez pas besoin d'un logiciel spécial, il suffit d'utiliser un éditeur de texte standard (comme le Bloc-note de Windows ou TextEdit sur Mac) et d'enregistrer vos pages avec un nom finissant par .html. Une page Web est en fait un simple fichier texte contenant du code HTML qui est ensuite interprété par le navigateur.


Note
Dans le protocole HTTP, ce n'est pas l'extension du fichier qui définit qu'un fichier est du HTML, mais l'en-tête (voir plus loin)… en théorie. Si un fichier HTML devrait pouvoir avoir n'importe quelle extension, dans la pratique, le navigateur se base souvent sur l'extension du fichier et non pas sur l'en-tête.

Un document HTML est constitué de texte normal — la plupart du temps c'est ce que vous voulez afficher à l'écran — et de HTML à proprement parler sous formes de balises (ou tags en anglais). Les balises servent à dire des choses au navigateur comme « ça c'est un titre », « ça c'est en emphase », « là je veux une image », « là je veux un lien » etc. Affichez ensuite la page dans votre navigateur. Une balise est facilement reconnaissable car elle est toujours entre < et >.

Voici un texte en <em>emphase</em>.
donne :

Voici un texte en emphase.

Dans cet exemple, seul le mot « emphase » sera en emphase car il est borné par les balises <em> et </em>.[1]

On voit déjà qu'il y a deux types de balises. Les balises qui vont par deux, pour dire des choses comme « là, commence le texte en emphase » et « là, termine le texte en emphase », et les balises qui sont toutes seules, comme pour le « là je veux une image ». Observez qu'une balise de fin s'écrit exactement comme la balise de début mais avec une barre de fraction « / » (slash en anglais) avant son nom (em). On appelle tout ce qui est situé entre une balise de début et de fin un élément. On a donc ici un élément « em » contenant le texte « emphase ».

Une balise de début peut également contenir un ou plusieurs attributs, qui sont des paramètres permettant de préciser certaines caractéristiques de l'élément. Le nom de la balise dit de faire quelque chose, et un attribut donne des précisions sur comment le faire. Par exemple, la balise pour faire un lien est « a » (pour anchor, « ancre »). Mais si on fait juste <a>mon super lien</a>, le navigateur ne saura pas où doit mener ce lien. Pour ça il y a l'attribut « href » (pour hypertext reference, « référence hypertexte ») :

<a href="http://fr.wikipedia.org/">Wikipédia</a> est une encyclopédie libre.
donne :

Wikipédia est une encyclopédie libre.

L'attribut « href » indique la destination du lien. Comme vous pouvez le voir dans l'exemple, les attributs sont placés dans la balise de début (il ne faut pas les remettre dans la balise de fin), après le nom de l'élément. Le contenu d'un attribut est toujours délimité par deux guillemets « " » ou deux apostrophes « ' », précédés du signe égal « = ». Vous pouvez bien sûr mettre plusieurs attributs en les séparant par des espaces. Dans certains cas, le navigateur comprendra ce que vous voulez même si vous ne mettez pas les guillemets, mais il vaut mieux prendre l'habitude d'en mettre partout.

Un exemple de balise qui va toute seule maintenant :

<img src="../images/wiki-textbook.png" />
donne :

Si vous avez tout suivi, vous devriez reconnaître qu'on a la balise « img » (qui assez logiquement veut dire image) et l'attribut « src » (pour source) qui a pour valeur « ../images/wiki-textbook.png ». Et tout ça nous donne une jolie balise. Ce code affiche en fait l'image située à l'adresse « http://fr.wikibooks.org/images/wiki-textbook.png »[2], soit le logo de Wikibooks


Remarque
La barre de fraction finale « / » dans une balise isolée se met en XHTML, mais pas en HTML ; l'exemple ci-dessus en HTML donne <img src="http://fr.wikibooks.org/images/wiki-textbook.png">. Nous reviendrons la-dessus un peu plus bas.

Dernier point important sur les balises, il faut penser à bien les imbriquer : une balise ouvrante doit toujours être placée avant une balise fermante.

Il est interdit de « croiser les balises » c'est-à-dire qu'il n'est pas permis de fermer une balise alors qu'une autre, ouverte après elle, n'est pas encore fermée. Un exemple de balises correctement agencées (ne vous inquiétez pas si vous ne comprenez pas les balises elle seront expliquées plus tard) :

Un texte qui <em>parle de <strong>choses</strong> intéressantes</em>

donne :

Un texte qui parle de choses intéressantes

Un exemple de mauvaise imbrication des balises :

Un texte qui <em>parle de <strong>choses</em> intéressantes</strong>

Le code correct pour entrelacer les styles de texte serait :

Un texte qui <em>parle de <strong>choses</strong></em> <strong>intéressantes</strong>
ce qui donne :

Un texte qui parle de choses intéressantes


Historique

Le HTML est issu du projet SGML (Standard Generalized Markup Language, initié en 1979 par IBM et publié comme norme en 1986, la norme ISO 8879:1986). Le HTML date du début des années 1990. Les premières spécifications indépendante d'un éditeur de navigateur, le RFC 1866, est publié en 1995 ; c'est le HTML version 2.0. La dernière version du HTML (la version 4.01) date de fin 1999, et la première version du XHTML (la version 1.0) date de début 2000.

La première version du CSS (le CSS1), permettant les feuilles de style, date de 1996, mais c'est seulement en 2000 qu'un navigateur a intégré totalement ses spécifications. Auparavant, les navigateurs ont développé chacun leurs balises de mise en forme, souvent indépendamment du W3C.

Voir l'article de Wikipédia Hypertext markup language > Historique.

Notes

  1. En général, le texte en emphase est mis en italique, mais ceci peut varier ; on peut par exemple définir que la mise en emphase se ferait en utilisant une couleur différente.
  2. le sens des deux points « .. » sera expliqué plus loin, il suffit de comprendre qu'ils seront remplacés par « http://fr.wikibooks.org/ »

Liens externes

Wikipédia propose un article sur : « Hypertext Markup Language ».

Wikiversité propose un module sur « Hypertext Markup Language ».

Wikiversité propose un module sur « Extensible Hypertext Markup Language ».