Dans ce laboratoire (lab), les participants apprendront à créer des hyperliens et une navigation à l'aide des balises HTML <a>, en se concentrant sur la construction d'une structure de page web complète et la mise en œuvre de diverses techniques de liaison. Le laboratoire guide les étudiants dans la configuration d'une page HTML de base, la création de liens de navigation entre pages, la mise en œuvre de liens de contact, le développement de signets de document et l'exploration du comportement des liens avec les attributs target.
Les participants commenceront par établir une structure de document HTML5 de base, puis amélioreront progressivement leurs compétences en ajoutant différents types d'hyperliens, notamment la navigation interne dans la page, les liens de contact par e-mail et par téléphone, et les références interpages. À la fin du laboratoire, les étudiants auront une bonne compréhension de l'utilisation efficace des balises d'ancre pour créer des pages web interactives et bien structurées.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/BasicStructureGroup -.-> html/viewport("Viewport Declaration")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/basic_elems -.-> lab-451037{{"Créer des hyperliens et une navigation avec les balises HTML a"}}
html/head_elems -.-> lab-451037{{"Créer des hyperliens et une navigation avec les balises HTML a"}}
html/viewport -.-> lab-451037{{"Créer des hyperliens et une navigation avec les balises HTML a"}}
html/layout -.-> lab-451037{{"Créer des hyperliens et une navigation avec les balises HTML a"}}
html/nav_links -.-> lab-451037{{"Créer des hyperliens et une navigation avec les balises HTML a"}}
html/inter_elems -.-> lab-451037{{"Créer des hyperliens et une navigation avec les balises HTML a"}}
end
Configuration de la structure de base d'une page HTML
Dans cette étape, vous apprendrez à créer une structure de base pour une page HTML, qui servira de fondation pour l'ajout d'hyperliens et de navigation. HTML (HyperText Markup Language, langage de balisage hypertexte) est le langage de balisage standard pour la création de pages web.
Tout d'abord, ouvrez le WebIDE et accédez au répertoire ~/project. Créez un nouveau fichier appelé index.html en cliquant avec le bouton droit dans l'explorateur de fichiers et en sélectionnant "New File" (Nouveau fichier).
Créons un simple document HTML5 avec la structure essentielle :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is a basic HTML page structure that we'll use to create hyperlinks.
</p>
</body>
</html>
Décortiquons les éléments clés de cette structure HTML :
<!DOCTYPE html> déclare que ceci est un document HTML5
<html> est l'élément racine de la page HTML
<head> contient les informations métadonnées (meta) sur le document
<meta charset="UTF-8"> spécifie l'encodage des caractères
<meta name="viewport"> garantit un affichage correct sur les appareils mobiles
<title> définit le titre de la page affiché dans l'onglet du navigateur
Exemple de sortie lorsque vous ouvrez ce fichier dans un navigateur :
Création de liens de navigation entre pages
Les balises <a> sont utilisées pour créer des hyperliens en HTML. La syntaxe de base pour créer un hyperlien est <a href="URL">Texte du lien</a>.
Dans cette étape, vous apprendrez à créer des liens de navigation entre différentes pages en utilisant les balises d'ancre HTML (<a>). Tout d'abord, créons des fichiers HTML supplémentaires pour démontrer la navigation entre pages.
Créez deux nouveaux fichiers dans le répertoire ~/project : about.html et contact.html.
Mettez à jour le fichier index.html pour inclure des liens de navigation :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
<p>This is the home page with navigation links.</p>
</body>
</html>
Points clés concernant la navigation entre pages :
L'attribut <a href="..."> spécifie la page de destination
Utilisez des chemins de fichiers relatifs lors de la liaison entre des pages dans le même répertoire
Chaque page inclut un menu de navigation cohérent
Exemple de sortie dans un navigateur web :
Mise en œuvre de liens de contact par e-mail et par téléphone
Dans cette étape, vous apprendrez à créer des liens cliquables pour les adresses e-mail et les numéros de téléphone en utilisant les balises d'ancre HTML. Ouvrez le fichier contact.html et mettez-le à jour avec des types de liens spéciaux.
Mettez à jour le fichier contact.html avec le contenu suivant :
Points clés concernant les liens e-mail et téléphone :
Le préfixe mailto: crée un lien e-mail qui ouvre le client e-mail par défaut
Le préfixe tel: crée un lien de numéro de téléphone qui fonctionne sur les appareils mobiles
Ces liens permettent aux utilisateurs de vous contacter facilement avec un seul clic
Exemple de sortie dans un navigateur web :
Création de signets de document au sein d'une seule page
Dans cette étape, vous apprendrez à créer des signets internes de page en utilisant les balises d'ancre HTML. Créez un nouveau fichier appelé long-document.html dans le répertoire ~/project avec le contenu suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document with Bookmarks</title>
<style>
body {
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
section {
height: 500px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Table of Contents</h1>
<nav>
<a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>
This is the first section of our long document. Click the links above to
navigate quickly.
</p>
</section>
<section id="section2">
<h2>Section 2: Main Content</h2>
<p>This is the second section with more detailed information.</p>
</section>
<section id="section3">
<h2>Section 3: Conclusion</h2>
<p>This is the final section of the document.</p>
</section>
<a href="#" style="position: fixed; bottom: 20px; right: 20px;"
>Back to Top</a
>
</body>
</html>
Points clés concernant les signets de document :
Le bloc <style> ajoute du CSS pour styliser le document, y compris la hauteur et les marges des sections. Ne vous inquiétez pas pour le CSS pour l'instant, nous le couvrirons dans des laboratoires ultérieurs.
max-width: 600px; définit la largeur maximale du document
margin: 0 auto; centre le document horizontalement
line-height: 1.6; définit l'interligne pour une meilleure lisibilité
section { height: 500px; margin-bottom: 20px; } définit la hauteur et la marge de chaque section
Utilisez les attributs id pour créer des cibles de signet.
Créez des liens avec href="#elementId" pour sauter à des sections spécifiques.
Le symbole # suivi de l'id crée un lien interne de page.
Ajoutez le fichier long-document.html à la fin des liens de navigation pour pouvoir prévisualiser le document.
Exemple de sortie dans un navigateur web :
Utilisation des attributs de cible pour le comportement des liens
Dans cette étape, vous apprendrez à connaître les attributs de cible des liens HTML qui contrôlent la manière dont les liens s'ouvrent. Créez un nouveau fichier appelé link-targets.html dans le répertoire ~/project :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Link Target Attributes</title>
</head>
<body>
<h1>Link Target Demonstration</h1>
<h2>Default Link Behavior</h2>
<p>
<a href="https://www.example.com">Normal Link</a>
(Opens in the same window)
</p>
<h2>Target Attribute Examples</h2>
<p>
<a href="https://www.example.com" target="_blank">New Tab Link</a>
(Opens in a new tab)
</p>
<h2>Multiple Target Demonstrations</h2>
<p>
<a href="https://www.example.com" target="_self">Same Window</a> |
<a href="https://www.example.com" target="_blank">New Tab</a> |
<a href="https://www.example.com" target="_parent">Parent Frame</a> |
<a href="https://www.example.com" target="_top">Full Browser Window</a>
</p>
<h2>Named Window Target</h2>
<p>
<a href="https://www.example.com" target="myWindow"
>Open in Named Window</a
>
</p>
</body>
</html>
Points clés concernant les attributs de cible des liens :
_blank : Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre
_self : Comportement par défaut, ouvre le lien dans la même fenêtre
_parent : Ouvre le lien dans le cadre parent
_top : Ouvre le lien dans la fenêtre complète du navigateur
Les cibles nommées personnalisées peuvent créer des comportements de fenêtre spécifiques
Copiez l'URL du serveur web et ajoutez /link-targets.html à la fin de l'URL pour afficher la page (nouvel onglet).
Exemple de sortie dans un navigateur web :
Résumé
Dans ce laboratoire, les participants ont appris à créer des pages web HTML complètes et à mettre en œuvre diverses techniques d'hyperliens. Le laboratoire a commencé par la mise en place d'une structure de base de page HTML5, en démontrant des éléments essentiels tels que le DOCTYPE, les balises meta et l'organisation de base du contenu. Les participants ont exploré la création de liens de navigation entre plusieurs pages, en utilisant les balises d'ancre HTML pour connecter différentes sections d'un site web.
Le laboratoire a ensuite élargi les capacités des hyperliens en présentant des techniques avancées telles que la mise en œuvre de liens de contact par e-mail et par téléphone, la création de signets de document au sein d'une seule page et la compréhension du comportement des liens grâce aux attributs de cible. Ces exercices pratiques ont offert une expérience concrète dans la construction de pages web interactives et bien structurées en utilisant les mécanismes de liaison d'HTML.
