Programmer pour le Web

 Le langage HTML

À la base des sites Internet, il y a le langage HTML (HyperText Markup Language ou « langage de balises hypertextes » en français). La première particularité du langage HTML est de ne pas avoir besoin d’être compilé. En effet, il est interprété par une application tiers, un navigateur web par exemple. Commençons par une page web simple. Bonjour tout le monde Copiez ces quelques lignes dans votre éditeur de texte favori et enregistrez le fichier en lui donnant l’extension .html. Vous précisez ainsi à votre système d’exploitation que le fichier que vous venez d’enregistrer est une page web. Si vous double-cliquez sur ce fichier, il s’ouvrira dans votre navigateur web en affichant « Bonjour tout le monde » (voir Figure 11.1). Quand vous ouvrez le fichier, votre navigateur fait une lecture ligne par ligne en interprétant les couples de balises placées dans le fichier. Remarquez que chaque couple de balises est composé d’une balise ouvrante et d’une balise fermante . De cette manière, votre navigateur sait comment afficher ce qui se trouve entre les balises. 

Programmer pour le Web

Analysons maintenant le fichier dans le détail. Bien que la page affichée soit des plus élémentaires, elle respecte un format qui est celui de toutes les pages web du monde, et ce depuis plus de 30 ans. La première ligne contient une balise HTML, qui spécifie au navigateur qu’il s’agit d’une page formatée dans ce langage. La particularité de cette balise est de délimiter la zone de la page qui sera affichée dans le navigateur. Normalement, tout ce qui est placé en dehors du couple de balise HTML n’est pas interprété par le navigateur. Les navigateurs Les navigateurs récents autorisent une certaine largesse vis-à-vis des conventions et affichent parfois le texte en dehors des balises. Ces tolérances ne sont pas forcément propres à tous les navigateurs. Attention donc à respecter les normes. La deuxième balise, HEAD, sert à ouvrir une zone qui permet de définir un lot d’informations concernant la page. Ces informations ne sont pas nécessairement affichées. Dans cet exemple, vous ajoutez à l’intérieur des deux balises HEAD, deux balises TITLE. Ces deux balises permettent de définir un titre pour la page, qui sera affiché dans la barre de titre de la fenêtre. Ici c’est la chaîne de caractère « Ma première page ». Une fois la balise TITLE fermée, il ne faut pas oublier de refermer la balise HEAD et ainsi de délimiter la fin de la zone d’en-tête. Une fois cela fait, vous avez spécifié toutes les informations nécessaires pour que le navigateur sache ce qu’il faut afficher.

Les liens HTML

Pour aller de page en page, vous pouvez ajouter des liens qui pointent vers une autre page à l’aide de la balise . Elle produit un lien sur lequel l’utilisateur peut cliquer pour afficher dans le navigateur une autre page. Elle accepte un attribut HREF qui définit la page sur laquelle pointer. Voici une illustration de ce principe. 1 Créez une page web à l’aide du code suivant : Ma deuxième page web 2 Créez ensuite une deuxième page, dans le même dossier que la précédente, avec le code suivant : Bonjour tout le monde Il existe une longue liste de balises HTML dédiées aux styles, mais la fournir n’apporterait rien ici. Elles figurent sur le site web du W3C, www.w3c.org. Il s’agit de l’organisme qui gère les conventions et les normes pour toute la programmation web. Figure 11.2 : Une page avec un lien vers Google Ajouter du style Chapitre 11 LE GUIDE COMPLET 327 Notez qu’il est possible de combiner différents codes de mise en page. Vous pouvez ainsi écrire du texte gras souligné en faisant se chevaucher les balises. Mais attention à bien respecter leur ordre. Il faut toujours fermer en premier la balise que vous avez ouverte en dernier. Code correct : Mon texte gras italique Code incorrect : Mon texte gras italique Cette méthode marche parfaitement mais est un peu lourde dès lors que l’on veut cumuler les attributs. C’est pourquoi, pour tout ce qui relève de la mise en page, il est maintenant courant d’avoir recours aux feuilles de style. 11.4. Garder le style HTML dispose de balises destinées à la mise en page de contenus. Cependant, et pour plus de souplesse, sont apparues vers la fin des années 90 les feuilles de style ( ou CSS). Elles permettent de séparer le contenu de sa présentation. En utilisant les CSS, vous aurez les instructions de mise en page réparties dans un fichier et le contenu du site dans un autre. De cette manière, vous pourrez réutiliser votre style sur autant de pages web que vous le souhaitez, sans avoir à récrire les instructions de mise en page. Autre avantage : si vous avez un piètre sens artistique, des centaines de feuilles de style sont librement téléchargeables sur Internet. Figure 11.3 : Une page qui a du style  Programmer pour le Web Avoir la classe Voyons maintenant comment définir des attributs de style dans une feuille CSS. Une fois de plus, lancez votre éditeur de texte préféré et copiez les lignes suivantes : .rouge { color:Red; } Remarquez bien le point (.) devant le mot rouge. Cela signifie que vous déclarez une classe. Cette classe, tout comme en programmation orientée objet, va permettre de définir un ensemble de propriétés. Une fois cela fait, vous pourrez appliquer toutes ces propriétés à une balise ou à un élément d’une page HTML en lui indiquant à quelle classe il doit se conformer. Ici vous avez défini une classe rouge qui va contenir un seul attribut, celui de la couleur du texte. Tous les paramètres CSS sont déjà définis, il vous suffit juste de leur donner une valeur pour les utiliser. Ici vous utilisez l’attribut Color, qui permet de définir la couleur du texte dans un conteneur donné. Pour lui donner la valeur rouge, il suffit de noter : color:Red Ici, le caractère deux-points (:) permet de réaliser l’affectation. Les attributs CSS Les attributs CSS sont à peu près aussi nombreux que les balises HTML. C’est pourquoi nous n’en fournirons pas une liste détaillée ici. Vous pourrez les trouver sur Internet, en saisissant Attributs CSS dans votre moteur de recherche favori. Enregistrez le fichier CSS en le nommant fichierstyle.css (notez l’extension .css). Sauvegardez-le si possible dans le même répertoire que le fichier HTML. Vous allez maintenant indiquer à la page web qu’elle doit utiliser le style du fichier .css