Web 2016-03-03 : Différence entre versions

Version actuelle en date du 6 mai 2019 à 21:57

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. 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

• Skeleton Corset Skin
• Same Content, Different Messages

Anatomie d'une règle

Fichier:Selecteurs.png

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.

300px

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 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.

300px

Liens externes

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