Accueil > Tutoriels > Développement > Apprendre le HTML

Apprendre le HTML

Langage de base, le HTML est un prérequis qu'il faut connaître lorsqu'on souhaite apprendre à developper son site web. Très facile d'accès il permet de concevoir la structure de vos pages via des balises et informe les navigateurs et les moteurs de recherche du contenu de votre site.

Quel logiciel utiliser ?

Pour éditer du HTML il est possible d'utiliser un éditeur de texte mais l'idéal est d'avoir un éditeur de code, pour ma part j'utilise Brackets et c'est celui que je vais utiliser dans le cadre de ce tutoriel.

Organiser ses fichiers

Dans le répertoire de votre choix, créez un dossier du nom de votre projet, par exemple "Mon projet" et ajoutez-y un autre ensemble de dossiers afin de créer l'architecture suivante :

Mon projet

images
css
js

Une fois l'architecture créée, ajoutez un fichier "index.html" à la racine, c'est ce fichier qui sera chargé par défaut lors de l'ouverture du site. (pas d'initiatives personnelles le nom "index" est une convention de nommage à respecter)

Vous devez avoir désormais :

Mon projet

images
css
js
index.html

Structure de la page et principe des balises


<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Mon projet</title>
        <meta charset="utf-8" />
    </head>
    <body>
    </body>
</html>

Les balises

Si vous analysez le code vous constaterez une balise "" permettant de spécifier le type de fichier et des balises ouvrantes ("< balise >") et fermantes ("< /balise >"), c'est d'ailleurs le cas pour toutes sauf pour la balise "< meta >" qui comporte un "/" en fin, c'est une exception que l'on appelle balise autofermée.

En HTML chaque balise permet une interprétation par le navigateur et ce fonctionnement de balise ouverte, fermante est le principe même de ce langage.

Les attributs

Aussi, on peut apercevoir des attributs sur la balise "< html >" et sur la balise "< meta >", ces attributs sont "lang=" et "charset=" qui ont des paramètres assignés entre les '"', visibles en vert dans le code présenté.

A chaque balise pourra être associé un ou plusieurs attributs permettant d'apporter des comportements uniques que nous verrons plus tard.

Votre première page HTML

Copiez donc le code évoqué plus haut dans votre fichier "index.html" et enregistrez le document.
Double cliquez ensuite sur le fichier dans votre explorateur de fichier pour l'ouvrir avec votre navigateur web.
Vous devriez avoir une page blanche et un nom d'onglet en "Mon projet" (sur Chrome/Firefox/Edge).

Si c'est le cas bravo vous venez de créer votre première page web !

Le corps de la page

Nous allons désormais introduire 10 balises permettant de définir le corps de la page :

header: le haut de page
nav: la navigation
main: le contenu principal
section: les parties du contenu principal
article: les articles (blogs, commentaires ...)
p: pour la création de paragraphes
div: contenu générique sans sémantique partculière (un élément par ligne)
span: contenu générique sans sémantique partculière (sur la même ligne)
aside: contenu promotionnel
footer: le bas de page

Avec ces quelques balises vous serez en capacité de réaliser le travail de structure du corps de la page et si vous avez compris la logique du langage sur les concepts des balises ouvrantes et fermantes cela sera un jeux d'enfant.

Nous allons donc à titre d'exemple utiliser 5 balises de la manière suivante :


    <!DOCTYPE html>
    <html lang="fr">
        <head>
            <title>Mon projet</title>
            <meta charset="utf-8" />
        </head>
        <body>
        
        <header></header>
        <nav></nav>
        
        <main>
        
        <p></p>
        
        </main>
        
        <footer></footer>
        
        </body>
    </html>

Si vous relancez votre navigateur pour actualiser la page vous constaterez que malgré le contenu inséré vous ne verrez aucun changement de manière visuelle, la page reste blanche. C'est tout à fait ce que nous attendons, ces instructions ne doivent pas être visibles par l'utilisateur, c'est au navigateur de les interpreter.

L'indentation

Vous l'avez peut être remarqué, pour faciliter la lecture, les balises ouvrantes et fermantes qui ne sont pas sur la même ligne sont indentées par des tabulations ou des espaces depuis le bord gauche afin de les identifier plus aisément. C'est le cas par exemple avec "< body >" et "< html >". Ceci n'a aucun impact sur l'interprétation de votre navigateur.

Les autres balises

Lister l'ensemble des balises disponibles est un objectif ambitieux c'est pourquoi je vais lister ici les balises habituelles qui permettent d'insérer du contenu :

table: créer un tableau
th: en tête d'un tableau
tr: créer une ligne d'un tableau
td: créer une colonne d'un tableau
img: insérer une image (balise autofermée)
ul: créer une liste non ordonnée
ol: créer une liste ordonnée
li: créer un élément de liste
a: créer un lien hypertexte
video: insérer une video
audio: insérer une video
h1: insérer une balise de titre (h2,h3,h4,h5 en fonction de l'importance)

En cumulant ces balises avec les précédentes nous sommes désormais en capacité d'ajouter du contenu dans notre page:


<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Mon projet</title>
        <meta charset="utf-8" />
    </head>
    <body>

    <header>
        <h1>Mon projet</h1>
    </header>
    
    <nav>
        <ul>
            <li>Accueil</li>
            <li>A propos</li>
            <li>Contact</li>
        </ul>
    </nav>

    <main>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien, 
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio. 
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi. 
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum. 
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor, 
    aliquet sit amet elit sit amet, ornare rhoncus lacus. 
    Praesent porttitor mattis sem vitae mollis. 
    Ut cursus sem ante, id tristique quam sodales eget. 
    Fusce et dignissim metus, condimentum sodales velit. 
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros. 
    Etiam dignissim mauris non elementum tristique. 
    Fusce facilisis ultricies ultrices.</p>

    </main>

    <footer> <a href="#">Mon lien</a> 2024  </footer>

    </body>
</html>

Ceci aura pour effet :

Le W3C

Le W3C, ou World Wide Web Consortium, est une organisation internationale qui développe des normes et des directives pour le World Wide Web. Fondé en 1994 par Tim Berners-Lee, l'inventeur du web, le W3C vise à assurer la croissance et la compatibilité à long terme du web.

Vous pourrez tester votre code ici : W3C validator

Vous avez désormais mis en pratique les bases du HTML, nous allons maintenant nous intéresser à l'aspect visuel de la page.