cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu
juin
26
2019
😤 Ce billet a été édité le : 2020-11-09

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 (avec Foundation).

ඏ

En tant que débutant en HTML, je vous décourage à complexifier en l’abordant à travers d’autres 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 conseille d’utiliser un éditeur de texte idéalement avec la coloration syntaxique mais en aucun cas avec un affichage 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 le 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 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog