Le traitement de texte
Si vous avez l’habitude du traitement de texte ou la PAO, vous savez l’importance des bonnes pratiques comme les tabulations ou l’application de style. Il existe des techniques rapides aux résultats proches du bon travail, très plébiscités par les débutants, mais rarement efficaces. L’affichage des caractères masqués vous dévoile en clin d’œil le subterfuge. Il en va de même en programmation.
Voir le code d’un site, vous révèle la mécanique derrière l’affichage.
Une page web se structure en HTML que l’on associe à un autre langage, le CSS. Celui-ci ajoute une description visuelle aux éléments, nous étudierons sa syntaxe dans un prochain chapitre.
Les fichiers
Pour commencer, créez un nouveau fichier HTML vide et ouvrez-le avec votre navigateur.
En détails, lancez votre éditeur de code, faites « Fichier > Nouveau » et « Enregistrer sous… » saisissez mapageweb.html pour nommer votre fichier vide dans un dossier facilement identifiable. Si vous avez des difficultés avec cette étape, trouvez un livre sur votre système d’exploitation et lisez-le.
Retrouvez votre fichier mapageweb.html et ouvrez-le, si le double-clic ne vous lance pas un navigateur, plusieurs alternatives sont possibles, « clic droit puis ouvrir avec » ou glissez celui-ci sur l’icône ou la fenêtre de votre navigateur, on peut aussi prendre quelques minutes à régler les préférences de son système pour ouvrir tous les fichiers .html avec le navigateur de son choix.
Petite mise au point, les fichiers de votre ordinateur ont souvent des extensions, plusieurs lettres après un point en fin de nom, réglez votre système pour les afficher. Les fichiers par leurs extensions s’associent aux logiciels de manière plus ou moins pertinente lors de l’installation des logiciels.
Il est important de comprendre que ces extensions ne sont pas toujours réservées à leur logiciel même si parfois c’est inévitable (un fichier InDesign ne s’ouvre qu’avec celui-ci). En programmation web, bien souvent l’édition des fichiers peut se faire sur plusieurs logiciels, sachez que vous pouvez passer d’un éditeur à un autre à tout moment, commencer votre site sous Brackets et finir sous SublimeText comme bon vous semble. On peut aussi travailler en équipe avec chacun son éditeur.
je teste, tu testes, il teste…
Nous venons de préparer notre première page web, elle est chargée dans le navigateur et ouverte dans un éditeur. Continuons nos tests. Saisissez ce texte :
Le vif zéphyr jubile sur les kumquats du clown gracieux.
Zut ! Je crois que le chien Sambuca préfère le whisky revigorant
au doux porto.
Sauvegardez votre fichier, retournez sur votre navigateur et rafraichissez votre page (cmd+s, cmd+tab, cmd+r ou ctrl+s,alt+tab, F5).
Deux problèmes apparaissent, les caractères accentués ne sont pas supportés et les sauts de ligne ne sont pas respectés. Pour les accents, il s’agit d’un problème d’encodage, votre éditeur sauvegarde en UTF‑8 et votre navigateur est probablement réglé sur iso-8859–1. Pour les sauts de ligne, ils sont considérés comme des espaces. Tout ça ressemble à des bugs, mais il s’agit plutôt de fonctions.
Balise
Pour écrire en html, on utilise des balises, elles délimitent et définissent les éléments.
Par exemple, la balise <p> servira à définir et délimiter un élément paragraphe. La plupart des balises marchent par paire, la première ouvre <p> pour marquer le début, la seconde ferme </p> pour marquer la fin.
<p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p>
Le principe est simple et bien souvent l’éditeur vous aide à l’écriture. Pour répondre à nos besoins, il est bien sur possible d’imbriquer les balises.
Certaines balises sont dites auto-fermantes, elles s’ouvrent et se ferment pour définir l’élément, c’est le cas des meta <meta>, images <img> et d’autres éléments.
La balise <strong> met en avant une portion de texte, généralement en l’affichant en gras.
<p>Harder, Better, Faster, <strong>Stronger</strong></p>
Une seule précaution à prendre, on ne chevauche pas les balises.
<p>Harder, Better, Faster, <strong>Stronger</p></strong>
Il existe une vingtaine de balises omniprésentes dans toutes les pages web pour répondre à 90% de nos besoins, nous verrons cette liste plus tard, mais avant cela, nous allons construire notre première page.
Nouveau document
Pour que le navigateur puisse interpréter notre code, il est nécessaire de définir quelques balises. Voici un gabarit pour débuter.
<!DOCTYPE html> <html> <head> <title>Mon Document</title> <meta charset="UTF-8"> </head> <body> </body> </html>
Ce code affiche une page vide en HTML5, avec un titre et un encodage adapté à nos usages.
En détail, la première ligne déclare un document en HTML5. Ensuite débute notre document <html>. Celui-ci contient une tête et un corps <head> et <body>. Dans la tête, on trouve une balise pour le titre <title> (visible dans l’onglet de votre navigateur et sur les résultats des moteurs de recherches) et une autre pour un réglage du document <meta>. C’est dans le corps, qu’on va ajouter nos éléments, notre contenu.
Les navigateurs sont assez souples, on peut écrire du mauvais code et obtenir visuellement un bon résultat, le risque étant d’avoir un affichage catastrophique sur certains appareils ou des problèmes pour l’évolution du projet. Vérifier deux fois votre code html avant d’aller plus loin.
Les erreurs fréquentes sont :
- une erreur sur un nom de balise ou attribut, souvent « src » pour source devient « scr » ;
- une mauvaise imbrication ;
- la confusion entre « : » et « = » ;
- le slashe mal placé
</body>et<body/>; - l’oubli de fermeture sur une balise ou un guillemet.
Quelques remarques, le code de cet exemple est indenté, il n’y a pas d’obligation mais cela améliore sa lisibilité, vous pouvez l’écrire sur une seule ligne, le résultat sera similaire.
Attribut
Dans notre document, la balise meta utilise l’attribut charset suivi d’un signe égale et d’une valeur entre guillemets simples ou doubles, vous avez le choix entre "UTF-8" ou 'UTF-8', si vous avez des guillemets français « UTF-8 » ou d’autres signes, ça ne marchera pas.
Les attributs viennent compléter les caractéristiques des balises, veuillez à bien respecter leur orthographe.
Les commentaires
Les commentaires sont fortement utilisés dans la programmation. Ils permettent de documenter, d’annoter ou mieux suivre votre travail. Aide-mémoire, to-do-list, crédits, private-joke, notes de version, séparation visuelle, ou code délaissé, vous trouverez rapidement leurs usages.
<!-- ceci est un commentaire -->
Gardez bien en tête que les commentaires HTML et CSS sont invisibles dans le navigateur mais lisibles et accessibles par tous dans les sources.
Grammaire et vocabulaire
Si vous avez bien suivi, vous maitrisez déjà toute la grammaire du HTML, il ne vous manque que le vocabulaire pour vous exprimer pleinement.
Comme dans toute langue, il existe des mots fréquents, rares, désuets et même nouveaux. Si vous voulez apprendre un langage, il faudra obligatoirement pratiquer, parler ou lire celui-ci. Vous trouverez en ligne de nombreux exemples didactiques, tous ne sont pas bons, sans erreurs ou actualisés. Vous avez aussi la possibilité d’inspecter n’importe quel site web à l’aide des outils de votre navigateur. Il existe de nombreuses références de qualité pour apprendre le vocabulaire du HTML, citons le site du W3C et le site MDN de Mozilla (https://developer.mozilla.org/). Les manières de baliser un document web sont infinies, elles sont dépendantes des besoins et du planning du projet. Notez aussi que les moteurs de recherches influencent aussi certaines pratiques.
Caractères spéciaux
Trois caractères ont besoins d’être « échappé » car utilisé en html.
> greater-than > < less-than < & ampersand & esperluette
Les espaces spéciaux existent :
non-breaking space insécable Plus rarement utilisées : en space :   or   (em = cadratin) em space :   or   3-per-em space :   4-per-em space :   6-per-em space :   figure space :   punctuation space :   thin space :   or   hair space :  
Conclusion
En code
<!DOCTYPE html> <!--ceci est un document de type HTML5--> <html> <!-- html --> <head> <!-- head --> <title>Mon Document</title> <!-- le titre de la page (dans Google, dans les onglets…) --> <meta charset="UTF-8"> <!-- pour conserver l'encodage et les accents --> </head><!-- fin du head--> <body><!-- body (la partie « visible ») --> <p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p> <!-- un paragraphe --> </body><!-- on ferme le body--> </html><!-- on ferme le html -->
Pour être plus didactique, tous les exemples de ce site sont sur la plateforme CodePen.
Attention, sur CodePen contrairement à l’exemple ci-dessous, le HTML éditable correspond au <body><!-- ici --></body>
See the Pen bases by Benoît Wimart (@benoitwimart) on CodePen.dark
En version CodePen propre :
See the Pen bases codepen by Benoît Wimart (@benoitwimart) on CodePen.dark