6.1 HTML, CHAÎNES DE CARACTÈRES

 

 

INTRODUCTION

 

HTML (Hyper Text Markup Language) est un langage de description de documents conçu pour les pages Web. Le rendu d’un site Web dans le navigateur, aussi complexe puisse-t-il paraître, est généré à partir d’un fichier texte ordinaire contenant un balisage (markup en anglais) marquant la structure du document en plus du texte visible. Ce balisage est constitué de paires de balises (tags en anglais) formées d’une balise ouvrante et d’une balise fermante. La balise ouvrante débute par un chevron < et se termine par son opposée > ; la balise fermante débute par </ et se termine par >.

La structure de base d’un fichier texte HTML est constituée des balises <html> et <body> et de leur balise fermante correspondante. 

<html>
   <body>
      TigerJython Web-Site
   </body>
</html>

La casse des caractères formant les balises (majuscules ou minuscules) ainsi que les indentations et les retours à la ligne importent peu pour le rendu final du document. On aurait donc très bien pu obtenir le même résultat avec le fichier suivant qui n’est cependant pas recommandé puisqu’il est moins lisible et moins uniforme pour un humain.

CONCEPTS DE PROGRAMMATION: HTML, lien hypertexte, chaine de caractères, type de donnée constant (non mutable)

 

 

QU’EST-CE QU’UNE CHAÎNE DE CARACTÈRES?

 

Dans la plupart des programmes, particulièrement dans le contexte du Web, il faut un type de donnée capable de stocker du texte formé par un enchaînement de caractères individuels issu, par exemple, du clavier ou d’un fichier. Il est nécessaire de disposer également de certains caractères spéciaux permettant d’indiquer des retours à la ligne ou des tabulations. En Python, on utilise le type de donnée str pour stocker les chaînes de caractères.

Le texte d’une chaine de caractères est placé entre guillemets simples ou doubles. Le texte d’une chaine de caractères peut être interprété comme une liste dont les éléments sont les caractères individuels qui le constituent. La plupart des opérations courantes sur les listes peuvent être utilisées sur les chaines de caractères à une différence importante près : On peut accéder aux caractères individuels d’une chaine de caractères par leur indice (parenthèses carrées), mais il n’est pas possible de modifier les caractères constituant les chaines par une affectation car les chaines de caractères sont un type immutable. Pour changer une chaine de caractères, il faut en fait en créer une nouvelle.

En Python 2, les chaines de caractères sont représentées à l'interne par des caractères ASCII sur 8 bits. Si l'on préfixe la chaine de caractère par un u, comme dans u'chane de caractères', la représentation interne des caractères se fera alors dans l'encodage Unicode 16 bits, permettant d'inclure sans problème les caractères spéciaux et accentués. Les caractères individuels ne sont cependant pas représentés par un type particulier comme en C mais par une chaine de caractères de longueur 1. En Python 3, la représentation en Unicode sur 16 bits est celle adoptée par défaut.

Le programme suivant définit un texte formatté en HTML et l’écrit sur la sortie standard.

html = "<html><body>TigerJython Web Site</body></html>"
print(html)

On peut sans problème parcourir une chaine caractère à caractère en utilisant une boucle for et un indice :

html = "<html><body>TigerJython Web Site</body></html>"

for i in range(len(html)):
   print(html[i])

Il est cependant plus élégant d’utiliser une boucle for avec le mot-clé in pour en parcourir directement les éléments: 

html = "<html><body>TigerJython Web Site</body></html>"
for c in html:
   print(c)

Une chaine de caractères peut également contenir des caractères de contrôle spéciaux appelés séquences d’échappement qui débutent par un antislash (backslash en anglais). Parmi celles-ci, on compte notamment le retour à la ligne \n et la tabulation \t. Ces séquences permettent donc de créer la chaîne de caractères présentée tout en début de chapitre:

html = "<html>\n   <body>\n      TigerJython Web Site\n   </body>\n</html>"
print(html)

