Que sont les balises et attributs HTML, validateur W3C. Structure et règles d'écriture des balises. Référence des balises HTML

Nous avons examiné un exemple de création d'une page simple où des commentaires étaient donnés sur certaines balises html, car il me semble qu'il vaut mieux d'abord montrer quelque chose avec un exemple puis passer à une description plus détaillée. C'est pourquoi la création d'une page a été abordée dans la deuxième leçon, et plus en détail dans la troisième.

Vous trouverez donc ci-dessous des descriptions des balises HTML courantes utilisées sur presque toutes les pages du site. Croyez-moi, ils sont déjà suffisamment nombreux pour écrire un site Web entier.

Liste des balises HTML 1. Balise HTML (pour les paragraphes) - affiche un paragraphe de texte (autorise les attributs de style, de classe et d'identifiant). La balise la plus courante, car le texte y est le plus souvent placé (cependant, c'est pour cela qu'elle a été créée).

Par exemple, le code html :

Texte du paragraphe numéro un

Et ceci est un autre paragraphe

Texte du paragraphe numéro un

Et ceci est un autre paragraphe

Vous pouvez également ajouter un paramètre de style à la balise :

Ces différentes valeurs peuvent être utilisées pour modifier l’apparence de la police. Vous pouvez en savoir plus sur ces paramètres dans une leçon séparée : les styles en HTML et la propriété de police CSS.

Vous pouvez également spécifier les attributs CLASS et ID. Par exemple:

2. Balise HTML et (en gras)

Et - deux balises qui permettent de mettre la police en gras. Il n'y a aucune différence entre ces balises.

Donnons un exemple. Code HTML:

vignette

Convertit ce qui suit sur la page :

vignette

Vous pouvez également spécifier les attributs CLASS et ID (comme dans le cas de Note

Ces balises ont peu d’impact sur le classement des documents dans les moteurs de recherche, mieux vaut donc ne pas les utiliser sans but.

3. Balise HTML (créer des italiques)

- police italique (autorise les paramètres de style, de classe et d'identifiant)

Par exemple, le code html :

texte en italique

Convertit ce qui suit sur la page :

4. Balise HTML (texte souligné)

- police soulignée (autorise les paramètres de style, de classe et d'identifiant)

Par exemple, le code html :

texte souligné

Convertit ce qui suit sur la page :

texte souligné

5. Balise HTML (création d'un hyperlien)

Crée un lien sur la page (autorise le style, la classe et d'autres paramètres).

Par exemple, le code html :

texte du lien

Convertit ce qui suit sur la page :

Tous les paramètres et attributs des balises sera abordé dans une leçon séparée : balise html.

6. Balise HTML (titres dans le contenu)

,..., - balises d'en-tête à l'intérieur du contenu (autorise le paramètre style, classe, id). De plus, plus le nombre est petit, plus le poids et la taille (par défaut) du texte enfermé dans ces balises sont importants.

Par exemple, le code html :

Rubrique h1

La balise est utilisée pour le titre de la page (ainsi que le titre)

Ces balises doivent être utilisées uniquement aux fins prévues, c'est-à-dire seulement lorsque l'article a besoin d'un titre. Cela est dû au fait que les balises,..., ont une grande influence sur les moteurs de recherche. Si vous les utilisez correctement, les chances d’arriver en tête des résultats de recherche sont très élevées.

7. Balise HTML (alignement)

- aligne le contenu au centre.

Par exemple, le code html :

Ce texte sera au centre

Convertit ce qui suit sur la page :

Ce texte sera au centre

Note
  • - pour le texte
  • ... - pour tout (par exemple, une image)
8. Balise HTML (texte en indice)

- affiche la police d'indice.

Par exemple, le code html :

Texte brut, texte interlinéaire

Convertit ce qui suit sur la page :

Texte brut, texte interlinéaire

9. Balise HTML (texte en exposant)

- affiche la police en exposant.

Par exemple, le code html :

Texte brut, texte en exposant

Convertit ce qui suit sur la page :

Texte brut, texte en exposant

10. Balise HTML,

, - affiche une police d'un pixel plus grande/plus petite que la taille actuelle (autorisée par le paramètre style, class, id).

Par exemple, le code html :

Police normale, cette police est un pixel plus grande

Convertit ce qui suit sur la page :

Police normale, cette police est un pixel plus grande

11. Balise HTML
    (création de listes)

    Affiche une liste (accepte les paramètres de style, de classe et d'identifiant). Chaque nouvel élément est écrit entre

  • Et
  • .

    Par exemple, le code html :

    Liste:
    • premier élément de la liste
    • deuxième élément de la liste

    Convertit ce qui suit sur la page :

    Liste:

    • premier élément de la liste
    • deuxième élément de la liste
    12. Balise HTML (création de tableaux)

    - crée un tableau (autorise le style, paramètre de classe). Chaque nouvelle ligne est créée par des balises , et la colonne .

    Par exemple, le code html :

    1 ligne 1 élément1ère ligne 2ème élément
    2 lignes 1 élément2 lignes 2 éléments

    Convertit ce qui suit sur la page :

    Toutes les fonctionnalités des balises

    13. Balise HTML
    (saut de ligne)


    - le passage à la ligne suivante est une seule balise.

    Par exemple, le code html :

    Ligne 1
    2 lignes
    3ème ligne Et ce texte sera sur la 3ème ligne, puisqu'il n'y a pas eu de transition

    Convertit ce qui suit sur la page :

    1 ligne
    2 lignes
    3ème ligne Et ce texte sera sur la 3ème ligne, puisqu'il n'y a pas eu de transition

    14. Balise HTML (ligne horizontale)

    - trace une ligne, représente une seule balise (autorise le style, le paramètre de classe).

    Par exemple, le code html :

    Du texte au-dessus de la ligne et ce texte sera en dessous de la ligne

    Convertit ce qui suit sur la page :

    Du texte au-dessus de la ligne et ce texte sera en dessous de la ligne

    15. Balise HTML (sortie d'image)

    Par exemple, le code html :

    http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">

    Convertit ce qui suit sur la page :

    Toutes les fonctionnalités des balises sera abordé dans une leçon séparée : .

    16. Balise HTML (formatage du texte)

    - pour formater le texte, changer de style, etc. (autorise le style de paramètre, la classe, l'identifiant). Son poids aux yeux des moteurs de recherche est absent, vous pouvez donc l’utiliser autant que vous le souhaitez.

    Par exemple, le code html :

    Ce texte est vert et sa taille est de 15 pixels

    Convertit ce qui suit sur la page :

    Note

    Une balise similaire est .

    17. Balise HTML (création de formulaire)

    - créer un formulaire sur la page (autorise le style, paramètre de classe).

    Par exemple, saisir un identifiant et un mot de passe, des boutons, n'importe quel formulaire d'inscription - ce sont tous des formulaires.

    18. Balise HTML (création de blocs)

    - utilisé pour créer des blocs sur la page (autorise le style, paramètre de classe). Auparavant, les tableaux étaient principalement utilisés pour baliser les pages. Une fois le tag apparu, la tâche est devenue plus facile. Presque tous les sites Web contiennent des blocs comme alternative pratique aux tableaux.

    Dans la vie de chaque rédacteur, il arrive une étape de familiarisation avec les balises HTML. Cela se produit généralement spontanément et ressemble à une demande du client de « préparer le texte pour la publication ». Cela signifie que dans l'article, vous devez mettre en évidence les titres, les paragraphes, les endroits importants et les listes, mais pas avec les capacités de Word, mais avec un code de langage HTML spécial. Les balises pour un rédacteur vous y aideront. La liste requise pour le travail est généralement petite, mais elle suffit pour formater le texte selon les exigences standard. Qu'est-ce qui est inclus dans les balises html nécessaires à un rédacteur publicitaire ? (Si vous êtes trop paresseux pour lire, faites défiler vers le bas - il existe une infographie thématique simple et claire sur les balises html !)

    Le rédacteur pose des questions traditionnelles. Et ils commencent tous par la formulation « quelle balise est utilisée pour spécifier » :

    • titre;
    • paragraphe;
    • vignette;
    • italique;
    • liste à puces/sans étiquette/

    Tout cela ajoute du piquant à la tâche technique et stimule l'acquisition de nouvelles connaissances. La situation empire lorsqu'il s'agit d'utiliser une balise de texte en gras pour augmenter l'attractivité de la clé dans le PS. Mais tout cela peut être résolu très simplement, ce dont nous allons parler maintenant.

    Balises pour créer des titres

    Les balises permettant de créer des titres sont représentées par les éléments h1-h6. Ils ont reçu leur lettre de l'anglais Header (heading). Pour définir le type d'en-tête requis et souligner son importance pour le PS, utilisez le code suivant :

    Titre h1 Titre h2 Titre h3 Titre h4 Titre h5 Titre h6

    Sur le site Web, cela ressemblera à ceci.

    Titre h1 Titre h2 Titre h3 Titre h4 Titre h5 Titre h6

    Le cap h1 a le plus de signification - et de visibilité -. Il est utilisé comme titre d’un article et n’est utilisé qu’une seule fois. Pour les sous-titres du texte, h2 et h3 sont recommandés. Ils aident à souligner l'importance du matériel considéré et à diviser l'article en niveaux d'information.

    Les en-têtes h4-h6 ne sont pratiquement pas utilisés, mais ils sont demandés pour mettre en évidence des blocs logiques et des fragments importants.

    Pour les gros articles, il est préférable d'utiliser les rubriques h1-h3, pour les petits articles - h1 et h2.

    Listes : à puces et sans étiquette

    Un bon texte structuré comporte toujours une, voire plusieurs listes. Selon leur apparence, les listes sont :

  • marqués - ils sont numérotés ;
  • non marqué – les éléments sont mis en évidence par des symboles.
  • Mais toutes les conceptions Word ne sont pas adaptées aux publications sur le site, il vaut donc la peine d'apprendre à formater correctement les listes dans les balises HTML.
    La balise de liste à puces ressemble à ceci :

    Marquez une liste non balisée comme ceci :

    De plus, chaque élément de la liste possède son propre cadre HTML :

    Il s'avère que pour mettre en évidence une liste à puces dans le texte à l'aide de code html, vous devrez combiner les deux types d'éléments utilisés. Il ressemblera à ceci:

  • Élément de liste
  • Élément de liste
  • Élément de liste
  • Élément de liste
  • Pour une liste non marquée, c'est similaire :

    • Élément de liste
    • Élément de liste
    • Élément de liste
    • Élément de liste

    Nous avons trié les listes. Nous pouvons passer à autre chose.

    Balises d'emphase du texte : gras et italique

    Lorsque vous déterminez quelle balise vous permet de formater correctement le texte, vous rencontrez presque immédiatement deux options de code pour chaque cas. Cela provoque une confusion parmi les non-programmeurs et la question : de quelle balise le client a-t-il exactement besoin ?

    Tout est très simple ! Les balises offrent des options de formatage physique et logique. Les premiers sont nécessaires aux utilisateurs, les seconds aux moteurs de recherche. Les « moteurs de recherche », voyant le code HTML qui leur convient, prennent en compte la zone sélectionnée et utilisent les informations reçues lors du classement, donc mettre en évidence le texte à l'aide d'un formatage logique ne sera pas une erreur.

    L’utilisation de balises html permet de plaire aux moteurs de recherche et de mettre visuellement en valeur le texte pour l’utilisateur. Quoi de plus prioritaire, décidez vous-même :

    Mise en surbrillance d'une phrase en gras pour PS et les utilisateurs Mise en surbrillance d'une phrase en gras pour les utilisateurs Phrases en italique pour PS et les utilisateurs Mettre une phrase en italique pour les utilisateurs

    J'ai un article volumineux et très controversé sur le thème des balises en gras, qui s'appelle.

    Si soudain l'un des programmeurs se penche sur le sujet, alors je m'empresse de noter une fois de plus que la critique s'adresse aux rédacteurs : comment mettre des balises, ce qu'elles sont et ce qu'il est important de prendre en compte lors du choix. Et enfin, un autre code HTML populaire nécessaire pour mettre en évidence les paragraphes. Ce

    La balise d'ouverture est placée avant le début du paragraphe et la balise de fermeture est placée à la fin. Si un paragraphe se termine par une liste, alors
    est placé après toutes les balises utilisées pour la liste.

    Eh bien, quelques infographies thématiques simples à la fin :

    Lorsque la discussion sur le sujet a commencé dans les commentaires, le Club des rédacteurs à succès a donné des commentaires intéressants sur l'infographie et l'article. Voici une capture d'écran de l'opinion d'un participant faisant autorité à la discussion.

    Lire : 3 365

    En HTML, tout ce que vous écrivez dans un document HTML sera affiché sur l'écran du navigateur sous forme de texte solide, c'est-à-dire que le navigateur ignore les sauts de ligne et que plusieurs espaces que vous tapez dans une rangée sont remplacés par un.

    Les balises sont des commandes de contrôle inventées pour formater du texte, c'est-à-dire les balises indiquent au navigateur exactement comment afficher la partie de texte incluse dans les balises. Pour créer une balise, vous saisissez du code HTML entre les crochets angulaires, destiné uniquement aux navigateurs. Les visiteurs du site ne voient pas les balises.

    Comme indiqué ci-dessus, toutes les balises commencent par un crochet angulaire.< и заканчиваются угловой скобкой >. Le crochet angulaire ouvrant est suivi du nom de la balise (commande).

    Par exemple, une balise est destinée à mettre en valeur du texte ; les navigateurs affichent ce texte en italique. Lorsque le navigateur rencontre cette balise, il passe au formatage du texte suivant la balise en italique.

    Regardons un exemple :

    Ce texte est normal. Ce texte est en italique.

    La balise est appelée balise de début ou d'ouverture, ce qui signifie que le navigateur a inclus une commande spécifique (dans ce cas, en l'écrivant en italique). La plupart des balises ont une paire sous la forme d'une balise de fermeture qui désactive la commande.

    La balise de fermeture ressemble à la balise de début, mais commence par une barre oblique. Ainsi, la balise de fin pour l'italique est .

    Regardons un exemple :

    Ce texte est normal. Attention! Italique. C'est encore une fois une police normale.

    Comme vous l'avez peut-être remarqué, le navigateur analyse séquentiellement le document HTML à la recherche de commandes (balises) et applique ou désactive diverses options de formatage du texte. Le navigateur affiche du texte formaté (tout ce qui n'est pas une balise) dans sa fenêtre.

    Le processus d'insertion de balises dans du texte brut et non formaté est appelé balisage dans un document HTML, et les balises sont appelées caractères de balisage. Lors de l'écriture des tags, la casse des lettres n'est pas prise en compte ; un tag peut être écrit aussi bien en minuscules qu'en majuscules, mais il est tout de même recommandé d'utiliser des majuscules.

    Vous trouverez ci-dessous des exemples de balises HTML de base, avec une explication de leur utilisation, ainsi que des exemples de la manière dont elles peuvent être utilisées dans un document HTML.

    Rubriques

    Il existe une balise spéciale pour spécifier les titres en HTML. Il existe 6 niveaux de titres en HTML, allant de ceux pour les annonces les plus importantes à ceux pour les moins importantes.

    Bonjour, chers lecteurs du site blog ! Dans le dernier article, nous avons compris ce qu'est un type de document et comment les navigateurs déterminent la langue utilisée à l'aide de . L’étiquette a été prise en compte, mais pas le concept (terme) lui-même. Dans cet article, je vais vous expliquer ce qu'est une balise, pourquoi elle est nécessaire et quels types de balises il existe. Comme je l'ai dit dans le dernier article de cette section, nous allons créer une page de fichier, que nous expérimenterons, en fonction des connaissances que nous avons acquises. Mais c'est à la fin de l'article, mais pour l'instant regardons la balise HTML.

    Qu'est-ce qu'une balise HTML, types de balises HTML, exemples d'écriture de balise HTML - traduite de la balise anglaise - pour marquer les caractères entre crochets et qui sont des éléments du langage de balisage hypertexte (HTML). Les symboles ne peuvent être qu'en anglais (tout Internet est construit dessus). L'étiquette ressemble à

    Il s'agit d'une balise permettant de mettre le texte en gras. Les balises ont trois types :

    • La balise d'ouverture est la balise qui vient au début. Dans l'exemple présenté ci-dessus, la balise est la balise d'ouverture et se place devant le texte qui doit être mis en surbrillance.
    • La balise de fermeture est la balise qui vient à la fin. Une caractéristique distinctive est la barre oblique « / » devant les caractères entre crochets angulaires. Regardons à nouveau l'exemple évoqué ci-dessus. La balise est une balise de fermeture et vient après le texte, qui doit être surligné en gras
    • Les balises simples sont des balises qui n'ont pas de balise de fermeture. Un exemple serait
      Voici un exemple de balise d'ouverture et de fermeture :

    L'ensemble du design, y compris le texte, ressemblera à ceci :

    Ce texte sera mis en évidence en gras

    Et voici à quoi ressemblera ce texte lorsque le navigateur le traitera et nous le fournira : Ce texte sera mis en évidence en gras. Il existe également des balises de conteneur, mais il ne s'agit que d'un nom généralisé pour les balises d'ouverture et de fermeture. Comme je l'ai écrit ci-dessus, en plus des balises de conteneur, il existe également des balises simples. La différence est que ces balises n'ont pas besoin d'être fermées. L’exemple le plus clair et le plus courant est la balise newline.

    Fondamentalement, les balises simples sont utilisées pour insérer un élément, tel qu'une image ou un tableau.

    Que sont les attributs, les règles d'écriture et pourquoi sont-ils nécessaires ? En plus des balises, il existe également des soi-disant attributs. Plus précisément, pas d'ailleurs, mais dans des balises. À l'aide d'attributs, vous pouvez définir des paramètres supplémentaires pour une balise. Chaque balise a ses propres attributs, et dans cette rubrique, nous expérimenterons la balise qui, sans attributs, ne fait en réalité rien de significatif.

    La police est une balise conteneur utilisée pour formater le texte. En utilisant cette balise, vous pouvez mettre le texte en gras, modifier la taille et la distance entre les lignes - en général, tout ce que vous pouvez faire avec le texte. Regardons un exemple avec la taille du texte. Tout d’abord, entourons le texte dans une balise Font.

    Texte

    Parlons maintenant un peu des règles d'écriture des attributs. Les attributs sont toujours écrits dans la balise d'ouverture et après les caractères de la balise elle-même. Vous pouvez écrire plusieurs attributs dans une seule balise dans n'importe quel ordre. Vous pouvez trouver les attributs sur le site Web du validateur W3C (dont je parlerai ci-dessous). Voici donc un exemple de balise font avec un attribut size :

    Texte

    Cet attribut dans la balise font modifie la taille du texte inclus dans les balises.
    Si vous ouvrez le code source de la page, vous verrez que l'endroit où se trouve le gros mot « Texte » ressemble à

    Texte

    Vous avez déjà vu comment les attributs sont écrits. Ils sont écrits exactement de la même manière dans les autres balises : nous écrivons d'abord l'attribut lui-même (dans ce cas, la taille), puis nous mettons « = » et mettons le paramètre d'attribut entre guillemets doubles. Vous pouvez trouver tous les paramètres d’attribut sur le même site Web du World Wide Web Consortium.

    Qu'est-ce qu'un validateur W3C, règles d'écriture et liste de balises Comme je l'ai écrit, il existe un grand nombre de balises. Mais où peut-on tous les trouver ? A cet effet, il existe un validateur W3C W3C - World Wide Web Consortium, ou en russe - World Wide Web Consortium. Pas tout à fait clair, non ? C'est ici que sont développés les standards du Web - (les langages de balisage hypertexte sont leur idée originale). À la tête de l'ensemble du consortium se trouve Tim Berners-Lee, connu grâce à l'article précédent, le créateur du HTML. Le site Web de cette organisation est w3.org. Je vous préviens, le site est entièrement en anglais, ayez donc un dictionnaire ou un traducteur dans votre navigateur. À propos, la note Google pour ce site est de 9 et 37 000 (c'est beaucoup, si quelqu'un ne le sait pas).

    Revenons au sujet de l'article. Nous sommes intéressés par les standards du langage HNTML 4.01. Suivez le lien Spécification HTML 4.01, après quoi nous voyons l'onglet éléments en haut, cliquez dessus. Ici, la page avec toutes les balises s'ouvre. Ces balises ont été développées et adoptées comme norme par le consortium. Encore une fois, tout est en anglais. Immédiatement après les mots « Index des éléments », nous voyons une légende (la signification des lettres dans les colonnes) :

    Et immédiatement après la légende il y a un tableau des balises elles-mêmes :

    • Dans la première colonne - Nom - le nom de la balise elle-même - ce qui doit être entre crochets (< и >).
    • La deuxième colonne - Start Tag - la présence d'une balise d'ouverture. Dans cette colonne, vous pouvez voir la lettre « O », qui signifie « Facultatif » et traduite de l'anglais - Facultatif. Cette lettre est présente uniquement en face des balises , , et et signifie que vous pouvez mettre une balise d'ouverture, ou ce n'est pas obligatoire – le navigateur fera tout lui-même.
    • La troisième colonne - End Tag - la présence d'une balise de fermeture. En face de cette étiquette, vous pouvez voir à la fois la lettre « O » et la lettre « F ». Le sens du premier n’a pas changé. La deuxième lettre - « F » - littéralement « interdit » en anglais - signifie qu'il est interdit de mettre une balise fermante, elle n'existe tout simplement pas. Par exemple, il n'y a pas de balise, car il n'y a rien à cacher dedans.
    • Le quatrième - Vide - signifie que la balise est unique (vide). Toutes les balises qui ont la lettre « E » devant elles dans cette colonne ont également la lettre « F » dans la colonne précédente. Après tout, les balises simples n’ont pas de balises de fermeture. Un exemple est la même balise .
    • La cinquième colonne est Depr. ou Obsolète - de l'anglais « non recommandé ». Si cette colonne contient la lettre « D » (qui signifie exactement la même chose), cela signifie que cette balise n'est pas recommandée pour une utilisation en HTML. En regardant un peu vers l'avenir, les feuilles de style en cascade (CSS) sont aujourd'hui utilisées pour concevoir à la fois le texte et l'apparence de l'ensemble du site Web et du document HTML. En bref et simplement, un fichier est créé dans lequel sont écrits tous les paramètres de texte pouvant être appelés par certains attributs de balise. Cette fonction n'est donc utilisée que sur les sites Web, car CSS n'est pas applicable lors de l'envoi de nouvelles par mail ou RSS. Et ici, ces mêmes balises viennent à la rescousse. Soit dit en passant, la plupart de ces balises concernent la conception du texte (et sont un exemple)
    • La sixième colonne - DTD - peut contenir soit la lettre "L" soit "F". Le premier - "L" - Loose DTD - signifie que la balise en face de laquelle apparaît cette lettre ne peut être utilisée que dans un type de document transitionnel (- Transitional, dont j'ai parlé dans l'article précédent). La seconde - «F» - Frameset DTD - signifie que la balise ne peut être utilisée que dans un document de type FRAMESET ( - Frameset). Si la lettre est manquante, alors l'étiquette peut être utilisée dans tous types de documents.
    • Et la dernière, septième colonne - Description - une brève description de la balise, toujours en anglais

    Les attributs sont contenus sur la même page de la spécification HTML 4.01, mais dans l'onglet « attributs ». Il existe bien plus d’attributs que de balises. Et encore une fois, je vais tout noter point par point.

    • La première colonne est Nom - comme dans le cas des balises, le nom de l'attribut. Tout est en anglais, mais avec des connaissances de base, vous pouvez deviner à quoi sert tel ou tel attribut.
    • La deuxième colonne - Éléments associés - est une liste de toutes les balises qui utilisent n'importe quel attribut. Toutes les balises ont des liens, vous pouvez donc accéder immédiatement aux informations sur la balise.
    • La troisième colonne - Type - contient toutes les valeurs possibles pour un attribut particulier. Par exemple, en face de l'attribut size que nous avons sélectionné dans la balise Font se trouve la valeur CDATA. Nous y reviendrons plus tard, mais en bref, il s'agit d'un ensemble spécial d'options de taille (dans ce cas). Après tout, vous pouvez écrire à la fois des pixels et des pourcentages
    • La quatrième colonne - Par défaut - indique si l'attribut est requis dans une balise particulière. Par exemple, dans la balise Img, l'attribut src est requis, car il indique la source à partir de laquelle prendre l'image.
    • Les colonnes 6, 7 et 8 signifient la même chose que dans le cas des balises.

    Tout ce qui précède s'applique uniquement à la version HTML 4.01. Nous parlerons de HTML 5 dans un autre article, et nous aborderons également le XHTML. Et maintenant, comme je l'ai promis, nous allons créer une page en HTML, que nous allons expérimenter.

    Création d'un fichier au format html - Document HTML

    Tout d'abord, voyons ce qu'est un document HTML. Et il s'agit en fait d'un fichier au format HTML. Et toutes les pages Internet sont des documents HTML. Par exemple, lorsque vous accédez à un site Web, dans la barre d'adresse à la fin, vous pouvez voir « .html » ou « .htm » après l'adresse. C'est le fichier que nous allons créer avec cette extension. En général, si vous souhaitez expérimenter sur un site Web et non sur une page, il est préférable de créer un serveur local - Denver (sur lequel je veux écrire).

    Considérant que je n’ai même pas parlé des balises présentes sur chaque page, nous allons simplement créer un fichier avec n’importe quel nom et extension .html. Il est possible (et préférable) d'utiliser Notepad++, car cet éditeur de texte utilise la surbrillance du code, ce qui est très pratique lors de l'édition de code et vous pouvez enregistrer des fichiers dans une variété de formats. Il existe également des programmes dans lesquels, lorsque vous tapez un code, le résultat apparaît immédiatement sous forme traitée.

    Il suffit donc d'ouvrir Notepad++ et d'enregistrer un fichier avec du texte arbitraire (peut être vide), mais au format .html. Pour ce faire, comme d'habitude, cliquez sur l'étiquette du fichier, puis « enregistrer sous » et recherchez « Fichier HyperText Markup Language (extensions de fichier) » parmi la grande liste d'extensions. C'est tout, en fait. Nous ajouterons les premières lignes à ce fichier dans le prochain article de la section « Créer un site Web à partir de zéro »

    HTML est un langage de balisage hypertexte. Il est basé sur ce qu'on appelle des balises. Les balises sont des éléments wrapper qui spécifient le format et les propriétés des éléments de la page Web. Nous avons compilé pour vous une référence à jour des balises HTML sur une seule page.

    Il existe au total plus d’une centaine d’éléments de balisage. Chacun possède un certain nombre d’attributs et sa propre syntaxe. La référence des balises HTML vous aidera à trouver rapidement l'élément dont vous avez besoin.

    Liste des balises HTML

    Le tableau ci-dessous présente une liste de balises HTML5 avec une brève description en russe.

    Balise Brève description
    Un commentaire.
    Définit le type de document.
    Lien, hyperlien, ancre.
    Définit le texte comme une abréviation.
    Coordonnées de l'auteur ou du propriétaire du document.
    Définit une zone sur une image cliquable
    Article
    Contenu mis à part (le contenu n'est pas le contenu principal de la page)
    Vous permet d'insérer un fichier audio en cours de lecture.
    Texte en gras.
    Spécifie l'URL de base ou l'attribut cible pour les liens relatifs dans le document.
    Un domaine où l’écriture d’un texte peut prendre une direction différente.
    Définit la direction d’écriture du texte. Contrairement à la direction, la direction physique est indiquée
    Citation.
    Spécifie la zone du corps du document.

    Saut de ligne.
    Bouton cliquable
    Utilisé pour dessiner des graphiques à l'aide de scripts
    Signature du tableau.
    Note de bas de page au titre du document.
    Utilisé pour insérer du code informatique sous forme de texte.
    Spécifie les caractéristiques des colonnes du tableau.
    Définit un groupe d'une ou plusieurs colonnes de tableau à formater.
    Utilisé pour définir des options prédéfinies parmi lesquelles choisir lorsque vous tapez dans un champ de texte
    Définit la description d'un terme à partir d'une balise dans une liste de termes
    Texte qui a été supprimé dans la nouvelle version du document.
    Définit des informations supplémentaires que l'utilisateur peut afficher ou masquer
    Indique que le contenu est un terme.
    Définit une boîte de dialogue ou un élément interactif
    Un élément de bloc est l'un des principaux éléments de mise en page.
    Définit une liste de définitions
    Nom du terme dans la liste des définitions
    texte surligné pour sa signification (généralement texte en italique).
    Conteneur pour application externe
    Groupe d'éléments liés dans un formulaire
    Titre de l'élément
    Définit un groupe autonome de plusieurs éléments (par exemple, une image avec une légende)
    bas de page
    Définit un formulaire de saisie utilisateur
    - En-têtes HTML de différents niveaux : , , , , , .
    Spécifie la zone d'en-tête du document.
    Bloc d'en-tête
    La ligne horizontale est un séparateur thématique.
    Élément racine. Indique au navigateur que le document donné est un document HTML.
    Texte en italique.
    Définit un cadre en ligne
    Image, image.
    Champ de saisie
    Texte qui a été ajouté à la nouvelle version du document.
    Texte saisi à partir du clavier ou noms des boutons du clavier. Généralement en police monospace.
    Libellé du champ de saisie. Indique la liaison d'un élément (généralement du texte) à un champ de saisie.
    En-tête d'élément
  • Élément de liste
    Définit une liaison de ressource externe (le plus souvent une liaison de feuille de style CSS)
    Contenu principal
    Conteneur pour . Définit une carte personnalisée sur une image
    Texte sélectionné (généralement en utilisant la surbrillance de l'arrière-plan).
    Conteneur pour une liste d'éléments de menu
    Définit les éléments que l'utilisateur peut appeler à partir du menu contextuel
    Utilisé pour définir les métadonnées du document.
    Compteur de valeurs dans une plage donnée
    Conteneur pour les éléments de navigation
    Contenu alternatif pour les utilisateurs ayant désactivé les scripts
    Définit un objet intégré
    Définit une liste numérotée
    Définit un groupe d'options associées dans une liste déroulante. Donne le nom au groupe
    Paramètre (option de choix) dans la liste déroulante
    Résultat du calcul

    Paragraphe.
    Définit les options pour les objets intégrés
    Conteneur pour plusieurs images
    Texte préformaté.
    Barre de progression
    Citation dans le texte.
    Texte alternatif si le navigateur ne prend pas en charge le .
    Annotation pour le contenu de la balise.
    Conteneur pour les symboles et leur décodage (principalement pour les symboles d'Asie de l'Est, les hiéroglyphes).
    Texte barré.
    Texte résultant d'un programme informatique (généralement en police monospace).
    Définit un script ou une connexion de script à partir d'une ressource externe.
    Chapitre
    Définit une liste déroulante
    Texte dans une taille de police plus petite.
    Définit une ressource pour , et .
    Élément en ligne.
    Texte mis en valeur par son sens. Généralement affiché en gras.
    Définit un conteneur pour définir les styles de document
    Affiche le texte sous forme d'indice.
    Se diriger à l'intérieur d'une balise
    Affiche le texte en exposant.
    Définit une table.
    Définit une zone de contenu dans un tableau.
    Cellule dans le tableau .
    Champ de saisie multiligne
    Définit un groupe de lignes en bas d'un tableau - bas de page. Plus de détails
    Un endroit où un saut de ligne est autorisé.
    Balises HTML héritées

    Comment remplacer la balise HTML obsolète ? Dans la plupart des cas, les feuilles de style en cascade CSS feront l'affaire. Il existe également des alternatives aux balises non utilisées dans la nouvelle spécification HTML. Le tableau ci-dessous présente les balises HTML obsolètes avec des options pour les remplacer.

    Balise Brève description
    Acronyme. Utilisez plutôt une balise
    Applet intégré. Utilisez ou à la place.
    Spécifie la couleur, la taille et la famille de polices de tout le texte du document. Utilisez-le à la place
    Texte plus grand. Utilisez-le à la place
    Texte centré. Utilisez-le à la place
    Liste des répertoires. Utiliser
      au lieu de lui
    Spécifie la couleur, la taille et la famille de la police. Utilisez-le à la place
    Cadre à l'intérieur. Utilisez-le à la place
    Définit un jeu de cadres. Pour ajouter plusieurs cadres en ligne, utilisez plusieurs éléments
    Texte alternatif si les frames ne sont pas pris en charge
    Texte barré. Utiliser ou à la place
    Texte monospace. Utilisez-le à la place
    Texte souligné. Utilisez-le à la place