Si ça vous est déjà arrivé
É en Unicode est le caractère 201. C'est plus grand que 127,
donc codé sur deux octets : 195 137
En Latin 1 : 195 → Ã, 137 → ©
Le Web dans les programmes :
Le Web à l'agrégation :
De nombreux concepts font aussi partie du bagage culturel des informaticiens.
Comment sont représentés les textes dans un ordinateur ?
Exemple de texte réaliste:
" و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
"
Encodage 1 caractère = 1 octet (8 bits) :
Encodage multi-octets:
Impossibilité de mettre plusieurs « alphabets » dans un même texte
Chaque logiciel « interprétait » les séquences d'octet de manière prédéfinie
Un standard international (Unicode Consortium) qui donne à chaque caractère
un code :
A → 65
B → 66
…
a → 97
…
é → 233
…
α → 945
…
↯ → 8623
Rajouter un nouvel alphabet ou un nouveau caractère est un processus complexe.
Actuellement 143,859 caractères (154 « alphabets » et symboles, dont les symboles Latins, le Chinois, Arabe, …)
Unicode permet un maximum de 1,111,998 (donc on a attribué ~ 13% des caractères possibles, on a de la marge).
Mais comment stocker ces codes dans un fichier texte par exemple (qui est une suite d'octets) ?
Rappel:
1 octet → 8 bits → 256 valeurs
2 octets → 16 bits → 65 536 valeurs
3 octets → 24 bits → 16 777 216 valeurs
On pourrait utiliser 3 octets pour chaque caractère :
00 00 41 00 00 42 00 03 b1 …
A B α
Universal (Character Set) Transformation Format 8 bit
Encodage
| Nombre d'octets | valeurs | Octet 1 | Octet 2 | Octet 3 | Octet 4 |
| 1 | 0-127 | 0xxxxxxx | |||
| 2 | 128-2047 | 110xxxxx | 10xxxxxx | ||
| 3 | 2048-65535 | 1110xxxx | 10xxxxxx | 10xxxxxx | |
| 4 | 65536-1114111 | 11110xxx | 10xxxxxx | 10xxxxxx | 10xxxxxx |
(dans le derniers cas, certains codes sont inutilisés)
A ⟶ 6510
⟶ 0100 00012 (représenté sur un
seul octet)
ễ ⟶ 787710
⟶ 0001 1110 1100 01012 (représenté
3 octets) :
11100001 1011 10
11 1000 0101≡ 225 187 133
🐵
⟶ 12805310 ⟶ …
≡ 240 159 144 181
Avantages :
É en Unicode est le caractère 201. C'est plus grand que 127,
donc codé sur deux octets : 195 137
En Latin 1 : 195 → Ã, 137 → ©
HyperText Markup Language : langage de mise en forme
de documents hypertextes (texte + liens vers d'autres
documents). Développé au CERN en 1989.
1991 : premier navigateur en mode texte
1993 : premier navigateur graphique (mosaic)
développé au NCSA (National Center for Supercomputing
Applications)
| Exemple | Rendu par défaut |
|---|---|
|
|
Un texte en gras |
|
Un lien |
|
|
On dit que <toto> est une balise ouvrante et </toto> une balise fermante. On peut écrire <toto/> comme raccourci pour <toto></toto>.
| 1973 | GML, Generalised Markup Language développé chez IBM. Introduction de la notion de balise. |
| 1980 | SGML, Standardised GML, adopté par l'ISO |
| 1989 | HTML, basé sur SGML. Plusieurs entreprises (microsoft, netscape, ... ) interprètent le standard de manière différente |
| 1996 | XML, eXtensible Markup Language norme pour les documents semi-structurés (SGML simplifié) |
| 2000 | XHTML, version de HTML suivant les conventions XML |
| 2008 | Première proposition pour le nouveau standard, HTML5 |
| 2014 | Standardisation de HTML 5.0 |
| 2017 | Standardisation de HTML 5.2 |
Séparer la structure du document de son rendu. La structure donne une sémantique au document :
Cela permet au navigateur d'assurer un rendu en fonction de la sémantique. Il existe différents types de rendus:
<!DOCTYPE html>
<html>
<head>
<title>Un titre</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Titre de section</h1>
<p> premier paragraphe de texte. On met
un <a href="http://www.lri.fr">lien</a> ici.
</p>
<!-- on peut aussi mettre des commentaires -->
</body>
</html>
Pour être valide un document HTML contient au moins les balises suivantes :
Les balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, permettent de créer des titres de section, sous-section , sous-sous-section ,…
Des paragraphes de textes sont introduits avec les balises <p>. Par défaut chaque paragraphe implique un retour à la ligne:
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamc</p>
<p>Nouveau paragraphe</p>
Remarque : par défaut, les espaces, retour à la ligne, … sont ignorés et le texte est reformaté pour remplir la largeur de la page.
Les balises <b> (bold, gras), <i> (italic, italique), <u> (underlined, souligné) <em> (emphasis, important) et beaucoup d'autres permettent de décorer le texte.
<p><b>Lorem ipsum dolor</b> sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. <u>Ut enim ad minim veniam</u>, <em>quis</em> nostrud
exercitation ullamc</p>
<p><i>Nouveau</i> paragraphe</p>
On peut formater des tables en utilisant :
<table>
<tr> <th>Nom</th> <th>Prénom</th> <th>Note 1</th> <th>Note 2</th></tr>
<tr> <td>Foo</td> <td>Bar</td> <td> 15</td> <td>12</td> </tr>
<tr> <td>Doe </td> <td>Jonh</td> <td colspan="2">Absent</td></tr>
</table> On peut créer des listes énumérées (avec <ol>, ordered list) ou non énumérées (avec <ul>, unordered list). Chaque ligne est limitée par une balise <li> ( list item)
<ul>
<li> Un élément </li>
<li> <ol> <li> Un autre élément </li>
<li> <ol> <li> Un sous-élément</li>
<li> Un autre sous-élément</li>
</ol>
</li>
</ol>
<li>Le dernier</li>
</ul>
On peut faire référence à une autre ressource en utilisant un lien hyper-texte (balise <a/> et son attribut href). La cible du lien peut être absolue (une URL complète avec le protocole, par exemple https://www.lri.fr) ou relative (par exemple foo.html). Si l'URL est relative, le chemin est substitué à la dernière composante de l'URL de la page courante. Si l'URL commence par un # elle référence, l'attribut id d'un élément de la page:
<a href="https://www.lri.fr">Le LRI</a>
<a href="../../../index.html">Un lien</a>
<a href="#foo">On va vers le titre</a>
…
<h1 id="foo">Le titre</h1>
L'élément <form> permet de créer des formulaires HTML. Un formulaire est constitué d'un ensemble de widgets (zones de saisies de textes, boutons, listes déroulantes, cases à cocher, ... ) et d'un bouton submit. Lorsque l'utilisateur appuie sur le bouton, les données du formulaires sont envoyées au serveur. Exemple, fichier nom.html :
<body>
<form method="get" action="https://foo.com/foo.php" >
Entrez votre nom :
<input type="text" name="val_nom"/>
<input type="submit" />
</form>
</body>
</html> On verra les passages de paramètres la semaine prochaine.
On peut appliquer un style CSS :
<a href="http://www.lri.fr" style=" color:red">Un lien</a>
Apperçu:
Inconvénients :
<html>
<head>
<title>…</title>
<style>
a { color: red; }
</style>
</head>
<body>
<a href="…">Lien 1</a> <a href="…">Lien 2</a>
</body>
</html> Apperçu :
Inconvénient : local à une page
Fichier style.css:
a { color: red; }
Fichier test.html:
<html>
<head>
…
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
…
</html>
Modifications & déploiement aisés
Une propriété CSS est définie en utilisant la syntaxe:
nom_prop : val_prop ;
<a href="…" style=" color:red;border-style:solid;border:1pt;">Lien 1</a>
a {
color : red;
border-style: solid;
border: 1pt;
}
CSS permet de spécifier des longueurs comme valeurs de certaines propriétés (position et taille des éléments, épaisseur des bordures, …). Les longueurs doivent comporter une unité. Les unités reconnues sont:
Chaque élément de la page HTML possède une boîte rectangulaire qui délimite le contenu de l'élément:
La zone entre le contenu et la bordure s'appelle le padding (« remplissage »). La zone autour de la bordure s'appelle margin ( « marge »).
On peut spécifier jusqu'à 4 valeurs:
span {
padding:10pt 20pt 5pt 0pt;
margin:10pt 5pt;
border-width:3pt;
border-color:red blue green;
border-style:solid dotted;
}
L'attribut CSS box-sizing permet de spécifier le mode de calcul de la taille d'une boîte. Deux valeurs sont possible :
La propriété display contrôle le mode d'affichage d'un élément:
a { display: inline; … }
a { display: none; … }
a { display: block; … }
a { display: inline-block; width: 4em; height: 2em; … }
Le type de positionnement est donné par la propriété position
| static | positionnement « automatique » |
| fixed | positionnement par rapport à la fenêtre du navigateur (la boîte est supprimée du flot) |
| relative | positionnement « relatif » par rapport à la position normale |
| absolute | positionnement « absolu » par rapport à l'ancêtre le plus proche qui n'est pas static |
Pour fixed, relative et absolute, les propriétés top, bottom, left et right dénotent les décalages respectifs.
a { position: static;
… }
a { position: fixed;
right:10pt;
top: 10pt;
}
a { position: relative;
left: 10pt;
bottom: -5pt;
… }
a { position:absolute;
right:0pt;
bottom: 10pt;
}
L'attribut overflow permet de gérer le débordement. Il peut prendre les valeurs visible, hidden et auto :
Les couleurs peuvent être données:
On peut définir la couleur de fond d'une boîte avec la propriété background et la couleur du texte avec la propriété color
Certaines propriétés permettent d'alterer le rendu du texte d'un élément
| direction | ltr ou rtl (orientation du texte) |
| text-transform | capitalize, uppercase, lowercase |
| text-decoration | underline, overline, line-through |
| text-align | left, right, center, justify |
| text-indent | longueur du retrait de paragraphe |
| vertical-align | alignement vertical
par rapport à la ligne de texte baseline, top, bottom, middle ou une longueur. |
| font-family | liste de nom de polices séparées par des virgules (Helvetica, sans, "Times New Roman") |
| font-style | normal, italic |
| font-weight | normal, lighter, bold, bolder |
| font-size | soit une longueur soit xx-small, x-small, small, medium, large, x-large, xx-large |
On peut aussi spécifier un descripteur de police
@font-face {
font-family: Toto;
src: url(toto.ttf);
}
a { font-family: Toto; }
On peut sélectionner finement les éléments auxquels un style s'applique :
| * | tous les éléments |
| x | tous les éléments dont la balise est x |
| .foo | tous les éléments dont l'attribut class contient foo |
| x.foo | (sans espace) tous les éléments dont l'attribut class contient foo et dont la balise est x |
| #foo | l'élément dont l'attribut id vaut foo (les id doivent être uniques) |
| X Y | tous les éléments selectionnés par Y qui sont des descendants des éléments sélectionnés par X |
| X, Y | tous les éléments selectionnés par X ou par Y |
| X > Y | tous les éléments dont selectionné par Y qui sont des fils d'éléments sélectionnés par X |
| a:visited | les liens déjà visités |
| a:link | les liens non visités |
| X:hover | élément selectionné par X et survollé par la souris |
La spécification CSS3 en définit beaucoup d'autres …
On veut souvent pouvoir appliquer un style à un unique élément d'une page, ou a un groupe d'éléments bien défini. On utilise pour celà l'attribut id de l'élément ou l'attribut class commun à plusieurs éléments:
Fichier CSS:
—————————————————————————
#toto123 { background:red; }
.bluetext { color: blue; }
.border { border: 1pt solid green; }
Fichier HTML
—————————————————————————
<html>
<head> ... </head>
<body>
<div class="bluetext"> AAA </div>
<div id="toto123" class="border"> BBB </div>
<div class="border bluetext"> CCC </div>
</body>
</html>
L'élément d'id toto123 a un fond rouge.
Les éléments de classe bluetext sont bleus
Les éléments de classe border
une bordure verte
AAA
BBB
CCC
Les sélectionneurs CSS peuvent être composés afin de créer des chemins de sélection :
div li a { … } /* tous les a descendants d'un li descendants d'un div */
#id100 > p .foo { … } /* tous les éléments de class foo se trouvant
à n'importe quelle profondeur sous un p
lui-même étant un sous-élément direct
de l'élément d'id id100 */
p.bar { … } /* toutes les balises p qui ont la classe bar */
p .bar { … } /* toutes la balises ayant la classe bar placées
sous une balise p (attention à l'espace !) */
a, li * /* tous les a ou tous les éléments placés sous un li */
Que se passe-t-il quand un éléments est sélectionnés par plusieurs sélectionneurs ?
(nombre d'id (#foo), nombre de classes (.bar), nombre de balises)
On sélectionne les règles ayant la plus forte valeur,
comparé composantes par composantes (ordre
lexicographique).
S'il reste plusieurs règles possibles, on prend la
dernière déclaration dans l'ordre du fichier.
* { color: blue; } /* score (0, 0, 0) */
#id101 li b { color: red; } /* score (1, 0, 2) */
#id101 ol * b { color: green; } /* score (1, 0, 2) */
.class ol li b { color: pink; } /* score (0, 1, 3) */
Le score le plus élevé est (1, 0, 2). Il y a deux sélectionneurs qui ont ce score, on choisit le dernier dans l'ordre du fichier donc le texte des éléments sélectionnés sera vert.
Pour n'importe quelle propriété (color, height, …) on peut donner des valeurs symboliques :
Fichier CSS:
—————————————————————————
div { background: red; }
span { background: blue; }
div span { background: unset; }
Fichier HTML
—————————————————————————
<html>
<head> ... </head>
<body>
<div > AAA </div>
<span> BBB </span>
<div> <span> CCC </span></div>
</body>
</html>
Tous les divs sont en rouge
Tous les spans sont en bleu
Les spans sous un div n'ont
pas le couleur de fond, donc sont en rouge
AAA
BBB
CCC
On peut appliquer une transformation géométrique à un élément avec la propriété transform. On peut utiliser une liste des valeurs suivantes :
Il existe aussi une notion de transformation 3D plus complexe (application d'une matrice de transformation). Attention, les transformations s'appliquent à toute la boite (bordure comprise).
font-size: 150%
transform:scale(2,2)
On peut demander à CSS d'animer les changements de propriétés au moment de l'application d'un style, grâce à la propriété transition :
transition: prop1 duree1 fun1 del1, …, propn dureen funn deln
Attention, on ne peut animer que si les propriétés de départ et d'arriver ont des valeurs numériques (i.e. pas de inherit, unset, auto, …).
On dispose à chaque fois d'un carré avec une bordure noire et un font bleu clair, d'une largeur et hauteur de 10vmin. On anime à chaque fois une grandeur dans :hover.
.box {
width:10vmin;
height:10vmin;
background-color: #ddf;
border: solid 0.1vmin black;
}
#b1:hover { width:20vmin; transition: width 1s linear; }
…
Il arrive que certaines boites se recouvrent :
On peut utiliser la propriété z-index pour définir l'ordre d'empilement (plus elle est élevée, plus la boite est en avant plan). Le z-index par défaut vaut zéro, on a donné la propriété z-index:2; à la boîte contenant du texte :
Sur les langages :
Sur l'enseignement :
XML (eXtensible Markup Language) est un standard de représentation de données
Quels sont les autres moyen de représenter les données ?
Quels sont les désavantages des représentations ci-dessus ?
<exemple>
ceci est la racine <balise>on peut</balise> y mettre des
balises <level><level>imbriquées</level> </level> comme
on veut si
elles sont <FOO>bien</FOO> parenthésées
</exemple>
| séquence | caractère |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
| &#nnnn; | Caractère de code UTF-8 nnnn |
<exemple id="1">
On se donne cette fois un <FOO>exemple</Foo> complet, mais
<balise>incorrect. En effet, il y a
<note id="32" val='32'>plusieurs</note> erreurs dans
<note id="42" id="51">dans ce document</note>.
Il n'est pas simple de toutes les trouver
</exemple>
<exemple>En plus cet exemple est en deux parties</exemple>
Un bon exemple est XHTML (XML pour les pages Web)
Autre exemple: les flux RSS de mises à jour d'un blog ou d'un podcast
En réalité, on ne manipule pratiquement jamais de XML tel que stocké sur le disque
Une application moderne mélange BD relationnelle et XML (et aussi d'autres choses si besoin: JSON, YAML, …)
Comme tout le monde peut définir son propre format XML, on veut pouvoir être sûr que des données en entrées d'un programme ont un certain format (par exemple, c'est du XHTML valide, sans balise inconnue des navigateurs)
Il existe plusieurs manières de contraindre les balises d'un document XML. On s'intéresse dans le cours à la plus simple.
Document Type Definitions. Permet de définir le contenu d'un document par des expressions régulières
Syntaxe particulière qui n'est pas du XML
Permet de définir:
Un fichier contenant une suite de directives de la forme suivantes:
<!ELEMENT recette (titre,ingredients,duree,etapes)>
<!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
<!ELEMENT titre #PCDATA >
<!ELEMENT ingredients (ingredient+) >
<!ELEMENT duree #PCDATA >
<!ELEMENT etapes (e*) >
<!ELEMENT ingredient #PCDATA>
<!ELEMENT e #PCDATA>
<!ATTLIST e num CDATA>
Question: quel est la taille minimale d'un document valide ?
Il suffit de référencer la DTD dans un élément
spécial
<!DOCTYPE racine SYSTEM "fichier.dtd" >
avant la racine du
document
<!DOCTYPE recette SYSTEM "recette.dtd">
<recette difficulte="facile">
<titre>Tiramisú</titre>
<ingredients>
<ingredient>mascarpone</ingredient>
<ingredient>oeufs</ingredient>
…
</ingredients>
<duree>2h</duree>
<etapes>
<e num="1">Séparer les blancs des jaunes</e>
<e num="2">…</e>
…
</etapes>
</recette>
(Le but est de donner l'intuition qui permet de relier les documents XML aux arbres et rappeler différentes notations sur ces derniers).
Soit les séquences (ou mots) formées uniquement des
caractères [ et ]. On
note Diff(u) la différence entre le nombre
de [ et le nombre de ] dans u.
Le langage de Dyck est l'ensemble des mots u composés
de [ et ] tels que
En français ? ce sont les séquences de [ et ] bien parenthésées.
Il existe une biijection entre les mots du langages de Dyck et les arbres !
[] [[]] [[][]] [[][][]] [ [[][]] [] [[][]] ]
Différentes types de paires de parenthèses ⇒ différentes étiquettes pour les nœuds de l'arbre
Un document XML peut être vu comme un arbre !
Voir un document XML comme un arbre est fondamental :
On manipule ici des arbres enracinés, i.e. ayant un nœud particulier appelé racine (root) (on le dessine en général en haut !)
On appelle profondeur d'un nœud sa distance (en nombre d'arrête à la racine)
Les fils (child) d'un nœud n sont les nœuds relié directement à n et de profondeur plus grande.
Le parent d'un nœud n est le nœud relié directement à n et de profondeur inférieure.
Un nœud sans fils est appelé une feuille. L'unique nœud sans parent est la racine.
Les frères (siblings) d'un nœud n sont tous les nœud qui ont le même parent que n.
Les descendants d'un nœud sont ses fils et les fils de ses fils et … (jusqu'aux feuilles).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Un titre</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Titre de section</h1>
<p> premier paragraphe de texte. On met
un <a href="http://www.lri.fr">lien</a> ici.
</p>
</body>
</html>
Le Document Object Model est un standard du W3C. Il indique comment représenter un document XML comme une structure arborescente dans un langage Objet.
Cela permet de manipuler confortablement un document XML ou HTML sans le faire caractère par caractère.
Le chargement s'occupe automatiquement de la bonne formation (et parfois de la validation)
On va découvrir l'API au moyen d'une activité (en Python) et on la reverra en Javascript en Web 2.
Il est souvent utile de pouvoir échanger de l'information « structurée » entre applications
Solutions actuelles
Une valeur JSON est représenté par un sous-ensemble de la syntaxe Javascript pour les objets.
{ "nom" : "Nguyễn",
"prénom" : "Kim",
"cours": [ "Web1", "Web2" ],
"full time" : true,
"age" : 3.99e1,
"hobby" : null }
Le standard JSONSchema n'est encore qu'un draft, pas facile de valider des documents.
On a vu les principaux formats d'échange. Ils sont utilisés sur le Web pour :
Web1.2 : le protocole HTTP et la notion de serveur et service Web (+ un peu de sécu)