Vous êtes sur la page 1sur 109

Publication (avance) de donnes

spatiales dans Internet


GMT-20859 & SCG-66408
HTML & CSS
Thierry Badard & Frdric Hubert
Universit Laval, Dp. des sciences gomatiques
Qubec, Canada
{Thierry.Badard; Frederic.Hubert}@scg.ulaval.ca

Cours donn le 15 septembre 2008

.Contenu du cours.
Notions dhypertexte et dhypermdia
HTML
Structure dune page web
lments du langage
Feuilles de style CSS
Document Object Model
Scripting ct client

Notion d'hypertexte et d'hypermdia

Diffrentes architectures / technologies.

Sources : Peng & Tsou, 2003

Notion dhypertexte.

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

Notion dhypermdia.

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML HyperText Markup Language

HTML HyperText Markup Language (1/2).

Spcifi par le W3C (World Wide Web


Consortium) :
http://www.w3.org/TR/html4/
Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML HyperText Markup Language (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

* SGML : Standard Generalized Markup Language

HTML Principe du HTML (1/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Principe du HTML (2/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

Exemples dditeurs :
- Adobe Dreamweaver : http://www.adobe.com/fr/products/dreamweaver/
- Microsoft Expression (anciennement Frontpage):
http://www.microsoft.com/france/expression/default.mspx
- PSPAD : http://www.pspad.com/fr/
- MS Notepad, MS Wordpad, GNU Emacs, Vi

HTML Premier exemple de document HTML

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Fichier HTML

http://geosoa.scg.ulaval.ca/~badard/
quivalent de:
http://geosoa.scg.ulaval.ca/~badard/index.html
Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Structure gnrale dun doc. HTML

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les balises

Balises
obligatoires !

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Exemple de structure

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Entte dun doc. HTML <head></head>

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Caractres accentus et spciaux (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Caractres accentus et spciaux (2/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML La balise META (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML La balise META (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML La balise META : Exemple


<html>
<head>
<title>Dr. Thierry Badard - Professeur au Centre de Recherche en
Gomatique / Professor at Research Center for Geomatics</title>
<meta name="generator" content="phpWebSite" />
<meta name="keywords" content="Thierry Badard, GeoSOA, ,
Laval University, Universite Laval" />
<meta name="description" content="Site web personnel du Dr. Thierry
Badard - Personal website of Thierry Badard, Ph.D." />
<meta name="robots" content="index, follow" />
<meta name="author" content="Dr. Thierry Badard" />
<meta name="owner" content="Thierry.Badard@scg.ulaval.ca" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="JavaScript">

</script>
<link rel="stylesheet" href="themes/geosoa/style.css" type="text/css" />
</head>
<body> </body>
</html>

HTML Corps dun document HTML

(notion de CSS)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Couleurs

Autre notation possible:


rgb(rouge[0-255], vert[0-255], bleu[0-255])

Exemple: rgb(255,0,0) = #ff0000 = rouge


Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Principaux marquages de texte

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les titres : Exemple

HTML Les commentaires

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Formatage du texte

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Police et taille du texte

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Police et taille du texte : Exemples


<p>
<font size="7">texte assez norme</font><br>
<font size="1">texte assez minuscule</font><br>
<font size="+1">texte un peu plus grand que la normale</font><br>
<font size="-2">texte beaucoup plus petit que la normale</font>
</p>
<p>
<font color="#FF0000">texte rouge vif</font><br>
<font color="#00C000">texte vert</font><br>
<font color="#0000FF">texte bleus
</p>

Source: http://fr.selfhtml.org/html/texte/police.htm

HTML Barre sparatrice horizontale

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Listes (1/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Listes (2/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Listes : Exemple

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Listes de dfinitions

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Listes de dfinitions : Exemple

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les hyperliens

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML URL (Uniform Ressource Locator)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML URL relative

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Crer un hyperlien

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Notion de port TCP/IP

http://geosoa.scg.ulaval.ca:8080
http://132.203.82.194:80
Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les ancres (1/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les ancres (2/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les images (1/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les images (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les images : Exemple


<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>Ours dansant</h1>
<p><img src="oursdansant.gif" width="368" height="383"
alt="ours dansant"></p>
</body>
</html>

Source : http://fr.selfhtml.org/html/graphiques/incorporer.htm

HTML Les images mappes (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les images mappes (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les images mappes : Exemple


<h1>Vite la ville ou rgion de votre choix!</h1>
<map name="carte">
<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Coblence">
<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
<area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mayence">
<area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/"
alt="Francfort">
<area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
<area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/"
alt="Heidelberg">
<!-- -etc. -->
</map>
<p><img src="carte.gif" width="345" height="312" border="0" alt="carte"
usemap="#carte"></p>

Clic

Source : http://fr.selfhtml.org/html/graphiques/compose_liens.htm

HTML Les balises DIV et SPAN

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

Trs utilises avec les feuilles de style (CSS)

HTML Les balises DIV et SPAN : Exemples (1/3)


<div align="center">
<h1>Tout centr</h1>
<ul>
<li>tout centr</li>
<li>tout?</li>
<li>tout!</li>
</ul>
</div>
<div align="right">
<h1>Tout contre la marge droite</h1>
<ul>
<li>tout contre la marge
droite</li>
<li>tout?</li>
<li>tout!</li>
</ul>
</div>

http://fr.selfhtml.org/html/texte/passages.htm

HTML Les balises DIV et SPAN : Exemples (2/3)

http://www.startyourdev.com/HTML/Balise-SPAN.html

HTML Les balises DIV et SPAN : Exemples (3/3)

SPAN Dans le texte

DIV Saut de ligne

HTML Les tableaux

On prfre maintenant utiliser les feuilles de


style CSS pour raliser des mises en page
volues

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les tableaux : Exemples

Sources: http://www-adele.imag.fr/~donsez/cours/html.pdf
& http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Llment <table>

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Alignement des cellules

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Fusionner des cellules

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les tableaux : Exemple rcapitulatif

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les formulaires

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML La balise <form>

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les champs (ou contrles)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Cases cocher et boutons radio

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les boutons

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Soumettre des valeurs caches

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les slecteurs de liste

Exemple :

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les champs textes multilignes

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Formulaires : Exemples

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les objets externes (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les objets externes (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les cadres (frames)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les lments des frames HTML

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Dfinition du jeu de cadres (1/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Dfinition du jeu de cadres (2/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les cibles (target) dans les frames (1/2)

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

HTML Les cibles (target) dans les frames (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les IFrames (Inline Frame)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

HTML Les IFrames : Exemple

<html>
<head>
<title>Cadres incorpor&eacute;s</title>
</head>
<body>
<h1>Regarder par le carreau</h1>
<p>Voyez donc SELFHTML par la fen&ecirc;tre:</p>
<iframe src="../../../index.htm" name="SELFHTML_in_a_box"
width="90%"height="400">
<p>Votre navigateur ne peut malheureusement pas afficher de cadre
incorpor&eacute;: Vous pouvez appeler la page incorpor&eacute;e par ce lien:
<a href="../../../index.htm">SELFHTML</a></p>
</iframe>
</body>
Source: http://fr.selfhtml.org/html/frames/affichage/iframe.htm
</html>

CSS Cascading Style Sheets

Cascading Style Sheets (CSS) (1/2)


Feuilles de style en cascade
9 Regrouper dans un mme document des caractristiques de mise en
forme associes des groupes d'lments.
9 Dfinition de plusieurs styles possibles et hritage des styles en
cascade (Cascading).
9 Fournir une plus grande richesse d'lments de style graphique afin
d'amliorer l'apparence des documents HTML.

Les feuilles de style permettent :


9 d'obtenir une prsentation homogne sur tout un site en faisant appel
sur toutes les pages une mme dfinition de style ;
9 de permettre le changement de l'aspect d'un site complet entier par la
seule modification de quelques lignes ;
9 une plus grande lisibilit du HTML, car les styles sont dfinis part ;
9 des chargements de page plus rapides, pour les mmes raisons que
prcdemment ;
9 un positionnement plus rigoureux des lments.

Cascading Style Sheets (CSS) (2/2)


Trois niveaux de CSS
9 CSS Level 1, CSS Positionning, CSS 2

Cascading Style Sheets CSS 2.1 pour HTML et XML


9 http://www.w3.org/TR/CSS21/
9 Nouvelle spcification en cours : CSS 3

Support de CSS :
9
9
9
9
9
9
9

Microsoft Internet Explorer 4.x, 5.x, 6.x, etc.


Firefox x.x
Netscape Navigator 4.x, 6.x, 7.x
Mozilla x.x
Opera 5.x, 6.x, 7.x
Camino 0.8x
Safari 1.xx

CSS Incorporation de CSS dans HTML (1/2)


Feuille de style interne (ou style de document) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!-- Dfinition des styles; -->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>

Feuille de style externe :


<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css"
href="style.css">
</HEAD>
...

CSS Incorporation de CSS dans HTML (2/2)


Feuille de style en ligne
<HTML>
<HEAD> ... </HEAD>
<BODY> ...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre
</H1>
...
</BODY>
</HTML>

9 Balises non concernes par l'application de styles


BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Feuille de style import


<HTML>
<HEAD>
<STYLE type="text/css">
<!
@IMPORT URL(url de la feuille importer);
-->
</STYLE>
</HEAD>

CSS Dfinition de styles externes et cascads

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

CSS SPAN et DIV : Rappel


Appliquer des styles des paragraphes ou des morceaux de
paragraphes.
9 La balise SPAN
Permet de modifier des morceaux de paragraphes
<SPAN class=Nom_de_la_classe> Texte </SPAN>

9 La balise DIV
Permet de modifier des blocs de paragraphes
<DIV class=important> paragraphes </DIV>

Exemple
<span style= "color: green ; font-family: Times, sans-serif ; font-size: 14p
; " >Vous constatez </span> que ce texte n'est pas totalement <span style=
"color: green ; font-family: Times, sans-serif ; font-size: 14pt ; ">en vert
. </span>

Source : http://www.aidenet.com/css

CSS Styles en cascade

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

CSS Styles en cascade : Exemple


<HTML>
<HEAD>
<STYLE type="text/css">
<!-h1 {font-family: verdana, arial, sans-serif ;
background-color: #FFFFFF ;
color: green ; font-size:12pt ; }
-->
</STYLE>
</HEAD>
<BODY>
<DIV style = "font-family: verdana, arial, sans-serif ; color:
maroon ; font-size:10pt ; font-size:16pt ;background-color: #FFFFFF ;
">
<H1>Ceci est un test en cascade</H1>
</DIV>
<H1>
<DIV style = " font-family: verdana, arial, sans-serif ; color:
maroon ; font-size:10pt ; font-size:16pt ;background-color: #FFFFFF ;
">
Ceci est un test en cascade</DIV>
</H1>
</BODY>
</HTML>

CSS Plusieurs feuilles de style

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

CSS Notion d'hritage


Un lment X contenu dans un lment Y va hriter des proprits de
cet lment Y !!
Exemple :

Source : http://www.aidenet.com/css

CSS Llment STYLE

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

CSS Dfinition d'un style


Dfinition d'un style
9 Ensemble de rgles en texte simple permettant de dcrire l'aspect des
lments de la page

Une rgle CSS contient 2 lments principaux :


9 Un slecteur de style prcisant quelles balises appliquer le style
9 Une dclaration de style dfinie entre accolade "{ }"
Une ou plusieurs proprits : suivie du caractre ":"
Une ou plusieurs valeurs : spare par des virgules et suivie du
caractre ";"

Source: http://www.aidenet.com/css

A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow }

CSS Les slecteurs (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

CSS Les slecteurs (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

CSS Les classes


Dfinition de classes pour appliquer des styles diffrents aux
mmes balises
Une classe
9 Dfinie aprs le nom d'une balise suivie d'un point (".") :
B.rouge {font: Verdana 12px; color: #FF0000; }

9 Appel d'une classe


<B class="Rouge"> Texte mettre en rouge et en gras </B>

La classe universelle
9 Dfinie pour tre utilise dans n'importe quelle balise.
.important {font-type: arial; color: red; font-weight: bold}

9 Appel de la classe :
<h1 class="important">Attention ceci est un
avertissement</h1>
<i class="important">(prire d'en tenir compte)</i>

CSS Les pseudo-classes (1/3)


Les pseudo-classes
9 Affiner le style appliqu un certain nombre de balises en dfinissant
une raction un vnement ou bien la position relative de la balise
au sein des autres balises.
9 Ces pseudo-classes sont prdfinies, contrairement aux classes

Plusieurs types de pseudo-classes


9
9
9
9
9
9

Les pseudo-classes dynamiques


Les pseudo-classes de lien
Les pseudo-classes de langue
Les pseudo-classes first-child
Les pseudo-classes de page
Les pseudo-classes de texte

CSS Les pseudo-classes (2/3)


Les pseudo-classes dynamiques
9 Modifier le style d'une balise en fonction d'un vnement comme un
clic souris
9 3 pseudo-classes : :hover (survol avec souris), :focus (i.e. clic dans un
formulaire), et :active (entre le dbut d'un clic souris et le moment o
on relche)
9 Exemple : A:hover {font-decoration: underline;}

Les pseudo-classes de lien


9 Modifier le style d'un lien (balise <A>)
9 2 pseudo-classes : :link - style non-consult-, :visited - style consult-.

Les pseudo-classes de langue


9 Dfinir un style en fonction de la langue d'un document ou d'un
lment HTML (spcifi grce l'attribut optionnel LANG).
9 1 pseudo-classe : :lang(Langue)
9 Exemple: HTML:lang(fr) { quotes: ' ' ' ' }

CSS Les pseudo-classes (3/3)


La pseudo-classe descendante
9 Appliquer un style la premire balise au sein d'un lment en utilisant le
symbole ">" et la pseudo-classe :first-child
9 Exemple: P > A:first-child {color: #00FF00;}

Les pseudo-classes de page


9 Le slecteur @page permet de modifier la mise en page d'une page HTML.
9 3 pseudo-classes : :left (les pages de gauche), :right (les pages et de droite),
et :first (la premire page).
9 Exemple:
@page:right { size:landscape; margin-left: 2.5cm; }

Les pseudo-classes de texte


9 Appliquer un style une partie d'un texte dlimit par des balises (<P>).
9 2 pseudo-classes: :first-line (la premire ligne du texte) et :first-letter (la
premire lettre du texte)
9 Exemple:
P:first-letter { font-size: 200%; font-weight: bold; }

CSS Les units

Source: http://latlcui.unige.ch/ntic/htmlbase.ppt

CSS Les couleurs


Diffrentes faons pour dfinir les couleurs par :
9 Un nom.
17 couleurs
Aqua, green, orange, white, black, lime, purple, yellow, blue, maroon,
red, fuschia, navy, silver, gray, olive, teal.
h1 {color: blue}

9 Un code RGB (ou RVG) en notation hexadcimal.


16 millions de couleurs avec RGB.
#RRGGBB : RR, GG, BB = chacun est gal un nombre hexadcimal
entre 00 et FF pour le rouge (Red), le vert (Green) et le bleu (Blue)
h1 {color: #0000FF}

9 Un code RGB en notation dcimal.


Proportion relative en pourcentage (%) ou en notation entire absolue
(entre 0 et 255)
rgb(100%,100%,100%)
rgb(24,125,255)

CSS Le positionnement (1/3)


Avec les balises SPAN et DIV du langage HTML, il est possible de
positionner au pixel prs du texte et des images.
9 Positionnement relatif (par rapport d'autres lments)
9 Positionnement absolu (coin suprieur gauche de la fentre du
navigateur)
9 Exemple 1 : positionnement d'un texte

<HTML>
<BODY>
<SPAN style="position: absolute;
top: 80 px; left: 100 px;">
Comment a marche? </SPAN>
</BODY>
</HTML>
Source: http://www.commentcamarche.net/css/

CSS Le positionnement (2/3)


9 Exemple 2 : positionnement d'une image

<HTML>
<HEAD>
<STYLE>
<!
.test{position: absolute;
top: 80px; left: 100px; width:
103px; height: 61px"}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
<IMG SRC="test.jpg" >
</DIV>
</BODY>
</HTML>

Source: http://www.commentcamarche.net/css/

<HTML>
<BODY>
<SPAN style="position:
absolute; top: 80 px; left: 100
px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

CSS Le positionnement (3/3)


9 Exemple 3 : superposition d'lments

Source: http://www.commentcamarche.net/css/

<HTML>
<BODY>
<SPAN style="position: absolute;
top: 30 px; left: 100px;width: 103px;
height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute;
top: 50 px; left: 100 px;"> Comment a
marche? </SPAN>
</BODY>
</HTML>

CSS Quelques proprits


Quelques proprits
9 pour les polices de caractres
font-family: Arial ; font-size: x-large; font-style: bold;

9 pour les textes et les paragraphes


text-align: center; color: red; text-indent: 5px, width: 640; height: 480;

9 pour les couleurs et l'arrire-plan


background-color: yellow; background-position: left;

9 pour les bordures


border-left-color: #0000FF; border-top-width: 3pt;

9 pour les espaces intrieurs


padding-top: 3px; padding-right: 0.25em;

9 pour les tableaux


border-spacing: 4px; caption-side: top; table-layout: fixed;

9 pour les listes


list-style-type: circle; list-style-position: inside;

9 pour la mise en page


@page(size: portrait); margin-left: 2 cm; page-break-before: always,

DOM et Script ct client

Document Object Model (DOM) (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

Document Object Model (DOM) (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

Script ct client (1/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

Script ct client (2/2)

Source: http://www-adele.imag.fr/~donsez/cours/html.pdf

Prochaines sances
Prochain cours, le 22/09 :
Notions de Javascript

Mercredi 17/09 :
1er laboratoire HTML & CSS