CSS « Kòd »

CSS exercise given at HEPL

---

CSS "Kòd" is an educational project, which will be used for HTML/CSS courses.

Note: the school where the course is given, the HEPL from Liège, Belgium, is a french-speaking school. From this point, the instruction will be in french. Sorry.

---

Lors de vos labos de travaux dirigés, vous allez découvrir le langage CSS et le mettre en pratique via de courts exercices de mise en situation.
Les labos de travaux pratiques vont vous confronter à des exercices pratiques et individuels reprenant la matière vue lors du TD précédent.

---

Kòd

Vous trouverez dans ce dossier une page HTML nommée index.html. Cette page contient un petit extrait de code concernant les microdatas.

Toutefois, le formatage HTML fourni ne permet pas l’affichage de l’extrait de code… Vous allez donc devoir commencer par régler ce problème.

Ensuite, vous allez créer quatre feuilles de style pour permettre d’afficher l’extrait de code selon quatre thèmes de couleur différents.

Les différents styles devront être accessibles depuis le menu Affichage du navigateur pour que l’utilisateur puisse choisir son thème préféré :

Consignes

1. Préparer le HTML :

• pour que l’extrait de code s’affiche dans le navigateur ;
• pour pouvoir styler les morceaux de code. Prévoir de pouvoir appliquer :
  • un style pour les noms de balise ;
  • un style pour les noms d’attributs ;
  • un style pour les valeurs d’attributs ;
• pour lier les quatre feuilles de style pour les 4 thèmes de couleur différents et avoir accès aux trois feuilles de style alternatives via le menu Affichage -> Style de la page du navigateur. [Aide : les feuilles de style alternatives doivent être liées grâce à une balise link dont l’attribut rel a la valeur alternate stylesheet. Le nom des feuilles de style qui apparaît le menu du navigateur est ajouté grâce à l’attribut title].

N.B. L’extrait de code doit :

• être balisé comme étant du code 
• s’afficher en conservant le formatage réalisé dans l’éditeur de texte ;
• se trouver dans une figure de classe code.

2. Créer les 4 feuilles de style en CSS :

Styles généraux

• Appliquer un reset de base :

    * {   
        padding: 0;  
        margin: 0;  
    }
  

• Appliquer au body :

  • des marges intérieures de 2 fois la taille de la police à gauche et à droite ;
  • des marges extérieures de 2 fois la taille de la police en haut et en bas ;
  • une largeur maximum de 1000px ;
  • la police Helvetica Neue de préférence (et sinon une police de substitution bien choisie) [Aide-rappel : voir sur le site csssfontsack] ;

• Le titre doit avoir :

  • une taille de police 3 fois plus grande que la taille de base ;
  • des marges extérieures de 1.5 fois la taille de la police en haut et 0.8 fois la taille de la police à gauche ;
  • une hauteur de ligne de 1.3 fois la taille de la police ;

• La figure qui contient le code (figure.code) doit avoir :

  • une taille de police de 1.5 fois la taille de la police de son parent ;
  • une hauteur de ligne de 1 fois la taille de la police ;
  • une marge du bas de 3 fois la taille de la police ;
  • une bordure à gauche de 0.5 fois la taille de la police en trait plein et de couleur #ad5dff ;
  • une marge intérieure de 1 fois la taille de la police ;
  • pas de retour à la ligne automatique ;
  • être écrit de préférence en Consolas (et sinon avec une police de substitution bien choisie).

Thème clair (Light, affiché par défaut)

Couleurs :

• fond : blanc #fff ;
• titre : gris #666 ;
• balise, bordure : bleu #006699 ;
• attribut : orange #a46100 ;
• valeur : vert #567c00 ;
• texte : noir #000.

Thème clair solarisé (Solarized Light)

Couleurs :

• fond : crème #fff4db ;
• titre, bordure : bleu-vert #009786 ;
• balise : bleu #0079cb ;
• attribut : vert #698c00 ;
• valeur : orange #b67400 ;
• texte : noir #OOO.

Thème foncé (Dark)

Couleurs :

• fond : gris foncé #1d1e19 ;
• titre, bordure : mauve #ad5dff ;
• balise : rose #ff005e ;
• attribut : bleu-vert #00d8ed ;
• valeur : vert #72e600 ;
• texte : #f6f7ee.

Thème foncé solarisé (Solariezd Dark)

Couleurs :

• fond : #002129 ;
• titre : mauve #5658ba ;
• balise : orange #b67400 ;
• attribut : vert #698c00 ;
• valeur : turquoise #009786 ;
• texte : #688384.

---

Bon travail !

---

Code original par Myriam Dupont.