1.
Introduction
Cliquez ici pour télécharger ce chapitre, ce qui vous permettra de le consulter sans être connecté.
Qu'est-ce que le HTML ?
Le HTML (HyperText Markup Language) est le langage de programmation qui permet de créer la mise en forme des pages internet. Tous les sites internet sont à la base programmés dans ce langage, très simple d'ailleurs. Ce langage se fonde sur l'hypertexte c'est-à-dire la création de liens entre les pages : c'est en cliquant sur un mot clé ou une image que l'on navigue.
Pourquoi programmer en HTML ?
Le langage HTML sert à créer des pages web qui elles-mêmes, reliées entre-elles, constituront un site internet. Certains vont me dire qu'il existe des logiciels automatisant la programmation HTML, se présentant sous forme d'un traitement de texte (des logiciels dits "WYSIWYG" (What You See Is What You Get) comme Frontpage, Composer, Publisher, ...). C'est vrai, mais apprendre à programmer en HTML permet d'avoir une plus grande liberté, de ne pas être limité aux simples fonctions du logiciel.
La création de pages en HTML sert donc à créer des sites internet mais permet aussi de comprendre le fonctionnement de certains principes (par exemple, les e-mails sont créés en HTML).
Quels outils pour programmer en HTML ?
Pour programmer en HTML, un simple éditeur de texte suffit. Il existe par exemple Notepad (aussi appelé Bloc-notes) sous Windows. En effet, les fichiers HTML ne sont que des fichiers textes contenant les instructions, qui au lieu d'être enregistrés en .txt sont enregistrés en .htm ou .html
Cependant, certains logiciels sont spécialisés dans l'édition de fichiers HTML, sans être pour autant WYSIWYG. Je citerai principalement Firstpage (téléchargement :
www.evrsoft.com/download/) qui est très bon et freeware (= gratuit). Ce genre de logiciel permet de taper un peu plus vite le code HTML et de mieux en voir la structure (les balises sont mises en couleur).
Le principe des balises.
Toutes les instructions HTML (insérer une image, mettre le texte en gras, ...) sont sous forme de balise : elles sont comprises entre le caractère < et >. Par exemple, l'instruction indiquant le début d'un fichier HTML est <HTML>.
Certaines instructions indiquent de faire quelque chose sur un certain espace (par exemple, mettre le texte en gras à partir de tel endroit jusqu'à tel endroit). Dans ce cas, l'instruction indiquant le début est sous forme <instruction> et celle indiquant la fin est de forme </instruction> (le / indique la fin). Par exemple, pour mettre le texte en gras, l'instruction est <B> et pour arrêter de le mettre en gras, l'instruction est </B>.
Pour l'instant, ça peut ne pas vous sembler très clair, mais vous comprendrez mieux par la suite !
Remarque :
On peut aussi bien écrire les balises en majuscules qu'en minuscules. Personnellement, je préfère les majuscules car elles mettent mieux en valeur les instructions par rapport au reste.
Le début et la fin d'un fichier HTML.
Un fichier HTML commence et finit ainsi :
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
</BODY>
</HTML>
Pour taper ce code, utilisez un éditeur de texte ou de HTML comme Bloc-Notes (=Notepad) ou First Page) puis enregistrez le fichier en .htm ou en .html (cela revient au même).
 Attention ! |
Si vous utilisez Notepad, faites attention à ne pas enregistrer votre document HTML en .txt
Je vous conseille énormément d'enregistrer vos fichiers avec un nom de fichier inférieur ou égal à 8 caractères, et sans caractères spéciaux dedans (tels les espaces, les accents, etc...). Cela vous permettra d'éviter certaines surprises après l'envoi de vos fichiers chez votre hébergeur... De même, prohibez tout ce qui est majuscule : enregistrez vos fichiers en minuscules. Certains hébergeurs font en effet la différenciation majuscules/minuscules, autant prendre des précautions !
Faites bien attention à ne pas oublier de refermer le document par </BODY> puis par </HTML>
|
L'instruction <HTML> (et </HTML>) indique le début du fichier HTML. Cette instruction est obligatoire afin que le navigateur (Internet Explorer, Netscape, ...) comprenne que le fichier est de type HTML (même s'il pourrait le comprendre par l'extension du fichier).
L'instruction <HEAD> indique l'en-tête du document. Dedans, l'instruction <TITLE> indique le titre de la page qui sera affiché dans le bandeau du navigateur. Ainsi, si vous tapez entre les 2 balises <TITLE> et </TITLE> la phrase Ceci est le titre, voici ce que vous obtiendrez sous Internet Explorer :
Enfin l'instruction <BODY> indique que le corps du document commence. C'est là que se trouvera toute la mise en page du fichier HTML : texte, images, liens, ...
Cette instruction peut contenir plusieurs propriétés :
la propriété BGCOLOR. Cela permet de choisir la couleur de fond du fichier HTML. On obtiendra un fond rouge si on tape <BODY BGCOLOR="Red">. Voici les principales couleurs prédefinies :
Pour avoir plus de couleurs, il faut taper entre guillemets le code hexadécimal de la couleur en RGB (Red Green Blue) précédé d'un #. Ainsi, BGCOLOR="Red" équivaut à BGCOLOR="#FF0000" (l'hexadécimal allant de 0 à FF). Pour obtenir les codes hexadécimaux des couleurs, je vous conseille d'utiliser First Page ou le logiciel de retouche d'images Paint Shop Pro.
la propriété BACKGROUND. Elle permet de mettre en fond de page, plutôt qu'une couleur unie, une texture (comme le fond de cette page) à l'aide d'une image prévue à cet effet. Nous reviendrons sur cette propriété dans le chapitre "Images" (chapitre 3) de ce cours HTML.
