Premier pas en HTML

Pour commencer

Vous allez écrire des documents en XHTML, qui est une normalisation au format XML de HTML. Vous pouvez consulter la documentation de HTML qui se trouve ici.

Voici un exemple de code HTML


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html>
	  <head>
	    <title>Premier exemple</title>
	  </head>
	  <body>
	    <h1>Ceci est un premier exemple avec un premier titre</h1>
	    <p>Et ceci est un paragraphe. Cet exemple va nous servir
	    pour illustrer nos remarques sur le langage HTML.</p>
	    <p>Vous verrez, les bases de ce langage sont très simples,
	    et il en faut peu pour se débrouiller...</p>
	  </body>
	</html>

HTML (HyperText Mark-Up language) est un langage de balises : le texte du document est entouré de balises qui donnent des informations sur la structure du document. On appelle les balises des éléments.

Voici les quelques règles syntaxiques simples que vous devez respecter quand vous écrivez un document en HTML (attention, ces règles ne sont pas toutes nécessaires pour écrire en HTML, mais pour écrire en XHTML) :

un élément est ouvert par <nom_élément> et fermé par </nom_élément>
tout élément ouvert doit être fermé
les éléments vides (qui ne contiennent rien entre la balise de début et la balise de fin) s'écrivent <nom_élément />
on appelle attribut une propriété qui est accolée à un élément. La valeur d'un attribut est toujours donné sous la forme d'une chaîne de caractères. Ici, avec l'attribut class:
```
         <p class="paraBleu">Ceci est un paragraphe auquel j'ajouterai plus
      tard des informations pour la mise en forme.</p>
      
```
les éléments sont en caractères minuscules

La première instruction d'un document HTML sert à indiquer de quel sorte de document il s'agit. Ensuite, un document HTML est toujours constitué ainsi :

un élément <html> à la racine du document
à l'intérieur :
- un élément <head> qui contient des informations sur le document (le titre de la page tel qu'il doit apparaître dans l'onglet du navigateur, les mots-clés pour les moteurs de recherche, vos fonctions php, ...)
- un élément <body> qui va contenir le texte du document qui sera affiché par le navigateur
à l'intérieur du <body>, vous trouverez des éléments comme :
- <p> pour délimiter des pragraphes;
- <h1>, <h2>, ... <h6> pour indiquer des titres de niveau 1, ou 2, ou ... 6

Vous conserverez chacune des pages HTML que vous écrirez dans les exercices suivants dans un fichier différent, même s'il s'agit d'une même page que vous complétez à chaque exercice. Cela nous sera utile pour les derniers exercices.

Créez un document html avec un titre (de page), des titres de niveau 1, puis 2, puis 3, ... et des paragraphes en-dessous.

