Close
Balises Sémantiques :
<header> : Définit l’en-tête d’une section ou d’une page.<nav> : Contient les liens de navigation.<main> : Contient le contenu principal du document.<article> : Contient un contenu indépendant et autonome.<section> : Regroupe les contenus thématiquement liés.<footer> : Définit le pied de page d’une section ou d’une page.Balises essentielles :
<!DOCTYPE html> : Déclare le type de document comme HTML5.<html> : L’élément racine qui contient tout le contenu HTML.<head> : Contient les méta-informations et le titre de la page.<title> : Définit le titre de la page affiché dans l’onglet du navigateur.<body> : Contient le contenu visible de la page.<div> : Une division ou une section du document.<h1> - <h6> : Balises de titres, avec <h1> pour le titre principal et <h6> pour les sous-titres moins importants.<p> : Définit un paragraphe.<span> : Une balise en ligne utilisée pour regrouper du texte pour le style.<a> : Définit un hyperlien.<img> : Intègre une image.<ul> : Définit une liste non ordonnée.<ol> : Définit une liste ordonnée.<li> : Définit un élément de liste (utilisé à l’intérieur de <ul> ou <ol>).
Structure de base d’un document HTML.
<!DOCTYPE html>
<html>
<head>
<title>Les bases</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site web</h1>
<nav>
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#galerie">Galerie</a></li>
<li><a href="#fonctionnalites">Fonctionnalités</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="presentation">
<h2>Section 1 : Présentation</h2>
<p>Voici un paragraphe <span>important</span> avec un lien vers un site externe.</p>
<a href="https://www.example.com">Visitez Example</a>
</section>
<section id="galerie">
<h3>Section 2 : Galerie</h3>
<p>Voici une image :</p>
<img src="image.jpg" alt="Description de l'image">
</section>
<section id="fonctionnalites">
<h4>Section 3 : Liste des fonctionnalités</h4>
<p>Voici une liste non ordonnée :</p>
<ul>
<li>Fonctionnalité 1</li>
<li>Fonctionnalité 2</li>
<li>Fonctionnalité 3</li>
</ul>
<p>Voici une liste ordonnée :</p>
<ol>
<li>Première étape</li>
<li>Deuxième étape</li>
<li>Troisième étape</li>
</ol>
</section>
<section id="contact">
<h5>Section 4 : Contact</h5>
<p>Pour plus d'informations, contactez-nous via cet <a href="mailto:info@example.com">email</a>.</p>
</section>
</main>
<footer>
<p>© 2024 Mon Site Web</p>
</footer>
</body>
</html>
class et id
id : Utilisé pour identifier un élément unique sur une page. Chaque id doit être unique.class : Utilisé pour identifier un ou plusieurs éléments. Plusieurs éléments peuvent partager la même classe. <div id="id-unique">Ceci est un élément unique.</div>
<div class="shared-class">Ceci est un élément partagé 1.</div>
<div class="shared-class">Ceci est un élément partagé 2.</div>
href pour les liens : Utilisé pour spécifier l’URL de la destination du lien.title : Fournit des informations supplémentaires affichées comme infobulle.<a href="https://www.monsite.com" title="Visitez MonSite">Visitez MonSite</a>
src pour les images : Utilisé pour spécifier la source du fichier d’image.alt pour les images : Fournit une description alternative de l’image pour les lecteurs d’écran et les moteurs de recherche.<img src="image.jpg" alt="Description de l'image"><form action="/submit" method="post"> : Déclare un formulaire qui envoie les données à l’URL /submit en utilisant la méthode POST.<label for="name">Nom :</label> : Crée une étiquette pour le champ de saisie avec l’id name.<input type="text" id="name" name="name" placeholder="Entrez votre nom"> : Crée un champ de saisie texte avec un placeholder et un id pour l’associer à son label.<input type="email" id="email" name="email" placeholder="Entrez votre email"> : Crée un champ de saisie pour l’email avec un placeholder.<textarea id="message" name="message" placeholder="Tapez votre message ici"></textarea> : Crée une zone de texte pour entrer un message avec un placeholder.<input type="submit" value="Soumettre"> : Crée un bouton de soumission avec le texte « Soumettre ».<form action="/submit" method="post">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" placeholder="Entrez votre nom">
<label for="email">Email :</label>
<input type="email" id="email" name="email" placeholder="Entrez votre email">
<label for="message">Message :</label>
<textarea id="message" name="message" placeholder="Tapez votre message ici"></textarea>
<input type="submit" value="Soumettre">
</form><table> : Définit une table.<tr> : Définit une ligne de table.<td> : Définit une cellule de table.<th> : Définit une cellule d’en-tête de table.colspan et rowspan : Fusionnent des cellules sur plusieurs colonnes ou lignes.<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Prescilia</td>
<td>30</td>
</tr>
<tr>
<td>Marie</td>
<td>25</td>
</tr>
</table>
Les commentaires dans le code sont essentiels pour plusieurs raisons, en particulier pour les débutants. Il faut que le commentaire soit clair et compréhensible. Les commentaires aident à expliquer ce que fait le code, le rendant plus facile à comprendre pour vous-même et pour les autres, même après un certain temps.
<!-- Ceci est un commentaire, il explique la raison d'être de ce qui suit -->data-*)data-* pour stocker des informations personnalisées sur des éléments HTML.<div data-role="admin" data-id="12345">Utilisateur Admin</div><a href="#section1">Aller à la section 1</a>
...
<h2 id="section1">Section 1</h2>
<audio> : Intègre un fichier audio.<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<video> : Intègre un fichier vidéo.<video controls>
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas l'élément vidéo.
</video>
Vous avez maintenant une vue d’ensemble des bases du HTML, y compris la structure des documents, la création d’éléments, l’insertion de médias, et l’utilisation des attributs. Le HTML est la pierre angulaire de la création de pages web, fournissant la structure et le contenu qui seront ensuite stylisés avec CSS et rendus interactifs avec JavaScript. Maîtriser les fondamentaux du HTML est essentiel pour toute personne souhaitant développer ou concevoir des sites web.
Pour aller plus loin et approfondir vos connaissances en SQL, voici quelques ressources utiles :
