Apprendre le HTML : le tutoriel pour débutants
À la fin des années 1980, l'informaticien britannique Tim Berners-Lee développa les composants de base du World Wide Web. Employé à l'Organisation européenne pour la recherche nucléaire (CERN), il s'est d'abord consacré à un projet interne destiné à faciliter les échanges d'informations au sein du réseau entre les laboratoires du CERN, sachant que certains étaient situés en France et d'autres sur le territoire suisse. Pour sa base d'infrastructure de réseau, T. Berners-Lee utilisa alors l'hypertexte, une forme de texte qui transmet les informations par le biais d'hyperliens et qui est écrite en utilisant des langages de balisage. Il développa alors un langage de balisage spécifique qui donna naissance à l'Hypertext Markup Language, soit le HTML.
Un peu moins de trois décennies plus tard, le HTML constitue la base de la mise en réseau numérique mondiale avec de nombreux autres éléments constitutifs tels que le protocole de transfert HTTP, l'URL, les navigateurs et les serveurs Web. Le langage Web est aujourd’hui incontournable pour tout développeur. Dans ce tutoriel HTML, nous avons résumé les bases et conseils les plus importants pour les débutants afin de vous initier au principe du langage de balisage et vous aider à démarrer plus facilement.
- Qu’est-ce que le HTML ?
- Quels logiciels pour écrire du code HTML ?
- Création de la première page HTML
- HTML : Les bases de structuration de texte
- La structure de base des pages Web HTML
- Intégrer des images, photos et graphiques dans vos pages Web
- Dernière ligne droite : comment mettre votre page HTML en ligne
- CSS et JavaScript : pourquoi le HTML n'est qu'un début
Qu’est-ce que le HTML ?
Le HTML est l'un des langages lisibles par les systèmes informatiques qui permettent des interactions entre les ordinateurs et les êtres humains. Il permet de définir et de structurer les éléments typiques d'un document textuel tels que les titres, paragraphes, listes, tableaux ou graphiques, tout en les marquant en conséquence. La représentation visuelle est réalisée à l'aide du navigateur Web qui interprète les lignes de code pour ensuite afficher les différents éléments. En outre, le code HTML peut contenir des informations sous forme de métadonnées. De nos jours, le HTML est principalement utilisé comme langage de balisage uniquement dans sa fonction descriptive, tandis que les langages pour les feuilles de style comme CSS (Cascading Style Sheets) sont utilisés pour définir le design. Dans les débuts du Web, cependant, il était assez courant de faire les ajustements visuels avec HTML.
HTML a évolué à partir de SGML (Standard Generalized Markup Language), un méta-langage de norme ISO reconnue (8879:1986) qui a largement disparu. Le style des éléments SGML peut donc se retrouver en HTML. La plupart du temps, on aura alors deux balises marquant l’une le début et l’autre la fin, à savoir respectivement <> et </>. Pour certains éléments, la balise de fin n'est pas nécessaire. Par ailleurs, quelques éléments sans contenu existent, comme le saut de ligne <br>. En plus des balises, on retrouve également quelques éléments d’origine dans les propriétés HTML suivantes :
- Déclaration du type de document : indication de la version HTML utilisée, par exemple <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.
- Utilisation d'entités de caractères : utilisation d'entités pour les unités récurrentes, telles que < pour « < » ou & pour « & ».
- Marquage des commentaires : les commentaires sont ajoutés en HTML selon le motif <!--Commentaire-->.
- Attributs : propriétés complémentaires des balises selon le schéma <tag attribut="valeur">.
Quels logiciels pour écrire du code HTML ?
Pour commencer notre cours HTML, il est important de clarifier quel logiciel est le plus adapté pour écrire du code HTML. Il n'y a toutefois pas de réponse générale valide pour tous. D'un côté, on note que très peu d’exigences sont requises pour le programme, ce qui signifie qu'un simple éditeur de texte, comme on peut le trouver sur n'importe quel système d'exploitation, est tout à fait suffisant. De l'autre, les applications HTML dédiées permettent des simplifications considérables dans l'écriture du code. Alors quelle sont les meilleures options pour apprendre le HTML ?
Éditeurs de texte simples
Vous n'avez pas besoin de logiciels sophistiqués pour écrire du code HTML. Un éditeur simple tel que l'éditeur Windows, également connu sous le nom de Notepad, ou son équivalent sur Mac TextEdit (en mode texte brut) sont des bases suffisantes. Vous n'aurez certes pas la possibilité de modifier la mise en page du texte, mais ceci revient toutefois directement au formatage HTML. Vous pouvez aussi en principe utiliser des programmes de traitement de texte tels que Microsoft Word ou OpenOffice Writer, mais vous ne pourrez profiter de leurs fonctionnalités additionnelles en apprenant du HTML. Dans certains cas, des fonctions superflues peuvent même vous ralentir dans votre apprentissage. Pour vos premiers pas dans l’apprentissage des bases HTML, vous pouvez donc préférablement utiliser un éditeur de texte simple préinstallé par défaut sur votre système d'exploitation.
Editeurs HTML
Outre les éditeurs simples et les programmes de traitement de texte complexes, il existe également des éditeurs spéciaux qui peuvent offrir une aide précieuse : des applications vont par exemple mettre en évidence des balises syntaxiques en couleur, ce qui donne une très bonne vue d'ensemble du code écrit. De plus, les erreurs de syntaxe sont également souvent détectées. Une autre caractéristique usuelle est l'auto-complétion, qui soumet des suggestions pour étendre ou compléter votre code lorsque vous écrivez des balises HTML et qui notamment ajoute automatiquement les balises de fin. De plus, les éditeurs HTML ont souvent une fonction de prévisualisation qui permet d’examiner votre travail en cours grâce à un simple clic. Un bon éditeur pour les utilisateurs Windows est par exemple l'éditeur gratuit sous licence GPL Notepad++. Pour les systèmes de type Unix, une solution gratuite est disponible avec Vim.
Editeurs HTML avec affichage d'images
Une option d'éditeur, qui a son propre attrait et qui est intégrée dans presque tous les systèmes modulaires et systèmes de gestion de contenu, est la représentation d'images réelles, mieux connu sous le nom d’éditeurs WYSIWYG. L'acronyme définit l'idée de base de ces programmes, à savoir „What You See Is What You Get“ (ce que vous voyez est ce que vous obtenez). Ces éditeurs ont été développés spécifiquement pour générer du code HTML, mais nécessitent peu de connaissance du langage de balisage. Comme dans un programme de traitement de texte, vous structurez votre texte à l'aide de boutons prédéfinis dans le menu sans définir une seule balise HTML. Pour apprendre le HTML, ces éditeurs, comme par exemple BlueGriffon ne sont pas adaptés, même si vous pouvez visualiser le code généré à tout moment.
Création de la première page HTML
Dans cette première étape de notre tutoriel HTML, nous vous invitons à créer une première page simple que vous pourrez afficher à l'aide de votre navigateur. Cependant, il ne s'agit pas encore d'une page HTML valide structurée selon certaines normes, mais d'une page de test. Pour créer cette page et pour l’ensemble des exemples HTML de ce tutoriel, nous avons décidé d'utiliser l'éditeur Notepad++ déjà mentionné ci-dessus. Si vous utilisez un autre programme, la procédure peut différer légèrement.
Ouvrez d'abord l'éditeur et enregistrez le nouveau fichier sous le nom test. Sélectionnez "Fichier Hypertext Markup Language" comme format de fichier, afin que le navigateur sache plus tard qu'il s'agit d'une page HTML. Autrement, si vous utilisez un éditeur simple, vous devez sélectionner le type « Tous les fichiers » (codage: UTF-8) et spécifier qu’il s’agit d’une page HTML directement dans le champ "Nom du fichier" en effectuant la sauvegarde sous le nom test.html.
L’icône du fichier généré va afficher votre navigateur Web. Vous pouvez ouvrir la page en double-cliquant sur l’icône, mais comme vous n’avez pas encore saisi de contenu, vous ne verrez qu'une page blanche. Maintenant, ajoutez un petit texte test, par exemple "Ceci est ma première page HTML", enregistrez le document, et ouvrez à nouveau le fichier test.html. Le résultat en anglais devrait ressembler à ceci :
HTML : Les bases de structuration de texte
On peut ainsi continuer à insérer du texte et tenter de créer son site Web de cette manière, même sans balisage HTML. Cependant, si vous souhaitez maintenant structurer votre texte à l’aide de titres et paragraphes, vous constaterez que les balises deviennent indispensables. Le formatage que vous effectuez dans un programme de traitement de texte par exemple, disparaît dans l’aperçu navigateur : les saut de page sont automatiquement supprimés, les séries d’espaces réduits, etc.
Définissez les paragraphes de texte à l'aide de la balise <p>
Pour définir des paragraphes, vous avez besoin de la balise <p> (ce qui est simple à retenir, p = paragraphe). On a donc une première balise marquant le début du paragraphe, puis une autre marquant la fin. Le texte de ce paragraphe se trouve à l'intérieur des deux marqueurs. Dans toutes les versions HTML (sauf XHTML) la balise finale est optionnelle, mais tout de même recommandée, surtout si vous débutez en HTML. Vous pouvez faire le test dans votre page créée en insérant deux paragraphes comme suit :
<p>This is my first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>
Vous n’êtes pas obligé de sauter une ligne pour le changement de paragraphe. Ceci sert uniquement à rendre le code plus clair. Vous pouvez écrire les éléments <p> les uns après les autres sur une seule ligne.
Définir les titres : la balise <h>
Les titres sont très importants dans la structure d’un site Web. Avec le HTML, vous avez non seulement la possibilité de les marquer en général, mais vous pouvez également définir une hiérarchie claire pour tous les titres et sous-titres utilisés. Vous avez ainsi des balises de <h1> à <h6> (« h » pour heading en anglais), avec <h1> représentant le titre principal de la page Web. Ce dernier ne doit être utilisé qu’une fois, contrairement aux autres titres <h2> et ainsi de suite. Il est important de respecter l'ordre hiérarchique des balises et de ne pas sauter aléatoirement entre les différents niveaux, afin que les lecteurs et les moteurs de recherche puissent bien comprendre la structure. Pour notre page de test, nous ajoutons par exemple un titre principal et un premier sous-titre :
<h1>Main heading: my first webpage</h1>
<p>This is my first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>
Comme le document HTML est une version très simplifiée sans méta-information, certains navigateurs comme Firefox n'affichent pas les accents correctement. Pour tester, vous pouvez donc d'abord utiliser Google Chrome ou utiliser les codes d’écriture HTML. Pour écrire « é » par exemple, il faudra utiliser le code é, tandis que cette même lettre en majuscule sera possible grâce à É.
Mise en valeur de passages et de mots avec <i>, <em>, <b> et <strong>
Une autre base des plus essentielles en HTML est la possibilité de mettre en évidence des extraits de texte ou des mots de manière spécifique. Vous pouvez ainsi orienter le regard du lecteur vers des éléments de contenu ou des éléments de texte importants. Par exemple, avec les balises <i> et <em>, vous pouvez mettre en italique des phrases, des expressions ou des citations. A noter cependant, l’écriture italique ralentit la lecture en général ; il faut donc utiliser ces deux balises avec parcimonie. Les éléments <b> et <strong>, qui permettent de mettre des mots ou des extraits de texte en valeur, peuvent être en revanche plus utiles. La spécificité de la balise <strong> est de renforcer spécifiquement un élément textuel important à l’intérieur d’un contenu et d’envoyer un signal au moteur de recherche pour votre référencement naturel. Il s’agira souvent d’une mise en gras.
Pour illustrer les balises, voici notre exemple de code HTML complété :
<h1>Main heading: <i>my first webpage</i></h1>
<p>This is my <strong>first</strong> webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>: Typical example for the <b>-tag.</p>
Dans le contenu de notre page, nous avons souhaité incorporer les caractères « < » et « > » sans qu’ils ne soient pris pour du code. Nous les avons par conséquent remplacer dans le corps de texte par respectivement < et >. Pensez à faire de même avec les accents.
Dresser des listes : les énumérations avec les balises <ul>, <ol> et <li>
Les énumérations ne sont pas utiles que pour dresser des listes de courses : lorsqu'il s'agit de rédiger des textes, elles permettent de favoriser une lecture fluide et ainsi d'optimiser l'expérience utilisateur sur un site Web. HTML vous permet de créer des listes à puces ordonnées (avec numérotation) et non-ordonnées (sans numérotation). La première option est créée à l'aide de la balise <ol> (de l’anglais « ordered list ») tandis que la deuxième est créée à l'aide de <ul> (« unordered list »). Chaque point de la liste est ensuite défini avec <li>, qui ne fonctionne qu'en combinaison avec l'une des deux balises énoncées. Testez la fonctionnalité des listes HTML avec le code suivant :
<ul>
<li>first unordered-list item</li>
<li>second unordered-list item</li>
<li>third unordered-list item</li>
</ul>
Le résultat doit ressembler au suivant :
Si vous voulez transformer la liste non-ordonnée en liste numérotée, remplacez simplement <ul> par <ol> :
<ol>
<li>first ordered-list item</li>
<li>second ordered-list item</li>
<li>third ordered-list item</li>
</ol>
Des chiffres apparaissent alors à la place des points :
Structurer des données à l'aide de tableaux : <table>, <tr> et <td>
Pendant des années, il était courant d'utiliser des tableaux HTML non seulement pour présenter de manière pratique des données complexes, mais aussi pour structurer la mise en page complète d'un site Web ou de textes à plusieurs colonnes. Avec l'avènement du CSS, cette fonction est toutefois devenue de plus en plus obsolète, de sorte que les tableaux sont maintenant seulement utilisés pour préparer des données. Chaque tableau comprend au moins ces trois composantes :
- <table> : la balise <table> marque le début d’un tableau HTML. Cependant, on ne peut pas aller très loin avec cette balise seule, car elle n’indique pas le nombre de lignes ou de colonnes à prendre en compte.
- <tr> : l'élément <tr> (de l’anglais, « table row ») permet d’ajouter une ligne au tableau. Le nombre de ligne n’est pas limité.
- <td> : c’est seulement après avoir ajouté des colonnes que vous aurez enfin une structure claire de tableau. La balise <td> (de l’anglais « table data ») définit les données d’une cellule. Une balise <tr> va alors précéder l’ensemble des cellules <td> d’une même ligne. Le contenu de la cellule est fixé entre le marqueur d'ouverture <td> et le marqueur de fin </td>.
Afin de comprendre cette structure quelque peu complexe, voici un premier tableau HTML simple composé d'une seule ligne et de deux colonnes :
<table>
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>
En prévisualisant ce code HTML, il semble qu'une erreur se soit glissée et que le tableau ne fonctionne pas exactement comme souhaité. Il n’apparaît en effet pas clairement que deux colonnes séparées ont été définies, et même qu’il s’agit d’un tableau. L’explication est très simple : par défaut, les bordures des cellules du tableau HTML ne sont pas visibles. Pour les afficher, vous devez ajouter à la balise <table> l'attribut border et lui octroyer la valeur 1 :
<table border="1">
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>
Actualisez votre page HTML dans votre navigateur, vous verrez apparaître une disposition pour votre tableau plus familière.
HTML5 ne prend plus en charge l'attribut border. Pour effectuer des bordures de cellules, il faut donc se tourner vers CSS.
HTML vous permet par ailleurs de mettre en valeur les titres des colonnes. Pour ce faire, il est nécessaire d’encadrer le bloc à mettre en valeur par la balise <thead> et de remplacer les marqueurs <td> des cellules de données par les balises <th>. Ci-dessous un exemple de code HTML pour créer un tableau de quatre lignes (en-tête comprise) et trois colonnes :
<table border="1">
<thead>
<tr>
<th>Column heading 1</th>
<th> Column heading 2</th>
<th> Column heading 3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
La structure de base des pages Web HTML
Dans cette section de notre tutoriel HTML, nous parlerons de la structure générale d'un site Web. Les documents HTML contiennent non seulement du texte, des liens et d'autres contenus spécifiques tels que des images et vidéos, mais aussi des métadonnées (comme déjà mentionnées), qui indiquent au navigateur, mais aussi aux robots des moteurs de recherche comment lire les pages. Certaines de ces informations ne sont aucunement visibles pour un visiteur accédant à une page Web ; d’autres en revanche, apparaissent dans la barre de titre de la fenêtre du navigateur, dans les onglets, ou encore comme titre sur les résultats de moteur de recherche.
Réduit au minimum nécessaire, le code de base d'une page HTML ressemble à ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Vous trouverez ici des informations sur la structure de base de HTML ">
<title>Apprendre le HTML : les bases</title>
</head>
<body>
</body>
</html>
Le fichier se compose donc des trois éléments DOCTYPE, head et body. Le premier composant, qui définit le type de document, va précéder la balise <html> afin d’informer les applications qui interpréteront le document du standard auquel vous vous êtes tenu à sa création, en l'occurrence HTML5. Ce dernier type de document est reconnu par tout navigateur ; en outre, il vous permet d'utiliser les codes HTML5 actuels et les codes HTML anciens. Nous vous conseillons donc de l'utiliser, surtout si vous êtes en plein apprentissage de HTML.
Dans la section suivante <head>, vous pouvez noter les données d'en-tête de votre fichier HTML. Il s'agit, par exemple, de l'encodage des caractères que le navigateur doit utiliser (meta charset), de la méta-description pour les moteurs de recherche (meta name="description") ou du titre de la page Web (<title>) qui apparaîtra dans l'en-tête du navigateur. Un nombre considérable de métadonnées peut être inséré. Les informations insérées dans notre exemple sont en réalité facultatives mais nous les recommandons pour optimiser votre classement dans les moteurs de recherche. La balise <titre> en revanche est, avec le type de document, le seul élément obligatoire d'une page HTML. Dans l'en-tête, vous pourrez définir plus tard le lien vers votre fichier CSS, dans lequel la conception du site Web est définie. La section <body> par ailleurs contient ce qui sera affiché à la fin dans le navigateur de l'utilisateur.
Les balises dédiées à la structure HTML de base sont facultatives et il n’est donc pas nécessaire de vous en occuper. Si vous les avez omis, le navigateur génère en effet automatiquement les balises <html>, <head> et <body>. Cependant, il est tout de même d'usage de fournir ces informations vous-même. De plus, cette structuration facilite la lecture du document, ce qui est particulièrement utile pour les débutants en HTML.
Intégrer des images, photos et graphiques dans vos pages Web
Les contenus textuels constituent incontestablement la partie la plus importante des pages HTML usuelles. Cependant, vous améliorerez nettement l’expérience de vos utilisateurs à l’aide d'images, de photos ou de graphiques. Ces éléments sont donc tout aussi indispensables pour une présence Web réussie. Voici trois formats d’images couramment utilisés et qui sont supportés par tous les navigateurs courants :
- JPG : pour les photos ou les graphiques de haute qualité aux contrastes forts et d’une grande diversité de couleurs, le format JPG est généralement utilisé. Cela permet d'afficher plus de 16 millions de couleurs et de bien compresser des fichiers (bien que ceci implique une perte de qualité).
- PNG : graphiques et logos s’enregistrent idéalement au format PNG, qui peut afficher 256 (PNG8) à 16,7 millions de couleurs (PNG24). Contrairement au JPG, le PNG compresse sans perdre en qualité, mais la taille du fichier est toutefois conséquente.
- GIF : les fichiers GIF peuvent afficher seulement 256 couleurs, mais sont toujours en demande dans le développement Web, car ils permettent de bien rendre de petites animations, des éléments de navigation ou des graphiques simples.
Indépendamment des questions de format, les images sont insérées aux pages HTML grâce à la balise <img>. Il est alors nécessaire de spécifier l'emplacement de stockage de l'image pour que le navigateur puisse logiquement la trouver et l'afficher. Pour cela, vous avez besoin de l'attribut src (pour source) et du chemin d'accès du fichier de l’image. Créez simplement un sous-dossier "Images" dans le dossier de votre site Web (contenant également le document HTML) et stockez-y toutes les images utiles. Pour exemple dans ce tutoriel HTML, notre fichier est appelé grafique1.png et se trouve dans le dossier nommé "Images". Le code pour intégrer ce graphique sera donc le suivant :
<img src="images/grafique1.png" />
Pour les images, il existe toutefois d'autres attributs qui peuvent être essentiels pour votre projet. Il pourra par exemple s’agir de spécifier la largeur (width) et la hauteur (height) de l'image. Grâce à ces valeurs, le navigateur peut réserver une place de la taille demandée dans le site Web jusqu'à ce que l'image soit réellement intégrée. Cela signifie qu'il peut afficher d’autres contenus dans la fenêtre du navigateur sans avoir à compléter le processus de chargement du fichier d’image, ce qui accélère le temps de chargement général du site Web. D'autre part, il existe l'attribut alt avec lequel vous pouvez définir un texte alternatif pour l'image. Vous devriez y penser, car cela…
- contribue à une meilleure accessibilité du site notamment pour les utilisateurs malvoyants ou en cas de difficultés de chargement du fichier d’image.
- aide les crawlers des moteurs de recherche à classer l'image et compte également comme contenu supplémentaire.
- est prescrit dans les spécifications HTML.
Avec les attributs énoncés ci-dessus, le code HTML va pouvoir ressembler à ceci :
<img src="images/grafique1.png" width="960" height="274" alt="Apprendre le HTML: voici le graphique 'Click here'" />
Les valeurs utilisées ici pour la largeur (960) et la hauteur (274) sont les dimensions originales du graphique de notre exemple. Par défaut, le navigateur calcule automatiquement la taille en pixels.
Créer des liens : le rôle primordial des hyperliens
Les hyperliens, mieux connus sous leur nom raccourci "liens", expliquent en partie le succès incroyable du World Wide Web. Sans ces liens électroniques, qui amènent les utilisateurs vers un autre site Web ou qui déclenchent une action spécifique telle que le téléchargement, il ne serait pas possible d'établir les si-hautes interconnexions qu’offre le Web. Il existe trois types de liens:
- Liens internes : les liens internes permettent de structurer l'ensemble d’un site et d’orienter les visiteurs. Vous pouvez alors mettre en place différentes structures. Avec une structure linéaire, l'utilisateur va par exemple pouvoir naviguer d'une page à l'autre dans un certain ordre, tandis qu’avec une structure arborescente, une page de départ mènera à diverses sous-pages. Vous pouvez également définir des liens internes à l'intérieur d'une même page, afin de passer plus facilement d’une rubrique à une autre, ou pour revenir en un clic au début de la page, comme on l’observe fréquemment dans les FAQ.
- Liens externes : les liens externes correspondent à un envoi vers un autre projet Web. Ce type de liens est utilisé pour recommander par exemple une page intéressante en rapport avec votre sujet. Il doit apporter une valeur ajoutée à votre site. Cependant, assurez-vous que vous ne placez pas trop de liens sortants et que ces derniers sont dignes de confiance. Sinon, votre appréciation sur les moteurs de recherche risque de se détériorer.
- Autres liens : tous les liens ne renvoient pas obligatoirement à des documents HTML. Selon les situations, cliquer sur un lien peut également déclencher un téléchargement, ouvrir le service de messagerie ou activer le lecteur PDF.
Liens internes : Comment créer des liens entre les pages de votre site Web
Alors qu'à un stade ultérieur de votre apprentissage HTML, vous aurez très probablement plaisir à développer une structure de liens complexes pour votre site Web, ce cours accéléré HTML traitera tout d'abord d'un simple lien interne entre deux pages. Outre le fichier test.html déjà créé, il est nécessaire de concevoir un autre document HTML. Assurez-vous de donner à ce deuxième fichier un nom différent, par exemple pagededestination.html, et qu'il se trouve dans le même répertoire que la page de test.
Pour créer un lien, vous avez besoin de la balise HTML <a> (pour « anchor » en anglais), qui sert seulement à indiquer qu’il s’agit d’un lien. Pour cette raison, il ne peut pas être autonome, mais nécessite un attribut href (Hyperreferenz) qui spécifie la cible du lien. L’adresse du lien, que le navigateur affiche souligné en bleu par défaut, est insérée entre l’élément d'ouverture et de fermeture <a>. Définissez un premier lien interne pour la page test.html en ajoutant la ligne de code suivante :
<a href="pagededestination.html">Lien vers la page cible</a>
Si vous n’avez pas encore ajouté de contenu dans la page de destination, votre lien mènera vers une page blanche. Ajoutez alors un autre lien interne à ce document pour revenir à la page d'origine en un clic :
<a href="test.html">Revenir page précédente</a>
Si la page cible n'est pas dans votre répertoire principal, entrez simplement le chemin d’emplacement du sous-répertoire correspondant, par exemple sousrepertoire/pagededestination.html. Vous pourrez alors revenir avec <a href="https://www.ionos.fr/digitalguide/../test.html">.
Liens externes : renvoyer au contenu d'autres sites Web
Si vous souhaitez ajouter un lien externe à vos pages, vous n'avez ni besoin d’insérer une balise différente du lien interne, ni de savoir dans quel répertoire la page à relier est enregistrée. Pour renvoyer à un contenu externe, vous n’aurez besoin que de spécifier son URL complète car cette dernière contient automatiquement toutes les informations requises. Étant donné que les contenus vers lesquels vous renvoyez ne se trouvent pas sur votre propre serveur Web, vous n'avez aucune influence sur la fonctionnalité de ces liens externes, et devez donc les vérifier régulièrement. De manière générale, lorsque vous formulez un texte de lien, essayez de le rendre significatif. Les formules bateau comme « cliquez sur ce lien » ou « ici » ne donnent pas au visiteur des informations très pertinentes sur ce qui se cache derrière. Voici pour exemple, des lignes de code d’un lien externe redirigeant vers notre guide digital :
<p>Tutoriel HTML en francais et articles de conseils sur les sites Web, l’hebergement etc. dans le
<a href="https://www.ionos.fr/digitalguide/">guide digital IONOS </a>
</p>
Prudence toutefois : avec les liens externes, vous détournez l’attention des visiteurs de votre site Web. Bien sûr, ces derniers peuvent revenir à tout moment en cliquant sur le bouton "Précédent" de leur navigateur, mais si la nouvelle page est intéressante (comme on peut tout de même l’espérer), vous risquez simplement de perdre votre audience. Il est donc préférable de créer des liens externes qui ne ferment pas pour autant votre page : l'attribut target associé à un mot-clé _blank va par exemple permettre d’ouvrir automatiquement le lien dans une nouvelle fenêtre ou un nouvel onglet. Voici à quoi ressemble le code :
<a href=" https://www.ionos.fr/digitalguide/" target="_blank">Guide Digital IONOS</a>
Dernière ligne droite : comment mettre votre page HTML en ligne
Les pages tests que vous avez créées dans ce tutoriel peuvent être ouvertes tout à fait normalement sur votre ordinateur. Néanmoins, si vous transférez les URL de ces pages à des collègues ou amis afin de leur montrer le résultat, vous vous apercevrez bien vite que l’accès est erroné. Ceci s’explique par le fait que les documents HTML et les images intégrées à votre site ne sont stockés que localement sur votre PC et ne peuvent donc pas être livrés au navigateur demandeur. Pour que le monde entier puisse apprécier vos créations, vous devez d'abord enregistrer votre projet Web en ligne et fournir la structure d'hébergement appropriée.
La première étape consiste à trouver un domaine (une adresse web) pour votre site et à l'enregistrer. Ceci est possible auprès de n'importe quel fournisseur d'accès Internet. Chez IONOS, nous vous proposons également une option complète pour enregistrer votre nom de domaine. La deuxième étape consiste à mettre en place la base de votre projet Web en installant votre propre serveur ou en le louant à un hébergeur. En tant que débutant en HTML, nous vous recommandons cette dernière option : ainsi, vous n'aurez pas à vous occuper de l'installation ou de la maintenance du logiciel serveur et n’aurez qu’à choisir le pack correspondant à l'espace Web désiré afin de disposer de l'espace de stockage nécessaire pour les documents de votre projet.
Pour finir, afin de télécharger vos pages vers l'espace Web loué, vous avez généralement besoin d'un programme FTP. A l’aide de ce protocole de communication, vous pouvez échanger des données avec le serveur FTP du fournisseur. Vous trouverez dans notre guide digital quelques bons programmes FTP à connaître. La procédure à suivre et les données pour accéder au serveur FTP sont fournies directement par les fournisseurs d’hébergement.
CSS et JavaScript : pourquoi le HTML n'est qu'un début
Au cours de ce tutoriel, nous avons certes souligné que le HTML était la base de tout site Web, mais il faut bien noter que le design relève aujourd’hui d’un langage différent : en développement Web, on utilise en effet exclusivement les feuilles de style en cascade (Cascading Style Sheets soit CSS) pour les couleurs de chacun des éléments, la mise en page, la police et taille du texte ou encore bien d’autres éléments visuels. La séparation stricte du contenu et de la conception design facilite considérablement la gestion de grands projets Web. Après vous êtes mis au HTML, il est donc fortement recommandé de s’attaquer au CSS pour que vous puissiez donner à vos pages l'apparence que vous souhaitez.
Un autre composant très apprécié dans le développement Web et que nous n’avons pas encore mentionné est JavaScript. En utilisant ce langage de script, vous pouvez ajouter des éléments dynamiques à vos pages HTML afin de permettre à vos visiteurs d'interagir. Il peut s'agir de galeries d'images, de menus de navigation dynamiques ou du chargement de données externes. Pour JavaScript et CSS, vous trouverez de nombreux extraits de code déjà écrits en ligne, que vous pouvez intégrer directement dans vos documents (CSS et JavaScript) sans avoir à concevoir vos propres scripts. Cependant, il faut tout de même d'abord connaître les principes de base de ces deux langages Web afin d'utiliser correctement les lignes de code et pouvoir rechercher les erreurs en cas de problèmes.
Articles similaires
Introduction à HTML5
HTML5 est le nouveau langage noyau d’Internet. Cependant, certains développeurs Web ont encore recours à l’ancien langage de balise tels que HTML 4.01 voire XHTML. Ces derniers exigent souvent un certain nombre de plugins externes qui peuvent mettre en danger tant la sécurité d’un site Internet que sa compatibilité. A l’inverse, HTML5 permet une intégration directe d’éléments multimédia et…
Quelles nouveautés propose HTML 5.1 ?
Il a fallu attendre longtemps pour que HTML5 fasse son apparition en automne 2014. Sa première mise à jour, HTML 5.1, est désormais sortie. Elle apporte alors de nombreux changements : par-dessus tout, la une mise en place plus simple du responsive Web design est au cœur des attentions. Mais il faut ajouter à cela non seulement de nombreuses nouveautés HTML, mais aussi des attributs et éléments…
Compresser des fichiers CSS pour améliorer la performance
Il est rare de trouver des données qui permettent la mise en page d’un site dans des codes HTML. Les couleurs, les polices voire les tailles de ces éléments HTML sont de plus en plus souvent définies dans des feuilles de style telles que CSS. Lorsqu’un site Internet devient complexe, on constate souvent qu’il y a de plus en plus de fichiers CSS inutiles, et cela peut avoir un effet très négatif…
lucadpShutterstock Compilateur et interpréteur : explications et différence
Au fil des ans, les langages de programmation ont été constamment simplifiés afin de permettre un apprentissage et une utilisation aussi faciles que possible. Ces simplifications ont en commun de permettre une meilleure lisibilité du code écrit avec le langage correspondant. Afin de permettre sa lecture ultérieure par les processeurs, des compilateurs ou des interpréteurs sont nécessaires pour le…
Apprendre le HTML : faire ses premiers pas avec ce langage Web standard
Avec la multiplication des systèmes de gestion de contenu et systèmes modulaires pour sites Web, on a vite l'impression qu’apprendre du HTML est une perte de temps. Mais tôt ou tard, si une page de votre site ne fonctionne plus ou si des éléments dynamiques doivent être ajoutés, vous ne pourrez aller très loin sans connaissance du langage Web. Dans ce tutoriel HTML, nous vous présenterons donc les…
