Comment apprendre le HTML

Vidéo: [Cours HTML] Apprendre HTML de zéro

Contenu

Pas
Partie 1 sur 2: Apprendre les bases du HTML
Partie 2 sur 2: HTML avancé
Conseils
Avertissements
De quoi avez-vous besoin

HTML est l'abréviation de l'anglais Langage Signalétique Hyper Text (Langage Signalétique Hyper Text). Il s'agit du code, ou langage, dans lequel le balisage de base des sites est créé. Apprendre peut sembler intimidant si vous n'avez jamais programmé, mais en réalité, tout ce dont vous avez besoin pour commencer est un éditeur de texte de base et un navigateur Internet. Vous pouvez même reconnaître quelques exemples de balisage HTML que vous avez rencontrés sur des forums Internet, des pages personnalisées personnalisées ou des articles wikiHow. Le HTML est un outil utile pour tout internaute, et apprendre les bases prendra moins de temps que vous ne le pensez.

Pas

Partie 1 sur 2: Apprendre les bases du HTML

1 Ouvrez un document HTML. La plupart des éditeurs de texte (Notepad ou Notepad ++ pour Windows, TextEdit pour Mac, gedit pour GNU/Linux) peuvent être utilisés pour générer des fichiers HTML. Créez un nouveau document et enregistrez-le en utilisant Fichier → Enregistrer sous au format de page Web, ou modifiez l'extension de fichier en .html ou .htm au lieu de .doc, .rtf ou une autre extension.
- Vous pouvez recevoir un avertissement indiquant que le fichier sera enregistré en tant que "texte brut" au lieu du format RTF, ou que le formatage et les images ne seront pas enregistrés. C'est bon; pour HTML, ces options ne sont pas nécessaires.
2 Ouvrez le fichier généré dans un navigateur. Enregistrez le fichier vierge, recherchez-le sur votre ordinateur et double-cliquez dessus pour l'ouvrir. Une page vierge devrait s'ouvrir dans le navigateur. Si ce n'est pas le cas, faites glisser le fichier vers la barre d'adresse de votre navigateur. Lorsque vous modifiez le fichier HTML, vous pouvez actualiser cette page pour voir les modifications.
- Veuillez noter que de cette façon, vous ne créez pas de site Web sur Internet. Les autres personnes n'auront pas accès à cette page et vous n'avez pas besoin d'une connexion Internet pour tester votre page locale. Le navigateur interprète simplement le code HTML, le « lisant » comme s'il s'agissait d'un site Web.
3 Comprenez ce que sont les balises de balisage. Contrairement au texte normal, les balises n'apparaissent pas sur la page. Au lieu de cela, ils indiquent au navigateur comment afficher la page et son contenu. La balise « ouverture » contient des instructions. Par exemple, il peut indiquer au navigateur que le texte doit être affiché comme audacieux... Il a également besoin d'une balise "end" pour montrer au navigateur où l'instruction se termine. Dans cet exemple, le texte entre les balises de début et de fin sera affiché en gras. Les balises sont écrites à l'intérieur de signes inégaux, mais la balise de fin commence par une barre oblique.
- La balise d'ouverture est écrite entre les signes d'inégalité : balise d'ouverture>
- Dans la balise de fermeture, une barre oblique est placée avant le descripteur de balise (nom) : /balise de fin>
- Lisez la suite pour savoir comment les différentes balises sont utilisées. Pour cette étape, il vous suffit de vous souvenir du format d'enregistrement. Les balises sont écrites entre les signes d'inégalité :> et />
- Dans certains didacticiels, les balises HTML sont appelées éléments et le texte entre les balises d'ouverture et de fermeture est appelé contenu d'élément.
4 Tapez la balise html> dans l'éditeur. Chaque fichier HTML doit commencer par une balise html> et se termine par une balise /html>... Ces balises indiquent au navigateur que tout le contenu entre les balises est en HTML. Ajoutez ces balises à votre document :
- Souvent, les fichiers HTML commencent par la ligne ! DOCTYPE html>ce qui signifie que les navigateurs doivent reconnaître l'intégralité du fichier au format HTML. Cette ligne n'est pas nécessaire, mais elle peut vous aider à résoudre les problèmes de compatibilité.
- Cadran html> en haut du document.
- Appuyez sur Entrée ou Retour plusieurs fois pour créer plusieurs lignes vierges, puis tapez /html>
- rappelez-vous, que la totalité le code que vous allez créer dans cet article devra être écrit entre ces deux balises.
5 Créez une section head> dans le fichier. Entre les balises html> et /html>, créez une balise d'ouverture tête> et la balise de fermeture / tête>... Ajoutez quelques lignes vides entre eux. Le contenu écrit entre les balises head> et /head> n'est pas affiché sur la page elle-même. Suivez ces étapes et vous verrez à quoi sert cette balise :
- Entre les balises head> et /head>, écrivez titre> et / titre>
- Entre les balises title> et /title>, écrivez Comment apprendre le HTML - wikiHow.
- Enregistrez vos modifications et ouvrez le fichier dans un navigateur (ou actualisez la page si le fichier est déjà ouvert). Vous voyez le texte qui apparaît dans le titre de la page au-dessus de la barre d'adresse ?
6 Créez une section corps>. Toutes les autres balises et le texte de cet exemple sont écrits dans la section body, dont le contenu est affiché sur la page. Après balise de fermeture / tête>, mais avant balise / html> ajouter des balises corps> et / corps>... Pour le reste de cet article, travaillez avec la section corps. Votre fichier devrait ressembler à ceci :
html>
tête>
title> Comment apprendre le HTML - wikiHow / title>
/ tête>
corps>
/ corps>
/html>
7 Ajoutez du texte en utilisant différents styles. Il est temps d'ajouter le vrai contenu à la page ! Tout ce que vous écrivez entre les balises body sera affiché sur la page après avoir été actualisé dans le navigateur. Ne pas utiliser symboles ou alors >car le navigateur essaiera d'interpréter le contenu comme une balise au lieu de texte. Écrivez Bonjour! (ou ce que vous voulez), puis essayez d'ajouter ces balises au texte et voyez ce qui se passe :
- em> Bonjour à tous ! / em> rend le texte "en italique": Bonjour!
- fort> Bonjour à tous ! / fort> rend le texte "gras": Bonjour!
- s> Bonjour à tous ! / s> texte barré : ~~Bonjour!~~
- sup> Bonjour à tous ! / sup> affiche la police en exposant :
- sub> Bonjour à tous ! / sub> affiche la police en indice : _Bonjour!
- Essayez différentes balises ensemble. A quoi ça ressemblera em> strong> Bonjour à tous ! / strong> / em>?
8 Divisez le texte en paragraphes. Si vous essayez d'écrire plusieurs lignes de texte dans un fichier HTML, vous remarquerez que les sauts de ligne ne s'affichent pas dans le navigateur. Pour diviser le texte en paragraphes, vous devez ajouter des balises :
- p> Ceci est un paragraphe séparé. / p>
- Cette phrase est suivie d'un saut de ligne br> avant le début de cette ligne.
  C'est la première balise qui ne nécessite pas de balise de fin. Ces balises sont appelées balises "vides".
- Créez des en-têtes pour afficher les titres des sections :
  h1> texte d'en-tête / h1>: plus grand titre
  h2> texte d'en-tête / h2> (titre de deuxième niveau)
  h3> texte d'en-tête / h3> (titre de troisième niveau)
  h4> texte d'en-tête / h4> (titre de quatrième niveau)
  h5> texte d'en-tête / h5> (le plus petit titre)
9 Apprenez à créer des listes. Il existe plusieurs façons de créer des listes sur une page Web. Essayez les options ci-dessous et choisissez celle que vous préférez. Notez qu'une paire de balises est nécessaire pour la liste dans son ensemble (par exemple, ul> et / ul> pour une liste à puces), et chaque élément de la liste est mis en évidence avec une paire de balises différente, par exemple, li> et / li>.
- Liste à puces:
  ul> li> Première ligne / li> li> Deuxième ligne / li> li> Et ainsi de suite / li> / ul>
- Liste numérotée :
  ol> li> Un / li> li> Deux / li> li> Trois / li> / ol>
- Liste de définitions :
  dl> dt> Café / dt> dd> - boisson chaude / dd> dt> Limonade / dt> dd> - boisson froide / dd> / dl>
10 Disposez la page en utilisant sauts de ligne, lignes horizontales et Des photos. Il est temps d'ajouter autre chose que du texte à la page. Essayez les balises suivantes ou suivez les liens pour plus d'informations. Utilisez un service d'hébergement en ligne pour créer un lien vers l'image que vous souhaitez publier :
- Ligne horizontale: h>
- Insérer une image : img src = "lien image">
11 Ajouter des liens. Vous pouvez utiliser ces balises pour créer des liens hypertexte vers d'autres pages et sites, mais comme vous n'avez pas encore de site Web, vous allez maintenant apprendre à créer des liens d'ancrage, c'est-à-dire des liens vers des emplacements spécifiques sur une page :
- Créez une ancre avec la balise a> où vous souhaitez créer un lien sur la page. Trouvez un nom clair et mémorable :
  
  a name = "Tips"> Le texte vers lequel vous créez un lien. / a>
