Informatique en Biologie 2004

Partie1: Le langage HTML

Lionel LAFITTE llafitte@pasteur.fr Fvrier 2004

Comment fonctionne le Web ?

C'est un mcanisme client-serveur.
Le client demande un fichier, le serveur lui donne tel qu'il est stock processus statique Le serveur peut aussi gnrer un fichier en fonction de la demande du client processus dynamique

Ecrire pour le Web

Ce n'est pas uniquement crire des pages en HTML, il faut penser en terme de projet: Dfinir le contenu Trouver une arborescence ergonomique Appliquer / Respecter la charte graphique Produire les pages Installer le site sur le serveur Maintenance, politique de mise jour

HTML, l'origine
HTML Hyper Text Markup Language est n en 1989 sous l'impulsion de Tim Berners Lee, " inventeur " du Web.
HTML est bas sur SGML (Structured Markup Language), qui est une vieille norme utilise pour la description de documents.Elle est conue pour les grosses documentations techniques.

HTML est une instance de SGML.

HTML, les principes

Il contient des commandes, implmentes par des balises pour marquer les diffrents types de texte (titres, paragraphe, listes ) , pour inclure des images, des formulaires, des liens
C'est un langage balisage qui dcrit la structure logique d'un document hypertexte. Il a volontairement t conu pour tre simple. Il a volu vers un langage de description de pages offrant des possibilits plus proches de la P.A.O.

L'hypertexte

Le langage HTML permet de crer des documents interactifs grce des liens hypertextes, qui relient votre document d'autres documents. En cliquant sur une zone de texte (ou une image, un logo) mise en vidence, on peut accder a un nouveau document situ sur un autre ordinateur en n'importe quel point du globe.

HTML Docbook

SGML

XHTML
SMIL

Arbre gnalogique

MathML

XML

Introduction au marquage - 1
Pour dcrire un fichier hypertexte, le langage HTML insre des balises dans le texte du document :
<marqueur> ici votre texte </marqueur>

Dbut de mise en forme

Fin de mise en forme

Synonymes: marqueur, lment, tag.

Introduction au marquage - 2

Ces balises peuvent tre insres n'importe o dans le texte, entre 2 phrases, mots, lettres
<gras>Le <italique> cours </italique> HTML</gras>

Le cours HTML

Introduction au marquage - 3
Il faut respecter une logique d'imbrication:
Bon: <gras><italique> Le cours HTML </italique> </gras> Mauvais: <gras><italique> Le cours HTML</gras></italique>

Introduction au marquage - 4
Le langage HTML est sensible la casse, toujours crire en minuscules.
Bon:

<gras><italique> Le cours HTML </italique> </gras>

Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS> <Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras> <GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>

Les attributs
Les balises peuvent possder un ou plusieurs attributs qui permettent de spcifier l'action de la balise. Toujours mettre la valeur de l'attribut entre guillemets.

<marqueur attribut="argument">texte</marqueur> <marqueur attribut1="argument" attribut2="argument">texte</marqueur>

Les commentaires

<!- Voici un commentaire HTML -->

<!Voici un commentaire HTML qui peut se placer sur plusieurs lignes

-->

Que choisir pour crire de l' XHTML?

A la main, avec un diteur de texte
Simple Text, Bbedit,Emacs ,WordPad

Avec un logiciel assistant au code HTML

PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC

A l'aide d'un programme dit "WYSIWYG" Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ...

A l'aide d'un filtre

Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques, dans certains logiciels de P.A.O. Conversion HTML vers XHTML avec HTML Tidy Disponible dans de nombreuses versions sur le site du W3C

Que choisir pour lire HTML?

Le client doit pouvoir interprter HTML et afficher le rsultat. Ils sont divers, tournant sur des systmes diffrents:

Netscape Navigator, Mozilla, Internet explorer, Safari, Opra, iCab, Emacs mode www, Amaya, Lynx, links, w3m

