Guide HTML de base pour les nuls

Dernière mise à jour le 05 octobre 2020


Il y a vingt ans, même si vous n'êtes qu'un blogueur amateur, vous deviez connaître du codage Web pour vous protéger ou pour ajouter une fonction simple à votre site. Mais maintenant, il y a tellement d'éditeurs et de plugins disponibles que même connaître les bases du HTML n'est plus nécessaire.

Le problème avec cela est que si vous ne connaissez pas quelques notions de base, vous pouvez facilement avoir de vrais problèmes dans votre blog et devoir engager un développeur coûteux pour résoudre ce qui peut être un problème mineur. Non seulement cela, mais la création de modifications sur votre blog, comme l'ajout d'un widget de texte personnalisé, nécessite un peu de connaissances.

Code HTML.
«Codes» HTML.

Et si vous constatez que la mise en page du contenu ne vous convient pas, la connaissance du langage HTML peut vous aider à vous remettre sur la bonne voie.

Voici quelques exemples de notre version du guide HTML pour les blogueurs et les propriétaires d’entreprise en ligne qui ne sont pas des techniciens.

Le HTML est l'épine dorsale d'Internet d'aujourd'hui. Des millions de sites Web ont formé ensemble Internet. Où HTML est le bloc de construction de tous ces sites Web.

Avant de commencer…

1. Qu'est-ce que HTML?

HTML est l'abréviation de HYper Tposte MArkupe Language. C'est la langue standard pour baliser le contenu des navigateurs Web.

Le HTML est représenté par des «éléments». Les éléments sont également appelés «balises».

2. Pourquoi le HTML est-il nécessaire?

Les navigateurs Web ne peuvent restituer un site Web que s'il est écrit dans la langue prise en charge. Le langage HTML est le langage de balisage le plus répandu et convient le mieux aux navigateurs Web.

C'est pourquoi vous avez besoin de HTML.

3. Le HTML est-il sensible à la casse?

HTML n'est pas sensible à la casse. Mais la meilleure pratique consiste à écrire du HTML avec les cas appropriés.

Étapes pour créer votre premier fichier HTML

Vous pouvez créer un fichier HTML de base à l’aide du Bloc-notes sur votre ordinateur. Mais il sera pénible d’écrire de nombreuses lignes de codes.

Vous avez besoin d'un éditeur de code. Un bon éditeur de code facilitera l'écriture et l'organisation de gros codes.

J'utilise et recommande Notepad ++ (gratuit et open-source) pour l'écriture de langues Web. Il y a d'autres éditeurs que vous pouvez utiliser comme Sousltexte ime, Atome et ainsi de suite

Voici ce que tu dois faire:

  1. Installer un éditeur de code
  2. Ouvrez-le
  3. Créer un nouveau fichier
  4. Enregistrez-le en tant que fichier .html

Vous êtes prêt à partir!

Exemple d'éditeur de code Atom
Éditeur de code - Atom

1. Bonjour tout le monde!

Copiez et collez le code suivant dans votre nouveau fichier HTML et enregistrez-le. Maintenant, lancez-le sur votre navigateur Web.

Code:

Ma première page Web Bonjour le monde!

Sortie :

Félicitations! Vous avez créé votre tout premier fichier HTML. Vous n'avez pas à le comprendre à ce stade. Nous allons le couvrir sous peu.

Comprendre la structure HTML

Chaque fichier HTML a une structure nue commune. C'est ici que tout commence. Et chaque grande page de codes viendra à cette structure après avoir été réduite.

Essayons donc de le comprendre à partir du "Hello World!" code. Les éléments suivants sont les parties obligatoires pour chaque fichier HTML.

  • = C'est une déclaration au navigateur qu'il s'agit d'un fichier HTML. Vous devez le spécifier avant le marque.
  • = Ceci est l'élément racine d'un fichier HTML. Tout ce que tu écris va entre et .
  • = Ceci est la partie méta-information pour un navigateur. Les codes à l'intérieur de cette balise n'ont pas de sortie visuelle.
  • = Ceci est la partie qu'un navigateur Web rend. Ce que vous voyez exactement sur un site Web est le rendu des codes entre et .

2. Balises HTML

HTML est la collaboration de centaines de balises différentes. Vous devez apprendre comment ils fonctionnent. Vous devez également vous assurer qu'ils les ont utilisés correctement.

Les balises HTML ont généralement une balise d'ouverture et une balise de fermeture. La balise d'ouverture a le mot-clé entouré d'un signe inférieur à (<) et supérieur à (>). La balise de fermeture a tout de même, mais une barre oblique supplémentaire (/) après le signe inférieur à (<).

(2a) Tags de tête