- Utilisez la balise href> pour créer un lien relatif ou un lien vers une ressource externe :
  
  a href = "lien vers la page ou nom de l'ancre dans la page"> Texte ou image qui servira de lien. / a>
- Pour créer un lien vers un lien relatif sur une autre page, ajoutez un signe # après le lien principal et le nom de l'ancre. Par exemple, https://en.wikihow.com/learn-HTML#Tips renvoie à la section astuces de cette page.

Partie 2 sur 2: HTML avancé

1 Apprenez à connaître les attributs. Les attributs sont écrits à l'intérieur de la balise, indiquant des informations supplémentaires. Le format des attributs est le suivant : nom = "valeur", où Titre définit un attribut (par exemple, Couleur pour un attribut de couleur), et la valeur indique sa valeur (par exemple, rouge pour le rouge).
- Les attributs ont en fait été utilisés dans la section précédente sur les bases du HTML. La balise img> utilise l'attribut src, les ancres de liens relatifs utilisent l'attribut Nomet les liens utilisent l'attribut href... Comme vous l'avez déjà remarqué, tous les attributs sont écrits au format ___='___’.
2 Expérimentez avec des tableaux HTML. La création d'un tableau implique l'utilisation de différentes balises. Vous pouvez expérimenter ou lire des instructions plus détaillées.
- Créer des balises de tableau :tableau> / tableau>
- Placez le contenu de chaque ligne du tableau dans des balises : tr>
- L'en-tête de colonne est défini par la balise : e>
- Cellules dans les lignes suivantes : td>
- Un exemple d'utilisation de ces balises :
  
  table> tr> th> Colonne 1: mois / th> th> Colonne 2: épargne / th> / tr> tr> td> Janvier / td> td> 5000 roubles / td> / tr> / table>
