1. Le langage HTML

1.1. Comment fonctionne le web ??

Vous êtes-vous déjà demandé ce qui se passait vraiment dans votre PC entre le moment où vous entrez une adresse web ( ce qu'on appelle une URL ) dans la barre d'adresse d'un navigateur ( par exemple : www.izeunetit.fr ), ou que vous cliquiez sur un lien hypertexte, et le moment où s'affiche à l'écran la page internet que vous voulez consulté ?

Ce qu'on appelle "page web" est en fait un ensemble de fichiers informatiques stockés sur des serveurs ( qui peuvent être très loin de vous ! ), fichiers que l'on "rapatrie" sur sa machine et que le navigateur interprète pour afficher les éléments de la page :

Ces fichiers peuvent être de différente nature :

Attention, le concept actuel d'écriture des pages web est de séparer le contenu de la mise en forme de la page.

Ainsi, le fichier HTML indiquera les éléments qui devront s'afficher dans la page, tandis que la mise en page sera traité dans un fichier à part ( une feuille de style CSS )...
On n'écrira donc pas directement dans le fichier HTML les instructions de mise en forme; le fichier HTML signalera simplement par des balises que tels ou tels caractères doivent être formatés de manière particulière ( par exemple ), mais c'est dans la feuille de style CSS ( que vous verrez plus tard ) que l'on indiquera quel est ce formatage...

1.2. Principes du langage HTML

Les balises

Une page web est entièrement décrite par un fichier HTML, qui est un simple fichier texte ( d'extension .html ), dans lequel on indique les éléments à afficher dans la page ( texte, liens, images,...).

Le navigateur lit les fichiers HTML depuis le début, de haut en bas et de gauche à droite : il faut en tenir compte pour l'affichage des divers éléments les uns par rapport aux autres...

Le fichier est structuré par des balises ( = "markups", le "m" du sigle HTML ), qui apparaissent dans le code encadrées par des chevrons.
Généralement, une paire de balises ( une ouvrante et une fermante ) encadre l'élément sur lequel elle porte :

	<html> la page entière </html>
	
	<h1> un titre </h1>
	
	<em> un texte important </em>			
			

Certaines balises sont cependant uniques.

Les balises servent à signaler au navigateur des éléments d'une page comme :

On trouvera ci-contre un exemple de fichier .html, celui de la page d'accueil d'izeunetit.fr.

Un mémento HTML fourni en fichier séparé présente un certain nombre de balises avec des exemples d’utilisation.
Et voici une page montrant l'affichage de ces différents éléments.

Avec le navigateur Firefox, on peut consulter le code source de la page affichée : Outils → Développeur Web → Code source de la page (ou CTRL + U), ou clic-droit sur la page et sélectionner Code source de la page
Vous pouvez par exemple visualiser le code source de cette page que vous êtes en train de lire...

Les outils pour écrire en HTML

Pour écrire des pages web, il existe des logiciels, tout à fait similaires à des traitements de texte, qui permettent de créer la page de manière "visuelle" ( on dit WYSIWYG = "What You See Is What You Get" ), et de générer automatiquement le fichier HTML qui sera ensuite stocké sur un serveur; mais, d'une part, ces logiciels créent un code HTML extrêmement confus et difficile à lire ( et donc à corriger ou à améliorer ), et, d'autre part, ils ne permettent pas d'apprendre le langage HTML et de comprendre "comment ça marche"...

Vous allez donc créer vos pages web "à partir de zéro", en écrivant vous-mêmes dans un fichier le code HTML avec les balises nécessaires pour décrire vos pages.

Pour cela, bien qu'un simple éditeur de texte ( comme le Bloc Notes ) suffise, vous utiliserez plutôt un logiciel en ligne, qui, en plus de permettre l'écriture du code HTML, permet de visualiser en temps réel son rendu dans un navigateur. Ce logiciel, créé par la Fondation Mozilla à l'origine du navigateur Firefox, se nomme Thimble.( Clic droit > Ouvrir dans un nouvel onglet )


Pour démarrer l'écriture de votre code, il suffit de cliquer sur



1.3. Structure d'un fichier HTML

Examinons rapidement le code HTML proposé par défaut :

L'indentation et les sauts de ligne dans le code source ne sont absolument pas obligatoires ( le navigateur les supprime à la lecture du fichier ) : on pourrait très bien décrire une très longue page HTML dans un fichier sur une seule ( très longue ) ligne !!
Mais bien sur, le code source apparaît beaucoup plus clair si on prend ainsi soin de le structurer....

Quelques précisions

Suivant leur signification, les balises peuvent être de deux types :

Éléments de type bloc

Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de ligne au début et à la fin.

Exemples :

	<h1>, <p>, <ul>, <table>, <pre>, <form> ...		
			

Éléments de type inline

Les éléments de type inline se placent normalement l'un à côté de l'autre ( pas de saut de ligne ).

Exemples :

	<strong>, <em>, <a>, <sup>, <sub>, ...		
			

1.4. Votre premier "site" web...

Le travail que vous allez faire est l'écriture d'une ou plusieurs page(s) qui décrive(nt) les différents projets que vous avez réalisés dans le thème Images.
Vous allez commencer à modifier le code pour qu'il corresponde à ce projet...

Ces pages devront présenter vos différents projets ( Lego IRL, Détournement, Pixel Art et éventuellement Warhol ), les idées que vous avez eu, ce que représentent vos projets,...
Il doit y avoir du texte ( balisé en paragraphes ), et des images devront bien sur illustrer votre page; notamment pour le projet détournement, vous penserez à afficher sur votre page l'œuvre d'origine et votre œuvre détournée.

Vous essayerez d'utiliser toutes les ressources offertes par le langage HTML : titres, sous-titres, tableaux, lien,...

Ces pages seront ensuite mises en ligne sur le site izeunetit.fr, et visualisables par le monde entier !

Travail à faire

Vous allez commencer par adapter le code déjà écrit pour qu'il corresponde à votre projet.

Ensuite...à vous d'étoffer votre code ! Aidez-vous du mémento pour l'utilisation des différentes balises, comment insérer une image, un lien, une liste,...

Attention pour les fichiers images, les navigateurs ne peuvent pas lire le format d'image de Gimp ( fichiers .xcf ); il faudra donc les convertir dans un format lisible comme le JPEG ( .jpg ), ou plutôt le PNG ( .png ) de meilleure qualité.

Une fois ceci fait, ajoutez les fichiers image à votre projet Thimble : Ajouter un fichier au projet > Envoyer un fichier...

Encore une fois, ne vous préoccupez pas pour l'instant de la mise en forme de votre ou de vos page(s) ( cela sera fait au chapitre suivant...), mais uniquement de son contenu...

En fin de séance, pensez à télécharger dans un dossier de votre zone personnelle sur le réseau du lycée, l'ensemble des fichiers de votre projet sous forme d'une archive compressée ( format .zip ), de façon à pouvoir les réutiliser aux prochaines séances : Télécharger les fichiers (.zip)