>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
- <title>Programmation Internet</title>
+ <title>CSS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</script>
</head>
<body>
+ <a href="prog_internet_04.xhtml" class="sws-previous"/>
<div class="sws-slide sws-cover sws-option-nofooter">
<h1>Programmation Internet</h1>
<a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
<a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
</div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <div>
- <ol >
- <li class="done"> Systèmes d'exploitation</li>
- <li class="done"> Réseaux et Internet</li>
- <li class="done"> Le Web </li>
- <li > CSS
- <ul class="empty">
- <li class="hl">4.1 Introduction</li>
- <li>4.2 Boîtes</li>
- <li>4.3 Selecteurs</li>
- </ul>
- </li>
- </ol>
- </div>
- </div>
-
+ <h1>Introduction</h1>
<div class="sws-slide">
<h1>Cascading Style Sheets (CSS)</h1>
<table class="desc">
</ul>
</div>
<div class="sws-slide">
- <h1> L'attribut <tt>style</tt></h1>
- <code> <![CDATA[ <a href="http://www.u-psud.fr" style="color:red">Un lien</a>]]>
+ <h1>L'attribut <tt>style</tt></h1>
+ <code> <![CDATA[ <a href="http://www.u-psud.fr" style="]]><em>color:red</em><![CDATA[">Un lien</a>]]>
</code>
<p>Apperçu: </p>
<p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
<a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
</p>
- <p class="sws-pause">Inconvénient: il faut copier l'attribut
- style pour tous les liens de la page.
- </p>
+ <p class="sws-pause">Inconvénients :</p>
+ <ul> <li>il faut copier l'attribut
+ style pour tous les liens de la page</li>
+ <li>modification de tous les éléments difficiles</li>
+ </ul>
</div>
<div class="sws-slide">
- <h1> Internet </h1>
- <ul>
- <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
- </li>
- <li> Modèle Client/Serveur</li>
- <li> Un serveur fournit un service:
- <ul>
- <li>courriel</li>
- <li>transfert de fichier (ftp)</li>
- <li>connexion à distance (ssh)</li>
- <li>Web (http)</li>
- </ul>
- </li>
- <li> Plusieurs services peuvent être actifs sur la même
- machine (serveur). Un <em>port (identifiant numérique)</em>
- est associé à chaque service. Sur Internet, un service est
- identifié par:
- <ul>
- <li>L'adresse IP de la machine sur lequel il fonctionne</li>
- <li>Le numéro de port sur lequel le programme attend les
- connexions</li>
- </ul>
- </li>
- </ul>
+ <h1>L'élément <tt>style</tt></h1>
+ <code><![CDATA[ <html>
+ <head>
+ <title>…</title>
+ <style>
+]]> <em>a { color: red; }</em>
+<![CDATA[ </style>
+ </head>
+ <body>
+ <a href="…">Lien 1</a> <a href="…">Lien 2</a>
+ </body>
+ </html>]]></code>
+ <p>Apperçu :</p>
+ <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
+ <a href="…" style="color:red;text-decoration:underline;">Lien
+ 1</a>
+ <a href="…" style="color:red;text-decoration:underline;">Lien 2
+ </a>
+ </p>
+ <p>Inconvénient : local à une page</p>
</div>
<div class="sws-slide">
- <h1> Exemples de services </h1>
- <table class="simple" style="width:100%">
- <tr><th style="width:10%">Service</th>
- <th style="width:40%">Protocole</th>
- <th style="width:5%">Port</th>
- <th style="width:45%;">Description</th>
- </tr>
- <tr>
- <td>ftp</td> <td >File Transfer Protocol</td> <td>
- 20,21 </td> <td>Transfert de fichiers</td> </tr>
- <tr> <td>telnet</td> <td>Network Virtual
- Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
- <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
- distance crypté</td></tr>
- <tr> <td>mail</td><td>Simple Mail Transfer
- Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
- <tr><td>pop</td> <td>Post Office
- Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
- <tr><td>imap</td> <td>Internet Message Access
- Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
- <tr><td>nslookup</td> <td>Domain Name
- System</td> <td>42</td> <td>Serveur de noms</td></tr>
- <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
-
- </table>
+ <h1>Fichier <tt>.css</tt> séparé</h1>
+ <p>Fichier <tt>style.css</tt>:</p>
+ <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
+ <code >a { color: red; }</code>
+ </p>
+ <p>Fichier <tt>test.html</tt>:</p>
+ <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
+ <code > <![CDATA[<html>
+ <head>
+ …
+ ]]><em><link href="style.css" type="text/css" rel="stylesheet" /></em>
+<![CDATA[ </head>
+ …
+ </html>]]></code>
+ </p>
+ <p class="sws-pause">Modifications & déploiement aisé</p>
</div>
<div class="sws-slide">
- <h1> World Wide Web (1/2)</h1>
+ <h1>Syntaxe</h1>
+ <p>Une <em>propriété</em> CSS est définie en utilisant la
+ syntaxe:
+ </p>
+ <p style="text-align:center"><tt> nom_prop : val_prop
+ ; </tt></p>
<ul>
- <li>Service de distribution de page <em>hypertexte</em></li>
- <li>Une page <em>hypertexte</em> contient des références
- immédiatement accessibles à d'autres pages (pointeurs
- ou <em>liens hypertextes</em>)</li>
- <li>Les pages sont décrites dans le
- langage <em>HTML</em> (HyperText Markup Language) </li>
- <li>Architecture client/serveur:
- <ul>
- <li>Les pages sont stockées sur le serveur</li>
- <li>Les pages sont envoyées au client (navigateur Web) qui
- en assure le rendu</li>
- </ul>
+ <li>Si on utilise l'attribut <tt>style</tt> d'un
+ élément:<code>
+ <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
+ </code>
</li>
- <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
- le client et le serveur</li>
+ <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
+ style:<code>
+ a {
+ <em>color : red;
+ border-style: solid;
+ border: 1pt;</em>
+ }
+ h1 { /* Le style des titres de niveau 1 */
+ text-decoration: underline;
+ color: green;
+ }
+</code></li>
</ul>
</div>
-
+<h1>Boîtes</h1>
<div class="sws-slide">
- <h1> World Wide Web (2/2)</h1>
- <p>Concepts clé:</p>
+ <h1> Unités de longueur</h1>
+ <p>CSS permet de spécifier des longueurs comme valeurs de
+ certaines propriétés (position et taille des éléments, épaisseur
+ des bordures, …). Les longueurs <em>doivent</em> comporter une
+ unité. Les unités reconnues sont:</p>
<table class="desc">
- <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
- la page »)</td> </tr>
- <tr><td>HTTP</td> <td>protocole de communication entre un
- client et un serveur Web</td> </tr>
- <tr><td>HTML</td> <td>langage de description des pages
- Web</td> </tr>
+ <tr><td style="width:3em" >px</td> <td>pixel</td> </tr>
+ <tr><td>in</td> <td>pouce (2,54cm)</td> </tr>
+ <tr><td>cm</td> <td>centimètre</td> </tr>
+ <tr><td>mm</td> <td>millimètre</td> </tr>
+ <tr><td>pt</td> <td>point (1/72<up>ème</up> de pouce, 0,35mm) </td></tr>
+ <tr><td>pc</td> <td>pica (12 points)</td></tr>
+ <tr><td>em</td> <td>facteur de la largeur d'un caractère de la police
+ courante</td></tr>
+ <tr><td>ex</td> <td>facteur de la hauteur d'un caractère « x »
+ de la police courante</td></tr>
+ <tr><td>%</td> <td>pourcentage d'une valeur particulière
+ (définie par propriété)</td></tr>
+ <tr><td >vh</td> <td class="css3"><i>viewport height</i> (% de la
+ hauteur de la partie visible de la page)</td></tr>
+ <tr style="background:white"><td>vw</td> <td class="css3"><i>viewport
+ width</i> (% de la largeur de la partie visible de la
+ page)</td></tr>
</table>
- <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
- <ul>
- <li>Standardisation du contenu multimédia (images, vidéos et
- sons en <i>streaming</i>)</li>
- <li>Contenu interactif avancé (stockage de fichier coté
- client, rendu 3D, …)</li>
- <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
- </ul>
</div>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="hl" >3.2 Fonctionnement du Web</li>
- <li class="">3.3 Adressage des documents Web </li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
-
<div class="sws-slide">
- <h1>Fonctionnement du Web</h1>
- <div style="text-align:center;">
- <img style="width:90%;height:50%;" src="cours_4.svg"
- type="image/svg+xml" />
- </div>
+ <h1>Boîte</h1>
+ <p >Chaque élément de la page HTML possède une <em>boîte
+ rectangulaire</em> qui délimite le contenu de l'élément:
+ </p>
+ <div style="text-align:center;vertical-align:text-bottom;">
+ <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
+ 25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
+ <span id="b1" style="display:inline-block;
+ color:black;
+ padding:0 4vh 4vh 4vh;
+ border:dotted 2pt black;"><i>margin</i> (marge)<br/>
+ <span id="b2" style="display:inline-block;
+ padding:0 4vh 4vh 4vh;
+ color:white;background:black">
+ <i>border</i> (bordure)<br/>
+ <span id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
+ background:white;color:black;border:dotted
+ 2pt black">
+ <i>padding</i> (ajustement)<br/>
+ <span style="border:dotted 2pt black;
+ background:white;
+ position:relative;
+ display:inline-block;
+ font-size:15vh;
+ width:2.8em;
+ height:12vh;">
+ <span style="color:red;
+ top:-5vh;
+ left:0vh;
+ position:absolute;
+ text-decoration:underline;
+ padding:0 0 0 0;
+ margin: 0 0 0 0;
+ ">Lien 1
+ </span>
+ </span>
+ </span>
+ </span>
+ </span>
+ </span><span class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:large;height:100%;">↑<br/><br/><br/><br/>
+ height<br/><br/><br/><br/>↓
+ </span>
+ </div>
+ <script type="text/javascript">
+ function all(e) {
+ return $(e).children("*").addBack()
+ }
+ function hide(e) {
+ all(e).css('visibility', 'hidden');
+ };
+ function show(e) {
+ all(e).css('visibility', 'visible');
+ }
+ SWS.Presentation.registerCallback("0", function(c) {
+ hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
+
+ });
+ SWS.Presentation.registerCallback("1", function(c) {
+ hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("2", function(c) {
+ hide(".b0");hide("#b1"); show("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("3", function(c) {
+ hide(".b0");show("#b1"); show("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("4", function(c) {
+ show(".b0");show("#b1"); show("#b2"); show("#b3");
+ });
+ </script>
+ <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
+ <tt>(height|width) = padding + margin + border + t</tt>
+ </p>
</div>
-
- <div class="sws-slide">
- <h1>Côté client</h1>
- <p>Le navigateur :</p>
- <ul>
- <li>Analyse l'URL demandée</li>
- <li>Obtient l'adresse IP auprès du serveur DNS</li>
- <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
- <li>Envoie une <em>requête HTTP</em> au serveur</li>
- <li>Récupère la page envoyée par le serveur dans
- sa <em>réponse</em></li>
- <li>Analyse la page et récupère les éléments référencés :
- images, sons, …</li>
- <li>Effectue le traitement du code client</li>
- <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
- </ul>
- </div>
-
<div class="sws-slide">
- <h1>Côté serveur</h1>
- <ul>
- <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
- connexions sur un port par défaut (80 dans le cas de HTTP)</li>
- <li>À chaque nouvelle connexion, le <i>listener</i> crée
- un <i>thread</i> de traitement et se remet en attente
- </li>
- <li>Le <i>thread</i> de traitement vérifie la validité de la
- requête :
- <ul>
- <li>le document demandé existe ?
- </li>
- <li>le client est autorisé à accéder au document ?
- </li>
- <li>…</li>
- </ul>
- </li>
- <li>Le <i>thread</i> de traitement répond à la requête :
- <ul>
- <li>Exécution de code côté serveur, récupération de
- données dans une BD, …
- </li>
- <li>Envoi de la page au client
- </li>
- </ul>
- </li>
+ <h1>Marge, bordure, ajustement</h1>
+ <p>On peut spécifier jusqu'à 4 valeurs:</p>
+ <ul><li>1 valeur: toutes les dimensions égales à cette
+ valeur</li>
+ <li>2 valeurs: haut et bas égal à la première valeur, gauche
+ et droite égale à la deuxième</li>
+ <li>3 valeurs: haut à la première valeur, gauche
+ et droite égale à la deuxième, bas égal à la troisième</li>
+ <li>4 valeurs: haut, droit, bas, gauche</li>
</ul>
- </div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="hl">3.3 Adressage des documents Web </li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
+ <code style="font-size:smaller;"> span {
+ padding:10pt 20pt 5pt 0pt;
+ margin:10pt 5pt;
+ border-width:3pt;
+ border-color:red blue green;
+ border-style:solid dotted;
+ } </code>
+ <div style="text-align:center;">Du <span style="padding:10pt
+ 20pt 5pt 0pt;margin:10pt 5pt;border-style:solid dotted;border-width:3pt;border-color:red blue green;">texte</span> dans une boite
+ </div>
</div>
<div class="sws-slide">
- <h1>Adressage des documents Web (1/3)</h1>
+ <h1>Modes d'affichage</h1>
+ <p>La propriété <em><i>display</i></em> contrôle le mode
+ d'affichage d'un élément:
+ </p>
<table class="desc">
- <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
- identifie un document sur internet</td></tr>
+ <tr><td>none</td><td>l'élément n'est pas dessiné et n'occupe
+ pas d'espace</td></tr>
+ <tr><td style="width:4em;">inline</td><td>l'élément est placé sur la ligne
+ courante, dans le flot de texte. La taille du contenu (avec
+ les marges, ajustements et bordures) dicte la
+ taille de la boîte, <tt>height</tt> et <tt>width</tt> sont
+ ignorés (<tt><![CDATA[<i>, <b>, <span>, <em>, …]]></tt>
+ sont <i>inline</i> par défaut). </td></tr>
+ <tr><td>block</td><td>l'élément est placé seul sur sa
+ ligne. La taille est calculée automatiquement mais peut être
+ modifiée par <tt>width</tt> et <tt>height</tt>
+ (<tt><![CDATA[<div>, <h1>, <p>, …]]></tt>
+ sont <i>block</i> par défaut)</td></tr>
+ <tr><td>inline-block</td><td>positionné comme <i>inline</i>
+ mais la taille peut être modifiée comme pour <i>block</i></td></tr>
+
</table>
- <p>Une URL se décompose en 3 partie</p>
- <ul><li><em>protocole</em> (comment ?)</li>
- <li><span style="color:orange;">adresse</span> (où ?)</li>
- <li><span style="color:blue;">document</span> (quoi ?)</li>
- </ul>
- <p>Syntaxe (simplifiée) :</p>
- <code> <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
- <p>Exemple :</p>
- <code> <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
</div>
-
<div class="sws-slide">
- <h1>Adressage des documents Web (2/3)</h1>
- <p>On peut aussi préciser <span style="color:purple;">un numéro
- de port</span>, des <span style="color:black;">paramètres</span>
- et un <span style="color:red;">emplacement</span> :
- </p>
- <code> <em>protocole</em>://<span style="color:orange">adresse</span>:<span style="color:purple">port</span>/<span style="color:blue;">document</span>?<span style="color:black;">p1=v1</span>&<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
- <p class="sws-pause" >Exemple :</p>
- <code> <a style="color:gray" href="http://www.youtube.com:80/results?search_query=tbbt#search-results"><em>http</em>://<span style="color:orange">www.youtube.com</span>:<span style="color:purple">80</span>/<span style="color:blue;">results</span>?<span style="color:black;">search_query=tbbt</span>#<span style="color:red">search-results</span></a></code>
- <p>Le serveur utilise les paramètres passés par le client dans
- l'URL pour <i>calculer</i> le contenu de la page (changer la
- chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
+ <h1>Modes d'affichage (exemples)</h1>
+ <div>
+ <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
+ <tt>a { display: inline; … } </tt>
+ </div>
+ <div style="width:50%;float:left;">
+ Le <span style="border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 1</span>,
+ le <span style="border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 2</span> et
+ le <span style="border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 3</span>.
+ </div>
+ </div>
+ <div >
+ <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
+ <tt>a { display: block; … } </tt>
+ </div>
+ <div style="width:50%;float:left;">
+ Le <span style="display:block;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 1</span>,
+ le <span style="display:block;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 2</span> et
+ le <span style="display:block;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 3</span>.
+ </div>
+ </div>
+ <div>
+ <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
+ <code>a { display: inline-block;
+ width: 4em;
+ height: 2em;
+ … } </code>
+ </div>
+ <div style="width:50%;float:left;">
+ Le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 1</span>,
+ le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 2</span> et
+ le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 3</span>.
+ </div>
+ </div>
</div>
<div class="sws-slide">
- <h1>Adressage des documents Web (3/3)</h1>
- <p>
- La <em>racine</em> d'un site Web
- (ex: <em><code>http://www.lri.fr/</code></em>) correspond
- à un répertoire sur le disque du serveur
- (ex: <em><code>/var/www</code></em>). Le fichier</p>
- <code> http://www.lri.fr/index.html</code>
- <p>se trouve à l'emplacement</p>
- <code> /var/www/index.html</code>
- <p>Le serveur Web peut aussi effectuer des <em>réécritures
- d'adresses</em> :</p>
- <code> http://www.lri.fr/~kn/index.html</code>
- <p>devient</p>
- <code> /home/kn/public_html/index.html</code>
- </div>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="done">3.3 Adressage des documents Web </li>
- <li class="hl">3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
+ <h1>Positionnement</h1>
+ <p>Le type de positionnement est donné par la
+ propriété <em>position</em></p>
+ <table class="desc">
+ <tr><td>static</td><td>positionnement « automatique
+ » </td></tr>
+ <tr><td>fixed</td><td>positionnement par rapport à la fenêtre
+ du navigateur (la boîte est supprimée du flot)</td></tr>
+ <tr><td>relative</td><td>positionnement « relatif » par
+ rapport à la position normale</td></tr>
+ <tr><td style="width:5em;">absolute</td><td>positionnement « absolu » par rapport
+ à l'ancêtre le plus proche qui n'est pas <i>static</i></td></tr>
+ </table>
+ <p>Pour <tt>fixed</tt>, <tt>relative</tt> et <tt>absolute</tt>,
+ les propriétés <tt>top</tt>, <tt>bottom</tt>, <tt>left</tt>
+ et <tt>right</tt> dénotent les décalages respectifs.
+ </p>
</div>
<div class="sws-slide">
- <h1>Caractéristiques du protocole HTTP</h1>
- <ul>
- <li>Sans connexion permanente:
- <ul>
- <li>Le client se connecte au serveur, envoie sa requête,
- se déconnecte</li>
- <li>Le serveur se connecte au client, envoie sa réponse,
- se déconnecte</li>
- </ul>
- </li>
- <li>Indépendant du contenu : permet d'envoyer des documents
- (hyper) texte, du son, des images, …</li>
- <li>Sans <em>état</em>: chaque paire requête/réponse est
- indépendante (le serveur ne maintient pas d'information sur le
- client entre les requêtes)</li>
- <li>Protocole en mode <em>texte</em></li>
+ <h1>Positionnement (exemple)</h1>
+ <div>
+ <div style="45%;margin:0 4%;float:left;"><code>
+<span style="color:#02a"> a { position: static;
+ … }</span>
+<span style="color:#0a2"> a { position: fixed;
+ right:10pt;
+ top: 10pt;
+ }</span></code></div>
+ <div style="width:50%;float:left;"><code>
+<span style="color:#a20"> a { position: relative;
+ left: 10pt;
+ bottom: -5pt;
+ … }</span>
+<span style="color:#a2a"> a { position:absolute;
+ right:0pt;
+ bottom: 10pt;
+ }</span></code>
+ </div><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code>
+ </div><br/>
+ <ul style="position:relative;float:right;background:#ddd;">
+ <li>Positionnement <span style="position:static;color:#02a">static</span></li>
+ <li>Positionnement <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
+ (right:10pt,top:10pt)</span></li>
+ <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
+ (left:10pt,bottom:-5pt)</span></li>
+ <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
+ (right:10pt,bottom:10pt)</span></li>
+
</ul>
</div>
+ <h1>Autres propriétés</h1>
<div class="sws-slide">
- <h1>Format des messages HTTP</h1>
- <p>Les messages ont la forme suivante</p>
- <ul><li>Ligne initiale CR LF</li>
- <li>zéro ou plusieurs lignes d'option CR LF</li>
- <li>CR LF</li>
- <li>Corp du message (document envoyé, paramètres de la
- requête, …)</li>
- </ul>
- <ul><li><em>Requête</em> la première ligne contient un nom
- de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
- méthode et la version du protocole</li>
- <li><em>Réponse</em> la version du protocole, le code de la
- réponse (200, 404, 403, …) et un message informatif
- </li>
+ <h1>Couleurs</h1>
+ <p>Les couleurs peuvent être données:</p>
+ <ul>
+ <li>par nom
+ symbolique: <span style="color:red">red</span>,
+ <span style="color:blue">blue</span>,
+ <span style="color:purple">purple</span>,
+ …</li>
+ <li>en
+ hexadécimal: <tt>#<span style="color:red">xx</span><span style="color:green">yy</span><span style="color:blue">zz</span></tt>, avec
+ <tt>00 ≤ xx,yy,zz ≤ ff</tt></li>
+ <li>en
+ décimal: <tt>rgb(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>)</tt>,
+ avec <tt>0 ≤ x,y,z ≤ 255</tt></li>
+ <li class="css3">en
+ décimal avec
+ transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
+ a)</tt>,
+ avec <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
+
</ul>
</div>
<div class="sws-slide">
- <h1>Démo</h1>
- </div>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="done">3.3 Adressage des documents Web </li>
- <li class="done">3.4 Le protocole HTTP</li>
- <li class="hl">3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
- <div class="sws-slide">
- <h1>HTML</h1>
- <p>
- <em>HyperText Markup Language</em> : langage de mise en forme
- de documents hypertextes (texte + liens vers d'autres
- documents). Développé au CERN en 1989.<br/>
- <em>1991</em> : premier navigateur en mode texte<br/>
- <em>1993</em> : premier navigateur graphique (mosaic)
- développé au NCSA (National Center for Supercomputing
- Applications)
- </p>
+ <h1>Propriétés du texte</h1>
+ <p>Certaines propriétés permettent d'alterer le rendu du texte
+ d'un élément</p>
+ <table class="desc">
+ <tr><td>direction</td><td><tt>ltr</tt> ou <tt>rtl</tt>
+ (orientation du texte)</td></tr>
+ <tr> <td>text-transform</td> <td><tt>capitalize</tt>, <tt>uppercase</tt>, <tt>lowercase</tt>
+ </td></tr>
+ <tr> <td>text-decoration</td> <td><tt>underline</tt>, <tt>overline</tt>, <tt>line-through</tt> </td></tr>
+ <tr> <td>text-align</td> <td><tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>justify</tt></td></tr>
+ <tr><td>text-indent</td> <td><tt>longueur du retrait de paragraphe</tt></td></tr>
+ </table>
</div>
<div class="sws-slide">
- <h1>Document HTML</h1>
- <ul><li> est un document <em>semi-structuré</em></li>
- <li> dont la structure est donnée par
- des <em>balises</em></li>
- </ul>
- <div>
- <table class="btable simple" style="width:90%;margin-left:5%">
- <thead>
- <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
- </thead>
- <tr><td ><tt><![CDATA[Un texte <b>en gras</b> ]]></tt></td><td>Un
- texte <b>en gras</b></td></tr>
- <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
- <td><a style="color:blue;text-decoration:underline;"
- href="http://www.u-psud.fr">Un lien</a></td></tr>
- <tr><td><code><![CDATA[<ul>
- <li>Premièrement</li>
- <li>Deuxièmement</li>
-</ul> ]]></code></td> <td><ul>
-<li>Premièrement</li>
-<li>Deuxièmement</li>
-</ul>
+ <h1>Propriétés de la police</h1>
+ <table class="desc">
+ <tr><td>font-family</td><td>liste de nom de polices séparées
+ par des virgules (<tt>Helvetica, sans, "Times New Roman"</tt>)</td></tr>
+ <tr> <td>font-style</td> <td><tt>normal</tt>, <tt>italic</tt> </td></tr>
+ <tr> <td>font-weight</td> <td><tt>normal</tt>, <tt>lighter</tt>, <tt>bold</tt>, <tt>bolder</tt> </td></tr>
+ <tr> <td style="width:6.5em;">font-size</td> <td> soit une longueur
+ soit <tt>xx-small</tt>, <tt>x-small</tt>, <tt>small</tt>, <tt>medium</tt>,
+ <tt>large</tt>, <tt>x-large</tt>, <tt>xx-large</tt>
</td></tr>
</table>
- </div>
-<p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
- ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
- balise <em>fermante</em>. On peut
- écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
- <tt><![CDATA[<toto></toto>]]></tt>.
-</p>
- </div>
- <div class="sws-slide">
- <h1>Historique du langage HTML</h1>
-<table class="desc">
- <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
-IBM. Introduction de la notion de balise.</td></tr>
-<tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
-<tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
-netscape, ... ) interprètent le standard de manière
-différente</td></tr>
-<tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
-documents semi-structurés (SGML simplifié)</td></tr>
-<tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
- XML</td></tr>
-<tr><td>2008</td><td> Première proposition pour le nouveau standard,
- HTML5</td></tr>
-<tr><td>2014</td><td>Standardisation de HTML5</td></tr>
-</table>
+ <p class="css3" >On peut aussi spécifier un descripteur de
+ police</p>
+ <code>
+ @font-face {
+ font-family: Toto;
+ src: url(toto.ttf);
+ }
+ a { font-family: Toto; }
+ </code>
</div>
-
+ <h1>Selecteurs</h1>
<div class="sws-slide">
- <h1>XHTML <i>vs</i> HTML</h1>
- <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
- <ul>
- <li>
- Les balises sont <em>bien parenthésées</em>
- (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red"></b></span></tt> est interdit)
- </li>
- <li>Les balises sont en minuscules</li>
- </ul>
- <p>Les avantages sont les suivants</p>
- <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
- pas fermer certaines balise … Les navigateurs corrigent ces
- erreurs de manières <em>différentes</em></li>
- <li>Le document est <em>structuré</em> comme un programme
- informatique (les balises ouvrantes/fermantes correspondent à
- { et }). Plus simple à débugger.</li>
- </ul>
+ <h1>Selecteurs</h1>
+ <p>On peut sélectionner finement les éléments auxquels un style
+ s'applique</p>
+ <table class="desc">
+ <tr><td><tt>x</tt></td><td>tous les éléments dont la balise
+ est <tt>x</tt></td></tr>
+ <tr> <td><tt>.foo</tt></td> <td>tous les éléments dont
+ l'attribut <tt>class</tt> vaut <tt>foo</tt></td></tr>
+ <tr><td><tt>#foo</tt></td><td>l'élément dont l'attribut
+ <tt>id</tt> vaut <tt>foo</tt> (les <tt>id</tt> doivent être uniques)</td></tr>
+ <tr> <td><tt>X Y</tt></td> <td>tous les éléments
+ selectionnés par <tt>Y</tt> qui sont des descendants d'éléments
+ sélectionnés par <tt>X</tt></td></tr>
+ <tr> <td><tt>X > Y</tt></td> <td>tous les éléments dont
+ selectionné par <tt>Y</tt> qui sont des fils d'éléments
+ sélectionnés par <tt>X</tt></td></tr>
+ <tr><td style="width:7em;"><tt>a:visited</tt></td><td>les liens déjà
+ visités</td></tr>
+ <tr><td><tt>a:link</tt></td><td>les liens non
+ visités</td></tr>
+ <tr><td><tt>X:hover</tt></td><td>élément selectionné
+ par <tt>X</tt> et survollé par la souris</td></tr>
+ </table>
+ <code> div.foo ul li a:visited { color: red; } </code>
</div>
-<div class="sws-slide">
- <h1>Rôle d'(X)HTML</h1>
- <p>Séparer la <em>structure</em> du document de
- son <em>rendu</em>. La structure donne une <em>sémantique</em> au
- document :</p>
- <ul>
- <li>ceci est un titre</li>
- <li>ceci est un paragraphe</li>
- <li>ceci est un ensemble de caractères importants</li>
- </ul>
- <p>Cela permet au navigateur d'assurer un rendu en fonction de la
- sémantique. Il existe différents types de rendus:</p>
- <ul>
- <li>graphique interactif (Chrome, Firefox, Internet Explorer,
- …)</li>
- <li>texte interactif (Lynx, navigateur en mode texte)</li>
- <li>graphique statique (par ex: sur livre électronique)</li>
- <li>rendu sur papier</li>
- <li>graphique pour petit écran (terminal mobile)</li>
- </ul>
-</div>
-<div class="sws-slide">
- <h1>Exemple de document</h1>
- <p style="text-align:center;font-size:smaller;">(liste des balises
- données sur la feuille de TD 4!)</p>
-<div style="margin-left:10%;">
-<code style="font-size:smaller;"><![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
- <head>
- <title>Un titre</title>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- </head>
- <body>
- <h1>Titre de section</h1>
- <p> premier paragraphe de texte. On met
- un <a href="http://www.lri.fr">lien</a> ici.
- </p>
- <!-- on peut aussi mettre des commentaires -->
</body>
- </html>]]></code>
-</div>
-</div>
- </body>
</html>
projects / hacks / simpleWebSlides.git / blobdiff