~~ODT~~ ====== Cours Xhtml+Css : 4 séances de 3h ====== ===== Séance 1 ===== ==== Histoire, contexte ==== * Qu'est-ce que le web ? -> Une application d'Internet * [[wp>fr:Internet|Internet]] ? Réseau des réseaux. 1962 : premières recherches, 1972 : TCP/IP, le courrier électronique * Le Web ou [[wp>fr:World Wide Web|World Wide Web]] (WWW) (Littéralement "La toile d'araignée"). html (1991, Tim-Berbers Lee). CSS (1994, W3C=WWW Consortium). XHTML 1.0 (2000, W3C). HTML5 (2012, W3C). * [[wp>fr:Navigateur Web|Navigateur Web]] (en anglais Browser, littéralement Butineur) , Mosaic (1992, NCSA), Netscape, Internet Explorer, Mozilla Firefox, Safari, Opera, Chrome. * [[wp>fr:Javascript|Javascript]] (1995, Netscape), [[wp>fr:Php|PHP]] (1995, Rasmus Lerdorf), [[wp>fr:Adobe Flash|Flash]] (1996, Macromedia), ... ==== XHTML et CSS ==== * Spécialisation de [[wp>fr:XML|XML]] (eXtensible Markup Language) * HT = [[wp>fr:Hypertexte|Hypertexte]] (1965, Douglas Engelbart). Un texte avec des Hyperliens. * Interopérabilité et accessibilité : Dissociation du contenu (porteur de sens) ([[wp>fr:HTML|HTML]]) et de la présentation ([[wp>fr:Feuilles de style en cascade|CSS]]). "Google est l'aveugle le plus célèbre du monde". * Code informatique dans des fichiers textes * Il existe des éditeurs "presse-bouton" (Dreamweaver, LibreOffice, Kompozer, etc...) * Un informaticien doit savoir coder/retoucher "à la main" avec un éditeur de texte utilisant la coloration syntaxique (gedit, notepad++, vim, kate, emacs,...) * Les moteurs de recherche sont tes amis ==== Exercices complémentaires ==== Recopiez la page suivante et tentez de reproduire les mise en forme suivantes : {{:cours:fixe-fixe-fixe.png?500|}} {{:cours:fluide-fixe-fixe.png?500|}} 3 colonnes

MODELE DE PAGE CSS - 3 COLONNES

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, aliquam erat volutpat. Ut wisi enim ad minim veniam. Duis autem vel eum iriure dolor molestie consequat, vel illum et accumsan.

 ===== Séance 2 ===== ===== Séances 3 et 4 ===== ===== Liens ===== ==== Officiel (W3C) ==== * [[http://www.w3.org/TR/xhtml1/|XHTML]] * [[http://www.w3.org/TR/CSS/|CSS]] * [[http://www.w3.org/Translations/WCAG20-fr/|Guide de Règles d'accessibilité (WCAG)]] * [[http://www.w3.org/Style/Examples/007/units|Les unités CSS]] ==== Autres sites ==== * [[http://openweb.eu.org/| Openweb : Les standards du web]] * [[http://www.alsacreations.com/tutoriels/|Alsacréations]] * [[http://www.siteduzero.com/|Le site du zéro : Tutoriels de programmation]] * [[http://www.w3schools.com/html/html_xhtml.asp|W3Schools]] * [[http://css.webyo.net/|Mises en page xhtml+css]] ==== Outils ==== * [[http://jigsaw.w3.org/css-validator/|Validation de code CSS]] * [[http://validator.w3.org/|Validation de code XHTML]] * Le menu "Développeur Web" de Firefox * [[https://addons.mozilla.org/fr/firefox/addon/web-developer/|Extension Firefox Webdeveloper pour faciliter le développement xhtml et css]] * [[https://addons.mozilla.org/fr/firefox/addon/firebug/|Extension Firefox Firebug indispensable pour déboguer ses pages]] * {{:css_cheat_sheet.pdf|Aide mémoire CSS}} * [[http://www.w3schools.com/cssref/css_colornames.asp|Les couleurs CSS nommées]] ==== Pour aller plus loin ==== * [[http://www.w3.org/html/wg/drafts/html/master/|HTML5 (W3C)]] * [[wp>fr:Responsive Web Design|Conception de sites web adaptatifs]] * [[http://responsive.victorcoulon.fr/|Un raccourci actif pour tester son site en adaptatif]]