HTML 1 : STRUCTURE D'UNE PAGE

1. Créer un fichier html
L'Environnement de Développement (IDE)
Comme n'importe quel langage de programmation, pour faire du html, il suffit uniquement d'un éditeur de texte, présent sur n'importe quel ordinateur. Bien que très utile pour dépanner, il est très difficile de construire un projet là-dessus. Mieux vaut se tourner vers un Environnement de Développement (IDE) offrant au minimum une coloration, au mieux compléter le programme au fur et à mesure de son écriture.

Je vous propose deux logiciels gratuits :
  • Notepad ++ offre une coloration pour le html, le CSS et le javascript, très utiles pour la relecture.
  • Visual Studio Code, que j'utilise quotidiennement pour tous langages (Python, Latex, html, CSS, javascript, Django, etc.).
Il existe aussi des éditeurs en ligne, qui permettent une facilité de prise en main des langages html, CSS et javascript simultanément : Quelque soit votre choix, le html s'exécute toujours sur un navigateur.

Un NAVIGATEUR est un logiciel qui permet de parcourir un site web et plus généralement Internet : Google Chrome, Safari, Firefox, Ecosia, Bing, etc.
Sachez que bien qu'ils soient tous des navigateurs, en fonction de votre code, il peut y avoir quelques différences dans l'exécution d'une page html sur le navigateur choisi. N'en soyez pas étonnés !
Première page - Le "Hello World" en html
Afin d'être certain que tout le monde puisse suivre, nous allons générer notre première page html à l'aide d'un simple éditeur de texte.
  1. Se positionner sur le bureau de votre ordinateur, faire un clique-droit et cliquer sur Nouveau > Document texte ;
  2. Nommer ce nouveau fichier page1.html (en acceptant le changement d'extension du fichier) :
  3. Ouvrir le fichier avec un éditeur de texte et écrire les lignes suivantes, avant d'enregistrer :
                                    
    <!DOCTYPE html>
        <html>
            <head>
                <title>Page 1</title>
                <meta charset="utf-8">
            </head>
            <body>
                Hello World !
            </body>
        </html>  
                                    
                                
  4. De retour sur le bureau, faire clique-droit sur le fichier page1.html, et demander à l'ouvrir avec un navigateur. Votre page apparaît sur le navigateur.

ATTENTION ! Cette page n'est bien évidemment pas sur internet, mais elle est lisible en local sur la machine !

2. Squelette d'une page html
Le squelette d'une page html est toujours le même :
On remarque que le langage html repose sur des balises.

Le html est l'abréviation de HyperText Markup Language, soit en français langage hypertexte à balisage. Ce langage a pour fonction de structurer et donner du sens à du contenu.
3. Principe du langage à balisage
En html, TOUT ce que vous écrirez sera positionné entre eux balises.

Ces BALISES sont représentées par des symboles <div></div>, et vont avoir pour fonction de mettre en forme une page, mettre en avant un titre, délimiter des zones de "comportement" du contenu.

Il existe de nombreuses balises, ayant des rôles différents ; mais attention, le rôle du html est de mettre en place du contenu. Les balises n'ont pas pour but de rendre votre page web "joli", c'est le langage CSS qui s'en chargera !!

Ce langage repose exclusivement sur une succession de balises qui permettent de présenter l'information. Il suffit d'ailleurs d'aller dans l'inspecteur d'une page Web pour voir l'ensemble des balises existantes.
Voir le code avec l'Inspecteur du navigateur
  1. Se mettre sur une page Web quelconque, faire clique-droit, puis Inspecteur :
  2. La fenêtre de l'Inspecteur apparaît dans un nouvel onglet :
    C'est un outils d'aide au développement, que nous serons appelé à utiliser pour voir le code des pages (html, CSS, javascript), mais aussi le flux des requètes Http à travers le réseau, etc.

    Vous pouvez toujours vous amuser à changer le code. Si la page que vous explorez change, elle ne le sera que localement. L'utilisateur n'a aucun "pouvoir" sur le serveur qui héberge les sites Internet (sauf à ce que cela soit prévu par ce dernier !!).