tite fractale

Introduction HTML-CSS-JS

1. Matériel et logiciels

Sans entrer dans des considération très techniques comme le modèle OSI, standard (proposé par l’ISO) de communication en réseau de tous les systèmes informatiques, organisé en couches, il est bon de savoir situer les éléments matériels et logiciels que nous manipulons lorsque l’on se sert d’un ordinateur.

Même si parfois, même la frontière entre le soft et le hard est subtile.

1.1. Matériel

En anglais « hardware » :

1.2. Couches logicielles

En anglais « software » :

2. Créer et ouvrir des fichiers

2.1. Formats de fichiers

Les exemples donnés ici concernent les images, mais on pourrait aussi donner de multiples exemples dans le domaine du traitement de texte, de la video, du son…

Notons qu’il est aussi possible pour les données d’être embarquées dans d’autres types de fichiers. Les fichiers encodés en format TIFF contiennent souvent une image miniature JPEG de l’image principale. De même, les fichiers MP3 peuvent contenir une image JPEG d’une couverture, contenue dans le tag ID3v2. Il est aussi possible de faire bien pire.

2.2. Ouvrir un fichier

Les systèmes d'exploitation possédant une interface graphique proposent en général trois façons d'ouvrir un fichier dans une application :

2.3. Modification de l’association extension-application

« ouvrir avec » apparaît en faisant MAJ et clic-droit sur un fichier.

copie écran ouvrir avec 1

Ensuite il faut choisir un programme pour ouvrir ce fichier et dire de toujours utiliser celui-ci pour les fichiers ayant la même extension.

copie écran ouvrir avec 2

2.4. Modification de l’extension d’un fichier

Attention, Windows cache les extensions par défaut. Pour les voir et pouvoir les modifier, il faut ouvrir un explorateur de fichiers, puis dans les menus :

copie écran 1

copie écran 2

Avec Windows 7, il faut ouvrir le menu Organiser, puis Options des dossiers et de recherche. Si vous ne trouvez pas, vous pouvez taper extension dans la barre de recherche du menu Windows.

Avec Windows 8 :

copie écran win8

2.5. Mise en pratique 1 : les extensions

2.6. Mise en pratique 2 : un CV dans une page web

Faire un CV en HTML : cv_nom.html en travaillant sur un même fichier depuis au moins deux applications :

  1. une pour éditer le fichier, Bloc-Notes,
  2. une pour visualiser le fichier, un navigateur comme Firefox, Chrome, ou même Internet Explorer, voire Lynx (il peut être intéressant d'observer les différences d'interprétations d'un navigateur à un autre).

 

+------------+   +----------------+   +-----------------+   +-----
| Bloc-Notes |   | 1er navigateur |   | 2ème navigateur |   | ...
+----+-------+   +-------+--------+   +-------+---------+   +-----
     |                   |                    |
     |  +----------------+                    |
     |  |  +----------------------------------+
     |  |  |
 +---+--+--+---+
 | cv_nom.html |
 +-------------+

Deux questions au passage : parmi les trois liens ci-dessus, lesquels correspondent à de la lecture ? à de l'écriture ?

Les navigateurs ne font que lire.
Bloc-Notes écrit dans le fichier, mais a aussi besoin de le lire pour nous montrer son contenu au moment de l'ouverture.

Dans ce CV, vous indiquerez au minimum :

2.6.1. Démarrage avec HTML

Tapez les premières lignes de votre CV dans cv_nom.html, puis visualisez votre résultat dans le navigateur.

Nous allons très souvent enchaîner : Ctrl S, Alt Tab, F5, Alt Tab.
Pour Lynx, le raccourci pour rafraîchir est Ctrl R.

2.6.1.1. Généralités sur HTML

Acronyme de « Hyper Text Markup Language ».

Langage de balises pour « transcender » un texte :

C’est un dialecte de SGML, moins strict que XML. Un dialecte tentant de rendre HTML plus strict a été inventé : XHTML.

Pour plus de détail, voir l’article sur Wikipedia.

2.6.1.2. Remarques

2.6.1.3. Balises, entités

On remarque que les navigateurs ne respectent pas :

C'est ce que l'on appelle le whitespace, les espaces blanches. Il faut utiliser :

Deux questions :

  1. Mais comment faire apparaître le symbole « & » (esperluette) sur le navigateur ? De même pour les signes de comparaison comme <, > ? (meta questions !!!)
  2. Pourquoi le navigateur réagit-il différemment à ces fragments :
    • x > 1
    • x < 1
    • 1 > x
    • 1 < x

Pour plus d'informations, voir :

Pour mettre en gras, on pourrait enfermer le texte en question dans des balises b (pour « bold »): <b>texte en gras</b> (balise ouvrante puis fermante).

Structurez votre document avec des balises de titre h1, h2, h3 (h pour header).

<h1>Mon gros titre</h1><h2>Mon sous-titre</h2>Mon contenu

Mettez en place au moins deux sections avec des sous-sections. Tentez d’utiliser des balises de liste ul et li (pour unordered list et list item). Nous verrons plus loin que les balises confèrent à notre document une structure particulière.

2.6.1.4. Commentaires

<!-- Ceci ne sera pas affiché par le navigateur -->

2.6.1.5. Liens et attributs

La balise a permet de créer des hyperliens. Par exemple :

Voici un lien vers l’<a href="index.html">accueil</a>.

apparaîtra ainsi : Voici un lien vers l’accueil. En survolant le lien à la souris, un bon navigateur indique la destination.

On dit que href est un attribut de la balise a.

C'est le moment de changer cette page présentant un CV en véritable site (ensemble de pages liées les unes aux autres). La page d'accueil est généralement nommée index.html. Profitons-en pour ajouter des images, que l'on stockera dans un sous-dossier img.

mon_site (racine du site)
 ├── index.html
 ├── cv.html
 └── img
      ├── portrait.jpg
      └── anim_rigolote.gif

Les fichiers ainsi organisés en dossiers et sous-dossiers forment un arbre ou une arborescence. Pour atteindre un fichier du site, que ce soit avec l'attribut href pour les liens ou l'attribut src pour les images, il est nécessaire d'indiquer son chemin :

Mais quelle méthode privilégier, relatif ou absolu ?

Relatif, même si le chemin absolu par rapport à la racine du site ou directement vers un objet sur Internet est aussi utilisable.
Mettre en place des liens internes (comme la table des matières de cette page) et remarquer que la page n'est pas rechargée.
Mettre en place un tableau, puis essayer cet outil.

2.6.1.6. Structure d’un document

Un code HTML bien formé donne au document une structure d’arbre. Même si ce n’est pas obligatoire, l’élément à la racine de cet arbre est l’élément html, qui contient d’une part des entêtes (dans l’élément head) et d’autre part le corps du document (dans l’élément body) :

<html>
  <head>
    <title>Exemple de HTML</title>
  </head>
  <body>
    <p>Ceci est un paragraphe avec un <a href="cible.html">hyperlien</a>.</p>
    <p>Ceci est un paragraphe où il n’y a pas d’hyperlien.</p>
  </body>
</html>
html
head
title
Exemple de HTML
body
p
Ceci est un paragraphe avec un
a
hyperlien
.
p
Ceci est un paragraphe où il n’y a pas d’hyperlien. 
<html>
 ├── <head>
 │    └── <title>
 │         └── Exemple de html
 └── <body>
      ├── <p>
      │    ├── Ceci est un paragraphe avec un
      │    ├── <a>
      │    │    └── hyperlien
      │    └── .
      └── <p>
           └── Ceci est un paragraphe où il n’y a pas d’hyperlien.

Des standards ont été rédigés pour décrire le parcours de cet arbre. C’est le DOM, pour Document Object Model. Ce standard décrit aussi les évènements qui peuvent être capturés lors de l’interaction avec cet arbre, comme par exemple :

Pour plus de détails, voir l’article Wikipedia ou la documentation Mozilla.

2.6.1.7. Travailler avec un bon éditeur

Un bon éditeur est essentiel pour se retrouver dans un document.

Tout d'abord, il permet de distinguer le texte, les commentaires, les balises, les attributs… C'est la coloration syntaxique. Voir l'article correspondant sur Wikipedia.

De plus, certains éditeurs peuvent travailler les espaces blanches pour faire bien apparaître la structure d'arbre.

Quelques bons éditeurs :

Le non respect des espaces blanches, qui était auparavant considéré comme un inconvénient, permet d’organiser son code assez librement, sans pour autant que l’apparence du site soit modifiée. Profitons-en pour sauter des lignes aux endroits stratégiques !

2.6.1.8. Validation

Il est possible de valider le code HTML d’une page :

Exercices :

Les problèmes de validation fréquemment rencontrés seront :

Autres gadgets :

Approfondissement :

2.6.2. Démarrage avec CSS

2.6.2.1. Principe

HTML permet de mettre en forme mais stocke aussi le contenu.

De nos jours, on sépare le fond de la forme, par exemple grâce aux feuilles de style : les fichiers CSS (Cascading Style Sheet). Voir CSS zen garden pour une démonstration de ce principe.

Cela permet d’organiser le travail en au moins deux équipes :

Les deux équipes travailleront sur des fichiers différents, ce qui évite les conflits (voir l’activité Pourquoi utiliser git).

2.6.2.2. Mise en place

Pour mettre en place une feuille de style dans votre CV, ajouter cet entête :

<!DOCTYPE html>
<html>
    <head>
        <title>Où apparaît ce titre ?</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

Puis fermer les balises restées ouvertes.

C’est le moment d’utiliser un éditeur de texte sérieux comme par exemple SciTE ou Notepad++. Ainsi, vous pourrez :

Créer le fichier style.css dans le même dossier que le CV pour y mettre :

h1 {
  color: red;
}
h2 {
  font-size: 400%;
}

Rafraîchir pour observer les changements, puis changer la taille et la couleur (via CSS bien sûr) pour obtenir quelque chose de présentable. Voici d’autres exemples de sélecteurs et de directives :

h1, h2 {
    text-align: center;
    color: #00aa00;
    font-style: bold;
}
a:link {
    color:#337;
}
a:visited {
    color:#333;
}
a:hover {
    color:#000;
    border:1px solid #aaa;
}
a:active {
    color:#000;
}
a.ref {
    font-style : italic;
    font-size: 70%;
}

Remarque : Si l’affichage des caractères accentués ne se fait pas bien, c’est que le charset ou encodage déclaré dans l’entête ne correspond pas à celui de votre fichier. Essayez de remplacer UTF-8 par ISO-8859-1. Inversement, il peut être intéressant de laisser UTF-8 mais de changer l’encodage avec un éditeur capable de le faire (Notepad++ peut : menu Encoding puis Convert to…). C’est l’occasion du quizz encodage : lequel de ces deux fichiers est en UTF-8 ? en ISO-8859-1 ? (sans regarder le code source bien sûr).

Pour découpler de manière radicale le fond et la forme, on peut utiliser des balises neutres telles que div (bloc) et span (en ligne). Les balises sont identifiées à l’aide des attributs id (identifiant unique) et class (identifie un groupe d’éléments).

div.la_classe {
    /* directives pour les div de classe la_classe */
}
div#l_identifiant {
    /* directives pour la div identifiée par l_identifiant */
}
span.la_classe {
    /* directives pour les span de classe la_classe */
}
span#l_identifiant {
    /* directives pour la span identifiée par l_identifiant */
}
.la_classe {
    /* directives pour tout élément de classe la_classe */
}
#l_identifiant {
    /* directives pour l’élément identifié par l_identifiant */
}

Par exemple, les texte<br /> pourront être remplacés par des <div>texte</div> (voire par des <p>texte</p> pour les Paragraphes). Les mises en italique avec des <i>texte</i> pourront être remplacés par des
<span class="citation">texte</span>
avec, dans le code CSS .citation { font-style: italic }.

Un dernier exemple/exercice : que va afficher un navigateur qui lit ce fichier ?

<style>.double {font-size: 200%}</style>
<span class="double">bla
<span class="double">bla
<span class="double">bla
<span class="double">bla
</span>
</span>
</span>
</span>
D’une part, le navigateur devrait afficher quatre « bla » dont la taille double à chaque fois. C’est le caractère « en cascade ».
D’autre part, c’est un mauvais exemple : pas d’entêtes, style et contenu dans un même fichier…

Et n'oubliez pas de comparer les rendus de différents navigateurs !

Essayer de gommer les différences entre les navigateurs grâce à Normalize.

2.6.2.3. Validation

Il est possible de valider le code CSS d’une page :

2.6.2.4. CSS3

Un nouveau standard, aux possibilités plus poussées :

2.6.3. Approfondissement

Vous pouvez approfondir avec par exemple les documents sur CSS de Mozilla ou ce site (en anglais).

2.6.3.1. Une apparence professionnelle, sans effort

Pour ne pas partir de zéro et réinventer la roue, il est possible d’utiliser des feuilles de style de très bonne qualité mises à disposition librement et gratuitement par des contributeurs. Ce genre de feuilles est souvent compatible avec les différents navigateurs et sont accessibles par exemple sur CSS zen garden, simplement en navigant une galerie.

D’autre part il est possible d’utiliser des feuilles de style sans a priori artistique ou assez neutres, mais qui permettent :

L’adaptativité d’un site est testable depuis différentes machines, mais aussi :

Voici tout de même quelques références importantes si vous voulez concevoir un design de qualité :

2.6.3.2. favicon.ico

C’est la petite icône que les navigateurs affichent à gauche de la barre d’adresse. Certains autres logiciels s’en servent aussi (favoris, flux RSS…). Cet élément est souvent négligé, et puisque, si vous n’en proposez pas une, certains hébergeurs affichent leur icône, autant ne pas se laisser imposer cette petite image qui gâcherait votre site !

