Différences entre les versions de « Introduction au langage html »
toross>WikiAdmin |
m (1 version importée) |
(Aucune différence)
| |
Version du 9 février 2023 à 13:24
show-all hide-all show-allBtn hide-allBtn hide-allGlobalBtn
1 Un fichier texte
Le terme générique de texte se réfère à un exemple de matériau écrit ou parlé où ce dernier a été transcrit d'une certaine manière.[1]
En informatique le matériau d'écriture est le fichier. Un fichier texte ou fichier plat ou fichier texte brut ou fichier texte simple est un fichier dont le contenu représente uniquement une suite de caractères qui comprend également des caractères non visibles tels que l'« espace », la « fin de ligne » et la « tabulation ».
Il était une fois une marchande de foie
qui vendait du foie dans la Ville de Foix.
Elle se dit «ma foi c'est la première fois
que je vends du foie dans la ville de Foix !»
Le fichier texte est le format le plus simple pour représenter un texte dans un fichier. Ce type de fichier s'édite très simplement avec des logiciels que l'on trouve sur tous les système d'exploitation; exemple : ed, edit, notepad, notepad++, vi, etc.
Toute donnée gérée par un ordinateur est stockée sous la forme de suites de 0 et 1. Et donc un fichier texte sera stocké sous forme de suite de 0 et 1. Il faudra dans tous les cas définir un codage pour passer d'un caractère, qui est un signe à une suite binaire et d'une suite binaire à des caractères.
Le plus célèbre de codage est ASCII qui est une suite de paquets de 8 bits, mais ASCII n'utilise que 7 bits sur ces 8 bits.
Les caractères visibles du code ASCII
!"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{
Ces 95 caractères imprimables/visibles d'ASCII sont apparus en 1960 qui suffisent à priori à écrire tout type de texte en anglais, pour le français nous avons vu dans l'exercice ↬exo-1 qu'il nous faut au moins 109 caractères et sans parler des caractères de type « #$%&*+- » ou même « € ».
L'art ASCII :
(__)
(oo)
/-------\/ __ O \O/
/ | || /o)\ /|\ |
* ||----|| \(o/ / \ / \
~~ ~~
Vache Yin/Yang Personne Personne contente
\ (\_/) (\___/)
(\___/) \ /\ ()_() (^_^) (='.'=) _[ ]_
(='.'=) ( ) (='.'=) (>$<) ( U U ) \('o')/
(")_(") .( o ). (")_(") (/ \) (")_(") ( : )
Cinq exemples de lapins Bonhomme de neige
D'autres tel que Toyoda Masashi (toyoda@is.titech.ac.jp) ont même créé un logiciel qui produit une animation (un train qui passe) avec du ASCII :
display animations aimed to correct users who accidentally enter sl instead of ls.
L'écriture suivante « ABC » en code ASCII sera codée de la façon suivante:
- en base 10 « 65 66 67 »;
- en base 16 « 41 42 43 »;
- en base 2 « 0100·0001 0100·0010 0100·0011 ».
Le problème du codage ASCII est qu'il ne convient qu'à l'écriture anglaise. Pour le français il ne permet pas d'écrire les caractère accentués par exemple. Afin d'adopter une écriture universelle l'encode UTF-8 a été spécifié qui est toujours basé sur un paquets de 8 bits, mais un caractère peut être code avec 1 ou plusieurs paquet. De plus UTF8 est compatible avec le codage ASCII.
L'écriture suivante « naître » en code UTF8 sera codée de la façon suivante:
- en base 16 « 6e 61 c3 83 c2 ae 74 72 65 »;
- en base 2 « 0110·1110 0110·0001 1100·0011 1000·0011 1100·0010 1010·1110 0111·0100 0111·0010 0110·0101 »;
- comme un texte ASCII « naître ».
On peut noter que le caractère « î » est codé sur 4 paquets de 8 bits (4 octets) :
- en base 16 « c3 83 c2 ae »;
- en base 2 « 1100·0011 1000·0011 1100·0010 1010·1110 »;
- Système d'écriture
- convertisseur de UTF8
- Convertisseur d'hexadécimal en binaire
- ASCII
2 Un fichier binaire
En informatique, un fichier binaire est un fichier qui n'est pas un fichier texte.
De nombreux formats de fichiers binaires stockent une partie de leurs données sous forme de texte (une suite de caractères), le reste servant à interpréter, formater ou afficher ce texte.
Par extension de langage, on appelle « binaire » tout fichier qui n'est pas interprétable sous forme de texte : c.a.d. une image, un son ou encore un autre fichier compressé.
Autre définition: c'est aussi un terme spécifique à l'informatique où l'on part d'un code source (texte) pour générer un logiciel sous forme de fichier exécutable ou (binaire); dans ce contexte « binaire = code exécutable ».
Voici un exemple de fichier binaire, une image jpg 2x2 pixels remplie de blanc.
La partie gauche contient la position en octet du premier octet de la ligne, au contre nous avons 16 octets suivis de leur équivalent en code ASCII, si le code n'est pas visible alors il est représenté par « . ». Le dernier octet qui a pour valeur 0a se trouve à la position 21b (en hexadécimal), si la première position est 0.
Cette vue a été obtenu avec le logiciel evim sous Linux.
Une partie de ce fichier binaire est au format texte : « Created with GIMP » !
0000000: ffd8 ffe0 0010 4a46 4946 0001 0101 0048 ......JFIF.....H
0000010: 0048 0000 fffe 0013 4372 6561 7465 6420 .H......Created
0000020: 7769 7468 2047 494d 50ff db00 4300 0806 with GIMP...C...
0000030: 0607 0605 0807 0707 0909 080a 0c14 0d0c ................
0000040: 0b0b 0c19 1213 0f14 1d1a 1f1e 1d1a 1c1c ................
0000050: 2024 2e27 2022 2c23 1c1c 2837 292c 3031 $.' ",#..(7),01
0000060: 3434 341f 2739 3d38 323c 2e33 3432 ffdb 444.'9=82<.342..
0000070: 0043 0109 0909 0c0b 0c18 0d0d 1832 211c .C...........2!.
0000080: 2132 3232 3232 3232 3232 3232 3232 3232 !222222222222222
0000090: 3232 3232 3232 3232 3232 3232 3232 3232 2222222222222222
00000a0: 3232 3232 3232 3232 3232 3232 3232 3232 2222222222222222
00000b0: 3232 32ff c200 1108 0002 0002 0301 1100 222.............
00000c0: 0211 0103 1101 ffc4 0014 0001 0000 0000 ................
00000d0: 0000 0000 0000 0000 0000 0006 ffc4 0014 ................
00000e0: 0101 0000 0000 0000 0000 0000 0000 0000 ................
00000f0: 0000 ffda 000c 0301 0002 1003 1000 0001 ................
0000100: 7e7f ffc4 0014 1001 0000 0000 0000 0000 ~...............
0000110: 0000 0000 0000 0000 ffda 0008 0101 0001 ................
0000120: 0502 7fff c400 1411 0100 0000 0000 0000 ................
0000130: 0000 0000 0000 0000 00ff da00 0801 0301 ................
0000140: 013f 017f ffc4 0014 1101 0000 0000 0000 .?..............
0000150: 0000 0000 0000 0000 0000 ffda 0008 0102 ................
0000160: 0101 3f01 7fff c400 1410 0100 0000 0000 ..?.............
0000170: 0000 0000 0000 0000 0000 00ff da00 0801 ................
0000180: 0100 063f 027f ffc4 0014 1001 0000 0000 ...?............
0000190: 0000 0000 0000 0000 0000 0000 ffda 0008 ................
00001a0: 0101 0001 3f21 7fff da00 0c03 0100 0200 ....?!..........
00001b0: 0300 0000 109f ffc4 0014 1101 0000 0000 ................
00001c0: 0000 0000 0000 0000 0000 0000 ffda 0008 ................
00001d0: 0103 0101 3f10 7fff c400 1411 0100 0000 ....?...........
00001e0: 0000 0000 0000 0000 0000 0000 00ff da00 ................
00001f0: 0801 0201 013f 107f ffc4 0014 1001 0000 .....?..........
0000200: 0000 0000 0000 0000 0000 0000 0000 ffda ................
0000210: 0008 0101 0001 3f10 7fff d90a ......?.....
3 Le marquage d'un texte ou balisage (en anglais on parle de tag)
Très vite les informaticiens ont voulu faire évoluer les fichiers au format texte.
L'une des techniques les plus puissante pour faire évoluer le fichier texte est l'utilisation de balises.
Le grand avantage de celle-ci est que le fichier reste éditable avec les éditeur des fichiers textes, on dit qu'il est humainement éditable.
Ce qui revient à dire que le fichier reste au format texte et non binaire.
Les langages de balisage représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle.
Les balises sont des unités syntaxiques délimitant une séquence de caractères ou marquant une position précise à l'intérieur d'un flux de caractères (par exemple un fichier texte).
L'inclusion de balises permet de structurer le contenu d'un document de type texte.
Prenons l'exemple d'un texte d'un document à imprimer écrit dans le langage LaTeX :
\documentclass{beamer} % animation
\usepackage[utf8]{inputenc}
\usepackage[francais]{babel}
\title{Introduction à la logique mathématique}
\author{Arthur Torossian}\institute{École des Torossians}
\date{10 octobre 2018}
\begin{document}
\begin{frame}
\titlepage
\end{frame}
\begin{frame}
\onslide<4->{ Et c'est facile.}
\begin{itemize}
\item<1-> premier élément de liste,
\item<2-> deuxième élément de liste,
\item<3-> troisième élément de liste.
\end{itemize}
\end{frame}
\end{document}
Le texte « pur » contenu dans ce fichier LaTeX e est :
Introduction à la logique mathématique
Arthur Torossian École des Torossians
10 octobre 2018
Et c'est facile.
premier élément de liste,
deuxième élément de liste,
troisième élément de liste.
En latex les balises commencent avec le caractère anti-slash « \ », pour écrire ce caractère dans la partie texte, hors balise, on le répète deux fois : « \\ ». \begin{document} est une balise du langage LaTex.
Cette structure est compréhensible par un programme informatique, ce qui permet un traitement automatisé du contenu. Le logiciel LaTex transforme le fichier texte balisé de l'exemple ↬exa-8 pas seulement en un beau document mais aussi avec des informations supplémentaires incluses telles que le contenu d'un index, ou tables des matières, etc.
La structuration avec traitement automatisé permet également de dissocier le présentation d'un document texte de son contenu. Ainsi un même texte sera présenté adapté pour un petit écran de téléphone portable alors que sue l'écran d'un ordinateur la présentation sera plus sophistiquée. Latex peut très générer, à partir de la même source balisée, un livre, des transparents avec des animations ou même des pages html.
voir aussi langage de balisage
Avant de parler de HTML il faut parler en général des partageant la même base de balisage SCGML, XML, etc.
3.1 La partie commune des langages basée sur le SCGML : Standard Generalized Markup Language
Les spécifications du SGML se trouvent sur iso, les documents ISO (Organisation internationale de normalisation) sont payants.
3.1.1 Les balises SGML XML HTML
Une balise est un texte commençant le symbole <(plus petit), suivi du nom de balise puis une partie optionnelle destinée aux attributs et se termine se termine par le symbole >(plus grand).
Il est fortement recommandé de n'utiliser que des lettres non accentuées pour former les noms des balises.
Pour les plus curieux, les règles de nommage sont spécifiées dans la norme ISO.
Sinon on peut adopter suivre les règles moins strictes suivantes :
- les noms doivent obligatoirement débuter par une lettre ou un underscore « _ »;
- les noms peuvent contenir des lettres, des chiffres ou des caractères spéciaux;
- les noms ne peuvent pas contenir d'espaces;
- on évitera les caractères - , ; . < et > qui peuvent être mal interprétés dans vos programmes.
<jeSuisUneBalise>
En SCGML on distingue deux types de balises; les « ouvrantes » et le « fermantes »
Dans l'exemple du langage de LaTeX la balise \begin{document} et la balise \end{document} sont les équivalentes d'une balise ouvrante et fermante.
Le texte contenu entre ces deux balise prend alors une signification, ainsi on passe de la syntaxe à la sémantique.
L'équivalent en SGML de cette exemple serait :
<document>La vie est belle.</document>Dans ce cas là la sémantique du texte « La vie est belle. » est « document ».
Les attributs sont des couples (nom, valeur) reliés entre eux par le symbole égal « = ». La valeur, un texte quelconque, est délimitée par les double ou simple quottes ; « "valeur" » ou « 'valeur' » . Les attributs suivent donc la syntaxe suivante :
attributeName2="AttributeValue2"
par exemple :
color="green"
Et la structure générale d'une balise est :
<baliseName
attributeName1="AttributeValue1"
attributeName2='AttributeValue2'
…
attributeNameN="AttributeValueN"
>
Pour mettre des double-quottes dans les attributs on peut utiliser les « références de caractère » (voir [3])
<gangster name="George "Shotgun" Ziegler">
ou plus simplement pour certains cas favorables :
<gangster name='George "Shotgun" Ziegler'>
Une balise dite ouvrante si après le symbole < de début de balise n'est pas suivi par le caractère « / ».
La balise suivante nommée « city » est ouvrante :
<city name="Paris">
La balise suivante nommée « city » n'est pas ouvrante :
</city>
Une balise dite fermante est un texte commençant le symbole <, suivi de /, suivi du nom de balise et se terminant par le symbole >.
</baliseName>
</city>
Une balise ouvrante et fermante est une balise ouvrante qui ne se termine pas par > mais par />.
<baliseName attributeName1="AttributeValue1"
attributeName2="AttributeValue2"
…
attributeNamen="AttributeValuen"/>
<city name="Paris"/>
Un nœud est l'ensemble du texte commençant par une balise ouvrante et se terminant par la balise correspondante fermante. Le nom du nœud est le nom de la balise correspondante
Un nœud appelé city :
<city id="AR32"> <name>Paris</name> … </city>
L'en-tête d'un nœud est l'ensemble des attributs de la balise.
Le corps d'un nœud est la partie du texte qui se trouve entre la balise ouvrante et la balise fermante correspondante.
Le corps d'un nœud où la balise est ouvrante et fermante possède un corps vide.
Le corps de nœud peut aussi contenir d'autres nœuds. L'en-tête et le corps d'un nœud définissent sa structure. Cette structure est arborescente.
<russian_doll name="Galina">
<russian_doll name=" Anastasiya">
<russian_doll name=" Marta"/>
</russian_doll>
</russian_doll>
Dans certains cas un élément d'un nœud peut se mettre soit sous la forme d'un attribut ou soit sous la forme d'un nœud (à définir quand on spécifie la grammaire de la structure). Cela peut être le cas par exemple pour nommer un nœud.
<city name="Paris"> … </city>
ou
<city> <name>Paris</name> … </city>
4 Un fichier HTML minimal
Rappelons qu'un fichier HTML est un fichier texte plat auquel on donne une structure à l'aide de balises définies avec des suite de caractères en commençant avec le caractère < et se terminant le caractère >.
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
Un fichier HTML commence par la ligne <!DOCTYPE html> qui précise que le fichier est bien un fichier HTML; cette information peut servir aux logiciels qui lisent ce fichier.
Le contenu d'un fichier HTML est organisé comme un arbre (structure arborescente) où les nœuds jouent le rôle du tronc et des branches. Il contient donc une unique racine ou tronc le nœud <html>. Le nœud racine se divisent en deux branches; sa tête (<head>) et son corps (<body>). On peut les représenter par :
html
├── body
└── head
Le nœud - on emploie en général le mot balise à la place de nœud - de l'exemple ↬exa-17 permet de préciser l'encodage des caractères du fichier texte.
Hélas c'est l'histoire de l'informatique qui explique pourquoi l'on doit préciser l'encodage mais il faut le préciser car sinon le caractère «é» par exemple ne s'affichera probablement pas correctement dans un navigateur. Dans notre cas, nous avons choisi l'encodage UTF-8 qui est le plus généralisé et universel.
Il faut aussi, et c'est aussi important, configurer votre éditeur pour utiliser cet encodage afin qu'il enregistre le fichier en utilisant cet encodage.
Notons que «é» est encodé avec l'encodage UTF-8 avec avec deux nombres 195 suivi de 169 alors qu'avec l'encodage iso-8859-1 il sera codé avec le seul nombre 233.
