Explication du fichier HTML de base
Bon, maintenant qu'on a créé notre fichier index.html, c'est l'heure d'une petite dissection ! Ne vous inquiétez pas, aucun HTML ne sera blessé durant cette opération.
Voyons ce que tout ça signifie :
- <!DOCTYPE html> : C'est comme dire "Attention, contenu HTML en approche !" au navigateur. Sans ça, le navigateur pourrait penser que vous lui envoyez une recette de cuisine.
- <html lang="en"> : C'est le début de votre document HTML. Le lang="en" indique que la page est en anglais. Si vous écrivez en français, vous pouvez mettre lang="fr". C'est comme mettre une étiquette "Je parle français" sur votre site.
- <head> : C'est le cerveau de votre page. On y met toutes les informations importantes que le navigateur doit savoir, mais que l'utilisateur ne voit pas directement.
- <meta charset="UTF-8"> : Ça dit au navigateur comment lire les caractères de votre page. C'est un peu comme choisir le bon décodeur pour comprendre un message secret.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Cette ligne permet à votre site de s'adapter à la taille de l'écran. C'est comme avoir un t-shirt qui s'ajuste magiquement à toutes les tailles !
- <title> : C'est le titre qui apparaît dans l'onglet du navigateur. Pour l'instant, c'est "Document", ce qui n'est pas très excitant. On changera ça plus tard !
- <body> : C'est là que toute la magie opère ! Tout ce que vous mettez ici sera visible sur votre page web.
Création de votre page de profil !
Allez, on va créer quelque chose de cool : votre propre page de profil ! Ce sera comme votre carte de visite sur le web, mais en mieux (et sans avoir à imprimer 500 exemplaires).
Étape 1 : Ajouter un titre à votre page
Dans votre fichier index.html, entre les balises <body>, ajoutez ceci :
Le <h1> est comme un mégaphone pour votre texte. C'est le titre le plus important de votre page. Utilisez-le avec parcimonie, comme la sauce piquante ! C'est ce qu'on appelle un titre il en existe plusieurs taille : <h2> : Ce sont des sous-titres importants qui dépendent du titre principal (<h1>). Utilisez-les pour diviser les sections principales de votre page, comme les sections "À propos" et "Contact". <h3> : Sous-titres des sections créées avec <h2>. Ils servent à détailler davantage les sous-sections, comme "Mon expérience" sous "À propos". <h4>, <h5>, et <h6> : Ces balises sont utilisées pour des sous-sections encore plus détaillées. Elles ne sont pas souvent utilisées, mais elles sont utiles pour structurer des documents très longs ou complexes. Pensez à elles comme des sous-sous-titres pour encore plus de précision.
Pourquoi Utiliser les Balises de Titre ?
Hiérarchisation du Contenu : Les titres aident à organiser le contenu de votre page en sections logiques. Cela rend la lecture et la navigation plus faciles, comme une table des matières dans un livre. Accessibilité : Les lecteurs d'écran et les outils d'assistance utilisent les balises de titre pour comprendre et naviguer dans le contenu. Les titres structurés aident à rendre votre site web plus accessible aux personnes ayant des handicaps visuels. SEO (Optimisation pour les moteurs de recherche) : Les moteurs de recherche utilisent les titres pour comprendre de quoi parle votre page. Un bon usage des balises de titre peut améliorer votre référencement et aider les gens à trouver votre site plus facilement.
Étape 2 : Ajouter des paragraphes
Ajoutons un peu plus d'informations sur vous, nous allons donc utiliser la balise <p>
Les balises <p> sont pour les paragraphes. C'est là que vous pouvez raconter votre vie... ou au moins la partie que vous voulez partager avec le monde !
Conseils pour utiliser les Paragraphes
Gardez les Paragraphes Concis : Évitez les paragraphes trop longs qui peuvent être décourageants à lire. Gardez-les courts et concis. Utilisez des Paragraphes pour Séparer des Idées : Chaque paragraphe devrait traiter d'une idée principale. Cela aide les lecteurs à suivre votre discours plus facilement. Évitez les Paragraphes Vides : Assurez-vous que vos balises <p> ne contiennent pas de texte vide. Cela peut créer des espaces inutiles sur la page.
Étape 3 : Ajouter une liste
Pour mettre en avant vos talents et compétences, rien de tel qu'une liste ! Voyons comment utiliser les balises <ul> et <li> pour créer une liste de vos compétences. Les listes sont un excellent moyen d’organiser et de présenter des informations de manière claire.
La balise <ul> crée une liste non ordonnée, ce qui signifie que les éléments de la liste seront précédés de puces. C'est parfait pour les listes où l'ordre des éléments n'est pas important. La balise <li> est utilisée pour définir chaque élément de la liste. C’est comme ajouter une ligne dans une liste de courses, mais au lieu de lait et de pain, vous y mettez vos talents et compétences.
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Pourquoi Utiliser des Listes ?
Organisation : Les listes vous aident à organiser les informations de manière claire et concise. Elles sont parfaites pour présenter des éléments sans hiérarchie spécifique, comme une liste de compétences. Lisibilité : Les listes rendent le contenu plus facile à lire. Les utilisateurs peuvent rapidement parcourir les éléments et trouver ce qu'ils cherchent. Flexibilité : Vous pouvez utiliser des listes pour tout type d’informations : compétences, tâches, étapes d’un processus, etc. Elles s'adaptent à de nombreux besoins.
Étape 4 : Ajouter des liens
Partageons : Pour que les visiteurs puissent explorer vos réseaux (ou vos comptes Steam, Spotify ...), découvrir vos projets ou même vous envoyer un message. Les liens sont comme des portes magiques qui mènent à d'autres endroits sur le web. Utilisons la balise <a> pour créer ces portes !
La balise <a> est utilisée pour créer des liens hypertextes. C'est comme un raccourci vers une autre page web, un fichier ou une autre section de la même page. Le texte entre les balises <a> est ce qui sera cliquable. L'attribut href spécifie l'adresse vers laquelle le lien doit pointer. C'est comme l'adresse d'une maison vers laquelle le lien mène. L'attribut target="_blank" indique que le lien doit s'ouvrir dans un nouvel onglet ou une nouvelle fenêtre. C'est comme ouvrir une nouvelle porte sans fermer la porte actuelle (parfait pour que les visiteurs restent sur votre page tout en explorant d'autres liens).
Étape 5 : Afficher une image
Ajoutons une touche finale avec une image de profil, pour ca on utilise <img>
Expliquons un peu cette balise <img> : <img> : C'est la balise qui dit "Hé, mets une image ici !". C'est comme accrocher un cadre sur le mur de votre site. src="images/michel_dev.jpg" : C'est l'adresse de votre image. Assurez-vous que votre image est bien dans un dossier "images" à côté de votre fichier HTML, sinon votre site va avoir l'air triste avec une icône "image cassée". alt="..." : C'est le texte alternatif. Il s'affiche si l'image ne se charge pas, ou pour les personnes qui utilisent des lecteurs d'écran. C'est tres important de l'ajouter. Voilà ! Vous avez maintenant une page de profil qui déchire ! 🎉 Elle contient un titre, des paragraphes pour parler de vous, une liste de vos compétences (réelles ou imaginaires), des liens vers vos réseaux sociaux, et même une belle photo de vous en pleine action de codage (ou de sieste, on ne juge pas).
Bonus : Personnaliser le titre de la page
Oh, j'ai failli oublier ! Rappelez-vous de ce triste "Document" dans l'onglet de votre navigateur ? Changeons ça ! Dans la partie de votre HTML, trouvez la ligne avec
Eh, mais c'est quoi ce truc-là ?
Alors ça Michel, c'est ce qu'on appelle un commentaire. Tu peux en mettre où tu veux dans ta page, et il ne sera visible que dans ton code. Ça te permet de te laisser des rappels pour les prochaines fois où tu viendras ouvrir ton code, ou alors pour les autres développeurs qui viendront améliorer ton code. C'est utile quand tu dois expliquer quelque chose lié à ton code. Bon, maintenant, quand quelqu'un ouvrira votre page, il verra immédiatement que vous êtes un développeur avec de l'humour. C'est comme mettre une pancarte amusante sur la porte de votre maison ! N'oubliez pas de sauvegarder votre fichier et de l'admirer avec Live Server. Félicitation, vous venez de créer quelque chose à partir de rien ! ✨
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Passer au chapitre suivant :