Cascading Style Sheets (CSS)
| Service | -Protocole | -Port | -Description | -
|---|---|---|---|
| ftp | File Transfer Protocol | - 20,21 | Transfert de fichiers |
| telnet | Network Virtual - Terminal | 23 | Shell à distance |
| ssh | Secure Shell | 22 | Shell à - distance crypté |
| Simple Mail Transfer - Protocol | 25 | Envoi de mail | |
| pop | Post Office - Protocol | 110 | Récupération de mail |
| imap | Internet Message Access - Protocol | 143 | Synchronisation de mails |
| nslookup | Domain Name - System | 42 | Serveur de noms |
| http | Hyper Text Transfer Protocole | 80 | Web |
Fichier .css séparé
+Fichier style.css:
+
+ a { color: red; }
+
Fichier test.html:
+
+
+
+ â¦
+ ]]><link href="style.css" type="text/css" rel="stylesheet" />
+
+ â¦
+ ]]>
+
Modifications & déploiement aisé
World Wide Web (1/2)
+Syntaxe
+Une propriété CSS est définie en utilisant la + syntaxe: +
+nom_prop : val_prop + ;
-
-
- Service de distribution de page hypertexte -
- Une page hypertexte contient des références - immédiatement accessibles à d'autres pages (pointeurs - ou liens hypertextes) -
- Les pages sont décrites dans le - langage HTML (HyperText Markup Language) -
- Architecture client/serveur:
-
-
-
- Les pages sont stockées sur le serveur -
- Les pages sont envoyées au client (navigateur Web) qui - en assure le rendu -
- Si on utilise l'attribut style d'un
+ élément:
+ color:red;border-style:solid;border:1pt;Lien 1]]> +
- - Utilise le protocole HTTP pour les échanges entre - le client et le serveur +
- Si on utilise un fichier .css ou une feuille de
+ style:
+ a { + color : red; + border-style: solid; + border: 1pt; + } + h1 { /* Le style des titres de niveau 1 */ + text-decoration: underline; + color: green; + } +
Boîtes
World Wide Web (2/2)
-Concepts clé:
+Unités de longueur
+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 doivent comporter une + unité. Les unités reconnues sont:
| URL | localisation d'une page Web (« adresse de - la page ») |
| HTTP | protocole de communication entre un - client et un serveur Web |
| HTML | langage de description des pages - Web |
| px | pixel |
| in | pouce (2,54cm) |
| cm | centimètre |
| mm | millimètre |
| pt | point (1/72 |
| pc | pica (12 points) |
| em | facteur de la largeur d'un caractère de la police + courante |
| ex | facteur de la hauteur d'un caractère « x » + de la police courante |
| % | pourcentage d'une valeur particulière + (définie par propriété) |
| vh | viewport height (% de la + hauteur de la partie visible de la page) |
| vw | viewport + width (% de la largeur de la partie visible de la + page) |
Ãvolutions récentes (Web 2.0, internet mobile, Cloud, â¦)
--
-
- Standardisation du contenu multimédia (images, vidéos et - sons en streaming) -
- Contenu interactif avancé (stockage de fichier coté - client, rendu 3D, â¦) -
- Uniformisation de nombreuses extensions ad-hoc: HTML5 -
Plan
--
-
- Systèmes d'exploitation -
- Réseaux et Internet -
- Le Web
-
-
-
- 3.1 Internet et ses services -
- 3.2 Fonctionnement du Web -
- 3.3 Adressage des documents Web -
- 3.4 Le protocole HTTP -
- 3.5 HTML, le format des documents -
-
Fonctionnement du Web
-
- Boîte
+Chaque élément de la page HTML possède une boîte + rectangulaire qui délimite le contenu de l'élément: +
++ margin (marge)
+ + border (bordure)
+ + padding (ajustement)
+ + Lien 1 + + + + + + â
+ height
â + +
La taille t du contenu est calculée pour que:
+ (height|width) = padding + margin + border + t
+
Côté client
-Le navigateur :
--
-
- Analyse l'URL demandée -
- Obtient l'adresse IP auprès du serveur DNS -
- Ãtablit une connexion (potentiellement sécurisée) avec le serveur -
- Envoie une requête HTTP au serveur -
- Récupère la page envoyée par le serveur dans - sa réponse -
- Analyse la page et récupère les éléments référencés : - images, sons, ⦠-
- Effectue le traitement du code client -
- Met en forme le contenu et l'affiche dans la fenêtre -
Côté serveur
--
-
- Un listener (thread particulier) attend les - connexions sur un port par défaut (80 dans le cas de HTTP) -
- à chaque nouvelle connexion, le listener crée - un thread de traitement et se remet en attente - -
- Le thread de traitement vérifie la validité de la
- requête :
-
-
-
- le document demandé existe ? - -
- le client est autorisé à accéder au document ? - -
- ⦠-
- - Le thread de traitement répond à la requête :
-
-
-
- Exécution de code côté serveur, récupération de - données dans une BD, ⦠- -
- Envoi de la page au client - -
+ - 1 valeur: toutes les dimensions égales à cette + valeur +
- 2 valeurs: haut et bas égal à la première valeur, gauche + et droite égale à la deuxième +
- 3 valeurs: haut à la première valeur, gauche + et droite égale à la deuxième, bas égal à la troisième +
- 4 valeurs: haut, droit, bas, gauche
Marge, bordure, ajustement
+On peut spécifier jusqu'à 4 valeurs:
+Plan
--
-
- Systèmes d'exploitation -
- Réseaux et Internet -
- Le Web
-
-
-
- 3.1 Internet et ses services -
- 3.2 Fonctionnement du Web -
- 3.3 Adressage des documents Web -
- 3.4 Le protocole HTTP -
- 3.5 HTML, le format des documents -
-
span {
+ padding:10pt 20pt 5pt 0pt;
+ margin:10pt 5pt;
+ border-width:3pt;
+ border-color:red blue green;
+ border-style:solid dotted;
+ }
+ Adressage des documents Web (1/3)
+Modes d'affichage
+La propriété display contrôle le mode + d'affichage d'un élément: +
| URL | Uniform Resource Locator - identifie un document sur internet |
| none | l'élément n'est pas dessiné et n'occupe + pas d'espace |
| inline | 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, height et width sont + ignorés (, , , , â¦]]> + sont inline par défaut). |
| block | l'élément est placé seul sur sa
+ ligne. La taille est calculée automatiquement mais peut être
+ modifiée par width et height
+ (, ,, â¦]]> + sont block par défaut) |
| inline-block | positionné comme inline + mais la taille peut être modifiée comme pour block |
Une URL se décompose en 3 partie
-- protocole (comment ?) -
- adresse (où ?) -
- document (quoi ?) -
Syntaxe (simplifiée) :
- protocole://adresse/document
- Exemple :
- http://www.lri.fr/~kn/teach_fr.html
Adressage des documents Web (2/3)
-On peut aussi préciser un numéro - de port, des paramètres - et un emplacement : -
- protocole://adresse:port/document?p1=v1&p2=v2#empl
- Exemple :
- http://www.youtube.com:80/results?search_query=tbbt#search-results
- Le serveur utilise les paramètres passés par le client dans
- l'URL pour calculer le contenu de la page (changer la
- chaîne « tbbt » ci-dessus et essayer)
Modes d'affichage (exemples)
+a { display: inline-block;
+ width: 4em;
+ height: 2em;
+ ⦠}
+ Adressage des documents Web (3/3)
-
- La racine d'un site Web
- (ex: http://www.lri.fr/) correspond
- à un répertoire sur le disque du serveur
- (ex: /var/www). Le fichier
http://www.lri.fr/index.html
- se trouve à l'emplacement
- /var/www/index.html
- Le serveur Web peut aussi effectuer des réécritures - d'adresses :
- http://www.lri.fr/~kn/index.html
- devient
- /home/kn/public_html/index.html
- Plan
--
-
- Systèmes d'exploitation -
- Réseaux et Internet -
- Le Web
-
-
-
- 3.1 Internet et ses services -
- 3.2 Fonctionnement du Web -
- 3.3 Adressage des documents Web -
- 3.4 Le protocole HTTP -
- 3.5 HTML, le format des documents -
-
Positionnement
+Le type de positionnement est donné par la + propriété position
+| static | positionnement « automatique + » |
| fixed | positionnement par rapport à la fenêtre + du navigateur (la boîte est supprimée du flot) |
| relative | positionnement « relatif » par + rapport à la position normale |
| absolute | positionnement « absolu » par rapport + à l'ancêtre le plus proche qui n'est pas static |
Pour fixed, relative et absolute, + les propriétés top, bottom, left + et right dénotent les décalages respectifs. +
Caractéristiques du protocole HTTP
--
-
- Sans connexion permanente:
-
-
-
- Le client se connecte au serveur, envoie sa requête, - se déconnecte -
- Le serveur se connecte au client, envoie sa réponse, - se déconnecte -
- - Indépendant du contenu : permet d'envoyer des documents - (hyper) texte, du son, des images, ⦠-
- Sans état: chaque paire requête/réponse est - indépendante (le serveur ne maintient pas d'information sur le - client entre les requêtes) -
- Protocole en mode texte +
- ⦠â¦]]>
- Positionnement static +
- Positionnement fixed + (right:10pt,top:10pt) +
- Positionnement relative + (left:10pt,bottom:-5pt) +
- Positionnement absolute + (right:10pt,bottom:10pt) +
Positionnement (exemple)
+
+ a { position: static;
+ ⦠}
+ a { position: fixed;
+ right:10pt;
+ top: 10pt;
+ }
+ a { position: relative;
+ left: 10pt;
+ bottom: -5pt;
+ ⦠}
+ a { position:absolute;
+ right:0pt;
+ bottom: 10pt;
+ }
+ +
-
+
Autres propriétés
Format des messages HTTP
-Les messages ont la forme suivante
-- Ligne initiale CR LF -
- zéro ou plusieurs lignes d'option CR LF -
- CR LF -
- Corp du message (document envoyé, paramètres de la - requête, â¦) -
- Requête la première ligne contient un nom - de méthode (GET, POST, HEAD, â¦), le paramètre de la - méthode et la version du protocole -
- Réponse la version du protocole, le code de la - réponse (200, 404, 403, â¦) et un message informatif - +
- par nom + symbolique: red, + blue, + purple, + ⦠+
- en + hexadécimal: #xxyyzz, avec + 00 ⤠xx,yy,zz ⤠ff +
- en + décimal: rgb(x, y, z), + avec 0 ⤠x,y,z ⤠255 +
- en + décimal avec + transparence: rgba(x, y, z, + a), + avec 0 ⤠x,y,z ⤠255 et 0 ⤠a ⤠1 +
Couleurs
+Les couleurs peuvent être données:
+-
+
Démo
-Plan
--
-
- Systèmes d'exploitation -
- Réseaux et Internet -
- Le Web
-
-
-
- 3.1 Internet et ses services -
- 3.2 Fonctionnement du Web -
- 3.3 Adressage des documents Web -
- 3.4 Le protocole HTTP -
- 3.5 HTML, le format des documents -
-
HTML
-
- HyperText Markup Language : langage de mise en forme
- de documents hypertextes (texte + liens vers d'autres
- documents). Développé au CERN en 1989.
- 1991 : premier navigateur en mode texte
- 1993 : premier navigateur graphique (mosaic)
- développé au NCSA (National Center for Supercomputing
- Applications)
-
Propriétés du texte
+Certaines propriétés permettent d'alterer le rendu du texte + d'un élément
+| direction | ltr ou rtl + (orientation du texte) |
| text-transform | capitalize, uppercase, lowercase + |
| text-decoration | underline, overline, line-through |
| text-align | left, right, center, justify |
| text-indent | longueur du retrait de paragraphe |
Document HTML
-- est un document semi-structuré -
- dont la structure est donnée par - des balises -
| Exemple | Rendu par défaut | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| en gras ]]> | Un - texte en gras | ||||||||||||||||||||||||||||||||||||||
Un lien ]]> |
- Un lien | ||||||||||||||||||||||||||||||||||||||
- |
Propriétés de la police+
On dit que ]]> est une balise - ouvrante et ]]> une - balise fermante. On peut - écrire ]]> comme raccourci pour - ]]>. - - -
-
-
+ Historique du langage HTML-
On peut aussi spécifier un descripteur de + police +
+ @font-face {
+ font-family: Toto;
+ src: url(toto.ttf);
+ }
+ a { font-family: Toto; }
+
Selecteurs
-
-XHTML vs HTML-On utilise XHTML dans le cours. Différences avec HTML: -
Les avantages sont les suivants -
Selecteurs+On peut sélectionner finement les éléments auxquels un style + s'applique +
div.foo ul li a:visited { color: red; }
-
-Rôle d'(X)HTML-Séparer la structure du document de - son rendu. La structure donne une sémantique au - document : -
Cela permet au navigateur d'assurer un rendu en fonction de la - sémantique. Il existe différents types de rendus: -
-
-
Exemple de document-(liste des balises - données sur la feuille de TD 4!) -
-
-
-
-
-
- |