Il est possible de lire un texte depuis un fichier texte. Pour cela, créer un fichier welcome.html à l’aide de votre éditeur de texte favori dans le même dossier que votre programme Python, en y mettant le contenu suivant: 

<html>
   <body>
      <h1>TigerJython Web-Site</h1>
      Good morning
   </body>
</html>

On spécifie un titre de premier niveau avec  la balise <h1>. Le programme suivant lit le fichier texte et stocke le contenu de ce dernier dans la chaine de caractères html qui est ensuite affichée sur la sortie standard

html = open("welcome.html").read()
print(html)

 

 

MEMENTO

 

Une chaine de caractères est un objet immutable constitué de caractères. On peut lire les caractères individuellement à l’aide de leur indice. Toutefois, toute tentative de modifier l’un des caractères de la chaine se soldera par une erreur (exception). En Python, contrairement à d’autres langages, il n’existe pas de type de donnée spécifique pour stocker les caractères individuels puisque des caractères isolés y sont considérés comme des chaines de caractères de longueur 1.

On peut ouvrir des fichiers à l’aide de la fonction open() en spécifiant le chemin du fichier à ouvrir. Ce chemin peut être relatif au dossier contenant l’archive tigerjython2.jar ou absolu si on le préfixe d’un slash (dans Windows, il faut également spécifier une lettre pour identifier le lecteur). Par exemple:

 open("test/welcome.html") welcome.html se trouve dans le sous-dossier test du dossier de tigerjython2.jar
 open("/myweb/test/welcome.html") welcome.html se trouve dans le dossier /myweb/test du même lecteur contenant l’archive tigerjython2.jar
 open("d:/myweb/test/welcome.html")

(Windows uniquement)
welcome.html se trouve dans le dossier \myweb\test du lecture D:

Il est possible de joindre deux chaines de caractères avec l’opérateur + (concaténation). Il faut cependant que les deux opérandes soient réellement des chaînes de caractères. L’instruction

>>> "pi = " + 3.1459

engendrera donc une erreur. Il faut en effet commencer par convertir le nombre 3.1459 en chaine de caractères en utilisant la fonction str():

>>> "pi = " + str(3.14159)


Les opérations les plus importantes sur les chaines de caractères:

s = "Python" Définit une chaine (variante: s = 'Python')
s[i] Accède au caractère situé à la position d’indice i
s[start:end] Nouvelle sous-chaine à partir des caractères situés entre start et end non compris
s[start:]

Nouvelle sous-chaine à partir des caractères depuis l’indice start jusqu’à la fin de la chaine
s[:end]

Nouvelle sous-chaine à partir des caractères depuis le début jusqu’à end non compris
s.index(x)

Indice de la première occurrence de x (-1 si absent)
s.find(x)

idem
s.find(x, start)

Indice de la première occurrence de x à partir de start (-1 si absent)
s.find(x,start,end)

Indice de la première occurrence de x entre start et end non compris (-1 si absent)
s.count(x)

Retourne le nombre d’occurrences de x dans s
x in s

Retourne True si la sous-chaine x est présente dans s
x not in s

Retourne True si la sous-chaine x n’est pas présente dans s
s1 + s2

Concaténation de s1 et s2 en une nouvelle chaîne
s1 += s2

Remplace s1 par la concatenation de s1 et s2
s * 4

Nouvelle chaine formée de 4 répétitions de la chaine s
len(s) Retourne le nombre de caractères dans s

 

 

NAVIGATEUR WEB

 

Le rôle le plus fondamental d’un navigateur Web est d’interpréter les balises HTML présentes dans un document HTML et d’en effectuer le rendu dans une fenêtre en respectant au mieux les informations de structure présentes dans le balisage HTML. On peut effectuer le rendu du fichier welcome.html sur le PC après avoir installé un navigateur (Firefox, Explorer, Chrome, Safari, Opera, etc.).

