Introduction

Qu'est-ce que le Web ? Comment fonctionne-t-il ?

Le Web est un des services Internet. Il est un ensemble de plusieurs sites Web, qui sont, eux-mêmes, les ensembles des pages Web. Une page Web est un peu comme un document, une feuille dans un livre. Mais pourquoi donc utiliser si le Web n'est que comme un livre ?

Sommaire

Une page Web est complexe avec les parties différentes écrites dans trois langages différents. Chaque langage suit une grammaire différente, et se met différemment dans une page Web. Faites attention aux différences.

Nous allons voir HTML en trois grands chapitres. Le premier, HTML, explique les fondamentales d'une page Web et comment l'écrire. Le deuxième, CSS, explique les styles et comment les utiliser. Le dernier, JS, explique JavaScript et un peu la programmation.

Remarque

Faites attention aux exemples dans ce livre. La casse (MAJUSCULES contre minuscules) est souvent important en informatique. L'espacement, les symboles utilisés, tout peut jouer. Si un exemple ne donne pas, vérifiez que vous avez saisi exactement et correctement comme c'est dans le livre.

Citations

Merci à http://fr.wikibooks.org/wiki/Le_langage_HTML/ pour la base et référence qu'ils ont fait pour cette œuvre. Je vous conseille de regarder ce livre si vous avez des questions ou voulez continuer avec HTML.

HTML

Le langage qu'on utilise pour écrire une page Web de base s'appelle HTML (« Hypertext Markup Language », ou « langage marquage hypertexte »). Ce langage a été développé par Tim Berners-Lee pour partager les recherches scientifiques à CERN, le Centre Européen des Recherches Nucléaire. Il a voulu que tout le monde soit capable de contribuer et construire le Web ensemble.

Notre premier document

Voila un document exemple HTML :

<html>
  <head>
    <title>Mon premier document</title>
  </head>
  <body>
    <p>Soyez le bienvenue !</p>
  </body>
<html>

Comment voir ce document Web ?

Sur l'ordinateur, entrez dans le menu Démarrer. Là, entre dans Tous les programmes, puis Accessoires, puis choisir Bloc-notes. (Sur l'ordinateur anglais, cherchez plutôt Notepad.)

Dans la fenêtre qui vient, saisissez le document au-dessus exactement comme vous le voyez. Entrez dans Fichier, et choisissez Enregistrer. Une autre fenêtre vient qui demande un nom pour le fichier. Mettez n'importe quoi, mais soyez sur que vous enregistrez dans Mes documents et finissez le nom avec .html (point html).

Maintenant, réduisez cette fenêtre. Ouvrez encore le menu Démarrer et ouvrez Mes documents. Cherchez le fichier avec le nom que vous venez de donner à votre fichier. Lancez-le.

Devant vous maintenant, il devrait avoir une page Web. En haut de la fenêtre, il faudrait avoir le texte « Mon premier document - Microsoft Internet Explorer » (ou quelque chose comme ça). En bas de ça, vous verrez une adresse. Cette adresse serait quelque chose comme, C:\Documents and Settings\Mes documents\fichier.html, ou file:///C|/Documents and Settings/Mes documents/fichier.html. En bas encore, vous verrez le contenu de votre page Web, c'est-à-dire le texte « Soyez le bienvenue ! »

Si vous n'avez pas comme cela, cherchez un informaticien ou un professeur d'info qui peut vous orienter. Si vous ne réussissez pas maintenant, les prochains documents seront très confondants !

Nous voyons qu'un document HTML s'écrit dans un logiciel qu'on appelle éditeur de texte. Cet éditeur de texte nous permet seulement, et rien que, d'écrire du code direct, et de l'enregistrer sans aucune modification. Ce qu'on voit est ce qu'il y a.

Dès l'enregistrement d'un document HTML, on peut l'ouvrir avec un autre logiciel, qui s'appelle navigateur. Un navigateur est le logiciel qu'on utilise pour accéder au Web. Parmi ses devoirs, il faut que le navigateur soit capable de lire et interpréter un document HTML. Interpréter veut dire qu'il connaît les codes HTML et leurs fonctions, et il met à l'écran la page Web selon ces fonctions. Il existe plusieurs navigateurs, mais tout ordinateur Windows vient avec le navigateur Microsoft Internet Explorer. Quand on met un document sur le Web, les autres gens vont voir et lire ce document depuis leurs navigateurs. Alors, nous essayons nos documents pour voir comment les autres gens, nos lecteurs, vont les voir.

Pour ouvrir un fichier avec un navigateur, c'est mieux que le nom du fichier finisse avec « .html ». Ceci veut dire à l'ordinateur que le fichier est du type document HTML, et l'ordinateur connaît déjà qu'il faut ouvrir tels documents avec le navigateur.

Rentrez au Bloc-notes. Changez le document qu'il lit plutôt « Sois le bienvenue ! ». Entrez encore dans Fichier -> Enregistrer (cette fois-ci, l'ordinateur va enregistrer dans le même fichier). Rentrez au navigateur, et cherchez une flèche courbée, qui veut dire « actualiser ». Cliquez-la.

Nous voyons que c'est possible de changer une page Web, mais le navigateur va utiliser l'ancienne page jusqu'à on demande d'actualiser. Nous suivons un cycle -- on modifie la page Web, on enregistre, et on revoit dans le navigateur -- jusqu'à la page est complète et correcte. On travaille comme cela avec les deux fenêtres -- une pour modifier la page, et une pour voir comment la même page a changé.

Si par accident on ferme le Bloc-notes, ou on arrête l'ordinateur avant de revenir, on va voir que le document ne s'ouvre que avec le navigateur. On peut ré-ouvrir avec Bloc-notes en cliquant à droit sur le fichier, puis en choisissant « Ouvrir avec... », et puis en choisissant Bloc-notes.

Remarque

HTML, CSS, et JS sont tous interprété par un navigateur, et chaque navigateur est un peu différent. Surtout le navigateur Microsoft Internet Explorer est bien connu comme un navigateur bizarre et anormal. Je ne maîtrise pas très bien toute technique pour gérer les différences entre les navigateurs. J'ai écrit et testé ce document avec le navigateur Mozilla Firefox version 14.0.1. S'il y a les petites différences, pardon !

Révision

  • Rentrez à votre document. Ajoutez encore une phrase après « bienvenue ». Actualisez pour voir si ça a pris.
  • Changez le texte « Mon premier document ». Enregistrez et actualisez dans le navigateur. Qu'est-ce que cela a changé ?

À retenir

  • Un document HTML s'écrit dans un logiciel « éditeur de texte » et se lit dans un « navigateur ».
  • Un document HTML peut se changer, mais pour que le navigateur constate, il faut « actualiser ».
  • Quand on écrit un document, on donne un nom la première fois qu'on enregistre. Désormais, l'ordinateur va utiliser ce même nom.

Structure

HTML est un langage de marquage. Ceci veut dire qu'un document HTML consiste du texte, avec certains codes qui le « marque ». Ces codes s'appellent les balises, et ils s'écrivent entre les signes inférieur et supérieur (< et >). Prenons l'exemple de la balise <p>. Nous voyons qu'il ouvre : <p>, puis il y a du texte, puis il ferme : </p>. Chaque balise doit s'ouvrir et se fermer comme ça. Chaque balise peut contenir du texte, des autres balises, ou un mélange. Donc, nous voyons que tout ce document s'encadre par une balise html, qui commence au début <html> et finit à la fin </html>, et entre ces deux il y a une balise head et une balise body.

Chaque balise a une signification. Nous voyons déjà la balise html, qui a pour rôle de contenir tout le document. La balise body contient le corps du document -- c'est-à-dire, notre propre hypertexte. La balise head contient les informations sur le document, ce qu'on appelle méta-informations. Dans head il y a title, qui contient le titre du document, et dans body il y a p, qui contient un paragraphe. On utilise aussi le nom élément, qui est pareil avec balise.

Exercice. Ajoutez une autre balise p à votre document. Peut-être votre document sera :

<html>
  <head>
    <title>Mon premier document</title>
  </head>
  <body>
    <p>Soyez le bienvenue !</p>
    <p>Mon deuxième paragraphe !</p>
  </body>
<html>

Enregistrez et actualisez la page. Qu'est-ce qui se passe ?

Maintenant, créez beaucoup des lignes et d'espace entre les mots « le » et « bienvenue ». Enregistrez et actualisez. Qu'est-ce qui se passe ?

Nous voyons que chaque paragraphe doit s'encadrer avec la balise p. On ne peut pas créer les espaces ou casser les paragraphes sans code HTML. En effet, HTML ignore presque tout espace dans un document.

Exercice. Mettez une balise titre dans body, avec un contenu différent de l'autre. Enregistrez et actualisez la page. Quel titre s'est mis en haut de la fenêtre ? Qu'est-ce qui se passe avec l'autre ?

Exercice. Mettez aussi la balise p dans title, par exemple en mettant le titre <p>Mon premier document</p>. Qu'est-ce qui se passe ?

Nous voyons que certaines balises ne sont valables que dans certains endroits. Notamment, aucune balise ne fonctionne dans title, et title ne fonctionne que dans head.

Si tout ceci vous convient, continuons avec des nouvelles balises.

Remarque. Si vous constatez que votre navigateur refuse de traiter les lettres avec accents, mettez cette balise dans head :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Si ça n'arrange pas le problème, essayez plutôt

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

Cette balise dit à l'ordinateur que ce texte est codé selon une norme qui permet les lettres avec les accents. Ne vous inquiétez pas si ceci vous confond ! Ce n'est pas obligé qu'on comprend cette balise.

À retenir

  • Les documents HTML contient du texte avec les balises, indiqué par les < et >.
  • HTML ignore l'espace.
  • Chaque balise s'ouvre et se ferme. Ce qui est entre l'ouverture et la fermeture est « contenu » par la balise.
  • Les balises peuvent contenir les autres balises.

Titres

Dit Wikibooks :

Un document HTML doit être structuré correctement afin d'être bien compris par les lecteurs humains ainsi que les programmes informatiques (par exemple les robots d'indexation des moteurs de recherche). « Structuré correctement » signifie divisé en titres, sous-titres et paragraphes.

http://fr.wikibooks.org/wiki/Le_langage_HTML/Titres_et_paragraphes

Nous avons déjà vu comment mettre les paragraphes dans un texte. Pour préciser que du texte est un titre, on utilise les balises de la série h (« heading » en anglais). Ces balises sont de h1 (titre), h2 (sous-titre), jusqu'à h6 (sous-sous-sous-sous-sous-titre).

Un exemple :

<h1>Ma première page Web</h1>
<p>Voilà le premier paragraphe de ma page !</p>
<h2>La raison d'être de ma page</h2>
<p>J'ai écrit cette page pour expérimenter avec le langage HTML</p>
<h3>Les expériences que j'ai faites ici</h3>
<p>Dans cette page, j'ai utilisé les balises body, html, h1, h2, h3, et p.</p>

Qui donne:

Ma première page Web

Voilà le premier paragraphe de ma page !

La raison d'être de ma page

J'ai écrit cette page pour expérimenter avec le langage HTML

Les expériences que j'ai faites ici

Dans cette page, j'ai utilisé les balises body, html, h1, h2, h3, et p.

Dès la séparation de la page en titres, sous-titres et paragraphes, on peut aussi mettre les lignes de séparation, les règles. Pour le faire, on utilise la balise <hr />.

Exercice. Essayez de mettre la balise hr et voyez comment elle se présente.

Format

Mettez la balise em dans votre document HTML, autour d'un mot. Par exemple, changez document qu'il soit <em>document</em>. Enregistrez et actualisez la page. On voit que le texte qu'on a encadré avec <em> est maintenant italique. La balise em veut dire emphase, et on l'utilise pour mettre une emphase sur une partie du texte. Généralement, un navigateur va montrer cette emphase en mettant du texte en italique.

Exercice. Également il existe une balise strong. Essayez-la maintenant. Qu'est-ce qu'elle fait ? On l'appelle strong parce qu'elle met une emphase « forte ».

Nous voyons encore comment les balises sont utilisées pour marquer du texte. Le texte peut exister déjà; la balise le modifie seulement.

