Internet
Site Web: fonctionnement, structure et programmation
Les fichiers HTML sont de simples fichiers texte dont le nom se termine par l'extension « .html » ou « .htm ». Pour en créer, utilisez une application qui permet d'écrire simplement du texte sans ajouter tout un tas de formatage et de caractères spéciaux. Vous n'avez besoin que de texte pur. Si vous êtes sur Windows, vous pouvez utiliser le simple éditeur de texte « Bloc-Note » ou alors télécharger l'éditeur « Notepad++ » plus performant et gratuit. Sous Mac OS X ou Linux, nous recommandons l'usage de l'éditeur « Visual Studio Code » également gratuit.
Le HTML est un langage de « balisage » permettant de présenter des informations sur Internet. Ce que vous voyez quand vous regardez une page sur Internet est l'interprétation par votre navigateur du code HTML. Pour visualiser le résultat d'un fichier HMTL écrit à l'aide d'un éditeur de texte, il suffit de l'ouvrir avec un navigateur tel que Firefox ou Google Chrome.
Afin de vous familiariser au langage HTML, examinons-en un premier exemple et observons le résultat interprété par le navigateur. A ce dessein, imaginons que vous ayez à créer une page web pour vanter les mérites du bar Tête la première:
Code source du fichier « index.html ».
Interprétation du fichier « index.html » par un navigateur web.
Comme nous pouvons le constater avec l'exemple ci-dessus, un fichier HTML n'est autre qu'un fichier texte dont le contenu est structuré à l'aide de repères que l'on appelle des éléments. Chaque élément est constitué de balises et d'attributs qui permettent d'apporter des informations sur son contenu. Quand le navigateur lit du code HTML, il interprète toutes les balises entre lesquelles se trouve le texte.
Les balises ne sont que des mots ou des caractères mis entre les chevrons « < » et « > », comme <head>, <p> ou <h1>. Elles indiquent au navigateur la structure et le contenu du texte. Le HTML utilise donc des balises qui disent au navigateur quelle partie du texte est un titre, un paragraphe, quel texte doit être mis en exergue et même où doivent se placer les images. Par exemple, pour déclarer un paragraphe, nous écrirons:
<p>Ceci est un paragraphe.</p>
Si nous désirons déclarer un paragraphe souligné, il est possible d'imbriquer la paire de balises de soulignement <u> à l'intérieur de la paire de balises <p>:
<p><u>Ceci est un paragraphe souligné.</u></p>
Le navigateur ne fait pas apparaître les balises ouvrante <p>, <u> et fermante </p>, </u> mais interprétera leur effet.
Dans l'exemple ci-dessus, remarquons également que le navigateur ignore les tabulations, les sauts de ligne et la plupart des blancs qui se trouvent dans le code HTML. Il ne se fie qu'aux balises pour placer un saut de ligne ou de paragraphe.
Les balises peuvent être dotées ou non d'attributs qui permettent de modifier le comportement par défaut de la balise ou de spécifier des informations indispensables (comme l'adresse d'une image intégrée à la page). Les attributs s'insèrent toujours dans la balise ouvrante. L'affectation d'une valeur à un attribut se fait en utilisant le signe d'égalité (=) et la valeur de l'attribut est entourée par des guillemets (") ou des apostrophes ('). Par exemple,
<p align="right">Ceci est un paragraphe aligné à droite.</p>
a pour effet d'aligner le paragraphe à droite. Notons que align est le nom de l'attribut et right la valeur de l'attribut. Une même balise peut accepter plusieurs attributs séparés par un espace, les uns à la suite des autres, dans un ordre quelconque.
Finalement, sachez qu'il est possible d'insérer des commentaires dans un fichier HTML, commentaires qui ne seront pas interprétés par le navigateur. Si vous souhaitez inclure un commentaire, il suffit de procéder comme suit:
<!-- Ceci est un commentaire en HTML -->
Notez que les commentaires peuvent prendre plusieurs lignes. Tout ce qui est mis entre <! -- et --> , même du HTML, ne sera pas lu par le navigateur.
Indiquez sur les lignes de droite ci-dessous ce qu'indique chaque balise de l'exemple précédent au navigateur:
|
