Créer une bonne page HTML pour un site n’est pas toujours simple : comment ça fonction ? Quel est le format ? Dans quel ordre écrire la page pour un affichage optimal (rapide et propre) ? Comment savoir que la page est facilement maintenable ? A moins que vous ne soyez déjà un webmaster/développeur confirmé, il est probable que vous ne vous sentiez pas tout à fait à l’aise pour créer une page optimisée pour l’affichage et le référencement. De plus, la “peur” de rester bloqué sur de la technique (détails superflus, bugs, etc.) peut décourager. Je vous propose de découvrir le HTML en mode 20/80 : les 20 % de connaissances qui vous permettront de gérer 80 % des cas. Suivez-moi, je vais vous montrer tout ça !

Comment se construit une page et quels sont les acteurs ?

Introduction et préparation mentale ^^

Lorsque l’on souhaite pour la première fois créer une page HTML, nous pouvons avoir deux réactions : c’est trop difficile ou c’est trop simple. Avec de l’expérience, je peux vous dire que c’est un savoureux mélange entre les deux 🙂

Pour faire simple : une page internet se compose comme une maison. A chaque fois que vous affichez une page, 4 acteurs se mettent en action pour vous livrer une maison sur plan, bien agencée, belle et aménagée.

Chaque “acteur” travaille pour un objectif défini :

  • L’architecture (PHP)
    Le PHP prend en charge les informations à prendre en compte et à mettre à jour les plans.
    (Je rentre en détails dans ma série d’article sur le PHP: ici,  je reviendrai dessus le moment voulu.)
  • Les plans et les murs (HTML)
    (Je vous explique dans un instant ce que signifie l’abréviation HTML.) Retenez pour l’instant que le HTML donne la structure de votre site internet, soit les murs de votre maison.
  • Le papier peint et les lumières (CSS)
    Le CSS (Cascade Style Sheet ou Feuille de style) permet de donner de la couleur à votre site. Sans lui, votre maison sera toute blanche et pas belle. (Je reviendrai dessus dans un prochain article)
  • Les meubles et l’électroménager (JavaScript)
    Le petit dernier, Javascript, permet de donner vie à votre page après être arrivé dessus, de donner vie à votre maison lorsque vous êtes dedans. (Je reviendrai dessus dans un prochain article)

Pour commencer, nous allons voir dans cet article comment créer une page HTML (une maison), sans architecte (PHP), ni peinture (CSS), ni meuble (JavaScript). Ces trois acteurs sont traités dans les articles :

  1. Les fondamentaux du CSS
  2. Les fondamentaux du PHP (Série de plusieurs articles)
  3. Les fondamentaux du Javascript ? (bientôt disponible)

Qu’est-ce que HyperText Media Language (HTML)

On passe directement à la pratique !

Le HTML, c’est ça :
Exemple HTML

C’est quoi tous ces <machins> ?! Les balises HTML

Pas de panique ! A la fin de cet article, vous comprendrez entièrement cette image.

Le HTML est un langage composé de balise, des mots clés entourés par des chevrons (< et >). D’ailleurs, il existe deux types de balise :

  • Des balises qui peuvent en contenir d’autres (comme des poupées russes)…
  • et des balises qui ne peuvent pas en contenir d’autres. (Plus de détails tout de suite)

Les balises fonctionnant en duo, peuvent contenir des éléments à l’intérieur (comme d’autres balises, du texte ou des informations complémentaires). Celles-ci s’écrivent de la manière suivante :

<html>
<nomdelabalise>...contenu...</nondelabalise>
</html>

Note : Afin que l’affiche sur le blog soit correct, j’ai besoin d’ajouter les balise html : <html> et </html> dans mes exemples. Sinon, cela ne s’affiche pas correctement. Pour vous, lorsque vous testez, vous n’en avez pas encore besoin. Elles deviennent obligatoires pour une page HTML complète. 🙂

Les balises seules s’écrivent :

<html>
<nomdelabalise />
</html>