Toutes les balises de tête vont entre et . Ils contiennent des méta-informations pour le navigateur Web et les moteurs de recherche. Ils n'ont fondamentalement aucune sortie visuelle.

La balise de titre définit le titre d'une page Web visible dans l'onglet du navigateur. Ces informations sont utilisées par les programmes Web et les moteurs de recherche. Vous pouvez avoir un titre maximum par fichier HTML.

Code:

Ma première page Web
Balise de titre - exemples HTML
La balise de titre apparaît en haut de votre navigateur.

La balise Link relie votre page HTML à des ressources externes. Son utilisation principale est de lier une page HTML avec des feuilles de style CSS. C'est une balise à fermeture automatique et n'a pas besoin de la fin . Ici, rel signifie relation avec le fichier et src signifie la source.

Code:

Meta est une autre balise à fermeture automatique qui fournit des informations méta sur un fichier HTML. Les moteurs de recherche et autres services Web utilisent ces informations. Les balises META sont indispensables si vous souhaitez optimiser votre page pour les moteurs de recherche.

Code:

<meta name="description" content="This is the short description that search engines show"

La balise script est utilisée pour inclure un script côté serveur ou pour créer un lien vers un fichier de script externe. Il peut avoir deux attributs dans la balise d'ouverture. L'un est le type et l'autre est la source (src).

Code:

La balise Noscript fonctionne lorsque les scripts sont désactivés dans un navigateur Web. Cela rend une page compatible pour ceux qui n'autorisent pas les scripts dans leurs navigateurs Web.

Code:

Hélas! Les scripts sont désactivés.

(2b) Tags du corps

Toutes les balises corporelles vont entre et . Ils ont des sorties visuelles. C'est là que le plus de travail est effectué. Vous devez utiliser ces balises pour structurer le contenu de votre page principale.

à

Ce sont les balises d'en-tête. Le titre le plus important est étiqueté et le moins important avec . Vous devez les utiliser dans la bonne hiérarchie.

Code:

Ceci est un titre h1 Ceci est un titre H1 Ceci est un titre h1 Ceci est un titre h2 Ceci est un titre h2 Ceci est un titre h2

Sortie :

Formatage des tags

Le texte d'un fichier HTML peut être formaté à l'aide de nombreuses balises de formatage. Il sera nécessaire lorsque vous souhaitez surligner un mot ou une ligne de votre contenu.

Code:

Vous pouvez mettre votre texte en surbrillance de plusieurs manières. Vous pouvez mettre en gras , souligner , italique , marque , indice , exposant et plus encore!

Sortie :

Vous pouvez dévier certains codes du rendu en utilisant la balise comment. Le code apparaîtra dans le code source mais ne sera pas rendu. Cette balise est principalement utilisée pour créer une documentation de fichiers HTML pour référence future.

Exemple:

You can comment out any code by surrounding them in this way -->

(2c) Autres balises HTML importantes

Anchor est une étiquette précieuse qui est utilisée presque partout. Vous ne verrez aucune page Web en ligne sans au moins un lien d'ancrage.

La structure est la même. Il a une ouverture et une fermeture . Le texte que vous souhaitez ancrer est compris entre et .

Certains attributs définissent où et comment l'utilisateur va après avoir cliqué dessus.

  • ahref = "" = Il définit le lien de destination. Le lien va entre les guillemets doubles.
  • cible = "" = Il définit si l'URL s'ouvrira dans un nouvel onglet de navigateur ou dans le même onglet. target = ”_ blank” est pour le nouvel onglet et target = ”_ self” est pour l'ouverture dans le même onglet.
  • rel = "" = Il définit la relation de la page courante avec la page liée. Si vous ne faites pas confiance à la page liée, vous pouvez définir rel = "nofollow".

Code:

Cliquez ici pour accéder à Google. Il s'ouvrira dans un nouvel onglet. Cliquez ici . Il vous mènera également à Google mais s'ouvrira dans l'onglet actuel.

Sortie :

La balise image est une autre balise importante sans laquelle vous ne pouvez pas imaginer de nombreux sites Web basés sur des images.

est une balise à fermeture automatique. Il n'a pas besoin de la fermeture traditionnelle comme . Vous devez connaître certains attributs avant de pouvoir l'utiliser correctement.

  • src = "" = Ceci est pour définir le lien source de l'image. Mettez le lien juste entre les guillemets.
  • alt = "" = Cela représente un texte alternatif. Lorsque votre image ne se charge pas, ce texte donnera aux utilisateurs une idée de l’image manquante.
  • width = "" = Il définit la largeur d'une image en pixels.
  • Hauteur = "" = Il définit la hauteur d'une image en pixels.

Exemple:

C'est le Googleplex d'août 2014. Cette image a une largeur de 500 pixels et une hauteur de 375 pixels.

Sortie :

Conseils: vous souhaitez insérer une image cliquable? Enveloppez le code de l'image avec une étiquette. Voir comment ça se passe.

ou

La balise de liste sert à créer une liste d'éléments. signifie listes ordonnées (liste numérotée) et représente des listes non ordonnées (puces).

Les éléments de la liste à l'intérieur du ou est marqué avec . li signifie liste. Vous pouvez en avoir autant comme tu veux à l'intérieur du parent ou marque.

Code:

Ceci est une liste ordonnée: Objet 1 Point 2 Point 3 Ceci est une liste non ordonnée: Objet 1 Point 2 Point 3

Sortie :

La balise table sert à créer une table de données. Quelques balises de niveau internes définissent les en-têtes, les lignes et les colonnes de tableaux.

est le code parent externe. Dans cette balise, représente la ligne de table, représente la colonne de table et signifie en-tête de tableau.

Code:

Nom Âge Profession Jo 27 Homme d'affaire Carol 26 Infirmière Simone 39 Professeur

Sortie :

Remarque: les valeurs à l'intérieur du premier sont des titres. Donc, nous avons utilisé qui applique un effet de texte en gras au texte.

Groupe de table

Vous pouvez étendre les fonctionnalités d'une table à l'aide d'éléments de regroupement de tables. Vous aurez parfois besoin de créer de grands tableaux divisés en plusieurs pages.

En regroupant les données de votre tableau en en-tête, corps et pied de page, vous pouvez autoriser le défilement indépendant. L'en-tête et la partie du corps s'imprimeront sur toutes les pages de votre table.

Les balises de regroupement de table sont:

  • = Pour envelopper les en-têtes d'une table. Il imprime sur chaque page divisée de la table.
  • = Pour envelopper les données principales d'une table. Vous pouvez en avoir autant Comme vous le souhaitez. UNE balise signifie un groupe de données distinct.
  • = Pour envelopper les informations de pied de page d'une table. Il imprime sur chaque page divisée de la table.

Veuillez noter qu'il n'est pas obligatoire d'utiliser le groupement. Vous pouvez l'utiliser pour rendre les tables plus grandes plus lisibles. Bien que certains développeurs spéciaux utilisent de manière marquée ces balises en tant que sélecteurs CSS.

Voici comment nous pouvons regrouper notre tableau illustré en , et :

Code:

Nom Âge Profession John 27 Homme d'affaire Carol 26 Infirmière Simone 39 Professeur Nombre total de personnes: 3

Sortie :

L'élément Form est utilisé pour créer des formulaires interactifs pour les pages Web. Un formulaire HTML contient plusieurs éléments consécutifs. Par exemple:, , etc.

L'attribut action dans la forme est très important. Il pointe vers une page côté serveur ou une page tierce pour traiter les informations. Pour le traitement, vous devez d’abord définir une méthode.

Vous pouvez utiliser l'une des deux méthodes, get ou post. Get envoie toutes les informations dans le format d'URL où Post envoie les informations dans le corps du message.

Il existe de nombreux types d'entrées pour les formulaires. Le type d'entrée très basique est le texte. Il est écrit comme . Les types peuvent également être radio, case à cocher, e-mail, etc. Il devrait y avoir une entrée de type de soumission en bas pour créer un bouton de soumission.

tag est utilisé pour créer des étiquettes et les associer à des entrées. La règle d'association d'étiquettes avec les entrées est d'avoir la même valeur dans l'attribut for = ”” de l'étiquette et l'attribut id = ”” de l'entrée.

Code:

Prénom: Nom de famille: Courte biographie: Le genre: Masculin Femelle

Sortie :

Remarque: j'ai pointé l'action sur une valeur null car il n'était connecté à aucun serveur pour traiter les informations.

3. Attributs HTML

Les attributs sont un type de modificateurs pour les balises HTML. Ils ajoutent de nouvelles configurations aux balises HTML.

Un attribut ressemble à attributename = "" et se trouve dans la balise HTML d'ouverture. La valeur de l'attribut se situe entre les guillemets.

id = ”” et class = ””

id et class sont les identifiants des balises HTML. Différents noms sont désignés pour différents éléments HTML à l'aide d'identificateurs. Vous pouvez utiliser un identificateur de classe pour plusieurs éléments. Mais vous ne pouvez pas utiliser un identifiant unique pour plusieurs éléments.

Code:

Ceci est le titre principal

href = ""

href signifie référence hypertexte. Ils pointent les utilisateurs vers des liens de référence. La balise d'ancrage utilise href pour envoyer les utilisateurs vers une URL de destination.

Code:

Google

src = ""

src signifie source. Il définit la source d'un média ou d'une ressource que vous utilisez dans le fichier HTML. La source peut être une URL locale ou tierce.

Code:

alt = ""

alt signifie alternative. C'est un texte de sauvegarde qui est utilisé lorsqu'un élément HTML ne peut pas être chargé.

Code:

style = ""

L'attribut style est souvent utilisé dans les balises HTML. Il fait le travail de CSS au sein de la balise HTML. Vos propriétés de style se situent entre les guillemets.

Code:

Ceci est un autre titre

4. Affichage du code: Block vs Inline

Certains éléments commencent toujours sur une nouvelle ligne et prennent toute la largeur disponible. Ce sont des éléments «Block».

Ex: , , - , forme etc.

Certains éléments ne prennent que l'espace requis et ne commencent pas sur une nouvelle ligne. Ce sont des éléments «en ligne».

Ex: ,, ,, etc.

Lorsque vous utiliserez des styles CSS, vous devrez différencier les éléments de bloc des éléments en ligne. Dans ce guide HTML, ce n'est pas très nécessaire.

Code:

Ma première page Web Il s'agit d'un titre H2. Il a l'affichage de bloc. Ceci est une autre rubrique H2. Ici, la balise de soulignement est affichée en ligne.

Sortie :

5. Guillemets doubles ou guillemets simples en HTML

Cette question est très évidente. Que devriez-vous utiliser en HTML? Devis simple ou double devis? Les gens semblent utiliser les deux, mais lequel est correct?

En HTML, les guillemets simples et doubles sont les mêmes. Ils ne font aucune différence dans la sortie.

Vous pouvez utiliser qui vous préférez. Mais mélanger les deux dans une page de codes est considéré comme une mauvaise pratique. Vous devriez être compatible avec l'un d'entre eux.

6. HTML sémantique vs HTML non sémantique

Semantic HTML est la dernière version de HTML, également appelée HTML5. C'est la version développée du HTML non sémantique et du XHTML.

Pourquoi HTML5 est-il meilleur? Dans les versions précédentes, les éléments HTML étaient identifiés par des noms d'identifiant / de classe. Par exemple: était considéré comme un article.

En HTML5, La balise se représente comme un article sans avoir besoin d'aucun identifiant / identifiant de classe.

Par souci de HTML5, les moteurs de recherche et autres applications Web peuvent désormais mieux comprendre une page Web. Les sites Web sémantiques se sont avérés meilleurs pour le référencement.

Voici une liste de balises HTML5 populaires:

  • = Ceci est pour emballer le contenu principal que vous voulez montrer à vos téléspectateurs.
  • = Ceci est destiné à marquer l’en-tête d’un contenu tel que le titre ou la méta auteur.
  • = Il spécifie un contenu défini par l'utilisateur ou indépendant pour vos téléspectateurs.
  • = Il peut regrouper n'importe quel code tel que l'en-tête, le pied de page ou la barre latérale. Vous pouvez dire, c'est la forme sémantique d'un div.
  • = C’est là que votre contenu de pied de page, votre avis de non-responsabilité ou votre texte de copyright appartient.
  • = Il vous permet d’insérer des fichiers audio sans aucun problème de plugin.
  • = Comme , vous pouvez insérer des vidéos en utilisant cette balise sans problèmes de plugin.

Une structure HTML5 simple ressemblerait à ceci:

Ma première page Web Menu 8 Menu 1 C'est le titre de l'article Publié par John Doe Le contenu de l'article va ici Droits d'auteur 2 John Doe

7. Validation HTML

La plupart des professionnels du Web valident leur code après l'avoir terminé. Pourquoi est-il nécessaire de valider un code quand il fonctionne bien?

Il existe deux raisons possibles pour valider vos codes:

  1. Cela vous aidera à rendre votre code compatible entre navigateurs et plates-formes. Le code peut ne montrer aucune erreur dans votre navigateur actuel, mais peut-être dans un autre. La validation du code va régler le problème.
  2. Les moteurs de recherche et autres programmes Web peuvent cesser d'explorer votre page si vous y avez des erreurs. Vous pouvez confirmer par la validation que vous n'avez pas d'erreur majeure.

W3C Validator est le service le plus populaire pour la validation de code. Ils ont plusieurs méthodes pour valider les codes. Vous pouvez télécharger un fichier ou saisir directement le code dans leur moteur de validation.

8. Autres ressources utiles

Le HTML est un sujet d’apprentissage permanent. Des versions plus récentes de HTML pourraient bientôt arriver. Donc, vous devez rester à jour et continuer à pratiquer. La pratique est ce que les as HTML.

Voici quelques ressources utiles pour vous: