Bien débuter en HTML et CSS

par administrateur


1. Découverte du langage HTML


1.1. La naissance du web

  • Le grand public l’ignore mais le WEB d’aujourd’hui, le World Wide Web (WWW), est né un jour de 1990 au CERN, près de Genève. Cliquez sur ce lien pour découvrir quel a été le premier site web au monde.
  • Ce site était hébergé par le premier serveur web au monde de marque NEXT au CERN.
  • Il donnait des informations sur le projet WWW. On y trouvait des informations sur l’hypertexte, la technique permettant de créer sa propre page Web, et même la recherche d’informations sur la Toile.
  • C’est Tim Berners-Lee qui a mis au point le premier serveur web au monde en développant le langage HTML et les applications serveur / client.
  • Le NEXT Cube de Steve JOBS est le premier serveur à avoir hébergé un site web. Son système d’exploitation révolutionnaire pour l’époque est l’ancêtre de MAC OS X.

1.2. Analyse d’un fichier HTML simple

Le langage HTML (Hyper Text Markup Langage) un langage de balisage, c’est-à-dire que le texte (le contenu) est organisé par des balises qui en définissent la structure (le contenant).

Ouvrir dans un navigateur web page_web1.html

  • Visualiser le code source de page_web1.htm, c’est-à-dire la page au format HTML non interprété, en faisant un clic droit dans la page et en cliquant sur « Code source de la page (dans Firefox) ou sur Afficher la source (dans Internet Explorer).
  • Télécharger page_web1.html dans "Mes Documents" et ouvrir le fichier avec l’éditeur de texte Notepad++.

A RETENIR : une page web est un simple fichier texte contenant des balises et enregistré avec l’extension .html ! On peut donc construire une page web à l’aide d’un éditeur de texte tel que Notepad++.

Un fichier HTML est un fichier texte structuré de la manière suivante :

Structure d'un fichier HTML basique

1.3. Insérer des images et des liens

  • Ouvrir dans une nouvelle fenêtre d’un navigateur le fichier page_web2.html. Cette page web contient des images, des liens internes et des liens externes.
  • A l’aide du navigateur, afficher le code source de cette page.
  • Télécharger dans "Mes documents" page_web2.html. Analyser les fichiers télécharger avec Notepad++.

A RETENIR : Lors de la création d’un site web contenant plusieurs pages web dont la page d’accueil est index.html, il est conseillé de structurer les fichiers et les dossiers selon l’exemple suivant.

Exemple de structure de l'arborescence d'un site web

ATTENTION : il faut impérativement écrire les noms de tous les fichiers et de tous les dossiers en minuscules, sans espace et sans accentuation.

1.4. Surcharge CSS

L’utilisation de feuilles de style au format CSS repose sur l’idée de séparation du contenu et de la mise en forme : le contenu est fourni par le fichier au format HTML ; la mise en forme est définie dans le fichier au format CSS.

  • Ouvrir dans une nouvelle fenêtre d’un navigateur le fichier page_web3.html. Cette page web contient une surcharge CSS via l’appel au fichier style.css.
  • A l’aide du navigateur, afficher le code source de cette page.
  • Télécharger dans "Mes documents" page_web3.html. Analyser les fichiers téléchargés en particulier style.css avec Notepad++.

Un fichier CSS permet de modifier les propriétés de certaines balises d’une page HTML.

Par exemple, un fichier CSS contenant l’instruction :

modifiera la police, la taille et la couleur des tous les textes situés à l’intérieur de la balise de paragraphe "< p > ... < /p >" d’une page web faisant appel au fichier CSS.

1.5. Blocs de présentation

Afin d’améliorer le design d’un site web, il possible d’organiser la page d’accueil avec des blocs grâce à une surcharge CSS spécifique. Voici un exemple de page d’accueil utilisant cette technique.

On peut créer des blocs à partir de la balise neutre HTML < div > < /div > et d’une surcharge CSS spécifique.


2. Tutoriels vidéo HTML


Les 4 vidéos ci-dessous abordent les notions de base nécessaires à la réalisation d’un site web avec HTML et CSS. Si vous souhaitez compléter ces notions de base, vous pouvez vous rendre sur la chaîne YouTube de l’auteur.

Vous pouvez parallèlement suivre en ligne l’excellent cours de Mathieu NEBRA sur OpenClassrooms.