Voir l’article Wikipedia correspondant, ou cet article et ce mémo qui vous permettront d’approfondir (en anglais).

Certains sites permettent de télécharger ou de générer une favicon :

2.6.3.3. Générateurs de CSS

2.6.4. Maîtrise de HTML/CSS

Le principe des balises du HTML et des sélecteurs des CSS est assez simple, mais l’avoir compris ne signifie pas pour autant maîtriser les subtilités qui apparaissent dans un « vrai » projet.

2.7. Mise en pratique 3 : mise en ligne

Mettre son CV en ligne en utilisant les comptes de test chez https://www.alwaysdata.com (nécessite les codes d’accès).

2.7.1. Le protocole FTP

Voir l’article sur Wikipedia, duquel on tire :

Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du réseau, ou encore de supprimer ou de modifier des fichiers sur cet ordinateur. Ce mécanisme de copie est souvent utilisé pour alimenter un site web hébergé chez un tiers.

2.7.2. Un client FTP : Filezilla

Après un rapide paramétrage, il suffit de glisser-déposer ses fichiers sur le serveur.

2.7.3. Tester son site, le valider

Il suffit de pointer un ou plusieurs navigateurs vers http://isnxx.alwaysdata.net. Votre site est en ligne !!!

C’est le moment de demander une validation à :

2.8. Mise en pratique 4 : reconstitution

Peaufiner votre CV, chercher comment ajouter des liens internes à la page, des images, des tableaux. Vous vous aiderez de tutoriels sur HTML et CSS.

Ensuite, un exercice intéressant est d’imiter un site existant, par exemple de reconstituer la page d’accueil de votre moteur de recherche préféré, ou pour les meilleurs : d’imiter http://thebiguglywebsite.com/.
Le but étant bien sûr de séparer la forme et le fond.

Ceux qui veulent se perfectionner en CSS peuvent aussi faire cet exercice, où seule la modification du fichier CSS est permise, le fichier HTML étant donné.

3. Dans la vraie vie, sur le web

Explications et présentations générales sur la complexité du web et ce nouvel océan culturel :

Bien sûr, l’informatique ne se résume pas au web. Il y a :

4. La suite

Il est possible de rendre une page interactive. Cela peut se faire de trois manières, dont deux sont proposées ici :

4.1. Côté client

4.1.1. Javascript

Le langage exécuté côté client (en plus du HTML bien sûr) est le plus souvent Javascript. Il peut arriver que ce soit Java (dans une applet) ou encore ActionScript (Flash), mais cela va devenir de plus en plus rare.

Exemples :

Voici quelques suggestions de squelettes de fichiers illustrant l’utilisation de Javascript. Le premier squelette fonctionne en cliquant sur le lien télécharger, mais pour les autres, il faudra les télécharger et les lire en local, après avoir téléchargé des fichiers supplémentaires.

En cas de soucis, pensez à ouvrir la console Javascript pour débusquer le problème (FF récent : Outils, Développeur Web, sinon c’est souvent Ctrl+Shift+J).

Remarques :

Pour approfondir le langage, voici quelques références :

4.1.2. Autres langages

4.1.2.1. Généralités

Même si d’autres langages peuvent être compris par certains navigateurs (souvent après installation d’extensions) Javascript reste le langage le plus courant. Ici nous allons parler des implémentations de certains langages en Javascript.

4.1.2.2. Processing.js

L’intégration de Processing est possible dans la page grâce à Processing.js. Voici deux liens vers la page memento Processing de ce site :

4.1.2.3. Brython

Voir les notes techniques.

4.1.2.4. Blockly

Voir les notes techniques.

Il est possible de générer du code depuis Blockly.

4.2. Côté serveur

En fait le HTML est un langage de très bas niveau. Afin de favoriser la maintenabilité d’un site, il est préférable de générer un export HTML à partir de données bien structurées. Cela permet du coup d’avoir d’autres formats de publication (LaTeX, PDF…).

On peut s’en rendre compte si on commence à coder un site sur plusieurs pages HTML, puis que l’on doit toutes les modifier pour ajuster un élément que l’on veut retrouver sur toutes les pages :

Le code HTML peut être généré puis déployé sur un serveur (site statique), mais aussi être généré à la volée par le serveur, en fonction de la requête (site dynamique).

Une page de ce site est consacrée à la génération dynamique de code HTML.




Christophe Gragnic, quelques idées de Jérôme C., le 25/02/2017, 21h27'18".






Page générée le 27/05/2021, 09h06'59" (source).
historique de la page
historique global