5 Structure de base HTML
Commençons par votre portfolio.
# :hand: créer la structure de base
Ouvrez le fichier index.html dans votre éditeur de code et créez la structure de base suivante de votre site web.
:memo: Note En plus des balises et du contenu, un document HTML doit toujours contenir un <!doctype html> dans la premiĂšre ligne. Comme son nom l'indique, cette ligne permet au navigateur de savoir que le document est de type HTML. |
<!doctype html>
<html lang="fr">
<!-- Zone de tĂȘte du document - visible uniquement par les navigateurs et les moteurs de recherche. Elle contient les mĂ©tadonnĂ©es -->
<head>
<!-- MĂ©ta paramĂštres -->
<meta charset="utf-8">
<meta name="language" content="fr">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta détails -->
<title>Jane Doe, concepteur et développeur</title>
<meta name="description" content="Portfolio par Jane Doe">
<!-- Fichiers CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- Zone du body du document - visible par les utilisateurs, elle contient tout ce qui est affiché sur votre page web -->
<body>
<header>
<!-- Zone d'en-tĂȘte pour la navigation, le logo, etc. -->
</header>
<main>
<!-- Zone principale pour toutes les sections -->
</main>
<footer>
<!-- Zone de pied de page pour le plan du site, l'adresse postale, etc. -->
</footer>
</body>
</html># meta tags
Les mĂ©ta-Ă©lĂ©ments contiennent des informations sur une page HTML dans le <head>, qui ne sont pas directement visibles sur le site, mais sont principalement interprĂ©tĂ©s par les moteurs de recherche. Mais il est Ă©galement possible de dĂ©finir ici le titre de la page qui est visible dans la fenĂȘtre du navigateur. Il y a d'autre type de balises. Les balises prĂ©sentĂ©es ci-dessus sont les plus importantes et sont suffisantes pour ce projet.
# :hand: Créer une navigation
Ensuite, nous allons créer une navigation pour notre site web dans la balise header. Pour cela, nous utilisons le tag ul (liste non ordonnée) avec les sous-éléments li (élément de liste). à l'intérieur de ces balises li, nous créons maintenant les liens individuels pour notre navigation.
<!-- insérer dans <header> -->
<div class="container">
<nav class="flex items-centre justify-between">
<div class="left flex justfiy-right">
<div class="logo">
<img src="./images/logo.png" width="50px" alt="logo">
</div>
<div>
<a href="#">Home</a>
<a href="#about">A propos</a>
<a href="#service">Services</a>
<a href="blog.htm">Blog</a></li>
</div>
</div>
<div class="right">
<button class="btn btn-primary">Contact</button>
</div>
</nav>
</div># IDs et Classes
Les ID et les Classes permettent de cibler des éléments HTML. Par exemple, si vous voulez attribuer une couleur de fond distincte à un seul paragraphe sans affecter toutes les autres balises p, vous pouvez attribuer une classe à l'élément correspondant.
Les ID sont généralement utilisés lorsque l'élément n'apparaßt qu'une seule fois dans le DOM.
Les classes, en revanche, peuvent ĂȘtre utilisĂ©es plusieurs fois au sein d'une mĂȘme page. Cela est particuliĂšrement utile lorsque l'on utilise certaines balises CSS pour plusieurs Ă©lĂ©ments, par exemple.
<div id="unique_element">Contenu</div>.
<div class="multiple_element">contenu</div>.Dans la pratique, les class sont utilisĂ©s chaque fois que cela est possible. Les ID ne sont en rĂ©alitĂ© utilisĂ©s que pour les navigations Ă l'ancre (en sautant sur la mĂȘme page que dans votre portfolio) et dans le contexte du javascript.
DerniĂšre mise Ă jour