Langage HTML

Formatage de Documents, Langage de Balisage

Langage de balisage, Markup Language
Les balises consistent en des mots clés servant à décrire ou définir le contenu d'un document
HTML: Hyper Text Markup Language

Document HTML composé d'éléments de la forme :

Balise-de-début―texte balisé (le contenu)―Balise-de-fin

<title> Langage Html  </title>
<b> texte gras </b>                     bold
<strong> autre texte en gras, balise significative </strong>
<em> texte en italique </em>		emphasis 
<h1> Titre de Section </h1>		heading 1

Balisage: <balise> contenu </balise > (Ang. tag ) mot clé significatif entre < >
- Les caractères < et > eux-mêmes sont introduits (par échappement) par < et >

Eléments vides sans contenu: <balise />

<br />                                saut de ligne (break)
<hr />                                ligne (horizontal line)
<img src="plage.svg" />               insertion d'image

De HTML à HTML5

HTML 4.01
XHTML1.1 (plus strict, basé XML (syntaxe pour une famille de langage)
Evolution
- HTML (Origine SGML) --> 2.0 --> 3.2 --> 4.0--> 4.01
- XHTML = Reformulation de HTML4.0 en XML (HTML4.0 ainsi intégré dans outils XML)
- XML Langage d'échange/description de documents/données structurés.
  MetaLangage --> MathML, SVG, TrucML, ...
HTML5 : Nouveau HTML pour faciliter le développement d'applications Web. (Voir par ailleurs.)

Langage HTML

Structure d'un document
Liens, images, média
Eléments de structuration de texte
(entête de titre /paragraphe, listes, tables)

Structure d'un Document

Structure

<html>
  <head> 
    <title>
       Titre du document
    </title>
  </head>
  <body>
       Contenu du document

  </body>
</html>

Exemple
Source

Entête <head>

Contient le titre du document, des métadonnées (éléments <meta>), des définitions de style, des scripts à exécuter etc...
meta (données à propos du document)
```
<meta charset="utf-8">         
```
- Le document est encodé UTF-8, recommandé par W3C.

charset (jeu de caractères)

 utf-8  (unicode), iso-8859-1, iso-8859-6, windows-1252, ...

Autres éléments meta pour informer sur la page, par exemple
- Description: Ceci page Web à propos de ...
- Auteur: Najib Tounsi
```
<meta name="description" content="Ceci page Web à propos de ..."> 
<meta name="Auteur" content="Najib Tounsi" />
```
Informations destinées à des outils spécifiques...

Style externe (document CSS)

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

style interne

<style type=text/css>
   Règles de styles CSS
</style>

script

<script type="text/javascript">
  programme JS 
</script>

Liens

Balise d'ancrage (anchor) <a> texte de lien </a>

... au <a href="http://www.w3.org/html/">langage HTML</a>.

Exemple

Images

Balise d'image <img src="source.jpg"... />

<img src="http://localhost/image.jpg" />

La Source est l'URL du fichier image (gif, png, jpg, svg...) local ou distant
Exemple

Image cliquable: balise img à la place de texte de lien <a...> <img ... /> </a>

<a href="http://www.w3.org/html/">
   <img src="http://localhost/image.jpg" />
</a>

Eléments de Structuration de Texte

Entêtes (ou titres)
Paragraphes
Styles
Listes
Tables

HTML 5 a rajouté des éléments plus sémantiques, section, article, aside, header, footer, figure, etc. Voir HTML5

Entêtes Titres de Section

<h1> 1. Titre de Section (niveau 1) </h1>
<h2> 1.1 Titre de Sous Section (niveau2) </h2>
Texte sur une ligne en gros caractères
Six niveaux d'imbrication d'importance décroissante (trois suffisent en général)
h1, h2 , ... , h6

Paragraphes

<p> texte de paragraphe ... plusieurs lignes en générale ...</p>
Espaces et saut de lignes NON significatifs.
Paragraphes peuvent être groupés en sections <div> ... </div>
<br> (break) saut de ligne explicite
  (non breaking space) comme dans Coca Cola
Caractères accentués: é pour é, < pour < , etc...
Commentaire 
Autres
- <b> gras</b>, <i> italic</i>, <tt>, texte mono-espace </tt>, <code> ...</code> est mieux
- <pre> </pre>, pour un texte en police monospace, préserve les espaces et les sauts de lignes (e.g. source C)
- <blockquote> </blockquote>, texte de type citation décalé.
- <font> </font>, type et taille de police (déprécié).
Les styles permettent de faire tous ces formats et plus de façon plus élégante...

Feuilles de Styles

Voir le tutoriel CSS de ce cours

Le style c'est ce qui touche à la mise en page et à la présentation d'un texte.
Un langage de style est constitué d'un ensemble de règles qui indiquent au navigateur comment présenter un document.
Il est intéressant de séparer le contenu d'un document et sa présentation sur un support donné.
On peut changer la forme finale d'un document sans toucher au texte HTML qui le constitue.

Le langage de style s'appelle CSS Cascading StyleSheet CSS1, CSS2, CSS3.

<style type=text/css>
        body {text-color: black; background: white;}
</style>

Règles de styles encadrées par <style>...</style>
Ici la règle indique les couleurs de texte et de fond de l'élément body (toute la page).

Forme générale:

sélécteur { propriété : valeur;  propriété : valeur ...}

Les propriétés touchent à le marge de page et indentation de paragraphe

p { text-indent : 3em; margin-top : 2em; margin-botoom : 0em;}
h1, h2 {margin-left : -4% ; color: red}

Taille et type (famille) des polices

body {font-family : georgia, sans-serif; font-size: 105%}

alignement direction de texte...

div.arabe {direction : rtl; text-align : right}

etc... (voir http://www.w3.org/MarkUp/Guide/Style.html , http://www.htmlhelp.com/reference/css/)
On peut créer une feuille de style dans un fichier séparée (monStyle.css) et la lier à une page HTML par
```
<link rel="StyleSheet" type="text/css" href="monStyle.css" />
```
<style> et <link> se trouvent dans la partie <head>

Listes

3 types principaux de listes d'énumérations
Avec ou sans numérotation ordredred /unorderderd <ul>...</ul>ou <ol>...</ol>

Chaque item de la liste est entouré de <li> ...</li>

<ul>
   <li>3 types de listes ...</li>
   <li>Avec ou sans num&eacute;rotation ...</li>
   <li>Chaque item de la liste ...</li>
</ul>

Liste de définitions <dl>...</dl>, contenant plusieurs <dt>terme</dt>, <dd>texte de définition</dd>

Liste ol

C'est une liste d'item non numérotés. Chaque item est indiqué par un boulet noir.

Liste ul

C'est une liste numérotée. Les items sont indiqués par des numéros 1. 2. 3. ...

Obtenue par:

 <dl>
     <dt><b>Liste ol</b></dt>
     <dd>
         C'est une liste d'item non num&eacute;rot&eacute;s. 
         Chaque item est indiqu&eacute; par un boulet noir.
     </dd>
     <dt><b>Liste ul</b></dt>
     <dd>
        C'est une liste num&eacute;rot&eacute;e. Les items sont indiqu&eacute;s 
     par des num&eacute;ros 1. 2. 3. ...
     </dd>
 </dl>

Les listes peuvent s'imbriquer.

Tables

Une table est un ensemble de lignes et de colonnes
Une table est balisée par <table> ... </table>
Chaque ligne est balisée par <tr> ... </tr> table row

Chaque cellule est balisée par <td> ... </td> table data

Rabat	22
Casa	25
Tanger	24

obtenue par:

<table>
 <tbody>
  <tr>
   <td> Rabat </td> <td> 22 </td>
  </tr>
  <tr>
   <td> Casa </td> <td> 25 </td>
  </tr>
  <tr>
   <td> Tanger </td> <td> 24 </td>
  </tr>
 </tbody>
</table>

Des balises <th>...</th> (au lieu de <td>) permettent de donner un titre à une colonne

 <tr>
   <th>Ville</th> <th>T&deg; Moyenne</th>
 </tr>

Ville	T° Moyenne
Rabat	22
Casa	25
Tanger	24

On peut donner un titre de légende à une table par

<caption> Tableau V-1 Table des températures </caption>

Tableau V-1, Table Des températures
Ville	T° Moyenne
Rabat	22
Casa	25
Tanger	24

Un attribut summary="commentaire" est conseillé pour la balise <table>
D'autres attributs permettent de gérer la taille, l'alignement...
Les tables sont parfois utilisées pour la mise en page (effet de colonnes). Préférer le style pour tout ce qui concerne la mise en page. c.f. la propriété float.