Note sur les caractres accentus

Vous pouvez rencontrer le codage ASCII sur 7 bits spcifi par la norme pour afficher les caractres accentus ou spciaux. Ceux ci devront faire l'objet d'un codage spcial au sein du fichier HTML.
s'crit &eacute; tre s'crit &eacirc;tre

Les serveurs Web accepte les caractres accentus de la norme iso-8859-1. On spcifie l'encodage dans le fichier HTML.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Structure de base d'un fichier HTML

<html> <head> lments d'en-tte </head> <body> lments de corps </body> </html>
Une balise <html> contenant une seule balise <head> et une seule balise <body>. . Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques, sous forme de blocs ( paragraphes, tableaux ). On parle d'lments de niveau bloc. Les lments qui reprsentent les proprits du texte (strong, i) qui figurent dans un bloc sont dits "lments de ligne".
(voir mon_premier_fichier.html)

Analyse des balises

<html> .. </html>
<head> .. </head>

Dlimite le dbut et la fin du document

Entte du document, contient des mtainformations

Ex:

<title>. .</title> <meta> . .</meta> <script> . .</script>

titre du document mta-informations script ou rfrence

<body> . . </body>

Corps du document

Rappels

Les noms d' lments sont sensibles la casse et sont crits en minuscules. Les noms d'attributs sont sensibles la casse, doivent tre crits en minuscules et encadres par des guillemets. Tous les attributs doivent recevoir une valeur. Les balises fermantes sont obligatoires. Les lments vides sont signals par une balise spciale. ( ex: <br />)

Exercice
On utilisera Emacs en mode HTML
Ou PageSpinner, diteur HTML sur MacIntosh Vous mettrez vos pages dans:
/var/www/login/

Crez un fichier HTML de base. Pour visualiser le fichier:

http://leeloo.sis.pasteur.fr/login/fichier.html

Un peu plus loin dans HTML

<html> <head> <title>Mon deuxieme fichier</title> </head> <body> <h2>Hello World</h2> <p> L'emplacement de votre nouveau mat&eacute;riel est-il &agrave; proximit&eacute; (moins de 5m) d'une prise r&eacute;seau libre ? Si oui, relevez le num&eacute;ro de la prise (il est &eacute;crit sur une plaque de c&eacute;ramique bleue, il faut respecter la distinction entre lettres majuscules et minuscules). Sinon, il faut faire installer une nouvelle prise par le Service Travaux, auquel vous devrez adresser un bon de cession interne. La suite des op&eacute;rations aura lieu quand vous aurez une prise disponible. Dans le doute, interrogez par courrier &eacute;lectronique netadm@pasteur.fr. </p> <p>Votre demande doit nous parvenir par l'interm&eacute;diaire du correspondant informatique de votre Unit&eacute;. Elle se composera de deux parties : un bon de cession interne envoy&eacute; au Service Informatique Scientifique et un courrier &eacute;lectronique adress&eacute; &agrave; netadm@pasteur.fr qui contiendra toutes les informations utiles (dont le num&eacute;ro du bon de cession). </p> <ol> <li> le premier &eacute;l&eacute;ment</li> <li> le deuxi&egrave;me &eacute;l&eacute;ment</li> <li> le troisi&egrave;me &eacute;l&eacute;ment</li> </ol> <p><a href="http://www.pasteur.fr/infosci/utilinfo/FAQ.html#Q1">Vous trouverez ici la suite du texte !! </a></p> </body> </html>

Elments de niveau bloc

<hn> . . </hn> <p> . . </p>

Titre de niveau n, de 1 6 Paragraphe

Et aussi: address, blockquote, div, hr, pre sans oublier body !

Elments de listes

<ul> . . </ul> <ol> . . </ol> <li> . . </li>

Liste non trie, liste puces Liste trie, liste numros Elment de la liste

Et aussi: dl, dt, dd

