Accueil du site Informatique équitable Quelques bases Initiation html+css Liens Contact

Initiation à la fabrication de pages web

Cet article montre comment faire les pages d'un site web "à la main à l'ancienne", comme le pain bio.
Il est inspiré d'un cours d'initiation donné en collège ou lycée.

A) Le langage html

Qu'est ce que c'est ?

C’est le langage qui permet d’afficher les pages des sites web. Ce langage est lu par les navigateurs comme Firefox, Internet Explorer, Safari, ou Chromium, qui affichent ensuite la page web.

Pourquoi a-t-il été inventé ?

Il a été inventé au début des années 1990 par les scientifiques du CERN de Genève pour permettre l’échange libre de savoirs et d’informations entre les humains. Ce langage est libre. Ses spécifications sont publiques.

Comment fonctionne-t-il ?

C’est un langage à balises. Chaque chapitre, chaque titre, chaque élément commence et fini par une balise qui indique au navigateur le début et la fin de cet élément.

Exemple

<h1>Le titre principal du document </h1>

devient :

Le titre principal du document


A.1 Niveau 1 : écrire une page simple.

Ouvrir un éditeur de texte (pas un traitement de texte) qui est un logiciel simple (en apparence).
Dans windows, c'est le Notepad (accessoires) ou bloc-note, dans GNU/Linux, ce peut être kate, emacs, Vim, etc...

En fait, si vous avez windows, ou MacOS, il est vivement recommander d'installer et d'utiliser un éditeur de texte libre comme Notepad++ ou Bluefish pour écrire du code informatique. (Voir plus bas la remarque sur les différents systèmes opérationnels.)
On peut trouver une fiche descriptive en français et un lien vers le bon site pour le télécharger là :
https://framalibre.org/content/notepad++ un caméléon bizarre

ou https://framalibre.org/content/bluefish

un petit poisson bleu

Taper :


<h1> Titre de ma page </h1>
<h2> Chapitre 1 </h2>
<p> Un petit texte. <br/>
Une histoire en quelques lignes
</p>
<h2>Chapitre 2 </h2>
<h3> Sous Chapitre </h3>
<p>C'est fini ! </p>

Et enregistrez le tout dans un fichier que vous nommez exemple1.txt, puis Enregistrez le de nouveau, une seconde fois, sous : exemple1.html

Fermez l'éditeur de texte. Ouvrir chacun de ces deux fichier en cliquant dessus.

Qu'observe-t-on ?

Le fichier exemple1.txt est ouvert comme un fichier texte par l’éditeur de texte, tandis que le fichier exemple1.html est ouvert par un navigateur. On ne voit plus les balises, mais les titres et le paragraphe sont écrit avec des caractères de tailles différentes.

affichage de la page html

A.2 Niveau 2 : écrire une page web avec une feuille de style simple

A.2.1 Compléter le code html.

Principe : Le language html permet de séparer la forme du contenu.

Re-ouvrir le fichier exemple1.txt avec l'éditeur de texte. Complétez le en ajoutant quelques balises et l'entête réglementaire :


<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>essai2</title>
 <link rel="stylesheet" href="feuilledestyle.css">
</head>

<body>
<h1> Titre de ma page </h1>
<h2> Chapitre 1 </h2>
<p> Un petit texte. <br/>
Une histoire en quelques lignes
</p>
<h2>Chapitre 2 </h2>
<h3> Sous Chapitre </h3>
<p>C'est fini  </p>
</body>
</html>

Enregistrez sous exemple2.html

A.2.2 Quelques explications sur l'entête.

Ce ne sont pas les seules lignes qui peuvent figurer dans un entête.

A.2.3 La feuille de style.

Maintenant, il faut écrire cette feuille de style, toujours avec l'éditeur de texte, Créer un fichier appelé feuilledestyle.css, qui contient :


body {   background-color: #bbd0f0;
}
p { 	font: 12pt 
	color: black;
	
	}
h1  { 	font: italic normal 20pt;
    text-align: center;
	color: #660000;
	}
h2  { 	font: italic normal 14pt ;
	color: red;
	}
h3  {	
	text-decoration: underline;
}

A.2.4 Résultat.

Affichez exemple2.html avec un navigateur.

Qu'observe-ton ?

Remarque1 : bbd0f0 est le code informatique de la couleur de fond. Ce code doit comporter 6 chiffres en numération hexadecimal qui vont de 0 à f (0123456789abcdef)

