OBLog

Bienvenue dans OBLog,  Visiteur

Lire les blogs auxquels vous êtes abonné(e) :

Excel    titres    4 messages
HTML pour débutants    titres    14 messages
Linux    titres    2 messages
Mode d'emploi de OBLog    titres    4 messages
Programmation en ASP    titres    15 messages

  • Si vous êtes membre de la communauté EPFL, vous pouvez contribuer à ces blogs en vous authentifiant
  • Les membres de l'IBETON peuvent créer leurs propres blogs et y inviter des membres de l'EPFL.

Contenu du blog HTML pour débutants
1. HTML, c'est quoi ?  (OB 31.08.05, 08:53) 
 O
   HTML (abbréviation anglaise de HyperText Markup Language, langage de balisage hypertexte) est un langage de mise en page simple permettant de décrire les éléments principaux d'un texte : titres, paragraphes, caractères, polices et mises en évidences, listes numérotées ou non.

Très simple dans sa conception initiale (environ 1993), ce langage a par la suite progressivement évolué pour devenir un langage assez complet, en incluant d'abord des images puis des tableaux (avec des fonctions comme l'imbrication de tableaux que Word ne savait même pas faire à l'époque!). Les dernières itérations incluent des éléments de positionnement précis des éléments et des feuilles de style.
2. Editeurs HTML  (OB 06.09.05, 14:03) 
 O
   Bien évidemment, plusieurs éditeurs de logiciel ont rapidement pris pied dans le marché des éditeurs HTML. Microsoft avec FrontPage, Adobe avec GoLive, Macromedia avec DreamWeaver, sans oublier le tout premier, l'éditeur intégré dans Netscape Gold. Le but de cette introduction à HTML n'est pas de vous amener directement à ces éditeurs, mais plutôt de vous permettre de comprendre les principes de l'HTML avant de vous décider (éventuellement) de faire recours à un éditeur HTML. Par exemple, il peut être très intéressant de générer du code HTML à partir de vos propres programmes (ou d'une feuille Excel), plutôt que de les exporter dans un éditeur HTML.
3. Les premiers navigateurs  (OB 05.09.05, 08:27) 
 O
   Le tout premier navigateur s'appelait Mosaic, et a été développé par l'Université de l'Illinois à Urbana, Champaign de 1993 à 1997. On en trouve encore trace en demandant à Internet Explorer de nous dire qui il est.