Vous pouvez faire ressortir (mettre de l'emphase) certains mots ou suites de mots à l'intérieur de vos paragraphes par l'élément <em>.

Vous pouvez séparer vos différentes sections par un trait horizontal, élément vide <hr />.

On crée des listes à puces par l'élément <ul> pour unordered list et des listes numérotées par <ol> pour ordered list. Chaque élément de la liste doit être à l'intérieur d'un élément <li>.

Créez un document avec des listes à puces et des listes numérotées imbriquées.

On crée un tableau à l'intérieur d'un élément <table>. Le contenu est donné ensuite ligne par ligne, chaque ligne étant dans un élément <tr> pour table row. On trouve ensuite dans une ligne soit un entête (intitulé de colonne ou de ligne), i.e. un table head dans un élément <th>, soit des données, i.e. des table data dans un élément <td>.

Créez un document présentant un tableau. Par exemple, le tableau des ventes des commerciaux Dupont, Dubois et Dumoulin au cours des quatre trimestres de l'année. Surtout, n'oubliez pas de faire la différence cellule de donnée et cellule d'entête.

Mettre un peu de couleur...

Pour le moment, nos pages sont un peu tristes : pas beaucoup de couleur, et vous n'avez jamais touché à la mise en forme. C'est normal! Oui, on peut directement faire tout cela dans une page HTML. Mais, outre les problèmes conceptuels, c'est une mauvaise habitude en cela que vous perdez toute réutilisabilité et possibilité d'une mise en forme identique sur l'ensemble de votre document. Nous allons donc apprendre à effectuer une mise en forme correctement : avec une feuille de style stockée dans un autre fichier.

Une feuille de style, cascading style sheet, est un document qui contient des règles de mise en forme suivant la syntaxe suivante :

nom_élément {
	propriété1 : valeur_propriété;
	propriété2 : valeur_propriété;
	...
	}

Pour donner des indications sur la font des caractères du document, choisir une couleur de fond, et indiquer que les titres de niveau 1 sont en rouge et centrés :


body {
      font-family : sans-serif;
      background-color : #eef;
      }
      
h1 {
      color : red;
      text-align : center;
      }

On peut facilement associer une mise en forme à tous les éléments qui possèdent un attribut class en indiquant la valeur de l'attribut précédée d'un point . :


.paraBleu {
      background-color : blue;
      }

On associe une feuille de style (ici, stockée dans le fichier maCss.css à un document HTML en ajoutant dans la élément head une élément link :


	<link  type="text/css" rel="stylesheet" href="maCss.css" />

Voici le premier exemple auquel on a associé cette feuille de style.

Dans les documents que vous avez écrit, ajoutez une couleur de fond à la page, changer la couleur du texte du titre, du paragraphe, ... Les couleurs peuvent être soit indiquées par leur nom, pour quelques couleurs prédéfinies (

red, blue,
	green, yellow, dark, grey, purple, pink, ...

), soit par leur valeur en hexadécimal en RGB (red-green-blue) comme l'exemple ci-dessus.

Lien incontournable : la spécification de CSS.

Il semble naturel de vouloir donner des informations de mise en forme relatives à une section complète, i.e. un titre et les paragraphes qui le composent, ou bien à une suite de paragraphes, ... Par exemple, pour les espacer en haut et en bas du reste du texte, ou bien pour dessiner une bordure autour des ces éléments, etc etc.

La balise <div> permet d'entourer plusieurs éléments qu'on qualifiera d'éléments blocs. Cela permet de leur associer dans la css une mpise en forme particulière. Pour différencier des divisions qui ont des rôles différents dans la structure du document, on ajoute un attribut class="unNomDeClasse". Maintenant, vous pouvez associer une mise en forme spécifique dans votre css en créant une règle pour div.unNomDeClasse, ou plus simplement pour .unNomDeClasse, ce qui appliquera la règle pour tous les éléments (div ou pas) qui seront qualifiés par class="unNomDeClasse". Un exemple? Regardez le code source de cette page.

Ce qu'on peut faire pour des éléments blocs, i.e. pour des éléments, comme des paragraphes, qui se positionnenty les uns en-dessous des autres, on peut le faire pour des éléments en ligne, comme des mots dans un paragraphe. On utilise alors la balise <span>.

L'attribut class peut être accolé à n'importe quel élément.

Pour mettre des espacements et des bordures :

on peut poser une bordure autour d'un élément bloc par les propriétés border-style, border-color, border-width
on peut espacer le contenu d'une <div>g; de la bordure qui l'entoure par la propriété padding
on peut espacer une <div>g; d'une autre <div>g; (espacement sur le tour externe de la bordure) par la propriété margin

A vous de jouer sur vos documents précédents.

Des liens hypertextes, quand même!

On créé des liens par la balise <a> qui s'utilise ainsi :

<a href="adresseCible">texte clickable</a>

On peut aussi créer des ancres à l'intérieur d'un document pour permetter de se balader à l'intérieur d'une même page :

<a name="leNomDeCetteZone">texte référencé</a>

Les liens vers ces parties s'écriront alors :

<a href="#leNomDeCetteZone">texte clickable</a>

Faites une ronde des pages précédemment écrites avec des liens 'suivant' et 'précédent' en haut de vos documents.

Ecrivez une page index.html qui contient dans une liste à puces trois liens : un lien vers le premier de vos documents déjà écrits, un lien vers le premier document de votre voisin de gauche dans la salle TP, un lien vers le premier document de votre voisin de droite.

Sur votre document le plus long, créez une table des matières qui permet d'accéder directement à des sous-parties de ce document (en utilisant des ancres locales).

Premiers pas en HTML

Pour commencer

Mettre un peu de couleur...

Des liens hypertextes, quand même!