Remarque2 : on peut observer que la feuille de style donne la décoration des caractères pour les paragraphes <p> , et pour le titre principal <h1> et les titres des chapitres <h2> et des sous-chapitres <h3>.

A.3 D'autres balises simples.

Des balises pas très orthodoxes pour les puristes, puisque selon le principe de séparation de la forme et du fond, il faudrait ne changer l'apparence du texte que par l'utilisation de la feuille de style. Ils ont raison dans l'absolu. C'est mieux. En attendant de maîtriser les feuilles de style, ces petites balises peuvent dépanner.

A.3.1 Caractères gras.

On utilise la balise <b> pour ouvrir, et </b> pour fermer.

exemple


Voilà pour obtenir des <b> mots en gras. </b>

Donne :

Voilà pour obtenir des mots en gras.

A.3.2 Italique.

On utilise la balise <i> pour ouvrir, et </i> pour fermer.

A.3.3 caractères soulignés.

On utilise la balise <u> pour ouvrir, et </u> pour fermer.

A.3.4 Saut de ligne.

Pour avoir un saut de ligne sans changer de paragraphe, on utilise simplement <br/> toute seule.


<p>
  Un paragraphe avec un retour à la ligne.<br/>
  Et la suite du paragraphe.
</p>

A.3.5 Ligne continue.

Pour avoir une ligne qui coupe le texte, on utilise <hr/> toute seule.

Des liens utiles.

Pour aller plus loin : https://openweb.eu.org/

Un exercice de styles pour montrer les possibilités du système html + css : http://www.csszengarden.com/tr/francais/

Toute page doit être valide suivant les standarts du web, ce qui la rend lisible par tout navigateur bien né. Le test peut se faire avec le site de référence : https://validator.w3.org/

B) Le styliste dans les traitement de texte.

Dans OpenOffice, ou LibreOffice, avec la touche F11 on fait apparaître le styliste, qui permet de reprendre cette logique dans votre texte. Voir aussi la fenètre en haut à gauche.

Le styliste permet d'avoir une présentation claire et systèmatique.
Le format d'enregistrement OpenDocument .odt utilise une version évoluée du html de manière très logique.

C) Les logiciels libres.

C.1 Définition et historique.

La définition des logiciels libre a été inventée il y a un peu plus de 25 ans en Californie par des hackers, pour favoriser la liberté des utilisateurs d’ordinateurs.

Un logiciel est libre, si dans sa licence figure 4 libertés.

  1. Liberté d'utilisation.
  2. Liberté de copie et de redistribution.
  3. Liberté de modification ou adaptation.
  4. Liberté d'examiner son code source.

C.2 Des exemples de logiciels libres :

La suite bureautique LibreOffice, le navigateur web Firefox, le logiciel de gestion de courrier électronique Thunderbird, Scribus pour la PAO, VLC pour la vidéo et la musique, Le logiciel de dessin et de traitement d'images Gimp, Audacity, , etc...

Framalibre.

C'est un site qui donne des fiches explicatives, en français, sur de nombreux logiciels libres.

https://framalibre.org/

C.3 GNU/Linux

Le système opérationnel GNU a été inventé par ces hackers, et un finlandais du nom de Linus Thorvald leur a offert un noyaux, qui s'appelait Linux.
L'ensemble s'appelle donc officiellement GNU/Linux, mais en général on prononce seulement "Linux".

tête de gnou stylisé, mascotte du projet GNU et manchot Tux mascote de Linux

Système opérationnel : Ce qui fait fonctionner l’ordinateur et permet de lancer les applications.

Le système GNU/Linux est composé de logiciels libres. Comme on peut librement le modifier il en existe des centaines de versions adaptées à différents usages et différents publics. Il est très sûr. Les virus y sont rarissimes. De vrais collectors !

Programmer, écrire du code est bien plus facile et pratique avec GNU/Linux. Comparativement, Windows et surtout MacOS sont bien moins pratiques. Certains informaticiens déclarent même que programmer avec ces systèmes est une vraie punition par rapport à GNU/Linux !

On peut tester ce système sans l'installer, grâce à des cédérom ou des clés USB.

Les membres d'Euskalug utilisent GNU/linux pour la plupart, et sont disposés à vous aider à l'installer sur votre ordinateur.