Ces balises em et strong ont des effets visuels -- c'est-à-dire, elles changent la forme du texte -- mais elles ont aussi une signification sémantique -- c'est-à-dire, elles veulent dire quelque chose sur le texte qui y est contenu. Imaginons que je parle à mon enfant : « Je serai fier si tu a 12 en informatique, mais je serai très fier si tu a 16. » Quand je dit « très », je suis en train de mettre une emphase. Si je veux que le mot-là tire l'attention du lecteur, je mets <em>. Si je veut mettre une grande emphase -- « très, TRÈS fier » -- je mets <strong>.

Par contre, il existe aussi les balises qui n'ont pas de signification. Par exemple, il y a la balise i, qui veut dire « italique », et b, qui veut dire « gras ». Ces balises n'ont aucune signification sémantique. Ils ne signifient aucune emphase. Ils sont utiles si on veut mettre quelque chose en italique simple, comme le nom d'une marque.

Pourquoi avoir les deux genres de balises ? Imaginons un aveugle. Il ne lit pas l'écran. Il a plutôt un logiciel qui lit à sa place. Si le logiciel lecteur rencontre la balise i, il ne peut rien faire, comme on ne peut pas mettre une voix en italique. Mais si, par contre, le lecteur arrive à la balise em, il connaît qu'il faut exprimer une emphase, soit en parlant plus fort, en tirant le mot, ou quel que ça soit.

En plus, les balises i et b (et aussi u, pour souligner) sont plus anciens que les nouvelles balises em et strong. Aujourd'hui, on peut dire que i et b (et surtout u) sont désuet -- c'est-à-dire, démodé, ancien, non plus utilisé. Dans HTML, on cherche à exprimer la signification du texte, et on applique sa forme après. On va voir, dans le chapitre CSS, comment mettre les styles plus précisément.

Exercice. Je vois que <i>texte</i> met du texte en italique, et <b>texte</b> en gras. Si je veux mettre du texte en italique et aussi en gras, comment fais-je ? Trouvez une moyenne.

Exercice. Avec votre réponse du dernier exercice, mettez ce texte dans votre document :

Cette connexion Camtel est très mauvaise.

Une autre balise existe qui fait seulement dans le style. Il s'appelle <br>. La balise br ne contient jamais aucun texte. Chaque balise doit se fermer : <br></br>. Mais on voit qu'il ne sert à rien d'avoir cette fermeture si la balise ne contient rien. Donc, on a un raccourci: on écrit <br/>. Ceci est exactement équivalent à <br></br>. On appelle ce genre de balise, une balise ponctuelle.

Exercice. Mettez la balise <br/> dans votre document, entre deux mots. Qu'est-ce qu'il fait ?

On voit que la balise <br/> casse une ligne, sans créer un nouveau paragraphe.

Voilà certains autres styles de texte :

  • cite représente une référence à une autre œuvre.
  • q représente une citation.
  • blockquote représente une citation à part, ou un « bloc de citation ».
  • code représente du code, et se présente par du texte à chasse fixe (comme ceci)
  • pre représente du texte déjà formaté, c'est-à-dire avec chaque espace mis correctement. Il utilise la même police comme code.

Exercice. Identifier les balises utilisées dans ce texte :

J'ai pris cet exemple HTML de Wikibooks - Le langage HTML. Ils m'ont dit que je peux utiliser <q>. Voilà ce qu'ils ont écrit :
Pour les balises de citation (<q> et <blockquote>), on peut préciser la source, avec le paramètre cite indiquant son URL.

À retenir

  • Certaines balises sont sémantiques, avec une signification. En HTML, on écrit ce qu'on veut exprimer, et non sa forme.
  • Certaines techniques sont désuetes, et c'est mieux de ne pas les utiliser.
  • Une balise peut se fermer en ajoutant un slash (« / ») avant le signe supérieur. Une balise qui se ferme comme ça s'appelle ponctuelle.

Désuet

Parfois il existe les autres techniques désuets dans le HTML. Quand vous voyez une section « Désuet » (comme celle-ci), c'est pour que vous sachez ces techniques et les reconnaissez s'ils arrivent sur le Bac. Peut-être c'est utile de les essayez dans un document HTML pour voir comment ils marchent.

Il existe certaines balises de mise en forme qui sont maintenant remplacé par le CSS.

  • tt, qui met du texte en police comme la machine à écrire (identique avec code).
  • big, qui augmente la taille du texte, et small qui diminue la taille du texte.
  • strike, qui barre du texte
  • center, qui centre un texte
  • bien sur, i, b, peuvent être utilisés dans une manière désuet aussi (comme dit au-dessus).

Il existe aussi une autre balise qui existe rien que pour mettre un texte en forme : font. Elle est bien désuet. Elle peut prendre certains attributs (voir Images pour mieux comprendre attributs) :

  • <font face="POLICE"> permet de changer la police utilisé par une page Web.
  • <font size="TAILLE"> permet de changer la taille de la police. On peut mettre soit un nombre absolu (comme « 12 »), ou un signe « + » ou « - » suivi par un nombre (comme « +3 »). Le signe signale que la taille doit changer de ce que c'est maintenant.
  • Bien sûr, on peut utiliser les deux à la fois : <font size="12" face="Times New Roman">.

Chaque balise peut aussi avoir l'attribut align, qui peut être left (aligner à gauche), right (aligner à droite), center (centrer), ou justify (justifier).

On va explorer comment faire tout ceci avec CSS.

Commentaires

Les commentaires sont utilisé pour ajouter du texte pour l'auteur du texte HTML. Le navigateur lit et ignore ces commentaires, mais la personne qui lit le texte HTML peut toujours les voir. On utilise un commentaire pour exprimer quelque chose pour l'auteur et non le lecteur, ou pour désactiver une partie du HTML pour qu'il ne joue pas.

Pour écrire un commentaire, on écrit : <!-- COMMENTAIRE -->. Par exemple, on peut mettre : <!-- fin du premier chapitre -->. Maintenant, quand je cherche la fin de ce chapitre, je peux facilement trouver.

Symboles

Dans une page HTML, il arrive souvent qu'on veut mettre certains symboles. Un exemple facile est la signe inférieur / supérieur, qu'on ne peut pas mettre parce qu'ils signalent le début / la fin d'une balise. Mais si je veux mettre du texte comme 3 < 4, je fais comment ?

Pour ceci, HTML inclut aussi ce qu'on appelle les entités. Une entité commence avec le symbole esperluette « & », puis se suit avec le nom du symbole que vous voulez mettre, et puis point-virgule. Par exemple, le symbole inférieur « < » s'écrit &lt; (lt pour « less than »), et « > » est &gt;.

Mais comment encore mettre lui-même l'esperluette ? Pour cela, il existe aussi l'entité &amp;.

Si vous vous trouvez quelque part avec un clavier qui n'a pas d'accent, c'est aussi possible de les mettre avec les entités &eacute; (é), &egrave; (è), &ecirc; (ê), &euml; (ë). Ces entités existe pour chaque voyelle, en minuscule et majuscule. Donc, il existe &eacute;, &Eacute;, &iacute;, &Iacute;, et ainsi de suite. Il existe aussi &ccedil; (ç), &oelig; (œ), et &euro; (€).

Il existe aussi une entité qui fait un espace. Nous avons déjà vu que l'espace peut se mettre simplement dans un document HTML, mais il y a une autre qualité d'espace, qui se représente par l'entité &nbsp;. Cette entité fait un espace insécable (« non-breaking space » en anglais). Insécable veut dire que les deux mots séparés par l'espace doivent être ensemble -- l'ordinateur ne va jamais mettre le premier mot sur une ligne et puis le deuxième mot sur la ligne suivante. Selon Wikibooks,

en typographie française, on met une espace insécable avant les deux-points « : », point-virgule « ; », points d'exclamation et d'interrogation « ! ? », et à l'intérieur des guillemets et des tirets d'incise ; cela évite d'avoir ces caractères séparés du mot qui les précède — ou les suit — par un retour de ligne.

http://fr.wikibooks.org/wiki/Le_langage_HTML/Version_imprimable#cite_note-4

Nous avons déjà vu que les espaces dans un document HTML sont ignorés -- plusieurs espaces auront toujours le même effet comme un seul espace. S'il faut vraiment mettre plusieurs espaces dans un document HTML, on peut utiliser l'entité &nbsp;. Chaque &nbsp; fait un espace. Mais réfléchissez bien avant d'utiliser -- à quoi servent vraiment plusieurs espaces comme ça ?

Exercice. Saisissez le code HTML dans votre document pour que le texte suivant sorte : hôpital > égoïsme.

À retenir

  • Les entités sont une moyenne d'avoir accès aux symboles absents du clavier, ou bien les symboles qui ont normalement une signification spéciale.
  • Une entité est saisie avec l'esperluette, &, au début, puis le nom de l'entité, puis le point-virgule, ;.

Images

HTML a l'avantage de permettre de facilement ajouter les objets multimédia -- c'est-à-dire, les images, les sons, ou les vidéos. Pour nous, on va découvrir seulement les images.

Pour utiliser, il faut créer une image. Entrez encore dans le menu Démarrer et puis Accessoires, et choisissez le programme Paint. Ce programme est un programme de dessin simple. Dessinez un peu, et finalement enregistrez votre image. Notez le nom que vous donnez à cette image.

Dans votre document HTML, ajoutez la balise img, comme ceci :

<img src="nom.bmp"/>

(Remplacez nom avec le nom du fichier que vous avez choisi.)

Actualisez votre page. Vous devriez voir votre image mélange avec votre texte.

Nous voyons que la balise img ne peut rien contenir, donc est une balise ponctuelle. Nous voyons aussi une nouvelle partie des balises -- ce qu'on appelle attribut. La balise img a un attribut src, qui précise l'endroit où trouver l'image. On dit que le nom du fichier est la valeur de l'attribut. On voit que les attributs doivent être séparer avec les espaces, et leurs valeurs doivent être encadrées avec les guillemets.

Si la balise a plusieurs attributs, ils peuvent être dans n'importe quel ordre.

La balise img a toujours l'attribut src, qui a pour valeur le nom du fichier à mettre dans la page. L'attribut src se trouvera aussi dans les autres balises après.

À retenir

  • Certaines balises ont les attributs. La forme d'un attribut est : att="valeur", avec la valeur de l'attribut entre guillemets.
  • Les attributs sur une balise peuvent être dans n'importe quel ordre.
  • La balise img a l'attribut src, qui précise où trouver le fichier image.
  • On peut dessiner sa propre image avec un logiciel de dessin, par exemple Paint.

Désuet

La balise img prend aussi les attributs height (hauteur) et width (largeur), qui peuvent s'utiliser pour dimensionner l'image. Cependant, on peut le faire plus souvent avec CSS.

Liens

On a dit que la puissance de HTML est qu'il permet facilement d'ajouter les images. On l'a déjà vu comment faire. L'autre puissance de HTML est qu'il permet hypertexte, c'est-à-dire du texte qui contient les liens aux autres pages Web.

Pour voir cette puissance, il nous faut deux pages. Vous en avez déjà une. Ouvrons encore Bloc-notes pour créer la seconde. Saisissez une page Web avec un head et body comme la première. Aussi, mettez ce code :

<a href="NOM.html">cliquez ici</a>

Mais remplacez « NOM » avec le nom de l'autre page Web que vous aviez créé. Maintenant, quand vous ouvrez cette page Web, vous devriez voir le texte « cliquez ici » souligné, avec une couleur différente. Ceci est un lien ou hyperlien. Vous pouvez cliquez là-dessus. Quand vous le faites, la page que vous regardez changera pour être l'ancien page Web. Notons que le texte à afficher pour ce lien est le contenu de la balise.

Exercice. Mettez sur votre première page un lien qui part à la nouvelle page.

Exercice. Est-ce que c'est possible de mettre un lien dont le texte est en italique ? Trouvez une moyenne.

À retenir

  • Pour mettre un hyperlien, il faut la balise a avec l'attribut href. Sans href, la balise ne va rien faire.

Chemin

