HTML & CSS

Objectifs :

Vous allez, en suivant ce pas à pas, améliorer l'apparence du fichier NSI.html disponible ci-dessous.

Fichier nsi.html

Ainsi, vous allez découvrir différentes propriétés CSS
Pour des renseignement complémentaires, n'hésitez pas à aller sur le site https://developer.mozilla.org/fr/ et à rechercher une propriété.
Les règles CSS évoluent en permanence et il n'est pas demander de toutes les connaître par coeur !

Le pas à pas à suivre :

1. Téléchargez les fichiers et dans le dossier \NSI\Interraction_Hommes_Machines\Activite2-css\ de votre espace de travail.

2. Dans ce même dossier, créez un fichier style.css
3. Nous allons lier la feuille de style à notre fichier html. Pour cela, il faut ajouter la balise :
   <link href="style.css" rel="stylesheet" type="text/css">
   dans l'entête (head) de notre fichier html.
   Pensez à sauvegarder régulièrement.
4. Nous allons commencer par changer la police d'affichage, ajoutez le code suivant dans le fichier css
   html {
  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
}
   le texte entre /* et */ est en commentaire.
5. Enregistrez et actualisez l'affichage du html dans le navigateur. La police a été modifiée pour toutes les balises filles de la balise html.
6. Améliorons le titre de niveau 1 :
   h1 {
  font-size: 60px;
  text-align: center;
}
7. La règle suivante portera sur les paragraphes et les listes. A vous de compléter la déclaration suivante avec le bon sélecteur :
   ? {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
8. Nous allons changer la couleur de fond :
   html {
  background-color: #00539F;
}
   La couleur est ici donnée avec un code hexadécimal. Nous en reparlerons plus tard dans l'année.
   Il est possible de donner une valeur en RGB, RGBA (RGB + canal alpha) , avec un mot clé (red, green , LightCoral ...) , ou encore HSL ou HSLA.
   Allez voir ce site https://developer.mozilla.org/fr/docs/Web/CSS/Type_colorou encore ce site : https://htmlcolorcodes.com/fr/
9. Le code suivant va améliorer le corps du texte
    body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}
   width permet de fixer la largeur d'un élément
   margin fixe les marges des 4 côtés d'un élément, c'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom et margin-left.
   padding représente le remplissage (espace entre le contenu et la bordure)
   border est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. border peut être utilisée pour définir les valeurs de border-width, border-style et border-color.
   Voir ici pour le modèle de boite.
10. Et de code améliore le titre de niveau 1:
    h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}
11. Et enfin ce code positionne mieux l'image
    img {
  display: block;
  margin: 0 auto;
}

Exercice

A vous de trouver les règles CSS suivantes :

1. Trouver un sélecteur permettant de modifier uniquement le paragraphe commençant par "Comprendre les enjeux d'un internet ouvert..."
   En utilisant ce sélecteur changer le paragraphe de couleur et de taille.
2. Trouver un sélecteur permettant de modifier uniquement le titre : "Manifeste de la fondation mozilla."
   En utilisant ce sélecteur changer la taille, la couleur et centrer le titre.
3. Trouver un sélecteur permettant de modifier uniquement le lien quand il est survolé.
   En utilisant ce sélecteur changer la couleur de fond et enlevez le soulignage.

Présentation :

Vous allez rédiger une page présentant un loisir que vous pratiquez.

Les consignes :

Il faudra utiliser la structure html travaillée en classe

Vous allez créer une feuille de style permettant un affichage plus agréable.

Vous pouvez vous inspirer de l'image ci-dessous :

Notation :

Protocole de rendu :

Chaque élève doit rendre une archive contenant tous les fichiers necessaires à l'affichage de la page html.