La structure d'un document HTML est constituée des balises principales. Corriger la structure du document HTML et le code de la page

Bonjour, lecteurs et invités du blog. Je suis à nouveau avec vous, votre humble assistant pour apprendre les bases du langage de balisage hypertexte HTML. Dans cet article, je souhaite aborder le sujet de la structuration des pages d'un site Web et vous présenter de plus près les principales balises du langage.

Le sujet de la structure du site Web HTML est l'un des plus importants et constitue la base de la création de sites Web, après l'avoir maîtrisé, vous pouvez facilement créer un design individuel pour vos pages et vos sites Web. Pour une étude détaillée du sujet, l'article fournit non seulement du matériel théorique, mais également un exemple spécifique de création de blog. Il est maintenant temps de commencer à apprendre !

Ça a l'air effrayant, facile à programmer

Pour ceux qui sont particulièrement agités, je commencerai l’introduction par un exemple. Vous trouverez ci-dessous un code de programme simple que j'ai écrit spécifiquement pour cet article. Ne t'inquiète pas. Chaque étape recevra une explication détaillée.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

Balises de base du langage de balisage hypertexte Nouvelles balises fournies avec HTML 5 Exemple de structuration de pages Article 1 Voici le texte du premier article. Article 2 Voici le texte du deuxième article.

Ce code crée une page de blog, qui à son tour est divisée en un en-tête, un menu, un panneau principal (layout), qui contient un panneau de contenu (content) et une barre latérale (sidebar), ainsi qu'un « pied de page » (footer ).

Commençons le débriefing dès la première ligne.

est un élément de langage dont la tâche principale est d'indiquer le type de document Web. De cette manière, le navigateur détermine selon quelle norme la page doit être affichée, puisqu'il existe aujourd'hui plusieurs versions de HTML.

Cependant, il convient de prêter attention à une nouvelle unité de langage appelée style. Comme vous l'avez peut-être deviné d'après son nom, cette balise définit le style et ajuste la disposition des objets sur la page.

Logiquement, je peux supposer que la question s'est immédiatement posée dans votre tête : « Quel genre de code incompréhensible se trouve dans cette partie du programme ? Cela ne ressemble pas du tout à du HTML ! » Et la réponse est la suivante : ce n’est pas le html qui est écrit dans la balise style, mais le code css. Comme mentionné précédemment, il s’agit d’un outil permettant de formater l’apparence des sites Web.

Division fait référence aux balises de bloc du langage de balisage. Il est utilisé pour isoler certains fragments en vue de leur modification ultérieure.

Les blocs sont gérés à l'aide de feuilles de style en cascade, c'est-à-dire langage CSS L'exemple de page Web comporte trois blocs stylisés à l'aide d'attributs de classe.

Ainsi, le code contient :

• mise en page – bloc responsable de la partie principale de la page,
• barre latérale – barre latérale (généralement créée pour la navigation),
• contenu – ​​le bloc dans lequel se trouvent les articles de blog.

Dans l'élément avec la définition de classe de la barre latérale, je définis une liste non ordonnée en utilisant les éléments

