User Tools
2016_2017:s1:webdoc:td2
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
2016_2017:s1:webdoc:td2 [2016/10/18 11:26] logre [Mise en Pratique] |
2016_2017:s1:webdoc:td2 [2016/11/09 16:11] (current) logre [Mise en Pratique] |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| ** Toutes les questions du TD sont à répondre dans un document .html validé qui contiendra les noms et prénoms du binome ** | ** Toutes les questions du TD sont à répondre dans un document .html validé qui contiendra les noms et prénoms du binome ** | ||
| + | |||
| + | __**Disclaimer**__ | ||
| + | |||
| + | Même si nous adressons ici des problématiques d'affichage et de style, ce module n'a pas la prétention de faire de vous des designers. | ||
| + | Veillez à vous concentrer sur la technique et non pas sur la beauté relative de vos oeuvres. | ||
| + | |||
| + | [[http://www.i3s.unice.fr/~logre/docs/divers/ET.gif|Les gouts et les couleurs...]] | ||
| Line 59: | Line 66: | ||
| Vous pouvez choisir d'utiliser : | Vous pouvez choisir d'utiliser : | ||
| - | * un nom standard de couleur (voir http://www.w3schools.com/cssref/css_colornames.asp) | + | * un nom standard de couleur (voir [[http://www.w3schools.com/colors/colors_names.asp|le site du W3C]]) |
| * de donner les couleurs sous la forme ''rgb'' qui offre alors un large choix de couleurs en combinant le rouge, le vert et le bleu | * de donner les couleurs sous la forme ''rgb'' qui offre alors un large choix de couleurs en combinant le rouge, le vert et le bleu | ||
| * de référencer une couleur par son code [[http://www.color-hex.com/|hexadécimal]] | * de référencer une couleur par son code [[http://www.color-hex.com/|hexadécimal]] | ||
| Line 92: | Line 99: | ||
| <box round rgb(185,211,238) 95%|**A Faire :** > | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
| - | * {{:2016_2017:s1:webdoc:gardencss0.html.zip|Visualiser ce fichier avec un navigateur}} | + | * Visualiser {{:2016_2017:s1:webdoc:gardencss0.html.zip|ce fichier}} avec un navigateur |
| - | * Vérifiez la [[http://validator.w3.org/check|validité]] du document. Votre objectif est de le rendre valide en séparant contenu et présentation. | + | * Vérifiez la [[https://validator.w3.org/#validate-by-upload|validité]] du document. Votre objectif est de le rendre valide en séparant contenu et présentation. |
| - | * Recopier le fichier sous ''gardenWithCss.html'' puis séparer le style dans un fichier css; | + | * Recopier le fichier sous ''gardenWithoutCss.html'' puis séparer le style dans un fichier css. |
| - | * [[http://jigsaw.w3.org/css-validator|Validez votre fichier css]] | + | * [[http://jigsaw.w3.org/css-validator|Validez]] votre fichier css. |
| * Conseil : | * Conseil : | ||
| - vérifiez la validité de votre fichier css | - vérifiez la validité de votre fichier css | ||
| Line 102: | Line 109: | ||
| - vérifiez la validité | - vérifiez la validité | ||
| - itérez | - itérez | ||
| - | * Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial. | + | * Validez votre nouveau fichier html ''gardenWithoutCss.html'' résultant, il doit être conforme au fichier initial. |
| </box> | </box> | ||
| Line 116: | Line 123: | ||
| | Couleur du texte | color: | | | Couleur du texte | color: | | ||
| | Texte en gras | font-weight:bold; | | | Texte en gras | font-weight:bold; | | ||
| - | | Texte en italique | font-weight:italic; | | + | | Texte en italique | font-style:italic; | |
| + | | Texte souligné | text-decoration:underline; | | ||
| | Couleur de fond | background-color: | | | Couleur de fond | background-color: | | ||
| </note> | </note> | ||
| Line 141: | Line 149: | ||
| <box round rgb(185,211,238) 95%|**A Faire :** > | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
| - | * Sauvegarder les fichiers html et css réalisés à l'exercice précédent sous ''gardenWithCss1.html'' et ''style1.css'' | + | * Modifier la nouvelle feuille de style de l'exercice précédent pour que tous les titres s'écrivent dans la fonte : "Comic Sans MS", cursive, sans-serif |
| - | * Modifier votre nouvelle feuille de style pour que tous les titres s'écrivent dans la fonte : "Comic Sans MS", cursive, sans-serif | + | |
| * Que se passe-t-il si vous ne modifiez pas vos définitions de styles pour h1 et h3 ? | * Que se passe-t-il si vous ne modifiez pas vos définitions de styles pour h1 et h3 ? | ||
| </box> | </box> | ||
| Line 217: | Line 224: | ||
| - | <box round rgb(185,211,238) rgb(220,226,255) 97%|A Faire : > | + | <box round rgb(185,211,238) 97%|**A Faire :** > |
| - | Nous voulons ajouter dans le texte précédent différentes citations. | + | Nous voulons ajouter quelques citations sur notre site perso. |
| - | Voici le code html ajouté : | + | Voici quelques exemples pour les moins éclairés : |
| <code html> | <code html> | ||
| <h2> Citations </h2> | <h2> Citations </h2> | ||
| <q>Programs must be written for people to read, and only incidentally for machines to execute.</q> | <q>Programs must be written for people to read, and only incidentally for machines to execute.</q> | ||
| - | <adress>Harold Abelson</adress> | + | <address>Harold Abelson</address> |
| <q>Any sufficiently advanced technology is equivalent to magic.</q> | <q>Any sufficiently advanced technology is equivalent to magic.</q> | ||
| - | <adress>Sir Arthur C. Clarke</adress> | + | <address>Sir Arthur C. Clarke</address> |
| <q>The real danger is not that computers will begin to think like men, but that men will begin to think like computers.</q> | <q>The real danger is not that computers will begin to think like men, but that men will begin to think like computers.</q> | ||
| - | <adress>Sydney J. Harris</adress> | + | <address>Sydney J. Harris</address> |
| <q>Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter.</q> | <q>Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter.</q> | ||
| - | <adress>Edsger Dijkstra</adress> | + | <address>Edsger Dijkstra</address> |
| </code> | </code> | ||
| Remarquez les balises html5 utilisées; ([[http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/|en savoir plus]]). | Remarquez les balises html5 utilisées; ([[http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/|en savoir plus]]). | ||
| - | + | La visualisation par défaut n'est pas satisfaisante. Modifier le fichier de style pour répondre aux critères suivants. Indice : [[http://www.w3schools.com/cssref/sel_after.asp|"after"]]. | |
| - | * Nous obtenons la visualisation suivante qui ne nous plaît pas. | + | * toutes les citations soient en **gras**, les auteurs en //italique// |
| - | {{ :2013_2014:s1:docweb:css:citations.png?800& |}} | + | * les citations en français sont en violet et suivie de //par// |
| - | * Modifier le fichier html en ajoutant uniquement des indications pour le fichier de style et le fichier de style pour que | + | * les citations en anglais sont en vert et suivie de //by// |
| - | * toutes les citations soient en gras | + | * j'ai une préférence pour une des citations, je voudrais la faire apparaître en rouge, que proposez-vous ? |
| - | * les citations en français sont en "blue" et suivie de //par// Vous pourrez utiliser [[http://www.w3schools.com/cssref/sel_after.asp|le sélecteur "after"]]. | + | |
| - | * les citations en anglais sont en "aqua" et suivie de //by// | + | |
| - | * [[http://www.w3schools.com/html/html_colornames.asp|en savoir plus sur les noms de couleurs]] | + | |
| - | * [[http://www.w3schools.com/cssref/pr_class_display.asp|en savoir plus sur les formes d'affichages]] | + | |
| - | * Attention, nous perdons le guillemet fermant... une idée? | + | |
| - | + | ||
| - | {{ :2013_2014:s1:docweb:css:citations1.png?800& |Nouvelle visualisation qui étonnamment nous satisfait!!}} | + | |
| - | + | ||
| - | * J'ai une préférence pour une des citations. Je voudrais la faire apparaître en rouge sans donner d'informations de présentation dans la page html. Que proposez-vous ? | + | |
| - | * Je réalise que les couleurs choisies pour les citations sont particulièrement moches, quel code modifiez vous ou donnez vous à un designer pour modification? | + | |
| </box> | </box> | ||
2016_2017/s1/webdoc/td2.1476782816.txt.gz · Last modified: 2016/10/18 11:26 by logre
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