La balise a prend un attribut href. La valeur de cet attribut, comme celle de l'attribut src pour img, est un chemin. Un chemin (ou chemin d'accès) est le nom d'un fichier sur un ordinateur. Ici on a mis que le nom d'un fichier dans le même dossier -- ce qu'on appelle un chemin relatif. Relatif veut dire que le nom du fichier est précisé par rapport au fichier courant, dans le même dossier. Nous pouvions également mettre le nom d'un fichier dans un sous-dossier avec <a href="dossier/NOM.html">. Dans ces cas, le chemin est compris de quelque chose qu'on doit marier avec le chemin où se trouve le fichier courant avant de trouver le nouveau fichier. Dans un site, c'est souvent les chemins relatifs qu'on utilise.

Si j'ai mon document HTML dans le dossier C:\Documents and Settings\Mes documents\HTML, et le nom du fichier est page1.html, le chemin d'accès pour ce fichier est C:\Documents and Settings\Mes documents\HTML\page1.html. Si je mets dans ce fichier un lien qui part à page2.html, cliquer sur ce lien va changer la page à C:\Documents and Settings\Mes documents\HTML\page2.html. Si je mets dans ce fichier un lien qui part à photos/image.jpg, cliquer sur ce lien va m'amener à C:\Documents and Settings\Mes documents\HTML\photos\image.jpg. Notez que, alors que les dossiers se distinguent avec « » sur les systèmes Windows, dans HTML c'est toujours mieux d'utiliser « / », comme sur les systèmes Linux.

Un chemin, au lieu d'être relatif, peut être absolu. Dans ce cas, le chemin est entier et propre à lui. Un chemin absolu commence généralement avec « http:// » ou « / ». Pour faire référence à un site différent, on utilise toujours les chemins absolus. Par exemple, « http://www.google.cm/ » est le chemin du site Google pour le Cameroun. Si on met « / » au début du chemin, c'est pour changer la page mais garder le site. Donc, si je mets dans la page C:\Documents and Settings\Mes documents\HTML\page1.html un lien vers /page2.html, cliquer ce lien va ramener à C:\page2.html.

Exercice. Pour chaque chemin, précisez si il est relatif ou absolu, et leur destination ultime si on les met dans un document C:\Ethan\HTML\my-page.html.

  • http://www.yahoo.fr/
  • infos.html
  • /images/étoile.gif
  • dossier/origine.html
  • facebook.com

Listes

HTML permet aussi de coder les listes des choses. Il existe trois qualités de liste :

  • il y a les listes « ordonnées », numérotées, c'est-à-dire avec un numéro pour chaque élément de la liste,
  • également il existe les listes « non-ordonnées », non numérotées, qui ont qu'une puce pour chaque élément,
  • finalement il existe une liste de définitions, qui est très rarement utilisée.

Nous voyons qu'ici j'ai utilisé une liste non-ordonnée. La liste numérotée est utilisée s'il y a un ordre des éléments. Si je fais une liste des choses qui n'ont pas un ordre exact, j'utilise une liste non-ordonnée.

La liste ordonnée et la liste non-ordonnée sont un peu mêmes. Pour les utiliser, je mets d'abord une balise, soit ol pour liste ordonnée, soit ul pour liste non-ordonnée. Dans cette balise, je mets plusieurs balises li. Exemple :

<ul>
  <li>première chose</li>
  <li>deuxième chose</li>
  <li>troisième chose</li>
</ul>

Qui donne :

  • première chose
  • deuxième chose
  • troisième chose

Exercice. Écrivez dans votre document HTML une liste des niveaux scolaires au lycée. Faut-il utiliser une liste ordonnée ou non-ordonnée ?

Une liste des définitions est un peu différent des autres qualités de liste. C'est aussi beaucoup plus rare -- beaucoup de documents ont les listes des choses, mais très peu ont beaucoup de définitions.

Pour faire une liste de définitions, on utilise les balises dl, dt, et dd. dl veut dire « liste de définition »>. Dans cet élément, on met plusieurs paires des éléments dt (« terme à définir ») et dd (« définition »).

Exercice. Avec cette explication, essayez d'écrire une liste de définitions comme celle-ci.

HTML
Hypertext Markup Language; langage du Web
navigateur
logiciel qu'on utilise pour lire le HTML

À retenir

  • Une liste est mise avec la balise ol (ordonnée) ou ul (non-ordonnée). Les choses dans la liste sont mises avec la balise li.
  • Une liste de définition est mise avec la balise dl. Les termes à définir sont mises avec la balise dt et les définitions avec dd.

Tableaux

HTML permet aussi de coder les tableaux. Un tableau est utile pour afficher et organiser les informations.

Utiliser un tableau demande trois balises. table contient tout le tableau. tr contient un rang du tableau. Puis, chaque cellule du tableau se met dans la balise td. Donc, la balise tr contient plusieurs balises td, et la balise table compte plusieurs balises tr.

Exercice. Avec cette description, essayez de créer ce tableau dans votre document HTML.

Ville Région Population
Yaoundé Centre 1.230.000
Douala Littoral 1.500.000
Bafoussam Ouest 350.000

Si le tableau n'est pas bien clair, on peut ajouter l'attribut border="1" à la balise table. Ceci va ajouter une bordure autour du tableau et même des cellules. Cet attribut est désuet; c'est préférable d'utiliser CSS pour ajouter les bordures.

Pour les cellules d'en-tête, on peut utiliser la balise th (au lieu de td). Ces cellules peuvent avoir une forme différente, et ils signalent qu'ils sont les étiquettes pour les autres cellules.

Chaque cellule, soit th ou td, peut aussi avoir les attributs pour indiquer leur largeur -- ce qu'on appelle aussi fusionnée les cellules. Les attributs disponibles sont colspan, qui précise combien de colonnes la cellule prend, et rowspan, qui précise combien de rangs la cellule prend.

Exercice. Saisissez ce tableau HTML, et remarquez sa forme donnée.

<table>
  <tr>
    <th>th 1</th>
    <th>th 2</th>
    <th>th 3</th>
  </tr>
  <tr>
    <td colspan="2">td colspan 2</td>
    <td rowspan="3">td rowspan 2</td>
  </tr>
  <tr>
    <td>tr 2, td 1</td>
    <td>tr 2, td 2</td>
  </tr>
</table>

À retenir

  • On met un tableau avec la balise table. Dans ce tableau, on met plusieurs rangs avec la balise tr. Dans chaque rang, on met plusieurs cellules avec la balise td.
  • Pour mettre une emphase sur les en-têtes des colonnes, on utilise la balise th au lieu de td.
  • Pour fusionner les cellules, on met sur la balise td l'attribut colspan ou rowspan.
  • Pour mieux tracer le tableau, on peut ajouter l'attribut désuet border="1".

Désuet

Il existe beaucoup d'attributs sur table, tr, th, et td qui contrôle leur mise en forme. Ils sont tous désuets. La moyenne courante de changer ces mises en forme et d'utiliser CSS.