Et
• . Dans un bloc avec un contenu de classe de style – balises de titre

  et le paragraphe

  Regardons maintenant de plus près le bloc

  .

  HTML ou encore HTML 5 ? Comment reconnaître ?

  Dans un div avec la classe de style de mise en page, en plus d'autres blocs, il existe des balises telles que l'en-tête, le menu et le pied de page. Contrairement aux autres éléments de l’exemple, ceux-ci sont spécifiques à la plateforme HTML 5.

  Ainsi, l'en-tête est un élément du langage de balisage hypertexte, créant généralement l'en-tête des pages ou des sections du site dans lesquelles le titre est inséré. Il est à noter que le navigateur Internet Explorer ne prend pas en charge l'en-tête jusqu'à la version 8, mais affiche son contenu.

  L'objectif principal de la balise menu est d'afficher les éléments de menu. Semblable aux éléments permettant de créer des listes numérotées et non numérotées, à l'intérieur du conteneur de menu, chaque élément de contenu est inclus dans une balise appariée.

  .

  

  Et enfin, l'unité linguistique du pied de page. Dans le jargon des développeurs Web, on appelle parfois cela le « pied de page » d’une page. Cette balise est située en bas de page ou de sections. Le pied de page contient généralement des informations sur la paternité d'une ressource particulière, la date de création du document, des informations générales ou d'autres éléments qui ne nécessitent pas une attention particulière de la part des lecteurs de la ressource Web.

  Outils de création de ressources Web

  De nombreux produits logiciels ont été créés pour développer des pages Internet. Classiquement, ils peuvent être divisés en programmes d'édition simples et en produits logiciels à vocation professionnelle.

  Lors de la création d’un site Web, la première chose que vous devez imaginer est la façon dont la page Web est formée. Il s’agit d’une sorte de « fondation » dans la création de sites Web. Par conséquent, avant de se lancer dans des technologies de création de sites Web plus complexes, il est recommandé d’avoir au moins des connaissances de base en HTML. Dans cette leçon, nous ferons connaissance avec HTML, réglons ça Structure du document HTML et utiliser des exemples pratiques pour consolider les connaissances acquises.

  Qu’est-ce que le HTML ?

  HTML signifie HyperText Markup Language. Ce langage est responsable de la manière exacte dont l'hypertexte sera affiché sur les pages du site. Voyons maintenant ce qu'est l'hypertexte ? Ce n'est un secret pour personne qu'une seule page Web peut contenir de nombreux types d'informations différents, qu'il s'agisse de texte, de tableaux, de graphiques, de vidéos, d'audio, etc. Ainsi, toutes ces informations peuvent être appelées en un mot : hypertexte.

  Notez que HTML est un langage de balisage et non un langage de programmation. Ce langage n'a aucune fonction logique et il est impossible d'y effectuer des calculs mathématiques. Les pages HTML ont une extension .html ou .htm et sont traités par les navigateurs - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera, etc.

  Voyons maintenant comment le navigateur comprend quoi et comment afficher sur une page Web ? C'est très simple. Le langage de balisage hypertexte HTML possède des commandes intégrées appelées balises. C'est par eux que le navigateur s'oriente.

  Structure des documents HTML

  Tout document HTML (page Web) doit avoir une certaine structure. Cela évitera d'éventuels problèmes lors de l'ouverture des pages dans les navigateurs. A titre d'exemple, regardons une page qui contient le code HTML suivant :

  ...
  
  

  Regardons ce qui est inclus dans cette structure dans l'ordre :

  1. La première chose qui apparaît dans un document HTML est l'indication de version (première ligne). Pour un fonctionnement correct, cette ligne doit être précisée lors de la mise en page de la page Web.

  3. Vient ensuite la zone du haut du site (en-tête). La balise est utilisée pour cela . Dans l'en-tête nous indiquons le nom de notre page en plaçant le titre de la page entre les balises . Ensuite, l'encodage du document HTML est indiqué (cinquième ligne). Ceci est fait pour afficher correctement l'alphabet cyrillique. Fermer la zone d'en-tête avec une balise.

  4. Balise méta « description » - un résumé de la page, destiné aux moteurs de recherche. Cette balise est importante pour l’optimisation des moteurs de recherche et doit être remplie.

  5. Balise méta « mots-clés » – mots-clés pouvant apparaître sur la page. Cette balise est également destinée aux moteurs de recherche. Cette balise est rarement utilisée de nos jours.

  6. Le corps de la page s'ouvre avec une balise et se ferme en conséquence avec la balise
  
  . Le corps d'une page Web contient généralement le contenu principal : texte, vidéo, audio et autres informations.

  Ainsi, nous avons répondu à la question de savoir ce qu'est le HTML et étudié la structure d'un document HTML. Les informations reçues dans cette leçon sont des concepts de base, vous ne pouvez pas vous en passer. Nous parlerons de choses plus complexes dans d’autres leçons.

  Aujourd'hui, nous allons parler de sémantique en HTML5. J'ai déjà écrit un court article de critique sur . Je vous recommande de vous familiariser avec celui-ci avant de lire cet article. Nous allons maintenant examiner cette question plus en détail, sur la façon de composer correctement et avec compétence la structure sémantique d'un document HTML5.

  Dans cet article nous allons progressivement créer une page HTML et l'agrémenter de balises sémantiques HTML5.

  

  Figure - Structure sémantique d'une page HTML5.

  DOCTYPE et balises méta dans le titre de la page

  Commençons par un modèle de document HTML5 standard et ajoutons des balises méta à l'en-tête :

  J'ai ajouté une balise qui est responsable des mots-clés. Et taguer qui est responsable de la description de la page. Pour l'optimisation du référencement, ces balises sont obligatoires. Il faut également remplir correctement la balise , placé à l'intérieur des balises . Le titre du document n'apparaît pas lorsque le document lui-même est affiché dans la fenêtre.

  Balises de corps de document. Les balises de corps de document identifient les composants d'un document HTML affiché dans une fenêtre. Le corps du document peut contenir des liens vers d'autres documents, du texte et d'autres informations formatées.

  Corps du document. Le corps du document doit être entre les balises Et. Il s'agit de la partie du document qui est affichée sous forme d'informations textuelles et graphiques (sémantiques) de votre document.

  Niveaux de titre<Нх>. Le premier niveau de titres (le plus grand) est désigné par le chiffre 1, le suivant par 2, et ainsi de suite jusqu'au chiffre 6. La plupart des navigateurs prennent en charge l'interprétation de six niveaux de titres, définissant chacun d'eux son propre style. Dans la plupart des cas, le texte d'un tel en-tête deviendra gras et il y aura une ligne vide après le texte. Il est important que ces balises déterminent la structure logique du document et participent à l'indexation par les moteurs de recherche Internet. Les en-têtes au-dessus du niveau six ne sont pas standard et peuvent ne pas être pris en charge par le navigateur.

  Balise de paragraphe<Р>. DANS Contrairement à la plupart des traitements de texte, les retours chariot sont ignorés dans un document HTML. Le navigateur divise les paragraphes uniquement s'il y a une balise<Р>. Si vous ne séparez pas les paragraphes par une balise<Р>, le document ressemblera alors à un seul gros paragraphe.

  Balise de texte préformatée

  .
  Étiqueter 
  Permet au texte d'être présenté avec un formatage spécifique à l'écran.  Le texte préformaté se termine par une balise de fin
  .  Dans le texte préformaté, vous pouvez utiliser : le saut de ligne, les caractères de tabulation (décalage de huit caractères vers la droite), la police Courier disproportionnée installée par le navigateur.
  
  Liste des balises. Il existe trois principaux types de listes dans un document HTML : les listes numérotées, à puces et de description.
  Vous pouvez créer des listes imbriquées en utilisant différentes balises de liste ou en répétant les unes dans les autres.  Pour ce faire, il vous suffit de placer une paire de balises (début et fin) dans l’autre.  Le fait que les éléments de liste imbriqués aient les mêmes marqueurs désignant l'élément de liste dépend du navigateur.
  Listes numérotées.  DANS Dans une liste numérotée, le navigateur insère automatiquement les numéros d'éléments dans l'ordre.  Cela signifie que si vous supprimez un ou plusieurs éléments d'une liste numérotée, les nombres restants seront automatiquement recalculés.
   
  et se termine par la balise
   
  .
  
  Listes à puces.  Pour Pour les listes à puces, le navigateur utilise généralement des puces pour l'élément de liste.  Le type de marqueur est généralement configuré par l'utilisateur du navigateur.
  Une liste numérotée commence par une balise de début 
  et se termine par la balise
  .  Chaque élément de la liste commence par une balise<ы>.
  
  Formatage de la police. HTML autorise deux approches pour la sélection des polices de fragments de texte.  D'une part, vous pouvez indiquer directement que la police dans une certaine section du texte doit être en gras ou en italique, c'est-à-dire  changer le style physique du texte.  D'un autre côté, il est possible de marquer un morceau de texte comme ayant un style logique non normal, laissant l'interprétation de ce style au navigateur.
  Graphiques à l'intérieur d'un document HTML. L'une des fonctionnalités les plus attrayantes du WEB est la possibilité d'inclure des données graphiques et autres dans un document HTML.
  Il existe deux manières d'utiliser des graphiques dans des documents HTML.  La première est l'intégration d'images graphiques dans un document, qui permet à l'utilisateur de voir les images directement dans le contexte d'autres éléments du document.  Cela se fait en utilisant la balise .  Cette balise est en pointillé, c'est-à-dire  ça ne ferme pas.  Syntaxe des balises :
  
  Le paramètre obligatoire a la même syntaxe qu'une URL standard.  Cette URL indique au navigateur où se trouve le
  dessin.  Le dessin doit être stocké dans un format graphique pris en charge par le navigateur.  Aujourd'hui, ce sont les formats GIF, JPG, PNG.  Ils sont pris en charge par la plupart des navigateurs.
  ALT="texte"
  Cet élément facultatif spécifie le texte qui sera affiché dans un navigateur qui ne prend pas en charge les graphiques ou avec les graphiques d'image désactivés.  Il s'agit généralement d'une brève description de l'image que l'utilisateur pourrait ou pourra voir à l'écran.  Si ce paramètre est absent, alors la plupart des navigateurs affichent un cadre vide à la place de l'image.  Étiqueter recommandé si les utilisateurs utilisent un navigateur non graphique, tel que Lynx, et pour l'indexation des moteurs de recherche.  Le texte est également visible lorsque vous maintenez le curseur de la souris pendant un certain temps sans vous déplacer sur l'image sous la forme d'une info-bulle système sous le curseur.
  La plupart des navigateurs vous permettent d'inclure une image d'arrière-plan dans votre document, qui se dupliquera comme des carreaux de salle de bain et apparaîtra comme arrière-plan de l'ensemble du document.  C'est la deuxième façon.  Certains utilisateurs aiment les graphiques d’arrière-plan, d’autres non.  Un motif translucide discret (papier peint) convient généralement comme arrière-plan à la plupart des documents.
  Les liens hypertextes sont un élément clé qui rend le WEB attractif pour les utilisateurs.  En ajoutant des liens hypertextes (ci-après dénommés liens), l'utilisateur rend l'ensemble des documents connectés et structurés, ce qui lui permet d'obtenir les informations dont il a besoin le plus rapidement et le plus facilement possible.
  Les liens ont un format standard, qui permet au navigateur de les interpréter et d'exécuter les fonctions nécessaires (méthodes d'appel) en fonction du type de lien.  Les liens peuvent pointer vers un autre document, un emplacement spécifique dans un document ou exécuter d'autres fonctions telles que demander un fichier.  Vous pouvez utiliser du texte, une image ou les deux comme lien hypertexte.
  Structure des liens dans un document HTML. Pour que le navigateur affiche un lien vers une URL, vous devez placer du texte ou une image à l'intérieur de la balise hyperlien.  La syntaxe HTML est la suivante :
  <А HREF="URL">texte ou image-qui-sera-mis en évidence-sous forme de lien
  
  Étiqueter<А HREF="URL">ouvre la description du lien, et la balise– le ferme.  Tout texte situé entre ces deux balises est mis en évidence de manière particulière par le navigateur Web.  Généralement, ce texte apparaît souligné et mis en surbrillance.  L'image est encadrée par un cadre rectangulaire.  Le texte qui représente l'URL n'est pas affiché par le navigateur, mais est utilisé uniquement pour effectuer les actions prévues lorsque le lien est activé (généralement en cliquant sur le texte en surbrillance ou souligné).
  Liens vers des balises dans le document. Vous pouvez créer un lien vers différentes zones ou sections du même document en utilisant des étiquettes masquées spéciales pour ces sections.  Cela vous permet de vous déplacer rapidement d'une section à l'autre dans un document sans faire défiler l'écran.  Dès que l'utilisateur clique sur le lien, le navigateur le déplacera vers la section spécifiée du document, et la ligne contenant le label de cette section sera placée sur la première ligne de la fenêtre du navigateur (si la « longueur » de le document dans la fenêtre du navigateur suffit).
  Chaque document HTML doit commencer par la balise <
  HTML>
   et terminez par le tag HTML>
  .  Ces balises indiquent que les lignes entre elles représentent un seul document HTML.  De plus, vous pouvez voir qu'un fichier HTML dans son ensemble est un élément du langage HTML.
  De plus, le document HTML doit contenir les éléments HEAD (informations sur le document) et BODY (corps du document).
  Section DocumentsTÊTE
  La section HEAD d'un document définit son titre et contient également des informations supplémentaires sur le document pour le navigateur.  Cette section est facultative, mais il est recommandé de toujours l'utiliser dans vos documents HTML, car un en-tête bien rédigé peut s'avérer très utile.
  La section d'en-tête commence par la balise <
  TÊTE>
   et suit immédiatement la balise .  Entre les balises d'ouverture et de fermeture de l'élément HEAD se trouvent d'autres éléments d'en-tête.
  Titre du document titre
  Pour donner un nom à un document HTML, la balise est <
  TITRE>
  .  Ce nom sera affiché dans le titre de la fenêtre du navigateur.  Le titre est écrit entre les balises  et est une ligne de texte.  La longueur de cette ligne peut être quelconque, mais il est recommandé de ne pas dépasser 60 caractères.  L'élément TITLE ne doit apparaître que dans la section HEAD.
  Section DocumentsCORPS
  Cette section du document contient les informations affichées dans la fenêtre du navigateur.  La section BODY doit commencer par la balise <
  CORPS>
   et terminez par le tag CORPS>
  , entre lesquels se trouvent les éléments HTML qui composent le contenu du document.
  Spécification de l'articleCORPS
  Étiqueter possède un certain nombre d'attributs qui déterminent l'apparence du document.  Vous trouverez ci-dessous la spécification de la balise .
  TEXTE="couleur du texte"
  BGCOLOR="couleur de fond"
  BACKGROUND="adresse de l'image d'arrière-plan"
  L'attribut TEXT spécifie la couleur de police de l'ensemble du document en RVB ou en notation de caractères.  Par défaut (si cet attribut n'est pas précisé), les paramètres du navigateur sont utilisés.
  L'attribut BGCOLOR spécifie la couleur d'arrière-plan de la fenêtre du navigateur de documents en RVB ou en notation symbolique.  Les paramètres du navigateur sont utilisés par défaut.
  L'attribut BACKGROUND permet de préciser l'adresse et le nom de l'image utilisée comme fond.  Ce dessin sera reproduit et distribué en arrière-plan du document.
  Les attributs LINK, VLINK et ALINK spécifient les couleurs des hyperliens en RVB ou en notation symbolique.  Les paramètres du navigateur sont utilisés par défaut.  Un lien hypertexte non visité est un lien hypertexte qui n’a pas encore été utilisé pour accéder à un autre document.  Un lien hypertexte visité est un lien hypertexte qui a déjà été utilisé pour naviguer vers un autre document.  Lien hypertexte actif – un lien hypertexte vers le document vers lequel vous accédez actuellement.
  Conseils d'utilisation des attributs de balise BODY
   Si vous spécifiez au moins une couleur dans la balise BODY, spécifiez également les autres.  Cela est dû au fait que l'utilisateur peut définir les paramètres de couleur de son navigateur comme cela lui convient le mieux.  La spécification d'une seule couleur peut entraîner une fusion du texte avec la couleur d'arrière-plan pour certains utilisateurs.  En conséquence, la visualisation du document sera difficile.
   Choisissez la couleur du texte pour qu'il « fonctionne » avec la couleur de fond ou les couleurs principales de l'image.  Par exemple, le rouge sur le vert peut causer de graves problèmes à un nombre important de personnes.
   BGCOLOR et BACKGROUND peuvent être spécifiés dans l'élément BODY.  Dans ce cas, le navigateur privilégie BACKGROUND, mais si l'image de fond ne peut pas être chargée, BGCOLOR sera utilisé.  Par conséquent, essayez de définir la couleur d’arrière-plan pour qu’elle soit similaire à la couleur de l’image d’arrière-plan afin de ne pas perturber l’équilibre des couleurs du document.
  
  
  
  
  
  
  
      
   
      
  Il pourrait être utile de lire :
      
  
       
  Procédure pas à pas du jeu - Test délicat;
   
  Les horreurs les plus terribles.  Des histoires effrayantes.  Les horreurs les plus terribles Camp histoire d'horreur cercueil sur roues;
   
  Montres pour enfants : types, leurs caractéristiques;
   
  Impossible d'enregistrer le formulaire de document (facture) au format Excel - les boutons "Enregistrer" et "Enregistrer sous" ne sont pas disponibles;
   
  Comment redimensionner les cellules dans Excel et les rendre identiques Comment modifier la largeur de toutes les colonnes dans Excel;
   
  Paramètres de base de l'espace de travail AutoCAD Comment créer un système de coordonnées personnalisé dans AutoCAD;
   
  Traduction des nombres dans les systèmes de numérotation positionnelle;
   
  Résonance de tension dans un circuit oscillant en série;