Vous connaissez désormais les deux types de balises qu’utilise HTML. Maintenant, ajoutons des informations dans ces balises avec des attributs.

Note : pour le moment, n’essayez pas de mettre en pratique, car ces exemples sont là pour expliquer le fonctionnement du HTML et ne fonctionneront pas dans un cas réel. Je vous dirai de mettre en pratique le moment venu 🙂

Qu’est-ce qu’un attribut de balise HTML : <balise attribut=”…valeur…”>

Les attributs se placent à l’intérieur des balises elles-mêmes afin d’ajouter des informations complémentaires. Je vous montre un exemple concret dans la suite de cet article.

Les attributs s’ajoutent de la manière suivante :

<html>
<nomdelabalise attribut1=valeur1 attribut2=valeur2>...contenu...</nondelabalise>
</html>

Vous savez désormais comment ajouter des informations à des balises HTML. Comme promis, je vous montre un exemple concret pour utiliser les balises et les attributs tout de suite :

Comment écrire une balise ?

Prenons un exemple : Je souhaite créer ma maison, pour cela, j’ai besoin de avec 3 éléments : Une maison, un salon et une télévision.

La maison peut contenir d’autres éléments, nous allons donc utiliser une balise duo, pour rappel un balise que l’on ouvre et que l’on referme :

<html>
<maison></maison>
</html>

Le salon peut lui aussi contenir des éléments, nous allons donc aussi utiliser une balise duo :

<html>
<salon></salon>
</html>

Et pour finir la télévision. Elle ne peut contenir “physiquement” d’autres éléments. (si vous prenez l’exemple d’une image, je reviendrai sur ça plus loin avec les attributs 🙂 ) Nous avons donc notre télévision :

<html>
<television />
</html>

Maintenant que nous avons nos 3 éléments, mettons un peut d’organisation dans tout ça :

Comment organiser des balises entre elles !

Des boites dans des boites !! 😉

Pour dire que le salon est à l’intérieur de la maison, on place la balise Salon à l’intérieur entre les balises Maison , on écrira donc :

<html>
<maison>
<salon></salon>
</maison>
</html>

Le salon est actuellement vide. Nous allons mettre la télévision dedans :

<html>
<maison>
<salon>
<television />
</salon>
</maison>
</html>

Nous avons donc une télévision dans un salon, lui-même dans la maison. Maintenant, revenons aux informations complémentaires : les attributs. Je vous propose de faire une maison avec une porte rose, un salon avec des murs blancs et d’avoir une télévision LCD.

Comme vu plus haut, les attributs se placent à l’intérieur d’une balise HTML et s’écrivent sous la forme : nomDeLattribut=”valeur. Pour notre exemple, cela prendra la forme :

<maison couleur-porte="rose">
<salon couleur-murs="blanc">
<television type-ecran="LCD" />
</salon>
</maison>
</html>

Il est possible de mettre plusieurs attributs dans une même balise HTML en les espaçant par des espaces. Exemple avec la couleur de la toiture de la maison :

<maison couleur-porte="rose" couleur-toiture="vert">
<salon couleur-murs="blanc">
<television type-ecran="LCD" />
</salon>
</maison>
</html>

Vous savez désormais quel sont les différents type de balises HTML (en duo ou seules), comment ajouter des informations ces balises avec les attributs. Les balises que j’ai utilisé “maison”, “salon” et “télévision” sont fictives. Utilisons maintenant de vraies balises pour faire une page HTML !

Toujours là ? C’est parti ! 😉

Qu’est-ce qu’un bon Webmaster ? C’est un bon <!– commenteur –>

Si vous devez retenir une seule chose de cet article, c’est qu’il est impératif / obligatoire / recommandé, lorsque vous créez une page HTML, de mettre des commentaires dans votre code !!

Je ne blague pas, celui qui n’en mettra pas se fera tirer les oreilles par moi ! Mais aussi par la communauté !!

Je ne veux pas devenir un elfe

