Vite fait, une page HTML est un fichier dans lequel on écrit le contenu de la page sous forme de texte brut, avec des balises pour indiquer au navigateur comment le présenter.
Ensuite, on envoie (ou pas) ce fichier sur le serveur du site web et on l'ouvre avec le navigateur.
Exemple de texte brut
Pour mettre en forme le texte, on utilise des balises (markup)
Une balise est un marqueur qui permet de regrouper du texte brut, de lui donner un aspect particulier :
un titre, une table, un texte en retrait, etc. ...
Certaines balises ont le rôle d'importer des objets dans l'espace d'affichage :
image, son, vidéo, etc. ...
D'autres, permettent d'effectuer des liens entre les pages : les liens hypertextes qui permettent la navigation dans le site :
menu, renvois, etc. ...
La construction d'une page html est assez simple au début :
- on utilise du texte brut et
- on ajoute les balises.
Voir l'exemple ci dessous :
|
| Texte brut | Bonjour, bienvenue sur le site de cours
Ce cours concerne les langages html, css et php.
Ce cours ne concerne (pas encore) les langages SQL et Javascript
Dommage ...
Les auteurs. |
|---|
| Texte balisé (code) | <html><body><h1>Bonjour, bienvenue sur le site de cours</h1>
<p>Ce cours concerne les langages <b>html, css et php</b>.</p>
<p>Ce cours ne concerne (pas encore) les langages <b>SQL</b> et <b>Javascript</b></p>
<p>Dommage ...</p>
<cite style='float:right'>Les auteurs.<cite> |
|---|
| Résultat | Bonjour, bienvenue sur le site de cours
Ce cours concerne les langages html, css et php.
Ce cours ne concerne (pas encore) les langages SQL et Javascript
Dommage ...
Les auteurs. |
|---|
Le paragraphe suivant propose quelques exemples de balises indispensables. Poursuivre avec la page de cours "début" (au menu HTML)
TechBien débuter : Outils de travail, Format de fichiers
Les bons outils de travail
Je conseille notepad ++ : simple d'utilisation et très pratique et un navigateur web quelconque (en 2020, même µ$ a fait des efforts ;)
A propos des outils de travail
Sous Windows, on peut envisager HtmlKit en bonne alternative à np++.
Les outils outils professionnels sont plus confortables mais aussi plus chers et note besoin n'est pas aussi exigeant.
Sous Linux et Mac, un éditeur de texte avec coloration syntaxique s'impose (gedit, KompoZer, TextWrangler, ...).
Le format de fichier
Les fichiers html ont une extension .htm ou .html.
Pour les pages web à contenu dynamique, on trouvera .php et .asp, mais ceci concerne la programmation (Voir le cours php).
Se placer dans un réprertoire de travail (per exemple c:/wamp/www/projet1/) et y créer un nouveau fichier texte (click droit dans l'explorateur).
Renommer ce nouveau document texte en index.html (enlever le .txt)
L'ouvrir avec un éditeur de texte (notepad++), pas avec le navigateur.
Gasp ! Je ne vois pas le .txt :
Pas de panique : modifier les paramètres d'affichage dans l'explorateur de fichiers (W), afin de faire apparaître les extensions. Pour cela :
W10 : ouvrir un explorateur, aller dans l'onglet affichage > afficher/masquer, cocher "extensions ..."
Bon maintenant, on y va !