CREATION D'UN SITE WEB AVEC HTML ET CSS

I.6.ORGANISATION DU TEXTE

I.6.1 Le retour à la ligne

L’exemple suivant :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
    Salut les amis,
    Nous sommes Wissen corporation.

    </body>
</html>

produit le résultat suivant :

J’avais écrit le texte sur deux lignes, mais à l’affichage, les deux phrases sont sur la même ligne. Cela est logique car nous avions dit qu’il faut utiliser des balises pour donner des ordres au navigateur. Pour indiquer au navigateur de faire un retour à la ligne, on utilise la balise <br/> (break)
Reprenons le même exemple mais cette fois-ci avec br


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
    Salut les amis, <br/>Nous sommes Wissen corporation.

    </body>
</html>

Résultat:

Dès que la navigateur rencontre <br/>, il comprend que tout ce qui vient après (que ça soit sur la même ligne ou pas) doit s’afficher à la ligne suivante.

I.6.2 Les paragraphes

En html, un paragraphe est délimité par les balises <p> </p> (paragraph)

Chaque paragraphe crée un retour à la ligne automatique.
Exemple


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
    <p> Salut, bienevue sur mon site. <br/>
    Ce site est conçu pour aider ceux qui veulent apprendre la mathématique et surtout l'informatique.
    Vous trouverez ici des cours bien expliqués... </p>
    <p>
    
    Ce site est conçu par un membre de Wissen corporation, qui est une plate-forme des étudiants 
    de la faculté des Sciences et Technologies de l'université de Kinshasa (UNIKIN) en République Démocratique du Congo (R.D.C.)
     </p>

    </body>
</html>

Ça produit le résultat suivant :

I.6.3 Les titres

Il est possible d’utiliser six niveaux de titre différents, cela s’explique par le fait que tous les titres n’ont pas le même niveau d’importance. Il y a des titres principaux, titres secondaires etc.
Les 6 balises sont :

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Essayons de voir la différence entre ces six titres :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
        <h1> Titre avec h1 </h1>
        <h2> Titre avec h1 </h2>
        <h3> Titre avec h1 </h3>
        <h4> Titre avec h1 </h4>
        <h5> Titre avec h1 </h5>
        <h6> Titre avec h1 </h6>
    </body>
</html>

On peut facilement voir la différence :

Utilisez ces balises non par rapport au niveau de l’affichage mais par rapport au niveau de l’importance du titre à insérer car la taille de l’affichage peut être modifiée avec CSS.

I.6.4. Les éléments em, mark et strong

a) La balise <strong>

La balise <strong> est utilisée pour indiquer aux moteurs de recherche ou au navigateur que le contenu qu’elle encadre est très important afin que celui-ci soit traité avec plus d’importance.
Exemple


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
        <h2> A propos du concepteur </h2>
        <p>ce site est conçu par <strong> Aimé DIUMI </Strong>, co-fondateur et coordonnateur de Wissen Corporation. </p>

    </body>
</html>

produit ceci :

Le navigateur a mis le contenu de la balise <strong> (Aimé DIUMI) automatiquement en gras. Cela ne veut pas dire qu’on utilise la balise strong pour mettre un texte en gras !!!! Non, non et non, elle permet seulement d’indiquer au navigateur que ce contenu est très important et dans cet exemple le navigateur a préféré l’afficher en gras pour faire ressortir visuellement son importance.

b. La balise <em>

La balise <em>, pour emphasis (« emphase » en français) sert elle aussi à signifier qu’un contenu est important, mais moins important tout de même qu’un contenu entre des balises <strong>.
Exemple


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
        <p>>Wikipédia présente <em>Visual basic </em> 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> 

    </body>
</html>

Résultat:

Le navigateur a mis le contenu de la balise <em> en italique, mais n’utilisez pas la balise <em> pour mettre du texte en italique.

c. La balise <mark>

La balise <mark> permet de faire ressortir visuellement le contenu qu’elle encadre.
Exemple


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
        <p>
        Wikipédia présente <mark>Visual basic </mark> 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> 

    </body>
</html>

Résultat:

Parmi les intérêts liés à l’utilisation de ces balises, surtout les deux premières, nous pouvons citer avant tout l’optimisation du référencement de votre site.

I.6.5 Les listes

Il existe trois types de listes :

Listes non ordonnées ou à puces ;
Listes ordonnées ou numérotées et
Listes de définitions

a) Listes non ordonnées

Une liste non ordonnée est une liste dans laquelle les éléments ne sont pas numérotés. Voici l’exemple d’une liste non ordonnée :

Elle n’est pas numérotée.
Pour créer une telle liste, on utilise la balise <ul> </ul> (abréviation de unordered list) et chaque élément de la liste doit être entouré des balises <li> </li> (pour list item).
Schématiquement :

Pour la liste

On doit écrire le code suivant :


<ul>
    <li> Mathématiques</li>
    <li> Programmation</li>
    <li> Programmation web</li>
    <li> Bureautique</li>
</ul>

J’ai mis seulement le code de la liste, insérez ça dans body.

Il est aussi possible de modifier la puce qui s’affiche à côté des éléments, cela se fait grâce à l’attribut type qui peut prendre une des valeurs suivantes : square, circle ou disc.
Exemple


<ul type="square">
    <li> Mathématiques</li>
    <li> Programmation</li>
    <li> Programmation web</li>
    <li> Bureautique</li>
</ul>

Résultat:

b) Les listes ordonnées :

Voici à quoi ressemble une liste ordonnée :

Pour créer une telle liste, le principe est le même sauf qu’on utilise <ol> </ol> (pour ordered list) au lieu de <ul>:
<ol> </ol> : délimite la liste ordonnée <li> </li> : délimite chaque élément de la liste
Exemple


<ol>
    <li> Aimé DIUMI</li>
    <li> Kleine KAMBALA</li>
    <li> Julie DIKOLO</li>
    <li> Moise DIKOLO</li>
</ol>

Le résultat est:

Autres paramètres sur les listes ordonnées

b1) L’attribut start

Par défaut, la numérotation comme par 1, sachez qu’il est à fait possible de commencer à compter à un chiffre différent de 1, pour le faire, on utilise l’attribut start.

Exemple
Je veux que les numéros des éléments commencent par 5


<ol start="5" >
    <li>Université de Kinshasa </li>
    <li> Université Protestante au Congo </li>
    <li>Université Catholique au Congo </li>
    <li> Université Pédagogique Nationale </li>
</ol>

Résultat:

b2) L’attribut reversed

Il existe aussi l'attribut reversed qui permet une numérotation descendante, c’est-à-dire du plus grand numéro au plus petit comme le montre l’exemple suivant :


<ol reversed >
    <li>Université de Kinshasa </li>
    <li> Université Protestante au Congo </li>
    <li>Université Catholique au Congo </li>
    <li> Université Pédagogique Nationale </li>
</ol>

Résultat:

b3) L’attribut type

Cet attribut permet de modifier le type de numérotation des éléments de la liste. Elle peut prendre les valeurs suivantes : A, a, I, i ou 1.
A : la numérotation se fera avec les lettres majuscules de l’alphabet
a : avec les lettres minuscules de l’alphabet
I ou i : Chiffres romains
1 (valeur par défaut) : numérotation décimale
Exemples


<ol type="A" >
    <li>Mathématiques </li>
    <li> Programmation </li>
    <li>Programmation web </li>
    <li> Bureautique </li>
</ol>

Résultat:


<ol type="a" >
    <li>Mathématiques </li>
    <li> Programmation </li>
    <li>Programmation web </li>
    <li> Bureautique </li>
</ol>

Résultat:


<ol type="i" >
    <li>Mathématiques </li>
    <li> Programmation </li>
    <li>Programmation web </li>
    <li> Bureautique </li>
</ol>

Résultat:

On peut aussi définir le type de puces ou de numérotation grâce à CSS, cela est expliqué un peu plus loin dans ce livre.

b4) L’attribut value

Cet attribut permet de réinitialiser la numérotation des éléments.
Exemple


<ol>
    <li>Mathématiques </li>
    <li> Programmation </li>
    <li>Programmation web </li>
    <li value="10"> > Bureautique </li>
    <li>Base de données  </li>
    <li> Sécurité informatique  </li>
    <li> Infographie  </li>
</ol>

Résultat:

A partir de « Bureautique », les éléments sont numérotés à partir de 10 car nous avons réinitialisé la numérotation avec l’attribut value="10".

c) Listes de définitions

Elles sont utilisées pour définir un terme. Pour créer une liste de définition, il va nous falloir utiliser la balise <dl> (pour definition list), la balise <dt> (pour definition term) et l’élément <dd> pour la définition en soi.

Vous devez toujours placer l’élément dt avant l’élément dd, c’est-à-dire le terme à définir avant sa définition.
Exemple


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
        <dl>
            <dt>Equation </dt>
            <dd>Une équation est une égalité qui comporte au moins une inconnue.</dd>
       </dl>

    </body>
</html>

Résultat:

Remarque : listes imbriquées

Sachez qu’il est possible d’imbriquer une liste dans une autre liste, il suffit d’ajouter une balise <ul></ul> ou <ol> </ol> à l’intérieur d’une balise <li> </li>

Exemple
Tester le code suivant : (j’ai écrit seulement le code relatif à la liste, mettez-le dans <body> </body>. Il m’arrivera souvent de ne pas mettre le code entier, mais de votre côté n’oubliez pas qu’on écrit tout ça dans body.


<ol>
    <li>Comptabilité
        <ul>
             <li>Analytique </li>
             <li>Financière </li>
        </ul>
    </li>
    <li >Informatique </li>
    <li>Mathématiques  </li>
        <ol>
             <li>Algèbre </li>
             <li>Analyse </li>
             <li>Géometrie </li>
        </ol>
    <li> Chimie  </li>
    <li> Physique  </li>
</ol>

Voici le résultat:

Essayons de réviser tout ce qu’on a étudié jusque-là :
<p> </p> : délimite un paragraphe
<br/> : fait un retour à la ligne
<h1> </h1> jusqu’à <h6> /h6> : délimite un titre
<ul> </ul> : délimite une liste non ordonnée
<ol> </ol> délimite une liste non ordonnée
<li> </li> : délimite un élément de la liste.
Voici un exemple qui contient les éléments vus jusqu’ici :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation en HTML et CSS</title>
    </head>
    <body>
        <h1> WISSEN CORPORATION</h1>  
        <h2>Présentation</h2> 
        <p>  Wissen Corporation est un groupe d'étudiants de la faculté de Sciences et
        Technologies de l'université de Kinshasa (UNIKIN)
        en République démocratique du Congo (R.D.C.)<br/>
        Le premier objectif poursuivi par ce groupe est le partage de la connaissance,
        car la connaissance c'est comme un chandelier et sa lumière ne diminue 
        pas s'il allume un autre chandelier</p>
        <h2> Formations organisées</h2>
        <p>Nous organisons des formations suivantes: </p>
       <ol>     
            <li> Programmation
                <ul>
                   <li> Visual basic</li>
                   <li> C#</li>
                   <li> Java</li>
                   <li> Python</li>
                   <li> langage C</li>
                </ul>
           </li>
           <li>Base de données </li>
           <li> Programmation web 
                <ul> 
                    <li>HTML ET CSS</li>
                    <li> PHP</li>
                    <li> JavaScript</li>
                    <li> WordPress</li>
                </ul>
          </li>
          <li> Et autres...</li>
      </ol>
      <p> Nos cours ne demandent aucun prérequis, vous n'avez pas besoin de connaitre quelque chose pour lire nos cours<br/>
        Nous écrivons nos cours avec l'hypothèse que vous ne connaissez presque rien sur la matière, c'est pourquoi nous expliquons avec les moindres détails</p>
      <h2> Les formateurs</h2>
        Les formateurs de Wissen Corporation sont :
      <ul> 
            <li> Aimé DIUMI DIKOLO</li>
            <li> Kleine KAMBALA</li>
            <li> Nestor ELOMBO WASSI</li>
            <li> Andy KALOMBO MBIOLA</li>
            <li> Grace PHAKA NZUNZI</li>
            <li> Billy PAUL BOLIKO</li>
            <li> Ruben MOSEPINZA</li>
            <li>Armel KINGOLO</li>
      </ul>     
 
    </body>
</html>

Le code ci-dessus produit le résultat suivant :

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