Les liens - 1
<a> . . </a>
Cration d'un lien hypertexte, ou vers un point d'ancrage du document Principaux attributs: href = url name = chane de caractres
<a href = "http://www.pasteur.fr">L'Institut Pasteur</A>

Les liens - 2

<a name = "ref" >rfrence</A> <p> . <p> . . . <p> . <a href = "monfichier.html#ref">Vers la rfrence</a>

Les adresses URL

Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type:

http://bioweb.pasteur.fr/seqanal/alignment/intro-fr.html#LASSAP Le protocole: http Le serveur: bioweb.pasteur.fr Le fichier: /seqanal/alignment/ intro-fr.html Un ancrage: #LASSAP

Les adresses URL

L'adresse indique dans le lien ( URL) peut tre absolue, elle inclut tout le chemin en commenant par le protocole:
http://www.pasteur.fr/monfichier.html

Ou relative, elle n'inclut qu'une partie du chemin:

Mon_repertoire/monfichier.html

Elments de ligne

<b>texte gras</b> <i>texte italique</i>

texte gras texte italique

<big>texte gros</big> <small>texte petit</small>

texte gros
texte petit

Et aussi: br, code, sub, sup, span, u, strike

Exercices

Ecrire un fichier en utilisant les marqueurs de l' exemple:

mon_deuxieme_fichier.html

Faites des petites modifications de code pour voir le rsultat

Crez des liens vers d'autres pages, du serveur Pasteur, de serveurs extrieurs, de vos propres pages, celles de vos collgues.

Encore plus loin dans l' HTML

<div style="text-align: center;"> <table border="1" cellspacing="0" cellpadding="10"> <tr> <th><img src="Images/fleche-in-1.gif" width="65" height="35" align="Middle" />Pour Mac</th> <th><img src="Images/fleche-in-2.gif" width="100" height="60" align="Middle" />Pour PC</th> <th><img src="Images/fleche-in-3.gif" width="150" height="71" align="Middle" />Pour Linux</th> </tr> <tr> <td> <ul> <li><a href="http://proxad.mac.tucows.com/blueberry/htmltextmac.html">Mode texte </a></li> <li> <a href="http://proxad.mac.tucows.com/blueberry/beginnermac.html">Simples </a></li> <li><a href="http://proxad.mac.tucows.com/blueberry/htmleditmac.html">Avanc&eacute;s</a></li> </ul> </td> <td> <ul> <li><a href="http://proxad.tucows.com/htmltext95.html">Mode texte </a></li> <li> <a href="http://proxad.tucows.com/htmlbeginner95.html">Simples </a></li> <li><a href="http://proxad.tucows.com/htmledit95.html">Avanc&eacute;s </a></li> </ul> </td> <td> <ul> <li><a href="http://proxad.linux.tucows.com/x11html/off_html.html">Linuxberg</a></li> </ul> </td> </tr> </table> </div>

Les tableaux -1

<table> . . </table>
Dfinit un tableau
Principaux attributs:
align = position bgcolor = color border = n cellpadding = n cellspacing = n width = n

Les tableaux -2

<tr> . . </tr>
Dfinit une ligne d'un tableau
Principaux attributs :

align = left,center,right valign = top, middle, bottom bgcolor = color border = n

Les tableaux -3
<td> . . </td>
Dfinit une cellule de donnes
Principaux attributs :

align = type valign = type bgcolor = color colspan, rowspan = n height, width = n

Les images -1

<img> . .

</img>

Insre une image

Principaux attributs:
align = left, bottom, middle, top, right alt = text border = n height, width = n src = url

Les images - 2

Attention au poids des images, il est important d'optimiser son fichier image. Deux formats sont lus par les navigateurs, GIF ( Graphics Interchange Format ) et JFIF ( JPEG File Interchange Format).On utilise le GIF pour les illustrations, le JPEG pour les photos.

Les droits d'auteurs

Attention aux droits sur les images.La seule image qui vous appartient est celle que vous avez prise avec votre matriel photo.Il faut aussi l'autorisation des personnes figurant sur la photo. Attention la porte des droits d'auteurs, surtout pour une utilisation web Attention aux images "libres de droits" Lire les recommandations juridiques sur l'intranet.

Exercices

Importez une image Crez un tableau 3 colonnes , 2 lignes. Crez un tableau 1 ligne , 2 colonnes contenant une image et du texte.

Un fichier diffrent
<html> <head> <title>des cadres</title> </head> <frameset cols="25%,75%"> <frame name="menu" src="menu.html" scrolling="yes"> <frame name="cible" src="cible.html" scrolling="no"> <noframes> <body> message pour les navigateurs ne supportant pas les cadres </body> </noframes> </frameset> </html>

Les cadres
Ils permettent de diviser la fentre principale du navigateur en plusieurs sous fentres de taille rduite, chacune d'entre elles affichant un document diffrent. Certains navigateurs ne les supportent pas, il est possible de les dsactiver, il faut donc prvoir un fichier de substitution inscrit entres les balises:
<noframes> .. </noframes>

Informatique en Biologie 2004

Partie 2: HTML Dynamique

Lionel LAFITTE
llafitte@pasteur.fr Fvrier 2004

XHTML
XHTML 1.0, est une reformulation de HTML en une application XML et trois DTDs (Document Type Definition)correspondant celles dfinies par HTML 4. La compatibilit avec les agents utilisateurs (les "clients") HTML actuels est possible en suivant un ensemble raisonnable de rgles. La smantique des lments et de leurs attributs sont dfinis dans la Recommandation W3C pour le HTML. La norme actuelle est XHTML 1.1 Le site du W3C: http://www.w3c.org.

Conclusion: XHTML compatible HTML

crire en minuscules. Mettre les attributs entre guillemets. Ajouter un caractre d'espacement avant la barre oblique d'une balise d'lment vide ( <br /> ) . Spcifier l'encodage de caractres de deux faons ( entte xml et balise mta)
<?xml version"1.0" encoding=" iso-8859-1"?> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">

Spcifier les cibles d'hyperliens (balise a) en utilisant la fois les attributs id et name. Assigner une valeur aux attributs HTML boolens.
<input type="radio" checked="checked">

Les limites d' HTML / XHTML

Langage de base du Web
Langage simple, limit et statique

D'autres langages, extensions,programmes sont venus se greffer XHTML pour en augmenter les possibilits.
XHTML offre les aspects XML mais ce n'est pas suffisant pour toutes les applications que l'on souhaite mettre en uvre sur le web.

Les formulaires
L'lment <form> permet de crer des formulaires, qui peuvent contenir des cases cocher, des boutons radio, des listes droulantes les donnes recueillies sont transmises un programme qui s'excutera sur le serveur web et vous retournera le rsultat. <form action="mon_programme.pl"> lments du formulaire </form>

Elments de formulaire
<form name="mon_formulaire" action="mon_programme.pl"> <input type="text" name="nom" value="" size="60" /> <input type="radio" name="rad1" value="" size="60" />choix1 <input type="radio" name="rad2" value="" size="60" />choix2 <input type="checkbox" name="chk1" value="" size="60" />choix1 <input type="checkbox" name="chk2" value="" size="60" />choix2 <select name="liste"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="envoyer" value="envoyer" /> </form>

Elments de formulaire
<form name="my_form" action="mon_programme.pl"> </form>
Principaux attributs name = "chaine" spcifie le nom sous lequel le formulaire peut-tre identifi, par exemple en Javascript , je peux y faire rfrence avec l'expression: document.my_form action = "URL" spcifie l'URL laquelle le contenu est envoy method= "GET" ou "POST", spcifie la mthode HTTP utilise pour transmettre les donnes. Avec GET elles sont ajoutes l'URL, avec POST elles sont envoyes au serveur dans le corps du message.

