Chapitre 1 : Introduction

ISN 2015/2016

Lors de votre navigation dans la page, pour revenir au menu, cliquez sur le titre de la section ou du paragraphe.

CSS


  1. Découverte de CSS

    HTML existe depuis 1991, il définit la structure du document avec un système de balises (ou tags) organisées dans uns structure arborescente. HTML détermine si un élément est titre ou un paragraphe mais pas s'il sera affiché dans telle police, avec telle taille de caractères etc .. Evidemment les navigateurs ont des réglages par défaut, mais en général le rendu d'une page en pur HTML n'est pas très attrayant !
    Le langage CSS a été introduit à partir de HTML 4 pour gérer tous les paramètres d'affichage du document (positionnement des éléments, apparence ...). Un fichier CSS (ou feuille de style) est un simple fichier texte, avec des définitions de règles de styles.

    La syntaxe d'une règle de style CSS est assez simple : on cible un élément ou une famille d'éléments du document HTM avec un sélecteur CSS et on lui associe une déclaration de règles de style (image extraite du site www.w3schools.com )

    Il existe plusieurs façons d'associer des règles de style CSS à un fichier HTML.

    • Dans la balise <head> du document HTML, on peut insérer une balise <link> en indiquant le chemin vers une feuille de style CSS externe qui est un fichier texte avec l'extension .css dans lesquel on regroupe les déclarations de style pour tout le document.
      	<link rel="stylesheet" href="style.css"  type="text/css" />
      	
      Dans le fichier style.css on définit les règles de style. Les commentaires sont entre les symboles /* et */ :
                      /* 
                      Ceci est un commentaire
                      */
                      p {color : red; font-size : 20px; }
      
      	
    • On peut définir toutes les règles de style du document en interne, dans une balise <style> à l'interieur de la balise <head> du document :
      	<style>  p {color : red; font-size : 20px; } </style>
      	
    • Enfin on peut définir dans le code HTML des règles de style CSS dans l'attribut style d'une balise HTML mais ce n'est pas recommandé :
      	<p style ="{color : red ; font-size : 20px;}" > Ceci est un paragraphe </p>
      	

    Ouvrir le fichier premierdocumenthtmlV2.html puis faire un clic droit et sélectionner Inspect Element with Firebug . Le module Firebug permet de visualiser d'un côté la structure du document HTML et de l'autre les déclarations de styles des éléments sélectionnés. On peut obtenir le contenu exhaustif de la feuille de style associée au document en dépliant le contenu de la balise <link > dans l'en-tête du document. On donne ci-dessous une capture d'écran de l'inspection de premierdocumenthtmlV2.html avec Firebug

    capture d'écran de Firebug
    Capture d'écran Firebug

    Dans la fenêtre affichant la déclaration de style de la balise <nav> on peut remarquer la syntaxe d'une déclaration de style CSS pour un sélecteur (ici les balises <nav> , <a> , <h2 > et <body> ). Dans la structure du document <nav> est une balise fille de <body> et elle hérite des propriétés définies dans la déclaration de style de celle-ci.

    Exercice 10


    1. Modifier les propriétés background-color, font-size, border de la déclaration de style appliquée à < nav > et observer le résultat. (Voir l'image ci-dessous pour de nouvelles valeurs qu'on peut donner à ces propriétés).
      La propriété font-size contrôle la taille de la police de caractères.
      Pour les unités de longueurs en CSS, on distingue :
      • les unités relatives : em (taille par défaut de la police utilisée), ex (taille de la minuscule x dans la police utilisée), px (taille d'un pixel, qui dépend du media utilisé).
      • les unités absolues : in (un pouce soit 2,54 cm), cm , pt (1/72 de pouce).

    2. Faire de même avec la propriété color qui s'applique aux balises <nav> , <a> et <h2 >

    3. Modifier la valeur de la propriété font-family de la balise parente <body> en lui donnant la valeur cursive (police cursive choisie par défaut par le navigateur) .Que remarque-t-on ?
    Capture d'écran Firebug
    Modification des valeurs des propriétés de style avec Firebug

  2. Déclarations de style et sélecteur en CSS

    Le modèle de la syntaxe d'une déclaration de style en CSS est le suivant :

    	selecteur{
    	propriete1 : valeur1;
    	propriete2 : valeur2;
    	}
    	

    Le sélecteur auquel une déclaration de style CSS s'applique peut être un élément HTML (une balise) ou plusieurs séparés par des virgules. La déclaration ci-dessous permet d'afficher le contenu de toutes les balises <p> et <div> avec un texte justifié, en rouge et sur un fonds de couleur #e4c3e8 en notation hexadécimale (L'outil Modification de la couleur de premier plan de Gimp permet d'associer une couleur à sa notation hexadécimale).

    	p,div{
    	text-align : justify;
    	color : red;
    	background-color : #e4c3e8;
    	}
    	

    On peut aussi appliquer des déclarations de style à des classes CSS. Le style défini pour la classe appelée nom_classe s'appliquera à toutes les éléments du document HTML relié qui possèdent l'attribut class="nom_classe" dans leur balise ouvrante : <balise class="nom_classe" > contenu </ balise> . On déclare un style pour une classe CSS en faisant précéder son nom du symbole . .

        /* pour cibler tous les éléments de la classe */
    	.nom_classe{ 
    	font-family : Arial, serif;
    	font-size : 30px;
    	color : #FFFFFF;
    	}    
        
        /* pour cibler uniquement  les paragraphes appartenant à la classe */
        p.nom_classe{
        color : #FFFFFF;
        }
    	

    On peut aussi appliquer des déclarations de style à des éléments uniques (indépendamment de leur type), si un identifiant a été déclaré dans leur balise ouvrante : <balise id="nom_identifiant" > contenu </ balise> . On déclare un style pour un identifiant de balise en faisant précéder son nom du symbole # . Par ailleurs, en CSS les commentaires sont les textes encadrés par les symboles /* et */ .

    	#nom_identifiant{
    	border : 1px solid black;
    	/*Ceci est un commentaire : pour obtenir une bordure noire en trait continu */
    	}
    	

    Le terme Cascade dans la dénomination de CSS indique que la plupart (mais pas toutes) des propriétés des éléments parents sont héritées par les éléments fils. S'il y a conflit d'héritage, la propriété de la balise la plus spécifique (ascendant le moins éloigné) s'applique. S'il y a plusieurs déclarations de style (feuille externe, interne, locale dans la balis), la règle de priorité décroissante est : balise > déclaration interne > déclaration externe.

    Soit par exemple une déclaration de style :

    	p{color : red ;}
    	div{color : green; font-weight : bold;}
    		

    Et le code HTML auquel elle s'applique :

    	<div>
    	HTML est un langage de description de document avec balisage.
    	<p> CSS permet d'améliorer la mise en forme du code HTML. </p>
    	</div>
    		

    La première phrase s'affichera en vert et en gras et la deuxième en rouge et en gras (propriété héritée de <div> par <p> )

    .

    Exercice 11


    1. Ouvrir Gimp et sélectionner une couleur en copiant sa notation hexadécimale. Ouvrir ensuite la feuille de style stylepremierdocumenthtml.css reliée à premierdocumenthtmlV2.html . Rajouter une déclaration de style pour les éléments <h2> pour sélectionner une largeur ( width ) de boîte de 250px, la couleur sélectionnée dans Gimp pour le texte, et choisir un fonds fuchsia et une bordure verte, en trait continu ( solid ) de 3px.

    2. La déclaration de style ci-dessous cible le mot Menu dans la zone de menu délimitée par la balise <nav> .Modifier les valeurs des propriétés de cette déclaration de style pour changer l'affichage du mot Menu.

      		#titre_menu{
      		font-size:1.4em;
      		font-weight:bold;
      		margin : 5px;}
      		

    3. On peut rédéfinir la sémantique d'une balise en surchargeant son style. Rajouter les déclarations de styles suivantes pour les balises <strong> et <em> données ci-dessous. Quel est l'effet obtenu ?

      em{
      font-style : normal;
      font-weight : bold;
      color : red;
      }
      
      strong{
      font-style : italic;
      font-weight : normal;
      text-transform : lowercase;
      color : lime;
      }
      
      

    4. Inspecter la page premierdocumenthtmlV2.html avec Firebug. Sélectionner <img class="image" alt="logo HTML5" src="images/lena.png"> . Cette balise appartient à la classe CSS .image.
      Changer en left la propriété float de la définition de style de la classe .image. Que remarque-t-on ?
      Recommencer en changeant en none la propriété float .

    5. Changer la valeur de la propriété list-type de la classe .liste_liens associée à la liste de liens du paragraphe Liens.
      .liste_liens {
          list-style-type: disc; /*disc au lieu de circle, autres valeurs 
          possibles : square et none */
      }
      

    6. Changer la valeur de la propriété display de la classe .item_menu associée aux items de la lite de menu contenue dans la balise <nav>. Quel est l'effet obtenu ?
      La propiété display permet de changer le rendu par défaut de l'élément (pour afficher une balise de type inline comme une balise de type block ou comme une liste de type list-item ).

      .item_menu {
          display: block; /*block au lieu de inline, autres valeurs possibles 
          : inline-block, none (invisible) et list-item*/
          margin: 5px;}
      

  3. Propriétés CSS

    Les propriétés CSS sont très nombreuses, pour les découvrir et répondre aux exercices, on s'aidera des très bons tutoriels du site www.w3schools.com .

    Exercice 12


    Ouvrir cette page web et faire afficher la structure HTML et les propriétés CSS du document avec Firebug ou les outils de développement du navigateur.

    1. A quoi servent les propriététés background ? ( background-color, background-image, background-repeat ).
      Comment peut-on éviter que l'image en arrière-plan de l'ément body se répète verticalement ?
    2. Quels éléments sont contrôlés par les propriétés font-family,font-size,font-style ? Modifier leurs valeurs dans la feuille de style du document.
    3. Même question pour les propriétés text-align,et text-transform.

  4. Modèle de boîtes CSS

    Pour CSS, les éléments HTML sont placés dans des boîtes caractérisées par 4 enveloppes successives. De l'extérieur vers l'intérieur on trouve (image extraite du site www.w3schools.com ) :

    • margin , la marge extérieure qui contrôle l'espace avec les autres éléments du document. Les paramètres margin-top, margin-right, margin-bottom, margin-left peuvent prendre des valeurs en pixels ( 30px sans espace entre la valeur et l'unité) ou en em (1 1em=16px)
    • border , la bordure. On peut régler son épaisseur, sa couleur et différencier border-top, border-right ...
    • padding , la marge intérieure réglable comme margin
    • content , le contenu de l'élément dont les dimensions (pour les éléments de type block ) sont réglables à travers les paramètres width et height.

    Exercice 13


    1. Inspecter l'élément div de classe "exercice" cet exercice avec Firebug et faire apparaître les dimensions de sa boîte dans l'onglet Apparence.
      Modifier les valeurs des propriétés margin, padding, border, content et observer les effets obtenus.
    2. A votre avis comment calcule-t-on la largeur en pixels occupée par un élément HTML ? Réfléchir puis visualiser cet exemple.

  5. Positionnement avec CSS

    Les éléments successifs d'une page HTML forment un flux. Par défaut les navigateurs empilent verticalement les éléments de type block , chacun occupant toute la largeur possible. Les éléments de type inline sont aussi disposés successivement mais horizontalement.

    On peut afficher des inline comme des blocks et réciproquement en modifiant leur propriété display .

    CSS permet de modifier le positionnement d'un élément HTML à travers la propriété position qui peut prendre trois valeurs :

    • static : position dans le flux normal
    • fixed : l'élément est sorti du flux et il est placé fixement par rapport à la fenêtre du navigateur selon les propriétés top, bottom, left, right .
                  
                  p.fixe{
                      position : fixed;
                      top : 400px;
                      left : 100px;
                      background-color : blue;
                      z-index : -1;
                  }            
                  

      Cliquez-ici pour tester.

    • relative : l'élément reste dans le flux mais il est décalé relativement à sa position normale grace aux propriétés top, bottom, left, right .
                  p.relatifdroit {
                      position : relative;
                      top: -60px;
                      left : 100px;
                      background-color : #e2eb98;
                  }            
                  

      Cliquez-ici pour tester.

    • absolute : l'élément est sorti du flux et il est placé de façon absolue par rapport à l'élément parent le plus proche qui n'est pas en position static (par défaut l'élément html
    • .
                  p.absolu{
                      position : absolute;
                      top : 100px;
                      right : 30px;
                      background-color : #e88733;
                  }            
                  

      Cliquez-ici pour tester.

    Exercice 14


    Ouvrir la page d'exemples de positionnement et l'inspecter avec Firebug.
    1. Les éléments sont-ils affichés dans le même ordre que dans le code HTML ? Expliquer pourquoi.
    2. Quelle est la différence entre positionnements fixe et absolu ? Comment peut-on l'observer à l'écran ?
    3. Pourquoi le paragaphe avec l'image du Python apparaît-il derrière les autres ? Quelles propriété faut-il modifier pour qu'elle apparaisse devant ?

    La propriété float est aussi intéressante pour le positionnement. Elle peut prendre deux valeur : left ou right . Elle permet un flottement horizontal de l'élément ciblé.

    Un élément avec la propriété float : right va être sorti du flux normal et flotter à droite de tous les éléments suivants. Les élements précédents ne sont pas affectés et l'effet de flottement peut être annulé à partir d'un élément en appliquant la propriété clear : both .

    Si plusieurs éléments successifs (des images par exemple) ont la propriété float : right , ils vont se positionner les uns à côté des autres tant qu'il ya de la place.

    Exercice 15


    Ouvrir cette première page d'exemple sur le positionnement avec la propriété float . Inspecter la page avec Firebug ou les outils de développement, effectuer les modifications ci-dessous et observer les effets obtenus.
    1. Changer en right la valeur de la propriété float de l'image.
    2. Désactiver (en l'entourant des symboles de commentaires /* et */) la propriété clear : both du dernier paragraphe.

    Exercice 16


    Ouvrir cette seconde page d'exemple sur le positionnement avec la propriété float . Inspecter la page avec Firebug ou les outils de développement, effectuer les modifications ci-dessous et observer les effets obtenus.
    1. Changer en right la valeur de la propriété float des images.
    2. Réduire ou augmenter les attributs width et height des images.

  6. Exercice 17


    Dans cet exercice on va réaliser pas à pas un menu déroulant horizontal avec CSS. Le thème porte sur les systèmes d'exploitation. On réalise d'abord un simple menu horizontal (Microsoft OS ou Unix) puis on rajoute des sous-menus déroulants (MS-DOS, Windows ou GNU/Linux, Mac-OS etc ...) jusqu'à une profondeur de trois niveaux de menus.
    1. Pour réaliser une barre de menu horizontale, on peut imaginer plusieurs solutions. La plus simple est de créer une liste non ordonnée, de supprimer les puces avec la propriété list-style-type: none des balises ul et d'utiliser la propriété display : inline-block (ou display : inline ) pour les balises li afin qu'elles se disposent horizontalement.
      Un exemple est disponible ici , voici son code source :

      Modifier la feuille de style interne, pour afficher la barre de menu horizontale en utilisant la propriété float .
    2. On veut désormais qu'un menu de niveau 2 (créer une nouvelle classe CSS) s'affiche uniquement lorsqu'on passe la souris sur un item du menu de niveau 1 comme dans cet exemple (ne pas regarder le code source !!!)
      On commence par cacher les menus de niveau 2 avec la déclaration de style suivante :
                       ul ul{
                              position: absolute;
                              display: none; 
                      }                     
                      
      Le positionnement absolu permet de sortir le menu de niveau 2 du flux normal, ainsi son affichage n'affecte pas la position des autres éléments comme les autres items du menu de niveau 1. Pour mieux comprendre, désactiver position: absolute dans l'exemple.
      Ensuite il faut que la propriété display des menus de niveau 2 (listes incluses dans des listes) prenne la valeur block lorsque la souris passe sur l'item correspondant du menu de niveau . .Pour celà, on va utiliser la pseudo-classe CSS hover qui permet d'activer une règle uniquement si la souris se trouve sur l'élément ciblé par le sélecteur précédent hover . Consulter d'abord ce tutoriel puis rajouter une règle de style qui apporte une solution à notre problème.
      Voici une solution possible :

    3. Compliquons encore en rajoutant un menu de niveau 3. Pour que l'affichage reste clair on veut le positionner à droite de l'élément correspondant du menu de niveau 2, comme dans cet exemple
      Les règles pour cacher-afficher les menus de niveau 3 (nouvelle classe CSS), suivent le même principe que pour les menus de niveau 2. Pour le positionnement, on va profiter du positionnement absolu des balises ul qui permet de ne pas affecter les autres éléments lorsque leur contenu est affiché (au risque d'obtenir des chevauchements). De plus on veut que les menus de niveau 3 soient placés relativement aux items de niveau 2 qui ont été survolés par la souris (à la même hauteur mais décalé à droite). L'idée est de passer en positionnement relatif les balises li de niveau 2, ainsi les ul de niveau 3 qu'ils contiennent seront positionnés absolument par rapport à eux et non par rapport à l'élément html .
      Avec ces bonnes recettes, compléter la feuille de style des exemples précédents pour obtenir un menu déroulant avec 3 niveaux comme ici.
      Voici une solution possible :

    4. Après tous ces efforts, on peut en profiter pour parcourir les liens du menu obtenu, pour parfaire sa culture sur l'histoire des systèmes d'exploitation.

  7. Exemple d'utilisation d'un template

    Un template est un document HTML avec une structure et une feuille de style prédéfinies qui peut sdervir de patron pour inclure son propre contenu. Un template comprend donc en général un fichier HTML index.html et une feuille de style style.css plus des images dans dossier.

    Quelques sites fournissant des templates (attention aux conditions et licences d'utilisation) :

    Exercice 12


    Ouvrir avec un navigateur le fichier simplementbeau.html qui est un template HTML que j'ai créé à partir du template Simple beauty

    1. Inspecter la page HTML avec Firebug.
      • Modifier la déclaration de style de la balise <body> : changer la couleur de fonds et la police de caractère en "Times New Roman" .

      • Modifier la couleur de fonds background-color de l'en-tête du document (balise <header>

      • Changer en right la propiété float de la classe .contenu et régler la marge à gauche margin-left de la de la classe .menu_secondaire à 0px. Quel est l'effet obtenu ?
        Il existe d'autres moyens de positionnement comme l'utilisation de la propriété display .


    2. Enregistrer le fichier simplementbeau.html sous un autre nom puis intégrer le contenu du fichier premierdocumenthtmlV2.html dans le but d'obtenir un résultat similaire à celui-ci premierdocumentbeau.html .
      Valider les codes HTML et CSS produits avec les validateurs : http://validator.w3.org et http://jigsaw.w3.org/css-validator/ .
    capture d'écran de Firebug
    Modification de la propriété float de la classe .contenu
    capture d'écran de Firebug
    Modification de la propriété float de la classe .menu_secondaire

  8. Idées de mini-projet

    Mini-Projet n° 1


    But du projet :

    Réaliser une ou plusieurs pages web ayant de présentation du travail réalisé dans le cours d'ISN.
    A rendre pour la rentrée des vacances de Toussaint.

    Cahier des charges :

    • Les pages web doivent être écrites en HTML et doivent comporter des feuilles de style externes
    • Le projet doit contenir au moins les éléments HTML suivants : lien, image, tableau (renseignez-vous avec ce tutoriel )
    • Des classes CSS doivent être définies et les propriétés suivantes doivent être utilisées : background, text, font
    • Au moins un élément doit être positionné à l'aide de la propriété CSS float.
    • Une barre de menu déroulant doit être mise en place (sans Javascript, avec CSS seulement).

    Mini-Projet n° 2


    Le site http://templates.creakaz.com/CV propose des patrons HTML et CSS gratuits pour la publication d'un Curriculum Vitae sur Internet.Le mini-projet proposé consiste à modifier le template pour réaliser son propre CV en ligne en intégrant sa photo, ses compétences, ses expériences, ses objectifs ou toute autre catégorie d'informations pertinentes.

    Pour un exemple de modification possible, on consultera les pages 16 et 17 du du document Eduscol :
    Ressources pour le cycle terminal général et technologique, Informatique et Sciences du Numérique, Créer des pages Web .