Voir la source de Web 2016-03-03

Après nous être intéressé à l'encodage du contenu, nous allons voir comment styler une page HTML.

== Une brève histoire d'Internet, suite ==

Nous allons regarder deux extraits du film [[Das Netz|Das Netz. Voyage en Cybernetique, Unabomber, le LSD et l'Internet]]

== Accès FTP ==

Pendant la projection de l'extrait du film, je vous donne vos accès pour le compte [[FTP]]

== Introduction aux CSS ==

En préambule:

=== Histoire et intérêt ===

La guerre des navigateurs et le mouvement pour les standards dont [http://www.csszengarden.com/ CSS Zen Garden] est l'un des témoignages les plus visibles.

=== Critiques ===

* [http://www.constantvzw.org/verlag/spip.php?article23 Skeleton Corset Skin]
* [http://archive.constantvzw.org/events/vj9/vj9book.pdf Same Content, Different Messages]

== Anatomie d'une règle ==

[[Fichier:Selecteurs.png]]


selecteurs css

<syntaxhighlight lang="css">
* {
    margin: 0;
    padding: 0;
    font-family: comic;
}
</syntaxhighlight>

* selecteur par nom de balise
* selecteur jocker
* selecteurs par classe
* selecteur par id

== Ressources externes ==

* http://www.w3schools.com/cssref/default.asp
* http://css.mammouthland.net/selecteurs-css-class-id.php
* http://curlybraces.be/wiki/Ressources::CSS
* https://fr.wikibooks.org/wiki/Le_langage_CSS/Les_s%C3%A9lecteurs#Le_s.C3.A9lecteur_de_descendant

== Exercice: ''deface'' un site ==

[https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=fr Stylish] est une extension pour Chrome ([https://addons.mozilla.org/fr/firefox/addon/stylish/ elle existe également pour Firefox]) qui permet d'appliquer des styles personnalisés sur des pages spécifiques.

L'avantage de cette extension par rapport à la méthode utilisant l'inspecteur que nous avons utilisé en cours est que les styles sont persistants (ils continuent de s'appliquer à la page même après son rafraîchissement).

L'exemple ci-dessous masque tout le contenu à l'exception des liens sur [https://fr.wikipedia.org/wiki/Ada_Lovelace la page Wikipédia sur Ada Lovelace].

[[Fichier:Capture d'écran de 2016-03-24 15-16-37.png|300px]]

[[Fichier:Capture d'écran de 2016-03-24 15-17-38.png|300px]]

L'exercice consiste à effectuer une intervention artistique simple. Pour cela, vous devez écrire une feuille de style personnalisée et l'appliquer l'aide de l'extension [https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=fr Stylish] sur une page ou un site de votre choix. Le code [[CSS]] de cette intervention est à déposer sur votre compte [[FTP]] dans un fichier texte, accompagné d'une courte description de votre intention et de deux captures d'écran: une de la page originale et une de la page modifiée.

Durant le cours, nous avons gardé une trace de nos expérimentations sur [http://piratepad.net/selecteurs-css le pad commun].

[[Fichier:Capture_d%27%C3%A9cran_de_2016-04-14_15-26-52.png|300px]]

=== Liens externes ===

* http://stdin.fr/Bazar/UserCSS