tfontanet.github.io

Écrire une page web

Généralités :

Une page Web est un fichier texte conçu pour être lu par n'importe quel navigateur internet (Chrome, Edge, Firefox, Safari,...) et être affiché sur n'importe quel type de terminal (ordinateur, smartphone, tablette, imprimante,...).
La personne qui écrit une page web ne sait donc pas à l'avance avec quel navigateur cette page va être consultée, ni avec quelle taille d'écran !

Les navigateurs doivent être capables d’interpréter trois langages :
  • Le HTML qui contient le texte à afficher et précise la structure de la page (titres, paragraphes, images ou vidéos à insérer…).
  • Le CSS qui permet de définir la mise en forme des différents éléments de la page.
  • Le Javascript qui est un langage de programmation permettant de rendre certaines pages web plus interactives.

Ce document que vous êtes en train de lire est lui-même une page web et, comme pour toute page Web, vous pouvez consulter son code HTML-CSS-JavaScript en faisant un clic droit sur la page puis en sélectionnant “afficher le code source”.

Pour écrire une page web, il suffit de deux logiciels :
  • Un éditeur de texte pour modifier le code source de la page.
  • Un navigateur pour en vérifier le rendu.

Après avoir écrit une page web et l'avoir testée sur son ordinateur, il faut l'héberger sur un serveur web qui est un ordinateur tout le temps allumé sur lequel tourne un logiciel qui est en permanence à l'écoute des requêtes des internautes.

HTML :

Le HTML (HyperText Markup Language) est un langage qui utilise des balises pour structurer les pages web.
Par exemple, la structure minimale d'une page web est : 
<!doctype html>
<html lang="fr">
  <head>
      <title>Titre de l'onglet du navigateur</title>
      <meta charset="utf-8">
  </head>
  <body>
      Contenu visible de la page
  </body>
</html>
Visualiser dans JSBin

La balise <head> permet de préciser les propriétés de la page web comme par exemple le titre affiché sur l'onglet du navigateur ou l'encodage utilisé.
La balise <body> contient la partie visible de la page : texte, images...

Pour créer une page web en HTML, il suffit de créer un fichier ayant l'extension .html et d'y copier-coller la structure minimale ci-dessus. En double-cliquant sur ce fichier, vous pourrez alors voir le résultat dans votre navigateur web.

Quelques cours HTML pour démarrer :


Exemples de code HTML à tester en ligne :

   Exemple 1    Exemple 2

CSS :

Le langage CSS (Cascading Style Sheets) permet de mettre en forme une page écrite en HTML en précisant comment afficher les différents éléments HTML de la page (couleurs, alignements, espacements, polices de caractères,...)

Les directives CSS d'une page web peuvent être ajoutées directement dans le code HTML de cette page en ajoutant un attribut style à n'importe quelle balise HTML de la page. Toutefois, on préfère en général rassembler toutes les directives CSS dans un fichier séparé appelé feuille de style.

Dans le site CSS Zen Garden , on garde exactement le même fichier HTML, mais on l'associe à des feuilles de styles différentes selon les liens sur lesquels on clique.
La différence de rendu est impressionnante et met bien en évidence la puissance du langage CSS !

Quelques cours CSS pour démarrer :


Exemples de code HTML-CSS à tester en ligne :

   Exemple 3    Exemple 4

Javascript :

Le langage JavaScript est un langage de programmation qui permet de tout modifier dans la page web courante, en fonction des actions de l'internaute (souris, clavier,...).
Par exemple, en cliquant sur , vous allez lancer un script Javascript qui va supprimer toutes les directives CSS appliquées à cette page ! (Pour retrouver l'allure normale de la page, il suffit de la recharger ;-)

L'utilisation de Javascript est beaucoup moins fréquente que celle de HTML et CSS car ces derniers suffisent pour la plupart des usages.

Quelques cours JavaScript pour démarrer :


Exemples de code Javascript à tester en ligne :

   Exemple 5    Exemple 6