Le langage de balisage hypertexte (HTML) est le plus souvent utilisé pour créer des programmes de formation électroniques.

Ce choix est dû au fait que, outre la facilité de création de ce type de document, le langage de balisage hypertexte possède d'énormes capacités, telles que la sortie de texte formaté, en utilisant objets graphiques presque tous les formats connus, utilisant une image de fond, insérant des objets tels qu'un fond sonore, une vidéo, etc.

De plus, HTML facilite l'organisation des liens vers d'autres objets ou fragments de texte dans le document lui-même.

Le gros avantage du HTML est que la plupart des outils modernes (tels que le texte et éditeurs graphiques, langages de programmation visuels, Internet Explorer...) prend en charge le travail et l'enregistrement de documents au format HTML.

Par conséquent, HTML est souvent utilisé pour créer de tels produits logiciels. Cependant, la création différents typesÀ mon avis, les exemples de démonstration, les procédures de test et les enquêtes sont encore facilités grâce aux langages de programmation visuels.

Par conséquent, cette thèse examine l’intégration de divers outils pour créer des formations, des programmes de test et des manuels électroniques.

Cependant, utilisez Documents HTML facilite grandement la rédaction de la partie théorique du programme et la rend plus vivante. Examinons quelques problèmes liés à Création HTML documents. Vous pouvez travailler sur le Web sans connaître HTML, car Textes HTML peut être créé par divers éditeurs et convertisseurs spéciaux.

Cependant, il est préférable d'écrire directement en HTML, ou au moins de surveiller et de modifier le code HTML de temps en temps. Écrire directement en HTML n'est pas difficile. Cela peut même être plus facile que d'apprendre un éditeur ou un convertisseur HTML, dont les capacités sont souvent limitées, boguées ou qui produisent du mauvais HTML qui ne fonctionne pas sur diverses plates-formes.

La première version de HTML a été développée au début des années 90 par Tim Beners-Lee pour le navigateur autrefois populaire Mosaic. Mais à cette époque, ni le navigateur ni le langage lui-même n’avaient encore trouvé une utilisation digne. HTML+ est apparu en 1993, et cette version est également passée quasiment inaperçue. L'utilisation généralisée de l'hypertexte a commencé avec la version 2.0, apparue en juin 1994.

C’est à ce moment-là que WWW a commencé à gagner en popularité dans le monde entier. Les éléments inclus dans la version 2 sont, pour la plupart, encore utilisés aujourd'hui.

La version 3.0 de HTML, apparue un an plus tard, introduit la possibilité de dessiner des symboles mathématiques (signes entiers, signes infinis, fractions, parenthèses, etc.) à l'aide d'éléments de langage. Des navigateurs (Arena) ont également été développés pour cette version. Mais ce projet s'est avéré être une impasse et n'a pas été davantage diffusé.

En 1996, la version HTML 3.2 est apparue. Il s'agissait d'une solution innovante ; il suffit de mentionner que les cadres ont été introduits dans la spécification du langage, qui sont désormais devenus très populaires parmi les développeurs de pages Web.

Même aujourd’hui, de très bonnes solutions de conception peuvent être mises en œuvre sur la base de cette spécification. Presque tous les navigateurs modernes prennent entièrement en charge la version 3.2, les auteurs n'ont donc aucun doute sur la fonctionnalité des éléments déclarés.

Parallèlement aux spécifications de langue officielle développées par l'organisation W3C (W3 Consortium), les fabricants de navigateurs ont créé leurs propres éléments (extensions).

Par la suite, certains de ces éléments, après avoir été généralement acceptés, ont été inclus dans la spécification de la prochaine version du langage. Il est intéressant, par exemple, qu'une solution innovante - les frames - que de nombreux développeurs appréciaient, n'ait pas été incluse dans la spécification 3.2.

Mais les navigateurs prenaient en charge les frames, et de nombreux livres sur HTML incluaient des descriptions de frames sans mentionner qu'il s'agissait d'éléments non standard. Et c’était vrai, car les montures sont devenues la norme de facto. Ils étaient déjà inclus dans la version linguistique 4 pour une bonne raison.

A l’inverse, les éléments APPLET et SCRIPT requis pour Extensions HTML les autres codes de programme, dans la version 3.2, ne jouaient pas le rôle qu'ils étaient censés jouer.

Cela s'explique par le fait que les navigateurs de différentes versions interprétaient les programmes de différentes manières. Langages Java, JavaScript, Visual Basic VBScript. En conséquence, il n'a pas été possible d'obtenir du code qui fonctionnait de manière suffisamment fiable, et ces langages étaient utilisés par les passionnés de HTML principalement à des fins d'expérimentation.

La spécification officielle HTML 4 (Dynamic HTML) est apparue en 1997. À cette époque, il était déjà évident que le développement ultérieur de l’hypertexte se ferait par le biais de la programmation de scripts. Cela s’est avéré bien plus efficace que d’introduire de nouveaux éléments dans le langage.

Les navigateurs apparus à cette époque (Netscape Navigator 4, Microsoft Internet Explorer 4, etc.) interprétaient déjà le code du programme de manière assez fiable (un certain niveau de standardisation était atteint). Cependant, les développeurs ont encore des problèmes. A titre d'exemple, on peut noter que de nombreux scripts commencent par déterminer la version du navigateur pour ensuite utiliser tel ou tel morceau de code.

Évidemment, le programmeur est responsable de tester les pages sur tous les navigateurs actuellement populaires. De plus, la problématique de l’utilisation d’anciens ou peu anciens reste d’actualité. programmes populaires. Microsoft et Netscape sont à juste titre considérés comme les leaders du développement de navigateurs, mais il existe également d'autres sociétés.

En conséquence, l'utilisation de toutes les capacités du HTML dynamique est devenue la responsabilité des programmeurs d'organisations assez grandes, où existent les conditions nécessaires au développement de programmes complexes et à leurs tests complets. Les créateurs de pages Web personnelles doivent parfois faire des compromis entre fiabilité et innovation afin d'obtenir un code HTML suffisamment compétent.

Anatomie d'une page Web

Vous trouverez ci-dessous un exemple de document Web typique. Dans cet exemple, nous examinerons la structure des pages HTML.

Exemple (modèle) de page Web

<Т1Т1Е>Structure des pages Web

Si vous regardez les textes sources de différentes pages Web, vous pouvez facilement voir la similitude de leurs structures. Cela s'explique par le fait que les documents sont créés selon certaines règles.

La syntaxe du langage HTML est basée sur la norme ISO 8879 :1986 « Traitement de l'information. Systèmes de texte et bureautiques. Langage de balisage généralisé standard (SGML) ». Certes, il existe une grande différence entre la norme officielle et la norme actuelle. Le HTML est en constante évolution, complété par de nouveaux éléments, et il doit être étudié non pas à partir de sources primaires officielles, mais dans la pratique, en se tournant vers les derniers développements des principales entreprises et spécialistes.

Pour comprendre la structure d'une page Web, vous devez considérer le poids des éléments inclus dans le listing ci-dessus. Lors de l'examen des éléments de langage, nous utiliserons les deux balises : début et fin.

Par exemple: . On peut souligner que dans la plupart des cas, le développeur doit utiliser deux balises pour chaque élément. Le nombre de cas où seule une balise de début est autorisée (certains éléments n'ont aucune balise de fin) est faible et ils sont spécifiquement spécifiés. Pour les noms de balises, vous pouvez utiliser des lettres majuscules et minuscules de l’alphabet latin.

Certains utilisateurs écrivent les balises de début en majuscules et les balises de fin sont en minuscules. Cela aide à comprendre texte source Pages Internet.

Syntaxe HTML.

Désignation du document sur Langage HTML. Il a été mentionné ci-dessus que l'un des principes du langage est l'imbrication d'éléments à plusieurs niveaux. Cet élément est l'élément le plus externe, puisque la page Web entière doit être située entre ses balises de début et de fin.

En principe, cet élément peut être considéré comme une formalité. Il possède les attributs version, lang et dir, rarement utilisés dans ce cas, et permet l'imbrication de HEAD, BODY, FRAMESET et d'autres éléments qui déterminent la structure globale de la page Web. Naturellement, la balise de fin tous ces documents sont en train de s'épuiser.

La zone de titre d'une page Web. Autrement dit, sa première partie. Tout comme l'élément précédent, HEAD sert uniquement à former la structure globale du document. Cet élément peut avoir les attributs lang et d i r, doit inclure un élément TITLE et permet l'imbrication des éléments BASE, META, LINK, OBJECT, SCRIPT, STYLE.

Un élément pour placer le titre d'une page Web. La ligne de texte située à l'intérieur de cet élément n'est pas affichée dans le document, mais dans la barre de titre de la fenêtre du navigateur. Cette chaîne est souvent utilisée lors de l'organisation de recherches sur le WWW. Par conséquent, les auteurs créant des pages Web destinées à être publiées sur Internet doivent s'assurer que cette ligne, sans être trop longue, reflète fidèlement l'objectif du document.

Description du style de certains éléments de la page Web. Le fichier Strukt.htm attribue des polices aux éléments H2 et CODE.

Naturellement, pour chaque élément il existe un style par défaut, donc l'utilisation de l'élément STYLE n'est pas nécessaire, mais souhaitable.

Je me demande comment Syntaxe HTML reflète l'histoire du développement de la technologie informatique. Par exemple, l'ancien élément BLINK, aujourd'hui disparu, nous rappelle l'époque où les gens utilisaient des écrans qui n'avaient que mode texte. Compte tenu de cet état de choses, le texte clignotant était probablement le seul effet visuel réalisable.

En revanche, l'élément STYLE, introduit relativement récemment, évoque des associations avec les programmes Windows, puisqu'ils ont été les premiers à introduire le style de texte, qui est désormais incroyablement populaire, et sans lequel il n'est plus possible de travailler dans des applications telles que Word ou Excel.

Cet élément contient des informations de service qui ne sont pas reflétées lors de l'affichage d'une page Web. Il n’y a pas de texte à l’intérieur au sens habituel du terme, donc il n’y a pas de balise de fin. Chaque élément META contient deux attributs principaux, le premier définissant le type de données et le second le contenu.

De plus, l'élément META peut contenir une URL. Le modèle pour l'attribut correspondant est :

URL="http://adresse"

Cet élément contient de l'hypertexte, qui définit en fait page web. Il s'agit d'une partie arbitraire du document développée par la page automatique et affichée par le navigateur. Par conséquent, la balise de fin de cet élément doit se trouver à la fin du fichier HTML. À l'intérieur de l'élément BODY, vous pouvez utiliser tous les éléments destinés à la conception de pages Web. Dans la balise de début de l'élément BODY, vous pouvez placer un certain nombre d'attributs qui fournissent des paramètres pour la page entière. Regardons-les dans l'ordre.

L’un des plus utiles pour le design est l’attribut qui définit l’arrière-plan de la page. Son apparition peut être assimilée à une petite révolution sur le Web, puisque les mêmes pages Web grises se sont soudainement épanouies avec des motifs de couleurs vives :

background="Chemin d'accès au fichier d'arrière-plan"

Une conception d'arrière-plan plus simple revient à définir sa couleur :

bgcolor="#ff/?GGSS"

La couleur d'arrière-plan est spécifiée par trois nombres hexadécimaux à deux chiffres qui déterminent respectivement l'intensité des couleurs rouge, verte et bleue. Plus de détails sur la définition des couleurs seront discutés ci-dessous. Les deux attributs ci-dessus ne sont pas alternatifs et sont souvent utilisés ensemble : si pour une raison quelconque un motif d'arrière-plan ne peut pas être trouvé, la couleur est utilisée.

L’arrière-plan de la page pouvant changer, vous devez pouvoir faire correspondre la couleur du texte. A cet effet, il existe l'attribut suivant

texte="#/?/?GGB5"

Pour définir la couleur du texte des hyperliens, utilisez l'attribut suivant :

De la même manière, vous pouvez définir la couleur des hyperliens affichés :

vlink="#/?/?GGflS"

Vous pouvez également spécifier un changement de couleur pour le dernier lien hypertexte sélectionné par l'utilisateur :

L'hypertexte situé à l'intérieur de l'élément BODY peut avoir n'importe quelle structure. Elle est déterminée avant tout par le but de la page Web et l'imagination du développeur.

Élément d'en-tête. Il existe six niveaux de titres, désignés H1...H6. Le titre de niveau 1 est le plus grand et le niveau 6 fournit le titre le plus petit. Pour les titres, vous pouvez utiliser un attribut qui spécifie l'alignement à gauche, au centre ou à droite :

La règle horizontale est un élément très couramment utilisé. D’abord parce qu’il est très pratique de diviser une page en plusieurs parties. Deuxièmement, parce que l’auteur de la page dispose d’une très petite sélection de ces éléments de conception. En effet, il n'existe pratiquement pas de constructions similaires en HTML, seulement pour une raison quelconque, une exception a été faite pour la ligne horizontale. Certes, malgré une certaine avarice de langage dans ce domaine, vous pouvez proposer de nombreuses images graphiques standards qui diversifieraient l'apparence des pages.

L'élément ne possède pas de balise de fin, mais permet d'aligner un certain nombre d'attributs à gauche, centré, à droite, justifié :

Vous pouvez définir l'épaisseur du trait :

51ge = épaisseur en pixels

Vous pouvez contrôler la longueur de la ligne :

fiitifn - longueur en pixels

width=/^twa en pourcentage/heure

Vous pouvez choisir la couleur :

co1og="couleur"

Le document HTML peut être très volumineux, auquel cas l'utilisateur doit pouvoir accéder rapidement à section nécessaire document Pour ce faire, vous pouvez utiliser le mécanisme de lien hypertexte. Il est également nécessaire de placer des marques appropriées aux bons endroits dans le texte. Ici, nous examinerons uniquement le modèle de création d'étiquettes :

<А name=" метка ">Texte libre

Dans ce cas, une ligne donnée du document reçoit un nom, et donc un lien hypertexte peut être créé dans une autre partie du document, voire sur un autre document, menant vers ce point. Par exemple, pour naviguer dans un document, vous pouvez utiliser la construction suivante :

<Р>Aller à<А href=" Пметка ">étiquette

Plusieurs lignes similaires peuvent former une sorte de table des matières d'une page Web, qui peut être placée au début et à la fin du document.

Article pour la tâche adresse de base(URL) pour les liens. Cela vous permet d'omettre la partie initiale de l'adresse dans les liens vers les documents. Pour utiliser cet élément vous devez utiliser la construction suivante :

Le chemin // fragment d'adresse est facultatif.

Lorsqu'une adresse complète est générée, elle sera supprimée.

Ainsi, s'il y a un lien relatif dans le texte du document

<А ef =" путь2/имя документа, htm" ">Texte du lien visible,

alors il correspondra à l'URL

Dans le cas où vous devez définir l'adresse de base d'un disque local (par exemple.D :), la construction suivante doit être utilisée :

Ensuite, lors de la spécification d'un lien relatif, vous pouvez spécifier non seulement le nom du fichier, mais également les noms des dossiers dans lesquels il se trouve. En d’autres termes, le chemin d’accès aux fichiers peut être divisé en deux parties : absolu et relatif. Ceci est utile lorsque les fichiers spécifiés dans le document ont un fragment de chemin de départ commun. Dans une expression de lien absolu, vous pouvez également omettre la référence au schéma d'accès (fichier://). Dans ce cas, seule la partie gauche du lien absolu jusqu'au premier caractère gauche "", c'est-à-dire le nom du disque local, sera prise en compte.

Règles de syntaxe

Maintenant que nous savons à quoi ressemble le code d’une page Web, nous pouvons tirer quelques conclusions générales sur la syntaxe HTML. Lors de l'utilisation de chaque élément, il est important de savoir quels éléments peuvent être situés à l'intérieur et quels éléments lui-même peuvent être situés à l'intérieur.

Ainsi, la position relative des éléments HTML, HEAD, TITLE et BODY doit être standard sur n'importe quelle page, cependant, dans les cas où les cadres ne sont pas utilisés. Si la page est un document de mise en page de cadre, l'élément FRAMESET est utilisé à la place de l'élément BODY.

Il existe des groupes d'éléments qui sont utilisés ensemble. Ceux-ci incluent des éléments permettant de créer des tableaux, des listes et des cadres.

Dans ce cas, l'ordre des éléments d'imbrication est déterminé par la logique de création d'un objet particulier sur la page : ici, vous devez vous rappeler des règles de conception simples.

Les tableaux et les cadres sont souvent utilisés pour organiser les détails de la page (images, texte, etc.) dans un ordre spécifique.

Par exemple, en plaçant une image dans une cellule d’un tableau, vous pouvez atteindre une certaine position.

Dans de tels cas, l'imbrication des éléments est déterminée par le développeur de la page Web et dépend en grande partie de son imagination et de ses compétences.

Le grand nombre d’éléments utilisés pour formater le texte permet une grande variété d’options d’imbrication. Et eux-mêmes doivent nécessairement être situés à l'intérieur de certains éléments.

Ici, il faut se laisser guider par le bon sens : chaque élément remplit une fonction donnée et a une portée spécifique.

L'exemple ci-dessous comporte deux paragraphes (le premier dans un encadré vert) et un tableau :

<Р style="border: Зрх solid дгееп">Texte du paragraphe 1

. . .

<Р>Texte du paragraphe 2

Le tableau dans ce cas est un élément indépendant. Il peut par exemple être aligné indépendamment du reste du texte.

Vous pouvez utiliser un autre code :

<Р style="border: Зрх solid дгееп">Texte du paragraphe 1

. . .

<Р>Texte du paragraphe 2

La balise de fin du premier paragraphe a disparu. Le tableau fait désormais partie du premier paragraphe et la bordure verte entourera le tableau et le texte. A l’inverse, un élément P peut être situé à l’intérieur d’un tableau : par exemple, un élément TD de cellule peut contenir plusieurs P paragraphes.

La violation des règles d'imbrication est l'une des erreurs les plus courantes lors de la création de pages Web. Pour éviter de telles erreurs, vous devez utiliser des éditeurs hypertextes qui contrôlent automatiquement l'exécution des règles de syntaxe. Vous trouverez ci-dessous une ligne contenant une erreur typique d'élément imbriqué :

<Н1>Titre 1<Н2>Titre 2Titre 3

Il convient de noter que les navigateurs sont conçus de telle manière qu'ils « essayent » de répondre aux erreurs de balisage hypertexte. Si la page peut être affichée, elle est affichée sans aucun message d'avertissement.

Le programme interprète les balises placées par erreur d'une certaine manière et génère une image, en suivant la logique intégrée par les développeurs. Dans le même temps, l’apparence de la page peut ne pas correspondre à l’intention de l’auteur. Et ce n'est qu'en cas d'erreurs très graves ou de contradictions évidentes que le navigateur affiche un message indiquant que la page ne peut pas être affichée.

Un signe indirect d'une erreur de balisage peut être l'apparition de fragments de code HTML sur la page. Les utilisateurs qui travaillent beaucoup avec Internet ont probablement été confrontés à cette situation.

Les règles de syntaxe s'appliquent également à l'utilisation des balises de début et de fin, des attributs et du contenu des éléments. Ne confondez pas les notions d'« élément » v. "étiqueter". Un élément est un conteneur contenant des attributs dans la balise de début et des informations utiles entre les balises de début et de fin. Une balise est une construction entourée de crochets angulaires et utilisée pour indiquer la portée d'un élément.

Certains éléments n'ont pas de balise de fin. Évidemment, l’élément BR, qui marque la fin d’une ligne, n’a pas besoin de balise de fin. Certains éléments peuvent être utilisés avec ou sans balise de fin. L’exemple le plus frappant est l’élément de paragraphe R.

Il peut avoir une balise de fin, mais si cette balise n'est pas spécifiée, alors la balise de fin de l'élément est l'élément suivant qui peut logiquement définir la fin du paragraphe courant : un autre élément P, un élément de dessin IMG, un élément de liste UL, un Élément de table TABLE, etc.

Ainsi, la charge utile d'un élément doit être située soit entre les balises de début et de fin de cet élément, soit entre la balise de début de cet élément et la balise de début de l'élément suivant.

Tout texte arbitraire saisi sur une page est interprété par le navigateur comme étant destiné à être affiché à l'écran et donc formaté en fonction des éléments entourant ce texte. Ceci ne prend pas en compte la division du texte en lignes obtenue dans un éditeur de texte. En théorie, une page Web entière pourrait être contenue dans une seule longue ligne. Les caractères de fin de ligne saisis, par exemple, dans le Bloc-notes, peuvent aider à lire le code HTML, mais ne sont pas affichés par le navigateur.

Ce dernier, lors de l'affichage d'une page à l'écran, peut couper une ligne selon la disposition des éléments Hn, P ou BR, et dans d'autres cas, il formate les paragraphes de manière arbitraire, en fonction de la quantité de texte, de la taille de la police et de la valeur actuelle. taille de la fenêtre.

Par conséquent, les pages Web doivent être organisées de manière à ce que leur apparence ne change pas radicalement en fonction des différents modes de résolution du moniteur, de la taille de l'écran, de la taille de la fenêtre du navigateur et des modes plein écran ou fenêtré.

Une règle très importante, qui ne connaît aucune exception, consiste à placer les attributs de l'élément à l'intérieur de la balise de début.

Langage de balisage hypertexte (Html)

Le World Wide Web, ou quelque chose de similaire au World Wide Web, WWW est le principal composant du réseau informatique mondial Internet. Né dans les années 60, Internet a longtemps été utilisé uniquement par un cercle restreint de spécialistes pour échanger des informations par courrier électronique. Le réseau était contrôlé par le système d'exploitation UNIX - cela convenait à des fins scientifiques, mais l'interface texte UNIX plutôt complexe limitait considérablement le champ d'application des technologies de réseau. L'année de naissance du World Wide Web est considérée comme 1989 - ceci. année où le langage a été inventé, qui est devenu plus tard le langage principal des documents Web - Ce langage est le HTML (HyperText Markup Language).

L'auteur du langage HTML est Tim Berners-Lee, diplômé de l'Université d'Oxford, qui travaillait alors sous contrat à Genève, au Laboratoire européen de physique des particules (CERN, Conseil Européen pour la Recherche Nucléaire) en tant que consultant en logiciels. Le CERN est une organisation assez grande et, par conséquent, afin de mieux naviguer dans sa structure et de ne pas stocker en mémoire des données sur un grand nombre de projets, de responsables, etc., Tim Berners-Lee a développé le programme Inquire pour son usage personnel, sur le sur la base de laquelle, quelques années plus tard, une sorte d'espace d'information a été créé pour le laboratoire. Le programme Inquire permettait la recherche dite « non linéaire » de documents - c'est-à-dire passer d'un document à un autre sans consulter la table des matières ou l'ouvrage de référence.

Le langage HTML constitue la base de la technologie hypertexte. Un document hypertexte contient ce qu'on appelle des hyperliens.

Le langage de balisage de document est un ensemble d'instructions spéciales, appelées balises, conçues pour former une structure dans les documents et définir les relations entre les différents éléments de cette structure. Les balises de langue, ou balises de contrôle comme on les appelle parfois, sont en quelque sorte codées dans de tels documents, séparées du contenu principal du document et servent d'instructions au programme qui affiche le contenu du document côté client. Les premiers systèmes utilisaient les symboles «<” и “>», à l'intérieur duquel étaient placés les noms des instructions et leurs paramètres. Désormais, cette façon de désigner les balises est standard.

L'utilisation de la décomposition hypertexte d'un document texte dans les systèmes d'information modernes est en grande partie due au fait que l'hypertexte vous permet de créer un mécanisme de visualisation non linéaire des informations. Dans de tels systèmes, les données ne sont pas présentées comme un flux continu d’informations textuelles, mais comme un ensemble de composants interconnectés, sur lesquels on peut naviguer à l’aide d’hyperliens.

HTML n'est pas un langage de programmation en soi ; c'est un moyen de décrire la structure d'un document, son style et ses liens avec d'autres documents. Pour visualiser les documents Web, des programmes spéciaux sont utilisés - ce qu'on appelle des navigateurs (anglais : parcourir - 1) brouter, cueillir des pousses ; 2) lire, étudier au hasard, par à-coups.) En fait, les capacités des navigateurs sont beaucoup plus larges, mais pour l'instant nous nous limiterons à leur définition comme moyen de visualisation de documents Web. Internet doit sa popularité aux navigateurs.

Groupe de travail sur l'ingénierie Internet) a publié un projet de proposition de norme HTML

Structure des documents HTML

Un document HTML 4 se compose de trois parties :

• une chaîne contenant les informations de version HTML,
• déclarer la section d'en-tête (délimitée par l'élément HEAD),
• le corps contenant le document lui-même.

Le corps peut être contenu dans des éléments BODY ou FRAMESET. Caractères d'espacement(espaces, nouvelles lignes, caractères de tabulation et commentaires) peuvent apparaître avant ou après cette section.

Bonjour le monde!

Le document commence par un élément taper document, ou doctype. Il décrit le type de HTML qui sera utilisé pour que l'application cliente de l'utilisateur puisse déterminer comment interpréter le document et décider s'il suit les règles qu'il prétend suivre.

Après cela, vous pouvez voir la balise d'ouverture de l'élément html. Il s'agit d'un wrapper autour de l'ensemble du document. La balise HTML de fermeture est le dernier objet de tout document HTML.

À l’intérieur de l’élément html se trouve un élément head. Il contient des informations sur le document (métadonnées). Inside head se trouve un élément de titre qui définit le titre "Page simple" dans la barre de menu.

Après l'élément head vient l'élément body, qui est le wrapper qui contient le contenu réel de la page - dans ce cas, juste l'élément d'en-tête de premier niveau (h1), qui contient le texte « Bonjour tout le monde ! .

Les éléments contiennent souvent d'autres éléments. Le corps du document contiendra toujours de nombreux éléments imbriqués.

Les sections de page créent la structure globale du document et peuvent contenir des sous-sections. Ils peuvent également contenir des titres, des paragraphes, des listes, etc. Les paragraphes peuvent contenir des éléments qui créent des liens vers d'autres éléments, des citations, des surlignages, etc.

Syntaxe des éléments HTML

Un élément de base en HTML est constitué de deux balises entourant un bloc de texte. Il existe des éléments qui n'enveloppent pas le texte et, dans presque tous les cas, les éléments peuvent contenir des sous-éléments (tout comme le HTML contient l'en-tête et le corps dans l'exemple ci-dessus).

Les articles peuvent également avoir attributs, ce qui peut modifier le comportement de l'élément et introduire une valeur supplémentaire.

Dans cet exemple, l'élément div (la section de la page, la façon dont les documents sont divisés en blocs logiques) a un attribut id ajouté qui est défini sur en-tête. L'élément div contient un élément h1 (le premier titre de niveau, ou le plus important), qui à son tour contient du texte. Une partie de ce texte est enveloppée dans un élément abbr(qui est utilisé pour définir l'extension de l'abréviation) qui possède un attribut de titre dont la valeur est définie sur Langage de balisage hypertexte.

De nombreux attributs en HTML sont communs à tous les éléments, mais certains sont spécifiques à un ou plusieurs éléments donnés. Ils ont tous la forme :

mot-clé="valeur"

La valeur doit être placée entre guillemets simples ou doubles (dans certaines situations, les guillemets peuvent manquer, mais ce n'est pas très bon en termes de prévisibilité et de compréhension).

Les attributs et leurs valeurs possibles sont définis principalement par les spécifications HTML (http://www.w3.org/TR/html401/index/attributes.html), vous ne pouvez donc pas créer vos propres attributs. Les seules véritables exceptions sont les attributs id et class, dont les valeurs entières sont destinées à ajouter votre propre signification et sémantique aux documents.

Un élément à l'intérieur d'un autre élément est appelé "descendant" cet élément. Dans l'exemple ci-dessus abbr est un enfant de h1 , qui à son tour est un enfant de div . A l’inverse, div est « l’ancêtre » de l’élément h1.

Éléments de niveau bloc et éléments en ligne

Il existe deux grandes catégories d'éléments en HTML, qui correspondent aux types de contenu et à la structure que représentent ces éléments - éléments de niveau bloc et éléments en ligne.

Niveau de blocage désigne un élément de niveau supérieur, informant généralement sur la structure du document. Les éléments de niveau bloc peuvent être considérés comme des éléments qui commencent sur une nouvelle ligne, s'éloignant de ce qui la précède. Commun éléments de bloc sont paragraphes, puces, titres et tableaux.

Éléments de chaîne sont contenus dans des éléments structurels au niveau des blocs et couvrent uniquement des parties du texte du document, et non des zones entières. Un élément en ligne n'entraîne pas l'apparition d'une nouvelle ligne dans le document, car ce sont des éléments qui apparaissent dans un paragraphe de texte. Commun éléments de chaîne sont liens hypertextes, mots ou expressions surlignés et citations courtes.

Titre

L'en-tête d'un document HTML est un élément de balisage facultatif. Initialement, l'existence du titre était déterminée par la nécessité dénomination de la fenêtre du navigateur. Ceci a été réalisé grâce à élément de balisage TITRE:

... ...

Une autre fonction de l'en-tête du document HTML est de contrôler le trafic HTTP via élément de balisage MÉTA. Avec la pratique actuelle consistant à héberger les sites Web des entreprises sur les serveurs des fournisseurs, les administrateurs de ces sites risquent de ne pas être en mesure de gérer le programme serveur. Dans ce cas, il ne reste qu'une seule option pour contrôler l'échange : via l'en-tête du document HTML.

L'en-tête d'un document HTML est également destiné à décrire l'image de recherche du document, nécessaire à l'indexation du document par les robots des moteurs de recherche. L'élément META permet de stocker des listes de mots-clés et de descriptions de documents qui seront utilisés pour compiler un index du moteur de recherche et apparaîtront comme une description du document si un lien vers celui-ci est renvoyé lors d'une recherche par mot-clé.

Les balises d'en-tête de base sont des éléments de balisage HTML que l'on trouve le plus souvent dans l'en-tête d'un document HTML, c'est-à-dire à l'intérieur élément de balisage TÊTE:

• TITRE (titre du document) ;
• BASE (base d'URL) ;
• ISINDEX (modèle de recherche);
• META (méta-informations) ;
• LIEN (liens généraux) ;
• STYLE (descripteurs de style) ;
• SCRIPT (scripts).

Les éléments les plus couramment utilisés sont TITLE, SCRIPT, STYLE. L'utilisation de l'élément META indique la connaissance par l'auteur des règles d'indexation des documents dans les moteurs de recherche et la capacité à gérer les échanges de données HTTP. BASE et ISINDEX ont été peu utilisés ces derniers temps. LINK est spécifié uniquement lors de l'utilisation de descripteurs de feuille de style externes au document.

Élément de balisage HEAD contient l'en-tête du document HTML. Donné élément de balisage est facultatif. S'il y a une balise de début élément de balisage Il est conseillé d'utiliser également une balise de fin élément de balisage. Par défaut, l'élément HEAD est fermé si la balise de début du conteneur BODY ou la balise de début du conteneur FRAMESET est rencontrée.

Le conteneur d'en-tête est utilisé pour contenir des informations relatives au document dans son ensemble.

Élément de balisage TITRE est utilisé pour nommer un document sur le World Wide Web. Lors de la sélection de texte pour le contenu du conteneur TITLE, sachez qu'il est affiché police système, puisque c'est le titre de la fenêtre du navigateur.

La syntaxe générale du conteneur TITLE est la suivante :

L'en-tête n'est pas un conteneur de document obligatoire. Il peut être abaissé. Les robots de nombreux moteurs de recherche utilisent le contenu de l'élément TITLE pour créer une image de recherche du document. Les mots de TITLE sont inclus dans l’index du moteur de recherche. Pour ces raisons, il est toujours recommandé d'utiliser l'élément TITLE sur les pages d'un site Web.

Élément de balisage BASE est utilisé pour déterminer l'URL de base des liens hypertextes de documents spécifiés sous forme incomplète (partielle). De plus, BASE permet de définir la fenêtre cible de chargement du document par défaut lorsque vous sélectionnez un lien hypertexte pour le document en cours. BASE se trouve le plus souvent sur les pages de sites dotés de « miroirs ». Certains documents du serveur principal ne sont pas transférés vers le serveur « miroir » pour diverses raisons. Dans ce cas, un document avec une URL de base forcée sera toujours lié au serveur principal.

La balise de début du conteneur contient un attribut HREF obligatoire et peut contenir un attribut TARGET facultatif. La syntaxe générale d'un conteneur BASE est la suivante :

Élément de balisage ISINDEX est utilisé pour spécifier un modèle de recherche et est hérité des versions antérieures de HTML. En HTML 4.0, ce conteneur n'est pas défini.

Élément de balisage META

META contient des informations de contrôle que le navigateur utilise pour afficher et traiter correctement le contenu du corps du document, par exemple, à l'aide de l'attribut Content-type, vous pouvez spécifier le recodage du document côté client.

Vous pouvez également spécifier d'autres opérateurs à l'aide de META. Par exemple, désactivez la mise en cache des documents. Pour désactiver la mise en cache, insérez simplement une balise comme celle-ci dans l'en-tête META :

Dans la nouvelle version du protocole HTTP (HTTP 1.1), la mise en cache est contrôlée via l'instruction Cache-Control. Pour obtenir le même résultat que dans le cas de Pragma, dans l'entête du document HTML il suffit d'indiquer :

Vous pouvez interdire la conservation d'un document après sa transmission.

Hyper Text Markup Language (HTML) - un langage de balisage hypertexte - est destiné à la rédaction de documents hypertextes publiés sur le World Wide Web.

Un document hypertexte est un fichier texte comportant des marques spéciales, appelées balises, qui sont ensuite reconnues par le navigateur et utilisées par celui-ci pour afficher le contenu du fichier sur l'écran de l'ordinateur.

À l'aide de ces marques, vous pouvez mettre en évidence les titres des documents, modifier la couleur, la taille et le style des lettres et insérer des graphiques et des tableaux. Mais le principal avantage de l'hypertexte par rapport au texte ordinaire est la possibilité d'ajouter des hyperliens vers le contenu d'un document - des constructions spéciales du langage HTML qui vous permettent de cliquer sur une souris pour afficher un autre document.

Document HTML se compose de deux parties : le texte lui-même, c'est-à-dire les données qui composent le contenu du document, et les balises - des constructions spéciales du langage HTML utilisées pour baliser le document et contrôler son affichage. Les balises du langage HTML déterminent sous quelle forme le texte sera présenté, lesquels de ses composants feront office de liens hypertextes et quels objets graphiques ou multimédias devront être inclus dans le document.

Les informations graphiques et audio incluses dans un document HTML sont stockées dans des fichiers séparés. Visionneuses de documents HTML ( navigateurs) interpréter les indicateurs de balisage et organiser le texte et les graphiques à l'écran en conséquence. Pour les fichiers contenant des documents HTML, les extensions acceptées sont .htm ou .html.

Dans la plupart des cas, les balises sont utilisées par paires. La paire se compose d'une ouverture<имя_тега>et fermeturebalises L'effet de toute balise appariée commence là où la balise d'ouverture est rencontrée et se termine lorsque la balise de fermeture correspondante est rencontrée. Souvent, une paire composée d'une balise d'ouverture et d'une balise de fermeture est appelée récipient, et la partie du texte bordée par les balises d'ouverture et de fermeture est élément.

La séquence de caractères qui constitue le texte peut être composée d'espaces, de tabulations, de nouvelles lignes, de retours chariot, de lettres, de signes de ponctuation, de chiffres et de caractères spéciaux (tels que #, +, $, @), à l'exception des quatre caractères suivants, qui ont In HTML, les significations spéciales sont (supérieur à), & (esperluette) et " (guillemet double). Si vous devez inclure l'un de ces caractères dans votre texte, vous devez l'encoder avec une séquence spéciale de caractères.

Structure des documents HTML

La balise HTML la plus importante est la balise du même nom. . Il ouvre toujours le document, tout comme une balise doit certainement apparaître dans sa dernière ligne. Ces balises indiquent que les lignes entre elles représentent un seul document hypertexte. Sans ces balises, un navigateur ou un autre visualiseur est incapable d'identifier le format du document et de l'interpréter correctement.

Un document HTML se compose de deux parties : un en-tête et un corps, disposés dans l'ordre suivant :

Titre du document Corps du document

Le plus souvent, une balise appariée est incluse dans le titre du document , définissant le titre du document. De nombreux spectateurs l'utilisent comme titre de la fenêtre dans laquelle le document est affiché. Les programmes qui indexent des documents sur Internet utilisent le titre pour identifier la page. Un bon titre doit être suffisamment long pour identifier correctement la page correspondante, mais en même temps il doit tenir dans le titre de la fenêtre. Le titre du document s'insère entre les balises d'ouverture et de fermeture.

Corps du document est un élément obligatoire, car il contient tout le matériel du document. Le corps du document est placé entre les balises Et. Tout ce qui est placé entre ces balises est interprété par le navigateur selon les règles du langage HTML, permettant à la page de s'afficher correctement sur l'écran du moniteur.

Le texte en HTML est divisé en paragraphes à l'aide d'une balise<р>. Il est placé au début de chaque paragraphe et le spectateur, lorsqu'il le rencontre, sépare les paragraphes les uns des autres par une ligne vierge. Utiliser une balise de fermeturefacultatif.

Si vous souhaitez « casser » le texte, en déplaçant le reste sur une nouvelle ligne, sans sélectionner de nouveau paragraphe, utilisez la balise de saut de ligne.
. Il oblige le spectateur à afficher les caractères qui le suivent sur une nouvelle ligne. Contrairement à la balise paragraphe, la
n'ajoute pas de ligne vide. Cette balise n'a pas de balise de fermeture appariée.

Langage HTML pris en charge mise en forme logique et physique du contenu du document. Le formatage logique indique le but d'un morceau de texte donné, tandis que le formatage physique détermine son apparence.

Lors de l'utilisation formatage logique texte, le navigateur sélectionne différentes parties du texte en fonction de la structure du document. Pour afficher le titre, l'une des balises de titre est utilisée. Les titres d'un document typique sont divisés en niveaux. HTML vous permet de définir six niveaux de titres : h1 (titre de premier niveau), h2, h3, h4, h5 et h6. Le titre du premier niveau est généralement plus grand et plus riche que le titre du deuxième niveau. Exemple d'utilisation des balises d'en-tête :

l. Titre du chapitre

s.l. Titre de la section

Balises formatage physique définir directement l'apparence du texte sur l'écran du navigateur, par exemple, quelques surlignements du texte en gras, définit le soulignement du texte, contrôle la police du texte.

Étiqueter insère une image dans un document comme s'il s'agissait d'un simple grand caractère. Exemple d'utilisation d'une balise :

Pour créer lien hypertexte quelques balises sont utilisées<а>... . Un morceau de texte, une image ou tout autre objet situé entre ces balises s'affiche dans la fenêtre du navigateur sous forme de lien hypertexte. L'activation d'un tel objet entraîne le chargement d'un nouveau document dans la fenêtre du navigateur ou l'affichage d'une autre partie de la page Web actuelle. Un lien hypertexte se forme à l'aide de l'expression :

Href est ici un attribut obligatoire, dont la valeur est l'URL de la ressource demandée. Les guillemets spécifiant la valeur de l'attribut href sont facultatifs. Si un lien vers un document sur un autre serveur est spécifié, alors le type de lien hypertexte est le suivant :

<а href = "http://www.school.donetsk.ua/11.jpg">Photo 11-A

À l'aide de diverses balises, vous pouvez dessiner des tableaux, formater du texte, insérer des images, des vidéos, des fichiers audio, etc. dans un document.

3. Langage hypertexte HTML

Les hypertextes doivent commencer par un mot et se terminer par un mot. Les mots entre crochets sont appelés balises en HTML et descripteurs en programmation. Presque toutes les balises HTML sont appariées - et, et, etc.

Les balises appariées mettent en évidence un certain fragment d'hypertexte - « titre », « corps », etc. La première balise commence le fragment et la seconde le complète. Les descripteurs de fermeture précèdent le nom d'un signe de fraction / .

La structure générale des hypertextes écrits en HTML :

hypertexte : = corps du titre

titre ::= titre

titre ::= titre

corps ::= texte

Selon les règles HTML, les hypertextes doivent avoir un « titre » et un « corps ». En tant que publications, les hypertextes peuvent et doivent contenir des informations sur les auteurs et les titulaires de droits d'auteur (sites).

Le titre de l'hypertexte doit contenir un « titre », qui est affiché par les navigateurs sur la toute première ligne de l'écran de l'ordinateur. Le titre doit exprimer l'idée principale de la publication (page). L’hypertexte sans titre est comme un article sans titre.

Le « corps » de l'hypertexte doit contenir des textes, des tableaux, des photographies et des illustrations. La différence entre les hypertextes électroniques et les textes papier ordinaires réside dans l'inclusion d'hyperliens, sur lesquels un clic provoque le téléchargement de nouveaux hypertextes.

Un exemple d'hypertexte et le résultat de son affichage par un navigateur sur un écran d'ordinateur :

Hypertexte : Résultat :

Le résultat du navigateur est le chargement et l'affichage des hypertextes stockés sur le site Internet à l'adresse indiquée dans la fenêtre du navigateur. Si l'hypertexte est trop volumineux, le navigateur affiche des boutons de déplacement hypertexte à droite ou en bas de l'écran.

Les tailles des écrans d’ordinateur ont la plage suivante. La taille minimale de l'écran est de 640 x 480 pixels. Les autres tailles d'écran standard sont 800 x 600, 1024 x 768 et 1280 x 1024 pixels. Par conséquent, les hypertextes peuvent avoir un aspect différent selon les écrans.

Structure générale des hypertextes et leur affichage sur un écran d'ordinateur :

Hypertexte : Résultat :

La partie texte peut être constituée de lignes et de paragraphes avec et sans titres, avec des listes, des tableaux et des menus.

corps ::- texte

text::= titre ( texte ) |

liste(texte) |

tableau(texte) |

Les titres dans les hypertextes sont formatés comme suit :

titre ::=

Nom

titre ::=

Nom

titre ::=

Nom

où les balises H2, ..., h6 fixent la taille des titres par rapport au texte principal.

Les paragraphes des hypertextes commencent par un descripteur

hypertexte |

|

La transition vers une nouvelle ligne et des paragraphes est indiquée par un descripteur . La fin du paragraphe p> est facultative, mais est obligatoire lors de l'utilisation de paramètres dans le descripteur de paragraphe.

Le paramètre principal des paragraphes est l'alignement - l'alignement des textes sur l'écran de l'ordinateur. L'alignement du texte est effectué automatiquement par les navigateurs en fonction de la taille de l'écran de l'ordinateur :

align=center - centre l'écran :

align=gauche- vers le bord gauche ;

align=right - vers le bord droit ;

align=justify - plein écran.

Pour aligner les paragraphes, un seul style commun doit être choisi et appliqué à tous les hypertextes du site.

Pour la conception d'hypertextes, le langage de balisage HTML dispose d'une riche gamme de polices, de styles et de ressources. Le moyen de conception le plus simple consiste à mettre en évidence des mots afin d'attirer l'attention des lecteurs du site Web sur des parties individuelles des textes.

Vous pouvez utiliser le gras ou le soulignement pour surligner des mots en hypertexte à l'aide des balises suivantes :

Grands symboles

caractères gras

italique i>

soulignant

rayer

petits personnages

La mise en évidence des polices dans les hypertextes est spécifiée par la balise :fonts::=police de texte>

Paramètres de police - leur taille et leur type. Les tailles de police sont spécifiées par le paramètre size = size.

La taille est indiquée explicitement de 1 à 6, soit sous forme d'augmentation +1, +2, soit de diminution - 1, - 2.

Le type de police est spécifié par le paramètre

visage = police

Ici la police fait partie des polices standards : "Times", "Courier", etc.

La couleur de la police est spécifiée par le paramètre co1og = color, où color est la couleur du fragment hypertexte sélectionné. Par exemple, surligner du texte en rouge :

police du texte >

Noms standards des couleurs dans le langage HTML :

rouge - rouge, vert - vert, bleu - bleu, noir - noir,

blanc - blanc, or - doré, jaune - jaune, etc.

Pour concevoir des hypertextes, il est préférable de prendre comme modèle un bon livre ou un magazine publié par une maison d’édition professionnelle, ou encore un livre électronique, un journal ou un site Internet conçu par un professionnel.

Un style de conception unifié est une propriété importante de toute publication dans des livres, des magazines et des sites Web. À l'avenir, il est préférable de respecter la norme et le style de conception acceptés pendant toute la période de création et de maintenance du site.

Des fragments d'hypertextes peuvent être localisés sur un même site ou sur plusieurs sites voire sur plusieurs serveurs. Des liens hypertextes externes indiquent les noms des fichiers correspondants sur le site, le serveur ou sur Internet :

La forme générale des hyperliens externes est la suivante :

où « adresse » est l'adresse de l'hypertexte au sein du site ou sur un autre serveur Internet.

Exemples de liens hypertextes externes :

a) adresse du site Web sur Internet :

http://bak2.nagod.gu

b) adresse de la page sur le site Web :

http://bak2.nagod.gu/inrogl.html.

c) l'adresse de la page dans le dossier du site ;

http://bak2.nagod.gu/tests/test2.html.

essais 2a>

Grâce au dispositif d'hyperliens, le placement de tous les dessins, photographies et autres illustrations graphiques sur les sites est organisé. Pour ce faire, tous les fichiers comportant des illustrations graphiques sont pré-enregistrés sur le site.

Les fichiers graphiques sont généralement placés sur des sites Web et dans un dossier séparé appelé image. Le chargement des illustrations sur les écrans des ordinateurs des utilisateurs est effectué par les navigateurs avec l'aide d'opérateurs :

La forme générale des opérateurs de chargement des illustrations graphiques :

L'emplacement des illustrations sur l'écran de l'ordinateur est déterminé par les paramètres d'alignement : align=left - le long du bord gauche, align=right - le long du bord droit de l'écran. Le texte contourne alors les illustrations à droite ou est aveugle.

Les illustrations peuvent être appuyées sur le bord supérieur ou inférieur de l'écran, qui est défini par les paramètres : align =top - vers le bord supérieur, align=bottom - vers le bord inférieur de l'écran ou alignés au milieu de l'écran. - aligner = milieu.

Pour positionner les illustrations sur l'écran de l'ordinateur, leur largeur et leur hauteur peuvent être précisées dans l'instruction de chargement :

hauteur:= hauteur= "hauteur"

largeur:= largeur= "longueur"

Les dimensions des illustrations sont spécifiées par le nombre de pixels de l'écran (en pixels) ou par un pourcentage de la hauteur ou de la largeur de l'écran de l'ordinateur. Dans ce dernier cas, les illustrations auront des tailles différentes selon les écrans. En calculant l'emplacement des illustrations pour des tailles d'écran minimales, vous pouvez être sûr de leur emplacement sur des écrans de toute autre taille.

Les tailles des illustrations sont généralement choisies de manière à ce qu'elles soient visibles dans leur intégralité même sur des écrans d'ordinateur de taille minimale. Si la grue informatique est plus grande, les illustrations n'en occuperont qu'une partie.

Les listes hypertextes sont des listes avec numérotation ou mise en évidence des éléments de liste. Tous les éléments commencent par des balises

. Les listes numérotées commencent par la balise

et se termine par la balise

. Les listes non ordonnées sont délimitées par des balises.

Les listes hypertextes sont un outil pratique pour organiser les tables des matières dans des sites complexes et des hypertextes volumineux. Les éléments de ces listes sont les adresses des sections correspondantes des sites (chapitres, paragraphes de sections de livres électroniques et bibliothèques).

Conclusion

HTML est un langage de balisage hypertexte.

Tous les fichiers postés doivent être des hypertextes, rédigés au format HTML et possédant des identifiants de la forme .html.

HTML est un langage de balisage pour les hypertextes stockés sur des serveurs Web et affichés par les navigateurs sur les écrans d'ordinateur. Le langage HTML définit les règles de description des hypertextes et de leur affichage sur les écrans des ordinateurs par les navigateurs.

Le développement du langage de balisage hypertexte a été fortement influencé par deux facteurs : la recherche dans le domaine des interfaces de systèmes hypertextes et le désir de fournir un moyen simple et rapide de créer une base de données hypertexte distribuée sur le réseau.

Règles de base pour les éléments imbriqués :

Les éléments ne doivent pas se croiser ;

Les éléments de bloc peuvent contenir des éléments de bloc et de texte imbriqués ;

Les éléments de texte peuvent contenir des éléments de texte imbriqués ;

Les éléments de texte ne peuvent pas contenir d'éléments de bloc imbriqués.

À proprement parler, toutes les règles du langage HTML. peuvent être considérés uniquement comme des « souhaits ». L'outil utilisé pour restituer le document Web fera de son mieux pour interpréter le balisage de la manière la plus raisonnable. Toutefois, la reproduction correcte d'un document n'est garantie que par le strict respect des exigences de la spécification linguistique.

Références

"Informatique économique" /Under. éd. P.V. Konyukhovsky et D.N. Kolesova, Saint-Pétersbourg : Peter, 2000, 560 p.

Kaimin V.A., « Informatique », manuel, 4e éd.

M. :, 2003-285.