{"_id":"kpAGH5nhynBQqdTyN","slug":"activite-3-web-coder-page-le-css2022-06-20t200728836z","title":"Activité 3 - Web - Coder page : Le CSS","description":"Avec Capytale","content":"# Activité Coder page WEB - Le CSS\n## Partie 1 : Travailler le CSS dans Capytale\n> Partie obligatoire et évaluée\n* Aller sur l'ENT et connectez vous à l'application **Capytale**\n* Entrer le code de l'activité : **d030-622206**\n>Aide : pour réaliser l'activité [voir le document d'aide](https://nuage03.apps.education.fr/index.php/s/6E9Y4mM6QH6MN4Y)\n\n## Partie 2 : Réaliser une page WEB = Coder une page web\n\n### Pour bien démarrer\n\n\n\nVous trouverez, dans le répertoire _fakebook_ un fichier HTML, _fakebook.html_ , et , une page de style _style.css_. \n\n\n\n* Faites un double clic sur le fichier _fakebook.html_ afin de l'exécuter c'est à dire de l'ouvrir avec un navigateur (Firefox est parfait). Pour l'instant, la page est vide mais vous apercevez le mot _Fakebook_ dans l'onglet de la page en haut. \n* Faites maintenant un clic droit sur le le fichier _fakebook.html_ et ouvrez le avec un éditeur de texte (notepad++, sublime text, Geany ...) afin d'en voir le code.\n\n\n\nOn y trouve la _structure_ classique d'une page HTML :\n\n```HTML\n\n\n\t\n\t\tFakeBook\n\t\n\t\n\t\t\n\t\t \n\t\n\t\n\t\t\n\t\n\n\n\t\n```\n\n* La première balise, ``, précise le type du document.\n* Tout le code HTML doit être placé entre les balises `` et ``\n* Les balises `..` permettent de stipuler le titre visible dans la languette de la page, ici _Fakebook_ que nous avons aperçu plus haut.\n* Les balises `..` servent à indiquer les caractéristiques de la page :\n * le type de codage de caractères. C'est la _méthode_ utilisée pour encoder les caractères. Elle dépend, en gros, de l'alphabet utilisé. L'UTF-8 est le codage le plus répandu au monde aujourd'hui (nous l'étudions en première NSI).\n * les liens vers d'autres pages, comme la page _style.css_ dont on se servira plus tard.\n* les balises `..` délimitent la zone de code dans laquelle on mettra ce que l'internaute verra, c'est le _corps_ de la page et c'est entre ces balises que l'on va travailler.\n\n\n\n_Remarque :_ \n\nNotez les tabulations, c'est à dire les décalages : le contenu d'une paire de balises doit être tabulé d'un cran vers la droite par rapport à ces balises. Ces tabulations sont INDISPENSABLES à une bonne lecture du code.\n\n\n\n### Objectif\n\nNous allons réaliser une page _FakeBook_ . En voici un exemple :\n\n![fakebook](media/fakebook.jpg)\n\nVotre page devra comporter les mêmes éléments à savoir :\n\n* Le gros titre servant à afficher le bandeau _Fakebook_\n* Votre nom approximatif.\n* Une photo vous représentant... plus ou moins, en respectant les droits d'auteurs.\n* Un petit tableau comportant votre date de naissance, le nom de vos parents ... tout étant factice bien entendu.\n* Votre profession imaginaire.\n* Une liste à puces de vos fausses distinctions honorifiques\n* Une liste à puces de vos passions imaginaires.\n* Un lien, au moins, vers une de _vos oeuvres_ fictives.\n\n\n\n## Balises nécessaires.\n\nNous allons commencer par placer les balises nécessaires entre les balises ` ..`. Nous nous occuperons du style (couleur, arrière plan, type de police de caractères ...) seulement ensuite...\n\nIl y a deux type de balises :\n\n* La plupart des vont par paires : une balise ouvrante ... et une fermante qui est presque la même avec un `/` en plus.\n* Certaines balises sont seules : on dit qu'elles sont orphelines (snif) et elles terminent par un `/`.\n\n\n\nVoici une petite liste des balises les plus courantes :\n\n* Les balises de titre :\n\n ```HTML\n

\n \tTitre de niveau 1 (gros titre)\n

\n \tTitre de niveau 2 (plus petit)\n

\n ```\n\n* La balise qui trace une ligne de séparation est `

` .\n\n* Les balises de _paragraphe_ qui ne contiennent que du texte :\n\n ```HTML\n

\n \tIci j'écris mon texte. \t\n

\n ```\n\n* La balise `
` (_Back Riot_ ou _retour chariot_ pour les nostalgique de la machine à écrire mécanique) permet d'aller à la ligne.\n\n* La balise *image* :\n\n ```html\n $\"commentaire\"/$ \n ```\n\n * _Le commentaire apparaît quand on passe sur la photo avec le curseur._\n\n * _l'url peut être locale (sur votre disque à côté du fichier fakebook.html) ou distant (sur un serveur). Nous privilégierons une url locale en raison du prochain TP filius_\n\n* Voyons maintenant les tableaux : la balise`` marque le début du tableaux, `` ouvre une nouvelle ligne et ``des tableaux par exemple) :\n \n ```CSS\n border : 2px solid black; /* une bordure de 2px en trait continue noir*/\n border-radius : 20px; /* arrondi les angles sur 20px*/\n box-shadow : 10px 10px 10px black; /* ajoute une ombre -> effet 3D */\n ```\n \n \n \n * En ce qui concerne les marges extérieures :\n \n ``` css\n margin : 10px; /*une marge de 10px tout autour */\n \tmargin-left : 0px; /* une marge de 0px à gauche, pas de marge donc*/\n margin-right : 10px; /* une marge de 10px à droite*/\n \tmargin-top : 0px; /* une marge de 0px en haut, pas de marge donc*/\n margin-bottom : 10px; /* une marge de 10px en bas*/\n ```\n \n \n \n * En ce qui concerne les marges intérieures :\n \n \t```css\n padding : 10px; /*une marge intérieure de 10px tout autour du contenu*/\n \tpadding-left : 10px; /* une marge de 10px à gauche*/\n padding-right : 10px; /* une marge de 10px à droite*/\n padding-top : 10px; /* une marge de 10px en haut*/\n \tpadding-bottom : 10px; /* unemarge de 10px en bas*/\n \t```\n\n\n\n\n\n> **En avant et amusez vous bien !!**\n>\n> **N'oubliez pas de sauvegarder de temps en temps, cela n'est pas automatique**\n\n\n\n___________\n\nPar Mieszczak Christophe - Licence CC - BY - SA\n\nModifications apportées par Anne Boenisch\n\nSource image : production personnelle","structure":"4hyuJbzFkpcsHyE3x","markdown":true,"draft":false,"createdAt":"2023-01-13T15:33:51.608Z","updatedAt":"2023-01-13T15:33:51.608Z","visits":13,"tags":[],"licence":"","groups":[{"_id":"Dj8xdBffG6XiwntdQ","name":"Val de Lys - SNT","type":10}],"userId":"xXkNuwXFSEpxJjmvp","user":{"_id":"xXkNuwXFSEpxJjmvp","username":"user_001711","firstName":"yo","lastName":"user_001711","avatar":"","articlesCount":6,"structure":"4hyuJbzFkpcsHyE3x"}}

