Vous souhaitez développer un site web ? Vous êtes au bon endroit.
Comment on fait ?
Pour commencer, tout bon travailleur possède de bons outils, on va commencer par là. Il va nous falloir un bon éditeur de code HTML, qui nous mette le code en couleurs. Il en existe plein, cherchez avec un moteur de recherche aux mots clés « IDE HTML », vous en trouverez pléthore. Personnellement j’utiliserais PSPad disponible sur http://www.pspad.com.
Une fois que vous aurez votre IDE (Integrated Development Environment – Environnement de Développement Intégré, IDE en français), vous pourrez aisément créer un fichier HTML.
Sous PSPad, cliquez sur le menu « Fichier » -> « Nouveau fichier », sélectionnez ensuite « HTML multihighlighter » et cliquez sur « OK ».
A l’heure où j’écris ces lignes, PSPad est encore par défaut en HTML 4, seulement ici on n’écrira que du HTML 5, compatible désormais avec tous les navigateurs, en particulier les mobiles.
Supprimez donc tout ([Ctrl]+[A], puis [Suppr.]), on va tout refaire de zéro.
Définition HTML
HTML signifie « HyperText Markup Language ». En français, ça donne « Langage de balisage hypertexte ». Ce n’est pas un langage de programmation à proprement parler, mais plutôt un langage de mise en forme de documents. Dans sa version 5, il possède de très nombreux atouts et permet d’éviter Adobe Flash, si on le combine proprement avec du CSS 3.
Structure de base d’un document HTML
Un document HTML commence toujours par un « doctype », suivit d’une balise « html », d’une entête de document, et d’un corps.
Dans sa version 5, le doctype a été grandement simplifié, aussi, pour définir que l’on sert de l’HTML 5 et non 4 ou autre, on commence le document ainsi :
<!DOCTYPE html>
Et c’est tout! Juste tel que, on définit de l’HTML 5. Avant cela, il fallait ajouter la version HTML utilisée. l’HTML étant pensé pour évoluer dans le temps, il n’y a plus de versioning.
Ensuite, on doit définir les balises « html » :
<html></html>
Une balise dite « ouvrante », et l’autre balise dite « fermante ».
On notera qu’une balise s’écrira toujours de la même façons :
<nombalise> <nombaliseouverte></nombaliseouverte>
Entre nos 2 balises « html », on doit y placer l’entête, obligatoire :
<head></head>
Puis un corps de document, juste après l’entête :
<body></body>
Ce qui nous donnera au final, si on formate le code et laissons de la place pour la suite :
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
La balise <title>
La balise « title » permet de définir un titre à votre document. Elle se place dans l’entête. Définissons un titre à notre document HTML :
<title>Tutoriel HTML 5</title>
Vous avez remarqué ? On a écrit le titre du document entre les deux balises « title ». Ca sera comme ça pour toutes les balises permettant d’incorporer du texte.
Les attributs
Les balises peuvent comporter des attributs, mais ceux-ci sont aujourd’hui très peu exploité de nos jours, et ont quasiment disparu en HTML 5. Cependant certains restent toujours valide, aussi je vais vous en présenter un pour notre entête.
<meta charset="UTF-8">
Voila, l’attribut « charset » a été défini pour l’entête du document, et on lui a attribué la valeur « UTF-8 ». Dans PSPad, cliquez sur le menu « Format » et sélectionnez « UTF-8 » s’il n’est pas déjà sélectionné. PSPad se chargera de transcoder tout votre document html en utf-8.
En toute logique, la balise meta contenant le jeu de caractères utilisé dans le document devrait être définie avant le titre.
UTF-8 étant un standard à l’heure où j’écris ces lignes, je vous conseille vivement d’écrire toutes vos pages web avec ce jeu de caractères, permettant entre autres, l’utilisation des accents, tout en restant compatible avec le reste du monde (qui a dit « World Wide Web » ?).
Un attribut se place donc dans la balise elle-même, la balise pouvant contenir zéro, un, ou plusieurs attributs, et un attribut peut on non posséder une valeur. S’il possède une valeur, alors on la place entre deux guillemets.
Ca y’est, on a désormais un document valide HTML 5. Il ne reste plus qu’à le remplir un peu. Ecrivons un peu dans le corps du document et voyons ce que ça donne :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tutoriel HTML 5</title> </head> <body> J'apprends l'HTML 5. </body> </html>
Enregistrez le fichier sous « index.html », puis ouvrez-le avec votre navigateur favori. Pourquoi « index » et pas « tutoriel1 » par exemple ? Pour vous apprendre que quand on appelle une adresse internet en la terminant par un nom de dossier, le serveur web cherche en priorité la page « index.html ». L’entrée d’un site web se fait toujours par l’index, alors va falloir s’y habituer!
Et si on veut de la couleur ?
Eh bien, si on veut mettre un peu de couleur, en HTML 5 il nous faudra obligatoirement passer par une feuille de style, l’attribut « style », ou la balise « style » dans l’entête permettant de définir une feuille de style à l’intérieur même du document html. Seulement l’HTML 5 n’est plus qu’un langage de mise en forme générale du document et descriptif.
Je vous conseille donc d’aller voir du côté du CSS pour en apprendre plus. Je ne traiterais pas des couleurs mais uniquement de la mise en forme et de la partie description.
Quelques balises courantes
<h1> […] <h6>
Les balises <h1>, <h2>, <h3> … jusque <h6> permettent de décrire un titre d’entête à un paragraphe.
<h3>Titre de mon paragraphe</h3>
<p>
La balise <p> permet de décrire un paragraphe. On peut y incorporer une balise <hX> par exemple, ou d’autres balises que je vous montrerais plus tard.
<p>Mon paragraphe</p>
<hr>
Cette balise est une des exceptions html. Elle ne se ferme pas et permet de tracer une ligne horizontale.
<hr>
<div>
La balise <div> permet de créer un bloc brut et de regrouper des éléments en son sein.
<div> <h3>Mon titre</h3> <p>Mon paragraphe</p> </div>
<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>
Ces balises servent à créer des tableaux. <thead> permet de décrire l’entête d’un tableau, <tbody> son corps, et <tfoot> son pied. <tr> sert à créer une nouvelle ligne, <td> quant à elle, permet de créer une cellule. La balise <th> est similaire à la balise <td>, mais sert aux entêtes des tableaux. Si vous avez des données qui nécessitent une représentation de type tableur, ces balises peuvent vous être utile.
La balise <td> peut être accompagnée de l’attribut « colspan » pour spécifier le nombre de cellules qu’elle regroupe. Il existe aussi l’attribut « rowspan » pour regrouper une cellule sur plusieurs lignes.
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Provenance</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th>Fraise</th>
<td>Espagne</td>
<td>1.50€/kg</td>
</tr>
<tr>
<th>Pomme</th>
<td>France</td>
<td>1.25€/kg</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Produits d'Europe uniquement</td>
</tr>
</tfoot>
</table>
Certaines de ces balises, telles que <thead> ou <tfoot> sont optionnelles. Cependant, je vous conseille d’utiliser au maximum la bonne sémantique pour être bien compris que ce soit tant au niveau des navigateurs que des moteurs de recherches.
<span>
La balise <span> permet de regrouper des éléments sur une même ligne. Elle peut servir par exemple à coloriser une partie d’un texte ou le formater différemment (italique, gras, souligné, barré …).
<p>Petit paragraphe <span>d'une</span> ligne.</p>
Conclusions
Pour conclure, voila ce qu’il nous faut retenir: HTML est langage descriptif de documents, qui, en version 5, se voit accompagné de feuille(s) de style (CSS) pour la mise en page. Il faut bien différencier HTML et CSS.
J’ai volontairement omis certaines balises, d’une parce que je ne vais pas toutes les mettre, de deux parce que ceci n’est qu’une introduction, et de trois, parce qu’on en verra certaines d’entre elles dans d’autres articles.