Elments de formulaire
<input name="my_choice" type="radio"> </input>
Dfinit les entres de donnes dans le formulaire Principaux attributs

name = "chaine", associe un nom aux donnes entres dans cet lment input ( ex: civilite pour un choix Mme, Mlle, Mr de type radio, on affectera dans le CGI la valeur coche la variable civilite, ce qui donne en Perl: $civilite=$CGI->param(civilite) input=cgi.parse() input[civilite] type = "button, checkbox, file, hidden, image, radio, reset, submit, text "

Elments de formulaire
<select name="my_list"> <option value="10">10</option> </select>
Liste d'options slectionnables Principaux attributs name = "chaine", associe un nom aux donnes entres dans cet lment select

value = "valeur", spcifie la valeur de l'lment option. Si cet lment est omis, c'est le contenu de l'lment option qui est envoy au CGI.

Les feuilles de styles CSS

Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans en modifier son contenu.
Le langage CSS spcifie l'apparence des blocs de texte ou image, mais il peut contrler d'une manire trs prcise le positionnement des objets, les bordures, les marges, le recouvrement

La norme est consultable sur le site du consortium Web. Les navigateurs n'implmentent qu'une petite partie du langage.

Les feuilles de styles CSS

Le navigateur lit le document -> arbre syntaxique Il lit ensuite la feuille de style associe et interprte les diffrentes rgles de formatage. Il parcourt l'arbre de haut en bas et applique les rgles au contenu de l'lment.

Versions de CSS

CSS1 est bien supporte par les navigateurs rcents. CSS2 est en partie supporte par les navigateurs rcents. CSS3 est en cours de dveloppement.
2004-01-07 HostM.com Web Hosting released Simple CSS 1.0, an easy-to-use CSS authoring tool. You can manage multiple CSS projects and import existing style sheets. Supports CSS2. (Windows & Mac, freeware) 2002-09-02 Mozilla released version 1.1 and Netscape version 7.0, based on Mozilla 1.0.1. Both have excellent CSS support. (Mozilla is Open Source, Netscape is binary-only but free, both run on many platforms)

Les feuilles de styles CSS Les rgles

Une feuille de style consiste en un ensemble de rgles qui dfinissent le formatage des lments (balises) d'un document XHTML. Rgle = Slecteur + Dclarations Dclaration = Proprit + Valeurs
h1
Slecteur(s)

color:
Proprit(s)

blue; }
Valeur(s)

h3, h4 {

font-weight: font-family :

bold; arial; }

Les feuilles de styles CSS

En externe, c'est un fichier indpendant du fichier HTML, on utilise dans l'entte du document la balise link:
<link href="ma_feuille_de_style.css" rel="stylesheet" type="text/css"> Exemple de fichier ma_feuille_de_style.css:

h1 { font-family: Arial, Helvetica, sans-serif; }

En interne, dans l' entte de document, le style est spcifi pour tout le document entre les balises style
<style type="text/css"> h1 { font-family: Arial, Helvetica, sans-serif; } </style>

En interne, dans le corps du document, le style est appliqu localement au texte

<h1 style="font-family: "Courier New", Courier, monospace;">Mon titre</h1>

Les feuilles de styles CSS les classes

On peut crer ses propres classes que l'on appliquera avec l' attribut "class" Dans l'entte:
<style type="text/css"> maclasse {

font-family: Arial, Helvetica, sans-serif; font-size: larger; font-style: italic; text-align: center; color: #4169E1;

} </style>

Dans le corps du document:

<span class="maclasse">la partie du texte formate suivant ma classe</span> <p class="maclasse">un paragraphe format suivant ma classe</p>

Les feuilles de styles CSS les classes

Ici, la rgle concerne uniquement les lments div dont l'attribut possde la valeur "maclasse".
Dans l'entte:
<style type="text/css"> div.maclasse {

font-family: Arial, Helvetica, sans-serif; font-size: larger; font-style: italic; text-align: center; color: #4169E1;

} </style>

