1. Commentaire de Code
Les commentaires aident d’autres humains à lire votre code.
Vous pouvez ajouter des notes ou des explications à votre code avec la balise de commentaire : <!-- … -->
C’est une bonne pratique d’utiliser des commentaires dans votre code HTML. Ils expliquent ce que fait le code.
Les commentaires aideront les autres (et vous dans le futur !) à comprendre le code.
Les commentaires sont ignorés par les navigateurs et ne sont pas affichés sur la page web.
Vous pouvez utiliser des commentaires pour désactiver temporairement une partie de votre code afin qu’il ne soit pas affiché par le navigateur.
HTML est en langage insensible à la casse.
Cela signifie que le navigateur web comprendra les balises sous forme de majuscules et de minuscules.
Le navigateur web ignorera les espaces blancs et les sauts de ligne dans votre code. Néanmoins, c’est une bonne pratique d’organiser votre code sur différentes lignes afin qu’il soit plus facile à lire par les humains.
Les sauts de ligne dans des éléments comme le paragraphe sont ignorés par le navigateur.
Si vous devez créer un saut de ligne, vous pouvez utiliser la balise <br>. <br> forcera un saut de ligne.
Des éléments comme les titres et les paragraphes commencent automatiquement sur une nouvelle ligne lorsque vous les créez.
A retenir :
- Les commentaires rendent votre code plus facile à lire et à comprendre
- La balise <!--…--> vous permet d’ajouter des commentaires à votre code
- La balise <br> est utilisée pour créer des sauts de ligne
Dans la prochaine leçon, vous apprendrez à appliquer des normes et des meilleures pratiques sur vos projets web.
2. Normes & Meilleures Pratiques
Il y a des millions de pages sur le Web et des milliers de professionnels du Web qui conçoivent et développent des pages Web chaque jour.
Dans cette leçon, vous commencerez à appliquer certaines des normes et meilleures pratiques utilisées dans l’industrie du web.
La <body> balise conteneur est utilisée pour regrouper tout ce qui s’affiche sur une page lorsqu’elle est chargée dans un navigateur.
Les balises Body sont nécessaires pour que votre page soit compatible avec tous les navigateurs web.
Une page web peut contenir seulement un élément body.
Tous les éléments de contenu que vous devez afficher (comme les paragraphes, les titres, les butons et les images) doivent être à l’intérieur de la balise conteneur <body>.
La balise conteneur <body> doit entourer tous les éléments affichés sur la page. Lorsque certaines balises HTML se trouvent à l’intérieur d’autre, cela s’appelle l’imbrication.
Les sites web font plus que simplement afficher du contenu. La <head> balise conteneur est utilisée pour inclure des informations techniques sur la page.
Vous pouvez utiliser le head pour aider à augmenter la visibilité et trafic des moteurs de recherche comme Google.
Titre, description et mots-clés sont imbriqués dans la balise head.
La tête doit être placée avant le corps.
Les informations dans l’entête ne sont pas affichées sur la page web. Seul le titre est montré, dans les résultats des moteurs de recherche (par exemple, Google) et dans l’onglet du navigateur.
Exemple :
Aujourd’hui, la majorité des professionnels du web enveloppent toujours leur code HTML dans des <html> balises. La <html> balise est une balise conteneur. Head et body sont imbriqués à l’intérieur des <html> balises.
Indentation est considérée comme très bonne pratique pour améliorer la lisibilité du code.
Indentation ce sont les espaces en début de lignes.
Différents niveaux d’indentation sont utilisés pour montrer l’imbrication.
A retenir
- Les documents HTML peuvent être organisés en tête et en corps
- La balise <body> assure la compatibilité avec tous les navigateurs
- L’indentation aide à la lisibilité et donc à la collaboration
Dans la prochaine leçon, vous utiliserez l’imbrication pour formater le texte affiché sur une page web et rendre son contenu plus accessible.
3. Formatage de Texte
La mise en forme du texte aide les visiteurs du site web à trouver les informations qu’ils recherchent.
La mise en forme du texte est utilisée pour mettre en évidence le contenu important d’une page et peut rendre vos pages web plus accessibles et inclusives.
Les balises de formatage HTML sont utilisées pour changer la façon dont le texte est affiché.
La balise gras <b> est utilisée pour afficher le texte en gras.
Les balises de formatage sont des balises conteneurs. Cela signifie que les balises d’ouverture et de fermeture sont nécessaires.
La balise italique <i> est utilisée pour afficher du texte en italique.
La balise de soulignement <u> est utilisée pour souligner le texte.
Les balises de formatage sont appliquées au texte et son imbriquées à l’intérieur des éléments.
Le code ci-dessous montre comment les balises de formatage sont imbriquées à l’intérieur de l’élément paragraphe.
Les pages Web sont conçues pour être accessibles aux personnes handicapées. L’accessibilité Web consiste à rendre les sites web plus inclusifs et à supprimer les obstacles.
Les lecteurs d’écran sont des programmes qui rendent le contenu d’un site Web accessible aux utilisateurs qui sont aveugles, malvoyant ou ont une déficience d’apprentissage.
Il existe quelques balises de formatage HTML que vous pouvez utiliser pour rendre vos pages Web plus accessibles. La balise strong <strong> est utilisée pour mettre en évidence le texte important. Strong le texte est affiché en gras, tout comme lorsque vous utilisez la balise <b>. La différence est que la balise <strong> a également un sens et est utilisée par les lecteurs d’écran.
Exemple :
La balise d’accentuation <em> est utilisée pour définir un texte accentué.
Le texte souligné est affiché en italique, tout comme lorsque vous utilisez la balise <i>. La différence est que le lecteur d’écran accentuera verbalement les mots.
Exemple :
Les balises <strong> et <em> sont considérées comme des balises de formatage sémantiques parce qu’elles ajoutent du sens au contenu. Elles peuvent servir d’indication d’emphase pour un lecteur d’écran.
A retenir
- Vous pouvez utiliser l’imbrication pour rendre le texte gras, italique et souligné avec les <b>, <i> et <u> balises de formatage
- Vous pouvez rendre vos pages web plus accessibles avec l’utilisation des <strong> et <em> balises de formatage sémantique
Dans la prochaine leçon, vous apprendrez à connecter différentes pages Web avec des hyperliens.
4. HyperText
Le web ne serait pas possible sans le HyperText. Le HyperText permet aux gens de passer d’une page web à une autre, via des liens.
Dans cette leçon, vous apprendrez à connecter des pages web avec des hyperliens.
HyperText est du texte qui contient un lien vers une autre page.
La balise d’ancre <a> est utilisée pour créer un hyperlien sur une page web.
La balise <a> est une balise conteneur.
Les hyperliens sont utilisés pour lier une page web à d’autres. Pour créer un lien, vous avez besoin de « href » pour ajouter l’URL de destination.
href signifie HyperText référence.
L’URL doit être entourée de guillemets pour fonctionner sans erreurs. Si vous oubliez d’ajouter href ou les guillemets, la balise <a> ne créera pas un hyperlien.
Les URL peuvent être incluses entre des guillemets simples (') ou doubles (""). Il n’y a aucune différence tant qu’ils correspondent.
Vous pouvez imbriquer des hyperliens à l’intérieur d’autres éléments de texte.
Exemple :
Le contenu de la balise d’ancre <a> est le texte que vous voulez afficher.
Vous pouvez également utiliser des hyperliens pour connecter des pages du même site web.
La partie de l’URL qui reste la même pour toutes les pages d’un site web est le nom de domaine (par exemple, m3bproduction.site).
A retenir
- Vous pouvez insérer des liens dans les pages avec l’ancre <a> tag
- Le <a> tag peut être imbriqué dans des éléments de texte
- L’URL de destination va avec href
Dans la prochaine leçon, vous apprendrez à créer des listes et des points de puce en HTML.
5. Listes
Dans le développement web moderne, les listes sont des éléments très utiles.
Vous pouvez même utiliser des listes pour construire des menus de navigation.
Une liste se compose d’éléments de la liste <li>.
Eléments de la liste sont des balises de conteneur.
Les listes ordonnées <ol> s’affichent avec des numéros (1, 2, 3…) au lieu de points de puce.
Utilisez <ol> lorsque les points ont un ordre précis, comme des instructions étape par étape.
Les listes sont également des balises conteneurs, avec les éléments de la liste imbriqués à l’intérieur.
Utilisez des listes non ordonnées <ul> lorsque l’ordre des éléments n’est pas important. Ils sont affichés avec des points de puce.
Vous pouvez imbriquer une liste à l’intérieur d’une autre liste.
Exemple :
L’indentation est utilisée pour montrer les éléments imbriqués.
Rappelez-vous que le navigateur web ignorera les sauts de ligne et les espaces blancs dans le code HTML.
Chaque élément de la liste sera affiché sur une nouvelle ligne.
Vous pouvez imbriquer des éléments comme des hyperliens à l’intérieur des éléments de liste.
A retenir
- Les listes sont composées d’éléments de liste <li>
- Vous pouvez ajouter des listes ordonnées <ol> et des listes non ordonnées <ul> aux pages web
- Vous pouvez imbriquer des listes les unes dans les autres
Dans le prochain chapitre, vous apprendrez à utiliser les attributs pour modifier les éléments HTML.