Web 2016-03-03
Après nous être intéressé à l'encodage du contenu, nous allons voir comment styler une page HTML.
Sommaire
Une brève histoire d'Internet, suite
Nous allons regarder deux extraits du film 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 CSS Zen Garden est l'un des témoignages les plus visibles.
Critiques
Anatomie d'une règle
selecteurs css
* {
margin: 0;
padding: 0;
font-family: comic;
}
- 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
Stylish est une extension pour Chrome (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 la page Wikipédia sur Ada Lovelace.
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 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 le pad commun.
