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
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...