3 Apprenez les balises supplémentaires de la section de tête. Vous avez déjà appris la balise head> qui vient au début de chaque fichier html. Outre la balise title>, il existe d'autres balises pour cette section :
- Les balises méta qui contiennent métadonnéesutilisé par les moteurs de recherche pour indexer le site. Pour rendre votre site plus facile à trouver dans les moteurs de recherche, utilisez une ou plusieurs balises méta> ouvrantes (les balises fermantes ne sont pas nécessaires).Utilisez un attribut et une valeur par balise : meta name = "description" content = "page description">; ou meta name = "mots-clés" content = "mots-clés séparés par des virgules">
- Les balises Link> qui pointent vers des fichiers tiers, tels que les feuilles de style (CSS), qui sont créées à l'aide d'un type d'encodage différent et vous permettent de modifier la page HTML à l'aide de la couleur, de l'alignement du texte et de nombreuses autres fonctionnalités.
- Les balises script> utilisées pour joindre des fichiers JavaScript à la page. Ces fichiers sont nécessaires pour modifier la page de manière interactive (en réponse aux actions de l'utilisateur).
4 Expérimentez avec le code HTML d'autres sites. L'affichage du code source d'autres pages Web est un excellent moyen d'apprendre le HTML. Vous pouvez cliquer avec le bouton droit sur la page et sélectionner Afficher la source ou quelque chose de similaire dans le menu supérieur de votre navigateur. Essayez de comprendre à quoi sert une balise inconnue ou recherchez des informations à son sujet sur Internet.
- Bien que vous ne puissiez pas modifier les sites d'autres personnes, vous pouvez copier le code source dans votre fichier pour tester les balises ultérieurement. Veuillez noter que le balisage CSS peut ne pas être disponible et que les couleurs et la mise en forme peuvent sembler différentes.
5 Commencez à explorer des guides plus détaillés. Il existe de nombreux sites sur Internet dédiés aux balises HTML, comme W3Schools ou HTMLbook. Il existe également des livres papier en vente, mais essayez de trouver la dernière édition au fur et à mesure que les normes changent et évoluent. Mieux encore, maîtrisez le CSS pour avoir beaucoup plus de contrôle sur la mise en page et l'apparence de votre site. Après avoir appris CSS, les concepteurs de sites Web apprennent généralement JavaScript.

Conseils

Notepad ++ est un excellent programme gratuit, similaire au Bloc-notes classique, mais vous pouvez enregistrer et tester votre code dans votre navigateur en ligne. (Il prend également en charge presque tous les langages - HTML, CSS, Python, JavaScript, etc.)
Trouvez une page simple sur le net, enregistrez le code sur votre ordinateur et expérimentez-le. Essayez de déplacer du texte, de changer la police, de remplacer des images - peu importe !
Vous pouvez garder un cahier où vous écrivez des étiquettes afin de les avoir toujours à portée de main. Vous pouvez également imprimer cette page et vous y référer.
Lorsque vous écrivez du code, faites-le soigneusement afin que vous et les autres personnes puissiez le comprendre. Utilisez ! - Insérez un commentaire ici -> pour les commentaires HTML : ils ne seront pas reflétés sur la page, mais seront visibles dans le document de code.
XML et RSS gagnent en popularité. Le code des pages contenant les technologies XML et RSS est plus difficile à lire et à comprendre pour un utilisateur inexpérimenté, mais ces outils sont très utiles.
Les balises de balisage en HTML sont insensibles à la casse, mais nous vous recommandons d'utiliser uniquement des lettres minuscules (comme dans les exemples de cet article) pour la normalisation et la compatibilité XHTML.

Avertissements

Certaines étiquettes sont devenues obsolètes au cours des dernières années et ont été remplacées par de nouvelles qui donnent les mêmes effets ou des effets supplémentaires.
Si vous souhaitez tester votre page, rendez-vous sur le site W3 et vérifiez les exigences HTML modernes. Les normes HTML changent au fil du temps et certaines balises sont remplacées par de nouvelles qui fonctionnent mieux dans les navigateurs modernes.

De quoi avez-vous besoin

Un éditeur de texte tel que Notepad (Windows) ou TextEdit (Mac)
Papier / bloc-notes (pas nécessaire)
Éditeur HTML tel que Notepad ++ (Windows) ou TextWrangler (Mac) (pas nécessaire)