Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Concevez votre Site Web avec HTML5 et CSS3 Stanislas Michalak Version du 11 déc

Concevez votre Site Web avec HTML5 et CSS3 Stanislas Michalak Version du 11 décembre 2010 Préface Bonjour à toutes et à tous ! Il n’est jamais facile d’écrire une préface, une introduction. Le plus souvent cette partie est lâchement délaissée par les lecteurs pressés, ou est source d’ennui pour la plupart. J’ai longuement hésité entre les différents choix qui s’offraient à moi. Raconter ma vie et noyer le lecteur dans un baratin incompréhensible, déblatérer sur une vision du web ou perdre mes lecteurs dans des mots compliqués qui n’ont d’intérêt que de faire sourire l’auteur pour son sadisme décidément constant. Aussi je vais tâcher de vous expliquer clairement ce que nous allons faire tout au long de ce cours et pourquoi avoir choisi de vous enseigner cette méthode de conception plutôt qu’une autre. Les objectifs Tout d’abord, étudions les buts de la pédagogie que vous allez vous efforcer de suivre 1. Le plus évident est la conception d’un site web, mais savez-vous pourtant ce que c’est ? En voici la déﬁnition tirée du nouveau Petit Robert de la langue française 2010 : Site Web inform. Serveur de données auquel on accède par un réseau (notamment Internet). En clair, c’est un ordinateur qui tourne en continu et qui est chargé d’envoyer les données qu’il contient. Par abus de langage, c’est le terme que l’on utilise pour désigner les données de cet ordinateur. Un site web, c’est donc un ensemble de données structu- rées aboutissant à un ou plusieurs documents appelés pages web. Celles-ci se chargent 1. Et si ça ne vous plaît pas c’est le même prix. ii iii de contenir ce qui est visible par l’utilisateur lorsqu’il demande la page concernée à son navigateur. Ici notre but et d’apprendre à concevoir ces pages. On en distingue principalement deux types (pour la structuration uniquement) : html ou css (ceux-ci désignant les deux langages utilisés dans ces pages). Nous allons donc au ﬁnal apprendre et apprendre à utiliser deux langages qui permettent d’aboutir à n’importe quel site web. Vous pourrez ainsi créer un site tel que vous l’avez imaginé, avec un minimum de contraintes. Nous en venons ainsi à ma deuxième partie : pourquoi ces deux langages ? Pourquoi HTML et CSS ? Puisque les choix sont à la mode, il est temps d’expliquer pourquoi celui-ci. On peut trouver plusieurs méthodes qui aboutissent à un site web, allant de la page sur Facebook au site web professionnel, tout en passant par le blog ou le logiciel de créa- tion. Toutefois, ces différentes options ont la fâcheuse tendance à limiter les libertés de création, ce que j’ai personnellement en horreur. HTML et CSS sont le choix qui m’a le plus convenu puisque c’est celui que j’uti- lise tous les jours pour mes projets web personnels, que l’on est pas dépendant d’une structure amenée à disparaître (telle une entreprise) car ce sont des langages libres et que tout vos projets de sites sont en théorie réalisables. Vous voilà donc ﬁn prêt(e) pour démarrer cette aventure alors après ce petit apéritif, que diriez-vous de commencer ? Bonne lecture ! iv Première partie Les bases, rien que les bases 1 Chapitre 1 HTML, qu’est-ce que c’est ? Bienvenue dans ce tout premier chapitre. Avant d’entrer dans le vif du sujet, j’ai pensé que vous présenter les outils que nous allons étudier ne serait pas de trop. On apprend rarement une langue sans étudier la culture qui en découle. Loin de moi l’idée de vous faire un cour d’histoire, qui vous ennuirait plus qu’autre chose, mais voyez cela comme un apéritif qui vous permettra de faire grande impression devant tous vos amis. 1.1 Un peu d’histoire Dans les années 90 fut inventé Internet, un réseau mondial facilitant les échanges de données entre scientiﬁques et entre militaires à travers le monde. Le seul souci, c’est que le système d’échange était très complexe, réservé aux initiés et ses utilisateurs se trouvaient déroutés devant la complexité de communiquer sur un réseau créé à la base pour faciliter leurs échanges. C’est dans cette optique que deux membres de l’équipe du CERN 1 —Tim Berners- Lee et Robert Cailliau— ont créé le HTML. FIGURE 1.1 – Tim Berners-Lee et Robert Cailliau Le HTML, les adresses web et le protocole HTTP 2, tout trois inventés par ces deux compères sont la base du World Wide Web. On retrouve tous ces attributs sur 1. Centre Européen de Recherche Nucléaire 2. Hypertext Transfer Protocol 2 1.1. UN PEU D’HISTOIRE 3 toute page web qui se respecte (d’où, entre autres l’adresse web commençant par « http ://www »). Le premier navigateur Web a ainsi fait son apparition : Mosaic. Celui-ci a tout de suite rencontré un grand succès. En parallèle, de nombreuses entreprises ont commencé à trouver le réseau attractif et à l’utiliser comme moyen de communication. Seulement, la base du HTML s’est vite avérée insufﬁsante et ces entreprises ne voulaient pas aban- donner ce nouvel outil. Elles se sont ainsi mises à inventer des balises personnelles, en ne s’orientant que vers leurs propres besoins, jusqu’à ce que ce soit de nouveau la confusion. FIGURE 1.2 – Mosaic, le premier navigateur Web À partir de ce moment, les professionels du Web ont compris que sans normes internationales, ils ne parviendraient jamais à un langage commun. C’est ainsi que ces professionnels ont formé l’IETF 1 dans le but de trier cette profusion de balises aﬁn de proposer une norme commune aﬁn de donner la possibilité à tous d’écrire et de lire des pages web. Ils donnèrent naissance à HTML 2.0, la deuxième version du HTML. Comme l’accord n’était pas global, les entreprises ont continué à inventer des ba- lises personnelles, tout en utilisant la nouvelle version d’HTML. Un nouveau groupe de professionnels du Web, le W3C 2, dirigé par Tim Berners-Lee 3, fut créé dans le but de développer les possibilités du Web et de de protéger les droits et la liberté de ses usagers. De ce groupe naquit en 1997 deux nouvelles versions revues du HTML et en- ﬁn acceptées par tous : HTML 3.2, puis son successeur HTML 4.0. C’est cette dernière version qui a introduit la notion de pages dynamiques. S’en est suivi plusieurs versions basées sur le langage XML 4 qui a permit à HTML de gagner en souplesse. Aujourd’hui, deux standards sont en développement : HTML 5 et xHTML 2.0, l’un soutenu par les développeurs de navigateurs, l’autre par le W3C. 1. Internet Engeneering Task Force 2. World Wide Web Consortium 3. Et oui, encore lui ! 4. eXtensible Markup Langage Chapitre 2 Panoplie du développeur Vouloir faire des sites web ne fait pas tout, encore faut-il avoir les bons outils... Seulement voilà, inutile de courir à la quincaillerie avant qu’elle ferme, vous pouvez les acquérir gratuitement et en restant assis confortablement sur votre fauteuil. Magniﬁque, vous ne trouvez pas ? 2.1 Des yeux pour voir Ce premier outil 1 se trouve déjà sur votre ordinateur 2 et vous servira d’yeux pour contrôler votre futur travail. Son petit nom : le navigateur web. Microsoft Internet ex- plorer, Mozilla Firefox, Opera, Google chrome et leurs collègues, ça ne vous dit rien ? FIGURE 2.1 – Un navigateur web : Mozilla Firefox La fonction première d’un navigateur web est... de naviguer sur le web. En d’autres termes, cet outil permet de visualiser des pages web en convertissant le code source 3 1. Puisqu’il y en a un second... 2. Enﬁn, normalement. 3. Le code source est ce qui est à la source d’un programme ou d’une page web. C’est une série d’ins- tructions permettant à votre navigateur d’afﬁcher du texte formaté et stylisé. 4 2.2. UN ÉDITEUR POUR... EUH... ÉDITER ? 5 en un résultat que l’on appelle communément une page web. En réalité, ces deux pages sont une seule et même page, l’une étant la source, l’autre le résultat formaté après un passage à la moulinette. FIGURE 2.2 – Une page web prise tout à fait au hasard et une partie de son code source. Sachez à l’avenir que l’on peut afﬁcher le code source d’une page web, ce qui est utile en débogage 1. Sous Mozilla Firefox par exemple, le raccourci clavier est Ctrl + u. Pour les autres, cherchez par vous-mêmes. Cet outil va donc nous être très utile pour visualiser vos exercices. 2.2 Un éditeur pour... euh... éditer ? Le deuxième et dernier outil dont vous aurez besoin est nécessaire à tout langage de programmation : un éditeur. Tout comme pour écrire français il faut une feuille de papier et un crayon 2, l’éditeur permet d’écrire le code source des pages web. En plus vous avez de la chance, la gomme est fournie. Il faut donc choisir... ou pas. Au fait, l’éditeur de votre système d’exploitation peut très bien sufﬁre. Néanmoins, je me suis permis de vous dresser une petite liste des édi- teurs 3 que je juge viables pour ce cours aﬁn de faciliter vos recherches. Ce serait idiot de ne pas pouvoir suivre ce cours si vous ne uploads/Ingenierie_Lourd/ cours-html5-amp-css3.pdf