création de page HTML

Introduction : Voici quelques exercices et informations afin de comprendre comment est constituée une page HTML.

Pour les curieux donc, mais aussi pour ceux qui vont très vite comprendre qu'il est souvent utile d'aller voir le code pour palier à certaines imperfections de l'éditeur de page HTML.

Généralités

HTML signifie Hyper Text Markup Language, mais ce n'est pas un langage à proprement. On parle plutôt d'un outil de description de documents, lisibles par tout système de navigation (comme les navigateurs Internet Explorer ou Navigator de Netscape).

Une page HTML est donc écrite à l'aide d'une succession de balises mélangées avec du texte. Chacune permet une mise en forme, l'insertion d'un document multimédia ou un liens. D'ailleurs, l'intérêt d'une page HTML est d'être facilement relier à d'autres créant ainsi toute une bibliothèque : On parle alors d'hypertexte.

Au final, une page HTML est définie par un texte source en ASCII 7 bits. Cette pauvreté le rend transportable (Mac, PC) et facilement accessible par l'intermédiaire des lignes téléphoniques.

Comment écrire en HTML ?... Bonne question !

soit à partir d’un éditeur spécialisé (type FrontPage ou Dreamweaver)
soit directement à partir d’un éditeur simple (type bloc-notes de Windows)

Structure d'une page HTML

La page la plus simple se présente ainsi :

<HTML>

             <HEAD>

(ici on trouve des informations générales sur la page : titre, éditeur utilisé, mots-clés utiles aux moteurs de recherche...)

             </HEAD>

             <BODY>

(ici on place toutes les balises définissant notre page HTML et le texte)

             </BODY>

</HTML>

Les balises

Les balises (ou étiquettes ou tags) sont les éléments importants d'une page HTML. Il y en a de deux sortes :

Balises NB : Ce sont des mots-clé écris entre deux chevrons	Exemples NB : le texte qui sera lisible sur la page, est écrit en noir
les balises simples (avec un début et une fin) Bien noter que seul le texte entre la balise de début <b> et la balise de fin </b> sera en caractères gras.	<b>texte en gras</b>
les balises avec attribut Ici l'attribut color prend la valeur hexadécimal correspondant à la couleur rouge #FF0000. Bien noter que seul le texte entre la balise de début <font> et la balise de fin </font> sera en écrit en rouge.	<font color="#FF0000">texte en rouge</font>

Remarque : Certaines balises ne possèdent pas de fin. Exemple :<b> qui permet de revenir à la ligne et que l'on peut répéter autant de fois que nécessaire.

Point de départ
Ouvre une page vierge en cliquant ici... Elle est blanche. Visualise le code qui décrit cette page HTML : Aucune surprise ! Tu retrouves la structure minimale vue plus haut. Remarque : Pour accéder au code, tu as deux possibilités : Soit cliquer sur Fichier à Modifier avec le Bloc-Notes ; soit cliquer droit et choisir Afficher la source. Cela revient au même.
Travail à faire
Avant de commencer, fais une copie de cette page dans le même répertoire (voire dans un autre si tu préfères). C'est avec cette copie que nous travaillerons.
Rajouter un texte	Cela doit se faire obligatoirement entre les balises <body> et </body> si en veux qu'il soit lisible. A noter que ces deux balises doivent uniques ! Tape pour être original : Voici ma première page. Enregistre et observe le résultat à l'aide ton navigateur. Pour cela clique sur l'icône "Actualiser" ou tape sur la touche F5 du clavier... Un peu fade, non ?
Changer la couleur du texte	Pour cela, rajouter après notre première phrase : <font color="#FF0000">J'écris en rouge</font>
Changer la police du texte	Il suffit d'intercaler un nouvel attribut à la balise <font>. Par exemple, cela donne : <font face="Arial" color="#FF0000">J'écris en rouge et en Arial</font>

Sauter une ligne	Il suffit d'intercaler la balise <br> et la répéter autant fois que de lignes supplémentaires voulues.
Rajouter une couleur de fond	Pour cela, rajouter l'attribut suivant au niveau de la balise <body>. Exemple : <body bgcolor="#FFFF80"> Bien noter que la couleur est donné par un nombre hexadécimal parmi 16 millions environ. Pour d'autres choix de couleurs : clique ici.
Mettre une image en fond	Pour cela, utiliser l'attribut background à la place de bgcolor de la balise <body> : <body background="fond.gif"> Bien noter que l'image à mettre en fond de page est signalée avec son extension (ici .gif). Observer le résultat. Bien sûr, bien veiller à ce que l'image soit dans le même dossier que votre page HTML ! Dans le cas contraire il faudra indiquer le chemin pour la trouver...
Changer la casse du texte	Il est toujours intéressant de mettre en caractère gras ou en italique, de centrer le texte. Essayer les balises suivantes : <b>un texte quelconque</b> <i>un texte quelconque</i> <center>un texte quelconque</center> Il y en a bien d'autres...
Pour aller plus loin
Il est possible d'imprimer ces trois pages qui te donneront un aperçu des principales balises utilisées. Ci-joint quelques exercices permettant de rendre à votre page plus interactive et de lui donner réellement une dimension multimédia comme le permet le langage HTML.

Insérer dans le texte une image ou du son	NE PAS UTILISER LE COPIER-COLLER ! En apparence cela fonctionne mais, lorsque le site est déplacé ou mis en ligne, l'image ne s'affiche pas. Il faut utiliser la balise <img> accompagné (au moins) de l'attribut src qui précise son nom complet (avec l'extension). Exemple : <img src="clown.gif" width=200 heigth=120> Remarques : (1) Ici on voit que l'on rajouter les attributs width et heigth pour préciser les dimensions de l'image (2) Il possible de rajouter du son en utilisant la balise <sound>
Mettre en place des liens	Pour mettre en place de liens, locaux ou extérieurs, on utilise les balises <A> … <A/> accompagné de l'attribut href. Les exemples suivants montre que le lien se fait par l'intermédiaire d'une phrase placée entre les deux balises: vers une autre page html : <a href="page2.htm">Cliquez ici pour voir la page 2</a> vers un site : <a href="http://membres.lycos.fr/mpicartier">Voir le site de MPI</a> vers un fichier texte : <a href="documents/balises.doc"> Pour ouvrir le document Word sur les balises qui se situe dans le sous-dossier nommé documents </a> vers une image : <a href="c:/mes documents/image.gif"> Pour voir une image qui se situe de le dossier mes documents </a> Remarques : (1) Dans le premier exemples, l'attribut href indique seulement le nom du document à ouvrir. On suppose qu'il est dans le même dossier que cette page : On dit que l'on peut l'ouvrir en local. Ce n'est pas le cas dans le second exemple puisqu'il faut se connecté à internet. (2) Dans le troisième exemple, par contre le document peut être vu en local mais il n'est pas enregistré dans le même dossier. On indique, en plus du nom du document à ouvrir, le chemin pour le trouver (Ici dans le sous-dossier "documents") : On parle d'adresse relative. Indispensable si on veut transporter ses pages sur un autre poste ou le mettre en ligne ! Ce n'est pas le cas dans le quatrième exemple puisque l'adresse est relative au poste : On parle d'adresse absolue.

1 :	*Présentons le langage* HTML !**
2 :	Ma première page HTML
3 :	Essayons un éditeur de page HTML !