{"id":901,"date":"2018-04-12T19:21:47","date_gmt":"2018-04-12T17:21:47","guid":{"rendered":"http:\/\/adn56.net\/blog\/?p=901"},"modified":"2018-04-12T19:23:13","modified_gmt":"2018-04-12T17:23:13","slug":"cr-html-css","status":"publish","type":"post","link":"https:\/\/adn56.net\/blog\/index.php\/2018\/04\/12\/cr-html-css\/","title":{"rendered":"CR pr\u00e9sentation HTML & CSS"},"content":{"rendered":"

Nous avons vu mardi soir<\/a> comment \u00e9tait compos\u00e9e une page WEB et d\u00e9couvert les langages HTML<\/strong> et CSS<\/strong>, chacun ayant un r\u00f4le bien distinct. Plus qu’une plong\u00e9e dans le d\u00e9tail de ces langages, nous avons choisi d’aborder les principes, les briques utilis\u00e9es pour b\u00e2tir sa page WEB.<\/p>\n

M\u00e9thodologie<\/h2>\n

HTMLisation d’un texte<\/h3>\n

L’id\u00e9e est de partir d’un simple texte structur\u00e9, en l’occurrence les premiers articles de la D\u00e9claration Universelle de Droits de l’Homme (DUDH pour les intimes) et d’en faire une \u00ab\u00a0jolie\u00a0\u00bb page WEB. Pour ce faire nous avons ouvert ce m\u00eame fichier texte dans un \u00e9diteur, et dans le navigateur.<\/p>\n

Au d\u00e9part, cela se passe tr\u00e8s mal, le navigateur affiche un gros paquet qui a perdu toute structure, les caract\u00e8res sont bizarres…<\/p>\n

\"\"<\/p>\n

Le but sera alors d’ajouter un par un tous les \u00e9l\u00e9ments n\u00e9cessaires pour faire la mise en page HTML. A chaque modification dans l’\u00e9diteur, on enregistre le fichier puis on le recharge dans le navigateur pour voir les effets. On aborde ainsi en douceur le r\u00f4le des balises, de leurs attributs, et des styles.<\/p>\n

Au final on arrive \u00e0 une page WEB valide et \u00ab\u00a0joliment\u00a0\u00bb mise en page \ud83d\ude42<\/p>\n

\"\"<\/p>\n

Analyse d’une page et de son style<\/h3>\n

Nous avons ensuite examin\u00e9 un autre exemple d’une simple page \u00ab\u00a0invitation.html\u00a0\u00bb pr\u00e9sentant l’atelier en question. Pour cette page, j’ai un fichier de style associ\u00e9 dans lequel j’ai tout mis en commentaire, puis on a r\u00e9tabli les styles un par un et discut\u00e9 des effets sur les \u00e9l\u00e9ments de la page, et de la fa\u00e7on dont les \u00e9l\u00e9ments sont affect\u00e9s, \u00ab\u00a0cibl\u00e9s\u00a0\u00bb.<\/p>\n

\"\"<\/a><\/p>\n

Nous avons insist\u00e9 sur une notion essentielle :<\/p>\n