Remerciez-le!

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

2 Sommaire Préambule ..........................................................

2 Sommaire Préambule ................................................................................................................................. 5 Introduction au HTML et au CSS .......................................................................................... 8 Définition et utilisation du HTML et du CSS ...................................................................... 15 Histoire et évolution de l’informatique et du web .............................................................. 21 Local, préproduction et production ..................................................................................... 25 Choix et installation de l’éditeur de texte ........................................................................... 27 Éléments, balises et attributs HTML ................................................................................... 31 Structure minimale d’une page HTML valide .................................................................... 35 Enregistrement et affichage d’une page HTML ................................................................ 39 L’indentation et les commentaires en HTML ..................................................................... 41 Titres et paragraphes en HTML .......................................................................................... 46 Espaces et retours à la ligne en HTML .............................................................................. 50 Définir le niveau d’importance des contenus textuels en HTML .................................... 56 Créer des listes en HTML ..................................................................................................... 60 Créer des liens en HTML ..................................................................................................... 71 Envoi de mails et téléchargement de fichiers ................................................................... 84 Compatibilité, support et validation du code ..................................................................... 87 Sélecteurs et propriétés CSS .............................................................................................. 91 Où écrire le code CSS ? ....................................................................................................... 94 Commentaires et indentation en CSS .............................................................................. 100 Sélecteurs CSS simples et combinateurs ....................................................................... 102 Les attributs HTML class et id et les sélecteurs CSS associés ................................... 112 Ordre d’application (cascade) et héritage des règles en CSS ..................................... 121 Les éléments HTML div et span ........................................................................................ 137 Les niveaux ou types d’éléments block et inline............................................................. 145 Notations complètes (longhand) et raccourcies (shorthand) en CSS ......................... 152 La propriété CSS font-family et les Google Fonts .......................................................... 158 Autres propriétés CSS liées à la police ............................................................................ 169 Les propriétés CSS liées au texte ..................................................................................... 187 Gestion des interlignes et des espaces ........................................................................... 198 Gestion de la couleur et de l’opacité des textes ............................................................. 204 Le modèle des boites .......................................................................................................... 230 Largeur (width) et hauteur (height) de la boite de contenu des éléments HTML ...... 233 Gestion des marges internes (« padding ») en CSS ..................................................... 246 Gestion des bordures en CSS ........................................................................................... 252 3 Gestion des marges externes en CSS ............................................................................. 261 La propriété CSS box-sizing .............................................................................................. 273 Créer des bordures arrondies en CSS ............................................................................. 276 Gérer l’affichage des éléments en CSS ........................................................................... 290 Gérer le positionnement des éléments en CSS ............................................................. 304 La propriété CSS float ......................................................................................................... 314 Gestion des conflits entre display, position et float ........................................................ 338 Créer des tableaux en HTML ............................................................................................. 344 Structurer un tableau HTML ............................................................................................... 351 Mettre en forme un tableau HTML .................................................................................... 361 Insérer des images en HTML ............................................................................................ 375 Insérer de l’audio en HTML ................................................................................................ 387 Insérer des vidéos en HTML .............................................................................................. 392 L’élément iframe .................................................................................................................. 401 Gestion de la couleur de fond en CSS ............................................................................. 409 Ajouter des images de fond en CSS ................................................................................ 415 Créer des dégradés linéaires en CSS .............................................................................. 445 Créer des dégradés radiaux en CSS ............................................................................... 459 Ajouter des ombres autour des éléments ........................................................................ 472 Les sélecteurs CSS d’attributs .......................................................................................... 492 Les pseudo-classes CSS ................................................................................................... 503 Les pseudo-éléments CSS ................................................................................................ 513 EXERCICE #1 : Création d’un menu horizontal sticky ............................................ 519 EXERCICE #2 : Création d’un menu déroulant .............................................................. 525 Présentation des formulaires HTML ................................................................................. 530 Les éléments des formulaires ............................................................................................ 539 Attributs des formulaires et sécurité ................................................................................. 547 Créer des transitions en CSS ............................................................................................ 553 Créer des animations en CSS ........................................................................................... 566 Créer des transformations en CSS ................................................................................... 582 EXERCICE #3 : Créer un diaporama en HTML et CSS ................................................ 596 Introduction au modèle des boites flexibles ou flexbox ................................................. 605 Gérer la direction des éléments flexibles (« flex-items ») ............................................. 612 Gérer l’alignement des éléments flexibles ....................................................................... 629 Gérer la taille et la flexibilité des éléments flexibles....................................................... 657 Cas d’utilisation et limites du flexbox ................................................................................ 672 EXERCICE #4 : Création d’un menu flex ........................................................................ 682 4 Introduction au responsive design .................................................................................... 686 La balise meta viewport ...................................................................................................... 691 Les media queries ............................................................................................................... 694 Images responsives ............................................................................................................ 700 EXERCICE #5 : Création d’un menu déroulant responsive ......................................... 705 Sémantique et éléments structurants du HTML ............................................................. 715 EXERCICE #6 : Création d’un site personnel monopage ............................................. 722 Introduction aux grilles CSS ............................................................................................... 743 Créer une grille et définir des pistes ................................................................................. 751 Positionner des éléments dans une grille ........................................................................ 760 Aligner et espacer les éléments de grille ......................................................................... 786 EXERCICE #7 : Création d’une page à 3 colonnes avec des éléments flexibles ..... 811 Évolution du CSS : vers un langage de programmation ? ............................................ 822 Les fonctions CSS ............................................................................................................... 824 Les propriétés personnalisées ou variables CSS ........................................................... 828 Les règles CSS arobase (@) ............................................................................................. 832 Le futur du CSS : imbrication et héritage étendu ? ........................................................ 835 Conclusion du cours ............................................................................................................ 837 5 Préambule De quoi traite ce cours ? Bienvenue à tous dans ce cours complet traitant de deux langages web incontournables : le HTML et CSS. Le HTML et le CSS sont à la fois des langages qu’il convient de maitriser si on envisage une carrière dans le web et qui sont relativement simples à comprendre. Cela en fait donc des langages parfaits pour des débutants en programmation. Nous nous intéresserons dans ce cours aux dernières versions stables de ces langages, à savoir le HTML5 / HTML Living standard et le CSS3 / CSS4. Quels sont les objectifs du cours et à qui s’adresse-t-il ? Les objectifs de ce cours sont avant tout que vous compreniez bien la place et le rôle de ces deux langages puis que vous appreniez à les utiliser. Pour cela, nous allons explorer les grandes fonctionnalités du HTML et du CSS en commençant avec des choses simples et en allant progressivement vers plus de complexité. Ce cours s’adresse ainsi aux débutants puisqu’il est très progressif et que chaque notion est expliquée et illustrée aussi bien qu’aux développeurs possédant déjà un bagage informatique et voulant aller plus loin dans leur maitrise du HTML et du CSS. Notez bien que ce cours n’est pas une liste de définition ou un simple empilage de connaissances. Au contraire, l’idée est que vous compreniez l’intérêt de chaque fonctionnalité ainsi que quand et comment les utiliser et que vous compreniez notamment comment les différents éléments de langages interagissent entre eux. A la fin de ce cours, vous devriez ainsi avoir acquis une certaine autonomie, être capable de créer des structures relativement complexes et devriez pouvoir résoudre par vous- même la plupart des problématiques liées aux langages HTML et CSS. Philosophie du cours (méthodologie / pédagogie) Le domaine de la programmation informatique est un domaine en constante évolution et qui évolue surtout de plus en plus vite. Il est donc essentiel qu’un développeur possède ou acquière des facultés d’adaptation et c’est la raison pour laquelle ce cours a pour but de vous rendre autonome. Pour servir cet objectif, les différentes notions abordées dans ce cours sont illustrées par de nombreux exemples et exercices. Je vous conseille fortement de passer du temps sur chaque exemple et chaque exercice et de ne pas simplement les survoler car c’est comme cela que vous apprendrez le mieux. 6 En effet, en informatique comme dans beaucoup d’autres domaine, la simple lecture théorique n’est souvent pas suffisante pour maitriser complètement un langage. La meilleure façon d’apprendre reste de pratiquer et de se confronter aux difficultés pour acquérir des mécanismes de résolution des problèmes. Ensuite, une fois ce cours terminé, pensez à rester curieux et à vous tenir régulièrement au courant des avancées des langages et surtout continuez à pratiquer régulièrement. Plan du cours Ce cours contient 18 sections qui s’enchainent dans un ordre logique et cohérent. Nous allons commencer par étudier des concepts fondamentaux du HTML et du CSS pour démarrer sur de bonnes bases. Ensuite, nous alternerons entre l’apprentissage de telle fonctionnalité en HTML et de telle autre en CSS. A partir d’un certain point du cours, nous allons commencer à réutiliser des choses vues avant pour construire des projets de plus en plus complexes. Je vous conseille donc vivement de suivre ce cours dans l’ordre donné. 7 8 Introduction au HTML et au CSS Le but de ce premier chapitre est de vous convaincre rapidement de l’importance et de la place particulière du HTML et du CSS parmi l’ensemble des langages informatiques. Nous allons également nous intéresser à la question « pourquoi apprendre à coder » et passer en revue les alternatives existantes à l’apprentissage de la programmation en soulignant les points forts et faibles de chacune d’entre elles. HTML et CSS : deux langages incontournables Il existe aujourd’hui des dizaines et des dizaines de langages informatiques et de programmation différents : HTML, CSS, JavaScript, PHP, Python, Ruby on Rails, C, C#, C++, Java, etc. pour ne citer qu’eux. Certains de ces langages ont des possibilités et des rôles similaires, ce qui signifie qu’ils vont être (dans une certaine mesure) interchangeables : on va pouvoir utiliser un langage ou l’autre pour effectuer une même opération selon notre sensibilité personnelle ou selon l’environnement dans lequel on se trouve. D’autres langages, en revanche, vont être beaucoup plus exclusifs ou ne pas avoir de concurrent et on va donc obligatoirement devoir passer par eux pour effectuer certaines opérations. Cela va être le cas du HTML et du CSS. En effet, le HTML et le CSS sont deux véritables standards en informatique qui n’ont à uploads/Management/ cours-complet-html-et-css-2020.pdf