GoupillWiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Initiation à HTML =====

===== Bref historique =====
{{:langages:html:html5.png?nolink&100 |}}

{{ :nsi:premiere:sir_tim_berners-lee.jpg?direct&200|}}

**H**yper**T**ext **M**arkup **L**anguage est une des trois inventions à la base du **W**orld **W**ide **W**eb, avec le **H**yper**T**ext **T**ransfer **P**rotocol et les adresses web.

Un **hypertexte** est un document ou un ensemble de documents contenant des unités d'information liées entre elles par des **hyperliens**.

HTML a été inventé pour permettre d'écrire des documents hypertextuels liant les différentes ressources d’Internet.

En 1991, **Tim Berners-Lee** -- ci-contre -- un informaticien britannique travaillant au CERN, annonce publiquement le web et donne le lien d'un document ''.html''.

En 2021, nous en sommes à la version 5 de HTML.

===== Langage à balise interprété =====

Le HTML est un langage **descriptif**. C'est à dire qu'il se contente de décrire l'apparence du résultat mais qu'il ne donne pas lieu à une exécution d'instructions.

Un fichier ''.html'' est un simple fichier texte. À l'aide de **balises** il indique les éléments de mise en forme. Quand on ouvre le fichier avec un éditeur de texte, on voit les balises telles qu'elles sont écrites dans le fichier.

{{ :langages:html:browsers.png?direct&200|}}

Un navigateur -- //Firefox, Chrome, Safari...// -- à l'ouverture du fichier, interprète ces balises ce qui modifie l'apparence du texte.

La plupart des balises fonctionnent comme des parenthèses : //balise ouvrante//, //balise fermante//.

===== Page élémentaire =====

Contenu d'un fichier ''.html'' élémentaire.

<code html linenums>
<!DOCTYPE html>
<html>
  <head>
    <!--
    la zone head = entête permet de préciser la configuration de la page
    -->
    <title>Titre de la page</title>
  </head>
  <body>
    <!-- corps = contenu de la page -->
  </body>
</html>
</code>

//Les indentations ne sont pas indispensables.//

===== block et inline =====

Dans un document ''.html'', les retours à la ligne sont ignorés et en l'absence de balises, tout le contenu apparaîtrait à la suite, sans retour à la ligne. Dans cette perspective, on distingue deux types de balises :

  * Les balises de type //block// qui forment un paragraphe. Elles commencent sur une nouvelle ligne et quand elles se terminent on revient en début de ligne.
  * Les balises de type //inline// qui ne font pas revenir à la ligne.

Par exemple, si je veut **mettre des mots en gras**, c'est un élément de mise en forme qui nécessite une paire de balises, mais je ne veux pas que ces balises fassent revenir en début de ligne. C'est un cas //inline//.

Les balises ont un fonctionnement par défaut, soit //block//, soit //inline//. Mais tout est modifiable.

===== Les balises =====

==== Les commentaires ====

<code html linenums>
<!-- Début d'un commentaire
  qui peut s'étaler sur plusieurs lignes...
Fin du commentaire -->
</code>

==== Le charset ====

Dans un fichier texte, les caractères sont codés avec un code  -- [[nsi:premiere:caracteres|Voir cours]]. Comme un fichier internet peut être vu dans le monde entier et que les caractères des différents pays peuvent être très différents, il est important de préciser l'encodage utilisé. En Europe on utilisera le plus souvent UTF8.

<code html linenums>
<meta charset="UTF-8"> <!-- à placer dans <head> -->
</code>

==== Retour à la ligne ====

En général, on ne devrait pas en avoir besoin. On peut utiliser des éléments de type //block// et des marges.

<WRAP tip>Si on a besoin de laisser un espace vertical, il est plus rigoureux d'utiliser des marges plutôt que de sauter des lignes. Cela est également vrai pour un document de traitement de texte comme Word.</WRAP>

<code html linenums>
<br/>
</code>

==== Titres ====

//Balises de type block//

<code html linenums>
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
</code>

==== Mises en forme élémentaires ====

//Balises de type inline//

<code html linenums>
<b>Texte en gras</b>
<i>Texte en italique</i>
</code>

==== Paragraphes ====

Élément standard permettant de former proprement les paragraphes de texte sans recours à ''%%<br/>%%''.

<code html linenums>
<p>mon paragraphe...</p>
</code>

==== Blocs génériques ====