table :

  • border contrôle s'il y a les traits ou non, et quelle épaisseur ces traits doivent avoir (en pixels). Donc, border="0" veut dire « pas de traits », et border="10" veut dire « traits de 10 pixels ».
  • width contrôle la largeur totale du tableau, soit un nombre de pixels (width="500") ou un pourcentage de la taille totale de la page (width="50%").
  • rules contrôle quels traits sont dessinés dedans un tableau. rules peut avoir une valeur de all (tout trait), rows (traits entre les rangs), cols (traits entre les rangs), ou none (aucunt trait à l'intérieur du tableau).
  • frames contrôle quels traits sont dessinés du cadre du tableau. La valeur doit être border (tout trait), hsides (en haut et en bas), above (seul en haut), below (seul en bas), vsides (à gauche et à droit), lhs (« left hand side », seul à gauche), rhs (« right hand side », seul à droite), ou void (aucun trait de cadre).

tr, th et td:

  • align fonctionne comme align sur les autres balises, mais il existe aussi valign qui centre son contenu verticalement (c'est-à-dire, entre haut et bas).

Accessibilité

Rappelons-nous que les malvoyants utilisent aussi les ordinateurs, et même le Web. Ils utilisent parfois les logiciels de lecture d'écran. Pour mieux accueillir ces utilisateurs, on peut :

  • Ajouter l'attribut summary aux tableaux. Cet attribut a pour valeur un résumé ou explication du contenu du tableau.
  • Chaque image devrait avoir l'attribut alt qui donne un texte de remplacement pour les navigateurs non-graphiques.

Autres balises

Il existe aussi les balises des cadres. La plus bien connue est <iframe>, qui sert à afficher une autre page dans une partie d'une page. La page à afficher est exprimée avec l'attribut src.

Résumé

Si vous avez bien compris ce chapitre, c'est que vous pouvez maintenant écrire une page Web avec les images et un peu de mise en forme.

Exercice. Écrivez du nouveau une page HTML qui contient une image, deux titres, et un lien à une autre page.

Ceci n'est pas toute chose qui existe en HTML; on va voir les attributs class et id dans le chapitre CSS, et les formulaires dans le chapitre JS.

CSS

CSS est un sigle qui vient de l'anglais « Cascading Style Sheets », ou feuilles de style en cascade. Ceci veut dire trois choses :

Notre première feuille de style CSS

Ouvrez à nouveau Bloc-notes et saisissez ce texte :

p {
  background-color: blue;
}

Enregistrez ce fichier avec le nom « style1.css ». Ouvrez encore Bloc-notes et saisissez ce document HTML :

<html>
  <head>
    <title>Mon premier document HTML avec CSS</title>
    <link rel="stylesheet" type="text/css" href="style1.css" />
  </head>
  <body>
    <p>Voici un paragraphe simple.</p>
  </body>
</html>

Enregistrez ce document HTML, et ouvrez-le dans un navigateur. Si vous avez fait correctement, votre paragraphe aura une surbrillance ou fond de la couleur bleue.

Ce qu'on a fait c'est de mettre une feuille de style. Ce qu'on a écrit dans le fichier style1.css est dans la langue CSS. Pour utiliser cette feuille de style dans notre document HTML, on a ajouté une balise link, qui veut dire « lien ». En mettant la balise link, on a lié le document HTML à la feuille de style.

La balise link a trois attributs :

  • rel="stylesheet", que le lien est pour une feuille de style et non une autre chose à lier.
  • type="text/css", dit que la feuille de style est écrite dans la langue CSS, et non une autre langue.
  • href="style1.css" donne le nom du fichier où trouver la feuille de style. La valeur de cet attribut peut être un Chemin ou un nom de fichier simple.

Comme d'autres balises et d'autres attributs, ils peuvent être dans n'importe quel ordre.

Quand le navigateur charge la page Web, il lit le HTML pour comprendre la structure de cette page -- c'est-à-dire, quels éléments sont contenus par lesquels autres. Puis, s'il voit les éléments link dans head, il les charge aussi, et les utilise pour contrôler certaines autres choses dans la page. Un link avec rel="stylesheet" est une feuille de style, et il applique cette feuille de style pour orner la page.

Dans la feuille de style, il voit plusieurs blocs comme celui-ci :

p {
  background-color: blue;
}

Ce bloc précise quels éléments changer (p), et puis, comment les changer (background-color: blue;). La première partie s'appelle le sélecteur, et la deuxième partie les règles. Dans cet exemple, il n'y a qu'un sélecteur et une règle. La règle précise que chaque élément p aura la propriété background-color de blue. Qui fait que le fond de ces éléments dans le navigateur sera changé !

Une règle CSS a toujours la forme PROPRIÉTÉ: VALEUR;, c'est-à-dire une propriété, puis le deux-points, puis la valeur, puis le point-virgule.

Exercice. Ajoutez un autre paragraphe, c'est-à-dire un autre élément p, à votre document HTML. Actualisez. Est-ce qu'il a aussi un fond bleu ?

Exercice. Ajoutez au bloc de votre feuille de style la ligne color: green;. Actualisez. Qu'est-ce qui c'est passé ?

Exercice. Changez votre feuille de style que le fond soit rouge et non bleu.

Exercice. Ajoutez encore un bloc à la fin de la feuille de style comme celui-ci :

body {
  background-color: blue;
}

Actualisez. Qu'est-ce qui se passe ?

Nous voyons qu'un bloc CSS s'applique à tout élément qui convient au sélecteur, et qu'on peut changer plusieurs choses avec un seul bloc CSS. Nous voyons aussi que le sélecteur p précise tout balise <p> dans le HTML.

Exercice. Entrez encore dans votre document HTML. Mettez le mot « paragraphe » en gras. Comment changer la feuille de style que le fond s'applique seulement à ce mot ? Trouvez une moyenne.

Exercice. Après avoir fait le dernier exercice, changez votre feuille de style, qu'il soit comme ceci :

p {
  background-color: blue;
}

strong {
  font-size: 150%;
}

Actualisez. Qu'est-ce qui se passe ?

Nous voyons que les propriétés d'un élément s'appliquent aussi aux éléments contenus dans cet élément, aussi que les propriétés qui s'appliquent à ces éléments contenus mêmes. Aussi, nous voyons qu'il existe une propriété font-size, qui change la taille du texte.

Exercice. Changez cette feuille de style que tout paragraphe a un fond bleu, et que seulement les mots gras ont le texte en rouge.

À retenir

  • Une feuille de style contrôle la présentation d'un document HTML.
  • On ajoute une feuille de style à un document HTML avec la balise link.
  • Le nom de la feuille de style n'est pas fixe. Il faut seulement que le nom corresponde à ce qu'on trouve dans la balise link.
  • Une feuille de style est composée des blocs. Chaque bloc a un sélecteur et plusieurs règles.
  • Une règle CSS a toujours la forme PROPRIÉTÉ: VALEUR;.
  • La propriété background-color change le fond d'un élément. color change la couleur d'écriture. font-size change la taille d'écriture.

Couleurs

Nous avons déjà vu deux propriétés qui prennent les couleurs : background-color, et color. Jusqu'au présent, on a nommé les couleurs seulement avec leurs noms anglais. Mais il existe une autre manière pour les préciser. Dans CSS, au lieu de nommer une couleur, on peut aussi mettre son code. Un code pour une couleur a la forme #rrvvbb. C'est-à-dire, le symbole dièse, puis deux chiffres, puis deux chiffres, puis deux chiffres. Ces chiffres sont hexadécimales, donc de 00 à ff (255). Les premiers deux chiffres correspondent au niveau de rouge. Les deux chiffres au milieu donnent le niveau de vert. Les derniers chiffres sont le niveau de bleu.

Un exemple d'une couleur, donc, est #ff0000. Ceci veut dire, rouge au niveau ff, vert au niveau 00, et bleu au niveau 00. Donc, ensemble ceci va donner un rouge fort.

#000000 veut dire, tout couleur à 0, donc noir. Par contre, #ffffff veut dire tout couleur à la plus foncée, donc blanc.

Si on ne maîtrise pas les chiffres hexadécimale, on peut également préciser les chiffres RVB avec le code rgb(rrr,vvv,bbb). Chaque couleur est entre 0 et 255. Dans cette forme, la couleur rouge sera rgb(255,0,0).

C'est aussi possible de mettre une couleur avec une transparence en utilisant la forme rgba(rrr,vvv,bbb,aaa). aaa ici veut dire « alpha », et ce nombre correspond au niveau de transparence qu'il y a dans la couleur. Ceci est utile se vous voulez montrer une image qui existe au-dessous de l'élément.

Exercice. Trouvez un code pour la couleur violet. Avis : violet est un mélange de bleu et rouge.

Exercice. Trouvez un code pour la couleur rose. Avis : rose est un mélange de rouge et blanc.

Exercice. Trouvez un code pour la couleur jaune.

Tailles

Par contre, sur la propriété font-size on a mis un autre type de valeur. Cette valeur a été un pourcentage.

Partout CSS il existe les endroits où on met une taille. Une taille peut s'exprimer dans plusieurs manières :

  • D'abord, on a un pourcentage, comme on voit ici. En générale, un pourcentage joue par rapport à la taille de l'élément parent. Par exemple, ici, la taille de police a été mise à 150% de la taille de police parent.
  • On peut également exprimer avec une mesure fixe, avec l'unité cm, par exemple 2cm.
  • On peut aussi utilise l'unité px (pixel), par exemple 10px. Un pixel est l'unité la plus petite d'un dessin sur l'écran. L'écran où j'écris ceci a une résolution de 1024px par 600px. C'est dangereux d'utiliser les mesures en pixels parce que sur un autre écran, votre page Web peut apparaître bien différent ou même illisible.
  • Mieux vaut utiliser l'unité de taille em, par exemple 1em. Un em est la distance que la lettre m aura dans la police. Ceci est bien parce qu'il permet que l'utilisateur change la taille du texte pour mieux lire sans que la page soit totalement gâtée.

Exercice. Changez la propriété font-size qu'elle a une valeur en cm. Est-ce qu'elle devient plus grande, ou plus petite ? Faites la même chose avec les autres unités. Quelle unité est la plus grande ? Quelle est la plus petite ?

Commentaire

Comme en HTML, on peut mettre un commentaire dans une feuille de style CSS. Comme CSS est beaucoup plus complexe que HTML, c'est plus souvent vu. En CSS, un commentaire s'écrit /* commentaire */. Par exemple, /* ici il me faut trouver une autre couleur */.

Comme en HTML, si il faut supprimer beaucoup de code à la fois, mais on veut le préserver aussi, on peut facilement l'encadrer avec /* et */. Comme ça, l'ordinateur va ignorer ce code, mais vous pouvez remettre si vous en voulez.

Niveau texte et niveau bloc

Rappelez-vous de la page Web que vous avez créé avec une image. L'image s'est mise où ? C'était dans le texte, directement entre deux mots. En plus, elle a pris place sur la ligne du texte. En prenant place là, elle a déplacé le texte pour avoir assez d'espace pour l'image. On appelle cette qualité d'emplacement niveau texte. Les balises em, strong, et img ont (par défaut) niveau texte.

Par contre, certaines balises ne se mettent pas dans le texte. Ils sortent toujours. Par exemple, p ne peut pas contenir p. Si j'essaye de le faire, le second paragraphe va sortir et retourner à la ligne. Cette qualité d'emplacement est appelé niveau bloc. p, h1, et hr ont (par défaut) niveau bloc.

Mais quand on dit « par défaut », ça veut dire qu'il y a une moyenne pour changer ! Dans CSS, n'importe quel élément peut être soit à niveau bloc soit à niveau texte, comme vous voulez, avec la propriété

display: block;

ou

display: inline;

(Il existe aussi display: none; qui veut dire « n'affichez pas cet élément ».)

Exercice. Mettez que votre balise b soit niveau bloc. Notez comment elle se présente.

class et id

Nous avons un peu vu sur les sélecteurs. Nous voyons déjà qu'un sélecteur peut être le nom d'une balise, simple, et ça va préciser toute balise qui a ce nom. Mais cela est trop lourd. Parfois je ne veux pas mettre un style sur toute balise du même nom. Parfois je veux mieux distinguer.

Pour cela, il existe deux attributs HTML, class et id. N'importe quelle balise HTML peut les porter. class veut dire que tel élément appartient à une classe des éléments. id donne un nom identifiant pour cet élément.

Exemple : prenons ce document HTML.

<html>
  <head>
    <link type="text/css" src="monstyle.css" rel="stylesheet" />
  </head>
  <body>
    <p class="remarque">Voici une remarque.</p>
    <p id="seconde">Voici le seconde paragraphe.</p>
    <p class="remarque">Et maintenant, la fin du document.</p>
  </body>
</html>

Nous voyons que trois paragraphes existent, tout avec la balise p. Mais ils sont différents. Selon les attributs HTML, on voit que le premier et dernier paragraphes sont d'une classe remarque, donc apparemment ils sont les remarques. Le paragraphe au milieu n'est pas une remarque, mais on voit qu'il a un nom unique. On peut dire que c'est le paragraphe nommé seconde.

Avec ce document HTML, on peut mettre dans notre feuille de style les sélecteurs suivant :

p.remarque {
  background-color: #ff0000;
}

p#seconde {
  color: #00ff00;
}

p.remarque est un sélecteur qui veut dire : « tout élément p qui a remarque comme class ». p#seconde veut dire : « l'élément p qui a seconde comme id ». Donc, cette feuille de style va changer le fond pour le premier et dernier paragraphe, mais pour le paragraphe au milieu, changer que la couleur du texte.

Exercice. Écrivez la feuille de style pour ce document pour que le premier paragraphe soit en texte bleu et que le dernier paragraphe soit en fond vert, sans changer aucune autre couleur :

<html>
  <body>
    <p class="foo">Premier</p>
    <p id="milieu" class="texte">Milieu</p>
    <p class="texte" id="dernier">Dernier</p>
  </body>
</html>

Les attributs id et class peuvent se mettre sur tout élément HTML. Il faut seulement que chaque id soit unique.

À retenir

  • class et id peuvent se mettre sur n'importe quel élément HTML. Ils permettent d'appliquer un style dans une feuille de style CSS plus précisément.
  • Une id doit être unique.
  • Le sélecteur p.foo choisit les éléments HTML qui sont de la balise p avec la class="foo". Donc, . veut dire class.
  • Le sélecteur p#foo choisit le seul élément HTML qui est de la balise p avec la id="foo". Donc, # veut dire id.

Marges et espacement

Les propriétés margin et padding permettent d'espacer un élément. margin veut dire marges, et padding quelque chose comme emballage.

Exercice. Sur un des paragraphes d'un document HTML, mettez une class et dans votre CSS, mettez la propriété margin: 50px;. Actualisez. Qu'est-ce qui se passe avec cet élément ?

Exercice. Augmentez aussi sur cet élément la propriété background-color: blue;. Actualisez. Qu'est-ce qui se passe avec le fond ?

Nous voyons que la propriété margin augment l'espace autour d'un élément (la marge extérieure). Cet espace ne compte pas la couleur de l'élément ; il encadre juste.

Exercice. Augmentez aussi la propriété padding: 25px;. Actualisez. Qu'est-ce qui se passe ?

Nous voyons que padding donne aussi une forme d'espacement, mais cet espacement est « dedans » l'élément. padding se met entre la frontière de l'élément et son contenu (la marge intérieure). padding prend aussi la couleur du fond de l'élément (alors que margin ne prend jamais un fond).

Nous voyons aussi que ces propriétés peuvent prendre n'importe quelle unité de taille (voir Tailles). Si on met un pourcentage, le pourcentage joue par rapport à la largeur de l'élément parent. (Donc, 10% veut dire « utiliser 10 pourcent de la largeur de contenant comme marge ».)

Exercice. Écrivez le bloc CSS qu'il faut mettre pour que chaque paragraphe de la classe remarque soit avec une marge de 2 cm.

Nous voyons que ces propriétés peuvent arranger un même espacement aux quatre côtés d'un élément. Si on veut que ces espaces soit différents des quatre côtés, on a deux moyennes.

  • Après margin: (ou bien padding:), vous pouvez mettre jusqu'à quatre chiffres. Si vous mettez quatre mesures, ils correspondent à l'espacement en haut, à droite, en bas, et à gauche de l'élément (dans le sens des mains de la montre). Donc, margin: 10px 5x 20px 4px; veut dire « 10 px en haut, 5 px à droite, 20 px en bas, et 4 px à gauche ».
  • Si vous ne mettez que deux chiffres, ils vont s'appliquer le premier en haut et en bas, et le seconde à droite et à gauche. Donc margin: 10px 5px; veut dire « 10 px en haut et en bas, et 5 px à droite et à gauche ».
  • Également, vous pouvez utilisez les propriétés margin-top, margin-right, margin-bottom, et margin-left (également padding-top, padding-right, padding-bottom, et padding-left), qui précise les marges d'un seul côté.

On dit que la propriété margin avec quatre valeurs est une propriété raccourci (ou parfois « super propriétés ») pour les quatre propriétés margin-top, margin-right, margin-bottom, et margin-left. On va voir d'autres propriétés raccourcis, comme border et font.

Exercice. Mettez une marge sur un paragraphe, et mettez une marge sur une balise dans ce paragraphe (peut-être une balise b). Notez bien comment les deux se présentent. Si vous enlevez la marge sur la balise intérieure, est-ce qu'elle prend la marge de la balise extérieure ?

Nous voyons que, alors qu'un élément HTML prend le fond de son parent, il ne prend pas la marge de son parent dans la même manière.

À retenir

  • margin s'applique en dehors de l'élément, alors que padding s'applique dedans l'élément mais quand-même autour de contenu de l'élément.
  • margin est une propriété raccourci ou super propriété pour les autres propriétés margin-top, margin-right, margin-bottom, margin-left.

Bordures

Nous avons vu dans le chapitre Tableaux que la bordure peut se mettre avec l'attribut désuet border="1". Ici on va voir comment faire ces effets dans la moyenne moderne, c'est-à-dire avec CSS. Les propriétés CSS par rapport aux bordures sont :

  • border-style : le style du bordure. La propriété la plus importante. Si on ne met pas cette propriété, aucun bordure ne sera affiché. Les valeurs disponibles sont none (aucun), dotted (avec les points), dashed (avec les petits traits), solid (solide), double (doublé), groove (comme un rainure), ridge (comme une crête), inset (comme une vallée), outset (comme une colline).
  • border-width : l'épaisseur d'une bordure, mesurée dans n'importe quelle Tailles.
  • border-color : la couleur de la bordure, exprimé comme dans le chapitre Couleurs.

Exercice. Mettez une bordure de largeur 10 px en style ridge. Notez sa forme. Essayez tout style. Quel style vous plaît le plus ?

Exercice. Mettez aussi une couleur avec le style ridge. Notez sa forme. Est-ce que la couleur joue ?

  • border est une propriété raccourci pour ces trois propriétés. border se suit avec l'épaisseur, le style, et la couleur.

Exercice. Utilisez la propriété border pour abréger ce bloc CSS.

p.remarque {
  border-style: dashed;
  border-width: 4px;
  border-color: #00ff00;
}

Pour essayer votre solution, saisissez ceci et aussi le votre, mais changer la class qu'il s'applique sur un autre élément. Comparer les deux résultats jusqu'à ils sont au niveau.

Exercice. Avec ces techniques, trouvez les paramètres CSS qui permettent de reproduire l'effet de border="1", mais à la moderne.

div et span

Nous avons déjà vous qu'on peut utiliser les class et id pour mieux limiter l'effet d'un bloc CSS. Mais jusqu'au présent, nous avons dû ajouter les balises, et donc changer la forme du document, pour ajouter du style. (Rappelez-vous de l'exercice où on a mis un fond sur un paragraphe mais changé la couleur du texte sur seulement une partie. On a dû utilisé une balise strong.)

Parfois on veut ajouter à la structure d'un document HTML sans changer sa forme avec les balises comme p, em, ou strong. Dans ce cas, on peut utiliser deux balises HTML qui ne font rien : div et span.

Exercice. Mettez un élément span dans votre document HTML. span peut contenir du texte, bien sûr. Qu'est-ce qu'il fait avec ce texte ? Si on change à div ?

La seule différence entre div et span est que, par défaut, div est à niveau bloc, et span à niveau texte.

Exercice. Saisissez le document HTML suivant, et liez la feuille de style suivante. Remarquez leur forme.

<html>
  <body>
    <div class="A">
      <div id="B">
        <span class="C">C</span>
        <div id="D">D</div>
      </div>
      <div class="E">
        <div class="F">F</div>
        <span id="G">G</span>
      </div>
    </div>
  </body>
</html>

div.A { background-color: #ff0000; }
div#B { color: #0000ff; }

Exercice. Changez la feuille de style pour qu'il soit seulement la première partie qui soit avec fond rouge. Ajoutez à la feuille de style que le seconde partie (« F » et « G ») ait un fond jaune. Changez l'écriture seulement du texte « C » en mettant en bleu. Comment ajouter que C et G sont les deux en écriture verte ?

Exercice. Changez ce document HTML et feuille de style pour que tout le paragraphe a un fond rouge mais seulement le mot « paragraphe » a un texte rouge. Le mot « paragraphe » ne doit pas être ni en gras, ni souligné, ni en italique, ni aucune autre forme...

Mise en forme

Certaines autres propriétés CSS :

  • width, qui veut dire largeur. Ceci peut être utile si vous voulez réduire ou agrandir un élément. height veut dire aussi hauteur. Par défaut, elles sont auto, qui veut dire que l'élément grandit s'il faut.
  • background-image: url(CHEMIN); permet d'ajouter un fond qui vient d'un fichier image. Remplacez CHEMIN avec le chemin d'accès pour l'image.

Pour du texte, il y a plusieurs propriétés offertes :

  • font-family permet de changer la police entièrement. Faites attention, parce que la police que vous voulez utilisez peut ne pas être sur l'ordinateur du lecteur ! La valeur est une liste de polices. Le navigateur va utiliser la première qui est présente. La dernière police devrait être une des polices spéciales serif, sans-serif, monospace, cursive (comme la main à écriture), et fantasy. Exemple: font-family: "Times New Roman", Times, serif;.
  • font-weight peut être normal ou bold (gras). Vous pouvez aussi mettre un nombre; bold est synonyme avec 700, et normal est 400.
  • font-style peut être normal, italique, ou oblique.
  • font-variant peut être normal ou small-caps (petit majuscules).
  • font est la propriété raccourci pour les polices. font se suit avec les valeurs pour font-style, font-variant, font-weight, font-size, et font-family. Exemple : font: normal small-caps bold 125% "Times New Roman", monospace; Ceci est complexe, évitez !
  • text-decoration peut être none, underline (souligné), overline (ligne au-dessus), line-through (barré), ou blink (clignotant). blink est déconseillé comme trop frappant.
  • text-align peut être left (gauche), right (droite), center, ou justify, comme la balise center ou l'attribut halign.
  • vertical-align correspond à l'attribut valign de la balise table. Il peut être baseline, middle, top, bottom, super et sub.
  • text-indent est l'alinéa, l'espace qui vient avant le premier mot d'un paragraphe. La valeur est une taille.
  • line-height est la hauteur de la ligne de texte. Par défaut, elle est auto, qui veut dire que le navigateur calcule automatiquement selon la plus grande chose dans la ligne, mais vous pouvez fixer avec une taille.

Exercice. Mettez code dans votre feuille de style CSS qui va agrandir la taille du texte, et essayez les polices différentes -- serif, sans-serif, monospace, cursive, et fantasy. Écrivez une description de chaque police.

À retenir

  • Toute propriété CSS est résumée dans le tableau à la fin de ce document.
  • Certaines propriétés ont pour défaut auto.

Position

(Ce chapitre est facultatif. Ceci comprend les choses les plus complexes dans CSS !)

Exemple 1

Nous avons une image dans un paragraphe. On veut que l'image soit côtoyée par le texte. Voilà notre HTML :

<html>
  <body>
    <p>
      <img src="diagramme.bmp" class="diagramme" />
      On voit de ce diagramme que l'énergie de balle est la plus grande à 10m...
    </p>
  </body>
</html>

Nous voyons que cette image a une class, diagramme, permettant de mieux la trouver.

Si on saisit ce document, on verra que l'image compte comme texte. En Microsoft Word, on dira que l'image est « aligné sur le texte ». Ce qu'on veut vraiment c'est que l'image soit hors du texte, mais que le texte le suit.

Pour cela, on utilise une nouvelle propriété, float.

Exercice. Saisissez ce document. Créez aussi une image diagramme.bmp. Confirmez que l'image n'est pas suffisamment côtoyée.

Exercice. Ajoutez une feuille de style. Dans cette feuille de style, mettez ce bloc, et puis observez ce qu'il fait :

img.diagramme {
  float: left;
}

La propriété dit que l'image flotte. Cela veut dire que l'image ne joue plus dans le texte, comme avant. Plutôt elle se retire du texte. Le texte, qui la suit, remplit l'espace à son côté. Dans le vocabulaire de Microsoft Word, on dit que cette image est mise à carré -- le texte vient à côté de, mais il n'entre pas dans, l'image.

Exemple 2

Imaginez que nous développons un site Web compris de plusieurs pages. La première page contient un lien aux autres pages, et aussi offre un message de bienvenue. Nous voulons que le texte et les liens soient côté à côté. On propose peut-être le HTML suivant :

<html>
  <head>
    <title>Bienvenue à la page Web du Lycée de Batié</title>
    <link href="site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="menu">
      <ul>
        <li><a href="eleves.html">Les élèves</a></li>
        <li><a href="terrain.html">Le terrain</a></li>
        <li><a href="profs.html">Les enseignants</a></li>
      </ul>
    </div>
    <div id="contenu">
      <p>
        Salut et bienvenue ! Cette page-ci offre un vu au beau
        lycée de Batié, situé vers le village Hiala sur la route à
        la chefferie supérieure Batié. Ce lycée, construit par les
        élites de Batié, permet une éducation aux enfants du
        village, ou aux autres enfants venus.
      </p>
    </div>
  </body>
</html>

Nous voyons qu'il y a deux sections pour notre document, qui sont capté par deux balises div. Ils sont nommés avec les ids pour mieux les reconnaître. Le div menu est le div où se trouvent les liens aux autres pages. Ces liens sont arrangés dans une liste non-ordonnée qu'ils soient bien placés. Le div contenu est le message de bienvenue.

Jumelons avec cette feuille de style :

div#menu {
  background-color: #ffffdd;
  border: 1px solid #ff0000;
}

div#contenu {
  background-color: #ddffff;
}

Ceci nous donne un fond plaisant pour les deux sections de la page -- un jaune pale pour le menu, et un bleu pale pour le message de bienvenue.

Si on saisit tout ceci, on verra toutes ces choses, mais ce n'est pas complet. La liste des liens est en haut de la page, et le message de bienvenue est en bas. Ceci ne nous convient pas. On veut que les liens soit à droite. Est-ce qu'on peut utiliser encore la propriété float ?

Exercice. Mettez une propriété float sur le div menu.

D'accord, ce n'est pas mal. Mais pour les lecteurs malvoyants, leurs logiciels vont présenter le menu en suivant l'ordre du document HTML. Cependant, on veut que le texte du contenu vienne d'abord, car c'est plus important ! Donc, on veut mettre le menu après le contenu.

Exercice. Utilisez la fonctionne « couper/coller » pour mettre le div menu après le div contenu. Comment donne ça ?

Nous voyons qu'à ce moment, les floats ne jouent pas dans la même manière. Cette fois-ci, le menu se met à droite mais après le message, et non plus à côté. Comment arranger ?

float ne côtoie que sur les éléments suivant l'élément flottant. Donc, on va aussi mettre le div contenu à float: left que le menu se rapproche à droite.

Exercice. Mettez que contenu soit float: left.

Ceci n'a pas donné aussi ! Le problème reste que contenu prend une largeur de toute la page. Comme cela, il ne reste pas suffisamment d'espace pour que le menu vienne à côté.

Donc, réduisons l'espace pris par contenu.

Exercice. Mettez que contenu prenne une largeur de 80% de la page.

Et voilà ! Tout est en ordre maintenant.

Feuille de style interne

Nous avons déjà vu comment mettre une feuille de style et comment la lier à un document HTML. On peut appeler cette technique une feuille de style externe. Le fichier de la feuille de style est hors de document HTML. On fait appel à la feuille de style seulement. Cette technique est bien, parce qu'on peut facilement changer les styles pour tout un site en changeant la feuille de style que toute page utilise.

Mais il existe aussi deux autres moyennes pour utiliser CSS dans votre document HTML. Ces moyennes sont déconseillées, mais parfois utiles.

  • On peut mettre la balise <style> dans la balise <head>. Le contenu de la balise <style> est compris exactement comme si c'était dans une feuille de style extérieure.
  • Si on veut mettre du CSS sur un seul élément. on peut utiliser l'attribut style sur l'élément qu'on veut changer le style. Par exemple, on peut écrire : <body style="background-color: #ff0000;">. Ceci va faire que cet élément aura un fond rouge.

Exercices

Exercice. Regardez ce document HTML.

<html>
  <body>
    <div>
      <div class="a">A</div>
      <span class="b">B</span>
    </div>
    <div id="seconde">
      <div id="c">C</div>
      <span class="d">D</span>
    </div>
  </body>
</html>

Avec cette feuille de style :

body {
  background-color: black;
}

div#seconde {
  color: #ffff00;
}

div.a {
  color: orange;
}

div.b {
  background-color: #00ff00;
}

div.c {
  background-color: #ff0000;
}

span.d {
  background-color: #0000ff;
}

Quelle couleur aura le texte A ? Quel fond le texte B ? Quel fond le texte C ? Quelle couleur le texte D ?

JS

Dans une page Web, nous voyons déjà qu'il y a deux sections. Il y a une section de structure, fournie par le code HTML. Il y a aussi une section qui donne la présentation, qui est les feuilles de style CSS. Mais tout ça nous donne que les pages fixes, statiques. Dans ce chapitre, on va apprendre comment écrire que la page soit dynamique, qu'elle répond à nos actions. Pour le faire, on va utiliser encore une langue, qui s'appelle JavaScript, abrégé souvent JS.

Notre première page dynamique

Saisissez cette page HTML.

<html>
  <head>
    <script type="text/javascript">
      alert(2+3);
    </script>
  </head>
  <body>
    Soyez le bienvenue !
  </body>
</html>

Ouvrez-la dans votre navigateur. Vous devriez voir une petite fenêtre, qui affiche : 5. Quand vous cliquez sur OK, vous verrez le message restant : « Soyez le bienvenue ! »

Cette page contient une nouvelle balise, script. Cette balise permet de programmer les choses dynamiques dans notre page. Dans cet exemple, nous voyons que le JavaScript qu'on à mis est une commande alert(2+3);. C'est cette commande qui a fait que l'ordinateur affiche 5.

Ceci va se passer chaque fois qu'on charge la page. Si vous voulez encore voir, il faut actualiser la page.

JavaScript, comme presque toute autre langue de programmation, s'exprime avec une série de commandes. Dans JavaScript, chaque commande finit avec un point-virgule « ; ». Chaque commande a une fonctionne. La première commande que nous voyons ici est la commande alert. alert affiche les choses dans les petites fenêtres. La chose qu'on a demandé qu'on affiche le résultat de l'addition 2+3, qui est 5.

Également, on peut faire qu'alert affiche les messages.

Exercice. Changez le script pour qu'il contient plutôt : alert("salut");. Actualisez la page.

Cette fois, vous devriez voir le texte « salut » dans cette fenêtre.

La balise script peut se mettre dans head comme dans cet exemple, ou aussi dons body. On va voir plus après.

À retenir

  • La balise script permet d'utiliser JavaScript. script prend l'attribut type="text/javascript".
  • La commande JavaScript alert permet d'afficher un message dans une fenêtre.
  • alert peut afficher le résultat d'un calcul (alert(2+3);) ou bien un texte (alert("salut");).
  • La balise script peut se mettre soit dans head ou soit dans body.

Calculs

Dans JavaScript, les opérations mathématiques de base sont :

  • +, l'addition
  • -, la soustraction
  • *, la multiplication. En mathématique on peut écrire 2x pour faire une multiplication, mais on doit toujours écrire 2*x en JavaScript.
  • /, la division
  • ( et ), les parenthèses, permettent de faire qu'une partie du calcul soit prioritaire.

Il existe aussi Math.sqrt(X), qui donne la racine carrée de X.

Exercice. Écrivez un programme qui calcul la racine carrée de 14.

Exercice. Ceci calcul combien ? 2 * 3 - 1. Vérifiez votre réponse dans la page HTML.

Exercice. Ceci calcul combien ? 3 - 1 * 2. Vérifiez votre réponse dans la page HTML.

Nous voyons que le langage JavaScript respecte ce qu'on appelle l'ordre d'opérations. C'est-à-dire, dans un calcul comme 8 + 4 / 2, la priorité est les divisions et les multiplications, qui se passe avant les soustractions et additions. Donc, on aura 8 + 2, qui donne 10. Faites attention aux calculs complexes ! Si vous n'êtes pas sur, utilisez les parenthèses ( et ) pour encadrer les calculs individuels.

On peut aussi dire que les messages ou les textes peuvent être calculés. Donc, imaginez que je veux mettre un message sur l'écran comme « le résultat est 12 ». Il me faut joindre deux choses : le texte "le résultat est ", et puis le calcul qui m'a donné 12 (disons que c'est 6*2). Pour le faire, je peux utiliser une commande comme alert("le résultat est " + (6*2));. Notez bien qu'il y a un espace entre les guillemets; sinon, le résultat sera collé au mot « est ». (Ce qui est entre guillemets est reproduit littéralement.) J'ai aussi mis les parenthèses pour m'assurer que le résultat soit calculé avant de joindre sur le texte.

Donc, on dit que le signe + peut faire l'addition, ou ce qu'on appelle concaténation des textes.

Exercice. Écrivez un programme qui affiche « la racine carrée de 14 est ... », avec la racine au lieu des points.

Exercice. Que fait cette commande ? alert("ma moyenne est " + ((10+13+8)/3) + " et je suis fier"); Vérifiez avec l'aide de votre page Web.

Exercice. Que fait cette commande ? alert("deux et trois font " + 2 + 3); Vérifiez avec l'aide de votre page Web.

Nous voyons qu'il faut faire attention quand on a une commande alert qui fait aussi une opération. Ici, le `` + 2`` s'est fait avant qu'il fait `` + 3``.

Exercice. Comment corriger ce programme ?

La leçon ici est que l'ordinateur va faire exactement comme nous avons dit, non comment nous voulions. L'ordinateur ne peut pas connaître ce qu'on veut. C'est à nous les êtres humains, donc, à exprimer ce qu'on veut dans une manière que l'ordinateur peut faire facilement.

Quand on exprime mal, l'ordinateur va faire ce qu'on a dit. On dit que le programme a un bogue (de l'anglais « bug » qui veut dire insecte). Chercher la cause de cette erreur et l'arranger est appelé déboguer.

Il n'y a pas un programme faux. Un programme fait toujours quelque chose ! Si cette chose n'est pas ce que vous voulez, cela ne veut pas dire que la chose est inutile. Peut-être ce programme résout un autre problème.

À retenir

  • Les quatre opérations mathématiques en JavaScript sont +, -, *, et /. Il existe aussi Math.sqrt.
  • Les parenthèses sont aussi disponible : ( et ).
  • Le signe + joigne aussi les textes, ce qu'on appelle concaténation.
  • Un programme peut faire quelque chose inattendu à cause d'une mauvaise expression. On appelle cela un « bogue ».

Commentaire

JavaScript, comme HTML et CSS, offre une possibilité de mettre un commentaire dans un programme. Comme JavaScript est beaucoup plus complexe que CSS et HTML, c'est très sage de mettre un commentaire dans un programme pour expliquer qu'est-ce qui se passe. Chaque chose qui peut être confondante à la prochaine personne de changer le programme peut être bien compris avec l'aide d'un commentaire.

En JavaScript, il y a deux formes de commentaire. L'une commence avec // et continue jusqu'à la fin de la ligne. L'autre commence avec /* et continue jusqu'à */, comme en CSS. Donc :

// Notez bien les parenthèses
alert("l'âge est " + ((24+16)/2));
// Cette partie ne doit pas jouer pour l'instant
/*
alert("division" + 4/6);
alert("multiplication" + 4*6);
*/

Variables

Nous avons déjà vu comment utiliser JavaScript comme une calculatrice simple. Mais parfois on utilise un nombre plusieurs fois dans une série de calculs. Par exemple :

alert("J'ai 5000 FCFA");
alert("En $ US, ça fait " + (5000/470));
alert("En € (Euro), ça fait " + (5000/655.9570));
alert("En ¥ (yen japonais), ça fait " + (5000/655.9570*100.13));

Ce programme nous aide à comprendre les valeurs différentes des devises étrangères (avec les valeurs d'aujourd'hui, 2012 juillet 26). Mais si je veux changer le montant d'argent que j'ai, cela devient difficile. Pour changer, il me faut changer quatre fois. Et si on oublie quelque part, on aura un problème difficile de trouver !

Pour cela, les langues de programmation offrent l'idée d'une variable. On définit une variable en JavaScript comme :

var montant = 5000;

Le mot var distingue qu'on veut créer une variable. montant est le nom de la variable. N'importe quel mot qui commence avec une lettre est valable comme nom d'une variable. Puis, on donne une valeur à cette variable. Ici c'est 5000.

Maintenant, pour utiliser cette variable, on met son nom où on veut utiliser sa valeur :

var montant = 5000;
alert("J'ai " + montant + " FCFA");
alert("En $ US, ça fait " + (montant/470));
alert("En € (Euro), ça fait " + (montant/655.9570));
alert("En ¥ (yen japonais), ça fait " + (montant/655.9570*100.13));

Nous avons remplacé le nombre 5000 avec une variable, montant, qui contient cette valeur. Maintenant, si je veux voir la valeur de 25000 dans ces devises, je dois que changer une fois, au début.

Exercice. Ajoutez une commande à ce programme qui calcule la valeur de cette somme en livres anglais (la devise du Royaume-Uni). Un livre égale à 837.96244 FCFA. 5000

Exercice. Je vois que le calcul « montant/655.9570 » se reproduit deux fois. Ceci donne la valeur du montant en Euro. Changez ce programme en remplaçant ce calcul avec une variable, qui s'appelle euro.

Exercice. Saisissez ce programme. Que fait-il ? Quelle est la différence entre la seconde et troisième ligne ?

var montant = 5000;
alert(montant);
alert("montant");

Nous voyons que toute chose entre guillemets n'est pas traitée. Ce texte est littéral. Par contre, si on ne met pas les guillemets, ce texte peut être le nom d'une variable et utilisé dans un calcul.

Exercice. Saisissez ce programme. Que fait-il ?

var montant = 5000;
alert(montant);
montant = 10000;
alert(montant);

Nous voyons qu'on peut changer une variable s'il faut. On dit qu'on affecte une valeur à une variable. Cette valeur remplace l'ancienne.

Exercice. Saisissez ce programme. Que fait-il ?

var x = 5;
x = x * 2;
x = x - 1;
alert(x);
x = x / 3;
alert(x);

Pour traiter ce genre de programme, il faut garder un brouillon. Ce brouillon peut garder les valeurs courantes des variables, et aussi ce qui était afficher à l'écran.

Exercice. Écrivez un programme qui contient deux variables, a et b, avec les valeurs 12 et 7, et affiche a divisé par b.

La programmation est ce travail -- prendre une idée de ce que l'ordinateur doit faire, et traduire que l'ordinateur le fait.

À retenir

  • Si vous utilisez la même chose plusieurs fois, mettez dans une variable !

Formulaires

Mais la vraie puissance de l'ordinateur n'est pas qu'il peut faire les calculs. La vrai puissance est que l'ordinateur peut répondre aux actions d'utilisateur. Jusqu'au présent, nos programmes ne font que calculer les choses qu'on pouvait calculer bien avant. Par exemple, je peux facilement calculer la valeur de 5000 F et puis le programme ne fait que l'afficher. Un vrai programme dynamique aurait dû calculer à partir d'un montant donné par l'utilisateur.

L'idée ici est que l'utilisateur ne doit pas connaître comment fonctionner JavaScript. Il ne doit pas changer votre programme. On veut que le programme accepte les informations d'un utilisateur naïf, et calcule avec.

Pour cela, il faut que l'ordinateur offre un espace pour que l'utilisateur entre ses informations. Cet espace est appelé un formulaire, et on le crée avec HTML.

Un formulaire HTML est contenu dans la balise form, qui a un attribut name pour son nom. Dans ce formulaire, on met plusieurs champs. Chaque champ est un espace où on peut entrer une information. Il existe plusieurs types de champ. Chaque champ doit s'identifier avec un nom pour l'information qui y seront entrée.

  • <input name="surnom">, ou également <input type="text" name="surnom">, le champ de base, est un espace où on peut écrire.
  • <input type="checkbox" name="actif"> est une case à cocher. L'utilisateur pourra cliquer pour cocher ou décocher.
  • <input type="radio" name="genre" value="g"> est un bouton radio. Le bouton radio permet l'utilisateur de choisir parmi plusieurs choix de la même information. Par exemple, le genre : une personne est soit homme ou soit femme. S'il choisit homme, il ne peut plus être femme. Également, s'il choisit femme, il ne peut plus être homme. Pour le faire, il faut un bouton pour l'homme, et un bouton pour la femme. Les deux auront le même name. Comme ça, le navigateur va comprendre qu'un des deux seulement peut être coché.
  • <select> est comme le bouton radio, mais un peu plus complexe. <select> doit avoir plusieurs <option> dedans.
  • <textarea> est comme <input type="text"> mais il peut être beaucoup plus grand.
  • <input type="submit"> est un bouton Valider. Chaque formulaire doit en principe avoir un bouton comme ça que l'utilisateur clique pour signaler qu'il a fini à entrer ses informations.

Pour chaque champ, c'est une bonne idée de mettre une étiquette avec la balise label.

Un exemple d'un formulaire, écrit pour un lecteur Anglophone :

<form name="form">
  <label for="nom">Name: </label> <input type="text" name="nom"/>
  <label for="age">Age: </label> <input type="text" name="age"/>
  <label for="genre">Gender: </label>
  <input type="radio" name="genre" value="g">Homme</input>
  <input type="radio" name="genre" value="f">Femme</input>
  <label for="region">Region: </label>
  <select name="region">
    <option value="est">East</option>
    <option value="ouest">West</option>
    <option value="nord">North</option>
  </select>
  <textarea name="probleme">Type your problem here.</textarea>

  <input type="submit">
</form>

Exercice. Saisissez ce formulaire et notez bien comment chaque champ se présente. Essayez de mettre Homme et Femme à la fois. Est-ce que ça donne ?

Exercice. Ce formulaire est un peu bizarre parce que toute chose s'aligne sur une seule ligne. Encadrez les champs avec les éléments div pour qu'ils retournent à la ligne.

Exercice. Ajoutez un champ du type checkbox dans ce formulaire, et voyez comment il fonctionne aussi.

Exercice. Écrivez un formulaire HTML pour une demande carte d'identité. Quelles informations seront demandées ? Comment les demander ?

Exercice. On veut écrire un programme qui va résoudre l'équation de premier degré, ax + b = 0. Dessinez le formulaire qui permettra de mettre les informations nécessaires.

Fonctions

Le formulaire nous permet que l'utilisateur entre ses informations. Mais il faut aussi que le programme puisse les utiliser. Pour cela, il faut deux choses. D'abord il faut que le programme contient quoi faire. Deuxième il faut que le formulaire signale cette chose.

Dans JavaScript, c'est possible d'emballer du code dans une fonction. Une fonction est un morceau de code auquel on peut faire appel. Voilà un exemple :

function double(x) {
  return x * 2;
}
alert(double(5)); // affiche 10

Ici on voit la définition d'une fonction qui s'appelle double. Cette fonction prend un paramètre, qui s'appelle x. La fonction renvoie x fois 2.

Après, on fait appel à cette fonction. Pour appeler, on met le nom de la fonction double, puis les parenthèses, et entre ces parenthèses, les valeurs à utiliser dans la fonction. Ici on a donné la valeur 5. Donc, double va fonctionner avec x égal à 5.

La fonction double dit qu'il faut renvoyer la valeur donnée fois 2. Comme la valeur donnée était 5, il renvoie 10. Ce 10 renvoyé est utilisé par alert, qui affiche à l'écran.

Donc, n'importe quelles commandes peuvent être mises dans une fonction. N'importe combien, n'importe ce qu'elles font. Pour traiter un formulaire, on va mettre nos commandes dans une fonction. Par exemple :

function reponse() {
  alert("on a validé");
}

Puis, pour signaler que le formulaire doit utiliser cette fonction quand on valide, on met un attribut action dans la balise form. Par exemple,

<form name="form" action="javascript:reponse()">

Exercice. Mettez la fonction reponse dans une balise script dans la head, et ajoutez cette action à l'élément form comme montré. Vérifiez que tout donne correctement.

Si tout est correct maintenant, vous devriez voir que le formulaire, quand vous cliquez sur Valider, l'ordinateur va répondre avec : on a validé.

Excellent ! Nous sommes déjà sur le chemin pour que avoir une page dynamique. Mais il manque toujours que le programme utilise les valeurs dans ce formulaire !

Pour cela, mettez cette commande dans votre fonction :

alert("bonsoir " + document.form.nom.value);

Actualisez votre page et saisissez un nom dans le champ nom. Quand vous cliquez sur Valider, l'ordinateur va répondre avec bonsoir, et le nom que vous avez mis !

Nous voyons qu'on peut utiliser les valeurs saisies dans un champs avec document, puis point, puis le nom du formulaire (form ici), puis le nom du champ (nom ici), puis le mot value (« valeur »).

Exercice. Ajoutez aussi une autre alert à votre programme qui affiche l'âge que l'utilisateur a écrit.

Exercice. Ajoutez aussi une autre commande alert qui affiche la région qu'on a mise.

Remarque

Cette technique (document.form.nom.value) fonction pour les textareas, selects, et les inputs de type text. Pour les inputs de type checkbox, on peut utiliser document.form.nom.checked (qui est vrai si on a coché ce champ).

Pour les inputs de type radio, il faut un peu plus de travail. (Voir Tableaux (JS).)

Sorties

Nous avons déjà vu comment utiliser la commande alert pour sortir les résultats d'un programme. Mais chaque fois qu'on a une commande alert, une fenêtre vient, et il faut cliquer pour que le programme continue. Ça freine ! C'est mieux qu'on voie les autres moyennes pour sortir les informations du programme.

Il existe une commande, document.write. Ceci va mettre du texte dans une page. Exemple :

<html>
  <body>
    Soyez le
    <script type="text/javascript">
      document.write("<em>bienvenue</em>");
    </script>
    !
  </body>
</html>

Dans cette page HTML, la balise script est mise dans le body. Le navigateur arrive sur script et il voit que ce script contient la commande document.write. Il prend le texte qui est donné à cette commande et il insère directement dans le HTML. Si ce texte contient de HTML, cet HTML fonctionne normalement. Donc, c'est comme j'ai plutôt écrit :

<html>
  <body>
    Soyez le <em>bienvenue</em> !
  </body>
</html>

Exercice. Changez votre programme d'argent qu'il utilise plutôt la commande document.write pour sortir le résultat de ses calculs. Il pourrait falloir mettre le script dans le body pour qu'il fonctionne.

document.write est bien si on met quelque chose que le programme doit faire en chargeant la page. Mais si on utilise dans une fonction pour la réponse d'un formulaire, document.write va écraser tous qu'il est écrit dans la page ! Dans ce cas, il faut une autre moyenne.

Il existe aussi une autre moyenne. S'il y a un élément avec une id dans votre document, vous pouvez changer son contenu ! Pour le faire, mettez ceci dans votre fonction reponse :

document.getElementById("id").innerHTML = "nouveau";

avec id remplacé par l'id qu'il y a pour cet élément, et nouveau le nouveau texte HTML que vous voulez.

Exercice. Saisissez le document HTML suivant. Expliquez ce qu'il fait.

<html>
  <head>
    <script>
      function handle(){
        document.getElementById("util_nom").innerHTML = document.form.nom.value;
      }
    </script>
    </head>
  <body>
    <form action="javascript:handle()" name="form">
      <label for="name">Name: </label> <input type="text" name="name"/>
      <input type="submit">
    </form>
    Soyez le bienvenue, <span id="util_nom">utilisateur</span> !
  </body>
</html>

Exercice. Est-ce que c'est possible d'ajouter à un innerHTML, par exemple avec document.getElementById("util_nom").innerHTML = document.getElementById("util_nom").innerHTML + document.form.nom.value; ? Qu'est-ce qui se passe ? Simplifiez cette commande avec une variable util_nom qui est égal à document.getElementById("util_nom").

Exercice. Retournez à votre formulaire de l'équation de premier degré. Ajoutez un programme qui calcule la réponse et l'affiche en bas avec cette technique.

Exercice. Changez votre programme de valeur d'argent qu'il prend la valeur montant dans un formulaire, et qu'il affiche les valeurs différentes avec cette technique.

Choix

Votre programme de l'équation de premier degré doit faire une division pour donner la vraie valeur -b/a. Mais si je mets 0 pour a, votre programme fait comment ?

C'est pour cela que l'ordinateur doit pouvoir choisir. Si a égale à 0, l'ordinateur ne doit pas faire la division. Comment dire à l'ordinateur ?

Il existe une commande if. Exemple :

if (a == 0) {
  reponse = "impossible avec a = 0";
}
else {
  reponse = - b / a;
}

La commande if à trois parties. D'abord il y a une condition. La condition est la partie entre parenthèses. Si la condition est vraie, l'ordinateur va choisir ce qui est entre accolades (« { » et « } »). Sinon, il va chercher une partie else, et s'il y a, il va faire ce qui le suit.

Dans ce cas, si a égale à zéro, il va mettre dans la variable reponse le texte « impossible avec a = 0 ». Sinon, il va mettre dans la variable reponse le résultat de - b / a.

Exercice. Ajoutez ce code à votre programme de résolution d'équation. Il faut avoir les variables a et b. Si vous n'avez pas encore créé, maintenant est le bon moment !

Exercice. Écrivez un programme qui résout les équations de seconde degré (ax^2 + bx + c). Ceci va falloir tous que vous avez vu jusqu'au présent -- un formulaire, des choix, des variables, les calculs !

À retenir

  • La partie else est facultatif.
  • Il existe les conditions : == (égal), != (inégal), < (inférieur), > (supérieur), <= (inférieur ou égal), >= (supérieur ou égal).
  • On peut combiner deux conditions : (a == 0) || (a == 5) veut dire « soit a égal à 0 ou soit a égal à 5 ». Donc, || veut dire « ou », et && veut dire « et ».

Répétition

En général, toute chose que l'ordinateur fait est rassemblée des composants suivants :

  • La mathématique
  • Entrée/Sortie
  • Choix
  • Répétition

Ce chapitre donc fini ce qui reste de la programmation.

Il existe une commande while (qui veut dire « tant que »). Exemple :

var i = 2;
while (i < 5) {
  alert(i);
  i = i + 1;
}

Quand l'ordinateur trouve une commande while, il regarde d'abord la condition. Si la condition est vrai, il fait ce qui est entre accolades. Dans ce cas, on voit qu'il faut afficher la valeur de i (qui est maintenant 2). Puis, on voit que i doit changer à être i + 1, qui donne 3.

Maintenant que l'ordinateur a fini avec les commandes dans les accolades, il revient à la condition. i < 5 est toujours vrai, car i égale 3. Donc, il entre encore dans les accolades. Il affiche encore la valeur de i (qui est maintenant 3). Puis, il voit que i doit changer à être i + 1, qui donne 4.

L'ordinateur est arrivé encore à la fin de ce qu'il y a dans les accolades, donc il revient encore à la condition. i < 5 est toujours vrai, car i égale 4. Donc, il entre encore dans les accolades. Il affiche encore la valeur de i (qui est maintenant 4). Puis, il voit que i doit changer à être i + 1, qui donne 5.

Finalement, l'ordinateur rentre une fois de plus à la condition. Il voit que i < 5 n'est plus vrai, parce que i est 5 et 5 n'est pas inférieur à 5. Donc, il saute les accolades et il continue avec les autres commandes (s'il y en a).

Nous voyons que la commande while permet de répéter. On appelle cette opération un cycle ou une boucle. Une répétition ne peut pas continuer pour toujours, donc la commande while prend aussi une condition. L'ordinateur répète tant que la condition est vraie. Si l'ordinateur arrive à la condition et il trouve qu'elle n'est pas vraie, il ne répète pas. (Ceci peut être même la première fois !)

Exercice. Que fait ce programme ?

var i = 2;
while (i < 20) {
  alert(i);
  i = i * 2;
}

Exercice. Saisissez ce programme et expliquez ce qu'il fait.

var i = 1;
while (i < 20) {
  i = i * 2;
  alert(i);
}

Qu'est-ce qui est bizarre ici ? Pourquoi se passe-t-il ?

Exercice. On a dit que même si l'ordinateur n'a rien répété, si la condition est fausse, aucun cycle va se passer. Écrivez un programme où la condition est fausse au départ. Est-ce que l'ordinateur répète, ou non ?

Exercice. Écrivez un programme qui affiche les nombres de 5 à 1.

Il existe aussi une autre manière de répéter les commandes, la commande for :

for(var i = 1; i < 20; i = i * 2){
  alert(i);
}

Qui est équivalent à

var i = 1;
while(i < 20){
  alert(i);
  i = i * 2;
}

C'est-à-dire, for prend trois choses entre parenthèses. La première chose est l'initialisation, qui se passe d'abord. Deuxième il y a encore la condition. Dernière il y a l'avancement, qui se passe à la fin de chaque cycle.

for est plus souvent utilisé si on a une étendu bien précise, et while est plus souvent utilisé si on a seulement une condition qu'on cherche.

Exercice. Que fait ce programme ?

for(var i = 10; i < 14; i = i + 1){
  alert(i);
}

Tableaux (JS)

Nous voyons déjà comment écrire les programmes complexes et utiles. Imaginez donc qu'on veut écrire un programme qui construit et puis imprime un bulletin. Un élève à plusieurs notes -- mathématiques, EPS, ECM, physique, informatique..

Une manière qu'on peut écrire ce programme est alors comme ceci :

var s = "";  // le texte du bulletin.
var somme = 0; // somme des notes pour calculer la moyenne
var coeffs = 0; // coefficients pour calculer la moyenne

s = s + "<div>Note Info : " + note_info + "</div>";
somme = somme + note_info * coeff_info;
coeffs = coeffs + coeff_info;

s = s + "<div>Note Maths : " + note_maths + "</div>";
somme = somme + note_maths * coeff_maths;
coeffs = coeffs + coeff_maths;

s = s + "<div>Note ECM : " + note_ecm + "</div>";
somme = somme + note_ecm * coeff_ecm;
coeffs = coeffs + coeff_ecm;

// et ainsi de suite

s = s + "<div>Moyenne : " + (somme / coeffs) + "</div>";
document.getElementById("bulletin").innerHTML = s;

Mais quand on écrit comme ça, on voit beaucoup de choses répétées. Ceci ne marche pas ! On cherche toujours à éliminé les choses répétées. Comment fait-on ?

On utilise ce qu'on appelle un tableau. Un tableau est comme une liste. Pour définir un tableau, on écrit comme :

var notes = [14, 5, 12, 18];

Maintenant la variable notes est un tableau. Pour accéder aux éléments du tableau, on fait :

alert(notes[0]);  // affiche 14
alert(notes[1]);  // affiche 5

Nous voyons que c'est possible d'accéder à un élément du tableau avec tableau[i], qui donne l'ieme élément du tableau. Le premier élément est tableau[0].

Pour chercher combien d'éléments il y a dans ce tableau, on utilise tableau.length.

alert(notes.length); // affiche 4

Donc, pour passer sur chaque élément du tableau notes, on peut utiliser code comme ceci :

for(var i = 0; i < notes.length; i = i + 1){
  alert(notes[i]);
}

Exercice. Que fait ce programme ?

var noms = ["Ethan", "Kalika", "Jenny", "Allison"];
alert(noms[0] + " est plus malin que " + noms[1]);

Exercice. Complétez ce programme qu'il affiche tout nom dans le tableau.

var noms = ["Ethan", "Kalika", "Jenny", "Allison"];

Exercice. Écrivez un programme qui passe sur tout élément du tableau du dernier au premier, donc qu'il affiche Allison, Jenny, Kalika, et puis Ethan.

var noms = ["Ethan", "Kalika", "Jenny", "Allison"];

Exercice. Changez le programme de chapitre qu'il utilise plutôt des tableaux. Utilisez ces tableaux-ci :

var matiere = ["Maths", "ECM", "Info", "EPS"];
var coeff   = [4, 2, 2, 1];
var notes   = [14, 6, 18, 18];

Exercice. Quand on met un input de type radio, par exemple avec le nom genre, document.form.genre sera un tableau. Chaque élément du tableau est un input avec une .value et avec .checked si c'est coché. Écrivez un programme qui trouve quelle valeur l'utilisateur a choisi parmi les choix.

Pour regarder chaque élément du tableau, il existe une dernière moyenne de répétition :

var tableau = [2, 8, 12];
for each(var i in tableau) {
  alert(i);
}

Ceci affiche les chiffres 2, puis 8, puis 12. Cette technique est la moyenne la plus facile pour traiter un tableau.

Exercices

Exercice. Que fait ce programme ?

var i = 1;
var x = 10;
while (i < 20) {
  i = i * 2;
  x = x - 1;
}
alert(x);

Exercice. Que fait ce programme ?

function abc(x, y) {
  var a = x + 2;
  var b = y - x;
  var c = x - a;
  b = c * y;
}

alert(abc(-1, 12));

Exercice. Que fait ce programme ?

function def(x, y) {
  var a = x + y;
  return a * y;
}

var d = def(2, 8);
var e = def(3, 7);

alert(def(d, e));

Exercice. Écrivez un programme qui permet d'utilisateur d'écrire un mot, et puis quand il valide, le programme affiche ce mot trois fois.

Exercice. Écrivez un programme qui permet d'utilisateur d'écrire un mot et un nombre, et puis quand il valide, le programme affiche ce mot trois fois.

JavaScript externe

Quand nous travaillions avec CSS, on a mis toujours nos feuilles de style dans les fichiers externes, liés avec la balise link. On a dit que c'est mieux de faire comme cela parce que plusieurs pages peuvent partager une seule feuille de style, et en changeant cette feuille de style, on pourra tout changer facilement. Mais avec JS, on n'a pas comme ça. Pourquoi ?

Aucune raison ! C'est bien possible de mettre JavaScript dans les fichiers externes aussi. Ces fichiers portent souvent le nom finissant avec .js. Pour lier, on n'utilise pas la balise link, mais plutôt toujours script. On met la balise :

<script type="text/javascript" src="fichier.js" />

ou bien

<script type="text/javascript" src="fichier.js"></script>

Déboguer

Comment trouver les problèmes dans un document HTML ?

D'abord, vérifiez que le fichier est correct. Changez le document et voir si ce changement arrive sur l'écran. Parfois les élèves regardent deux fichiers différents !

Réduisez le document (ou feuille de style ou programme) au plus petit possible. Bloquez les parties différentes avec les commentaires pour voir quelle partie a confondu l'ordinateur.

Si c'est un programme JS, mettez plusieurs commandes alert pour voir à quelle commande l'ordinateur s'est perdu. Utilisez aussi alert pour voir les valeurs des variables, pour vérifier ou le calcul s'est dérangé.

Remerciements

Merci aux gens qui m'ont dérangé à chaque instant pendant que j'écrivais ce livre. Madame Anne, la vendeuse d'oranges, et Namkia Brondone sont les deux fréquents de ce problème. Car ce livre est trop court et un peu cru, c'est grâce à eux que je n'ai pas pu faire mieux. Pardon !

Résumé

Balises

Voila un tableau qui résume les balises vu dans ce livre.

Balise Signification Remarque
html contient le document  
head information sur le document  
title titre valable seulement dans head
p paragraphe  
h1..h6 titre  
hr règle  
em emphase  
strong emphase forte  
i italique stylistique ; em préférable
b gras stylistique ; strong préférable
u souligné désuet
br retour de ligne désuet ; utilisez les paragraphes
cite référence  
q citation  
blockquote citation à part  
code code  
pre pre-formaté  
tt police : machine à écrire désuet ; utilisez CSS
big police : augmenter la taille désuet ; utilisez CSS
small police : diminuer la taille désuet ; utilisez CSS
strike barrer désuet ; utilisez CSS
center centrer (horizontalement) désuet ; utilisez CSS
font changer la police désuet ; utilisez CSS
<!-- --> commentaire  
img image src attribut : nom du fichier image
a lien href attribut : nom de la cible
ol liste ordonnée avec plusieurs balises li
ul liste non-ordonnée avec plusieurs balises li
li élément de la liste  
dl liste de définitions avec plusieurs balises dt et dd
dt terme à définir  
dd définition utiliser dans dl
table tableau  
tr rang du tableau utiliser dans table
th en-tête d'une colonne utiliser dans tr
td cellule utiliser dans tr
iframe cadre (autre page) un peu désuet
span rien (niveau texte)  
div rien (niveau bloc)  
style CSS interne déconseillé
script programme JavaScript type="text/javascript"
form formulaire name="form" action="javascript:fonction()"
input champ type="text", "radio", "checkbox", "submit"
textarea champ (grand)  
select sélection  
option   mises dans un select

Entités

Et voilà certaines entités. Sources : http://www.w3schools.com/html/html_entities.asp , http://www.w3schools.com/tags/ref_entities.asp

Entité Signification Dessin
&lt; less than <
&gt; greater than >
&amp; ampersand (esperluette) &
&copy; copyright ©
&eacute; E acute (E aigu) é
&egrave; E grave è
&eml; E umlaut (E tremat) ë
&ecirc; E circumflex ê
&ccedil; C cedille ç
&euro; signe Euro
&times; signe multiplication ×
&nbsp; espace insécable  

Propriétés CSS

Propriété Signification Valeurs Remarque
background-color couleur de fond couleur  
color couleur de texte couleur  
font-size taille de la police taille  
display niveau texte/niveau bloc block, inline  
margin marges d'un élément quatre tailles, haut droite bas gauche  
margin-left, margin-right, margin-top, margin-bottom marges individuelles taille  
padding espace dans l'élément (comme margin) quatre tailles, haut droite bas gauche  
border-style style de bordure none, dotted, dashed, solid, double, groove, ridge, inset, outset  
border-width épaisseur de bordure taille  
border-color couleur de bordure couleur  
border bordure épaisseur, style, couleur border: 2px single red;
width largeur taille  
height hauteur taille  
background-image image pour fond url(some-image.jpg)  
font-family police police1, police2, police3 spéciale : serif, sans-serif, cursive, fantasy, monospace
font-weight poids de police normal, bold, ou chiffre normal = 400, bold` = ``700
font-style style de police normal, italique, oblique  
font-variant variété de police normal, small-caps  
font propriété raccourci des polices style, variant, weight, size, family font: normal small-caps bold 125% "Times New Roman";
text-decoration ornement de police none, underline, overline, line-through, blink blink déconseillé
text-align alignement du texte left, right, center, justify  
vertical-align alignement vertical baseline, middle, top, bottom, super, sub  
text-indent alinéa taille  
line-height hauteur de la ligne taille  

Pour les tailles, regarder la section Tailles. Pour les couleurs, chercher Couleurs.

Commandes JavaScript

Commande Signification Exemple
alert(...); afficher d'une fenêtre alert(2+3); alert("salut");
Math.sqrt(...); racine carrée alert(Math.sqrt(9));
/* ... */ commentaire  
// ... commentaire  
var x = ...; variable var x = 10/3;
function f(par, par...) { fonction function double(x) { return x * 2; }
return ...; renvoyer  
f(...) appel à une fonction double(5)
document.form.nom.value acceder à une valeur d'un formulaire form est le nom du formulaire, nom est le nom de champ
if(...) choix condition, puis quoi faire si vrai
else sinon peut s'utiliser après if
while(...) répétition  
document.getElementById(...) cherchez l'élément  
elem.innerHTML = ...; remplacez le contenu d'un élément il faut que la variable elem soit un élément, p.e. de getElementById

Corrections d'exercices

Format : Ceci n'est pas la seule réponse correcte, mais la plus courte : <em>Cette connexion <b>Camtel</b> est très mauvaise</em>.

Listes : Voila un exemple d'utiliser la balise dl :

<dl>
  <dt>Terme</dt>
  <dd>Définition de terme</dd>
  <dt>Autre terme</dt>
  <dd>Définition de l'autre terme</dd>
</dl>

Liens : ils vont à: http://www.yahoo.fr/ , C:EthanHTMLinfos.html , C:imagesétoile.gif , C:EthanHTMLdossierorigine.html , et C:EthanHTMLfacebook.com . Notez le dernier -- « facebook.com » n'a pas de « / », donc l'ordinateur pense que ce lien doit être relatif, donc il doit être dans ce même dossier.

Notre première feuille de style CSS : Dans la feuille de style, on peut changer le sélecteur à b pour appliquer seulement à la balise <b>.

Couleurs : violet peut être #ff00ff, rose #ffdddd, et jaune #ffff00.

Tableaux (JS) :

var i = 0;
var valeur;
while(i < document.form.myrad.length) {
  if(document.form.myrad[i].checked) {
    valeur = document.form.myrad[i].value;
  }
  ++i;
}
alert(valeur);