¶ TP Web : Création d'une page d'accueil personnalisée pour ton navigateur
¶ Objectif
Dans ce TP, tu vas apprendre à créer une page web simple en HTML et CSS qui servira de page d'accueil à ton navigateur. Cette page contiendra des liens vers tes sites préférés sous forme de boîtes cliquables.
¶ Prérequis
- Un éditeur de texte (VS Code, Sublime Text, Notepad++, etc.)
- Un navigateur web (Chrome, Firefox, Edge, etc.)
¶ Introduction
Le HTML (HyperText Markup Language) permet de structurer le contenu d'une page web, tandis que le CSS (Cascading Style Sheets) permet de définir son apparence. Ensemble, ils constituent les fondements du développement web.
¶ Étapes de réalisation
¶ 1. Création du dossier de projet
- Crée un nouveau dossier sur ton ordinateur nommé
ma-page-accueil - Ouvre ce dossier dans ton éditeur de texte
¶ 2. Création du fichier HTML
- Crée un nouveau fichier et nomme-le
index.html - Crée la structure de base d'une page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma page d'accueil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Le contenu de ta page viendra ici -->
</body>
</html>
¶ 3. Ajout des liens dans ta page
À l'intérieur de la balise <body>, ajoute une section contenant tes liens :
<div class="container">
<h1>Ma page d'accueil</h1>
<div class="links-container">
<a href="https://zabbix.minet.net" class="link-box">Zabbix MiNET</a>
<a href="https://minet.net" class="link-box">MiNET</a>
<a href="https://google.com" class="link-box">Google</a>
<a href="https://youtube.com" class="link-box">YouTube</a>
<a href="https://ecampus.imtbs-tsp.eu" class="link-box">eCampus</a>
</div>
</div>
¶ 4. Création du fichier CSS
- Crée un nouveau fichier dans le même dossier et nomme-le
style.css - Ajoute les styles suivants :
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
.links-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.link-box {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 100px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #333;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.link-box:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.link-box:active {
transform: translateY(0);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
- Sauvegarde le fichier CSS
¶ 5. Tester ta page
- Ouvre ton navigateur web
- Appuie sur Ctrl+O (ou Cmd+O sur Mac)
- Navigue jusqu'à ton fichier
index.htmlet ouvre-le - Tu devrais voir ta page avec les liens sous forme de boîtes
¶ 6. Personnaliser les couleurs et styles
Pour personnaliser davantage ta page, tu peux modifier le fichier CSS :
- Change la couleur de fond en modifiant la propriété
background-colordans le sélecteurbody - Modifie l'apparence des boîtes en changeant les propriétés dans
.link-box - Ajuste l'espacement entre les éléments avec les propriétés
marginetpadding
¶ 7. Ajouter une favicon
- Crée ou télécharge une image carrée (par exemple 32x32 pixels) et nomme-la
favicon.ico - Place le fichier dans le même dossier que ton fichier HTML
- Ajoute cette ligne dans la section
<head>de ton fichier HTML :
<link rel="icon" href="favicon.ico" type="image/x-icon">
¶ Comment définir cette page comme page d'accueil
¶ Pour Chrome
- Ouvre Google Chrome
- Clique sur les trois points verticaux dans le coin supérieur droit
- Sélectionne "Paramètres" dans le menu déroulant
- Dans le panneau de gauche, clique sur "Au démarrage"
- Sélectionne "Ouvrir une page spécifique ou un ensemble de pages"
- Clique sur "Ajouter une nouvelle page"
- Pour utiliser ta page locale :
- Tape
file:///suivi du chemin complet vers ton fichier index.html - Par exemple
file:///home/tonNom/ma-page-accueil/index.html
- Tape
- Clique sur "Ajouter"
- Pour définir cette page comme page d'accueil lors de l'ouverture d'un nouvel onglet :
- Dans le panneau de gauche, clique sur "Apparence"
- Active l'option "Afficher le bouton d'accueil"
- Clique sur "Personnaliser les pages"
- Entre le même chemin
file:///que précédemment
¶ Pour Firefox
- Ouvre Mozilla Firefox
- Clique sur les trois barres horizontales (menu hamburger) dans le coin supérieur droit
- Sélectionne "Paramètres" dans le menu déroulant
- Fais défiler jusqu'à la section "Accueil"
- Pour la page d'accueil :
- À côté de "Page d'accueil et nouvelles fenêtres", sélectionne "Page personnalisée"
- Entre le chemin de ton fichier HTML en utilisant le format
file:/// - Par exemple
file:///home/tonNom/ma-page-accueil/index.html
- Pour les nouveaux onglets :
- À côté de "Nouveaux onglets", sélectionne "Page personnalisée"
- Entre le même chemin que précédemment
- Ferme les paramètres, les modifications sont automatiquement sauvegardées
¶ 8. Vérification et dépannage
- Ferme et rouvre ton navigateur pour vérifier que la page s'affiche correctement
- Si ta page ne s'affiche pas :
- Vérifie que le chemin saisi est correct
- Assure-toi que les fichiers HTML et CSS sont bien dans le dossier indiqué
- Sur certains systèmes, tu pourrais avoir besoin d'utiliser des barres obliques (
/) même sous Windows
¶ Ressources pour approfondir
Pour en savoir plus sur les balises HTML et les propriétés CSS, consulte :
¶ Bonus
Personnalise davantage ta page en :
- Ajoutant des icônes pour chaque lien
- Modifiant les couleurs selon tes préférences
- Ajoutant des catégories pour organiser tes liens
- Implémentant une fonction de recherche web
- Ajoutant un fond d'écran personnalisé avec la propriété
background-image - Créant un mode sombre avec un bouton pour basculer entre les thèmes