Pourquoi est-ce si important que des geeks cachés dans un sous-sol oserait sortir pour me tirer les oreilles ? Cela vous permettra de vous y retrouver lorsque vous reviendrez dessus plus tard, mais cela permet aussi de pouvoir travailler en collaboration avec d’autres personnes (partenaires, relecteurs, etc).

La programmation est un art, et vous allez progresser rapidement. De ce fait, votre manière de coder va changer. Lorsque vous reviendrez sur des projets, même une semaine après, il est parfois pas évident de s’y retrouver. Donc, laissez un maximum de commentaire : 1 ligne de commentaires pour 5 ligne de HTML, c’est le minimum syndical !

Wouah mais c’est chaud ?!

Bien au contraire, rien de plus simple :

<html>
<!-- Ceci est un commentaire -->
</html>

Voilà…
Reprenons donc sur…

Les balises qui fonctionnent par paire

Notes : Nous passons désormais à des cas réels, vous pourrez désormais mettre en pratique.

Pour la suite de cet article, je vous invite à préparer 3 éléments :

    • Un éditeur de texte.
      Celui-ci vous permettra d’éditer votre page. Je vous conseille SublimeText, gratuit et performant si vous n’en avez pas encore un. (Cliquez ici pour télécharger Sublime Text)
    • Un navigateur
      Celui-ci vous permettra de voir le rendu de votre page. J’utilise personnellement Chrome, car j’aime ses outils de développement, je reviendrais dessus dans de prochains articles. (Cliquez ici pour télécharger Chrome)
    • Un dossier dispo
      Sur votre ordinateur, créez un dossier et créez un fichier dedans, nommée : “page-1.html”. Puis ouvrez le avec SublimeText ou votre éditeur préféré. A l’intérieur, nous allons écrire notre première page.

Maintenant que ces 3 éléments sont prêts, passons à la pratique !

Structure de base : <html>, <head> et <body>

Commençons notre page avec la structure de base :

<!-- La balise html indique que cest un fichier html -->
<html>
<!-- La balise head vous permet de renseigner des informations -->
<!-- au navigateur comme : le nom de la page, on trouver certaines -->
<!-- ressources, etc. Nous reviendrons sur a plus tard. -->
<head></head>

<!-- La balise body contiendra la structure de la page (la maison) -->
<body>Hello world</body>
</html>

Lorsqu’on ouvre ce fichier HTML avec Chrome, nous obtenons le résultat suivant :
Hello World

Les titres (header en anglais) : <h1>, <h2>, <h3>, etc.

Les balises h sont des titres (header en anglais). Celle-ci permettent de structurer l’information dans la page par priorité. Cela va de h1 (le plus important) à h5, le moins important.

<html>
<h1>Je suis super super important</h1>
<h2>Je suis super important</h2>
<h3>Je suis important</h3>
</html>

Avec le resultat :
Je suis important

Les textes : <p>, <i>, <b>

Les balises p permettent de faire des paragraphes dans votre page. S’y ajouter i (pour “italic”) afin de mettre en italic et b (pour “bold” en anglais) afin de mettre en gras.

<html>
<p>Je suis une paragraphe normal</p>
<p>Je suis une paragraphe normal avec <i>une phrase en italic</i></p>
<p>Je suis une paragraphe normal avec <b>une phrase en gras</b></p>
</html>

Avec le resultat :
Paragraphe

Les liens hypertext cliquables : <a href=”…lien…”>

Les balises a permettent de faire des liens vers d’autres pages (ou ressources) sur internet. Comme le lien suivant qui permet : d’aller sur un super blog ! 😉

<html>
<p>Je suis un paragraphe avec un <a href="ici-l-url-de-la-ressource.fr">lien</a></p>
</html>

Avec le resultat :
Lien

Les listes à puce : <ul>, <li>

Les balises ul permettent de faire des listes et chaque élément de la liste est contenu dans un li.

<html>
<ul>
<li>Premier element</li>
<li>Deuxieme element</li>
<li>Troisieme element</li>
</ul>
</html>

Avec le resultat :

Liste

Les tableaux, les lignes et les données : <table>, <tr>, <td>

