Le fichier HTML

Transcription

Le fichier HTML
Soyez acteur du Web !
Géraldine Del Mondo
Le fichier HTML
Le HTML, qu'est-ce ?
HTML
HTML signifie Hypertext Markup Language,
c'est un format conçu pour réaliser des pages web.
Il permet de structurer sémantiquement une page, de formater
le contenu, ajouter des images etc.
Le HTML est un langage à « balises »
Plusieurs versions se sont succédées, aujourd'hui : HTML 5
Mon premier fichier HTML
MonFichier.txt
<!--DOCTYPE HTML -->
<HTML>
mon premier fichier html
</HTML>
MonFichier.html
Le concept de balise
<!--DOCTYPE HTML -->
Un commentaire
<HTML>
Une balise ouvrante
mon premier fichier html
</HTML>
Zone d'action de la balise de commande
'HTML'
Une balise fermante
Le concept de balise
Deux formats possibles
Balise de début <commande>
Balise de fin </commande>
Balise auto-fermante <commande/>
Principe
Les balises permettent d'appeler des commandes dont l'action
est limitée au texte contenu entre la balise de début et la balise
de fin.
Le concept de balise
Exemple : balise pour un texte en italique
<!--DOCTYPE HTML -->
<HTML>
em
<em>mon premier fichier html</em> En dehors de la balise !
</HTML>
Exemple : balise pour un texte en gras
<!--DOCTYPE HTML -->
<HTML>
strong
<strong>mon premier fichier html</strong> En dehors de la balise !
</HTML>
Balises head & body
<!--DOCTYPE HTML -->
<HTML>
<head>
<title> Le titre de mon document </title>
</head>
<body>
<p>mon premier fichier html</p>
<p>C'est super !</p>
</body>
</HTML>
Balise de titre
<!--DOCTYPE HTML -->
<HTML>
<head>
<title> Le titre de mon document </title>
</head>
<body>
<p>mon premier fichier html</p>
<p>C'est super !</p>
</body>
</HTML>
Balises de contenu body :
paragraphe
<!--DOCTYPE HTML -->
<HTML>
<head>
<title> Le titre de mon document </title>
</head>
<body>
<p>mon premier fichier html</p>
<p>C'est super !</p>
</body>
</HTML>
Balises de contenu body : listes
<!--DOCTYPE HTML -->
<HTML>
<head>
<title> Le titre de mon document </title>
</head>
<body>
<ul>
<li>mon premier fichier html</li>
<li>C'est super !</li>
</ul>
<ol>
<li>plusieurs...</li>
<li>... styles de listes</li>
</ol>
</body>
</HTML>
Balises de contenu body : listes
<!--DOCTYPE HTML -->
<HTML>
<head>
<title> Le titre de mon document </title>
</head>
<body>
<ul>
<li>mon premier fichier html</li>
<li>C'est super !</li>
</ul>
<ol>
<li>plusieurs...</li>
<li>... styles de listes</li>
</ol>
</body>
</HTML>
Balises de contenu body : tableau
<!--DOCTYPE HTML -->
<HTML><head><title> Le titre de mon document </title></head>
<body>
<table>
<tr> <!-- Titres colonnes -->
<th>Colonne 1</th>
Ligne 1
<th>Colonne 2</th>
</tr>
<tr>
<td>D11</td> <!-- Données tableau -->
Ligne 2
<td>D12</td>
</tr>
<tr>
<td>D21</td>
Ligne 3
<td>D22</td>
</tr>
<tr>
<td></td>
Ligne 4
<td>D32</td>
</tr>
</table>
</body>
</HTML>
←1
←2
←3
←4
Balises de contenu body : tableau
<!--DOCTYPE HTML -->
<HTML><head><title> Le titre de mon document </title></head>
<body>
<table>
<tr> <!-- Titres colonnes -->
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>D11</td> <!-- Données tableau -->
<td>D12</td>
</tr>
<tr>
<td>D21</td>
<td>D22</td>
</tr>
<tr>
<td></td>
<td>D32</td>
</tr>
</table>
</body>
</HTML>
Problèmes d'encodage
Qu'est-ce que l'encodage ?
C'est le jeu de caractères utilisé pour enregistrer un
fichier
Les plus courants : l'ISO-8859-1, l'ISO-8859-15, UTF-8
Comment savoir quel est l'encodage de mon fichier ?
Vous trouverez cette information dans les paramètres
de configuration de votre éditeur.
Problèmes d'encodage
<HTML>
<head>
<title> Le titre de mon
document </title>
</head>
<body>
<p>J'ai testé l'écriture du
html </p>
</body>
</HTML>
MonFichier.html
Il faut lui dire !
Sinon utilisation de l'encodage par
défaut... Pas forcément le bon :-(
UTF-8
Par exemple en ajoutant une balise précisant l'encodage <meta charset="UTF-8"/>
après dans la partie <head> de votre page.
Utiliser le code HTML associé aux caractères spéciaux (plus trop utilisé)
(cf. http://www.w3schools.com/tags/ref_entities.asp)
En résumé
Le fichier HTML est un fichier texte contenant des balises
appelant des commandes, dont l'action est limitée au texte
contenu entre la balise de début et la balise de fin.
Beaucoup de commandes existent (strong, em, ul, table, etc.)
Attention au problème de l'encodage des caractères
Pour plus d'information :
http://www.w3.org/html/
http://www.w3schools.com/html5/

Documents pareils

TP5 : Introduction au langage HTML I) Présentation II) Les outils

TP5 : Introduction au langage HTML I) Présentation II) Les outils web ») liés entre eux par des hyperliens. Les pages web sont généralement organisées autour d’une page d’accueil, jouant le rôle d’un point central dans la navigation. Cet ensemble cohérent de page...

Plus en détail