CREATION D'UN SITE WEB AVEC HTML ET CSS

II.4 MISE EN FORME DU TEXTE

II.4.1 La taille du texte

On utilise la propriété font-size pour changer la taille du texte. On peut indiquer de façon précise (cm, mm ou px) ou de façon relative (en %, em ou ex). Cette dernière technique étant la plus souple car elle s’adapte facilement aux préférences des visiteurs.
Illustration

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
         <h1>  LES BASES DU LANGAGE ET MODE CONSOLE </h1> 
         <p class="paragraphe1"> Wikipédia présente Visual basic comme un langage de programmation événementielle de troisième génération 
         ainsi qu’un environnement de développement intégré, créé par Microsoft pour son modèle COM. <br/> Visual basic est directement 
         dérivé du BASIC (acronyme pour Beginner’s All purpose Symbolic Instruction Code ) et permet le développement rapide 
         d’applications, la création d’interfaces utilisateur graphiques, l’accès aux bases de données en utilisant les technologies DAO, ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p> 
         
         <p class="paragraphe2"> Pour coder dans un langage de programmation, il faut des outils adaptés : un éditeur de texte, un compilateur ainsi qu’un débogueur.<br/>  Il y a des programmes qui combinent les trois outils et ces programmes sont appelés Environnement de développement intégré (EDI) ou IDE en anglais, pour Integrated development Environment. </p> 

    </body>
</html>

Forme.css


.paragraphe1
 {
     font-size:14px;
 }
 
 .paragraphe2
 { 
 font-size: 20px;
 }

Le résultat :

A part %, em et ex, il y a une autre méthode qui permet d’indiquer une valeur relative : écrire la taille avec des mots en anglais suivants :

xx-small : minuscule ;
x-small : très petit ;
small : petit ;
medium : moyen ;
large : grand ;
x-large : très grand ;
xx-large :gigantesque.

Modifions le code css précédent :

Forme.css


.paragraphe1
 {
     font-size:small;
 }
 
 .paragraphe2
 { 
 font-size:x-large;
 }

Résultat:

II.4.2 La police

Pour définir la police, on utilise la propriété font-family. Ci-dessous, je vous présente quelques polices reconnus par la plupart des navigateurs.

ALGERIAN
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact Monotype
Symbol Monotype
Times New Roman
Trebuchet MS
Verdana

Exemple

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
        <p class="p1"> Texte en ALGERIAN</p>
        <p class="p2"> Texte en Arial  </p>
        <p class="p3"> Texte en Arial Black </p>
        <P class="pOk"> Texte en Bookman Old</P>
        <p class="p4"> Texte en Comic Sans MS</p>
        <p class="p5"> Texte en Courier New</p>
        <p class="p6"> Texte en Georgia</p>
        <p class="p7"> Texte en Impact </p>
        <p class="p8"> Texte en Symbol Monotype </p>
        <p class="p9"> Texte en Times New Roman</p>
        <p class="p10"> Texte en Trebuchet MS</p>
        <p class="p11"> Texte en Verdana</p>
 
    </body>
</html>

Forme.css


.p1
{
    font-family: ALGERIAN; 
}

 .p2
{
    font-family:arial; 
}
 .p3
{
    font-family: "Arial Black";
}
 .p4
{
    font-family:"Comic Sans MS"; 
}
.p5
{
    font-family:"Courier New" ;
}
 .p6
{
    font-family:Georgia; 
}
 .p7
{
    font-family:Impact ; 
}
 .p8
{
    font-family: "Symbol Monotype";
}
 .p9
{
    font-family:"Times New Roman"; 
}
 .p10
{
    font-family:"Trebuchet MS"; 
}
 .p11
{
    font-family: Verdana;
}
 .p12
{
    font-family:Webdings; 
}
 .pOk
{
    font-family: "Bookman Old";
}

Résultat:

Sur le Web, vous ne pouvez jamais être sûr des polices qu'auront vos lecteurs sur leurs ordinateurs, Il peut arriver que l’internaute n’ait pas la police que vous aviez définie, c’est pourquoi il est conseillé de préciser plusieurs polices séparées par des virgules :

Nous avons ajouté des alternatives à la police1 : Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il passera à lapolice3, et ainsi de suite.

En général, on indique en tout dernier serif, ce qui correspond à une police par défaut (qui ne s'applique que si aucune autre police n'a été trouvée).

II.4.3 L’italique

On utilise la propriété font-style qui peut prendre une des trois valeurs suivantes :

italic : le texte sera en italique.
Oblique : les lettres seront penchées
normal : le texte sera normal : c’est la valeur par défaut. Elle permet entre autres d’annuler la mise en forme en italique.

Exemple

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
         <h1>  LES BASES DU LANGAGE ET MODE CONSOLE </h1> 
         <p class="paragraphe1"> Wikipédia présente Visual basic comme un langage de programmation événementielle de troisième génération 
         ainsi qu’un environnement de développement intégré, créé par Microsoft pour son modèle COM. <br/> Visual basic est directement 
         dérivé du BASIC (acronyme pour Beginner’s All purpose Symbolic Instruction Code ) et permet le développement rapide 
         d’applications, la création d’interfaces utilisateur graphiques, l’accès aux bases de données en utilisant les technologies DAO, ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p> 
         
         <p class="paragraphe2"> Pour coder dans un langage de programmation, il faut des outils adaptés : un éditeur de texte, un compilateur ainsi qu’un débogueur.<br/>  Il y a des programmes qui combinent les trois outils et ces programmes sont appelés Environnement de développement intégré (EDI) ou IDE en anglais, pour Integrated development Environment. </p> 

    </body>
</html>

Forme.css


.paragraphe1
 {
     font-style:italic;
 }
 
 .paragraphe2
 { 
 font-style:oblique;
 }

Résultat:

Remarquez que le résultat de la valeur oblique est légèrement différente de la valeur italic.

II.4.4 Mettre le texte en gras

On utilise la propriété font-weight qui peut prendre les valeurs suivantes :

bold : le texte sera en gras
normal : le texte sera écrit normalement, c’est la valeur par défaut.
Lighter (version allégée de la police) ;
bolder le texte est encore plus en gras;
Une centaine compris entre 100 et 900 (du plus léger au plus gras) ;
Inherit (hérite des styles de ses parents).

Reprenons le même exemple html, changeons seulement le code CSS

Forme.css


.paragraphe1
{
    font-weight: bold;
}

.paragraphe2
{
    font-style: normal;
}

Résultat:

II.4. 5 Le soulignement du texte

On utilise la propriété text-decoration qui peut prendre l’une des valeurs suivantes :

underline : Le texte sera souligné.
line-through : Le texte sera barré.
overline : ligne au-dessus du texte.
blink : le texte va clignoter. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).
none : normal : c’est la valeur par défaut.

Exemple:

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
         <p class="p1" > AIME DIUMI </p>
         <p class="p2" > WISSEN CORPORATION </p>  
         <p class="p3" > JULIE DIKOLO </p>  

    </body>
</html>

Forme.css


.p1
{
    text-decoration:underline;
}
.p2
{
    text-decoration: line-through;
}
.p3
{
    text-decoration: overline;
}

Aperçu:

II.4.6 L’alignement du texte

II.4.6.1 Alignement horizontal

On utilise la propriété Text-align qui peut prendre une des valeurs suivantes :

left : le texte sera aligné à gauche (c'est le réglage par défaut).
center : le texte sera centré.
right : le texte sera aligné à droite.
justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes.

Exemple

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
       <h1> LES BASES DU LANGAGE ET MODE CONSOLE </h1>
       <p class="p1">Wikipédia présente Visual basic comme un langage de 
        programmation événementielle de troisième génération ainsi qu’un 
        environnement de développement intégré, créé par Microsoft pour son 
        modèle COM. Visual basic est directement dérivé du BASIC (acronyme pour Beginner’s All purpose Symbolic Instruction Code ) et 
        permet le développement rapide d’applications, la création d’interfaces utilisateur graphiques, l’accès aux bases de données en 
        utilisant les technologies DAO, 
        ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p>
       
       <p class="p2">Pour coder dans un langage de programmation, il faut des outils adaptés : un éditeur de texte, un compilateur 
       ainsi qu’un débogueur. Il y a des programmes qui combinent les trois outils et ces programmes sont appelés Environnement de
       développement intégré (EDI) ou IDE en anglais, pour Integrated development Environment. </p>
    </body>
    
      <p class="p3">L’éditeur de texte nous permet d’écrire le code source du programme. Le compilateur (Interpréteur) pour 
      transformer le code source en binaire qui est le seul langage compréhensible par la machine. 
        Le débogueur permet de traquer les erreurs dans le programme. 
        Pour Visual basic, nous pouvons utiliser : Visual studio, Visual studio 
        Express, SharpDevelop, MonoDevelop etc. </p>

</html>

Forme.css


  h1
{ 
text-align: center;
}

.p1
{
    text-align:left;
}

.p2
{
    text-align:right;
}

.p3
{
    text-align: justify;
}

Résultat:

Il est bon de noter que le centrage ou l’alignement se fait toujours par rapport à l’élément parent le plus proche du texte.

II.4.6.2 Alignement vertical

On utilise la propriété vertical-align pour gérer l’alignement vertical d’un texte par rapport à un autre élément de la page. Les valeurs possibles sont :

baseline : aligne le texte par rapport au bas de la ligne de texte. C’est la valeur par défaut.
sub : cette valeur met le texte concernée en indice, en dessous de la ligne de base

Exemple:

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
      <p> H<span class="deux" >2</span>O</p>

</html>

J’agrandis la taille de la police et place « 2 » en dessous de « H »

Forme.css


 p
{
font-size: 4.5em;   
}

.deux
{
vertical-align: sub;
}

Résultat:

super : cette valeur met le texte concerné en exposant, soit au-dessus de la ligne de la base.

Exemple:

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
     <p> L'équation du second dégré a la forme : <br />
     <span class="equation"> ax<span class="exposant">2</span>+bx+c  </span>
     </p>


</html>

Forme.css


.equation
{
font-size: 2.5em;
font-style: italic; 
}
.exposant
{
vertical-align: super;
font-size: 0.8em;
}

Résultat:

Les trois valeurs baseline, sup et super alignent un élément par rapport à une ligne de texte, les valeurs suivantes alignent un élément relativement à l’élément parent.

top : elle aligne par rapport au plus haut de l’élément parent.

Exemple
Gardons le même code html utilisé pour la valeur super, mettons cette fois ci top à la place et remarquez la petite différence :

Forme.css


.equation
{
font-size: 2.5em;
font-style: italic; 
}

.exposant
{
vertical-align: top;
font-size: 0.8em;
}

Résultat:

bottom : cette propriété aligne un élément au plus bas de l’élément parent.
middle : aligne un élément par rapport au milieu d’un élément parent.

On peut aussi utiliser une valeur en pourcentage : un pourcentage positif aligne l’élément au-dessus par rapport à la ligne de base et un pourcentage négatif l’aligne en dessous par rapport à la ligne de base.

Pour lire la suite du cours, veuillez télécharger la version pdf du cours
Télécharger

Retrouvez ce cours en version pdf
Télécharger

Retrouvez ce cours en version pdf
Télécharger

I. NOTIONS DE BASE EN HTML
I.1 INTRODUCTION
I.2 LES BALISES ET LES ATTRIBUTS
I.2.1 Les balises
I.2.2 Les attributs
I.3 STRUCTURE DE BASE D’UNE PAGE HTML
I.4 ENREGISTREMENT D’UN FICHIER HTML
I.5 Commentaires en HTML
I.6.ORGANISATION DU TEXTE
I.6.1 Le retour à la ligne
I.6.2 Les paragraphes
I.6.3 Les titres
I.6.4. Les éléments em, mark et strong
I.6.5 Les listes
I.7 LES IMAGES
I.8.LES LIENS
I.8.1. Lien vers une autre page du site
I.8.2 Lien vers un autre site
I.8.3 Lien vers une ancre (point de repère)
I.8.4 Lien pour télécharger un fichier
I.8.5 Lien pour envoyer un email
I.9 L’AUDIO ET LA VIDEO
I.9.1 L’audio
I.9.2 La vidéo
II. MISE EN FORME DU SITE AVEC CSS
II.1 GENERALITES
II.1.1 Structure du code CSS
II.1.2 Où écrit-on le code CSS
II.1.3 Les commentaires en CSS
II.1.4 Appliquer un style particulier avec id et class
II.1. 5 Les balises universelles
II.2 LES SELECTEURS AVANCES
a) Appliquer le même style à plusieurs éléments
b) * : Le sélecteur universel
c) A B : sélectionne une balise B contenue dans A
d) A+B : une balise B qui suit la balise A
e) A[Attribut] : sélectionne une balise contenant un attribut donné
f) A[Attribut="Valeur" ]
g) A[attribut*= "Val"]
h. A > B : sélectionne B qui est enfant (descendant) direct de A
i. A~B : sélectionne tous les éléments B précédés par l’élément A.
j. A[b^="c"]
k. A[b$="c"]
l. A[b*="c"]
II.3 NOTION D’HERITAGE EN CSS
II.4 MISE EN FORME DU TEXTE
II.4.1 La taille du texte
II.4.2 La police
II.4.3 L’italique
II.4.4 Mettre le texte en gras
II.4. 5 Le soulignement du texte
II.4.6 L’alignement du texte