HTML
|
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ù 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éjà)
lettre | codage | nom | lettre | codage | nom |
é | é | accent aigu |
æ | æ | ligature |
è | è | accent grave |
« | « | guillemet ouvrant |
ê | ê | circonflexe |
» | » | guillemet fermant |
ë | ë | tréma |
& | & | esperluète |
ç | ç | cédille |
< | < | inférieur |
ñ | ñ | tilde |
> | > | 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ê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
|
|
DEUG Sciences S1 Informatique -- M.C. -- 71 -- suite
|
Exemple
|
<HTML>
<HEAD>
<TITLE>Liste <DL> </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
|
|
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é
(<PRE>)
</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
- Dans le fichier D on peut référencer
|
|
|
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
|
|
<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
|
|
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
|