` ouvre une nouvelle cellule. \n\n ```HTML\n \n \t\n \t\t\n \t\t\n \t\n \t\n \t\t\n \t\t\n \t\n

\n \t\t\tcellule 1 ligne 1\n \t\t	\n \t\t\tcellule 2 ligne 1\n \t\t
\n \t\t\tcellule 1 ligne 2\n \t\t	\n \t\t\tcellule 2 ligne 2\n \t\t

\t\n ```\n\n _Par défaut, les tableaux n'ont pas de bordure. On ajoutera une bordure aux cellules dans la feuille style.css. Pour l'instant, impossible donc d'en voir les contours... mais ils sont bien là !_\n\n* Les balises de liste ( les puces) :\n\n ```HTML\n

\n \t\tpremière puce\n \t
\n \t\tdeuxième puce\n \t

\n \n

\n \t\tpremière puce\n \t
\n \t\tdeuxième puce\n \t

\n ```\n \n* La balise de lien hypertexte :\n\n ```HTML\n description du lien \n ```\n\n \n\n > **En avant et amusez vous bien !!**\n >\n > **N'oubliez pas de sauvegarder de temps en temps, cela n'est pas automatique**\n\n \n\n## Un peu de style : le CSS\n\nA côté du fichier _fakebook.html_ se trouve le fichier _style.css_. ouvrez-le avec votre éditeur de texte. Nous allons coder ici le style de la page HTML. \n\n\n\nSéparer le fond (en HTML) de la forme (en CSS) permet de modifier facilement l'aspect d'une page HTML sans être obligé de la réécrire. Seule la page CSS sera modifiée.\n\n\n\n* On peut repérer les objets HTML dans la page css de plusieurs façon :\n\n * par leur balise. Toute les balises identiques seront impactée.\n\n ```CSS\n H1 {\n \t/*ici on écrira le code du style des balises

/\n }\n ```\n\n \n\n par un identifiant ajoutée dans la balise en HTML. Seule cette balise sera concernée, deux balises ne pouvant partager un même identifiant.\n\n Dans la page HTML : ajout de l'identifiant _id_\n\n ```HTML\n

\n \tCeci est un titre très particulier\n

\n ```\n\n Dans le fichier **CSS** : on récupère l'identifiant en le nommant après un #\n\n ```CSS\n #titre_particulier{\n \t/*ici on écrira le code du style de la balise qui a cet identifiant*/\n }\n ```\n \n \n \n \n\t* par une classe ajoutée dans des balises en HTML. Plusieurs balises peuvent partager la même classe. Les balises de même classe seront toutes impactées par le style :\n \n \tDans la page **HTML** : ajout des classes _class_\n \n \t```HTML\n

