Conférence TIC - Institut d'Etudes Politiques - Paris

Exposés

Mémoires

Boîte à outils

Etudiants

Technologies de l'Information et de Communication

Composition de pages web

[ Prolégomènes ] - [ Principes du HTML ] - [ Créer une page en HTML ] [ Premiers éléments de programmation ] - [ La mise en page d'un document HTML ] [ La mise en forme des caractères ] - [ Les liens hypertextes ] - [ Insérer des images ] [ Un peu de couleur dans votre page web ] - [ Les tableaux ] - [ Les listes ] - [ Les cadres ]

Prolégomènes

L’Internet est un réseau de réseaux informatiques interconnectés. Il a été créé par le Département de Défense américain dans les années 1960 (il s’appelait alors Arpanet) pour faciliter et fiabiliser les communications entre les ordinateurs des centres de recherche militaire. Il est basé sur un protocole de communication (le TCP/IP), qui permet d'envoyer une information découpée en paquets, lesquels se dirigent sur le réseau de façon indépendante.
Dans les années 1970, ce réseau s’est étendu aux universités pour permettre une meilleure communication entre les chercheurs, quel que soit leur domaine d'expertise. L’esprit de partage de savoirs de la recherche a longtemps été prédominant sur l’Internet et reste encore marquant. C’est cet esprit qui a mené à la création du World Wide Web (ou toile mondiale) au début des années 1990 par des chercheurs du CERN.
Le web permet à toute personne connectée à l’Internet de prendre connaissance des informations diffusées sur n’importe quel serveur connecté lui aussi au réseau. Cette toile mondiale est basée sur la technologie de l’hypertexte, qui permet de commuter automatiquement d’un serveur informatique à un autre. En entrant l’identifiant d’un serveur (son adresse ou URL pour Uniform Resource Locator), l’internaute accède directement aux informations. Celles-ci sont organisées en pages, et l’utilisateur peut passer de l’une à l’autre grâce à des liens proposés par le site visité. L’hypertexte permet aussi de créer des liens d’un serveur web à un autre serveur.
Sur les pages web, les données peuvent mêler textes, images, sons, vidéo et doivent pouvoir être lues par tout type d’ordinateur (PC, Mac, station Unix, etc.). Cela facilite l'échange, dans un parc informatique mondial hétéroclite. En effet, lorsqu’un texte est écrit grâce à un logiciel de traitement de texte sur un Macintosh, par exemple, il est toujours délicat de le lire par la suite sur un PC. Les systèmes d’exploitation sont différents et même si l’on enregistre le texte dans un format a priori compatible, il n’est pas rare de perdre la mise en page du texte, voire quelques paragraphes. De telles erreurs ne sont pas possibles avec l'outil universel qu'est le web.
Le web utilise un langage universel et simple : le HTML.

[ Prolégomènes ] - [ Principes du HTML ] - [ Créer une page en HTML ] [ Premiers éléments de programmation ] - [ La mise en page d'un document HTML ] [ La mise en forme des caractères ] - [ Les liens hypertextes ] - [ Insérer des images ] [ Un peu de couleur dans votre page web ] - [ Les tableaux ] - [ Les listes ] - [ Les cadres ]

Principes du HTML

Le HTML est une langue très simplifiée permettant la mise en page de documents pour le web. Pour éviter les mises en forme propriétaires, telles que celles des traitements de texte, toutes les indications de mise en page sont indiquées de façon textuelles. Elles sont déchiffrées linéairement par le navigateur. Pour être compréhensibles par tous les types de machine, les pages en HTML doivent être sauvegardées en format "texte seulement" ("text only" en anglais), c'est à dire faisant fi de toutes les décorations de mise en page, même les sauts de ligne et la typographie.
Ainsi, une page en HTML n'est qu'un document textuel, qui décrit pas à pas ce qui doit s'afficher à l'écran. Ces descriptions prennent corps dans des balises (tags en anglais) qui explicitent les caractéristiques de mise en page. Une balise est délimitée par un "<" entrant et un ">" sortant. Elles sont exprimées en langage quasi-naturel. Par exemple, lorsque l'on veut centrer un paragraphe, la balise est <CENTER>.
Pour indiquer que la mise en page souhaitée n'a plus lieu d'être, il faut réecrire la balise en question, en y ajoutant le signe "/" juste après le "<" ouvrant. Ainsi, pour indiquer que l'on ne souhaite pas que la suite du texte soit centrée, il suffit d'écrire </CENTER>.

Créer une page en HTML

La création d'une page web est devenue très facile sans taper la moindre ligne de code grâce à de nombreux éditeurs disponibles gratuitement sur le réseau. Pour créer une page web, il est possible se munir d'un tel logiciel, mais alors ce tutoriel ne vous serait d'aucune utilité.
Voici toutefois quelques logiciels d'édition :

Netscape Communicator (version 4 et au delà) est muni d'un éditeur, Netscape Composer, qui permet de créer une page rapidement. Très facile à utiliser, il présente cependant le défaut d'offrir à la sortie un code quelque peu fouilli.
Microsoft Front Page est moins simple à manipuler mais il comprend un pseudo-serveur qui facilite la création de gros sites, surtout pour les tests des liens hypertextes.
Corel Web Designer permet comme Front Page de créer des sites complets avec un pseudo-serveur.

Tous ces logiciels -et bien d'autres- vous faciliteront la tâche pour créer une page, voire un site complet, sans vous soucier du code HTML. Mais il vaut mieux créer ses pages soi-même, en maîtrisant le code qui la définit. Pour cela, un logiciel de traitement de texte classique suffit (Word, Wordpad ou Write pour Windows 95, Texteditor ou Emac pour Unix, Simpletext ou Bbedit pour Mac).
Notons toutefois, l'existence de HTMLed, logiciel qui laisse une entière liberté de création et maîtrise d'écriture, mais qui sait offrir des fonctionnalités pour faciliter la tâche du programmeur que vous êtes ou allez devenir d'ici quelques pages.

[ Prolégomènes ] - [ Principes du HTML ] - [ Créer une page en HTML ] [ Premiers éléments de programmation ] - [ La mise en page d'un document HTML ] [ La mise en forme des caractères ] - [ Les liens hypertextes ] - [ Insérer des images ] [ Un peu de couleur dans votre page web ] - [ Les tableaux ] - [ Les listes ] - [ Les cadres ]

Premiers éléments de programmation

Pour commencer, voici les premières opérations à effectuer :

ouvrez un logiciel de traitement de texte et un document vierge,
pour indiquer dans le corps du document qu'il s'agit de HTML, il faut écrire la balise <HTML> en début de document et </HTML> en fin. Il est bon d'écrire d'emblée les deux balises, puis de remplir le coeur du document entre elles. Votre document est donc de la forme :

donnez un nom au document que vous allez créer : pour être identifié par l'ordinateur comme un document en HTML, il faut lui donner un nom dont l'extension est ".htm" ou ".html". Vous pouvez par exemple enregistrer le document sous le nom "page.html".

Attention ! Pour être lu par tout type d'ordinateur, il est nécessaire d'enregistrer le document sous le type de fichier "texte seulement". Pour être interprété par les navigateurs comme un fichier HTML, il faut que le nom du document soit du type "nom.html", où le nom du fichier ne doit pas comporter pas d'espace.

ouvrez un navigateur, qu'il s'agisse de Netscape Navigator, Microsoft Explorer ou un autre,
ouvrez le fichier "page.html" que vous venez de créer.

Vous pouvez, avec les navigateurs, ouvrir un document en HTML se situant dans votre ordinateur et non sur le web. A partir du menu "Fichier" ("File" en anglais) puis du sous menu "Ouvrir" ("Open", "Open page" ou "Open file"), sélectionnez le fichier que vous venez de créer ("page.html" dans notre cas). Il peut être nécessaire de parcourir l'arborescence de l'ordinateur pour accéder au dossier où vous l'avez enregistré. L'adresse qui s'inscrit alors dans le navigateur est du type "C:\documents\page.html", si par exemple vous avez enregistré le fichier "page.html" dans le dossier "documents" situé à la racine du disque "c:".

par la suite, chaque fois que vous modifierez le fichier "page.html", et après l'avoir enregistré à partir du logiciel de traitement de texte, vous pourrez constater les dernières modifications en rafraîchissant la page du navigateur avec le bouton "Actualiser" ("Reload" en anglais). Cela permet de prendre en compte les dernières modifications que vous avez opérées.

A chaque fois que vous souhaitez constater l'évolution du document à partir du navigateur, il faut enregistrer le document avec le logiciel de traitement de texte avant de rafraîchir la page.
La page étant créée, il convient maintenant de la remplir. Pour cela, il faut savoir qu'un document sur le web se compose de deux parties : un en-tête et un corps.

L'en-tête du document

L'en-tête comprend :

le titre du document (celui qui apparait dans la barre en haut de l'écran à côté du nom du navigateur),
des identifiants, appelés Metatags, qui sont facultatifs mais permettent au document d'être correctement répertorié dans les moteurs de recherche,
parfois des programmes informatiques, lorsque le document contient des fonctions en Java.

Pour définir l'en-tête du document, la balise est naturellement <HEAD>.
Pour commencer, il s'agit de donner un titre au document. Ce titre se trouve entre deux balises : l'une ouvrante <TITLE> et l'autre fermante </TITLE>. Puis il s'agit de fermer l'en-tête par la balise </HEAD>

Exercice n°1 Créez une page sous le nom "page.html", dont le titre est :
"Page sur mon cours NTIC" Visualisez le résultat sur un navigateur.

Les Metatags (Métabalises) sont des balises écrites dans l'en-tête du document, qui permettent de décrire le contenu de la page afin, notamment, de la référencer correctement dans les moteurs de recherche tels que Alta Vista, Hotot ou Infoseek. Les deux principaux Metatags sont relatifs à la description textuelle de la page (texte court apparaîssant sous l'URL de la page dans les moteurs de recherche), et aux mots clé la caractérisant (liste de mots à laquelle les moteurs de recherche seront particulièrement sensibles au cours d'une requête). Ces balises sont à écrire de la façon suivante :

<META HTTP-EQUIV="Description" CONTENT="texte descriptif de la page"> <META HTTP-EQUIV="Keywords" CONTENT ="mots-clés">

Il est possible également de mettre des metatags purement informatifs, concernant l'auteur de la page ou la date de création. Il s'agit alors de mettre comme attribut du HTTP-EQUIV les indications "Author" ou "Creation-Date" et de remplir le CONTENT par les informations appropriées.
Il existe d'autres métatags, que nous verrons par la suite. Un metatag utile est "Refresh" qui permet d'afficher une nouvelle page web au bout d'un certain nombre de secondes. Elle est du type :

<META HTTP-EQUIV="Refresh" CONTENT ="3,http://perso.club-internet.fr/emarco">

Qui envoie directement vers l'URL "http://www.metafort.com/page2.html" au bout de 3 secondes d'affichage de la page où figure ce Metatag.
Les Metatags font partie des quelques balises qui, n'ayant pas une action mise en forme, ne se referment pas.

Le corps du document

Le corps correspond à tout ce qui se trouve dans la fenêtre principale du navigateur. La balise correspondante est <BODY>, que l'on ouvre juste après la balise fermante de l'en-tête et que l'on referme en toute fin du document, avant l'ultime balise </HTML>.
Pour éviter d'oublier la balise fermante, il est conseillé de l'écrire d'emblée puis de remplir la page entre les deux balises <BODY> et </BODY>. Dès lors, tout ce qui sera écrit entre ces deux balises sera soit du texte qui s'affichera à l'écran, soit des balises qui permettront la mise en page du document.

La mise en page d'un document HTML

Les sauts de ligne

Comme nous l'avons vu, les documents enregistrés en format "texte seulement" ne prennent en compte aucune mise en page, pas même les sauts de ligne. Pour s'en rendre compte, voici un petit exercice.

Exercice n°2 A partir de la page créée précédemment, rédigez dans le corps du document le texte suivant, en respectant la mise en page proposée ("" représentant les sauts de ligne) :

Conférence NTIC ""
Institut d'Etudes Politiques ""
Tous les samedis, de 10h45 à 12h15 ""
Enseignant : Emmanuel Marcovitch ""

Visualisez le résultat sur un navigateur.

La première balise que nous verrons est le saut de ligne ("break" en anglais), qui en HTML est <BR>. Contrairement à la règle -il nous fallait bien une exception-, c'est une balise qui ne se ferme pas : le saut de ligne est une action ponctuelle.
Un saut de ligne peut aussi se faire avec la balise paragraphe <P>, utilisée sans paramètre et sans la refermer.

Exercice n°3 Reprenez la page précédente en mettant les balises de saut de ligne là où elles sont nécessaires." Visualisez le résultat sur un navigateur.

L'alignement

Les premières formes de mise en page concernent l'alignement du texte : celui-ci peut-être aligné à gauche, à droite, centré et -sur les dernières versions des navigateurs- justifié. Comme dans les traitements de texte, l'alignement joue au niveau d'un paragraphe entier : pour modifier l'alignement, il faut travailler sur un nouveau paragraphe.
La balise de création d'un paragraphe est <P>, dans laquelle se rajoute l'attribut d'alignement. Comme tous les attributs, il doit se trouver entre guillemets. On peut donc avoir :

<P ALIGN="left">
<P ALIGN="right">
<P ALIGN="center">
<P ALIGN="justify">, lequel n'est opérationnel que sur Netscape Communicator (version 4 et supérieures) et sur les dernières versions d'Internet Explorer (version 4 et supérieures).

Une fois le paragraphe terminé, la balise fermante est </P>. On constate que le navigateur intègre directement les sauts de ligne avant et après le paragraphe.
Pour éviter cela il faut utiliser la balise <DIV>. Elle s'utilise de la même façon que <P> mais ne réalise pas de saut de ligne significatif ni avant ni après la paragraphe.

Exercice n°4 A la suite du texte existant, mettez en page le texte suivant. Le premier paragraphe est aligné à gauche, le suivant est centré, le troisième est aligné à droite et le dernier est justifié :

Courrier électronique

Moteurs de recherche

Création de pages et de sites

Les conférences 2, 3 et 4 sont dédiées à l'apprentissage des outils. Elles ont lieu dans le laboratoire multimédia, afin que chaque étudiant puisse disposer d'un ordinateur personnel et soit ainsi à même de manipuler les outils. Visualisez le résultat sur un navigateur.

On notera qu'un paragraphe est aligné à gauche par défaut. La balise d'alignement à gauche n'est donc utile que pour garder une homogénéité dans l'écriture et la présentation. De même, pour centrer un texte, la balise <CENTER> est possible (Balise Netscape à l'origine). Elle s'ouvre avant le paragraphe concerné et se ferme après par la balise </CENTER>. Cette balise n'effectue pas en revanche le saut de ligne qu'affiche la balise <P> comme la balise <DIV>.

La mise en forme des caractères

Les balises simples

Comme dans les logiciels de traitement de texte, il est possible de donner une forme, une taille ou une police spécifique aux caractères. Il existe des balises de mise en forme simple, qui permettent de mettre le texte en gras, en italique, de le souligner, de le barrer, etc. Ces balises s'ouvrent avant la partie du texte (qui peut être un paragraphe entier, quelques mots ou même une lettre dans un mot) concernée et se referment juste après.
Ces balises sont :

<B> qui permet d'afficher le texte en gras
<I> qui permet d'afficher le texte en italique
<U> qui permet d'afficher le texte en souligné
<STRIKE> qui permet d'afficher un texte barré
<BLINK> qui permet de faire clignoter le texte (impossible sur ce support...)
<SUP> qui permet d'afficher le texte en exposant
<SUB> qui permet d'afficher le texte en indice

Exercice n°5 A la suite du texte existant, mettez en page le texte suivant, en respectant les indications de mise ne page pour chaque ligne :

Au premier cours nous avons vu, comment écrire un courrier électronique et l'envoyer, avec ou sans attachement (pièce jointe). Nous avons pu mettre des destinataires en copie, et même en copie invisible ! Comme les fantômes des chateaux hantés ! Bouhhhh ! ^{Bouhhhh !}

Visualisez le résultat sur un navigateur.

Les titres

Il est également possible de créer des titres pour hiérarchiser les présentations. Les "gros titres", dits de niveau 1 (comme dans les traitements de texte) peuvent permettre de distinguer les principales parties d'un texte ou d'un exposé. Des titres intermédiaires, de niveau inférieur, sont des moyens de jalonner les parties par des sous-parties. Ces balises de titre jouent sur la taille des caractères et sur l'espace précédent et suivant les titres.

Titre se traduisant en anglais par "Header", les balises sont du type <H1>, <H2>, ..., <H6>. 1, 2, ..., 6 indiquant le niveau du titre. Un titre de niveau 1 sera considéré comme un "gros titre", alors que ceux de niveau inférieur seront des titres intermédiaires. Il faut évidemment penser à fermer la balise de titre après celui-ci. Les balises fermantes sont </H1>, </H2>, ..., </H6>, en fonction du titre en question.

Mais mieux vaut constater par soi-même les effets, avec l'exercice suivant :

Exercice n°6 Modifiez la mise en page de l'ex. n°2 : mettez le 1er paragraphe en titre de niveau 1, le 2ème en titre 3 et le 3ème en titre 4 :

Conférence NTIC ""
Institut d'Etudes Politiques ""
Tous les samedis, de 10h45 à 12h15 ""

Visualisez le résultat sur un navigateur.

La taille et la police des caractères

A part ces balises ponctuelles qui permettent d'agrémenter un texte, il est possible d'enjoliver la présentation en jouant sur la taille et la police des caractères. La balise est <FONT>, qui signifie caractère en anglais.
La taille des caractères se mesure sur une échelle de 1 à 7. Ce n'est donc pas la même mesure que celle utilisée par les logiciels de traitement de texte. On peut toutefois dresser une table d'équivalences :
Taille en HTML Equivalent dans les traitements de texte

1 2 3 4 5 6 7

8 10 12 14 18 24 36

L'indication de taille qui entre dans la balise <FONT> est SIZE. Par exemple, pour donner une taille de 3 (équivalent du 12 dans les traitements de texte), la balise devient : <FONT SIZE="3">

Il est également possible de choisir une police pour le texte que l'on publie sur le web. Le principe revient à indiquer le nom de la police ("face" en anglais) dans la balise FONT. Dès lors, de deux choses l'une :

soit l'ordinateur qui lit la page web dispose de la police indiquée et il l'affiche,
soit l'ordinateur ne connait pas la police indiquée, il affiche alors la police sélectionnée par défaut par le navigateur (celle qui s'affiche a priori, si nous n'indiquons pas de police spécifique), qui est en général du Times.

Il est possible d'indiquer plusieurs polices de caractères. Le navigateur affichera la première. Toutefois, s'il s'agit d'une police dont ne dispose pas l'ordinateur, il affichera la suivante, ou celle d'après s'il ne dispose pas non plus de la seconde. Si par exemple nous souhaitons que le texte s'affiche avec la police "univers", ou, si l'ordinateur qui lit la page ne la possède pas, qu'il s'affiche avec la police "arial", la balise deviendra :
<FONT FACE="univers, arial">

On constate ici que l'affichage de la page web dépend pour beaucoup des fonctionnalités de l'ordinateur qui lit la page, et non de celui à partir duquel la page est créée. De même, en fonction de la taille de l'écran de l'ordinateur qui visite votre page, l'allure générale de la page sera modifiée.
Quels que soient les arguments de taille, de police ou, comme nous le verrons plus tard, de couleur, que nous entrons dans la balise FONT, la balise fermante reste toujours </FONT>.

Exercice n°7 Modifiez la mise en page de l'ex. n°4 en donnant au texte du paragraphe suivant une taille équivalente au 14 des logiciels de traitement de texte et la police Bookman ou, en 2ème choix, la police Arial :

Visualisez le résultat sur un navigateur.

Les accents

Tous les serveurs ne déchiffrent pas les accents, cette particularité du langage qui n'existe pas en anglais. Même si une page web avec des accents pourra le plus souvent être lue par les navigateurs, il faut prévoir les cas où l'utilisateur ne déchiffrera pas les lettres accentuées. Bien évidemment, il ne faut pas revenir sur la présence d'accents, il faut en revanche les coder de telle façon qu'ils soient déchiffrables en tant que caractères spéciaux.
Ces entités se distinguent par la typographie suivante :

elles commencent par le symbole "&",
puis elles indiquent la lettre à accentuer, en majuscule ou minuscule suivant l'affichage que vous désirez,
puis un code désignant le type d'accent (aigu, grave, circonflèxe, etc.),
enfin un symbole fermant, le point virgule ";".

Les codes désignant le type d'accent sont les suivants :

Accent ou appendice	Code HTML
aigu grave circonflexe trema cedille	acute grave circ uml cedil

On peut alors combiner les accents de multiples façons. Voici quelques exemples :

Lettre	Entité correspondante
é É Ê à ï Ç	é É Ê à ï Ç

Cette tâche vous paraîtra fastidieuse à premier abord. Aussi est-il conseillé d'utiliser par la suite un logiciel comme HTMLed qui permet de remplacer directement tous les caractères spéciaux d'un texte d'un simple clic.

Exercice n°8 Modifiez ce paragraphe de l'ex. n°5 en codant les accents :

Visualisez le résultat sur un navigateur.

Il est possible d'éviter cette mise en forme des accents en écrivant le metatag suivant de l'en-tête du document :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> Un tel metatag facilite bien le travail de programmation, mais il faut en connaître les limites : si le navigateur de la personne qui visite une telle page n'a pas de table de correspondance des caractères, les lettres accentuées risquent de ne pas s'afficher correctement.

[ Prolégomènes ] - [ Principes du HTML ] - [ Créer une page en HTML ] [ Premiers éléments de programmation ] - [ La mise en page d'un document HTML ] [ La mise en forme des caractères ] - [ Les liens hypertextes ] - [ Insérer des images ] [ Un peu de couleur dans votre page web ] - [ Les tableaux ] - [ Les listes ] - [ Les cadres ]

Les liens hypertextes

Une donnée caractéristique fondamentale du web est l'hypertexte. Cela consiste en la possibilité de créer des liens entre les pages qui se trouvent sur le web, qu'elles soient sur un même serveur ou non. Le lien se fait en cliquant avec la souris sur un mot ou une image prévu à cet effet. La balise qui permet d'établir un lien hypertexte est <A> (initiale du terme anglais “anchor”, qui signifie “ancrage”). Dans la balise, la référence hypertexte est indiquée par l’attribut HREF, suivie du chemin à suivre pour accéder à la page visée. Ainsi, supposons que le lien pointe vers une page intitulée "maison.html" et qu'elle se trouve dans le sous répertoire "habitat", l'indication de la balise sera :

Cette balise précède le mot, la phrase ou l'image sur laquelle il faut cliquer pour accéder à la page maison. Pour fermer cette balise, après le lien, il faut écrire simplement </A>, sans répéter les attributs de la référence hypertexte.

Le texte "cliquable", symbolisant le lien hypertexte, apparaît souligné sur la page. C'est un moyen, pour la personne qui visite votre page, de comprendre qu'un lien se trouve derrière le texte en question. Un autre indice, qui permet de comprendre qu'il existe un lien hypertexte, est que le pointeur de la souris passe d'un symbole de flèche à celui d'une petite main.

Pour indiquer l'emplacement de la page destinataire du lien, il faut bien identifier le répertoire où elle se trouve. On peut distinguer quatre principaux cas :

la page vers laquelle on souahite pointer -"maison.html", par exemple- est située dans le même répertoire que le fichier HTML à partir duquel le lien est fait. Dans ce cas, il suffit juste d'indiquer le nom de la page destinataire du lien, le navigateur comprenant qu'il doit la rechercher dans le même répertoire. La balise est alors par exemple :

la page destinataire est située dans un sous répertoire de celui contenant le fichier HTML d'origine, ou dans un répertoire encore inférieur dans l'arborescence. Il faut alors indiquer le chemin à suivre à partir du répertoire où se trouve le fichier HTML d'origine. Supposons que dans le répertoire contenant la page d'origine se trouve un sous répertoire "habitat", dans lequel se trouve un autre sous répertoire "solide" et que la page "maison.html" se trouve dans ce répertoire, la balise deviendra :

la page destinataire du lien est située dans un répertoire indépendant, n'étant pas sous celui contenant le fichier HTML d'origine. Il faut alors décrire l'arborescence à suivre à partir de la page où le lien se fait. Pour cela, il faut pouvoir remonter dans l'arborescence des répertoires (en utilisant "../") afin de revenir à un répertoire commun, puis redescendre suivant un autre chemin vers le fichier destinataire du lien.

où "../" permet de passer du répertoire "solide" où se trouve le fichier de départ vers le répertoire "habitat" et où "temporaire/" permet de redesendre dans le répertoire "temporaire" où se trouve le fichier vers lequel le lien pointe.

la page destinataire se trouve ailleurs sur l'Internet, sur un autre site web. Il faut alors indiquer l'adresse complète de la page, sur le site où elle se trouve. La balise devient par exemple :

Exercice n°9 Ajoutez, en bas de la page précédente, un lien hypertexte qui pointe vers l'adresse suivante : http://perso.club-internet.fr/emarco/etud.html

qui serait accessible à partir du "cliquez ici" du texte suivant :

Pour trouver la liste des étudiants de la conférence, cliquez ici

Visualisez le résultat sur un navigateur.

Des attributs supplémentaires permettent d’ajouter des fonctionnalités aux liens hypertextes. Ainsi, si l’on souhaite que la page destinataire du lien s’ouvre dans une nouvelle fenêtre du navigateur permettant à la page contenant le lien de rester active, il faut ajouter dans la balise <A> l’attribut TARGET, suivi de :
- "_blank", ouvre la page dans une nouvelle fenêtre sans titre,
- "_self", ouvre la page dans la fenêtre actuelle,
- "_parent", ouvre la page sur la fenêtre parent, équivaut à "_self" s'il n'y a pas de fenêtre parent,
- "_top", ouvre la page dans la fenêtre située au premier plan, équivaut à "_self" si la fenêtre est déjà au premier plan.
On peut ainsi avoir par exemple : <A HREF="hopla.html" TARGET="_top">

Exercice n°10

Reprenez le lien précédent, qui pointait vers :

http://perso.club-internet.fr/emarco/etud.html

et transformez-le de façon à faire apparaître la nouvelle page sur une fenêtre au premier plan.

Visualisez le résultat sur un navigateur.

Il est également possible d’établir un lien au sein d’une page, pour accéder directement à un chapitre ou une autre partie de la page, sans avoir à utiliser l’ascenceur du navigateur. Pour cela, il faut tout d’abord identifier la partie où l’on souhaite accéder, en lui attribuant un nom. Cette identification se fait par la balise <A NAME=”partie”>, qu’il faut donc placer à l’endroit où l’on souhaite que le lien interne pointe.
Pour établir un lien vers cette partie, on utilise la balise <A>, en écrivant l’attribut de référence hypertexte avec un symbole dièse, de la façon suivante : <A HREF=“nom_du_fichier.html#partie”>.

Par exemple, dans le cas d’un lexique alphabétique, on pourrait avoir la configuration suivante :

Accès à la <A HREF=“nom_du_fichier.html#lettreC”>lettre C</A>.

et au niveau du lexique correspondant à la lettre C, on aurait :

Au sein d'un même fichier il n'est pas nécessaire de mettre le nom_du_fichier.html mais pour avoir acces d'un fichier distinct vers le coeur d'un autre fichier il faut mettre le nom de se dernier ou son adresse URL.

Insérer des images

Il est possible d'agrémenter une page web d'images, et la plupart des sites en disposent, sous diverses formes. En effet, celles-ci peuvent-être des photographies, des dessins, des graphismes. Ces images peuvent être crées directement sur ordinateur, ou être scannées à partir d'un support papier. D'où qu'elles proviennent, et quoiqu'elles représentent, les images doivent être codée dans un format lisible par les navigateurs. Il existe deux formats de codage adaptés à la diffusion sur le web, le JPEG (ou JPG) et le GIF, et les logiciels de traitement d'image ou de création graphique permettent d'enregistrer ou de transférer les images sous ce modèle.

Le JPEG (Joint Photographic Expert Group) est un format de compression d'images, qui réduit d'un facteur 20 environ leur volume. Les images sont ainsi transportables bien plus rapidement sur les réseaux, et particulièrement sur l'Internet. JPEG est particulièrement adapté aux photographies et dessins car il permet de coder une plus large palette de couleurs que le GIF.

Le format GIF compresse moins les données (d'un facteur 4 environ), qui sont donc un peu plus lourdes dans l'absolu. Il est adapté aux images plutôt légères, qui peuvent ainsi être codées sans perdre trop d'information.

L'insertion d'une image sur une page web se fait à l'aide de la balise <IMG>. Il s'agit en fait d'indiquer l'emplacement du fichier image sur le serveur pour que le navigateur cherche le fichier et l'insère dans la page. Ainsi, supposons que l'image que nous souhaitions afficher s'appelle "maison.gif" et qu'elle se trouve dans le sous répertoire "images", l'indication de la balise sera :

Notons que cette balise ne se ferme pas, l'insertion d'une image étant un événement ponctuel.
L'image n'est pas incluse en tant que telle dans le fichier HTML. Le fichier HTML reste du texte seulement et ne contient que la référence de l'image.
Pour indiquer l'emplacement de l'image intitulée "maison.gif", il faut bien identifier le répertoire où elle se trouve, comme nous l'avons vu pour les liens hypertextes.

Exercice n°11

Ajoutez, dans la page précédente, l'image se trouvant à l'adresse :

http://perso.club-internet.fr/emarco/images/ieppt.gif

que vous aurez au préalable téléchargé sur votre disque dur, dans un sous répertoire "images" (que vous aurez créé sous le répertoire contenant le fichier "page.html")

Visualisez le résultat sur un navigateur.

Certains attributs permettent d'ajouter des paramètres à l'image.

ALT, donne un nom à l'image, qui apparaîtra à la place de l'image pendant que celle-ci se charge et dans un petit cadre au dessus de l'image lorsque l'on pointe la souris dessus. On ajoute alors l'attribut : ALT=" nom_image",
BORDER, définit la taille de la bordure de l'image : BORDER="0" ne met aucune bordure, BORDER="10", met très grosse bordure,
WIDTH et HEIGHT, définissent respectivement la longueur et la hauteur, exprimées en pixels, de l'emplacement réservé à l'image. Ainsi, (WIDTH="100", HEIGHT="50") donnera à l'image une longueur de 100 pixels et une hauteur de 50 pixels. Si l'image d'origine a cette taille, elle apparaîtra telle quelle. Si elle est de taille différente, elle sera agrandie ou rétrécie pour atteindre cette taille choisie,
VSPACE et HSPACE, définissent respectivement l'espacement vertical et horizontal autour de l'image. Ex : VSPACE="20", HSPACE="15",
LOWSRC, est l'emplacement où le navigateur va chercher une image basse résolution qui sera chargée avant l'image définitive, localisée en SRC. Une fois toutes l'image chargée, il remplacera cette image par la véritable image dont l'emplacement est en SRC. Ex : LOWSRC="images/petitlogo.gif"
ALIGN, qui définit l'agencement de l'image par rapport à un texte qui la suit. "LEFT" et "RIGHT" permettent d'entourer l'image de texte, l'image se trouvant à gauche du texte dans le premier cas, et à droite dans le second.

Exercice n°12 A partir de l'image affichée avec l'exercice précédent, ajoutez les caractéristiques suivantes :

Donnez à l'image le nom "logo IEP", qui s'affichera par défaut le temps que l'image se charge
Laissez autour de l'image un espacement horizontal et vertical de 10 pixels
Alignez l’image à droite de la page, entourée du texte suivant, lui même aligné à droite :

“Cette image qui s’affiche sur votre droite est le logo de l'Institut d'Etudes Politiques de Paris. Cette noble institution forme l'élite intellectuelle de notre grand pays. C'est pour cela qu'elle est située en plein coeur de Saint-Germain-des-Prés, rue Saint Guillaume.” Visualisez le résultat sur un navigateur.

Il est évidemment possible de faire d’une image un lien hypertexte. Il suffit pour cela d’entourer la balise d’insertion d’image par la balise de lien hypertexte. Ce qui donne par exemple :

<A HREF=“maison.html”><IMG SRC=“maison.gif”></A> Comme nous l’avons vu, lorsqu’un mot ou un texte est un lien hypertexte, il apparaît souligné. Lorsqu’il s’agit d’une image, elle apparaît par défaut entourée d’une bordure. C’est un moyen qui permet à la personne qui visite votre page de savoir qu’un lien se trouve derrière l’image en question. Toutefois, la bordure autour d’une image n’est pas toujours sayante et il peut être graphiquement préférable de l’oter. Pour cela, il faut ajouter l’attribut BORDER=“0” à la balise d’image, qui devient par exemple <IMG SRC="maison.gif BORDER="0">.
La personne qui visite votre page pourra toujours comprendre que l’image est un lien en voyant le curseur de la souris se transformer en main à son passage sur l’image.

Exercice n°13

A partir du logo de l'IEP, créez un lien hypertexte vers le site web de Sciences-Po dont l’adresse est :

http://www.sciences-po.fr en enlevant la bordure qui se crée autour de l’image. Visualisez le résultat sur un navigateur.

Un peu de couleur dans votre page web

Les couleurs sont un élément essentiel pour donner un bel aspect à une page web. Qu'il s'agisse du fond d'écran, du texte, des liens hypertextes, elles agrémentent bien les présentations. Comme les caractères accentués, les couleurs sont codées pour pouvoir être lues par tous types d'ordinateurs et de systèmes. Le codage utilisé est celui du "Rouge-Vert-Bleu", utilisé aussi pour des projections vidéo. Il est basé sur le principe que chaque couleur peut se décomposer suivant ces trois composantes.

Le code d'une couleur est donc composé de trois parties : deux chiffres indiquent le taux de rouge, deux chiffres indiquent le taux de vert et deux le taux de bleu. Tout serait simple si les deux chiffres se calculaient en base décimale -de 0 à 9-, celle que nous utilisons pour compter couramment. Chacun des deux chiffres se calcule en base hexadécimale, qui est un système de 16 chiffres de base (au lieu de 10). Ces 16 chiffres sont : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

La table d'équivalences entre les deux systèmes commence ainsi :

Décimal 0 1 2 3 4 5 6 7 8 9

Hexadécimal 0 1 2 3 4 5 6 7 8 9

Décimal 10 11 12 13 14 15 16 17 18 19

Hexadécimal A B C D E F 10 11 12 13

Décimal 20 21 22 23 24 25 26 27 28 29

Hexadécimal 14 15 16 17 18 19 1A 1B 1C 1D

Inutile de préciser qu'essayer de convertir un chiffre de base décimale en base hexadécimale donne très vite mal à la tête. Heureusement, une calculatrice scientifique fait immédiatement la conversion. Tout ordinateur (PC et Mac) en dispose. Sur Windows 95 par exemple, la calculatrice est accessible par le bouton [Démarrer], puis le menu [Programmes] et [Accessoires]. Il est possible de passer d'une calculatrice standard à une calculatrice scientifique (et vice-versa) par le menu "Affichage" de la calculatrice.

Exercice n°14 Avec la calculatrice disponible sur votre ordinateur, opérez les conversions suivantes :

1)- de décimal en hexadécimal : 30, 200, 255, 256
2)- d'hexadécimal en décimal : 0, 30, F5, BB

Réponses -qui ne vous dispensent pas de vérifier sur la calculette- : 1)- 1E, C8, FF, 100, 2)- 0, 48, 245, 187

Cet exercice montre que l’équivalent de 255 (système décimal) est FF en système hexadécimal. Il apparaît en fait que les 255 premiers nombres peuvent se coder en système hexadécimal avec deux caractères seulement. A partir de 256 (équivalent à 100 en système hexadécimal), on passe à trois caractères. Ainsi, le système de codage des couleurs, avec deux chiffres hexadécimaux uniquement, permet de distinguer 256 teintes de rouge (de 0 à 255 en décimal ou 0 à FF en hexadécimal), 256 teintes de vert et 256 de bleu. Soit en tout un peu plus de 16 millions de couleurs.

Pour connaître le taux de rouge, de vert et de bleu dans une couleur il faut en général utiliser un nuancier. Tout logiciel de dessin en comporte un, à commencer par Paint, que l'on trouve sur tous les ordinateurs (Menu [Démarrer], puis [Programmes], puis [Accesoires] où il faut choisir le programme Paint).

Dans Paint, suffit de sélectionner une couleur sur le nuancier (accessible par le menu [Options] puis [Modification des couleurs]) et de noter la valeur décimale des teintes de rouge, de vert et de bleu. Il faut ensuite faire la conversion avec l'aide de la calculatrice scientifique. Les logiciels de composition de pages HTML ont aussi en général une fonction qui permet de traduire directement une couleur du nuancier en expression hexadécimale.

On peut déjà noter que la couleur codée "000000", qui correspond à l'absence de rouge (00), l'absence de vert (00) et l'absence de bleu (00) est le noir (équivalent à l'absence de toute couleur). La couleur codée "FFFFFF", qui correspond au taux maximum de rouge (FF), de vert (FF) et de bleu (FF) est le blanc (équivalent à toutes les couleurs mélangées).

Ou encore, la couleur codée "FF0000", qui correspond au taux maximum de rouge (FF), mais à l'absence de vert (00) et de bleu (00) est le rouge le plus vif. "00FF00" et "0000FF" correspondent quant à eux, respectivement, au vert et au bleu les plus vifs.

La couleur n’est pas une balise en tant que telle sur une page web, mais apparaît comme attribut dans les balises existantes. La couleur s’exprime toujours entre guillemets, la valeur hexadécimale de la couleur choisie étant précédée par le caractère dièse (#). On trouve des indications de couleur dans deux balises principales : BODY et FONT.

Dans la balise BODY, définissant le corps de la page, il est possible de paramétrer certaines couleurs, telles que :

couleur de fond d’écran, à travers l’indication BGCOLOR (pour BackGround COLOR ou couleur du fond), ce qui donne par exemple : BGCOLOR=“#A23CB1”,
la couleur des liens hypertextes de la page, avant que ceux-ci ne soient visités, à travers l’indication LINK (qui signifie lien en anglais),
la couleur des liens hypertextes déjà visités, permettant d’établir une distinction pour l’utilisateur entre les pages qu’il connaît déjà (et qu’il n’a pas forcément besoin de revisiter) et celles qu’il n’a jamais explorées : l’attribut est alors VLINK, pour Visited Link (lien visité),
la couleur des liens hypertextes pendant que l'on clique dessus : l'attribut est alors ALINK, pour Active Link (lien actif).

On pourra ainsi avoir par exemple la balise BODY suivante : <BODY BGCOLOR="#ffffff" LINK="0000ff" VLINK="#ff0000">

qui donnera à la page web un fond blanc, des liens hypertextes avant visite bleu et des liens visités rouge.

Dans la balise FONT, paramétrant les caractères de la page, il est possible d’indiquer la couleur souhaitée pour le texte. Il suffit alors de rajouter l’attribut COLOR, suivant la même règle d’écriture que précédemment (ex : <FONT COLOR=“#44A2DD”>).

Exercice n°15 Reprenez la page créée sous le nom “page.html” et mettez une couleur de fond d’écran, de liens hypertextes et de liens visités de votre choix, en essayant de donner une allure agréable à l’ensemble. Visualisez le résultat sur un navigateur.

Notons qu’il est possible de mettre une image en fond d’écran plutôt qu’une couleur unie. L’affichage d’une image en fond d’écran se fait suivant le mode de la mosaïque, l’image se répétant sur toute la surface du navigateur afin d’occuper tout l’espace écran disponible. L’attribut que l’on trouve alors dans la balise BODY n’est plus BGCOLOR, adaptée à une couleur unie, mais BACKGROUND, suivie de l’indication de l’emplacement de l’image à insérer (avec son chemin logique dans l’arborescence), comme pour la balise IMG Cela donne par exemple <BODY BACKGROUND=“maison.gif”>.

Il faut faire attention à mettre en fond d’écran une image adaptée à cette fonctionnalité. Des couleurs trop fortes, des motifs trop lourds visuellement, une image qui n’est pas plaisante en mosaïque sont autant de caractéristiques rédibitoires pour mettre telle ou telle image en fond d’écran. L’exercice suivant vous en donnera un exemple.

Exercice n°16 A la place de la couleur précédente, mettez l’image "ieppt.gif” en fond d’écran de votre page web.
Visualisez le résultat sur un navigateur.

Puis remettez l’ancienne couleur tellement ce nouveau fond d’écran gache la si belle page que vous êtez en train de créer…

Les tableaux

Ce que nous avons vu jusqu’à présent permet de mettre en forme des caractères et des images, et de faire une mise en page soignée d’un document. Il est toutefois une fonction, qu’utilisent les journaux et magazines, mais aussi les traitements de texte et les tableurs, et qui permet d’obtenir des résultats visuellement plus satisfaisants : les tableaux.

Les tableaux se présentent sous la forme de matrice, composée de lignes et de colonnes, comme le dessin suivant, qui dispose de deux lignes et trois colonnes :

	1ère colonne	2ème colonne	3ème colonne
1ère ligne
2ème ligne

Il est possible de mettre du texte, des images, des liens dans chaque cellule. Ceci permet, par exemple, de présenter un texte en colonnes ou de créer une marge, laquelle contient des photographies, le reste de la page contenant du texte.

Un tableau se crée par la balise <TABLE>, puis se remplit cellule par cellule. La règle de remplissage est de commencer par la cellule en haut à gauche (première ligne, première colonne), puis de remplir successivement les autres cellules de la première ligne en passant de colonne en colonne, de la gauche vers la droite. La première ligne terminée, on passe à la seconde ligne, que l’on remplit aussi colonne par colonne, de la gauche vers la droite. Et ainsi de suite, ligne par ligne.

Ainsi, dans l’exemple précédent, si on classe les cellules dans l’ordre dans lequel on les remplit, on a le tableau suivant :

cellule1	cellule2	cellule3
cellule4	cellule5	cellule6

Une nouvelle ligne s’ouvre avec la balise <TR>, une nouvelle colonne avec la balise <TD>.

Il est impératif de fermer toutes les lignes, colonnes et tableaux, en utilisant respectivement les balises </TR>, </TD>, et </TABLE>. Sinon des problèmes d’affichage viendront pénaliser votre présentation, lesquels pouvant aller jusqu’au non affichage intégral du tableau.

Ainsi, en reprenant le tableau précédent, on a la traduction HTML suivante :

Code HTML <TABLE> <TR><TD> cellule1 </TD><TD> celllule2 </TD><TD> cellule3 </TD></TR> <TR><TD> cellule4 </TD><TD> celllule5 </TD><TD> cellule6 </TD></TR> </TABLE>

Traduction en français Création du tableau
Ouverture de la 1ère ligne et de la 1ère colonne
Remplissage de cette cellule
Fermeture 1ère colonne, ouverture 2ème colonne
Remplissage de cette cellule
Fermeture 2ème colonne, ouverture 3ème colonne
Remplissage de cette cellule
Fermeture 3ème colonne et 1ère ligne
Ouverture 2ème ligne, 1ère colonne
Remplissage de cette cellule
Fermeture 1ère colonne, ouverture 2ème colonne
Remplissage de cette cellule
Fermeture 2ème colonne, ouverture 3ème colonne
Remplissage de cette cellule
Fermeture 3ème colonne et 2ème ligne
Fermeture du tableau

Au sein des cellules, toutes les balises que nous avons vu précédemment (telles que <FONT>, <IMG>, <B>, <P>,...) sont appliquables afin de mettre en forme le texte, l'aligner, etc.

Exercice n°17

Traduisez en HTML le tableau suivant :

Pour des facilités de présentation		les tableaux sont malgré tout
	bien pratiques

Visualisez le résultat sur un navigateur.

Il est possible d’ajouter des attributs, facultatifs, dans les balises de tableau, de lignes et de colonnes, qui permettent d’aménager librement la présentation de chaque zone.

Pour la balise <TABLE>, les attributs sont les suivants :

BORDER, qui désigne l’épaisseur des bordures du tableau. Elles sont de zéro par défaut, ce qui est en général le plus plaisant à l’écran. Toutefois, il peut être utile de mettre temporairement des bordures pendant que l’on crée un tableau, afin de ne pas faire d’erreur dans la disposition des lignes et colonnes
WIDTH, longueur du tableau en pixels ou en %. Ainsi, WIDTH=“200” donnera une longueur fixe de 200 pixels au tableau. WIDTH=“50%” fera que le tableau occupera toujours la moitié de la fenêtre du navigateur en longueur, que l’on agrandisse ou rétrécisse cette fenêtre. Couramment, on trouve l’attribut WIDTH=“100%”, qui assure que le tableau occupe en longueur toute la fenêtre du navigateur
HEIGHT, hauteur du tableau en pixels ou en %, qui fonctionne comme la longueur. On constate que cet attribut est moins couramment utilisé sur les pages web
CELLSPACING, qui désigne l’espacement entre les cellules du tableau, en pixels
CELLPADDING, qui représente l’espacement entre les données contenues dans les cellules et la bordure des cellules
ALIGN, qui permet d’aligner le tableau sur la page, à gauche (left), à droite (right) ou centré (center) sur Internet Explorer uniquement
VALIGN, pour l’alignement vertical du tableau sur la page, sur Internet Explorer uniquement
BGCOLOR, qui permet de donner une couleur de fond du tableau, suivant les mêmes modalités que dans la balise <BODY>, désignant le corps du document (utilisable uniquement sur Internet Explorer et Netscape Communicator version 4 et ultérieures)
BORDERCOLOR, pour donner une couleur aux bordures du tableau (utilisable uniquement sur Internet Explorer)
BACKGROUND, pour afficher image de fond du tableau, suivant les mêmes modalités qu'avec le corps des documents et avec également le principe d'affichage en mosaïque (utilisable uniquement sur Internet Explorer)

Il faut noter l'utilité de quelques unes de ces fonctions, couramment utilisées : WIDTH permet de proportionner le tableau à la page que l'on est en train de créer, CELLSPACING et CELLPADDING permettent d'aérer les tableaux et de ne pas voir les contenus des cellules trop proches les uns des autres.

Exercice n°18 Reprenez le tableau précédent en l'alignant à droite de votre écran. Vous lui donnerez une couleur de fond de votre choix.
Il doit disposer d'une bordure de 2 pixels et d'une longueur fixe de 300 pixels.
Les cellules doivent être espacées entre elles de 20 pixels. Visualisez le résultat sur un navigateur.

Les attributs que nous venons d'étudier sont à insérer dans la balise <TABLE> et sont effectifs sur l'ensemble du tableau. D'autres attributs peuvent caractériser uniquement une ligne, voire une cellule. Pour donner des caractéristiques propres à une ligne, il faut entrer des paramètres dans la balise <TR> qui la crée. Ces paramètres peuvent être :

BGCOLOR, qui définit la couleur de fond des cellules de la ligne, et s'exprime en valeur hexadécimale comme nous l'avons vu précédemment. Ainsi, BGCOLOR="#ff0000" qui donne une couleur rouge au fond des cellules de la ligne. (utilisable uniquement sur Internet Explorer et Netscape Communicator 4)
BORDERCOLOR, qui définit la couleur des bordures de la ligne, suivant la même règle décriture (utilisable uniquement sur Internet Explorer)

Pour donner forme ou couleur au seul contenu d'une cellule, il faut insérer des attributs dans la balise <TD>, dernière balise avant le remplissage de la cellule. Les paramètres qui permettent de mettre en forme une cellule sont :

COLSPAN est le nombre de colonnes sur lequel s'étend une cellule. Ce paramètre est utilisé lorsqu'une cellule, sur une ligne, doit avoir la longueur de plusieurs cellules du tableau. Ainsi, dans le tableau ci-dessous la seconde cellule de la première ligne occupe la longueur de la seconde ET de la troisième cellule de la deuxième ligne
ROWSPAN est le nombre de lignes sur lequel s'étend une cellule. Il s'agit d'un attribut symétrique à COLSPAN, mais utilisé lorsqu'une cellule doit avoir la hauteur de plusieurs cellules du tableau. Dans l'exemple ci-dessous, la troisième cellule de la première ligne occupe la hauteur des cellules de la première et de la seconde ligne
NOWRAP empêche le retour automatique à la ligne (word wrap) des mots lorsqu'ils arrivent au bout de la cellule. Ainsi, la taille de la cellule seronditionnée par le contenu qu'elle héberge. Cette fonction est à utiliser avec parcimonie, et il faut éviter que les cellules ne prennent finalement plus de place que l'écran le permet
WIDTH permet de définir la longueur de la cellule, en pixels ou en %
HEIGHT définit la hauteur de la cellule en pixels ou en %
ALIGN permet l'alignement du texte ou des objets contenus dans la cellule, à gauche, au centre ou à droite
VALIGN permet l'alignement vertical du texte ou des objets contenus dans la cellule, en haut, au centre ou en bas
BORDERCOLOR permet de donner une couleur aux bordures de la cellule, suivant la même expression hexadécimale (uniquement sur Internet Explorer)
BGCOLOR donne une couleur de fond à la cellule, exprimée suivant les mêmes modes que précédemment, en utilisant le codage hexadécimal (uniquement sur Internet Explorer et Netscape Communicator 4)
BACKGROUND affiche une image en fond de cellule suivant les mêmes principes que lorsqu'on trouve cet attribut dans la balise <BODY> (uniquement avec Internet Explorer)

Il faut noter l'utilité des fonctions ROWSPAN et COLSPAN qui sont souvent utilisées et permettent souvent d'éviter la tâche fastidieuse d'ouvrir et fermer des <TD> tout au long d'un tableau, alors que les cellules sont vides.

Exercice n°19 Traduisez en HTML le tableau suivant :

Annuaires francophones		Adresse
Yahoo!		http://www.yahoo.fr
Lycos		http://www.lycos.fr
Nomade		http://www.nomade.fr

Ce tableau devra occuper 50% de la largeur de votre écran et être aligné à la gauche de celui-ci.
La première ligne est sur fond bleu, les caractères étant écrits en blanc et en Arial. Le reste du tableau sur fond blanc avec des caractères noirs en Times.
La colonne du milieu a une longueur fixe de 30 pixels.
Les adresses des sites seront des liens hypertextes. Un clic fera apparaître chacun des sites dans une nouvelle fenêtre. Visualisez le résultat sur un navigateur.

Les listes

Les listes sont utilisées dans une pages lors d'une enumeration.
Elles se composent d'un tag d'appel à une liste, <OL> pour les listes numeriques ou chiffrées (A B C, a b c, 1 2 3, I II III, i ii iii) et <UL> pour les listes avec des mouches (disc, circle, square). Ce tag est bien entendue fermant à la fin de la liste suivant son type </OL> ou </UL>.

Ainsi pour ajouter une phrase ou un paragraphe à notre liste il suffit d'utiliser la balise <LI> d'y mettre son text et de la fermer avec la balise </LI>.

voici des exemples :

<OL TYPE=1> <LI>texte 1</LI> <LI>texte 2</LI> </OL>	texte1 texte2
<UL TYPE=circle> <LI>texte 1</LI> <LI>texte 2</LI> </UL>	texte1 texte2

<LI> tout seul provoque l'apparition d'un petit cercle mais le paragraphe s'il y en a ne s'alligne pas sous le premier mot apres la petite mouche.

[ Prolégomènes ] - [ Principes du HTML ] - [ Créer une page en HTML ] [ Premiers éléments de programmation ] - [ La mise en page d'un document HTML ] [ La mise en forme des caractères ] - [ Les liens hypertextes ] - [ Insérer des images ] [ Un peu de couleur dans votre page web ] - [ Les tableaux ] - [ Les listes ] - [ Les cadres ]

Les cadres

Avec les cadres, nous abordons la dernière grande étape dans la découverte du HTML. Il s'agit d'une facilité de mise en page qui existe depuis Netscape Navigator 2 et qui est très largement utilisée. Les cadres (ou frames en anglais) permettent de disposer, sur une même page web, de plusieurs fenêtres. On peut créer plusieurs cadres sur une même page, lesquels la "découpent" horizontalement ou verticalement. Il peut y avoir également des cadres principaux (délimitant des fenêtres sur toute la taille de la page) ou des cadres annexes (délimitant des fenêtres au sein d'autres cadres). Les cadres sont des fenêtres a priori indépendantes, qui apparaîssent comme deux pages web qui s'afficheraient sur un même écran de navigateur.

Le principe des cadres est justement celui-ci : une page web structure l'écran en différents cadres, chacun faisant appel à une autre page web qui s'affiche dans le cadre en question.

Le plus simple est de regarder comment est faite la page que vous consultez actuellement : le corps de la page HTML est découpé en deux bandes horizontales. Dans la zone supérieure apparaît le contenu du cours et dans la zone inférieure on peut voir une barre de menu permettant de naviguer à l'intérieur du site.

Il faut bien distinguer les cadres des tableaux. Les tableaux sont des matrices à plusieurs lignes et colonnes qui peuvent s'intégrer dans une page web donnée, laquelle peut comprendre par ailleurs du texte et des images. Les cadres sont des entités structurant un écran, le découpant en zones indépendantes. Derrière chaque zone se trouve une page web, appelée par le cadre en question.

Pour créer une page web contenant des cadres, il faut tout d'abord définir la façon dont l'écran sera découpé. Supposons que le rectangle ci dessous soit un écran :

.
.	.
	.
.

La structure en cadres de cet écran est la suivante :

trois cadres horizontaux délimités par les deux traits horizontaux continus qui prennent toute la longueur de l'écran,
dans le cadre horizontal du milieu, on trouve deux cadres verticaux délimités par les traits de haut en bas,
dans le cadre de droite de cette dernière séparation, on trouve deux cadres horizontaux délimités par les traits de gauche à droite.

Ainsi, la création de ce multifenêtrage se fait selon trois niveaux :

Création de trois cadres horizontaux découpant l'écran dans sa longueur :

Découpage du cadre du milieu en deux colonnes :

.
.	.
.

Découpage de la colonne de droite du cadre du milieu en deux lignes :

.
.	.
	.
.

Cet écran se structure par une page web qui ne fait que créer les cadres, donne leur taille et indique vers quelle page web chacun pointe. Le principe étant bien que chaque cadre affiche une page en HTML constituant un fichier indépendant des autres cadres. On a ainsi par exemple les cadres pointant vers les pages suivantes :

titre.html
sommaire.html	article.html
	notes.html
liens.html

Cette page, composée de cadres est une page en HTML, qu'on peut par exemple appeler global.html. Sa structure est particulière. Elle n'a pas de corps (balise <BODY>) à proprement parler puisque son corps est constitué uniquement de cadres. Ainsi, après les balises <HTML>, précisant qu'il s'agit d'une page en HTML, <HEAD> et <TITLE>, permettant de donner un titre à la page, on trouve de nouvelles balises.

Tout d'abord, pour indiquer que nous allons mettre en place des cadres, il faut mettre la balise <FRAMESET>, laquelle doit contenir comme paramètre la définition des lignes (ROWS) ou des colonnes (COLS) que l'on crée. Il ne s'agit là que les lignes et colonnes principales, les cadres annexes étant créés par la suite au sein même de ces fenêtres.

Ainsi, dans l'exemple précédent, il faut indiquer la mise en place de trois lignes principales. Le paramétrage se fait en indiquant la taille de chacune des ligne ainsi créée. Cette taille peut-être absolue (en pixels) ou relative (en pourcentage de la taille de l'écran). Ainsi, si l'on suppose que :

le cadre supérieur (1ère ligne, renvoyant vers la page "titre.html") a une taille fixe de 100 pixels,
le cadre inférieur (3ème ligne, renvoyant vers la page "liens.html") a une taille de 15% de la taille totale de l'écran,
le cadre du milieu voit sa taille s'adapter en fonction de celle des autres,

On aura la balise déclarant la création des cadres :

Le navigateur comprendra que l'on a ainsi créé trois lignes, puisqu'il y a trois indications de taille dans le paramétrage de l'attribut ROWS. Il ne faut pas oublier de le refermer avec la balise </FRAMESET>.

L'indication du contenu d'un cadre se fait par des balises <FRAME>, qui suivent immédiatement la balise de déclaration de création des cadres. Il faut bien veiller qu'il y ait autant de balises <FRAME> que de cadres déclarés.
Cette balise doit indiquer vers quelle page HTML pointe le cadre en question, avec l'attribut SRC (que l'on trouve déjà dans la balise <IMG>). Ainsi, pour le cadre horizontal supérieur, on aurait :

Des attributs supplémentaires peuvent s'ajouter dans cette balise :

NAME : cet attribut permet de donner un nom à un cadre dans une page, ce qui permet de l'identifier clairement (ex : NAME="cadre_bas"). Ce nom peut-être choisi librement, sans avoir forcément de relation avec le nom de la page HTML vers laquelle le cadre pointe. Nommer un cadre est nécessaire si par la suite on souhaite utiliser tel ou tel cadre comme cible d'un lien hypertexte. Il sera alors en effet possible de cliquer sur un lien dans un cadre et de voir la nouvelle page s'afficher dans un autre cadre de l'écran, qui aura été visé dans le lien (voir plus bas)
SCROLLING permet d'afficher ou non un ascenceur pour se déplacer horizontalement et/ou verticalement dans le cadre. Sa forme peut-être SCROLLING="YES", auquel cas il y aura si nécessaire un ascenceur sur le coté droit ou bas du cadre ou SCROLLING="NO", auquel cas l'utilisateur ne pourra pas se déplacer dans le cadre. Par défaut, il est permis à l'utilisateur de se déplacer au sein d'un cadre.
NORESIZE est un attribut qui empêche l'utilisateur de modifier la taille d'un cadre. La taille du cadre qui aura été définie dans la balise <FRAMESET> sera donc immuable. Cet attribut n'est suivi d'aucune valeur logique ou numérique. Par défaut, il est permis à l'utilisateur de modifier la taille des cadres d'un écran en cliquant sur la bordure d'un cadre et en déplaçant la souris maintenue appuyée
MARGINWIDTH, exprimée en pixels, permet de régler l'espace séparant le contenu d'un cadre du cadre lui-même. Cette "largeur de marge" joue sur les espaces entre le contenu et les bordures verticales du cadre
MARGINHEIGHT est l'équivalent de l'attribut précédent pour les bordures horizontales du cadre
FRAMEBORDER permet d'afficher ou non les bordures des cadres. Sa forme peut-être FRAMEBORDER="YES" ou FRAMEBORDER="NO"
FRAMESPACING, exprimé en pixel, correspond à l'espace que l'on souhaite mettre entre les cadres
Pour cibler un cadre lorsque l'on établit un lien hypertexte, il suffit, comme nous l'avons vu avec la balise <A> d'ajouter en attribut TARGET avec indiqué le nom du cadre qui doit recevoir le lien (ex : <A HREF="http://www.metafort.com" TARGET="cadre_bas">).

Dans l'exemple d'écran que nous avons proposé plus haut, nous trouvions des cadres "principaux" et des cadres "annexes". Ces derniers doivent être définis au sein du cadre central qui les comporte. Ainsi, pour l'écran précédent qui était :

On aurait par exemple, de façon simplifiée et sans attributs :

Code HTML

Traduction en français

Création de trois cadres horizontaux
1er cadre horizontal ppal : page à afficher
2ème cadre : création de 2 cadres verticaux
1er cadre vertical : page à afficher
2ème cadre vertical : création de 2 horizontaux
1er ss-cadre horizontal : page à afficher
2ème ss-cadre horizontal : page à afficher
fermeture du 2ème bloque
fermeture du 1er bloque
3ème cadre horizontal ppal : page à afficher
fermeture finale

Exercice n°20

Créez vous même une page comportant deux cadres horizontaux dont le supérieur a une hauteur de 120 pixels et dont l'inférieur est composé de deux cadres verticaux (celui de gauche ayant une largeur de 120 pixels).
Créez vous-même le contenu des pages en question, avec la seule contrainte suivante : un lien hypertexte situé dans le cadre horizontal supérieur doit faire effet sur le cadre vertical inférieur droit.