Remerciez-le!

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

Lecon html, et css Partie 1 : Les bases de HTML5 58/249 Maintenant que vous con

Lecon html, et css Partie 1 : Les bases de HTML5 58/249 Maintenant que vous connaissez les bases du HTML donnez du style à votre page grâce au CSS ! Mettre en place le CSS Après avoir passé toute une première partie du cours à ne travailler que sur le HTML, no us allons maintenant découvrir le CSS que j'avais volontairement mis à l'écart. Le CSS n'est pas plus compliqué que le HTML. Il vient le compléter pour vous aider à mettre en forme votre page web. Dans ce premier chapitre sur le CSS, nous allons voir la théorie sur le CSS : qu'est-ce q ue c'est ? À quoi cela ressemble-t-il ? Où est-ce qu'on écrit du code CSS ? Ces aspects théoriques ne sont pas bien compliqués m ais vous devez obligatoirement les connaître car c'est la base du CSS. C'est d'ailleurs la seule chose que je vous demander ai de retenir par cœur en CSS, vous pourrez retrouver le reste dans le mémo en annexe. Allez, ne traînons pas, je vois que vous brûlez d'impatience ! Je vous avais avertis dès le début de ce cours : nous allons apprendre deux langages. N ous avons déjà bien entamé notre découverte du HTML, même s'il reste encore de nombreuses choses à apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intéresser au CSS. CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML. Vous vous souvenez de son rôle ? Gérer la mise en forme de votre site. CSS ? C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de sélectionner la police utilisée sur votre site. Lui encore qui permet de définir la taille du texte, les bordures, le fond… Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visibl e, etc. Souvenez-vous de ce petit comparatif que nous avions vu dès le premier chapitre (figure suivante). Partie 2 : Les joies de la mise en forme avec CSS 59/249 La même page HTML, sans et avec CSS () Grâce au HTML, nous avons pu rédiger le contenu de notre site mais il est brut de décoff rage. Le CSS vient compléter ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite. Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement qu e le langage HTML. Le HTML est né en 1991 et CSS en 1996. Alors, vous vous dites sûrement : comment fai sait-on la mise en forme de 1991 à 1996 ? Eh bien, uniquement en HTML ! Il y avait en effet des balises HTML dédiées à la mise en forme. <font color="#aab1c3">, par exemple, permettait de définir la couleur du texte. Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plu s en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en pl us complexe. C'est pour cela que l'on a créé le langage CSS. Cependant, le CSS n'a pas été adopté immédiatement par les webmasters, loin de là. Il f allait se défaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web ave c des balises HTML de mise en forme, anciennes et obsolètes, comme ! Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait quatre version s importantes de CSS : CSS 1 ; CSS 2.0 ; CSS 2.1 ; CSS 3. Partie 2 : Les joies de la mise en forme avec CSS 60/249 En fait, la version CSS 3 n'est pas encore totalement finalisée (ce n'est pas encore une v ersion officielle). Cependant, elle est bien avancée et aujourd'hui déjà bien prise en charge par de nombreux navigate urs, ce qui fait qu'on peut déjà s'en servir. Il serait dommage de passer à côté car CSS 3 apporte de nombreuses fonctionnalités à CSS (leur nombre double par rapport à CSS 2.1 !). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et complète la plupart des fonctionnalités de CSS 2.1. Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code C SS et comprendre comment afficher la page. Au début des années 2000, Internet Explorer était le navigateur le plus répandu mais sa gestion du CSS est longtemps restée assez médiocre (pour ne pas dire carrément mauvaise). C'était la grande époque de la v ersion 6 (IE6), hélas encore utilisée aujourd'hui par une petite partie des internautes (heureusement, cette proportion tend à diminuer). Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safa ri. Cela a incité Microsoft à réagir et publier (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9. On parle déjà de IE 10. Bon, ton cours d'histoire, c'est bien joli mais en quoi cela me concerne-t-il aujourd'hui ? Que faut-il retenir de tout cela ? Que les navigateurs ne connaissent pas toutes les propr iétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS. Je vais vous présenter dans ce cours un certain nombre de fonctionnalités de CSS qui n e marchent pas forcément sur les navigateurs les plus vieux. Je ne peux pas l'éviter, c'est comme cela : aucun navigateur ne connaît parfaitement toutes les fonctionnalités CSS de toute façon ! Au pire, si le navigateur ne connaît pas une propriét é CSS, il l'ignore et ne met pas en forme, mais cela ne fait pas planter votre page : celle-ci sera donc toujours lisible. Je vous recommande fortement de mettre dans vos favoris les sites et qui proposent de s tables de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs (et sur leurs différentes versions). Regardez en particulier les tables de compatibilité pour CSS de (figure suivante). Table de compatibilité CSS Table de compatibilité CSS de Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents : dans un fichier .css (méthode la plus recommandée) ; dans l'en-tête du fichier HTML ; directement dans les balises du fichier HTML via un attribut style (méthode la moins reco mmandée). Je vais vous présenter ces trois méthodes mais sachez d'ores et déjà que la première… est la meilleure. Partie 2 : Les joies de la mise en forme avec CSS 61/249 Comme je viens de vous le dire, on écrit le plus souvent le code CSS dans un fichier spé cial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus prati que et la plus souple. Cela nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique dans toute la suite de ce cours. Commençons à pratiquer dès maintenant ! Nous allons partir du fichier HTML suivant : Code : HTML <meta charset="utf-8" /> <link rel="stylesheet" href="" /> Premiers tests du CSS Mon super site Bonjour et bienvenue sur mon site ! Pour le moment, mon site est un peu vide. Patientez encore un peu ! Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="" /> : c'est elle qui indi que que ce fichier HTML est associé à un fichier appelé et chargé de la mise en forme. Enregistrez ce fichier sous le nom que vous voulez (par exemple ). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée. Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Note pad++) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut dire) : Code : CSS p { color: blue; } Pour activer la coloration du code dans Notepad++, passez par les menus Langage > C > CSS. Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme . Placez ce fi chier .css dans le même dossier que votre fichier .html. Dans Notepad++, vous devriez observer quelque chose de similaire à la figure suivante. Partie 2 : Les joies de la mise en forme avec CSS 62/249 Fichiers HTML et CSS dans Notepad++ Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté le .html, de l'autre le .css, comme à la figure suivante. Fichiers HTML et CSS dans l'explorateur de fichiers Partie 2 : Les joies de la mise en forme avec CSS 63/249 Ouvrez maintenant votre fichier dans votre navigateur pour uploads/s3/ lecon-html-et-css.pdf