Les tableaux se composent de la manière suivante. Une balise en duo <table> comprenant une série de lignes (Table Row <tr>), comprenant elle même une série de données (Table Data <td>). Ce qui donne :

<html>
<table>
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>
</html>

Tableau HTML

Les balises qui fonctionnent seules

Afin de donner du peps à notre page ! Voici quelques balises HTML fort utiles !!

Les images : <img href=”…image…”/>

Vous pouvez ajouter une image avec la balise img et avec un attribut src indiquant l’adresse (url) de l’image à afficher. Cela s’écrit :

<html>
<img src="image.png"/>
</html>

Les retrouves à la ligne : <br />

De base, HTML ignore les retours à la lignes et ne s’occupe que des balises. Dans ce cas, vous pouvez ajouter un retour à la ligne à un texte avec :

<html>
<br />
</html>

Les lignes horizontales : <hr />

Pour finir, vous pouvez ajouter un séparateur avec :

<html>
<hr />
</html>

Les attributs qu’il faut connaître

Les identifiants pour donner un nom à un éléments : l’attribut “id”

Nous aurons dans le futur besoin de pouvoir identifier certains éléments. Il est donc possible d’ajouter ce qu’on appelle un “identifiant” à une balise HTML, pour cela, on l’écrit de la manière suivante ;

<html>
<p id="paragraphe_introduction">Voici le paragraphe d'introduction</p>
</html>

Les repères pour identifier un type de balises HTML : l’attribut “class”

Comme l’exemple des identifiants cité plus haut, nous pouvons aussi avoir besoin de rassembler plusieurs balises à l’aide d’un catégorie, ou plutôt d’une class. Cela permet ensuite de pouvoir effectuer des actions groupées. Cela prend la forme suivante :

<html>
<p class="en_gras">Voici le paragraphe d'introduction</p>
<p class="en_gras en_italic">Voici le paragraphe d'introduction</p>
<p class="en_gras">Voici le paragraphe d'introduction</p>
</html>

Une balise peut très bien avec un “id” et une ou plusieurs “class”. Je reviendrai sur ça dans l’article sur le CSS. Car, ces deux attributs sont majoritairement utilisés pour donner des informations au CSS, qui est le langage permettant de donner un style à nos balises.

Ajouter un design à la volée : l’attribut “style”

Pour finir, vous pouvez ajouter un style directement dans le HTML. Ce qui prendra la forme d’un code en CSS.

<html>
<p style="...styleDeLaBalise...">Voici le paragraphe d'introduction</p>
</html>

Note : Je ne rentre pas en détails ici, sachez juste qu’on peut écrire du CSS directement dans le HTML, mais c’est à éviter. Car cela rend le HTML compliqué et plus dur à maintenir ensuite.

Ce qu’il faut retenir en mode 20/80

Interrogation écrite pour vérifier de vos connaissances !!

Non, je déconne, si vous avez bien suivi, vous deviez tout simplement êtres en mesure de comprendre la page HTML suivant :

<!DOCTYPE html>
<html>
<head>
<!-- Permet de donner le nom de la page dans le head -->
<title>Bienvenue !</title>
</head>
<body>
<!-- Titre en rouge, attribut style a retirer -->
<h1 style="color: red;">Salut !</h1>
<p>J'espere que vous allez bien</p>

<h2>Ce qu'il faut retenir</h2>
<p id="premier_paragraphe">Vous pouvez ecrire des paragraphes avec la balise p</p>
<p>Vous pouvez ajouter des <i>textes en italic</i> et des <b>texte en gras</b></p>
<p>Vous pouvez aussi ajouter des <a href="url">lien</a> et meme une liste :</p>
<ul>
<li class="en_gris">avec 1 element</li>
<li>voir 2</li>
<li class="en_gris">peut-tre mme un troisime</li>
<li class="liste_avec_image"><img src="image.png"/></li>
</ul>
</body>
</html>

J’espère que cet article vous aura aidé à y voir plus clair.

Avez-vous des questions ou des remarques ? Dites-le dans les commentaires ci-dessous 😉

  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •