Le guide HTML définitif pour les débutants

Dernière mise à jour le 15 Mai 2018

Il y a vingt ans, même si vous êtes un blogueur amateur, vous deviez connaître le 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. faire un site or lancer un blog.

Le problème, c’est que si vous ne connaissez pas quelques notions de base, vous pouvez facilement rencontrer de véritables problèmes sur votre blog et devoir engager un développeur coûteux pour résoudre ce qui pourrait être un problème mineur. De plus, la création de modifications sur votre blog, telles que l'ajout d'un widget de texte personnalisé, nécessite quelques connaissances.

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 la colonne vertébrale de l'internet d'aujourd'hui. Des millions de sites Web ont formé ensemble Internet. Où HTML est la pierre angulaire de tous ces sites Web.

Questions et réponses du débutant

1- Qu'est-ce que le HTML?

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

HTML est représenté par “É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 - 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 Sublime Text, 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!


Go Top

1- Bonjour le monde!

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

Code:

<! DOCTYPE html> <html> <head> <title> Ma première page Web </ title> </ head> <body> <p> Bonjour tout le monde! </ P> </ body> </ html>

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 comprendre le code “Hello World!”. Les éléments suivants constituent les parties obligatoires de chaque fichier HTML.

  • <! DOCTYPE html> = C'est une déclaration au navigateur qu'il s'agit d'un fichier HTML. Vous devez le spécifier avant la balise <html>.
  • <Html> </ html> = Ceci est l'élément racine d'un fichier HTML. Tout ce que vous écrivez se situe entre <html> et </ html>.
  • <Head> </ head> = Ceci est la partie méta-information pour un navigateur. Les codes à l'intérieur de cette balise n'ont pas de sortie visuelle.
  • <Body> </ body> = Ceci est la partie rendue par un navigateur Web. Ce que vous voyez sur un site Web, c’est le rendu des codes entre <body> et </ body>.


Go Top

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 de fermeture. La balise d’ouverture contient le mot-clé entouré des signes inférieur à (<) et supérieur à (>). La balise de fermeture a tout de même, sauf une barre oblique supplémentaire (/) après le signe inférieur à (<).

(2a) Tags de tête

Toutes les étiquettes de tête vont entre <head> et </ head>. Ils contiennent des méta-informations pour les navigateurs Web et les moteurs de recherche. Ils ont essentiellement pas de sortie visuelle.

<Title> </ title>

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:

<titre> Ma première page Web </ title>
La balise de titre apparaît en haut de votre navigateur.

<link>

La balise link lie votre page HTML avec des ressources externes. Son utilisation principale consiste à relier une page HTML avec des feuilles de style CSS. Il s’agit d’une balise à fermeture automatique qui n’a pas besoin de la fin </ link>. Ici, rel correspond à la relation avec le fichier et src à la source.

Code:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<Meta>

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 = "Ceci est la courte description fournie par les moteurs de recherche"

<script> </ script>

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:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

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:

<noscript> <p> Hélas! Les scripts sont désactivés. </ P> </ noscript>

(2b) Tags du corps

Toutes les balises body vont de <body> à </ body>. Ils ont des sorties visuelles. C'est là que le plus de travail est fait. Vous devez utiliser ces balises pour structurer le contenu de votre page principale.

<h1> </ h1> à <h6> </ h6>

Ce sont les balises de titre. La rubrique la plus importante est étiquetée avec <h1> et la moins importante avec <h6>. Vous devez les utiliser dans la hiérarchie correcte.

Code:

<h1> Ceci est une rubrique h1 </ h1> <h2> Ceci est une rubrique h2 </ h2> <h3> Ceci est une rubrique h3 </ h3> <h4> <h4> Ceci est une rubrique h4> </ hXNXX> > Ceci est une rubrique h5 </ h5> <h5> Ceci est une rubrique h6 </ h6>

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:

<p> Vous pouvez surligner votre texte de plusieurs façons. </ p> <p> Vous pouvez <strong> gras </ strong>, <u> souligner </ u>, <em> italique </ em>, <marquer > marque </ mark>, <sous> indice </ sub>, <sup> exposant </ sup> et plus encore! </ p>

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:

<! - <p> Vous pouvez commenter n'importe quel code en les entourant de cette manière </ p> ->

(2c) Autres balises HTML importantes

<a> </a>

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 comporte une ouverture <a> et une partie de clôture </a>. Le texte que vous souhaitez ancrer se situe entre <a> et </a>.

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 du 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 en cours avec la page liée. Si vous ne faites pas confiance à la page liée, vous pouvez définir rel = "nofollow".

Code:

<p> <a target="_blank" href="https://www.google.com/"> Cliquez ici </a> pour accéder à Google. Il s'ouvrira dans un nouvel onglet. </ P> <p> <a target="_self" href="https://www.google.com/"> Cliquez ici </a>. Cela vous mènera également à Google mais s'ouvrira dans l'onglet en cours. </ P>

Sortie:

<img />

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

<img /> est une balise à fermeture automatique. Il n’a pas besoin de la fermeture traditionnelle comme </ img>. 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.
  • largeur = "" = Il définit la largeur d'une image en pixels.
  • Hauteur = "" = Il définit la hauteur d'une image en pixels.

Exemple:

<p> Il s'agit du Googleplex d'août 2014. </ p> <p> Cette image a une largeur de 500 pixels et une hauteur de 375 pixels. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Le siège de Google en août 2014 "width =" 500 "height =" 375 "/>

Sortie:

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

<ol> </ ol> ou <ul> </ ul>

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

Les éléments de la liste à l'intérieur du <ol> ou <ul> sont étiquetés avec <li> </ li>. li est synonyme de liste. Vous pouvez avoir autant de <li> que vous le souhaitez dans la balise parent <ol> ou <ul>.