\n \tpuce 1\n \t
\n \tpuce 2\n \t

\n ```\n \t\n Dans le fichier **CSS** : on récupère les classes en les nommant après un .\n \t\n ```CSS\n \tmes_puces{\n \t/*ici on écrira le code du style de toutes les balises qui partagent cette classe*/\n }\n ```\n \n \n \n* il faut maintenant connaître quelques fonctionnalités du CSS.\n\n * En ce qui concerne les couleurs :\n\n ```css\n color : red ; /* met la couleur en rouge */\n background-color : rgb(230, 230, 230); /*met l'arrière plan dans la couleur définie en rgb, on peut utiliser également le nom de la couleur*/\n ```\n \n \n \n * En ce qui concerne le texte :\n \n ```CSS\n font-family : tahoma; /* choisit la police tahoma */\n font-size : 18px; /* fixe la taille de la police à 18 pixels*/\n font-weight : bold; /* met le texte en gras */\n font-style : italic; /* met le texte en italic*/\n text-align : center; /* centre le texte dans son conteneur*/\n ```\n \n \n \n * En ce qui concerne les dimensions, quand l'objet en a :\n\n ```CSS\n width : 300px; /* fixe la largeur à 300 pixels*/\n height : 350px; /* fixe la hauteur à 350 pixels*/\n ```\n \n \n \n * En ce qui concerne les bordures (pour les cellules `

\n \tTitre de niveau 1 (gros titre)\n

\n \tTitre de niveau 2 (plus petit)\n

*/\n }\n ```\n\n \n\n * par un identifiant ajoutée dans la balise en HTML. Seule cette balise sera concernée, deux balises ne pouvant partager un même identifiant.\n\n Dans la page **HTML** : ajout de l'identifiant _id_\n\n ```HTML\n

\n \tCeci est un titre très particulier\n

/\n }\n ```\n\n \n\n par un identifiant ajoutée dans la balise en HTML. Seule cette balise sera concernée, deux balises ne pouvant partager un même identifiant.\n\n Dans la page HTML : ajout de l'identifiant _id_\n\n ```HTML\n