cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu

Ce billet fait partie d’une sĂ©rie d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prĂ©vu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de maniĂšre inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Premier exercice

On va commencer par ouvrir un Ă©diteur de texte (Style NotePad sur Windows, gedit, xed ou mousepad sous _Linux₎.

HTML est un langage utilisant des balises. Cela signifie qu’on dĂ©coupe le document en zones qui commence et finisse par la mĂȘme balise.

Commençons par un le plus petit document HTML que vous puissiez écrire :

Code source :

<html>
  <head>
    <title>Ma premiĂšre page Web</title>
  </head>
  <body>
    Ma premiÚre page Web !
  </body>
</html>

Ce que vous devez obtenir dans votre Navigateur Web (Je vous encourage à utiliser Firefox) :

Vous noterez que le titre ne s’affiche pas dans la page, mais dans la barre de titre du navigateur, vous pouvez vĂ©rifier en utilisant ce lien (Sur tablette ou tĂ©lĂ©phone, pour faire apparaĂźtre le titre vous devrez crĂ©er un marque-page Ă  partir du document).

Avez-vous un problùme d’affichage lorsque vous avez ouvert la page depuis ce lien ? Nous y reviendrons plus loin


đŸ„‡ Consigne 🧠⇝🎓

Recopier le texte, on dira le code ci-dessus dans votre Ă©diteur.

Ensuite, vous sauvegarderez votre travail dans un fichier sous le nom ma-premiere-page-web.html.

  • Pour vous simplifier la vie, dans les noms de fichiers, je vous conseille de n’utiliser que les caractĂšres suivant : abcdefghijklmnopqrstuvwxyz-_..

Évitez les espaces, les majuscules, les accents et tout caractĂšre spĂ©cial dans ce nom, cela vous Ă©vitera des soucis par la suite.

  • Et le nom du fichier doit finir par .html.

  • Attention sur certain systĂšmes d’exploitation comme Windows, lorsqu’on renomme un fichier, l’extension n’est pas nĂ©cessairement modifiable avec la configuration par dĂ©faut (sous Windows, elle n’est mĂȘme pas visible). Il vous faudra ĂȘtre vigilant Ă  bien positionner cette extension Ă  la crĂ©ation du fichier.

Explications

Le document commence par <html> et fini par </html>. On dit qu’on « ouvre » la balise html puis qu’on la « referme ».

La structure d’une page HTML impose un certain nombre d’élĂ©ments, en particulier, la balise html doit contenir les balises suivantes :

  • head: C’est l’entĂȘte du document, qui contient des informations techniques, comme le titre (title).
  • body: C’est le corps (le contenu) du document. Dans notre cas, un petit texte


Fait l’exercice de recopier cette page et de la lancer dans votre navigateur (attention à l’extension du nom de fichier).


Second exercice

Techniquement, le fichier ci-dessus n’est pas valide, en tous les cas pas dans le sens du respect de la norme HTML : il manque deux choses.

Type de document

Une premiĂšre ligne qui sert d’identificateur pour le type de fichier. Cette ligne ne respecte pas exactement la norme HTML et ce n’est pas un problĂšme car techniquement, elle prĂ©cĂšde le document.

Cette ligne est la suivante :

<!DOCTYPE html>

Notez qu’il existe des variations, plus prĂ©cises, qui permettent de prĂ©ciser la version de la norme HTML utilisĂ©e par le document, voici quelques exemples :

  • Norme HTML 4.01 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Norme XHTML 1.1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Langue utilisée

La seconde chose qui manque est l’identification de la langue utilisĂ©e dans le document. Pour cela, on ajoute un attribut Ă  la balise html. Le nom de l’attribut est lang et la langue c’est le français, que nous noteront la forme fr.

Les valeurs d’attribut de langue sont dĂ©crites par une spĂ©cification de l’IETF appelĂ©e BCP 47.

<html lang="fr">

Une fois c’est deux Ă©lĂ©ments ajoutĂ©s, le document respecte la norme minimale, mais il reste d’autres choses Ă  amĂ©liorer pour qu’il puisse ĂȘtre bien affichĂ© dans le cas gĂ©nĂ©ral.

D’abord, il est souhaitable de prĂ©ciser l’encodage utilisĂ© pour le fichier texte. Ce point dĂ©pend de votre Ă©diteur et de votre systĂšme d’exploitation. Un Ă©diteur avancĂ© vous permettra de choisir l’encodage et dans ce cas, je vous conseille d’utiliser UTF-8.

Cet encodage devra ĂȘtre prĂ©cisĂ© au niveau de l’entĂȘte du document (dans la balise head) Ă  l’aide de la balise meta. Notez que la balise meta ne se ferme pas.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Un autre dĂ©tail Ă  amĂ©liorer est de mettre le texte dans une balise indiquant qu’il s’agit d’un paragraphe. Il s’agit de la balise p, cela permet de structurer le texte et nous le verrons plus tard, d’avoir un style d’affichage particulier pour les zones Ă©tant Ă  l’intĂ©rieur d’un paragraphe.

Voici comment faire cela :

<p>Ma premiÚre page Web !</p>

đŸ„‡ Consigne 🧠⇝🎓

Je vous propose maintenant d’apporter ces corrections à votre document.

Correction

  • Correction
    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Ma premiĂšre page Web</title>
      </head>
      <body>
        <p>Ma premiÚre page Web !</p>
      </body>
    </html>
    

    Voir ce résultat dans votre navigateur.

    Le problùme d’affichage vu un peu plus haut à maintenant disparu.

Vous voici maintenant avec un document HTML valide.

Références

L’atelier complet

኿


â„č 2006 - 2021 | 🏠 Retour Ă  l'accueil du domaine | 🏡 Retour Ă  l'accueil du blog