4. Structure d'un document HTML  (OB 31.08.05, 08:59) 
 O
   Un document HTML a une structure extrêmement simple: c'est un simple fichier texte, dans lequel on peut écrire du texte de manière absolument libre. Simplement, tant qu'on n'utilise pas les balises HTML, on obtiendra quelque chose d'assez plat, comme ce texte, qui heureusement a un peu de gras sur le mot balise ci-dessus. Cela semble minimaliste, mais c'était déjà à l'origine une grande avancée: le protocole Internet http qui sert de transport aux fichiers HTML décodés par les navigateurs web permettait à des systèmes distants et disparates (comme, par exemple, des stations de travail Unix, des PC Windows et des MacIntosh d'échanger simplement des informations.

Pour qu'un document soit un "vrai" document HTML, il doit inclure les éléments suivants :
1. Une balise de début de texte:   <html>
2. Du texte avec éventuellement des balises HTML  ...
3. Une balise de fin de texte:  </html>
Remarquez que les balises HTML sont caractérisées par la paire de caractères < et > et par le fait qu'elles se trouvent (généralement) en couple : <html> ... </html>. Voici donc un fichier HTML presque minimum : 
<html>
Bonjour à tous !
</html>
Si vous copiez le texte en vert ci-dessus dans un fichier texte (éditez-le avec Notepad sous Windows) que vous renommez ensuite test.html, et que vous double-cliquez sur ce fichier, vous devriez normalement voir apparaître une page vide avec juste le texte Bonjour à tous.

Ou alors, vous pouvez choisir d'ouvrir directement dans votre navigateur le fichier Exemple01. En fait, la structure d'un document HTML est souvent plus complexe, pour répondre à divers besoins :
  1. La page que vous venez de créer n'a pas de nom. Si vous la placez dans vos favoris Internet, le nom proposé ne sera pas très descriptif.
  2. Vous aimeriez peut-être définir la couleur d'arrière-plan pour votre page
  3. Tout un tas d'autes raisons, qu'il n'est pas utile d'exposer maintenant, comme la définition de paramètres ou la référence à une feuille de style externe
5. Un fichier plus complet avec un titre  (OB 31.08.05, 15:06) 
 O
   Voici donc une nouvelle version de notre fichier, un peu moins minimale que la précédente: 
<html>
<head>
<title>Mes salutations - titre de votre navigateur</title>
</head>
<body>
<h1>Salutations - titre dans la page</h1>
Bonjour à tous !
</body>
</html>
Ce petit exemple (avez-vous vu son résultat en copiant ce qui est en vert dans Notepad, puis en le sauvant sous le nom d'un fichier avec l'exension .html ? ou alors Exemple02.) introduit plusieurs syntaxes que nous n'avons pas encore vues:
<head>...</head>    Section d'entête : déclaration de paramètres globaux, dans notre cas seulement la variable title.
<title>...</title>    Définition du titre qu'aura la bande supérieure (souvent de couleur bleue) de votre navigateur
<h1>...</h1>    Définition d'un titre (en anglais header) de niveau 1.
Notez que jusqu'ici c'est votre navigateur qui choisit la police et le taille du titre en question. Dans la plupart des cas, il est clair que c'est un titre.
Evidemment, on pourra utiliser aussi <h2>, <h3> etc.
6. Italique, gras, souligné  (OB 06.09.05, 14:39) 
 O
   Vous avez déjà remarqué depuis le début de cette introduction la présence de mots ou de caractères en gras, italique, souligné, voire une combinaison de tous les trois. Il est facile de spécifier cetet mise en forma en HTML. voici les balises à utiliser :
<b>...</b> gras
<i>...</i> italique
<u>...</u> souligné
7. De la couleur !  (OB 06.09.05, 14:44) 
 O
   Les balises pour les couleurs des caractères sont basées sur la balise <font> qui est utilisée pour gérer les détails des polices. La syntaxe à utiliser est <font color="#rrvvbb">...</font>. Les valeurs rrggbb correspondent aux composantes de rouge, vert et bleu définies entre 0 et 255 en base 16, soit entre 00 et FF.

Pour vous aider, voici les couleurs les plus fréquemment utilisées :
#000000
 
 #ff0000
 
 #00ff00
 
 #0000ff
 
#cccccc
 
 #cc0000
 
 #00cc00
 
 #0000cc
 
8. Paragraphes en HTML  (OB 05.09.05, 08:37) 
 O
   Depuis l'arrivée voici presque vingt ans des logiciels de traitement de texte évolués, chacun (ou presque) a pris l'habitude de raisonner en terme de paragraphes et non plus de lignes. C'est le logiciel qui "décide" sur combien de lignes le texte sera affiché. L'utilisation de la touche [Enter] est moins fréquente : on ne l'utilise que pour marquer la fin d'un paragraphe.

Dans l'exemple ci-dessus, il est facile de reconnaître que les balises <h1>>...</h1>> indiquent le début et la fin des paragraphes des titres et sous-titres En HTML, un paragraphe normal sera déclaré de manière similaire (bien qu'il ne soit pas obligatoire de déclarer les paragraphes) : un paragraphe est un bloc de texte entre les balises <p> et </p>.

Voici donc une version plus élaborée de notre exemple, avec deux paragraphes de texte (Exemple03): 
<html>
<head>
<title>Mes salutations - titre de votre navigateur</title>
</head>
<body>
<h1>Salutations - titre dans la page</h1>
<p>Bonjour à tous !</p>
<p>Et voici mon deuxième paragraphe</p>
</body>
</html>
9. Comment peut-on passer à la ligne en HTML ?  (OB 05.09.05, 08:22) 
 O
   Comme il a été dit plus haut, c'est en principe votre navigateur HTML qui décide, en fonction de la taille de sa fenêtre, où que quand les passages à la ligne se produisent. Comme dans un traitment de texte, Il y a automatiquement un passage à la ligne en fin de pragraphe, donc la première solution est de soigneusement structurer son texte en utilisant les balises <p>...</p>.
Il est cependant possible de forcer un saut de ligne, par exemple pour mettre un point en évidence. Nous verrons par la suite qu'il existe des fonctions HTML spécifiques qui permettent de créer des listes proprement alignées etc. Les sauts de ligne dont il s'agit ici ne sont donc que des sauts exceptionnels.

Pour passer à la ligne suivante, il suffit d'insérer le code <br> exactement là où vous voulez votre saut de page.

Voici encore notre exemple précédent, mais avec seulement un mot par ligne pour le premier paragraphe (Exemple04): 
<html>
<head>
<title>Mes salutations - titre de votre navigateur</title>
</head>
<body>
<h1>Salutations - titre dans la page</h1>
<p>Bonjour<br>à<br>tous !</p>
</body>
</html>
10. Et les liens, alors ?  (OB 05.09.05, 11:34) 
 O
   Depuis le temps que nous faisons des exemples de fichiers HTML, nous n'avons pas encore vu un seul de ces liens bleus qui sont si caractéristiques de l'HTML, et qui sont son plus grand avantage: il est possible par un lien de sauter d'un fichier à un autre, sans se préoccupper de savoir où se situe la page suivante (c'est la responsabilité de l'auteur de la page).

