S5-3 : Créer une page web avec le langage CSS
| Présentation | |
| Le couple HTML + CSS sont les deux langages utilisés pour présenter et mettre en forme les documents sur le web. L'activité proposée sera donc réalisée avec l'éditeur HTML accessible depuis Capytale, lui même présent dans notre ENT. |
| Problématique |
Qu'est ce que le langage CSS ? |
| Travail à faire |
| Partie 1 : Une page web avec CSS et sans CSS, à l'aide de votre fiche de travail, réaliser les différentes activités proposées. Partie 2 : Le CSS pour la mise en forme, à l'aide de votre fiche de travail, réaliser les différentes activités proposées Projet : Créer une page web sur une pesonnalité en lien avec l'informatique. |
PARTIE 1 : Une page web avec CSS et sans CSS |
|||
| Dans cette séance vous allez découvrir le langage CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») qui permet de définir le style graphique d’une page et donc de rendre plus “jolie” une page Web. Commençons par comparer une page web avec CSS et sans CSS. |
|||
Préambule : |
|
Page web avec CSS |
Page web sans CSS |
Code de patage :2177-3402017 |
Activité 1 : |
|
|
Activité 2 : |
|
PARTIE 3 : Créer une page web sur une personnalité |
||||
| Vous avez désormais toutes les connaissances pour démarrer le projet de création d'une page Web sur une personnalité en lien avec l'informatique. |
||||
Code de patage :14ca-3405387 |
Bill Gates - Co-fondateur de Microsoft, philanthrope et entrepreneur. |
Ada Lovelace - Considérée comme la première programmeuse de l'histoire. |
Alan Turing - Mathématicien et cryptologue britannique, pionnier de l'informatique et de l'intelligence artificielle. |
Larry Page - Co-fondateur de Google, entrepreneur et pionnier de la recherche en ligne. |
Steve Jobs - Co-fondateur d'Apple Inc., visionnaire et innovateur. |
Tim Berners-Lee - Inventeur du World Wide Web. |
Grace Hopper - Informaticienne américaine, pionnière de la programmation et du développement des langages de programmation. |
Mark Zuckerberg - Co-fondateur et PDG de Facebook, entrepreneur dans le domaine des réseaux sociaux et de la technologie. |
|
Votre page web comprendra :
L'utilisation d'un fichier css est fortement rcommandée pour :
|
Modèle de page
|
|||
fichie
| Point méthode |
Balise HTML (HyperText Markup Language)Élémet du code HTML d'une page Web permettant de structurer les contenus. </html> et <html>Entre ces deux balises on trouve deux parties délimitées par les balises <head> et <body>. <head> et </head>Cette partie s'appelle l'en-tête de la page Web. Elle contient des métadonnées, c'est-à-dire des informations générales sur le document comme son titre, l'encodage des caractères, des liens vers des feuilles de style ou des scripts. <body> et </body>Cette partie s'appelle le corps de la page Web. |
|
CSS (Cascading Style Sheets ou feuilles de style en cascade)Ce langage permet de définir le style graphique d'une page et donc de rendre plus "jolie" une page Web. Un fichier CSS contient des règles de mise en forme. Par exemple, on pourra y définir que tous les titres de niveau 1 (balise <h1>) sont de telle couleur, de telle police, sont centrés, etc. L’utilisation d’un fichier CSS contribue à homogénéiser la présentation d’une page Web et à séparer le contenu (HTML) de la forme (CSS). Il suffit de le relier au fichier HTML dans les en-têtes de ce dernier. |
Écriture de règles CSS Mémento CSS
|
| Ce que je dois retenir |