cClaude.rocks ☕ Le blog

L'informatique et les nouvelles technologies

Menu
Ce billet a été édité le : 2019-06-28

Suite au billet sur la prĂ©sentation et l’installation de Foundation 6 pour les dĂ©butants, voici quelques conseils pour dĂ©buter avec le HTML.

En tant que dĂ©butant en HTML, je vous dĂ©courage Ă  complexifier en l’abordant Ă  travers d’autre langages. En effet si vous passez Ă  travers un systĂšme de gestion de contenu (en anglais content management system ou CMS) vous devrez Ă©galement apprendre tout ce qui concerne ce gestionnaire.

Éditer du code HTML

Pour Ă©diter du code HTML dans le but d’apprendre le langage, je vous dĂ©conseille d’utiliser un Ă©diteur de texte Ă©ventuellement avec la coloration syntaxique mais en aucun cas avec un affiche de type WYSIWYG (affichage du rĂ©sultat et non du code source).

Pour commencer concentrez-vous sur le langage HTML, tout en ayant conscience qu’il sera, par la suite, indispensable de vous appuyer sur des outils pour faire un site un peu Ă©toffĂ©.

Dans cet article, on va se limiter aux rĂšgles de base concernant le HTML. L’idĂ©e est ici de dĂ©crire la grammaire du langage.

Le langage HTML utilise la notion de balise et d’attribut.

Les balises

Une balise s’écrit Ă  l’aide des caractĂšres <, > et /. ConcrĂštement la balise balise s’écrit en deux parties, qui permet de dĂ©limiter la zone oĂč cette balise s’applique : le dĂ©but <balise> et la fin </balise>. On va pouvoir ainsi imbriquer les balises.

Voici quelques balises de base.

  • div : DĂ©finis une zone avec saut de ligne (utilisĂ© pour la prĂ©sentation).
  • em : Affiche le texte en italique.
  • h1, h2, h3, h4, h5, h6 : Ces 6 balises dĂ©finissent des titres de niveau 1 Ă  6.
  • p : DĂ©fini un paragraphe.
  • span : dĂ©finis une zone sans saut de ligne (utilisĂ© pour la prĂ©sentation).
  • strong : Affiche le texte en gras.

Exemple de code HTML


<h1>Un titre de niveau 1</h1>
<h2>Un titre de niveau 2</h2>
<h3>Un titre de niveau 3</h3>
<p>Le <strong>texte</strong> du <em>paragraphe</em></p>

Affichage par le navigateur


Un titre de niveau 1

Un titre de niveau 2

Un titre de niveau 3

Le texte du paragraphe

Dans certains cas, une balise peut ne pas avoir de contenu, dans ce cas, il est possible de simplifier l’écriture comme suit : <balise />.

Il existe quelques exceptions :

  • La balise meta ne se ferme pas, par ex : <meta charset="utf-8"> (pas de balise fermante)
  • La balise script ne se simplifie pas, par ex : <script src="js/vendor/foundation.js"></script> (l’usage de l’abrĂ©viation /> n’est pas possible)

Les attributs

Les attributs sont des qualificateurs que l’on vient ajouter sur les balises : <balise attribut1="valeur1" attribut2="valeur2"> 
 </balise>.

Un attribut est gĂ©nĂ©ralement suivi d’une valeur, mais ce n’est pas obligatoire.

Structure d’une page HTML

Pour amĂ©liorer les performances des systĂšmes d’analyse de type, la premiĂšre ligne doit ĂȘtre : <!doctype html>

Ensuite une page HTML est identifiĂ©e par la balise html et doit contenir une entĂȘte dĂ©finie par la balise head suivi d’un corps dĂ©fini par la balise body.

On a donc la structure suivante :

<!doctype html>
<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

Explication du fichier de base

Dans le billet sur l’installation de Foundation 6, un fichier HTML de base vous est proposĂ©, je rappelle ici sont contenus :

<!doctype html>
<html class="no-js" lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>__VOTRE_TITRE__</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

    __VOTRE_CODE_HTML__

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Expliquons le contenu de notre fichier HTML de base.

En soi, la comprĂ©hension exhaustive de cette partie n’est pas indispensable, mais c’est un bon exercice pour mieux comprendre les quelques rĂšgles dĂ©crites plus haut.

Pour la suite elle est Ă  prendre essentiellement comme telle.

Code HTML Description
<!doctype html> PremiĂšre ligne d'un fichier HTML. Cette ligne ne fait pas partie en soit du code HTML, elle sert Ă  identifier le contenu du fichier.
<html class="no-js" lang="fr" dir="ltr"> 
 </html> DĂ©finition du conteneur HTML. L’attribut class avec la valeur no-js est un moyen d’appliquer diffĂ©rentes rĂšgles CSS selon que le support JavaScript est activĂ© ou non. L’attribut lang dĂ©crit la langue utilisĂ©e, ici fr pour français. L’attribut dir permet de dĂ©finir la sens de l’écriture, ici ltr pour de gauche Ă  droite (left to right).
<head> 
 </head> Balises dĂ©finissant l'entĂȘte du document. Il s’agit ici de mĂ©tadonnĂ©es, en dehors du titre cette partie ne sera pas directement visible par l’utilisateur.
<meta charset="utf-8"> Défini le jeu de caractÚre utilisé par le code HTML. utf-8 est une valeur raisonnable, surtout pour le français. Faite attention à ce soit conforme à ce que votre éditeur utilise.
<meta http-equiv="x-ua-compatible" content="ie=edge"> Configuration pour les navigateurs de la marque Microsoft.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Force le bon niveau de zoom aux navigateurs mobiles, cette ligne permet d'assurer le bon fonctionnement du mode adaptatif (‘Responsive’).
<title> 
 </title> Texte définissant le titre de la page, utilisé entre autre pour les marques pages.
<link rel="stylesheet" href="css/foundation.css"> Prise en compte du code CSS de Foundation 6.
<link rel="stylesheet" href="css/app.css"> Prise en compte de votre personnalisation du code CSS.
<body> 
 </body> Balises dĂ©finissant le corps du fichier HTML. C’est Ă  l’intĂ©rieur de cette balise que se trouve la partie visible par l’utilisateur.
_VOTRE_CODE_HTML_ Ici un code HTML réduit à sa plus simple expression.
<script src="js/vendor/jquery.js"></script> Aprùs la mise en page, on peut inclure les bibliothùques JavaScript, qui vont affiner l’affichage ou le rendre dynamique.
<script src="js/vendor/what-input.js"></script> idem
<script src="js/vendor/foundation.js"></script> idem
<script src="js/app.js"></script> idem

Références et compléments

  • w3schools.com est un gros tutoriel pour apprendre le HTML mais c’est Ă©galement un site de rĂ©fĂ©rence pour ce langage — Site en anglais.

  • Service de validation de code HTML du W3C — Site en anglais.

኿


â„č 2006 - 2020 | 🕾 Retour Ă  l'accueil du domaine | 🏡 Retour Ă  l'accueil du blog