Tutoriel HTML pour les débutants

Si vous voulez devenir un webmaster et apprendre à créer un site web, vous pouvez trouver la perspective de vous familiariser avec le HTML assez décourageante.

C’est quelque chose qui ne peut être évité, cependant, car la grande majorité des pages de destination des sites web que vous visitez auront été écrites et structurées en utilisant des éléments HTML. En fait, le HTML est maintenant utilisé par plus de 74% de tous les sites web connus, tandis que ce langage permet également d’améliorer tout, de la conception de votre site à la qualité du contenu qu’il présente.

Dans ce guide, nous allons explorer les principes de base du HTML et ses applications potentielles, avant d’examiner des exemples d’éléments individuels que vous utilisez lors du codage de votre site web.

Qu’est-ce que le HTML ?

En termes simples, le HTML représente le langage de balisage standard pour la création de pages web en ligne. C’est l’abréviation de Hyper Text Markup Language, et sa fonction la plus primaire est d’établir la structure, la mise en page et la présentation des pages de destination individuelles. Bien que les navigateurs web n’affichent pas directement le langage HTML, il joue un rôle central en aidant à créer un site visible, accessible et facile à utiliser.

Le HTML est également sous-tendu par un certain nombre d’éléments individuels, qui construisent progressivement les pages web, structurent la présentation du contenu et donnent vie à votre site web. Ces éléments sont créés et contenus dans des « balises », qui définissent des éléments de contenu alternatifs tels que des titres, des paragraphes et des exemples similaires.

Nous explorerons ces éléments et leur construction plus en détail ci-dessous, tout en examinant comment ils peuvent être personnalisés pour introduire de la couleur, des liens et une typographie variable sur votre site web.

Où le HTML est-il utilisé ?

Comme nous pouvons le voir, l’application la plus courante du HTML est la conception des pages de destination individuelles qui composent votre site Web. Ce n’est pas la seule application de l’outil de codage populaire, cependant, la compréhension de ses utilisations supplémentaires vous aidera à tirer le meilleur parti de ce langage en tant que nouveau webmaster. Voici donc quelques-unes des autres façons dont le HTML peut être appliqué :

• Créer des éléments personnalisables dans une page existante. Si vous avez l’intention d’autoriser les commentaires des articles de blog ou la publication de contenu généré par les utilisateurs sur votre site web, vous pouvez utiliser des fragments de code HTML pour le permettre. Ces éléments permettront aux utilisateurs de mettre en valeur des mots-clés, d’intégrer des liens et de formater les commentaires en fonction des restrictions que vous mettez en place en tant que modérateur.
• Créer du contenu supplémentaire pour le courrier électronique. Le courrier électronique utilise également le HTML comme langage pour les messages en texte enrichi, qui comportent des liens, du texte et une variété d’autres éléments qui ne peuvent pas figurer dans le texte brut seul. Ainsi, si vous cherchez à partager un ebook qui se rapporte à votre site Web par le biais du courrier électronique, vous pouvez utiliser le HTML pour optimiser l’impact de votre message.
• Comprendre les documents d’aide hors ligne qui sont installés sur votre ordinateur. Il est intéressant de noter que le HTML est utilisé comme format pour les documents d’aide sur ordinateur qui sont accessibles hors ligne. Une connaissance de base du HTML peut, par conséquent, vous aider à comprendre les problèmes liés à votre matériel et à les résoudre plus rapidement, ce qui, à son tour, peut garantir que vous êtes en mesure de restaurer votre site web plus rapidement dans les cas où il a été mis hors ligne.

Structure de la page html

Avant de pouvoir construire une page html, il faut que les bases soient en place.

Typiquement, une page sera composée de trois éléments structurels :

1. En-tête : L’en-tête contient du contenu pertinent pour toutes les pages de votre site, comme un logo ou le nom du site Web, et un système de navigation. L’en-tête est vu sur chaque page.
2. Corps principal : Il occupe la plus grande surface d’une page web. Il contient du contenu spécifique à la page visualisée.
3. Pied de page : Le contenu du pied de page comprend généralement des informations de contact, une adresse de livraison ou des mentions légales. Comme l’en-tête, le pied de page apparaît sur chaque page, mais il est positionné en bas de page.

Voici à quoi ressemblent ces éléments structurels de base lorsqu’ils sont réunis :

Voici un autre exemple, utilisant les balises d’en-tête et la balise paragraphe pour structurer le contenu de manière esthétique. De plus, nous avons ajouté une balise de bas de page pour le contenu situé sous le corps principal d’une page :

Balises HTML

