Qu'est ce que le codage ?

HTML DEFINITION - (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ».

CSS definition - CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Le HTML définit le contenu (comme vous pouvez le voir, c'est brut de décoffrage !). Le CSS permet, lui, d'arranger le contenu et de définir la présentation : couleurs, image de fond, marges, taille du texte…

BALISES DEFINITION - Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci :

Code:

<balise>

À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.

On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires - Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

Code:

<titre>Ceci est un titre</titre>

On distingue une balise ouvrante (< titre >) et une balise fermante () qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un titre.

Code:

Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre

Les balises orphelines - Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».

Une balise orpheline s'écrit comme ceci :

Code:

<image />

 

Bien organiser son texte

Nous allons voir successivement dans ce chapitre :
  - comment rédiger des paragraphes ;
  - comment structurer sa page avec les titres ;
  - comment donner de l'importance à certains mots de son texte ;
 -  comment organiser les informations sous forme de listes.

Les paragraphes - La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise < p > pour délimiter les paragraphes.

Code:

<p>Bonjour et bienvenue sur mon site !</p>

  < p > signifie « Début du paragraphe » ;

  < /p > signifie « Fin du paragraphe ».

Sauter une ligne - En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne comme vous en avez l'habitude. Tout le texte s'affiche sur la même ligne alors qu'on est bien allé à la ligne dans le code ! Taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc strictement à rien.
Comme vous devez vous en douter, il y a pourtant bien un moyen de faire des sauts de ligne en HTML.

En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise < p >.
Votre code HTML devrait donc être au final rempli de balises de paragraphe !

Code:

<p>Bonjour et bienvenue sur mon site !
        Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.</p>
      
        <p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>

Oui, mais si je veux juste aller à la ligne dans un paragraphe et non pas sauter une ligne ?
Eh bien devinez quoi : il existe une balise « Aller à la ligne » ! C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne :

Code:

<br />

Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.

Voici comment l'utiliser dans un code :

Code:

<p>Bonjour et bienvenue sur mon site !<br />
        Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.</p>
        <p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>

Donc c'est compris ?

  < p > < /p > : pour organiser son texte en paragraphes ;
  < br /> : pour aller à la ligne.

Maintenant qu'on sait écrire des paragraphes, voyons voir comment on crée des titres.

Les titres - Lorsque le contenu de votre code va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour vos lecteurs de se repérer. C'est là que les titres deviennent utiles.

En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents. Je veux dire par là qu'on peut dire « Ceci est un titre très important », « Ceci est un titre un peu moins important », « Ceci est un titre encore moins important », etc. On a donc six balises de titres différentes :

- < h1 > < /h1 > : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci.
 - < h2 > < /h2 > : signifie « titre important ».
 - < h3 > < /h3 > : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez).
- < h4 > < /h4 > : titre encore moins important.
-  < h5 > < /h5 > : titre pas important.
- < h6 > < /h6 > : titre vraiment, mais alors là vraiment pas important du tout.



Ne vous laissez pas impressionner par toutes ces balises. En fait, six niveaux de titres, c'est beaucoup. Dans la pratique, personnellement, je n'utilise que les balises < h1 >, < h2 > et < h3 >, et très rarement les autres (je n'ai pas souvent besoin de six niveaux de titres différents). Votre navigateur affiche le titre très important en très gros, le titre un peu moins important en un peu moins gros, etc.



Exemple :

Code:

<h1>Bienvenue sur le Site du Zéro !</h1>
    <p>Bonjour et bienvenue sur mon site : le Site du Zéro.<br />
       Le Site du Zéro, qu'est-ce que c'est ?</p>
    <h2>Des cours pour débutants</h2>
    
    <p>Le Site du Zéro vous propose des cours (tutoriels) destinés aux débutants : aucune connaissance n'est requise pour lire ces cours !</p>
    
    <p>Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à créer un site web, à programmer, à construire des mondes en 3D !</p>
    <h2>Une communauté active</h2>
    
    <p>Vous avez un problème, un élément du cours que vous ne comprenez pas ? Vous avez besoin d'aide pour créer votre site ?<br />
    Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes pas le seul dans ce cas et vous trouverez très certainement quelqu'un qui vous aidera aimablement à résoudre votre problème.</p>

La mise en valeur - Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page.

Mettre un peu en valeur - Pour mettre un peu en valeur votre texte, vous devez utiliser la balise < em > < /em >.
Son utilisation est très simple : encadrez les mots à mettre en valeur avec ces balises et c'est bon ! Je reprends un peu l'exemple de tout à l'heure et j'y mets quelques mots en évidence :

Code:

<p>Bonjour et bienvenue sur mon site !<br />
    Ceci est mon premier test alors <em>soyez indulgents</em> s'il vous plaît, j'apprends petit à petit comment cela marche.</p>

Comme vous pouvez le voir, utiliser la balise < em > a pour conséquence de mettre le texte en italique. En fait, c'est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l'apparence du texte en utilisant l'italique.


Mettre bien en valeur - Pour mettre un texte bien en valeur, on utilise la balise < strong > qui signifie « fort », ou « important » si vous préférez. Elle s'utilise exactement de la même manière que < em > :

Code:

<p>Bonjour et bienvenue sur mon site !<br />
    Ceci est mon premier test alors <strong>soyez indulgents</strong> s'il vous plaît, j'apprends petit à petit comment cela marche.</p>

Vous voyez sûrement le texte s'afficher en gras. Là encore, le gras n'est qu'une conséquence. Le navigateur a choisi d'afficher en gras les mots importants pour les faire ressortir davantage.

La balise < strong > ne signifie pas « mettre en gras » mais « important ». On pourra décider plus tard, en CSS, d'afficher les mots « importants » d'une autre façon que le gras si on le souhaite.

N'oubliez pas : HTML pour le fond, CSS pour la forme !

Je vais peut-être vous sembler un peu lourd mais il est très important qu'on se comprenne bien car les débutants font souvent la même grosse erreur à ce stade. Ils ont vu les balises < em >, < strong >,… et ils se disent : « Chouette, j'ai découvert comment mettre en italique, en gras et comment surligner du texte en HTML ! ».

Et pourtant… ce n'est pas à cela que servent ces balises ! Je sais, je sais, vous allez me dire « Oui mais quand j'utilise < strong > le texte apparaît en gras, donc c'est pour mettre en gras. » et pourtant, c'est une erreur de croire que cette balise sert à cela.
Le rôle des balises est d'indiquer le sens du texte. Ainsi, < strong > indique à l'ordinateur « Ce texte est important ». C'est tout.  Et pour montrer que le texte est important, l'ordinateur décide de le mettre en gras (mais il pourrait aussi bien l'écrire en rouge !). La plupart des navigateurs affichent les textes importants en gras, mais rien ne les y oblige.

Mais alors, comment fait-on pour mettre spécifiquement en gras, pour écrire en rouge, et tout et tout ?
Tout cela se fait en CSS. Souvenez-vous :

Nous verrons le CSS plus loin, pour l'instant nous nous concentrons sur le HTML et ses balises, qui ont chacune un sens particulier.

Les listes - Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes :   les listes non ordonnées ou listes à puces, et  les listes ordonnées ou listes numérotées ou encore énumérations.

C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas de « premier » ni de « dernier »).

Créer une liste non ordonnée - est très simple. Il suffit d'utiliser la balise < ul > que l'on referme un peu plus loin avec < /ul >.

Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre deux balises < li >< /li >. Chacune de ces balises doit se trouver entre < ul > et < /ul >. Vous allez comprendre de suite avec cet exemple :

Code:

<ul>
    <li>Fraises</li>
    <li>Framboises</li>
    <li>Cerises</li>
</ul>

Retenez donc ces deux balises :
  - < ul >< /ul > délimite toute la liste ;
  - < li >< /li > délimite un élément de la liste (une puce).

Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limités à trois éléments.

Et voilà, vous savez créer une liste à puces ! Pas si dur une fois qu'on a compris comment imbriquer les balises.

Créer une liste ordonnée - Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer < ul >< /ul > par < ol >< /ol >.  À l'intérieur de la liste, on ne change rien : on utilise toujours des balises < li >< /li > pour délimiter les éléments. exemple:

Code:

<h1>Ma journée</h1>
<ol>
    <li>Je me lève.</li>
    <li>Je mange et je bois.</li>
    <li>Je retourne me coucher.</li>
</ol>

Par rapport à l'exemple précédent, tout ce qu'on a eu à changer est donc la balise < ol >.

En résumé

-   Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un titre », etc.

 -  Les paragraphes sont définis par la balise < p > < /p > et les sauts de ligne par la balise < br />.

 -  Il existe six niveaux de titre, de < h1 > < /h1 > à < h6 > < /h6 >, à utiliser selon l'importance du titre.

  -  On peut mettre en valeur certains mots avec les balises < strong >, < em > .

  -  Pour créer des listes, on doit utiliser la balise < ul > (liste à puces, non ordonnée) ou < ol > (liste ordonnée). À l'intérieur, on insère les éléments avec une balise < li > pour chaque item.

Crée des liens

Un lien vers un autre site - Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut, en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.

Je vous propose d'essayer de coder le lien qui amène vers le Site du Zéro, comme à la figure suivante.

Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : < a >. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.

Par exemple, le code ci-dessous est un lien qui amène vers le Site du Zéro, situé à l'adresse http://www.siteduzero.com :

Code:

<a href="http://www.siteduzero.com">Site du Zéro</a>

Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment reproduire l'exemple de la figure précédente :

Code:

<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com">Site du Zéro</a> ?<br />
C'est un bon site ! ;-)</p>

Si vous voulez faire un lien vers un autre site, il suffit donc de copier son adresse (on parle d'URL) en http://. Notez que certains liens commencent parfois par https:// (sites sécurisés) ou d'autres préfixes (ftp://,…).

Un lien vers une ancre - Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :

Code:

<h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

Code:

<a href="#mon_ancre">Aller vers l'ancre</a>

Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir ) :

Code:

<h1>Ma grande page</h1>
<p>
    Aller directement à la partie traitant de :<br />
    <a href="#cuisine">La cuisine</a><br />
    <a href="#rollers">Les rollers</a><br />
    <a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="arc">Le tir à l'arc</h2>
<p>... (beaucoup de texte) ...</p>

S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, soit réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté.

Le css

Ou écrit-on le CSS ? - Si le forum est a vous, vous pouvez écrire votre css : dans la feuille de style, dans une page HTML, ou entre des balises < style > < /style >. La meilleurs configuration est de mettre le css dans le feuille de style.

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes < p >, je dois écrire p.

Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par cœur.

Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à cela :

Code:

balise1
{
    propriete1: valeur1;
    propriete2: valeur2;
    propriete3: valeur3;
}
balise2
{
    propriete1: valeur1;
    propriete2: valeur2;
    propriete3: valeur3;
    propriete4: valeur4;
}
balise3
{
    propriete1: valeur1;
}

Vous repérez dans cet extrait de code les balises, propriétés et valeurs dont je viens de vous parler.

Comme vous le voyez, on écrit le nom de la balise (par exemple h1) et on ouvre des accolades pour, à l'intérieur, mettre les propriétés et valeurs que l'on souhaite. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole « deux-points » ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ).

Je vous apprendrai de nombreuses propriétés dans les chapitres suivants. Pour le moment, dans les exemples, on va juste changer la couleur pour s'entraîner.

Le code CSS que nous avons utilisé jusqu'ici :

Code:

p
{
    color: blue;
}

… signifie donc en français : « Je veux que tous mes paragraphes soient écrits en bleu. ». Le résultat est donc visible.