HTML
Maxime Crochemore
Institut Gaspard-Monge
Université de Marne-la-Vallée
Maxime.Crochemore@univ-mlv.fr


Autres sections :
  DEUG Sciences S1 Informatique -- M.C. -- 63,1 -- suite
  Présentation hypertexte
  • Hypertexte
    document Web : ensemble de pages (fichiers) reliées par des liens (renvois) cliquables placés dans le texte
  • Navigateur
    interprète d'un langage de présentation de documents hypertextes ; gestion des médias et des liens
  • Langages de présentation
    TeX et LaTeX (textes scientifiques), PostScript (langage d'imprimantes laser), RTF (Rich Text Format), ...
  • Langages de présentation ou structuration hypertextuelle
    SGML, HTML (version simplifiée de SGML), XHTML, XML (en cours de définition)
    structures logiques ; liens internes, externes ou exécutables
  DEUG Sciences S1 Informatique -- M.C. -- 64 -- suite
  Édition HTML
  • Stockage des fichiers
    fichiers de noms généralement suffixés par .html ou .htm
    arborescence de racine ~nom/WWW/index.html pour les rendre accessibles sur la Toile
  • Édition, visualisation
    • À l'aide d'un traitement de texte spécialisé
      problème des versions de HTML
    • À l'aide d'un éditeur de texte
      Affichage par navigateur (''open file'' de Netscape, par exemple)
  • Traducteurs
    Génération de pages HTML au moyen de convertisseurs de formats (latex2html et rtf2html)
    problème de puissance d'expression des langages
  DEUG Sciences S1 Informatique -- M.C. -- 65 -- suite
  Source, aspect
<HTML>
  <HEAD><TITLE>Wysiwyg</TITLE></HEAD>
  <BODY>
    Un traitement de texte <B>WYSIWYG</B> (<I><B>W</B>hat <B>Y</B>ou
    <B>S</B>ee <B>I</B>s <B>W</B>hat <B>Y</B>ou <B>G</B>et</I>)
    est un traitement de texte o&ugrave; vous voyez sur l'écran
    la page <TT>telle qu'elle sera <U>imprimée.</U></TT>
  </BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 66 -- suite
  Langage HTML
  • Langage à base de balises de présentation qui codent la structure logique du texte ; l'aspect réel du texte dépend du navigateur utilisé pour le visualiser et de sa configuration
  • Balises
    • Marqueurs
      pour des spécifications simples
    • Conteneurs
      parenthésage de la forme < X > y < /X > ;
      spécification X portant sur la portion de texte y
    • Attributs des conteneurs
      informations supplémentaires pour le traitement de y ;
      de la forme < X    A1 = a    A2 = b    ... > y < /X >
    • minuscules/majuscules indifférentes pour les balises
  DEUG Sciences S1 Informatique -- M.C. -- 67 -- suite
  Généralités
  • Structure minimale
    balises de base : <HTML>, <HEAD>, <TITLE>, <BODY>
    <!-- commentaire --> invisible à l'affichage
  • Codage des caractères
    Mettre dans l'en-tête (ou utiliser le codage développé des accents)
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html" CHARSET="iso-8859-1">
  • Accents
    lettre accentuée=& lettre accent ; (déjà=d&eacute;j&agrave;)
    lettre codage nom lettre codage nom
    é &eacute; accent aigu æ &aelig; ligature
    è &egrave; accent grave « &laquo; guillemet ouvrant
    ê &ecirc; circonflexe » &raquo; guillemet fermant
    ë &euml; tréma & &amp; esperluète
    ç &ccedil; cédille < &lt; inférieur
    ñ &ntilde; tilde > &gt; supérieur
  DEUG Sciences S1 Informatique -- M.C. -- 68 -- suite
  Divisions
  • Division <DIV>...</DIV>
    ALIGN, attribut de position, de valeur LEFT, RIGHT ou CENTER
  • Paragraphe <P>...</P>
    idem pour un seul paragraphe
  • Titres (headers)
    <H1>Titre de niveau 1</H1>
    idem pour <H2>, <H3>, <H4>, <H5>, <H6>
  • Saut de ligne (break) <BR>
    marqueur, pas de </BR>
  • Trait (rule) <HR>
    marqueur, pas de </HR>
  DEUG Sciences S1 Informatique -- M.C. -- 69 -- suite
  Exemple
<HTML>
<HEAD>
  <TITLE>Katie</TITLE>
</HEAD>
<BODY>
<H1><P ALIGN=CENTER>
 Ta Katie t'a quitté
</P></H1>
Ce soir au bar<BR>
De la gare<BR>
Igor hagard est noir<BR>
Il n'arr&ecirc;t' guer' de boir'<BR>
...
<H3><P ALIGN=RIGHT>
 Paroles et musique de Boby Lapointe
</P></H3>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 70 -- suite
  Listes descriptives
  • Syntaxe
    <DL>
     <DT>titre de l'item</DT> <DD>texte de l'item</DD>
     ...
    </DL>
     
  • Titres : pas de gestion automatique du style des titres d'item ; pour les mettre en gras :
    <DL>
     <DT><B>titre de l'item</B></DT> <DD>texte de l'item</DD>
     ...
    </DL>
     
  DEUG Sciences S1 Informatique -- M.C. -- 71 -- suite
  Exemple
<HTML>
<HEAD>
 <TITLE>Liste &lt;DL&gt; </TITLE>
</HEAD>
<BODY>
<H2>Glossaire</H2>
<DL>
  <DT>ASCII</DT>
    <DD>Codage des caractères</DD>
  <DT>EPS</DT>
    <DD>Format des fichiers PostScript</DD>
  <DT>POLICE</DT>
    <DD>Assortiment de styles que possède
    une catégorie de caractère
    (gras, italique, etc.)</DD>
</DL>
<H3><P ALIGN=RIGHT>
 Exemple de liste descriptive
</P></H3>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 72 -- suite
  Listes ordinaires
  • Liste non numérotée (unordered list)
    <UL>
     <LI>item</LI>
     ...
    </UL>
     
  • Liste numérotée (ordered list)
    <OL>
     <LI>item</LI>
     ...
    </OL>
     
  DEUG Sciences S1 Informatique -- M.C. -- 73 -- suite
  Exemple
<HTML>
<HEAD>
 <TITLE>Liste <UL> </TITLE>
</HEAD>
<BODY>
Différents types de fichiers :
<UL>
  <LI> fichiers HTML ;    </LI>
  <LI> fichiers images ;  </LI>
  <LI> fichiers sons ;    </LI>
  <LI> fichiers films ;   </LI>
  <LI> fichiers binaires. </LI>
</UL>
<H3><P ALIGN=RIGHT>
 Exemple de liste non numérotée
</P></H3>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 74 -- suite
  Exemple
<HTML>
<HEAD>
 <TITLE>Liste <OL> </TITLE>
</HEAD>
<BODY>
<H1><P ALIGN=CENTER>
 Plan du cours
</P></H1>
<OL>
  <LI> Système et réseau ;  </LI>
  <LI> Services de l'<I>Internet</I> ;  </LI>
  <LI> Langage HTML.  </LI>
</OL>
<H3><P ALIGN=RIGHT>
 Exemple de liste numérotée
</P></H3>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 75 -- suite
  Styles physiques
  • Gras (boldface)
    <B>en gras</B>
  • Italique
    <I>italique</I>
  • Souligné (underlined)
    <U>souligné</U>
  • Type machine à écrire (teletype)
    <TT>teletype</TT>
  • Texte barré
    <STRIKE>barré</STRIKE>
  • Peuvent ne pas être effectifs avec certains navigateurs
  DEUG Sciences S1 Informatique -- M.C. -- 76 -- suite
  Styles logiques
  • Citation, mot étranger (souvent en italique)
    <CITE>citation</CITE>, <EM>word</EM>
  • Mise en valeur
    <STRONG>important</STRONG>
  • Programme, clavier, exemple (parfois en teletype)
    <CODE>programme</CODE>, <KBD>clavier</KBD>,
    <SAMP>exemple</SAMP>
  • Définition (parfois en italique)
    <DFN>définition</DFN>
  • Variable (italique)
    <VAR>variable</VAR>
  DEUG Sciences S1 Informatique -- M.C. -- 77 -- suite
  Styles de paragraphes
  • Citation
    <BLOCKQUOTE>texte cité</BLOCKQUOTE>
  • Adresse
    <ADDRESS>adresse, signature</ADDRESS>
  • Verbatim (preformated)
    texte source HTML affiché sans traitement ; permet la présentation simple de tableaux, ...
    <PRE>verbatim</PRE>
  DEUG Sciences S1 Informatique -- M.C. -- 78 -- suite
  Exemple
<HTML>
<HEAD>
  <TITLE>Verbatim</TITLE>
</HEAD>
<BODY>
  <H2> Tableau en texte préformaté
    (&lt;PRE&gt;)
  </H2>
  <PRE>
           +----------+----------+----------+
  DEUG Sci |   Anne   |   Luc    |   Lou    |
+----------+----------+----------+----------+
| Maths    |    17    |     9    |    13    |
| Info     |    15    |    13    |    18    |
| Physique |    11    |    14    |     8    |
+----------+----------+----------+----------+
  </PRE>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 79 -- suite
  Liens
Les liens réalisent une structure d'hypertexte
  • Ancre : indication de l'origine ou de la cible du lien
    • ancre de départ : texte cliquable dans la fenêtre du navigateur ; apparaît souvent souligné ou en couleur
    • ancre d'arrivée : début de page ou portion de texte au sein du même fichier
  • Définition (balise A d'attributs HREF ou NAME)
    • lien externe (ancre de départ) :
      <A HREF="url_destination">texte cliquable</A>
    • lien interne (ancre de départ) :
      <A HREF="#etiquette">texte cliquable</A>
    • lien interne (ancre d'arrivée) :
      <A NAME="etiquette">texte cible</A>
  DEUG Sciences S1 Informatique -- M.C. -- 80 -- suite
  Exemple de liens
<HTML>
<HEAD>
 <TITLE>DEUG Sciences S1 Info</TITLE>
</HEAD>
<BODY>
<H2><P ALIGN=CENTER>
 Résumé du cours de
 <A HREF="../S1.html"> S1 </A>
</P></H2>
<OL>
  <LI> <A HREF="#systeme">Système</A> ; </LI>
  <LI> <A HREF="#internet">Internet</A> ; </LI>
  <LI> <A HREF="#html">HTML</A>. </LI>
</OL>
<H3> <A NAME="systeme"> Système </A> </H3>
Unix et réseaux ...
<H3> <A name="internet"> Internet </A> </H3>
Navigation sur la Toile ...
<H3> <A name="html"> HTML </A> </H3>
Description du langage ...
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 81 -- suite
  Adressage au sein d'un serveur
  • Serveur www.univ-mlv.fr
    Catalogues alpha, beta, gamma
    Fichers A (dans beta), B et C (dans alpha), D (dans gamma)
  • Adresse absolue de B
    • http://www.univ-mlv.fr/alpha/B
  • Dans le fichier B on peut référencer
    • C par C
    • D par beta/gamma/D
  • Dans le fichier A on peut référencer
    • D par gamma/D
    • C par ../C
  • Dans le fichier D on peut référencer
    • C par ../../C
  DEUG Sciences S1 Informatique -- M.C. -- 82 -- suite
  Images
  • Image numérisée, stockée dans un fichier
  • Format d'image compatible avec le navigateur
    formats de base :
    GIF (Graphics Interchange Format)
    JPEG (Joint Photographers Experts Group)
  • Marqueur IMG d'attribut SRC (source)
    <IMG SRC="url_du_fichier_image">
  • Possibilité d'alignements, d'inclusion, de dimensionnement, d'encadrement dans des textes avec les attributs :
    ALIGN, HSPACE, VSPACE, WIDTH, HEIGHT, BORDER
  DEUG Sciences S1 Informatique -- M.C. -- 83 -- suite
  Image en ligne
<HTML>
<HEAD>
  <TITLE>Image en ligne</TITLE>
</HEAD>
<BODY>
  <H2>Image en ligne</H2>
  <H4>Vénus <IMG SRC="VENUS.GIF">
   sortant du bain <I>(détail)</I>,
   Botticelli</H4>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 84 -- suite
  Alignements d'images
<HTML>
<HEAD>
  <TITLE>Alignements d'images</TITLE>
</HEAD>
<BODY>
  <H3> Trois
   <IMG SRC="VNUS3.GIF" ALIGN=TOP>    types
   <IMG SRC="VNUS3.GIF" ALIGN=MIDDLE> d'alignements
   <IMG SRC="VNUS3.GIF" ALIGN=BOTTOM> en ligne.
  </H3>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 85 -- suite
  Image en texte
<HTML>
<HEAD>
  <TITLE>Image en texte</TITLE>
</HEAD>
<BODY>
  <H3>Image réduite, alignée  et encadrée
  </H3>
  <IMG SRC="VNUS.GIF" ALIGN=RIGHT
       HSPACE=20 VSPACE=0 WIDTH=70 HEIGHT=80 BORDER=7>
  Quocumque me certi, argumenta senectius meae video.
  Veneram admotus ? Foras enim spectat. Unde istunc
  nactus es ? Quid te delectavit alienum mortuum tollere ?
  <H3>Image originale</H3>
  <IMG SRC="VNUS.GIF">
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 86 -- suite
  Image lien
<HTML>
<HEAD>
  <TITLE>Image lien</TITLE>
</HEAD>
<BODY>
  Vue agrandie du tableau <I>(format JPEG)</I>
  en cliquant sur l'imagette
  <P>
  <A HREF="MINIVNUS.JPG"><IMG SRC="MINIVNUS.GIF"></A>
  <P>
  ou en <A HREF="MINIVNUS.JPG">cliquant ici</A>
  <P><HR>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 87 -- suite
  Images cliquables
Pour associer des adresses à des zones d'une image
  • Système de coordonnées
  • Formes de zones (area shape) :
    RECT, POLY, CIRCL
    définies par les points adéquats
  • Image cliquable ...
    <IMG SRC="fichier_image" USEMAP="#etiquette">
    
  • ... et sa carte
<MAP NAME= "etiquette">
  <AREA SHAPE="RECT" HREF="adresse" COORDS=x1,y1,x2,y2>
  <AREA SHAPE="POLY" HREF="adresse" COORDS=x1,y1,x2,y2,...>
  <AREA SHAPE="CIRCL" HREF="adresse" COORDS=x1,y1,x2,y2>
</MAP>
  DEUG Sciences S1 Informatique -- M.C. -- 88 -- suite
  Exemple d'image cliquable
<HTML>
<HEAD>
  <TITLE>Image cliquable (<MAP>)</TITLE>
</HEAD>
<BODY>
  <P ALIGN=center>
  Image contenant deux zones cliquables
  <BR><BR>
  <IMG SRC="CERNCSA.GIF" USEMAP="#boutons">
  <MAP NAME="boutons">
  <AREA SHAPE="RECT" HREF="http://www.cern.ch"
        COORDS=0,0,56,56>
  <AREA SHAPE="RECT" HREF="http://www.ncsa.uiuc.edu"
        COORDS=56,0,113,56>
  </MAP>
  <BR><BR>
  pour accéder
  au <A HREF="http://www.cern.ch">CERN</A> ou
  au <A HREF="http://www.ncsa.uiuc.edu">NCSA</A>.
  </P><HR>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 89 -- suite
  Tableaux
Tableaux de cellules de contenus variés (nombres, textes, listes, liens, images, ...) ; composition automatique ligne par ligne
  • Conteneur <TABLE>...</TABLE> d'attributs
    BORDER, largeur du cadre extérieur
    CELLSPACING, largeur des lignes de séparation entre cellules
    CELLPADDING, largeur de l'espace autour du contenu des cellules
    WIDTH, largeur totale
  • Composition d'une ligne : <TR>...</TR> (table row) d'attributs
    ALIGN de valeur LEFT, CENTER, RIGHT
    VALIGN de valeur TOP, MIDDLE, BOTTOM
  • Composition d'une cellule : <TD>...</TD> (table data) d'attributs
    ALIGN, VALIGN, ROWSPAN, COLSPAN
    balise <TH>...</TH> : idem avec centrage et gras automatiques
  • Titre : <CAPTION>...</CAPTION>
  DEUG Sciences S1 Informatique -- M.C. -- 90 -- suite
  Exemple de tableau
<HTML>
<HEAD>
 <TITLE>Résultats</TITLE>
</HEAD>
<BODY>
  <TABLE BORDER=5 CELLSPACING=0.5 CELLPADDING=10>
    <CAPTION ALIGN="BOTTOM">
      <B>Résultats</B>
    </CAPTION>
    <TR ALIGN="CENTER">
      <TH>DEUG Sci</TH> <TD>Anne</TD> <TD>Luc</TD> <TD>Lou</TD>
    </TR>
    <TR ALIGN="CENTER">
      <TD ALIGN="LEFT">Maths</TD> <TD>17</TD> <TD>9</TD> <TD>13</TD>
    </TR>
    <TR ALIGN="CENTER">
      <TD ALIGN="LEFT">Info</TD> <TD>15</TD> <TD>13</TD> <TD>18</TD>
    </TR>
    <TR ALIGN="CENTER">
      <TD ALIGN="LEFT">Physique</TD> <TD>11</TD> <TD>14</TD> <TD>Absente</TD>
    </TR>
  </TABLE>
</BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 91 -- suite
  Couleurs et fonds
  • Attributs de <BODY>
    • pour les couleurs : BGCOLOR, TEXT, LINK, ALINK, VLINK
    • pour le fond : BACKGROUND
  • Exemple
    <BODY BGCOLOR="#000000" TEXT="#0000FF"
     LINK="#FF0000" ALINK="#FFFF00" VLINK="#00FF00"
     BACKGROUND="VNUSBW.GIF">
    
  • Codage des couleurs (RVB ou RGB)
    synthèse additive en Rouge, Vert, Bleu : rrvvbb en hexadécimal
    000000 = noir, FF0000 = rouge d'intensité maximum
    00FF00 = vert d'intensité maximum, FFFF00 = jaune
  DEUG Sciences S1 Informatique -- M.C. -- 92 -- suite
  Exemple en couleur
<HTML><HEAD><TITLE>DEUG S1 couleurs</TITLE>
</HEAD>
<BODY BGCOLOR="#000033">
<DIV ALIGN=CENTER>
<TABLE CELLPADDING="15" CELLSPACING="0" BORDER="0">
<TR><TD  BGCOLOR="#FFFF00" HEIGHT="100" WIDTH="250" ALIGN=RIGHT VALIGN=BOTTOM>
 <H1><FONT COLOR="#FF0000"> D E U G </FONT></H1>
</TD><TD BGCOLOR="#FF0000" HEIGHT="100" WIDTH="250" ALIGN=LEFT  VALIGN=BOTTOM>
 <H1><FONT COLOR="#FFFF00"> S c i e n c e s </FONT></H1>
</TD></TR>
<TR><TD  BGCOLOR="#0000FF" HEIGHT="100" WIDTH="250" ALIGN=RIGHT VALIGN=TOP>
 <H1><FONT COLOR="#FFFF00"> S 1 </FONT></H1>
</TD><TD BGCOLOR="#00CC33" HEIGHT="100" WIDTH="250" ALIGN=LEFT  VALIGN=TOP>
 <H1><FONT COLOR="#FFFF00">Informatique</FONT></H1>
</TD></TR></TABLE>
</DIV>
</BODY></HTML>

visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 93 -- suite
  Pages de styles
Cascading Style Sheets : définition d'un style associé à une balise ; possibilités limitées
  • Internes (dans <HEAD>)
    <STYLE TYPE="text/css">H1 {color: #FF0000}></STYLE>
  • Externes
    • Déclaration du fichier de style (dans <HEAD>)
      <LINK TYPE="text/css" HREF="Style.css">
    • Utilisation d'un style avec l'attribut CLASS
      ... <H1>Titre rouge</H1> ...
      ... <TD CLASS="a" BGCOLOR="#000066"> ...
      
    • Contenu du fichier « Style.css »
      TD   {font-family: Times; font-size: 24pt; color: #000066;}
      TD.a {font-family: Courier; font-size: 18pt; font-weight: tt;
            color: #000000; margin-left: 24pt;}
      TT   {font-family: Courier; font-size: 24pt; font-weight: tt;}
      H1   {color: #FF0000;}
      
  DEUG Sciences S1 Informatique -- M.C. -- 94 -- suite
  Zones, cadres (frames)
Partage de la fenêtre en zones ou cadres ; leur contenu est extérieur, défini par des adresses de documents
Le document HTML ne contient que les indications de partage
  • Conteneur <FRAMESET>...</FRAMESET>
    à la place de <BODY> ; attributs COLS (découpage vertical) ou ROWS (découpage horizontal)
  • Balises du document
    • <FRAME>
      attributs SRC, MARGINWIDTH, MARGINHEIGHT
      le contenu peut être découpé au moyen de <FRAMESET>
    • <NOFRAMES>
      contenu = message pour un navigateur n'acceptant pas de zone
  DEUG Sciences S1 Informatique -- M.C. -- 95 -- suite
  Exemple de découpage en zones
<HTML>
<HEAD>
  <TITLE>Zones</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
  <FRAME SRC="MINIVNUS.GIF">
  <FRAME SRC="ListeOL.html">
  <NOFRAMES>
    Affichage impossible
    avec ce navigateur
  </NOFRAMES>
</FRAMESET>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 96 -- suite
  Formulaires
  • Principe
    transmission de données du navigateur vers le serveur Web pour traitement par un programme du serveur
  • Applications
    interrogation de bases de données
    identification pour accès à des services
    commerce électronique (saisie de commande et de moyen de paiement)
    traitement d'informations personnelles
    affichage de données variables (heure, etc.)
  DEUG Sciences S1 Informatique -- M.C. -- 97 -- suite
  Mécanisme
  • Lien simple
    lien entre CLIC et l'adresse de page x
  • Lien exécutable
    lien entre ENVOYER et l'adresse de programme x
  DEUG Sciences S1 Informatique -- M.C. -- 98 -- suite
  Exemple de formulaire
<HTML>
<HEAD>
  <TITLE>Formulaire</TITLE>
</HEAD>
<BODY><B>
  <FORM METHOD="post" ACTION="/cgi-bin/form1">
    <P><I>Entrez votre nom</I> :
      <INPUT NAME="nom">
    </P><P><I>Quel(s) micro-ordinateur(s) utilisez vous</I> ?
      <OL>
      <LI><INPUT TYPE="CHECKBOX" NAME="micro" VALUE="ux">Station Unix</LI>
      <LI><INPUT TYPE="CHECKBOX" NAME="micro" VALUE="pc">PC</LI>
      <LI><INPUT TYPE="CHECKBOX" NAME="micro" VALUE="mac">Macintosh</LI>
      </OL>
    </P><P><I>Média de distribution</I>
      <INPUT TYPE="radio" NAME="media" VALUE="cd"> CD-ROM
      <INPUT TYPE="radio" NAME="media" VALUE="dk"> Disquette
    </P><P>
      <INPUT TYPE="submit" VALUE="Envoyer">
      <INPUT TYPE="reset" VALUE="Annuler">
  </P></FORM>
</B></BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 99 -- suite
  Définition de formulaire
  • Conteneur <FORM>...</FORM>
    contient les balises pour les cases de saisie, à cocher, ...
    attribut ACTION : adresse du programme sur le serveur
    attribut METHOD = GET ou POST, indique la méthode de transmission des arguments
  • Balises de formulaire
    • <INPUT> pour saisies diverses ; attribut TYPE = SUBMIT, RESET, CHECKBOX, RADIO, PASSWORD ou HIDDEN
    • <SELECT> et <OPTION> pour choix dans une liste à menu déroulant ou ascenseur ; attributs SIZE, MULTIPLE
    • <TEXTAREA> pour saisie dans une fenêtre à ascenseurs
      attributs ROWS, COLS
    • Attributs communs
      NAME nom de variable pour le programme
      VALUE texte affiché ou valeur d'option
  DEUG Sciences S1 Informatique -- M.C. -- 100 -- suite
  Programmation
  • Programmes ou scripts CGI (Common Gateway Interface)
    pour la construction à la demande de pages en HTML
    réalisent les liens exécutables ; traitement des formulaires
  • Langages utilisés
    tout langage apte à la production et manipulation du texte :
    shells d'Unix, C, Perl, Tcl, Java, ...
  • Stockage
    dans un catalogue cgi ou cgi-bin du serveur Web
  • Programmes internes
    • en Java, JavaScript, ActiveX
    • utilisent les ressources du navigateur
  DEUG Sciences S1 Informatique -- M.C. -- 101 -- suite
  Défilement de texte
<HTML><HEAD><TITLE>DEUG S1 défile</TITLE>
<SCRIPT LANGUAGE="JavaScript">
   var mot="D E U G - S1 ~~~~ D E U G - S1 ~~~~ ";
   var espace="  ";  var pos=0;
   function defile() {
      document.form2.mot2.value=mot.substring(pos,mot.length)+mot.substring(0,pos);
      pos++;
      if(pos>mot.length) pos=0;
      window.setTimeout("defile()",400)
   }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000033" ONLOAD="defile()">
<DIV ALIGN=CENTER>
<TABLE CELLPADDING="30"><TR><TD BGCOLOR="#FFFF00">
 <FORM NAME="form2">
   <INPUT TYPE="TEXT" NAME="mot2" SIZE=30>
 </FORM>
</TD></TR></TABLE>
</DIV>
</BODY></HTML>

visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 102 -- suite
  Dégradé de couleurs
<HTML><HEAD><TITLE>DEUG S1 dégradé</TITLE>
<SCRIPT LANGUAGE="JavaScript">
   // définition de Degrade()
   ...
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000033">
<DIV ALIGN=CENTER><H1>
<SCRIPT LANGUAGE = "JavaScript">
   Degrade(255,255,0,0,255,255,"D E U G Sciences S1 Informatique");
</SCRIPT>
<BR>
<SCRIPT LANGUAGE = "JavaScript">
   Degrade(0,255,0,255,255,0,"D E U G Sciences S1 Informatique");
</SCRIPT>
<BR>
<SCRIPT LANGUAGE = "JavaScript">
   Degrade(0,0,255,255,0,0,"D E U G Sciences S1 Informatique");
</SCRIPT>
<BR>
<SCRIPT LANGUAGE = "JavaScript">
   Degrade(255,0,0,0,0,255,"D E U G Sciences S1 Informatique");
</SCRIPT>
</DIV></H1>
</BODY></HTML>

visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 103 -- suite
  Le script
<SCRIPT LANGUAGE="JavaScript">
   // définition de Degrade()
   var hexa = "0123465789ABCDEF";
   function DecToHexa(DecNb) {
      x = Math.floor(DecNb / 16); h  = hexa.charAt(x);
      x = DecNb % 16;             h += hexa.charAt(x);
      return h;
   }
   function Degrade(dr,dv,db,fr,fv,fb,texte) {
      steps = texte.length;
      cr = dr; sr = (fr - dr) / steps;
      cv = dv; sv = (fv - dv) / steps;
      cb = db; sb = (fb - db) / steps;
      for (var x = 0; x <= steps; x++) {
         document.write('<FONT COLOR="#'
          + DecToHexa(cr) + DecToHexa(cv) + DecToHexa(cb) + '">');
         document.write(texte.charAt(x));
         document.write('</FONT>');
         cr += sr; cv += sv; cb += sb;
      }
   }
</SCRIPT>

visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 104 -- suite
  Processeur hypertexte
  • PHP Hypertext Processor
    langage permettant l'accès à des bases de données : traitement simplifié des formulaires
    autre langage analogue : ASP
  • Prétraitement du fichier avant envoi au navigateur
<HTML>
 <HEAD>
   <TITLE>PHP Test</TITLE>
 </HEAD>
 <BODY>
   <?php
     echo "<H1>Exemple PHP</H1>"; 
     $a = "pomme";
     $b = "terre";
     print("$a et $b <B>donnent</B> : $a de $b\n");
   ?>
 </BODY>
</HTML>
visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 105 -- suite
  PHP : saisie -- affichage
  • Saisie, fichier HTML « php_saisie.html »
<HTML>
<HEAD><TITLE>PHP Saisie</TITLE></HEAD><BODY>

<FORM ACTION="php_result.php" METHOD="GET">
 <H1>Saisie des coordonnées</H1>
 <H2> Nom : <INPUT TYPE="text" NAME="name">
 <BR> Adresse : <INPUT TYPE="text" NAME="addr">
 <BR> Téléphone : <INPUT TYPE="text" NAME="phone">
 </H2><P>
 <INPUT TYPE="submit" VALUE="Envoyer">
 <INPUT TYPE="reset" VALUE="Annuler"></P>
</FORM>

</BODY></HTML>

visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 106 -- suite
  PHP : saisie -- affichage (suite)
  • Affichage, fichier HTML+PHP « php_result.php »
<HTML>
<HEAD>
 <TITLE>PHP Resultat</TITLE>
 <STYLE TYPE="text/css"> b { color: red }</STYLE>
</HEAD>
<BODY>
<H1>Vos coordonnées</H1>

<?php
    print("<br>Nom : <b>$_GET[name]</b>\n");
    print("<br>Addresse : <b>$_GET[addr]</b>\n");
    print("<br>Téléphone : <b>$_GET[phone]</b>\n");
?>

</BODY></HTML>
  DEUG Sciences S1 Informatique -- M.C. -- 107 -- suite
  Java
  • Programmation non limitée
    traitement des formulaires ; animations ; calculs ; sécurité ; ...
  • Compilation du programme sur le serveur
  • Exécution par le client (navigateur ou assistant)
<HTML>
<HEAD>
   <META NAME="author" CONTENT="Etienne Duris">
   <TITLE>Applet d'addition</TITLE>
</HEAD>
<BODY>
   <H1>Calculette à une opération</H1>
   <HR>
   <applet code="AdditionApplet" width=200 height=150>
   </applet>
   <HR>
</BODY>
</HTML>

visualisation
  DEUG Sciences S1 Informatique -- M.C. -- 108 -- suite
  Code de l'appliquette
  • Contenu du fichier « AdditionApplet.java »
  • qui doit être compilé avant utilisation par la commande :
    javac AdditionApplet.java
  • pour produire le fichier AdditionApplet.class

Autres exemples

  DEUG Sciences S1 Informatique -- M.C. -- 109 -- suite
  Sécurité
  • Fouineurs ou casseurs
    hackers or crackers
  • Protection juridique
    en France : loi « Godfrain » en vigueur depuis 1994
    • délit d'intrusion
    • délit d'entrave
    • délit de piratage
  • Identification
  • Chiffrement
    pour le codage secret de données sensibles transitant sur le réseau
    règlementation française en cours d'évolution
    exemple : PGP (http://www.ifi.uio.no/pgp/)
  DEUG Sciences S1 Informatique -- M.C. -- 110 -- suite
  La suite ...
  • HTML
    évolution vers XHTML et XML
  • Pages exécutables
    utilisation de programmes dans les pages en HTML :
    langages Java, JavaScript, ActiveX, ...
  • Nécessité de savoir programmer !
  • Intégration dans les systèmes
  • Robot plus sélectifs
  • Autres services
    téléphone, vidéophone, push, ...
  DEUG Sciences S1 Informatique -- M.C. -- 111 -- on recommence