Comment apprendre le HTML?

HTML est l'abréviation de Hyper text markup language, et est le code ou le langage utilisé pour la création de mises en page de base de sites Web. Cela peut sembler un peu intimidant si vous n'avez jamais fait de codage auparavant, mais tout ce dont vous avez besoin pour l'essayer est une application d'édition de texte ordinaire et un navigateur Internet. Vous pourriez même reconnaître du code HTML utilisé pour modifier le texte dans les forums en ligne, les profils en ligne personnalisés ou même certains articles de guide. Le HTML est un outil utile pour quiconque utilise Internet, et apprendre les bases peut vous prendre moins de temps que vous ne le pensez.

Partie 1 sur 2: apprendre le html de base

1
Ouvrez un document HTML. La plupart des programmes d'édition de texte, y compris Notepad ou Notepad++ pour Windows, TextEdit pour Mac et gedit pour GNU/Linux, peuvent être utilisés pour écrire des documents HTML. Ouvrez un nouveau document et utilisez Fichier → Enregistrer sous dans le menu du haut pour l'enregistrer en tant que "Page Web" ou pour modifier l'extension de fichier en ".html" au lieu de ".doc", ".rtf" ou tout autre extension.
- Vous pouvez voir un avertissement indiquant que votre document sera modifié en «texte brut» au lieu de «texte enrichi», ou que la mise en forme spéciale et les images ne seront pas enregistrées correctement. C'est bon; Les documents HTML n'utilisent pas ces options.
2
Visualisez votre document avec un navigateur Internet. Enregistrez votre document vierge, puis recherchez l'icône du document sur votre ordinateur et double-cliquez pour l'ouvrir. Il devrait s'ouvrir comme une page Web vierge dans votre navigateur. Si ce n'est pas le cas, faites glisser l'icône du fichier vers la barre d'URL (adresse) de votre navigateur. Au fur et à mesure que vous modifiez votre document HTML dans ce didacticiel, vous pouvez continuer à vérifier et à voir comment votre page Web change.
- Notez que cela ne crée pas réellement un site Web en ligne. Il ne sera pas accessible par d'autres personnes et vous n'avez pas besoin d'une connexion Internet pour le tester. Cela utilise simplement un navigateur pour "lire" votre document HTML comme s'il s'agissait d'un site Web.
3
Comprendre les balises de balisage. Les balises de balisage n'apparaissent pas sur une page Web comme du texte normal. Au lieu de cela, ils indiquent à votre navigateur Web comment afficher la page et son contenu. La "balise de début" contient des instructions. Par exemple, il peut indiquer au navigateur d'afficher le texte en gras. Vous avez également besoin d'une "balise de fin" pour indiquer au navigateur où s'appliquent les instructions: dans cet exemple, tout le texte entre la balise de début et la balise de fin sera en gras. Écrivez également les balises de fin à l'intérieur des crochets angulaires, mais commencez par une barre oblique après le premier crochet.
- Écrivez les balises de début entre crochets angulaires: la <balise de début va ici >
- Écrivez les balises de fin entre les crochets angulaires, mais mettez une barre oblique après le premier crochet: la </balise de fin va ici >)
- Continuez votre lecture pour apprendre à écrire des balises de balisage fonctionnelles. Pour cette étape, tout ce que vous devez retenir est le format de base dans lequel ils sont écrits: < > et </ >
- Si vous utilisez également d'autres didacticiels HTML, vous pourriez les voir se référer aux balises en tant qu'«éléments» et au texte entre les balises de début et de fin en tant que «contenu d'élément».
4
Écrivez votre première balise <html>. Chaque document HTML commence par une <html>balise et se termine par une </html>balise. Cela indique au navigateur que tout ce qui se trouve entre ces balises est en HTML. Ajoutez ces balises à votre document:
- Souvent, les fichiers HTML commencent par une <!DOCTYPE html>ligne qui indique que le fichier dans son ensemble doit être lu comme un fichier HTML par les navigateurs. Ce n'est pas nécessaire, mais peut aider à résoudre les problèmes de compatibilité.
- Écrivez <html> en haut de votre document.
- Appuyez plusieurs fois sur Entrée ou Retour pour vous donner un peu d'espace, puis écrivez </html>
- N'oubliez pas d'écrire tout le reste dans ce tutoriel entre ces deux balises.
5
Remplissez la partie <head> de votre document. Entre les balises <html> et </html>, écrivez une balise de début <head> et une balise de fin </head>. Donnez-vous de l'espace pour écrire entre eux. Tout ce qui se trouve entre ces balises head ne sera pas affiché sur la page elle-même. Essayez ce qui suit et voyez où il apparaît à la place:
- Entre les balises <head> et </head>, écrivez <title> et </title>
- Entre les balises <title> et </title>, écrivez How to learn HTML - guide.
- Enregistrez le document et ouvrez-le dans un navigateur (ou enregistrez le document, puis actualisez la page du navigateur s'il est déjà ouvert.) Voyez-vous ce que vous avez écrit en haut du navigateur, au-dessus de la barre d'adresse?
6

Créez une section <body>. Tout le reste de ce document pour débutant ira dans une section de corps, qui s'affichera en fait sur la page Web. Après la balise de fin </head>, mais avant la balise </html>, écrivez <body> et </body>. Pour le reste de ce didacticiel, tout ce que vous écrivez ira entre ces balises corporelles. Vous devriez maintenant avoir un document qui ressemble à ceci:
<html> <head> <title>How to Learn HTML - guide</title> </head> <body> </body> </html>
7
Ajoutez du texte dans différents styles. Il est maintenant temps d'écrire quelque chose que vous pouvez réellement voir dans votre navigateur! Tout ce que vous écrivez dans les balises body apparaîtra dans votre navigateur après avoir enregistré le document HTML et actualisé la page du navigateur. N'écrivez rien avec les symboles < ou >, car votre navigateur essaiera de l'interpréter comme une instruction HTML au lieu d'un texte normal. Essayez d'écrire Bonjour tout le monde! (ou tout ce que vous aimez), puis ajoutez ces nouvelles balises autour et voyez ce qui se passe à chaque fois:
- <em>Hello world!</em>s'affichera sous la forme d'un «texte accentué:» Bonjour tout le monde!
- <strong>Hello world!</strong>apparaîtra comme "texte fort:" Bonjour tout le monde!
- <s>Hello world!</s>apparaîtra avec un barré: ~~Hello world!~~
- <sup>Hello world!</sup>apparaîtra en exposant: ^{Hello world!}
- <sub>Hello world!</sub>apparaîtra en indice: _{Hello world!}
- Essayez des combinaisons de celles-ci: À quoi <em><strong>Hello world!</strong></em>ressemble-t-il?
8
Divisez votre texte en paragraphes. Si vous essayez d'écrire plusieurs lignes de texte dans votre document HTML, vous remarquerez peut-être que les sauts de ligne n'apparaissent pas dans votre navigateur. Vous devez les coder vous-même:
- <p>This is a separate paragraph.</p>
- This sentence is followed by a line break.<br>before this sentence begins.
  C'est la première balise que vous voyez qui n'a pas besoin de balise de fin! Celles-ci sont appelées «balises vides».
- Faire des en-têtes pour afficher les noms des sections:
  <h1>header text</h1>: l'en-tête le plus grand
  <h2>header text</h2>(l'en- tête de 2 ^ème niveau)
  <h3>header text</h3>(l'en- tête de 3 ^ème niveau)
  <h4>header text</h4>(l'en- tête de 4 ^ème niveau)
  <h5>header text</h5>(le plus petit en-tête)
9
Apprenez à faire des listes. Il existe plusieurs façons d'écrire des listes sur votre page Web. Essayez les types de code suivants et voyez celui que vous aimez. Notez qu'une paire de balises fait le tour de toute la liste (comme les balises <ul> et </ul> pour "liste non ordonnée"), tandis que les éléments individuels de la liste sont entourés d'une autre paire de balises, telle que <li> et</li>.
- Utilisez ce code pour créer des listes à puces:
  <ul><li>One item</li><li>Another item</li><li>Another item</li></ul>
- Ou ce code pour faire des listes numérotées:
  <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
- Ou ce code pour faire une liste définissant les termes:
  <dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold Beverage</dd></dl>
10
Agrémentez votre page avec des sauts de ligne, des lignes horizontales et des images. Il est maintenant temps d'essayer d'ajouter des éléments autres que du texte à votre page. Essayez les balises suivantes ou cliquez sur les liens pour plus d'informations. Vous devrez utiliser un service d'hébergement d'images en ligne afin d'avoir une URL vers laquelle créer un lien dans la balise d'image:
- Insérer une ligne en HTML: <br>ou <hr>
- Ajouter des images: <img src="_image_url">
11
Lien vers d'autres endroits sur la page. Vous pouvez également utiliser ce code pour créer un lien vers d'autres pages et sites Web, mais pour l'instant, étant donné que vous n'avez peut-être pas encore de site Web, nous nous concentrerons sur les «ancres» ou des endroits spécifiques de la page vers lesquels vous pouvez créer un lien:
- Commencez par créer une ancre avec la balise <a> au point de la page vers laquelle vous souhaitez créer un lien. Nommez-le quelque chose de descriptif et facile à retenir.:
  <a name="Tips">This is the text you put the anchor around.</a>
- Utilisez le <href> pour créer un lien vers ces ancres ou vers une autre page Web:
  <a href=" of webpage, or name of anchor within this page">Write the text or image that will be displayed as a link here.</a>
- Pour créer un lien vers une ancre sur une autre page Web, ajoutez le signe # après l'URL, suivi du nom de l'ancre. Par exemple, [cette adresse de site Web] renvoie à la section Conseils de cette page.

À mesure que vous modifiez votre document HTML dans ce didacticiel — Au fur et à mesure que vous modifiez votre document HTML dans ce didacticiel, vous pouvez continuer à vérifier et à voir comment votre page Web change.

Partie 2 sur 2: apprendre un html plus avancé

1
En savoir plus sur les attributs. Les attributs sont placés dans la balise elle-même, apportant des modifications supplémentaires au "contenu de l'élément" entre la balise de début et la balise de fin. Ils ne sont jamais seuls. Ils sont écrits au format nom="valeur", où nom est le nom de l'attribut (par exemple "couleur"), et valeur décrit cette instance spécifique (par exemple "rouge").
- Vous avez déjà vu des attributs auparavant, si vous avez suivi le didacticiel de la section HTML de base. Les balises <img> utilisent l' attribut src, les ancres utilisent l' attribut name et les liens utilisent l' attribut href. Voyez comment ceux-ci suivent tous le format __="__"?
2
Expérimentez avec des tableaux HTML. Faire un tableau, ou un graphique, nécessite plusieurs balises différentes. Jouez avec ces balises ou découvrez les tableaux HTML plus en détail.
- Commencez par des balises de table autour de la table entière: <table></table>
- Balises de ligne autour du contenu de chaque ligne: <tr>
- En-têtes de colonne dans la première ligne: <th>
- Cellules dans les lignes suivantes: <td>
- Voici un exemple de la façon dont tout cela s'emboîte:
  <table><tr><th>Column 1: Month</th><th>Column 2: Money Saved</th></tr><tr><td>January</td><td>75€</td></tr></table>
3
Apprenez les diverses balises de tête. Vous avez déjà appris la balise <head>, qui apparaît au début de chaque document. Outre la balise <title>, il peut inclure les types de balises suivants:
- Balises Meta, qui sont utilisées pour fournir des métadonnées sur une page Web. Ces données peuvent être utilisées par les moteurs de recherche lorsque le robot parcourt Internet pour localiser et répertorier des sites Web. Pour rendre votre site Web plus visible sur les moteurs de recherche, utilisez une ou plusieurs balises de début <meta> (aucune balise de fin nécessaire), chacune avec exactement un attribut de nom et un attribut de contenu, par exemple: <meta name="description" content=" écrivez une description ici">; ou <meta name="keywords" content="écrire une liste de mots-clés, chacun séparé par une virgule">
- Les balises <link> sont utilisées pour associer d'autres fichiers à la page. Ceci est principalement utilisé pour créer un lien vers des feuilles de style CSS, qui sont créées à l'aide d'un type de codage différent pour modifier votre page HTML en ajoutant de la couleur, en alignant votre texte et bien d'autres choses.
- Les balises <script> sont utilisées pour lier la page aux fichiers Javascript, ce qui peut entraîner la modification de la page lorsque l'utilisateur interagit avec elle.
4
Jouez avec le HTML trouvé sur les sites Web. Un excellent moyen d'élargir vos connaissances est de consulter la source HTML des pages Web. Vous pouvez le faire en cliquant avec le bouton droit sur la page et en sélectionnant «Afficher la source», «Afficher la source de la page» ou une option similaire, ou en accédant à la section Afficher dans le menu supérieur de votre navigateur. Essayez de comprendre ce que fait chaque balise HTML inconnue ou recherchez-la en ligne pour la réponse.
- Bien que vous ne puissiez pas modifier les sites Web d'autres personnes, vous pouvez copier le code HTML que vous trouvez dans votre propre document, puis jouer avec pour voir ce que font les différentes options. Notez que, sans la feuille de style CSS vers laquelle le site Web est lié, vous ne pourrez peut-être pas voir toutes les couleurs ou la mise en forme.
5

Apprenez une conception Web plus avancée à partir de guides complets. Il existe diverses ressources sur Internet que vous pouvez utiliser pour en savoir plus sur de nombreuses autres balises HTML, telles que W3schools ou Codecademy. Vous pouvez également trouver des livres contenant des didacticiels sur le HTML, mais assurez-vous d'en utiliser un qui a été publié au cours des deux dernières années, car il y a des mises à jour et des modifications occasionnelles. Mieux encore, apprenez CSS pour avoir beaucoup plus de contrôle sur la mise en page et l'apparence de votre page Web. Une fois que vous avez terminé CSS, la prochaine étape pour les concepteurs de sites Web est généralement Javascript.

Il existe diverses ressources sur Internet que vous pouvez utiliser pour en savoir plus sur de nombreuses autres balises HTML, telles que W3schools ou Codecademy.

Conseils

Notepad ++ est un excellent programme gratuit, qui agit comme un bloc-notes ordinaire, mais vous pouvez enregistrer et tester votre code en direct dans un navigateur. ((Il permet également presque n'importe quel langage de codage. HTML, CSS, python, Javascript, etc.))
Vous pouvez essayer de trouver une simple page Web sur Internet et de jouer avec le code. Essayez de déplacer du texte, de changer la police, de modifier des images, tout ce qui vous plaît!
Vous pouvez obtenir un cahier et écrire tous les codes, de sorte que si vous avez besoin d'un rappel, vous pouvez simplement ouvrir votre cahier et voir. Vous pouvez également imprimer cette page comme point de référence utile.
Lors du codage, assurez-vous de disposer votre code proprement, afin qu'il soit possible pour vous et les autres de le comprendre. Utilisez <! - Insérez un commentaire ici -> pour les commentaires HTML, qui n'apparaissent pas dans la page Web, mais dans le code.
XML et RSS deviennent de plus en plus courants sur les sites Web de nos jours. Leur code peut sembler difficile à lire et à comprendre pour l'observateur humain, en particulier lorsqu'il est visualisé sur un fichier de code source HTML, mais ils ont leurs propres effets.
Les balises de balisage elles-mêmes en HTML ne sont pas sensibles à la casse, mais l'utilisation de toutes les minuscules (telles qu'utilisées sur cette page) est fortement recommandée à des fins de normalisation et de compatibilité avec XHTML.

Tout ce que vous écrivez dans les balises body apparaîtra dans votre navigateur après avoir enregistré le document HTML et actualisé la page du navigateur.

Mises en garde

Certaines balises sont devenues obsolètes au cours des dernières années et ont été remplacées par d'autres options pour produire les mêmes effets, et même ajouter des effets différents, si vous le souhaitez.
Si la validation de vos pages vous intéresse, rendez-vous sur le site Web de W3 et apprenez du HTML valide! Les normes HTML changent au fil du temps et certaines balises sont remplacées par des balises différentes qui fonctionnent mieux sur les navigateurs modernes.

Choses dont vous aurez besoin

Programme d'édition de texte, par exemple Bloc-notes (Windows) ou TextEdit (Mac)
Cahier papier/écriture (facultatif)
Programme d'édition HTML comme Notepad++ (Windows) ou TextWrangler (Mac) (facultatif)

Lisez aussi: Comment ajouter votre URL à Google?

Comment apprendre le HTML?

Pas

Partie 1 sur 2: apprendre le html de base

Partie 2 sur 2: apprendre un html plus avancé

Conseils

Mises en garde

Choses dont vous aurez besoin

Questions et réponses

Les commentaires (16)

Lisez aussi: