Science Numérique et Technologie - Classe de 2nde

Titres et Bordures

Il y a six niveaux possibles de titre dans la balise <body> d'un fichier .html. On utilise le plus souvent les trois premiers niveaux de titre:

Les navigateurs prédéfinissent un rendu par défaut de chaque niveau de titre. Les titres sont déclarés dans les navigateurs comme éléments de type bloc, c'est-à-dire que ces éléments sont affichés par défaut les uns sous les autres.

Attention !!!

Il ne faut pas confondre la balise <title> avec les balises ci-dessus. On rappelle que la balise <title> contient le nom de la page, qu'elle se place dans l'en-tête non visible du document (entre les balises head) et que son contenu s'affiche dans l'onglet du navigateur.

Bac à sable - Les Bordures

Chaque élément Html est contenu dans une boîte. Cette boîte possède des bordures modifiables grâce à trois paramètres :

  • border-width pour l'épaisseur ;
  • border-style pour la forme ;
  • border-color pour la couleur.

Modifiez les différents champs du formulaire ci-dessous afin d'obtenir les propriétés Css correspondantes. Les dimensions sont en pixels.

Ci-contre, on peut choisir la bordure qui encadre le paragraphe, c'est-à-dire son épaisseur, sa couleur et son apparence.

0

Code Css : 

p {                                 /* Mise en forme des paragraphes */
    border-width : 0px;             /* Epaisseur de la bordure en pixels */
    border-style : none;            /* Apparence de la bordure */
    border-color : #000000;         /* Couleur de la bordure - Noir */
    }

Raccourci usuel en Css : 

p {                                 /* Mise en forme des paragraphes */
    border : 0px none #000000;      /* Épaisseur - Apparence - Couleur */
    }

Titres en couleurs

Complétez le code Css afin que :

  1. Les titres de niveau 1 soient écrits en rouge et entourés d'une bordure rouge foncée sur-élevée d'épaisseur 7 pixels;
  2. Les titres de niveau 2 soient écrits en vert sur fond jaune ;
  3. Les titres de niveau 3 soient écrits en orange et entourés d'une bordure verte en sous-épaisseur de 4 pixels ;
  4. Les titres de niveau 4 soient écrits en blanc sur fond noir ;
  5. Les titres de niveau 5 soient écrits en gris ;
  6. Les titres de niveau 6 ne soient pas modifiés.

    7. Conseils

    • Refermez la boîte avec le code Html pour visualiser en même temps l'écran d'affichage et l'énoncé.
    • Comparez régulièrement avec l'affichage à obtenir.
    • Faites des copier/coller des codes obtenus grâce au « bac à sable » précédent.
    • Affichage à obtenir
    • Une solution

Bac à sable - Dissocier les bordures

Une bordure est en fait un rectangle constitué de quatre côtés, chacun est identifié par sa position.

Ci-contre, on peut choisir l'apparence de chaque côté. Faites des tests avec des côtés consécutifs épais et de couleur différente.








Code Css : 

p {                                     /* Mise en forme des paragraphes */
    border-top : 0px none #000000;      /* Épaisseur - Apparence - Couleur */
    border-right : 0px none #000000;    /* Épaisseur - Apparence - Couleur */
    border-bottom : 0px none #000000;   /* Épaisseur - Apparence - Couleur */
    border-left : 0px none #000000;     /* Épaisseur - Apparence - Couleur */
    }

Identifier les bordures

Compléter le code Css ci-dessous pour que :

  • Le code soit écrit en vert et souligné d'un trait rouge.
  • Le titre h1 se présente sous la forme suivante : bordure

Une fois cet exercice terminé, n'hésitez pas à regarder la solution proposée pour voir une astuce sur les couleurs du texte et des bordures.

  • Affichage à obtenir
  • Une solution

Bac à sable - Arrondir les angles

La propriété border-radius permet d'arrondir les coins des bordures. Dans ce bac à sable, les dimensions sont en pixels.

Ci-contre, on peut choisir l'épaisseur, l'apparence et la couleur de la bordure qui encadre le paragraphe, ainsi que l'arrondi des angles (des «coins»).






Code Css : 

p {                               /* Mise en forme des paragraphes */
    border : 0px none #000000;    /* Épaisseur - Apparence - Couleur */
    border-radius : 0 0 0 0;      /* Haut-Gauche Haut-Droit Bas-Droit Bas-Gauche */
    }

Raccourci possible en Css

Pour le même arrondi à tous les angles, on ne donne qu'une seule valeur :

On trouvera le détail sur la page de w3schools.

Fichier avec du contenu

Nous allons reprendre entièrement le fichier dilophosaure.html dans cet exercice.

  1. Retournez dans le répertoire Mon_Site puis ouvrez le fichier dilophosaure.html avec un éditeur de texte (par exemple Notepad++ ou Geany).
  2. Remplacez le paragraphe existant par :
    «Le Dilophosaure, dont le nom scientifique est Dilophosaurus, est un dinosaure théropode carnivore. Il a sur sa tête deux crêtes, d’où son nom de Dilophosaurus qui veut dire lézard à deux crêtes. Ses crêtes sont composées d’extensions du nez et des os lacrymaux».
    Attention de bien baliser les mots importants.
  3. Écrire un titre de niveau 1 intitulé « Dilophosaure ».
  4. Enregistrez puis double-cliquez sur ce fichier. Le navigateur doit alors afficher le contenu ci-dessous :
  5. La mise en forme provient du fichier style.css. Modifiez les règles de style de ce fichier afin d'obtenir l'apparence ci-dessous.

Conseils

  • Pour les bordures «en pointe» du titre, vous pouvez testez la couleur transparent...
  • Pour le fond en dégradé de gris, utilisez le code ci-dessous :
  • Affichage à obtenir
  • Une solution