Code:

<p> Ceci est une liste ordonnée: </ p> <ol> <li> Élément 1 </ li> <li> Élément 2 </ li> <li> Élément 3 </ li> </ ol> <p> Voici une liste non ordonnée: </ p> <ul> <li> Élément 1 </ li> <li> Élément 2 </ li> <li> Élément 3 </ li> </ ul>

Sortie:

<Table> </ table>

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.

<table> </ table> est le code parent externe. Dans cette balise, <tr> représente la ligne de la table, <td> la colonne de la table et <th> l’en-tête de la table.

Code:

<table> <tr> <th> Nom </ th> <th> Âge </ th> <th> Profession </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> homme d'affaires </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Infirmière </ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td> Professeur </ td> </ tr> </ table>

Sortie:

Remarque: Les valeurs à l'intérieur du premier <tr> sont des en-têtes. Nous avons donc utilisé <th> 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:

  • <thead> </ thead> = Pour envelopper les en-têtes d'une table. Il imprime sur chaque page divisée de la table.
  • <tbody> </ tbody> = Pour envelopper les données principales d'une table. Vous pouvez avoir autant de <tbody> que vous avez besoin. Une balise <tbody> désigne un groupe de données séparé.
  • <tfoot> </ tfoot> = 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 table exemplifiée dans <thead>, <tbody> et <tfoot>:

Code:

<table> <thead> <tr> <th> Nom </ th> <th> Âge </ th> <th> Profession </ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Homme d'affaires </ td> </ tr> <td> <td> Carol </ td> <td> 26 </ td> <td> Infirmière </ t> td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td> Professeur </ td> </ tr> </ tbody> <tfoot> <tr> <td> Nombre total de personnes: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

Sortie:

<Form> </ form>

L'élément de formulaire est utilisé pour créer des formulaires interactifs pour des pages Web. Un formulaire HTML contient plusieurs éléments consécutifs. Par exemple: <label>, <input>, <textarea> 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 de saisie pour les formulaires. Le type d'entrée très basique est le texte. Il est écrit sous la forme <input type = ”text”>. Les types peuvent également être radio, case à cocher, email, etc. Il devrait y avoir une entrée de type de soumission en bas pour créer un bouton de soumission.

La balise <label> est utilisée pour créer des étiquettes et les associer à des entrées. La règle d'association d'étiquettes avec les entrées est celle qui a la même valeur dans for = ”” attribut de label et id = ”” attribut d'input.

Code:

<form action = "#"> <label pour = "prénom"> Prénom: </ label> <type d'entrée = "text" id = "prénom"> <br> <label pour = "nom"> Nom: </ label> <type d'entrée = "text" id = "nom de famille"> <br> <label pour = "bio"> Bio courte: </ label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Entrez votre bio ici ... "> </ textarea> <br> <label> Sexe: </ label> <br> <label for =" male "> Homme </ label> <input type = "radio" name = "genre" id = "homme"> <br> <label pour = "femme"> Femme </ label> <entrée type = "radio" name = "genre" id = "femme"> <br > <input type = "submit" value = "Submit"> <form>

Sortie:

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


Go Top

Attributs 3- 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 doubles.

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:

<h1 class = "heading"> Ceci est le titre principal </ h1>

href = ""

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

Code:

<a href="https://www.google.com/"> Google </a>

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:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ””

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

Code:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Patio-Aug-2014.JPG" alt = "Le siège de Google" />

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:

<h2 style = "color: red"> Ceci est un autre titre </ h2>


Go Top

4- Code Display: Bloc vs Inline

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

Ex: <div>, <p>, <h1> - <h6>, formulaire, 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: <a>, <span>, <br>, <strong>, <img> 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:

<! DOCTYPE html> <html> <head> <title> Ma première page Web </ title> </ head> <body> <h2> Il s'agit d'un en-tête H2. Il possède un affichage en mode bloc. </ H2> <h2> Ceci est <u> un autre </ u> titre H2. Ici, la balise de soulignement a un affichage en ligne. </ H2> </ body> </ html>

Sortie:


Go Top

5 - Double citation vs simple citation 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.


Go Top

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 leurs noms id / class. Par exemple: <div id = ”article”> </ div> était considéré comme un article.

Dans HTML5, la balise <article> </ article> se représente comme un article sans avoir besoin d'identifiant id / class.

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:

  • <main> </ main> = Ceci est pour emballer le contenu principal que vous voulez montrer à vos téléspectateurs.
  • <header> </ header> = Ceci est destiné à marquer l’en-tête d’un contenu tel que le titre ou la méta auteur.
  • <article> </ article> = Il spécifie un contenu défini par l'utilisateur ou indépendant pour vos téléspectateurs.
  • <section> </ section> = 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.
  • <footer> </ footer> = C’est là que votre contenu de pied de page, votre avis de non-responsabilité ou votre texte de copyright appartient.
  • <audio> </ audio> = Il vous permet d’insérer des fichiers audio sans aucun problème de plugin.
  • <video> </ video> = Comme <audio>, vous pouvez insérer des vidéos à l'aide de cette balise sans problèmes de plug-in.

Une structure HTML5 simple ressemblerait à ceci:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Ma première page Web </ title> </ head> <body> <header> <nav> <ul> < li> Menu 1 </ li> <li> Menu 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> Ceci est le titre de l'article </ h2> <p> Publié par John Doe </ p> </ header> <p> Le contenu de l'article se trouve ici </ p> </ article> </ main> <footer> <p> Copyright 2017 John Doe </ p> </ footer> </ body> </ html>


Go Top

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.


Go Top

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: