Faites correspondre la balise html avec sa description. Attributs des balises HTML

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.

Les balises HTML de base sont la base sur laquelle presque tous les sites Web/blogs sont construits. À partir de cet article, vous apprendrez exactement les 20 % de balises dont vous aurez toujours besoin.

Comme dans toute langue, et même ici, la règle de Pareto 20/80 s'applique (20 % des choses sont importantes à 80 % pour atteindre le résultat souhaité), ce qui signifie qu'il suffit de connaître seulement 20 % des codes pour y parvenir en toute confiance. vos objectifs dans la création de sites Web.

HTML n'est pas un langage de programmation, car c'est un langage de balisage hypertexte, qui parle de lui-même, il permet de baliser des blocs sur les pages pour un affichage correct, et de baliser le texte des pages Web. Il sert également à créer des liens d’une page du site à une autre. Tous les liens sur Internet sont créés à partir de la partie hypertexte du code html.

- c'est le langage le plus simple ! Si vous décidez de l'étudier, il est important de comprendre dès le début qu'il ne présente aucune difficulté. Nous pouvons affirmer avec certitude que les enfants ont beaucoup plus de difficultés dans les cours d'informatique à l'école.

Alors commençons. Il est préférable d'écrire les codes dans un bloc-notes, qui est inclus dans les programmes standards du système d'exploitation Windows, ou dans le programme gratuit « Notepad + + ».

Tout d’abord, définissons ce qu’est une balise. Une balise est une cellule du langage HTML lui-même, à partir de laquelle elle est généralement construite. À l'aide de balises, les navigateurs comprennent comment afficher le texte et où insérer les images. Les balises sont les éléments de balisage eux-mêmes.

Les balises peuvent être appariées ou non. Les paires s'ouvrent et se ferment, c'est-à-dire que celles qui se ferment contiennent une barre oblique inverse « / ».

La première chose qui devrait figurer dans tout document HTML lors de la création d’une page de blog est :

• . Le crochet angulaire ouvrant est suivi du nom de la balise (commande).

  Par exemple, une balise est destinée à mettre en valeur le 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 balises, la casse des lettres n'est pas prise en compte ; une balise peut être écrite 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.

  Nous l'avons déjà compris. Nous avons découvert qu'ils ont du contenu. Cependant, ce n'est pas tout. Les balises ont également des attributs qui améliorent leurs capacités, et les attributs ont à leur tour des valeurs. Avec leur aide, vous pouvez définir les paramètres d'un élément et déterminer le style de conception. Par exemple, avec la balise

  vous avez marqué le paragraphe. Mais comment l’aligner à droite ? Pour ce faire, vous aurez besoin d'un attribut spécifique avec la valeur correspondante. Tout comme certaines balises n’ont pas de paire, certains attributs peuvent être utilisés sans valeurs.

  Comment écrire les attributs ?

  Les attributs sont des mots réservés (comme les balises, uniquement sans chevrons), mais leurs significations peuvent être différentes. Tout comme les balises, il est recommandé d'écrire les attributs avec des valeurs en minuscules, même si les navigateurs, en général, s'en moquent - ce n'est qu'une règle de bonnes manières : en russe, il n'est AUSSI PAS UTILISÉ POUR ÉCRIRE LORS DU VERROUILLAGE DES MAJUSCULES EST ACTIVÉ. Pourquoi le HTML est-il pire ?

  Les valeurs d'attribut sont écrites au format suivant :

  Attribut=”valeur” lang=”en”

  Vous devez toujours écrire les attributs à l'intérieur de la balise d'ouverture, après le mot réservé.

  Paragraphe

  En règle générale, plusieurs attributs sont disponibles pour une seule balise. L'ordre dans lequel ils sont répertoriés n'a pas d'importance.

  Attributs universels

  Chaque balise HTML possède son propre ensemble d'attributs. Certains attributs peuvent être disponibles pour plusieurs balises, tandis que d'autres ne fonctionnent qu'avec une seule. Il existe également un groupe d'attributs universels (globaux) qui peuvent être utilisés avec n'importe quelle balise. Examinons brièvement les attributs de cette catégorie.

  • accesskey vous permet de définir un raccourci clavier pour accéder à un objet de page spécifique. Par exemple, vous pouvez vous assurer que l'utilisateur utilise la combinaison de touches Alt+1 pour suivre un lien spécifique. Ainsi, développez un système de navigation clé.

  La valeur de l'attribut peut être constituée de chiffres de 0 à 9 ou de lettres de l'alphabet latin :

  Le lien sera ouvert en appuyant sur la combinaison de touches avec un

  • La classe vous permet d'associer une balise à un design prédéfini à l'aide de CSS. Utiliser un attribut permet de réduire considérablement le code, car au lieu de saisir à plusieurs reprises le même bloc CSS, vous pouvez simplement saisir le nom de la classe correspondante.
  • En utilisant contenteditable, vous pouvez permettre à l'utilisateur de modifier n'importe quel élément de la page HTML : supprimer, insérer, modifier du texte. Le même attribut permet d'éditer et de désactiver. Il n'a que deux valeurs : true - autoriser l'édition, false - désactiver.
  • À l'aide de l'attribut contextmenu, vous pouvez fournir à n'importe quel élément du document des éléments de menu contextuel uniques à votre discrétion. Le menu lui-même est créé dans la balise et l'attribut contextmenu se voit attribuer son identifiant.
  • dir spécifie la direction du texte : de gauche à droite (ltr) ou de droite à gauche (rtl).
  • draggable permet de désactiver (false) ou d'autoriser (true) l'utilisateur à faire glisser un élément de page doté de cet attribut.
  • dropzone indique au navigateur quoi faire avec l'élément déposé : copier (copie de valeur), déplacer (déplacer) ou créer un lien vers celui-ci (lien).
  • caché - un attribut qui vous permet de masquer le contenu d'un élément afin qu'il ne soit pas affiché dans le navigateur. Si l'attribut est défini sur false, l'objet est affiché, true - il est masqué.
  • id spécifie l'identifiant de l'élément - une sorte de nom qui est nécessaire pour simplement changer le style de l'objet, ainsi que pour que les scripts puissent y accéder. La valeur de l'attribut sera son nom. Il doit commencer par une lettre latine, et peut contenir des chiffres, des lettres du même alphabet latin (grandes et petites), ainsi que des traits d'union (-) et des traits de soulignement (_). Ne peut pas contenir de lettres russes.
  • lang aide le navigateur à comprendre dans quelle langue le contenu est écrit et à le styliser en conséquence (par exemple, les langues peuvent utiliser des guillemets différents). Les valeurs sont des codes de langue (russe - ru, anglais - en, etc.).
  • la vérification orthographique active (vrai) ou désactive (faux) la vérification orthographique. Il est particulièrement utile d'utiliser l'attribut dans les balises de champ de formulaire où l'utilisateur saisira du texte.
  • style vous permet de définir le design d'un élément à l'aide du code CSS.
  • tabindex vous permet de déterminer combien de fois l'utilisateur devra appuyer sur la touche Tab pour qu'un objet avec cet attribut reçoive le focus. Le nombre de clics détermine la valeur de l'attribut - un entier positif.
  • titre - une info-bulle qui apparaîtra si vous déplacez la souris sur un élément et le laissez immobile pendant un moment. La ligne de sens sera un indice.
  • Translate autorise (oui) ou refuse (non) la traduction du contenu de la balise.
  • align spécifie l'alignement de l'élément. Par exemple, vous pouvez l'utiliser pour aligner le texte à gauche (gauche), à ​​droite, au centre ou justifier. Pour les images (balise ), il est également possible de s'aligner sur la bordure supérieure de l'élément le plus haut de la ligne (en haut), sur la bordure inférieure (en bas), et la valeur middle fait coïncider la ligne médiane de l'image avec la ligne de base de la ligne.

  Il convient de garder à l'esprit que l'utilisation de l'attribut align n'est pas recommandée et qu'il est préférable d'aligner le texte à l'aide de CSS.

  Exemple d'utilisation d'attributs

  A titre d'exemple, considérons la ligne de code HTML :

  Ce texte peut être modifié

  La ligne entière crée un paragraphe de texte que l'utilisateur peut modifier dans le navigateur.

  Regardons chaque élément de la ligne.

  - la balise d'ouverture du conteneur stockant le paragraphe.

  -balise de fermeture.

  Entre les symboles > et< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

  contenteditable = "true" - c'est l'attribut et sa valeur. Rappelez-vous comment à l'école : x=3. Idem ici : contenteditable = "true". L'attribut contenteditable précise si l'utilisateur peut éditer le contenu de l'élément ; la valeur true , écrite entre guillemets séparés par un signe égal, permet d'éditer :

  Attribut = "valeur" contenteditable = "true"

  Une balise est un mot réservé spécial entouré de crochets (par exemple, ). Une balise est le composant principal du HTML : le code commence par elle, il se termine par elle et les informations affichées sur la page Web sont contenues dans les balises. Il est recommandé de les écrire en minuscules, c'est-à-dire en minuscules ordinaires : non, mais.

  Quels sont les types de balises ?

  La plupart des balises HTML sont appariées : il existe une balise d'ouverture (par exemple, ) et une balise de fermeture, qui se distingue de la balise d'ouverture par une barre oblique (/) après le premier crochet angulaire (par exemple, ). Tout ce qui se trouve à l'intérieur d'une paire de balises est appelé leur contenu.

  Contenu Le texte placé à l'intérieur de ces balises devient gras

  Il existe également des balises non appariées (simples), appelées balises. Contrairement aux balises appariées, elles n'ont pas besoin d'être fermées, car elles ne fonctionnent pas avec le contenu, mais remplissent elles-mêmes certaines fonctions. Exemple de balise unique -
  . Il définit le texte pour qu'il passe à la ligne suivante.

  Si nous établissons des parallèles avec la langue russe, nous pouvons dire que les balises appariées sont des guillemets ou des crochets qui affectent les propriétés du texte qu'elles contiennent (essayez de ne pas fermer les guillemets à temps), et les balises simples (marques) sont des signes de ponctuation ( exclamation, question ou point).

  Toute balise est composée de :

  • Équerre ouverte (< ).
  • Un mot spécial (nom du tag). Par exemple, hr , iframe , b .
  • Équerre de fermeture (> ).
  Balises HTML de base

  Puisque les balises constituent la base du langage de balisage, il n’est pas surprenant qu’elles soient nombreuses. Examinons les balises principales et les plus importantes.

  • - une seule balise contenant un commentaire. Un commentaire est un texte qui n'est pas traité par le navigateur. Vous pouvez écrire ce que vous voulez à l'intérieur de la balise, même d'autres balises - elles ne fonctionneront pas, elles n'apparaîtront pas à l'écran. Les développeurs commentent le code soit pour permettre aux autres webmasters de le comprendre plus facilement, soit pour qu'après une longue période, ils puissent le comprendre rapidement eux-mêmes.
  • , , , , sont des balises qui devraient être présentes dans tout document HTML décent (pour plus de détails, voir « Comment créer un site Web dans le Bloc-notes »).
  • - la balise contient des informations auxiliaires pour les navigateurs et les moteurs de recherche. À l'intérieur, vous pouvez écrire des mots-clés, une description de page, l'encodage du document, le nom de l'auteur, etc.
  • contient un lien vers le fichier de script ou le code lui-même.
  • - une balise qui définit le style du document et/ou de ses éléments en utilisant CSS. Un document HTML peut contenir de nombreuses balises qui définissent différents styles pour différentes parties de la page.
  • - tout le contraire, en le complétant. La balise spécifie « l’en-tête » (titre) d’une section ou de la page entière.
  • stocke les « jambes » d'un site ou d'une section. À l’intérieur, vous pouvez placer des informations complémentaires, des droits d’auteur, des informations de contact, etc.
  • contient le contenu principal de la page. Ni l'en-tête, ni le bloc de menu, ni les « jambes » du site, mais pourquoi la page a été créée. Par exemple, sur la page que vous lisez actuellement, cet article devrait se trouver à l'intérieur.
  • conçu pour créer des liens. Les liens sont la racine de l’hypertexte, c’est pourquoi cet article leur est dédié.
  • nécessaire pour ajouter des images à une page Web (à votre service est dédié à cette action).
  • ,
    , - , , ,

    , , , et d'autres balises de formatage de texte constituent un grand groupe de balises HTML ; elles sont abordées dans l'article « Formatage du texte en HTML ».

  • - élément de bloc. Le texte à l'intérieur est formaté à l'aide de CSS (feuilles de style en cascade, qui font l'objet de la deuxième partie du tutoriel).
  • . Vous avez un paragraphe

    ou bloquer Le texte qu'il contient est conçu dans le même style, mais vous souhaiteriez, sans perturber la structure, vous assurer que plusieurs mots ont une taille ou une couleur de police différente. C'est à de telles situations que la balise est destinée.

  • ,
    ,
    • - liste des balises. Marqué, numéroté - le travail de ces balises. Il existe également des listes de définitions dont les balises sont responsables, mais vous en apprendrez plus sur ces six en détail dans l'article « Création de listes ».
    • , , , sont utilisés lors de la création de tableaux et sont discutés en détail dans un article séparé.
      - une balise qui ajoute de l'interactivité à une page, c'est-à-dire permettant à l'utilisateur d'interagir avec le site Web. Bien sûr, le formulaire a besoin d'un gestionnaire, mais avec l'aide des balises à l'intérieur, vous pouvez créer une interface. Les cases à cocher, les boutons, les boutons radio, les champs de saisie et autres objets qui nécessitent des actions actives de votre part sont tous des éléments de formulaire dont le code est placé dans un conteneur.
      - une balise qui crée un bouton interactif. Pour que quelque chose se passe lorsque vous cliquez dessus, le bouton doit être sous la forme (situé entre les balises).
      crée des éléments de formulaire : commutateurs, cases à cocher, boutons, toutes sortes de champs de saisie. Inséré dans un conteneur. Mais pourquoi en avons-nous besoin s’il en existe un universel ?
      permet de créer un bouton avec des paramètres avancés. Par exemple, vous pouvez placer une image sur un bouton. Cela ne peut pas être fait sur un élément créé via .
      et - des balises de création de menu en HTML 5. - il s'agit d'un conteneur à l'intérieur duquel sont placés des éléments dont l'ajout conduit à la création d'éléments de menu. Un couple assez intéressant. Par exemple, avec son aide, vous pouvez créer votre propre menu contextuel pour une page ou son élément individuel.
      
      
      
      . Club informatique d'Oleg Shein.

      Nom

      E-mail *

      Message *

      Envoyer
      Signaler une faute de frappe

      Texte qui sera envoyé à nos rédacteurs :

      Votre commentaire (facultatif) :

      Envoyer Annuler
      
      
      

      , Et