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 ? - Le Web peut avoir les *liens* aux autres documents. Donc, un document sur le Cameroun peut avoir les liens sur le français, le Nigeria, le cacao.. On appelle ce genre de texte, qui lie aux autres, *hypertexte*. - Le Web est bien facile pour écrire. C'est pour cela qu'on apprend, dans les cours de 1ère, comment écrire les pages Web. 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 : :: Mon premier document

Soyez le bienvenue !

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 ``

``. Nous voyons qu'il ouvre : ``

``, puis il y a du texte, puis il ferme : ``

``. 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 ```` et finit à la fin ````, 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 : :: Mon premier document

Soyez le bienvenue !

Mon deuxième paragraphe !

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 ``

Mon premier document

``. 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`` : :: Si ça n'arrange pas le problème, essayez plutôt :: 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 : ::

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.

Qui donne: .. raw:: html

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 ``
``. *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 ``document``. Enregistrez et actualisez la page. On voit que le texte qu'on a encadré avec ```` 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 ````. Si je veut mettre une grande emphase -- « très, TRÈS fier » -- je mets ````. 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 ``texte`` met du texte en italique, et ``texte`` 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 : .. raw:: html Cette connexion Camtel est très mauvaise. Une autre balise existe qui fait seulement dans le style. Il s'appelle ``
``. La balise ``br`` ne contient jamais aucun texte. Chaque balise doit se fermer : ``

``. 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 ``
``. Ceci est exactement équivalent à ``

``. On appelle ce genre de balise, une balise *ponctuelle*. *Exercice.* Mettez la balise ``
`` dans votre document, entre deux mots. Qu'est-ce qu'il fait ? On voit que la balise ``
`` 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 : .. raw:: html 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) : - ```` permet de changer la police utilisé par une page Web. - ```` 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 : ````. 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 : ````. Par exemple, on peut mettre : ````. 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`` pour « less than »), et « > » est ``>``. Mais comment encore mettre lui-même l'esperluette ? Pour cela, il existe aussi l'entité ``&``. 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 ``é`` (é), ``è`` (è), ``ê`` (ê), ``ë`` (ë). Ces entités existe pour chaque voyelle, en minuscule et majuscule. Donc, il existe ``é``, ``É``, ``í``, ``Í``, et ainsi de suite. Il existe aussi ``ç`` (ç), ``œ`` (œ), et ``€`` (€). 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é `` ``. 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é `` ``. Chaque `` `` 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 : :: (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 : :: cliquez ici 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 ````. 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 : ::
  • première chose
  • deuxième chose
  • troisième chose
Qui donne : .. raw:: html
  • 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. ::
th 1 th 2 th 3
td colspan 2 td rowspan 2
tr 2, td 1 tr 2, td 2
À 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 ``