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.

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.

Précédent4 Introduction HTML Suivant6 Bonnes pratiques

Dernière mise à jour il y a 5 mois

# :hand: créer la structure de base

# meta tags

# :hand: Créer une navigation

# IDs et Classes