Dans le corps du document:

<div class="maclasse">la partie du texte formate suivant ma classe</div>

Exercice

Trouvez une ou plusieurs proprits sur le site du w3c (CSS1 ou CSS2) Ajoutez les l'un de vos fichiers XHTML (overflow.html)

CSS avances
Importation de feuilles de styles: rgle @import ajoute les rgles de la CSS distante ses propres rgles:
@import url ("http://www.pasteur.fr/styles/charte.css")

Tlchargement de polices: rgle @font-face Polices au format PFR (Portable Font Resource ou TrueDoc)
@font-face { font-family: src: font-weight: mapolice; url("my_url"); normal ;}

CSS avances
Choix de feuilles de styles pour diffrents mdias: ( cran, impression, braille, tv, projection )
@media screen { body { font: 12pt Verdana} } @media print { body { font: 10pt Courrier} }

Syntaxe avance, pour faire rfrence des lments en se basant sur des valeurs d'attributs ou la position des lments dans le document. (p425)

L'HTML Dynamique CGI - SSI - ePerl PHP JSP - Javascript

Cot serveur

Common Gateway Interface, est un programme qui s'excute sur le serveur. SSI sont des fonctions spcifiques du serveur Apache. Java Server Pages, en Java ePerl, PHP sont des modules que l'on installe sur le serveur. Le code est interprt par le serveur
ex: affichage personnalis pour un client, filtrage, connexion des bases de donnes ..

Cot client
On insre des "morceaux de code informatique" dans la page HTML, qui la rendent "dynamique". Le code est interprt par le client. Javascript (Netscape), Jscript (Microsoft)

Javascript
<script language="javascript"> </script>

Inclusion des scripts avec l'lment script. Cet lment peut tre imbriqu dans l'en-tte (<head>) ou dans le corps du document (<body>).

Note: lorsqu'un navigateur examine les composants d'un script, il commence par le dbut du fichier, il est important de les dfinir avant de les utiliser.

Gestionnaires d'vnements standards

Les programmes javascript peuvent tre associs des lments de marquage (XHTML) au moyen de gestionnaires d'vnements. Lorsqu'un vnement se produit, le script associ est excut.

Principaux vnements:
onclick : dclench lors d'un clic sur lien http ou bouton formulaire onload : dclench lorsque le document est charg onmouseover : dclench lorsque le pointeur de la souris est plac sur l'image ou le lien hypertexte associ onsubmit: dclench lorsqu'un formulaire est soumis Aussi: onabort, onblur, onchange, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmouseout, onreset, onunload

Exemples

Javascript: (horloge et document write) Evnement :(onclick) Script dynamique: (horloge dynamique)

Modle DOM

Document Object Model est une norme du W3c. DOM est un moyen de reprsenter un document indpendamment d'un navigateur. Il permet l'accs un document au moyen d'objets, de proprits, de mthodes, d'vnements et de modifier le contenu d'une page web de faon dynamique l'aide de scripts. Tout document bien form (XML, XHTML) peut tre reprsent sous forme d'arbre par le DOM.

Analyse syntaxique d'un document XHTML

Le document est lu par un analyseur syntaxique, qui produit une reprsentation logique du document sous forme d'arbre.
html body div h p img div link head title

Note: L'analyseur syntaxique et validateur sur le site du w3c: validator.w3.org

Objets DOM

Objets DOM de base

Node: chaque nud possde son propre objet Node NodeList: cet objet est une liste de tous les objets Node NameNodeMap: accs aux objets Node par leur nom

Objets DOM de niveau lev

Document: le nud racine DocumentType: type ou schma du document XML Element: un lment du document

Proprits et mthodes DOM

getElementById, renvoie la rfrence l'lment ( "object") getElementById + style dynamique getElementsByTagName, par nom de l'lment Proprits documentElement de document et tagName d' Element Navigation sur Node Cration sur Node