TP
Initiation au langage HTML

(1) Rappels de quelques généralités

  • Un fichier HTML n'est pas compilé (ce n'est pas un programme)
  • Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention d'écriture
  • Un fichier HTML peut être écrit à l'aide de n'importequel éditeur de texte simple (des éditeurs plus évolués existent également)
  • Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont envoyés à votre navigateur et le code html est interprêté sur VOTRE machine par VOTRE navigateur
  • Il n'est pas indispensable de posséder un serveur HTTP pour écrire des pages. Vous pouvez utiliser la fonction « Ouvrir » de votre navigateur pour consulter une page HTML enregistrée sur votre ordinateur (ou une page que vous avez vous-même créée)

(2) Premières notions et première page

Ouvrez un éditeur de texte quelconque et créez un nouveau fichier baptisé index.htm. Le texte que vous écrirez dans ce fichier est le code html qui sera intepreté par un navigateur pour visualiser le résultat. Ce code est constitué de texte et d'indications de mise en page. Ces indications sont appelées balises.

Les balises

Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise>

Une balise peut être seule, et son effet s'applique à l'endroit où elle se trouve, comme par exemple <BR> qui sert à sauter une ligne,

ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle s'applique : son effet touche tout ce qui se trouve entre la balise ouvrante et la balise fermante.

Un fichier minimum

Pour débuter, recopier les lignes suivantes dans votre fichier index.htm :

<html>

<head>
<title>Ma premiere page web !!</title>
</head>

<body>

</body>

</html>


A présent, pour visualiser le résultat, allez dans votre navigateur web, et choisissez dans le menu : fichier->ouvrir et sélectionnez votre fichier index.htm. Observez et commentez le résultat. Ajoutez du texte maintenant dans la section body et rechargez votre page dans le navigateur. Commentez.

Quelques premières balises simples

Dans la section body de votre fichier .htm, essayez et testez les effets des balises suivantes :

Listes

Il existe deux facons de créer une liste d'items en html : les listes ordonnées ("numérotées") et les listes non ordonnées. La structure d'une liste ordonnée est la suivante :

<OL>
<LI>item1
<LI>item2
<LI>item3
</OL>

et non ordonnées :

<UL>
<LI>item1
<LI>item2
<LI>item3
</UL>

Testez les dans votre fichier .htm.

Images

Nous allons maintenant voir comment insérer une image dans une page web. Commencez par chercher sur le web une image, que vous sauvegarderez sur votre compte. La balise pour insérer une image est IMG. Elle s'utilise selon le modèle suivant (à adapter a votre nom de fichier image) :

<IMG SRC="monimage.jpg">

La balise image admet entre autre les propriétés suivantes :

Essayez chacun d'entre eux pour en comprendre les effets sur votre image. La valeur de la propriété SRC est le chemin relatif vers le fichier image.

Liens

Liens externes

<A HREF="url" TARGET="">Ceci est un lien !</A>

La propriété TARGET (optionnelle) indique dans quelle page s'ouvre le document. Par défaut le document s'ouvre dans la page courante. Pour faire en sorte qu'il s'ouvre dans une nouvelle page on donnera a TARGET la valeur _blank (entre symboles "").

Liens internes

Dans un document de très grande taille, on peut souhaiter placer quelques positions de références vers lesquels ensuite créer des liens. Ces liens guident vers un autre endroit du même document et sont qualifiés de liens internes.

