Remerciez-le!

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

Classe de 2nde ICN Apprendre à coder en HTML - CSS Table des matières 1. Introd

Classe de 2nde ICN Apprendre à coder en HTML - CSS Table des matières 1. Introduction......................................................................................................................................4 2. Les bases en HTML et CSS..............................................................................................................4 2.1. Les bases du HTML..................................................................................................................4 2.1.1. Éléments, balises et attributs.............................................................................................4 2.1.2. Structure de base d’une page en HTML5.........................................................................6 2.1.3. Afficher un document en HTML5 dans le navigateur......................................................7 2.1.4. Bonnes pratiques, règles et commentaires........................................................................7 2.1.5. Les éléments Heading, Paragraph et Break.....................................................................10 2.1.6. Les éléments Strong, Emphasis et Mark.........................................................................11 2.1.7. Listes ordonnées et non-ordonnées.................................................................................12 2.1.8. Listes de définitions........................................................................................................14 2.1.9. Listes imbriquées............................................................................................................14 2.1.10. Liens internes et liens externes.....................................................................................15 2.1.11. Les autres types courants de liens.................................................................................18 2.1.12. Validation et compatibilité entre navigateurs................................................................20 2.2. Les bases du CSS....................................................................................................................20 2.2.1. Sélecteurs, propriétés et valeurs......................................................................................20 2.2.2. Où écrire le CSS ?...........................................................................................................21 2.2.3. Les commentaires en CSS...............................................................................................23 2.2.4. Sélecteurs simples et limitations.....................................................................................23 2.2.5. Les éléments div et span.................................................................................................25 2.2.6. Les éléments de type block et inline...............................................................................26 2.2.7. Les sélecteurs avancés.....................................................................................................27 2.2.8. La notion d’héritage........................................................................................................27 3. Formater du Texte & Positionner des Éléments.............................................................................28 3.1. Les Propriétés de Type « Font- »............................................................................................28 3.1.1. La propriété font-size......................................................................................................28 3.1.2. La propriété font-style.....................................................................................................29 3.1.3. La propriété font-weight.................................................................................................30 3.1.4. La propriété line-height...................................................................................................31 3.1.5. La propriété font-family..................................................................................................31 3.1.6. Les « web safe fonts ».....................................................................................................32 3.1.7. La propriété color............................................................................................................32 3.1.8. L’opacité d’un texte.........................................................................................................34 3.2. Les Propriétés de Type « Text- »............................................................................................35 3.2.1. L’alignement d’un texte..................................................................................................35 3.2.2. La propriété text-decoration............................................................................................36 3.2.3. La propriété text-indent...................................................................................................36 3.2.4. La propriété text-transform.............................................................................................37 3.2.5. Les propriétés letter-spacing et word-spacing.................................................................37 1-html_css.odt 1 Classe de 2nde ICN 3.2.6. Les ombres des textes.....................................................................................................38 3.3. Le Modèle des Boîtes.............................................................................................................38 3.3.1. Hauteur et largeur d’un élément......................................................................................39 3.3.2. Les bordures et les bordures arrondies............................................................................40 3.3.3. Les marges intérieures.....................................................................................................41 3.3.4. Les marges extérieures....................................................................................................42 3.3.5. Les ombres des boîtes.....................................................................................................43 3.3.6. Faire flotter un élément...................................................................................................44 3.3.7. La propriété display........................................................................................................46 3.3.8. La propriété position.......................................................................................................47 3.3.9. Le z-index.......................................................................................................................48 3.3.10. Notations long-hand et short-hand................................................................................49 4. Fonctionnalités Avancées...............................................................................................................50 4.1. Gestion du Background..........................................................................................................50 4.1.1. Ajouter de la couleur ou une image pour le fond............................................................50 4.1.2. Position et répétition du fond..........................................................................................53 4.1.3. Fixer le fond ou le faire défiler avec la page...................................................................55 4.1.4. Insérer plusieurs images de fond.....................................................................................56 4.1.5. Créer un fond en dégradé................................................................................................57 4.1.6. Les dégradés de type linéaire..........................................................................................58 4.1.7. Les dégradés de type radial.............................................................................................59 4.2. Intégrer des Images, de l’Audio et de la Vidéo.......................................................................61 4.2.1. Insérer une image............................................................................................................61 4.2.2. Ajuster et positionner une image.....................................................................................62 4.2.3. Insérer de l’Audio...........................................................................................................64 4.2.4. Insérer de la Vidéo..........................................................................................................66 4.2.5. Les Éléments Figure et Figcaption..................................................................................68 4.3. Les Tableaux...........................................................................................................................68 4.3.1. Création d’un tableau simple..........................................................................................68 4.3.2. Mise en forme d’un tableau.............................................................................................69 4.3.3. Construire un tableau structuré.......................................................................................71 4.3.4. Combiner des cellules.....................................................................................................72 4.4. Les Formulaires......................................................................................................................73 4.4.1. Introduction aux formulaires...........................................................................................73 4.4.2. Créer le squelette d'un formulaire...................................................................................73 4.4.3. Créer un formulaire simple.............................................................................................74 4.4.4. Saisie d'un champ email ou url.......................................................................................76 4.4.5. Créer une zone de saisie multi-lignes..............................................................................76 4.4.6. Cases à cocher, zones d’options et listes.........................................................................77 4.4.7. Finaliser et envoyer un formulaire..................................................................................79 5. Aller plus loin.................................................................................................................................82 5.1. Le responsive design...............................................................................................................82 5.2. Les pseudo-classes en css.......................................................................................................84 5.3. Les pesudo-elements en css....................................................................................................86 5.4. Les éléments structurants du HTML5....................................................................................87 1-html_css.odt 2 Classe de 2nde ICN Les langages HTML et CSS sont véritablement le socle de tout projet de développement web. Que vous vouliez créer un site e-commerce, un blog, une application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les langages HTML et CSS. Apprendre le HTML et le CSS signifie entrer dans le monde des programmeurs et c’est donc commencer à les comprendre et à parler comme eux. 1-html_css.odt 3 Classe de 2nde ICN 1. Introduction HTML est l’abréviation de HyperText Markup Language, soit en français « langage hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu. CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles. Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS : • HTML est utilisé pour baliser un contenu, c’est à dire pour le structurer et lui donner du sens. Le HTML sert, entre autres choses, à indiquer aux navigateurs quel texte doit être considéré comme un paragraphe, quel texte doit être considéré comme un titre, que tel contenu est une image ou une vidéo. • CSS est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu à tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu. Les versions actuelles du HTML et du CSS sont HTML5 et CSS3. Il faut savoir que, contrairement aux idées reçues, ce sont encore des versions non finalisées. Cela signifie que ces versions sont toujours en développement et qu’elles sont toujours en théorie sujettes à changements et à bugs. La version 5 d’HTML, tout comme la version 3 de CSS introduisent de nombreuses nouvelles fonctionnalités longtemps attendues par les développeurs et il serait donc dommage de s’en priver. Parmi celles-ci, l’insertion simplifiée de vidéos et de contenus audio et de nouvelles balises améliorant la sémantique (on va y revenir, pas d’inquiétude !) pour mieux structurer nos pages en HTML ou encore la possibilité de créer des bordures arrondies en CSS. Pour coder en HTML et en CSS, nous n’avons besoin que d’un éditeur de text : • NotePad++, sous Windows; • Komodo, pour Mac ou Linux; • TextWrangler, pour Linux. 2. Les bases en HTML et CSS 2.1. Les bases du HTML 2.1.1. Éléments, balises et attributs Il y a trois termes dont vous devez absolument comprendre le sens en HTML. Ce sont les termes élément, balise et attribut. Les éléments, tout d’abord, vont nous servir à définir des objets dans notre page. Grâce aux éléments, nous allons pouvoir définir un paragraphe (élément p), des titres d’importances diverses (éléments h1, h2, h3, h4, h5 et h6) ou un lien (élément a). Les éléments sont constitués de balises. Dans la majorité des cas, un élément est constitué d’une paire de balises : une balise ouvrante et une balise fermante. 1-html_css.odt 4 Classe de 2nde ICN Les balises reprennent le nom de l’élément et sont entourées de chevrons. La balise fermante possède en plus un slash qui précède le nom de l’élément. Cependant, certains éléments ne sont constitués que d’une balise qu’on appelle alors balise orpheline. C’est par exemple le cas de l’élément br qui va nous servir à créer un retour à la ligne. Notez que, dans le cas des balises orphelines, le slash se situe après le nom de l’élément. Notez également que ce slash n’est pas obligatoire et que certains développeurs l’omettent volontairement. Je vous conseille cependant, pour des raisons de propreté de code et de compréhension, de mettre le slash dans un premier temps. Les attributs, enfin, vont venir compléter les éléments en leur donnant des indications ou des instructions supplémentaires. Par exemple, dans le cas d’un lien, on va se servir d’un attribut pour indiquer la cible du lien, c’est à dire vers quel site le lien doit mener. Notez que les attributs se placent toujours à l’intérieur de la balise ouvrante d’un élément (ou de la balise orpheline le cas échéant). Dans l’exemple ci-dessus, on discerne l’élément a composé : • d’une balise ouvrante elle-même composée d’un attribut href ; • d’une ancre textuelle ; • d’une balise fermante. L’attribut href (initiales de « Hypertexte Reference ») sert à indiquer la cible de notre lien, en l’occurrence le site Wikipédia. L’ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer pour se rendre sur Wikipédia et également l’unique partie visible pour eux. Voici ce que les visiteurs de votre site verront : 1-html_css.odt 5 Classe de 2nde ICN Si vous vous sentez un peu perdu pour le moment, ne vous inquiétez pas, c’est tout-à-fait normal ! Continuez le cours, vous allez voir : avec un peu de pratique, tout cela va très vite se décanter et vous aurez tout compris avant même de vous en rendre compte ! 2.1.2. Structure de base d’une page en HTML5 En programmation comme dans beaucoup d’autres disciplines, vous l’aurez compris, il y a des règles. Ainsi, toute page écrite en HTML5 doit comporter une certaine structure, un « squelette » qui sera toujours le même. Ce squelette est bien évidemment constitué de divers éléments. Tout d’abord, toute page HTML5 doit commencer par la déclaration de ce qu’on appelle un « doctype ». Le doctype, comme son nom l’indique, sert à indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc : Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu particulier. Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois nouveaux éléments : html, head (« en-tête ») et body (« corps de page »). L’élément html va contenir toute la page. L’élément head contiendra entre autres, le titre de la page, l’encodage uploads/s3/ 1-html-css.pdf