Des éditeurs pour créer les pages
Un IDE est là pour vous faciliter la vie ! Quelques étapes pour créer un environnement de travail efficace :
- Téléchargez puis installez Visual Studio Code
- Ouvrez via le menu Fichier Open > Open folder le dossier Exercices-Html5 pour visualiser l’ensemble des fichiers présents
- Créez un nouveau fichier via le menu Fichier > Nouveau fichier…
- Tapez l’extension
htmlpuis validez avec la touche Entrée - Vous pouvez écrirequelques mots dans ce fichier puis l’enregistrer dans le sous-dossier Jour1.
- Double-cliquez sur ce fichier .html pour l’ouvrir dans le navigateur.
- A chaque modification de votre fichier Html, vous enregistrez le fichier puis rafraichissez la page de votre navigateur Ctrl + F5 ou Ctrl + R
- [BONUS] Ajouter l’extension Live Server. Il est recommandé d’installer l’extension Live Server pour recharger automatiquement la page à chaque sauvegarde.
Un code source minimum pour démarrer
Toute page HTML doit comporter un minimum d’informations structurantes.
<!DOCTYPE html>
<!-- la balise Html, dans laquelle je greffe l'attribut lang pour signaler la langue principale (accessibilité, SEO, synthèse vocale). -->
<html lang="fr">
<!-- la balise de tête, "le cerveau" du fichier -->
<head>
<!-- Métadonnées indispensables -->
<meta charset="utf-8" /> <!-- Obligatoire : encodage universel (accents), toujours en première position -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Indispensable en responsive : adapte la mise à l’échelle sur mobile -->
<!-- Métadonnées conseillées -->
<meta name="description" content="Cours HTML : première page" /> <!-- le résumé de lapage (≈ 160 caractères) affiché sur Google/Bing -->
<meta name="author" content="Prénom Nom de l'auteur de la page" >
<title>Ma première page HTML !</title> <!-- Le titre visible dans l’onglet/navigateur ; pris en compte par les moteurs de recherche -->
</head>
<!-- le contenu de la page, tout ce qui sera affiché dans le navigateur -->
<body>
<h1>Hello, HTML5 !</h1>
<p>Ceci est mon tout premier document.</p>
</body>
</html>
Des balises pour structurer
Une page Web est constituée de balises. Elles ne sont pas visibles à l’écran mais s’adressent aux navigateurs. Leur rôle est de fournir une indication sur la nature du texte (un titre, un paragraphe, une liste…)
Des balises paires
<h1>EXEMPLES DE BALISES DOUBLES :</h1>
<p>La balise paragraphe</p>
<h1>Les balises de titre de premier niveau</h1>
<h2>Les balises de titre de deuxième niveau</h2>
<h3>Les balises de titre de troisième niveau</h3>
<h4>(et ainsi de suite jusqu'à h5)</h4>
<blockquote>La balise citation</blockquote>
<div>La balise de "boite" neutre</div>
<ul>La balise de liste (ici non numérotée)</ul>
<li>... avec à l'intérieur les balises pour chaque item </li>
<a>Essentielle : la balise de lien </a>
...Des balises auto-fermantes
<h1>EXEMPLES DE BALISES SIMPLES :</h1>
<br><!--Je suis un retour à la ligne -->
<hr><!--Je suis un filet séparateur -->
<img src=""><!--Je suis une image -->
<input><!--Je suis un champs de saisie -->
...Des attributs à l’intérieur des balises
<h1>EXEMPLES D'ATTRIBUTS :</h1>
<img src="adresse-de-mon-image.jpg" alt="La description de mon image">
<a href="www.monsite.fr">J'indique où me mène mon lien</a>
<div id="monId">J'ajoute un identifiant à ma balise</div>
<button type="submit" value="Submit">Je précise le type de bouton et sa valeur</button>
...
Les commentaires
<!-- J'insère mon commentaire avant mon code, je renseigne ma démarche -->
<h1>Je n'oublie JAMAIS de commenter mon code :</h1>Les éditeurs sont là pour vous aider !
Les IDE sont précisément là pour vous aider à mieux visualiser l’imbrication de vos balises, à éviter les erreurs d’ortho de code et à faciliter la saisie.
Les nouveautés du Htlm5
De nouvelles balises ont été introduites avec le Html5, dédiées à la structuration sémantique de la page. Elles ont été mises en place pour définir plus clairement la nature du contenu. Attention, il s’agit dans chaque cas de balises doubles !
- L’en-tête header>
- Le pied de page footer>
- La navigation principale nav>
- Les sections section>
- Les articles article>
- Les infos complémentaires aside>
Ressources & références
- Microsoft Visual StudioRessource
- Sublim TextRessource
- Notepad++Ressource
- Les recommandations de la W3CArticle
- AlsaCreations : Les balises MetaArticle
- Liste des caractères spéciauxArticle
- Developper Mozilla : inventaire des balisesArticle
- JaeTheme : liste des balises Html5Article
- W3C : nouveautés html5Article
- Microsoft : raccourcis Visual StudioArticle