Pour placer une position de référence dans le texte, et lui donner un nom (le couple de balises peut ou pas entourer du texte, c'est un marqueur invisible) :

<A NAME="nom"></A>

Pour se rendre à une position de référence dans le texte, on réutilise son nom :

<A HREF="url" TARGET="nom">Lien vers une position du document courant</A>

Exercice : Créez une page web contenant un très long texte (quelconque, mais plusieurs page-écrans de longueur), avec tout en bas de votre document une image "cliquable" : qui sera un lien interne vers le début du document, pour remonter plus vite. Ailleurs dans le texte vous créerez un lien externe qui ouvre une nouvelle page et un lien externe qui remplace la page courante.

Mettre de la couleur

Pour ajouter de la couleur sur une portion de votre texte on utilise la balise suivante :

<FONT COLOR="#FF0000"></FONT>

#FF0000 désigne une couleur en composantes rouge (FF), verte (00) et bleue (00), soit ici donc un rouge pur.

Tables

Les listes permettent un premier ordre de présentation des données. Si l'on souhaite mieux structurer encore cette présentation et avoir plus de liberté, les tableaux permettent de disposer des éléments (images, textes, etc...) selon deux dimensions : lignes et colonnes. Ils servent autant à afficher un classique tableau de nombres qu'a placer des éléments sur une page.

Les tableaux (balise TABLE) sont définis comme étant des suites de lignes (balise TR, "table row"). Dans chaque ligne on définit une ou plusieurs cellules (balise TD, "table data").

Pour de plus amples informations sur les tableaux, consultez ce lien (deux pages successives). Essayez de reproduire le tableau suivant :

(3) Page à réaliser

A présent, essayez de reproduire la page html suivante, dont on vous donne une capture d'écran :

Téléchargez ici les deux images à insérer : article et google

(4) Frames

La technique des frames (en français "cadres") permet d'afficher plusieurs pages HTML dans différentes zones (ou cadres). La fenêtre du navigateur est ainsi découpée en cadres indépendants les uns des autres et possédant chacun un nom.

Pour créer un site contenant des cadres, il vous faut créer en premier un fichier contenant l'agencement des cadres : ce fichier HTML utilise la balise FRAMESET à la place de la balise BODY. C'est cette balise qui définit les cadres par leur dimension en pixels ou en pourcentage (%).

Tester les trois exemples suivants :

<FRAMESET COLS="20%, 80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET>

<FRAMESET ROWS="20%, 80%">
<FRAME SRC="frame1.htm" NAME="haut">
<FRAME SRC="frame2.htm" NAME="bas">
</FRAMESET>

<FRAMESET COLS="20%,80%">

<FRAME SRC="frame1.htm" NAME="gauche">

<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm" NAME="droit_haut">
<FRAME SRC="frame3.htm" NAME="droit_bas">
</FRAMESET>

</FRAMESET>

Pour désigner un cadre, et permettre ainsi de changer son contenu en changeant de fichier html affiché, il faut ajouter à nos liens hypertextes la propriété TARGET= et choisir le nom du cadre visé. Par exemple: <A HREF="page.htm" TARGET="gauche">

Exercices

Essayez de créer une page contenant deux cadres, dont l'un sert de menu pour choisir ce qu'affiche l'autre. Le menu contiendra trois liens (exemple ci-dessous) et proposera donc trois pages différentes (contenu libre). Cf l'image de référénce ci-dessous :

Essayez de reproduire la meme mise en page avec la balise table pour positionner le menu et le contenu de droite. Quel changement structurel cela provoque-t-il dans le contenu des fichiers de ce site ?

(5) Feuilles de Styles

Présentation

Nous allons esquisser dans cette partie le fonctionnement des feuilles de styles. Les feuilles de style vont nous permettre de préparer des styles, des apparences complexes pour les diverses balises du langage html et les appliquer ensuite très simplement dans nos documents.

Ouvrez un éditeur de texte et créer un fichier nommé style.css. L'extension css désigne un fichier contenant des styles (CSS = Cascade Style Sheets).

La feuille de style contient la description du style ou format d'affichage des balises composant un document HTML. On attribue ainsi une valeur aux différentes propriétés d'une balise. Voici la forme générale :

balise { property1: value1; property2: value2 }

Note: On peut spécifier librement une, deux, voire beaucoup plus de propriétés à la fois. Pour débuter, recopiez dans votre fichier style.css le code suivant :

i {color:#FFFFFF}

Nous allons maintenant utiliser cette feuille de style dans une page html. Ajoutez au code html dans la partie d'en-tête (entre les balises head) l'inclusion de la feuille de style :

<LINK rel=STYLESHEET href="style.css" type="text/css">

Placer dans votre document une balise <i></i> et observez le résultat. Pour conserver les balises originelles et simplement ajouter des variantes de styles à ces balises, nous allons maintenant définir des classes. Retournez dans votre fichier style.css et changer son contenu par :

i.rouge {color:#FFFFFF}

Testez dans votre page web la balise I toute seule et la séquence suivante :

<I class=rouge></I>

Essayez à présent la classe suivante :

table.exemple{ width:90%; background-color: #bad2ed; border:solid 1px #6480B8; }

Vous trouverez sur cette page une liste des propriétés spécifiables dans les feuilles de styles. Essayez de définir de nouveaux styles et de les appliquer à votre page web.

Exercice simple

En utilisant une feuille de style (et si besoin en s'inspirant du code source de cette page), créez un document semblable à :

(6)Exercice final : Site à réaliser

En réutilisant au maximum les notions qui vous ont été présentées, concevez et réalisez un mini-site web sur le thème de votre choix, avec frames ou tables, liens et images. Vous pouvez explorer et utiliser l'ensemble des balises html et leurs propriétés.

La structure du site respectera les contraintes suivantes : Créez un répertoire monsiteweb qui contiendra tous les fichiers nécessaire à votre site. Vous placerez dans ce répertoire les fichiers .htm. Créez un sous-répertoire img dans le repértoire monsiteweb, qui regroupera toutes les images utilisées par le site.

Dernière remarque générale: Vous pouvez vous inspirer d'un site web en observant comment il est construit. Cherchez dans votre navigateur l'affichage du code source de la page (le code html, non interprété).