Le point de départ de tout code HTML est constitué de balises individuelles, qui peuvent être utilisées pour créer tous les éléments cruciaux et aider à structurer vos pages web.

Ci-après, nous allons jeter un coup d’œil aux balises les plus courantes avant d’explorer comment elles peuvent être exploitées pour générer des éléments spécifiques, sur la page:

Balises d’en-tête

Tous les documents en ligne, y compris les pages Web, commencent par un en-tête. Ceux-ci sont construits à l’aide de balises HTML, le langage permettant actuellement jusqu’à six éléments de taille variable qui vous permettent également de structurer votre contenu avec des titres supplémentaires, des sous-titres et des lignes de texte en gras mises en évidence. Pour commencer votre rubrique, il vous suffit de faire précéder le texte concerné de la balise <h1> , <h2> , <h3> , <h4> , <h5> ou <h6> selon la taille souhaitée.

Vous devez ensuite appliquer une balise de fermeture à la fin de l’intitulé pour encapsuler le texte, qui s’affichera comme suit au format HTML :

Une fois confirmé, cela se traduira par l’esthétique suivante sur la page de destination de votre site web :

Ici, les différentes tailles des rubriques variables sont bien visibles, tout comme le fait que le navigateur ajoute une ligne avant et après la rubrique. Vous remarquerez également que la balise de fermeture à la fin du texte de l’en-tête a une esthétique légèrement différente, mais nous couvrirons cela dans le chapitre suivant lorsque nous chercherons à utiliser les balises pour définir des éléments spécifiques.

Balises de paragraphe

Un principe similaire est appliqué aux balises de paragraphe de départ, qui sont représentées par <p>. Cela vous permet de structurer votre contenu et de le diviser en paragraphes pertinents, ce qui se traduit par une expérience de lecture plus facile et plus fluide. Une fois encore, la balise <p> doit être placée au début du texte pertinent, avant que la balise de fermeture alternative ne soit appliquée à la fin pour compléter l’effet. Contrairement aux balises de titre, cependant, il n’y a pas de divers numériques qui peuvent modifier la taille du texte figurant dans le paragraphe.

En dehors du format HTML, cela décomposera le texte comme suit sur votre page web finie :

Balises de saut de ligne

Les premiers exemples représentent les balises HTML les plus basiques, mais il en existe d’autres qui utilisent un format différent et des prises de fermeture alternatives. Prenez les sauts de ligne, par exemple, qui créent une distinction à laquelle les lignes de texte sont rompues et poursuivies sur la ligne suivante. Il existe une différence fondamentale entre les sauts de ligne et les paragraphes dans le domaine du HTML, car si ces derniers sont des éléments de bloc standard qui contiennent du texte, le premier crée une séparation dans un élément <p> existant.

Pour cette raison, les sauts de ligne représentent un élément vide dans le HTML et ne sont donc pas définis par des balises d’ouverture ou de fermeture. Au lieu de cela, ils sont représentés par la balise <br />, qui peut être insérée dans des éléments <p> existants pour rompre le texte et potentiellement mettre en évidence des éléments d’information importants. L’espace unique entre le caractère <be> et la barre oblique est crucial, car sinon, la balise n’est pas reconnaissable au format HTML.

Une fois appliqué, cela brisera le texte comme suit:

Comme vous pouvez le voir, vous pouvez appliquer des sauts de ligne aussi souvent que vous le souhaitez dans un élément de paragraphe existant, tant qu’ils ajoutent de la valeur et rendent l’information plus facile à digérer. Vous verrez également que les balises d’ouverture et de fermeture du paragraphe restent inchangées, les balises de saut de ligne étant utilisées pour modifier la mise en page du texte qui y est inclus.

C’est l’un des exemples de la façon dont les balises HTML peuvent être utilisées pour modifier les éléments existants, ce qui joue un rôle clé dans la définition de la mise en page visuelle de vos pages web et de votre contenu.

Lignes horizontales

De même, il existe d’autres balises qui peuvent être utilisées dans l’élément <p> ou pour séparer davantage les corps de texte sur votre page web. L’une des plus utilisées est la balise <hr>, qui aide à créer un élément vide qui trace une ligne visuelle horizontale entre les sections alternées d’un document en ligne. Vous pouvez souhaiter placer une ligne entre deux corps de texte, par exemple, afin de recentrer le lecteur ou simplement d’introduire un nouvel élément visuel. Voici comment créer une telle coupure en HTML:

Ici, la coupure entre les caractères hr et la barre oblique souligne la construction d’un élément vide, alors qu’une fois encore, aucune balise de fermeture n’est nécessaire pour compléter l’effet. On obtient ainsi le visuel suivant :

Balises d’image

Les balises d’image représentent également des éléments vides en HTML, ce qui signifie une fois de plus qu’elles ne comportent pas de balise fermante. Comme elles ne contiennent que des attributs relatifs à l’URL de l’image que vous intégrez sur le site, elles sont définies simplement par la balise <img > au début de l’élément. Elles peuvent être placées n’importe où sur votre site Web, bien qu’il soit inhabituel de les inclure dans des éléments existants tels que des paragraphes ou des titres. Voici comment se présente une balise d’image HTML typique :

Vous devriez également fournir un texte alternatif pour votre image, ce qui aide les gens à la visualiser en cas de temps de chargement lent ou d’utilisation d’un lecteur d’écran. Ainsi, si le navigateur ne trouve pas l’image, il affichera la valeur de l’attribut alternate aux téléspectateurs. Ceci utilise une fois de plus la balise image, mais inclut un ensemble différent d’attributs :

Éléments HTML

Précédemment, nous avons examiné comment les balises HTML simples sont utilisées pour définir les éléments sur la page, tout en explorant comment ils peuvent être personnalisés davantage en utilisant des éléments vides contenant des balises d’image et de saut de ligne. Cela nous aide à comprendre la relation qui existe entre les balises et les éléments, et comment ils peuvent être utilisés pour définir différents types de contenu sur votre site Web.

Bien que tous les aspects du langage HTML soient représentés par une balise, par exemple, un élément défini qui inclut du contenu doit avoir une balise de début et une balise de fin. Ainsi, les titres et les paragraphes sont des éléments HTML car ils utilisent des balises de début et de fin pour encapsuler et augmenter le texte correspondant. En revanche, les éléments vides contiennent soit des attributs, soit aucun contenu, ce qui leur permet d’être utilisés au sein d’éléments existants sans avoir besoin d’une balise de fermeture.

Définir les éléments HTML

Lorsque l’on utilise des exemples tels que les titres et les paragraphes, l’application correcte des balises de début et de fin est cruciale. C’est la balise de départ (comme <h1> ou <p>) qui définit l’élément en question, par exemple, tandis que la balise de fermeture garantit que cet élément n’est pas poursuivi dans le reste de la page Web. Si vous omettez d’utiliser la balise de fermeture </ p> à la fin d’un paragraphe souhaité, par exemple, le texte apparaîtra en un seul bloc inesthétique et extrêmement difficile à lire.

Toutes les balises de fermeture sont identiques aux balises de début, hormis le fait que les premières comportent une barre oblique avant les caractères concernés. Ainsi, dans le cas d’un <h1>heading, la balise de fermeture sera </ h1> , tandis que pour les paragraphes, vous utiliserez toujours </ p> pour définir la rupture dans le texte. Cela nécessite une attention particulière lors du codage, et il est important de noter lors de la programmation des titres que le numéro que vous utilisez (comme h1 ou h2) est appliqué à la fois dans les balises de début et de fin.

Utiliser des éléments HTML imbriqués

À ce stade, il est clair de voir que les documents HTML et les pages Web sont formés par une arborescence de divers éléments, qui servent de blocs de construction pour un éventail d’actifs. Nous avons également examiné comment ces éléments peuvent être formés et utilisés pour structurer le contenu en ligne, et nous allons poursuivre cela maintenant en examinant les éléments HTML imbriqués.

De même que les éléments vides et les balises autonomes (comme <br / >peuvent être incorporés dans des éléments HTML définis, les éléments dits imbriqués peuvent également être logés dans des contenus tels que les titres et les paragraphes. Ces éléments comprennent des exemples tels que les caractères gras et italiques et le texte souligné, alors qu’ils peuvent être appliqués pour ajouter de la personnalité à votre contenu et attirer l’œil du lecteur sur des points d’intérêt spécifiques.

Texte gras, italique et barré en HTML

Disons que vous voulez mettre en évidence un mot dans un élément de paragraphe existant. Vous pouvez y parvenir en le mettant en gras, en utilisant des balises simples dans l’élément standard <p>. En utilisant HTML, vous programmerez ceci comme suit :

Ici, l’élément imbriqué possède à la fois une balise de début et une balise de fin, qui suivent chacune un format similaire à ceux associés aux titres et aux paragraphes. Elles peuvent être utilisées de manière transparente au sein d’éléments existants, et dans ce cas, cela produira les résultats suivants :

Maintenant, disons que vous souhaitez également modifier la typographie de ce mot afin qu’il soit également en italique. Cela peut être réalisé simplement en ajoutant un autre élément imbriqué, qui devrait être codé comme ceci :

Comme vous pouvez le voir, les balises italiques de début et de fin ont simplement été incorporées dans l’élément <p>. Cela va maintenant transformer le contenu de l’élément pour qu’il apparaisse comme suit :

Bien sûr, vous pouvez décider que vous préférez mettre en évidence ce mot d’une manière différente. Vous pouvez donc utiliser un autre élément imbriqué, comme le barré (qui est représenté par les balises <s> et </s>. Ces balises peuvent être appliquées de la même manière au sein de l’élément <p>, apparaissant comme suit en HTML:

Dans ce cas, le texte apparaîtra comme suit sur votre document ou page de destination :

Ceci offre un aperçu des éléments qui peuvent être formés par les balises, ce qui définit à son tour la structure de vos pages web et le contenu qu’elles présentent. Non seulement cela, mais les éléments vides et imbriqués peuvent également être utilisés pour définir davantage votre contenu.

Attributs HTML

Si les balises sont les blocs de construction qui construisent et définissent les éléments, alors les attributs HTML peuvent être utilisés pour personnaliser leurs caractéristiques (comme le style, la couleur et la langue. Tous les éléments HTML ont des attributs de base, qui fournissent des informations essentielles et sont toujours spécifiés dans la balise stat. Ils ont tendance à venir par paires, et apparaîtront donc souvent dans le format suivant : name= »valeur. »

En termes simples, le nom représente la propriété que vous voulez définir, tandis que la valeur se rapporte aux critères spécifiques que vous voulez intégrer.

Il existe un grand nombre d’attributs qui peuvent être appliqués à vos éléments HTML, mais ceux qui sont les plus pertinents pour les webmasters naissants sont :

L’attribut ‘lang’

L’attribut le plus basique définit la langue du document et de ses éléments. Il est déclaré à l’aide de l’attribut ‘lang’, et bien qu’il soit facilement négligé, il a l’avantage de rendre le contenu plus accessible aux lecteurs d’écran et aux moteurs de recherche. Il sera généralement présenté au début du document dans le format suivant:

Suivant l’attribut lang, les deux premières lettres spécifient la langue (qui est l’anglais dans ce cas). Après le trait d’union, les deux lettres suivantes établissent le dialecte, même si celui-ci ne sera pas présent pour toutes les langues. Il est important que vous obteniez cet attribut correctement si vous voulez réussir à atteindre votre public.

L’attribut ‘align’

Nous avons déjà abordé le format des attributs HTML (name= »value »), et la meilleure incarnation de cela se produit lorsque vous essayez d’aligner le contenu dans vos éléments. Vous pouvez décider de centrer tous les paragraphes d’une page spécifique, par exemple, l’alignement étant la propriété que vous souhaitez définir. Par la suite, ‘center’ est la valeur de l’attribut, bien que vous ayez le choix d’aligner votre texte à gauche ou à droite.

Ceci alignera vos éléments <p> au centre de la page, et créera une mise en page uniforme pour convenir à la nature spécifique de votre site web (voir ci-dessous) :

L’attribut ‘href’

Si vous allez construire un site web visible, il est important que vous incorporiez des liens entrants et sortants. Construire un portefeuille de liens qui comprend des backlinks vers des pages d’atterrissage internes est également une stratégie viable, vous devrez donc apprendre à les coder en HTML.

Les liens HTML sont définis avec la balise <a>, qui comprend le lien de destination ainsi que le texte d’ancrage affilié qui abritera l’URL. C’est l’attribut ‘href’ qui spécifie l’adresse du site, cependant, il est incorporé dans le cadre de la balise de départ. Il est codé en HTML comme suit :

Cela met clairement en évidence la distinction entre la balise de début et la balise de fin, et se traduira comme suit sur votre page de destination :

L’attribut « couleur »

C’est un autre attribut important, car l’utilisation de la couleur peut insuffler de la vie à votre site Web tout en aidant à créer des contrastes importants et une esthétique de conception forte. En HTML, une couleur peut être spécifiée en utilisant son nom, bien qu’il soit également possible d’utiliser une valeur RGB ou HEX pour atteindre cet objectif. La première option est toutefois la plus facile à suivre, alors qu’elle peut également être appliquée aux titres, aux paragraphes et à d’autres éléments de votre page.

Il s’agit d’un attribut de style, votre choix de couleur représentant la valeur que vous souhaitez définir. Lorsque vous appliquez la couleur rouge au titre principal, par exemple, cela ressemblera à ceci :

Une fois appliqué, cet élément apparaîtra comme suit sur votre site Web :

Une fois de plus, il y a une distinction claire entre les balises de début et de fin qui définissent l’élément, alors que c’est l’un des attributs les plus faciles à appliquer en HTML. Il met également davantage en évidence le format name= »valeur des attributs HTML, ce qui rend le processus d’apprentissage, et l’application de ceux-ci beaucoup plus facile dans l’ensemble de votre site Web.

Testez-le vous-même

Avec une compréhension de base du HTML et de ses éléments individuels, l’étape suivante consiste à entreprendre quelques projets simples et à appliquer vos connaissances théoriques pour résoudre des défis pratiques.

Dans l’exercice détaillé ci-dessous, nous avons présenté un texte excepté et demandé de formater divers aspects à l’aide de HTML. Utilisez le guide et tout ce que vous avez appris jusqu’à présent pour relever le défi en vous préparant à coder votre propre site Web.

Questions:

1. Compléter l’élément d’en-tête avec la balise de fermeture correcte.
2. Mettre l’en-tête en gras.
3. Insérer une ligne horizontale sous l’en-tête.
4. Utilisez l’attribut de couleur et nuancez ‘Merci de votre visite’ en vert
5. Insérez ce lien hypertexte (https://www.w3schools.com/html/) dans le texte d’ancrage « En savoir plus. »
6. En tête de page, utilisez le format name= »value » pour aligner les paragraphes à gauche

Stats et faits sur le langage HTML

1. Les éléments HTML, head et body font partie de la spécification HTML depuis le milieu des années 1990, et jusqu’à il y a quelques années, ils étaient les principaux éléments utilisés pour donner une structure aux documents HTML. Cependant, la situation a radicalement changé au cours des dernières années, car HTML5 a ajouté une foule de nouvelles balises qui peuvent être utilisées pour ajouter une riche signification sémantique à la structure d’un document HTML.
2. Les documents HTML doivent commencer par une déclaration de type de document (de manière informelle, un « doctype »). Dans les navigateurs, le doctype permet de définir le mode de rendu. HTML5 ne définit pas de DTD ; par conséquent, en HTML5, la déclaration de doctype est plus simple et plus courte.
3. Les navigateurs mobiles ont pleinement adopté HTML5, de sorte que la création de projets prêts pour le mobile est aussi facile que la conception et la construction pour leurs écrans tactiles plus petits – d’où la popularité du Responsive Design. Il existe d’excellentes balises méta qui vous permettent également d’optimiser pour le mobile.
4. 78% des développeurs de contenu sont d’accord pour dire que la structure est adaptée à la création d’applications mobiles, et 68% disent qu’elle est adaptée à la conception de tous les types d’applications.
5. HTML5 est également livré avec une flopée de superbes API qui vous permettent de construire une meilleure expérience utilisateur et une application web plus musclée et plus dynamique – voici une liste rapide des API natives :
   • Drag and Drop (DnD)
   • Base de données de stockage en ligne
   • Gestion de l’historique du navigateur
   • Édition de documents
   • Lecture de médias synchronisée
6. HTML5 n’est pas contrôlé par une seule entreprise. L’une de ses meilleures caractéristiques réside dans le fait qu’il s’agit d’une norme ouverte. Les développeurs ont la liberté de laisser libre cours à leur créativité et d’ajouter autant de fonctions et de caractéristiques qu’ils le peuvent.
7. Par rapport aux autres navigateurs, chaque mise à jour de Google Chrome s’assure d’inclure le support du HTML5. De plus, le lecteur par défaut de YouTube est désormais en HTML5 et les publicités Flash de Google sont en cours de conversion en HTML5.
8. Utilisation de HTML5 par les développeurs (par région) :
   • Amérique du Nord et Amérique latine – 70%
   • Amérique du Sud – 61%
   • ASPAC – 60%
   • Australie – 60%
   • Europe – 59%
   • Afrique – 50%

Conclusion

Bien que le HTML n’ait été créé qu’en 1991 (la première version du langage de codage ayant été lancée en 1995), il est rapidement devenu un outil fondamental dans la conception de sites Web fonctionnels et visuellement attrayants. Le niveau d’influence du HTML continue également d’évoluer, la dernière itération (HTML5) étant adoptée par un nombre croissant de sites Web à travers le monde.

À cet égard, l’apprentissage des éléments de base du HTML et de la façon de les appliquer est l’étape la plus importante que vous franchirez pour établir un site Web réussi, visible et, en fin de compte, compétitif.