Une introduction à
HTML / CGI
Patrick Fuchs
Université Paris 7
Equipe de Bioinformatique Génomique et Moléculaire
• HTML = Hyper Text Mark up Language
– langage à balises (« tags »)
– langage qui contient des liens « hyper-text »
• Le HTML habille du texte (~ LATEX)
• Le HTML permet de partager des données situées à des endroits différents
• Ordre de consultation des données laissé à l’utilisateur
• HTML ? langage de programmation
3
1. Généralités
2. Les Bases d’HTML
3. Outils HTML avancés
4. HTML dynamique / Interface CGI
2
• Serveur (mise à disposition de pages web)
• Navigateur (Netscape, Internet Explorer, Firefox…)
• Accession au serveur par un navigateur via l’URL (Universal Resource Locator) ~ adresse :
protocole://adresse-machine/rep/sous-rep/document – protocole :
• http (Hyper Text Transfert Protocol) = protocole le plus courant = protocole de transfert de page html
e.g :
• ftp (File Transfert Protocol) = protocole de transfert de fichiers
• etc…
– adresse-machine :
• numéro IP (Internet Protocol) : e.g. 131.246.50.201
• adresse DNS (Domain Name Server) : e.g.
5
• le site de Dave Ragett @ w3c :
• le site d'Eric Larcher :
• le site de Philippe Moreau :
• l'Electronic Text Center de la bibliothèque de l'Université de Virginie :
etc…
7
1. Généralités
2. Les Bases d’HTML
3. Outils HTML avancés
4. HTML dynamique / Interface CGI
6
• <HTML>…</HTML> : encadre le document
• <HEAD>…</HEAD> : en-tête de la page
• <TITLE>…</TITLE> : donne un titre à la page (moteurs de recherches)
• <BODY>…</BODY> : corps de la page
Rq : fichier HTML = fichier texte
Rq2 : fichier HTML = insensible aux espaces et retours-chariots sauf dans une balise <pre>
9
| souligné : <u>…</u> gras : <b>…</b> italique : <i>…</i> exposant : <sup>…</sup> : <sub>…</sub> indice | Niveaux de titre : niveau 1 : <h1>…</h1> niveau 2 : <h2>…</h2> … niveau6 : <h6>…</h6> |
Séparateurs : nouveau paragraphe : <p>
retour à la ligne : <br> ligne horizontale : <hr>
Rq : pas de balise fermante pour les séparateurs
11
• la première ligne DOCTYPE : précise le type de langage utilisé (HTML, XHTML…)
• balises META : indications (auteur, type MIME…) 10
Listes numérotées : • Liens externes :
<OL>
<LI>élément 1,– <a href="/URL">…</a>
<LI>élément 2,e.g. : <a href="/">python</a>
<LI>élément 3. </OL>
• Liens internes :
Listes à puces :
– définition d’une accroche : <a name="accroche">…</a>
<UL>
<LI>élément 1,– lien vers cette accroche : <a href="#accroche">…</a>
<LI>élément 2,
<LI>élément 3.• URL absolues / relatives
</UL>
– absolues : en général liens vers d’autres sites
Rq : possibilité de faire des listes imbriquées – relative : à utiliser au sein du même site (utile lorsqu’on déplace plusieurs pages relatives les unes par rapport aux autres)
13 14
• Lien vers un site FTP :
<a href="/;>…</a>
• Lien vers un mail :
<a href="">…</a>
15
Caractères spéciaux Comment générer du HTML ?
• syntaxe générale : &code; • outils WYSIWYG (what you see is what you get):
e.g : Netscape Composer, Front Page,…Word…
– avantage : visualisation directe
– inconvénients : qualité et maintenance du code
• éditeurs de texte (avec "syntax highlighting")
e.g: nedit, vi, emacs
• l’indentation rend le code HTML plus lisible
Rq : l’utilisation directe des accents peut poser des problèmes sur les navigateurs dans les pays étrangers
17 18
1. Généralités
2. Les Bases d’HTML
3. Outils HTML avancés
– les tableaux
– les cadres
– les feuilles de style en cascade
– les formulaires
4. HTML dynamique / Interface CGI
19
Les Tableaux Exemple de Tableau
• Moyen élégant de présenter des données
• balise : <table>…</table> définit les limites du tableau
– peut contenir les attributs :
• border : largeur en pixel du cadre autour du tableau
• width : largeur en pixel du tableau
• align : pour placer le tableau (center, left, right)
• cellpadding : espace entre le texte et les bords de la cellule (en pixel)
• cellspacing : espace entre les bords de cellules (en pixel)
• etc…
• balise <tr> : définit une nouvelle ligne du tableau
• balise <th> : définit les en-têtes du tableau
• balise <td> : définit les données du tableau
21
Fusion verticale de cellule (attribut rowspan)
• On peut mettre autre chose que du texte dans les cellules d'un tableau :
– image
– liens
– etc…
• les balises <tr>, <th> et <td> admettent l'attribut align
(center, left, right)
• Outil sur le web pour construire des tableaux automatiquement :
25
• Division de la page HTML en plusieurs zones
• la balise <frameset>…</frameset> : permet de diviser la page en différentes zones (cadres)
– attributs de la balise <frameset> :
• rows="20%,80%" : définit en 2 zones horizontales de 20 % et 80 % de l'espace disponible dans le navigateur
• cols="20%,80%" : même chose mais pour 2 zones verticales
• la balise <frame> : définit vers quelle page HTML chacune des zones pointe
– attributs de la balise <frame> :
• name : définit le nom de la zone correspondante
• scrolling=yes (ou no) : définit si on a des barres de défilement
• src="/" : nom du fichier HTML qui sera intégré dans la zone
ATTENTION : Ne pas mettre de balise <body>…</body> dans une page définissant un cadre !
27
1. les tableaux
2. les cadres
3. les feuilles de style en cascade
4. les formulaires
26
• utilisation de l'attribut target dans la balise <a>
• Exemple :
<a href="/URL" target="autre_zone">…</a>
le lien apparaitra dans la zone préalablement définie comme "autre_zone"
29
1. les tableaux
2. les cadres
3. les feuilles de style en cascade
4. les formulaires
31
• Définir une classe pour un type de balise :
img .maClassImg{
padding:1em;
}
• Définir une zone :
#albumPhoto { background-color:#000000;
}
#albumPhoto .maPhoto{ border: #cccccc 1px solid;
}
• Définition : feuille HTML permettant d’envoyer des informations au serveur
-> en général ces informations sont traitées sur le serveur par un programme CGI
• la balise <form>…</form> :
– encadre le formulaire
– attribut "method" : indique le moyen de passer les informations au serveur
• GET : passage des données par l’URL
• POST : passage des données par l’entrée standard
– attribut "action" : pointe sur le script CGI du serveur
35
1. les tableaux
2. les cadres
3. les feuilles de style en cascade
4. les formulaires
34
• saisie de texte :
<input type="text" size=20 maxlength=30 name="..."> • cases à cocher :
<input type="checkbox" name="..." value="toto"> • boutons radio :
<input type="radio" name="..." value="a">
<input type="radio" name="..." value="b"> • champ de saisie :
<textarea name="..." rows=4 cols=20>
</textarea> le champ "name" sera reconnu en tant que tel dans le script cgi
37
1. Généralités
2. Les Bases d’HTML
3. Outils HTML avancés
4. HTML dynamique / Interface CGI
39
• liste déroulante : nom de la liste envoyé
au script CGI
<select name="...">
<option value="a">option a texte visible dans
<option value="b">option b le navigateur
<option value="c">option c
</select> valeur de l'objet
associée à la liste (envoyée au script
• bouton de soumission : CGI)
<input type="submit" name="..." value="...">
• bouton de reset :
<input type="reset" name="..." value="...">
texte visible
dans le bouton
38
• méthodes GET / POST :
– GET : passe par l'URL (limitée en taille, récupérable par la variable d'environnement $QUERY_STRING)
– POST : passe par l'entrée standard (méthode plus sûre, pas de limitation de taille, permet de passer des fichiers)
• Langages des interfaces CGI :
– shells : sh, csh, bash… (peu flexible)
– compilés : C, C++ (rapide, lourd à mettre en œuvre)
– interprétés : python, perl (moins rapides, flexibles, nombreuses bibliothèques)
41
Le navigateur doit recevoir 2 éléments :
– un en-tête contenant le type de donnée à afficher :
-> le type de données doit être un type MIME valide (Multipurpose Internet Mail Extension) -> le retour chariot est très important !
– l'information à afficher en HTMLCes éléments doivent être envoyés à la sortie standard
43
• Exemple de flux envoyé à un script CGI :sequence=bonjour+toto&format=FORMAT1&submit=print+all+the+fields+%21 • Codage utilisé :
– chaque champ est séparé par le signe '&'
– chaque nom de champ ainsi que son contenu séparés par '='
– espaces remplacés par '+'
– caractères spéciaux remplacés par '%' suivi d'un numéro hexadécimal
• Nécessité de décoder lorsqu'on utilise un shell
• Il existe des librairies pour décoder automatiquement (e.g. en python, perl, C…)
42
convertisseur de séquence (fasta -> EMBL, GENBANK, GCG…) en utilisant le programme readseq
rq : service déjà
existant à pasteur, infobiogen… 45
A vous !
49
Les interfaces CGI sont gérées par le programme APACHE sur la machine (172.20.24.1) (visible à l’UFR seulement)
• les scripts CGI doivent :
– être enregistrés dans le répertoire (attention aux droits):
~user/public_html/cgi-bin/ (user est votre nom d’utilisateur)
– être Exécutables
– posséder l’extension .py ou .cgi
• les pages webs doivent être
– enregistrées dans le répertoire : ~user/public_html (user est votre nom d’utilisateur)
– elles seront visibles à l'URL : http://172.20.24.1/~user
• pour le debugging, on peut consulter le fichier log :
/var/log/httpd/error_log
48