TigerJython met à disposition une fenêtre de navigateur élémentaire comme instance de la classe HtmlPane. La méthode insertText() permet d’insérer un chaine contenant du code HTML et d’en effectuer un rendu basique.


 

   

from ch.aplu.util import HtmlPane

html = open("welcome.html").read()
pane = HtmlPane()
pane.insertText(html)
Sélectionner le code (Ctrl+C pour copier, Ctrl+V pour coller)

 

MEMENTO

 

Un navigateur Web interprète le balisage d’un document HTML et en effectue le rendu d’après les informations de structure contenues dans le HTML.

HtmlPane ne connait que les balises HTML les plus courantes et fondamentales. Il n’est donc pas possible d’y afficher des documents HTML complexes. On peut également utiliser un objet HtmlPane pour afficher la sortie du programme dans une fenêtre séparée et avec une mise en forme moins austère que la simple console.

 

 

HYPERLIENS

 

La propagation explosive du web est essentiellement due au fait qu’un site Web peut contenir des éléments qui conduisent, par un simple clic de souris, à d’autres sites hébergé sur un autre serveur Web souvent situé à l’autre bout de la planète. Ces éléments sont appelés hyperliens (hyperlink en anglais) ou liens hypertextes et peuvent constituer un structure d’informations interconnectées, à la manière d’une toile d’araignée.

Créer à nouveau un fichier welcome.html en y incluant la balise <a>. On y utilise également la balise <p> qui définit un nouveau paragraphe précédé par défaut d’un retour à la ligne. 

<html>
   <body>
      <h1>TigerJython Web-Site</h1>
      <p>Good morning!</p>
      <a href="http://www.tigerjython.ch/">TigerJython Home</a>
   </body></html>

Pour rendre les hyperliens utilisables, il est nécessaire de définir une fonction de rappel linkCallback()(ou tout autre nom similaire) et d’enregistrer celle-ci avec le paramètre linkListener du constructeur HtmlPane(). Cette fonction de rappel sera donc automatiquement appelée lors d’un clic sur le lien, ce qui va faire naviguer le HtmlPane vers l’URL contenue dans l’attribut href de l’hyperlien.

from ch.aplu.util import HtmlPane

def linkCallback(url):
    pane.insertUrl(url)

html = open("welcomex.html").read()
pane = HtmlPane(linkListener = linkCallback)
pane.insertText(html)
Sélectionner le code (Ctrl+C pour copier, Ctrl+V pour coller)

 

MEMENTO

 

Les hyperliens sont des références croisées dans un document permettant de sauter vers d’autres documents. Les documents liés constituent une fonctionnalité caractéristique du World Wide Web.

Malheureusement, le rendu des pages Web n’est que partiel dans la fenêtre HtmlPane. Il est cependant possible d’utiliser le navigateur par défaut de la machine avec HtmlPane.browse() [plus... Notre programme lance donc un nouveau processus sur la machine en délégant
une partie du travail au navigateur par défaut installé. En anglais, on dit "to spawn a new process"]]. 
from ch.aplu.util import HtmlPane
HtmlPane.browse("www.tigerjython.com")

 

 

EXERCICES

 

1.


La balise 

<img src="gifs/tigerlogo.png" width="120" height="116"></img>

permet d’ajouter une image située dans le sous-dossier gifs du dossier contenant le program Python.

Créer une fichier showlogo.html et un programme qui montre la page suivante dans une fenêtre HtmlPane:

Vous pouvez télécharger l’image tigerlogo.png ici.
2.

Définir les chaines last_name, first_name, street et location ainsi que house_number et zip_code contenant vos coordonnées personnelles ou des données imaginaires. Joindre ces différentes chaines de caractères en une seule chaine address en utilisant l’opérateur +, de telle manière que print(address) écrive sur la sortie standard l’information formatée de la manière suivante:

first name, last name
house number, street
zip code, location