Pour créer un lien on utilise les balises <a...>...</a>. Noter les trois points ... à l'intérieur de la première balise: nous allons pour la première fois utiliser des balises avec paramètres. Comme nous le verrons plus tard, l'HTML permet d'ajouter des paramètres à bon nombre de ses éléments, ce qui en augmente la flexibilité. Pour la balise de lien <a>, le paramètre principal est l'adresse de la page à atteindre.
Si par exemple vous désirez créer un lien vers la page d'accueil de Apple, il suffit d'écrire la balise suivante dans votre fichier :
<a href="http://www.apple.com">Lien vers Apple.com</a>. Vous verrez alors apparaître un lien du style Lien vers Apple.com que vous pouvez cliquer pour aller chez Apple. N'oubliez pas de faire "back" pour revenir !.

Voici un fichier qui donne des liens vers tous les exemples traités jusqu'ici dans le cadre de cette introduction (Exemple05): 
<html>
<head>
<title>Les exemples HTML</title>
</head>
<body>
<h1>Voici la liste des exemples vus jusqu'ici</h1>
<p><a href="/util/html/Exemple01.html">Exemple 1</a> - premier fichier</p>
<p><a href="/util/html/Exemple02.html">Exemple 2</a> - avec un titre</p>
<p><a href="/util/html/Exemple03.html">Exemple 3</a> - avec deux paragraphes</p>
<p><a href="/util/html/Exemple04.html">Exemple 4</a> - avec des sauts de ligne</p>
<p><a href="/util/html/Exemple05.html">Exemple 5</a> - avec des liens</p>
</body>
</html>
Notez que dans ce cas la forme des liens est simplifiée par rapport à celle du site Apple. Lorsque le fichier auquel je fais référence se trouve sur le même serveur que le fichier que j'écris, il m'est permis de ne pas mettre son nom (ce qui explique pourquoi on ne trouve par "http://is-beton.epfl.ch/" dans les adresses de la zone verte. Dans ce cas, j'ai simplement indiqué où les fichiers des exemples se trouvent dans le répertoire web du serveur : ils sont stockés dans le sous-répertoire /util/html parce que j'ai décidé de les ranger là bas. Si j'avais décidé de les mettre dans le même répertoire que OBLog, l'adresse aurait été encore plus simple, du style <a href="x01.html">Exemple 1</a>. Mais cela aurait été une mauvaise idée de mettre ces fichier ici, c'est pourquoi ils sont ailleurs!
11. Comment est faite une page HTML ?  (OB 05.09.05, 12:03) 
 O
   Après une courte introduction à HTML, il est légitime de se demander comment sont faites les pages des autres, qui sont peut-être plus belles, plus colorées, plus animées, etc. Bien qu'il soit clair que vous ne savez pas encore tout sur le codage des pages HTML, vous pouvez à tout moment regarder comment une autre personne a fait la page que vous regardez en sélectionnant View - Source (ou une commande ressemblante) dans votre navigateur. Internet Explorer vous affichera le code de la page dans Notepad, alors que Mozilla vous le montrera dans une fenêtre spéciale avec un codage en couleurs. Mais c'est le même code, que vous pouvez essayer de comprendre et de modifier.
12. Comment faire une liste en HTML ?  (OB 05.09.05, 14:40) 
 O
   Bien sûr, il n'est pas recommandé de faire vos listes "à la main". Comme votre traitement de texte, HTML a des fonctions pour la création et l'organisation des listes.
Une liste à boulettes est déclarée en utilisant les balises <ul> et <ul>.
Une liste numérotée est déclarée en utilisant les balises <ol> et <ol>.
Les éléments de la liste (ul ou ol) sont identifiés par les balises <li>...</li> Voici encore une fois notre page d'exemple avec deux listes, une numérotée et l'autre non (Exemple06): 
<html>
<head>
<title>Exemple de listes en HTML</title>
</head>
<body>

<h1>Voici la liste des exemples vus jusqu'ici</h1>
<h2>Liste à boulettes</h2>
<ul>
   <li><a href="/util/html/Exemple01.html">Exemple 1</a> - premier fichier</li>
   <li><a href="/util/html/Exemple02.html">Exemple 2</a> - avec un titre</li>
   <li><a href="/util/html/Exemple03.html">Exemple 3</a> - avec deux paragraphes</li>
   <li><a href="/util/html/Exemple04.html">Exemple 4</a> - avec des sauts de ligne</li>
   <li><a href="/util/html/Exemple05.html">Exemple 5</a> - avec des liens</li>
   <li><a href="/util/html/Exemple06.html">Exemple 6</a> - avec des listes</li>
</ul>
<h2>Liste numérotée</h2>
<ol>
   <li><a href="/util/html/Exemple01.html">Exemple 1</a> - premier fichier</li>
   <li><a href="/util/html/Exemple02.html">Exemple 2</a> - avec un titre</li>
   <li><a href="/util/html/Exemple03.html">Exemple 3</a> - avec deux paragraphes</li>
   <li><a href="/util/html/Exemple04.html">Exemple 4</a> - avec des sauts de ligne</li>
   <li><a href="/util/html/Exemple05.html">Exemple 5</a> - avec des liens</li>
   <li><a href="/util/html/Exemple06.html">Exemple 6</a> - avec des listes</li>
</ol>
</body>
</html>
Notez que les codes des deux listes sont identiques, à l'exception des balises délimitant la liste (ul ou ol). Remarquez aussi que le code a été indenté, c'est-à-dire que les éléments de la liste (commençant pas <li>) commencent plus à droite que les autres lignes. Cette mise en page n'est pas obligatoire, mais facilite grandement la lecture et la correction ultérieure du code HTML. Puisqu'en HTML un nombre quelconque d'espaces = un espace, le résultat affiché ne change pas.
13. Et maintenant, des images !  (OB 05.09.05, 15:37) 
 O
   Si vous utilisez Internet, c'est sûrement, en partie du moins, à cause de la richesse des contenus qui peuvent y êtres trouvés: images, sons, vidéos, etc. La grande force du langage HTML est de permettre de simplement inclure ce genre de médias riches sans compliquer la syntaxe ni obliger à introduire de nouvelles notations pour chaque nouveau média.

La syntaxe pour insérer une image est très semblable à celle utilisée pour insérer un lien : <img src="/util/html/dog.gif"> affiche l'image dans la page.
Noter qu'il s'agit encore une fois ici d'une balise d'un style un peu particulier, qui a déjà été rencontré avec la balise <br>: elle se présente seule, et non pas en paire. La syntaxe est très proche de celle d'un lien hypertexte, à la seule différence que l'adresse doit correspondre à un fichier graphique de format reconnu, typiquement .gif ou .jpg.
14. Les tableaux HTML  (OB 06.09.05, 14:07) 
 O
   Une des grandes forces de HTML est sa capacité de générer des tableaux robustes et relativement compliqués. Par rapport aux tableaux de Word, les tableux HTML souffrent de quelques limitations; notablement, la décoration de la grille du tableau est constante pour tout le tableau (pourtour et lignes intérieures). Par contre, les possibilités de regroupement des cellules sont similaires, et il était possible d'imbriquer un tableau HTML dans un autre bien avant que ce soit possible dans Word.

Un tableau HTML est délimité par les balises <table>...</table>
Les lignes de tableau sont déllimitées par les balises <tr>...</tr>
Les cellules de tableau sont déllimitées par les balises <td>...</td> Concrètement, voici un exemple de page contenant un tableau, toujours basé sur la liste des exemples de cette introduction (Exemple 7): 
<html>
<head>
<title>Exemple de tableau en HTML</title>
</head>
<body>

<h1>Voici la liste des exemples vus jusqu'ici</h1>

<h2>Tableau sans bordure</h2>
<table>
   <tr>
      <td><a href="/util/html/Exemple01.html">Exemple 1</a></td>
      <td>premier fichier</td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple02.html">Exemple 2</a></td>
      <td>avec un titre</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple03.html">Exemple 3</a></td>
      <td>avec deux paragraphes</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple04.html">Exemple 4</a></td>
      <td>avec des sauts de ligne</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple05.html">Exemple 5</a></td>
      <td>avec des liens</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple06.html">Exemple 6</a></td>
      <td>avec des listes</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple07.html">Exemple 7</a></td>
      <td>avec des tableaux</td></td>
   </tr>
</table>

<h2>Tableau avec bordure</h2>

<table border>
   <tr>
      <td><a href="/util/html/Exemple01.html">Exemple 1</a></td>
      <td>premier fichier</td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple02.html">Exemple 2</a></td>
      <td>avec un titre</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple03.html">Exemple 3</a></td>
      <td>avec deux paragraphes</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple04.html">Exemple 4</a></td>
      <td>avec des sauts de ligne</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple05.html">Exemple 5</a></td>
      <td>avec des liens</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple06.html">Exemple 6</a></td>
      <td>avec des listes</td></td>
   </tr>
   <tr>
      <td><a href="/util/html/Exemple07.html">Exemple 7</a></td>
      <td>avec des tableaux</td></td>
   </tr>
</table>

</body>
</html>
Notez que la seule différence entre les deux tableaux est le paramètre border dans la balise <table>. Voici une courte liste des balises importantes pour les tableaux (toujours à placer dans la balise <table>:
cellpadding espacement autour du texte (défaut ~2, dépend du navigateur)
cellspacing épaisseur de la bordure (défaut ~2, dépend du navigateur)
border
ou
border="n"		 bordure, avec spécification de son épaisseur n en pixels