Il peut être utile de délimiter une zone pour lui appliquer une mise en forme personnalisable ou pour identifier la zone.

<code html linenums>
<span>...</span> <!-- balise générique inline -->
<div>...</div> <!-- balise générique block -->
</code>

==== Liens hypertextes ====

<code html linenums>
<a href="adresse du lien">Texte d'un lien hypertexte</a>
<img src="adresse de l'image" >
</code>

==== Listes à puces ====

<code html linenums>
<ul>
  <li>Un item</li>
  <li>Un autre item</li>
</ul>
</code>

==== Listes numérotées ====

<code html linenums>
<ol>
  <li>Un item</li>
  <li>Un autre item</li>
</ol>
</code>

==== Tableaux ====

<code html linenums>
<table> <!-- Début table -->
  <tr>  <!-- Début d'une ligne -->
    <td>Une cellule</td>
    <td>Une autre cellule</td>
  </tr>
  <tr> <!-- Une autre ligne -->  ... </tr>
</table>
</code>

===== Styles =====

Pour ajouter des couleurs, des marges, des cadres... on utilise les styles CSS //Cascading Style Sheets//.

Il existe beaucoup d'options CSS. Le mieux est d'aller voir sur une [[https://www.w3schools.com/cssref/default.asp|Référence]] chaque fois que nécessaire.

Les éléments de style CSS peuvent être indiqués de diverse façons.

==== Méthode 1 : au niveau des balises ====

<code html linenums>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Illustration méthode 1</title>
  </head>
  <body style="width=80%;">
    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Petit bloc de texte comme exemple.</p>
    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Autre bloc de texte comme exemple.</p>
    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; color:#FF0000;">Autre bloc de texte mais écrit en couleur.</p>
  </body>
</html>
</code>

Cette méthode est mauvaise :
  - rend le code HTML très embrouillé, très peu lisible : on a du mal à trouver le contenu au milieu des éléments de styles,
  - répète de nombreuses fois la même chose puisque tous les paragraphes seront stylés de la même façon,
  - risque de rendre l'affichage inhomogène : si on se trompe d'une balise à l'autre, elles pourront avoir un style différent ce qui n'est pas rigoureux,
  - d'une façon général, il faut séparer fond et forme.

==== Méthode 2 : Les styles regroupés dans le head ====

<code html linenums>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Illustration méthode 1</title>
    <style type="text/css">
        body { width:80%; }
        p {
           font-family:Arial, sans-serif;
           font-size:12pt;
           text-align:justify;
           text-indent: 20px;
        }
        p.encouleur { color: #FF0000; }
    </style>
  </head>
  <body>
    <p>Petit bloc de texte comme exemple.</p>
    <p>Autre bloc de texte comme exemple.</p>
    <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p>
  </body>
</html>
</code>

Cette méthode est déjà meilleure : elle est beaucoup plus lisible.
  * Le style défini en ligne 8 s'applique à tous les éléments de type ''%%<p>%%'',
  * le style en ligne 14 s'applique à tous les éléments de type ''%%<p>%%'' ayant la classe ''%%encouleur%%''
  * En lignes 18 et 19, les balises ''%%<p>%%'' se voient affecter le style de la ligne 8
  * En ligne 20, la balise ''%%<p>%%'' a la classe ''%%encouleur%%''. Le bloc se verra affecter les styles des lignes 8 et 14.

==== Méthode 3 : Fichier CSS à part ====

On commence par définir un fichier CSS :

<code css linenums>
/* Fichier styles.css */
body { width:80%; }
p {
  font-family:Arial, sans-serif;
  font-size:12pt;
  text-align:justify;
  text-indent: 20px;
}
p.encouleur { color: #FF0000; }
</code>

Et on fait le lien vers ce fichier dans le HTML :

<code html linenums>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Illustration méthode 1</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Petit bloc de texte comme exemple.</p>
    <p>Autre bloc de texte comme exemple.</p>
    <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p>
  </body>
</html>
</code>

C'est la meilleure option :
  * Le graphiste s'occupe de créer les styles et il les rassemble dans le fichier CSS,
  * Celui qui écrit le contenu se contente de faire référence au fichier CSS et il a la garantie que le styles sera toujours homogène,
  * On peut récupérer des styles tout fait.

<WRAP important>Une même balise peut recevoir plusieurs classes CSS en même temps.</WRAP>