Informations générales sur le langage HTML. Qu'est-ce que le HTML. Histoire de la création
Bonjour chers webmasters débutants. Commençons par apprendre les langages de programmation.
Et nous commencerons à les étudier avec du HTML.
Je dirai tout de suite qu'à la fin du cours vous serez capable d'écrire vous-même un site Internet en HTML pur et de le publier sur Internet. Mais je recommande quand même de prendre votre temps, et après le HTML, de vous familiariser avec le CSS.
Ensuite, vous rendrez le site plus cool et vous pourrez corriger l'apparence du site créé sur un CMS (système de gestion de contenu) prêt à l'emploi.
Apprendre un langage de programmation et apprendre une langue étrangère n’est pas la même chose, et c’est beaucoup plus simple. De plus, ce n'est pas effrayant, mais très excitant.
C'est juste que l'incompréhensible vous fait toujours peur, mais je vous promets qu'après les toutes premières leçons, toutes les peurs passeront.
Nous apprendrons à utiliser l'éditeur que vous devez installer sur votre ordinateur.
Dans cet éditeur de fichiers, vous pouvez écrire du code et voir immédiatement comment le navigateur l'affiche. Très pratique.
Allez, je vais d'abord vous parler un peu de ce qu'est le HTML, et ce sera la partie ennuyeuse de notre cours, puis nous passerons à la pratique la plus intéressante. Ce ne sera certainement pas ennuyeux là-bas.
HTML (HyperText Markup Language) signifie littéralement langage de balisage hypertexte. Il est utilisé pour créer des pages Web.
Et si, à notre avis, un ensemble de pages simples unies par un même sujet est un livre, ou même, mieux dit, un gros magazine, alors un ensemble de pages Web unies par un même nom de domaine est un site Web.
Chaque page Web possède son propre texte unique, écrit par vous et entouré de code HTML.
Le code est une instruction destinée au navigateur sur la manière d'afficher un élément particulier. Disons que vous avez écrit un mot, mais la forme sous laquelle il apparaîtra à l'écran dépend du code dans lequel vous l'enfermez.
Le code html est constitué des éléments suivants :
2. Attributs de balise.
3. Valeurs d'attribut.
Regardons-les dans l'ordre.
La balise html est l'élément principal du code. C'est écrit ainsi :
Comme vous pouvez le constater, il se compose de deux parties. Les premières équerres sont la partie ouvrante, et les secondes, avec une barre oblique, sont la partie fermante.
Entre ces deux parties, est écrit le reste du code de la page qui sera affiché à l'écran.
La balise indique au navigateur qu'il s'agit d'un document HTML et qu'elle constitue la balise principale (parente) de tous les autres éléments.
Dans les balises restantes, éléments de code, une lettre ou un mot est écrit entre crochets, qui sera le nom de la balise et déterminera quel élément sera affiché à l'écran par cette balise.
Par exemple, si vous mettez la lettre h1 entre crochets, le texte s'affichera à l'écran sous forme de titre.
Bonjour
Autrement dit, la police du mot « Bonjour » sera plus grande et plus grasse que le reste du texte.
Si vous mettez la lettre p entre crochets, alors le texte inclus dans la balise sera affiché sous forme de paragraphe.
Bonjour
Autrement dit, la police sera normale, mais tout ce qui est écrit après cette balise commencera sur une nouvelle ligne.
Il existe plusieurs dizaines de lettres de ce type, et même des mots qui déterminent le type de commande, en HTML, bien que pas plus de 10 à 15 balises ne soient souvent utilisées.
Nous examinerons chacun d’eux plus en détail en cours de route.
Voici les attributs des balises. Fréquemment utilisé, pas plus d’une douzaine également. Et récemment encore moins, puisque toutes les fonctions d'attributs ont été déplacées vers CSS.
Mais nous en reparlerons plus tard, mais pour l'instant, nous découvrirons encore ce qu'est un attribut, puisque certains d'entre eux n'ont pas perdu de leur pertinence et ne perdront jamais.
Un attribut est une commande supplémentaire. C’est écrit dans la partie d’ouverture de la balise. Par exemple, si vous souhaitez colorer le titre, vous devez alors insérer l'attribut color dans la partie d'ouverture de la balise h1.
Et passons directement aux valeurs des attributs. Le fait est que l'attribut doit avoir une valeur. Autrement dit, si vous avez donné l'ordre que le titre soit coloré, vous devez alors indiquer de quelle couleur il sera.
Cette indication sera la valeur de l'attribut. Cela ressemble à ceci :
C'est rouge.
De la même manière, mais en utilisant d'autres attributs, vous pouvez définir la taille du texte, les retraits, les alignements et bien plus encore.
Cependant, la conception évolue de plus en plus vers CSS et les attributs de conception deviennent progressivement obsolètes et hors de pratique.
Et maintenant, nous tirons une conclusion de tout ce qui précède :
HTML est un langage que les navigateurs comprennent. Nous en avons besoin pour communiquer avec le navigateur ou, pourrait-on dire, pour le contrôler, c'est-à-dire pour lui donner des commandes sur la façon de percevoir et d'afficher à l'écran ce que nous écrivons.
Je voudrais ajouter que les balises, les attributs et leurs significations sont faciles à retenir lors des exercices pratiques, ce que seront essentiellement tous les articles suivants.
Là, vous voyez immédiatement la balise, vous découvrez sa signification, dans quel cas et à quel endroit elle est utilisée, de quels signes elle est accompagnée et comment elle est écrite, alors maintenant je ne vais pas vous montrer toutes les balises et attributs, nous verrons tout en pratique.
Si quelqu'un est intéressé, vous pouvez toujours consulter la liste complète des balises et attributs HTML. .
Cependant, si vous n'allez pas programmer de manière professionnelle, il suffira de connaître quelques (environ une douzaine) balises de base et plusieurs attributs.
Eh bien, c'est tout, je suppose. Peu? Et pour l’instant, il n’y a pas besoin de plus. Nous apprendrons le reste au cours du processus d’apprentissage à l’aide d’exemples précis.
Je pense que cela sera mieux compris avec des exemples. Notre objectif est de créer un site Web et de comprendre comment tout cela fonctionne, alors allez-y et entraînez-vous.
Changement
Dès que vous vous asseyez pour étudier, un salaud va forcément vous réveiller !!!
A l'école, l'enseignant dit aux élèves :
- Lequel d'entre vous se considère finalement stupide ? Se lever.
Après une longue pause, un élève se lève :
- Alors tu penses que tu es stupide ?
- Eh bien, pas exactement, mais c'est en quelque sorte gênant que tu sois seul.
- Traduction
Remarque : il ne s’agit pas d’une traduction complète de l’article. Je n'ai choisi que les points les plus intéressants pour moi personnellement. L'article ne prétend pas être frais, mais peut-être que même les personnes qui connaissent bien la mise en page trouveront quelque chose d'intéressant pour elles-mêmes. L'article aborde certains aspects de la sémantique de la mise en page avec des exemples spécifiques.
Il y a beaucoup de lettres sous la coupe ! Afin de ne pas se perdre dans leur abondance, tous les articles sont mis en évidence par des titres.
- HTML 4.01 DTD stricte - met l'accent sur la séparation du contenu de la présentation et du comportement. Il s'agit de la DTD recommandée par le W3C pour tous les nouveaux documents.
- HTML 4.01 DTD de transition - est une sorte de lien intermédiaire dans la transition du balisage « ancien » (old-scool, pré-HTML) au moderne. Il n'est pas recommandé de l'utiliser lors de la rédaction de nouveaux documents. Contient 11 éléments de présentation (note du traducteur). : ne portant pas de charge sémantique, et utilisé uniquement pour changer l'apparence ; par exemple, l'élément) et un ensemble complet d'attributs de présentation, qui sont annulés dans la DTD transitionnelle, est souvent nécessaire pour les pages situées à l'intérieur des cadres, car elle a. un attribut cible, nécessaire pour ouvrir un lien dans un autre cadre.
- HTML 4.01 Frameset DTD - utilisé pour les pages basées sur des cadres. Le Consortium W3 déconseille l'utilisation de frames. Pour les sites Web modernes, une meilleure solution serait d’utiliser des applications côté serveur pour résoudre ces problèmes.
Si nous voulons traduire d'anciens documents HTML 2.0 ou HTML 3.2, alors jusqu'à ce que nous ayons converti l'intégralité de la présentation en CSS et les éléments responsables du comportement en JavaScript, nous pouvons utiliser HTML 4.01 Transitional.
11. Pourquoi le validateur se plaint-il du tag ?n'a jamais fait partie de la spécification HTML. Il ne s'agit pas d'un élément standardisé et, bien que pris en charge par la plupart des navigateurs, il ne fait pas partie du HTML.
Au cours de la « guerre des navigateurs » de la fin des années 90, les fabricants de navigateurs comme Microsoft et Netscape se sont affrontés pour voir qui pourrait proposer les fonctionnalités les plus « intéressantes » pour styliser et styliser les pages HTML. Le problème était que ces fonctionnalités n’étaient pas standardisées et, dans la plupart des cas, n’étaient pas compatibles avec tous les navigateurs.
Il existe d'autres éléments qui ont été assez largement utilisés (comme le chapiteau) mais qui n'ont jamais été inclus dans le cahier des charges. Si possible, ne les utilisez jamais.
Les attributs non standardisés étaient également courants. Un exemple est marginwidth.13. Qu'est-ce que BOM ? BOM, ou marque d'ordre d'octet (marque d'ordre d'octet) - est utilisée dans certains codages qui utilisent plus de 8 bits pour coder les données (par exemple, UTF-8 ou UTF-16). Le processeur peut utiliser deux schémas de stockage différents pour les grands entiers : « big-endian » (à extrémités franches) et « little-endian » (pointu). La nomenclature contient 16 bits écrits au tout début du fichier qui indiquent aux navigateurs quel schéma est utilisé.
Malheureusement, de nombreux navigateurs plus anciens ne peuvent pas gérer ces informations ; ils affichent plutôt ces bits sous forme de données de caractères. Si vous voyez plusieurs caractères étranges en haut de la page, cela signifie très probablement que la nomenclature n'a pas été traitée par le navigateur (ou que l'encodage n'a pas été correctement défini).
La seule solution au problème est de ne pas utiliser BOM. Les éditeurs capables d'enregistrer un document au format UTF-8 vous permettent généralement de choisir d'utiliser ou non la nomenclature. Note traducteur : n'a pas traduit ce paragraphe ; Je pense que tout le monde sait que l'UTF-8 est notre tout. UTF-8 doit être utilisé. Et lors de l'enregistrement du document, sélectionnez UTF-8 sans BOM. 16. Pourquoi vous devez écrire et amp; au lieu de &? Remarque : Mes séquences HTML sont écrites avec un espace après l'esperluette, car sinon l'analyseur Habr ne les affiche pas comme il le devrait.Certains caractères ont une signification particulière en HTML :< (меньше), >(plus de), & (esperluette), " (guillemets), " (apostrophe). Parfois, lorsque l'on souhaite utiliser ces icônes en texte brut, nous devons les remplacer par des séquences HTML.
Pour les quatre premiers caractères ci-dessus, les séquences ressembleront à ceci :
- &Lt ; (moins)
- > (plus)
- & (esperluette)
- & (citations)
Parce que L'esperluette est utilisée dans toutes ces séquences, elle doit toujours être convertie en séquence HTML, y compris lorsqu'elle est utilisée au sein d'attributs, notamment l'attribut href dans les liens. Malheureusement, l'esperluette est très courante dans les URI comme séparateur d'arguments.
Dans la plupart des cas en HTML, une esperluette non remplacée par une séquence ne casse rien (mais XHTML est une autre histoire). Mais que se passe-t-il si nous rencontrons un paramètre de requête qui correspond au nom de la séquence HTML...
21. Quoi utiliser,Ou
? L'élément p est utilisé pour mettre en évidence des paragraphes dans le texte. Un paragraphe est une ou plusieurs phrases unies par une même idée.
Les sauts de ligne (br) sont principalement utilisés comme outil de présentation et doivent être implémentés en CSS plutôt qu'en HTML. Cependant, il existe plusieurs situations dans lesquelles les sauts de ligne peuvent avoir une signification sémantique, par exemple lors du marquage de lignes dans des poèmes et des chansons, lors de l'écriture d'adresses postales ou lors du balisage d'exemples de code. Dans ces cas, l’utilisation de br est justifiée, mais l’utilisation de br pour séparer les paragraphes n’est pas acceptable.
En revanche, p a une signification sémantique assez claire : le marquage de paragraphe. Parfois, les développeurs Web ont tendance à considérer p comme un bloc de base à utiliser comme conteneurs, mais ce n'est pas vrai. Il n'est pas rare de voir des éléments label et input à l'intérieur de p dans les formulaires, mais j'appellerais cela sémantiquement incorrect. Les étiquettes et les champs de saisie ne peuvent pas être du contenu de paragraphe.
23. Vaut-il la peine de le remplacer et sur et ? Seulement si vous voulez vraiment souligner quelque chose (insister sur quelque chose, mettre en valeur quelque chose). Ces balises ne sont pas équivalentes.Dans These Sad Times, les auteurs utilisent strong et em pour mettre le texte en gras ou en gras. italique.
em signifie stress sémantique, intensification du sens. Le contenu auquel ce type d'accent est appliqué doit être amélioré lorsqu'il est lu à haute voix (par exemple, plus fort ou plus long). fort signifie encore plus d'accent, mais cela est souvent considéré comme inutile (vous pouvez utiliser des ems imbriqués pour indiquer encore plus d'accent). Certains experts conseillent d'utiliser strong uniquement pour certains éléments d'une page qui doivent être clairement mis en évidence (comme l'indicateur « page actuelle ») et ne doivent pas marquer des mots et des expressions dans le corps du texte.
b et je n'ai aucune charge sémantique ; ils changent simplement la police en gras ou en italique. Ils conviennent parfaitement aux règles typographiques courantes qui n'ont pas trouvé d'élément HTML sémantiquement approprié. Par exemple, les noms des navires sont traditionnellement affichés en italique, mais il n'y a aucun élément en HTML. De là, nous pouvons écrire Titanesque .
27. Comment utiliser correctement l'élément ?address est utilisé pour indiquer les informations de contact sur une page. Il peut s'agir d'une adresse postale, d'un numéro de téléphone ou de toute autre information de contact. L'adresse est un élément de bloc qui ne peut contenir que du texte et des éléments en ligne. La plupart des navigateurs affichent l'italique par défaut, mais cela peut être facilement corrigé à l'aide de CSS.L'adresse ne peut être utilisée que pour indiquer une adresse postale, mais ce n'est pas le cas.
28. Comment utiliser correctement l'élément ?dfn est utilisé pour « définir la signification des termes ». Il s'agit d'une convention typographique, particulièrement courante dans les documents scientifiques, pour mettre en italique un nouveau terme avec lequel le lecteur peut ne pas être familier lorsque la définition apparaît dans le texte. d'abord une fois. Par défaut, dfn est affiché en italique.C'est une idée fausse courante que dfn signifie « abréviation » et de nombreux auteurs l'utilisent comme abbr et acronyme (indiquant une explication du terme à l'aide de l'attribut title). Les termes doivent être marqués dfn dans les documents juste une fois(à la première utilisation du terme et son explication).
29. Comment utiliser correctement l'élément ?var pour marquer les variables, ou remplaçable parties du texte. Il s'agit d'une convention typographique permettant de mettre en italique des variables qui sont remplacées par d'autres données dans la vie réelle. Par exemple, dans un manuel de communications téléphoniques, les instructions permettant de rediriger un appel téléphonique entrant vers un autre poste pourraient ressembler à ceci :* 21 * numéro supplémentaire #
Ici la balise var est utilisée pour indiquer le "numéro supplémentaire" (qui sera marqué en italique). Quiconque souhaite rediriger un appel vers le numéro supplémentaire 942 écrira « 21*942# " Donc var ne signifie pas que vous devez taper "d-o-p-o-l-n-i-t-e-l-y-n-y-y n-o-m-e-r" , mais qu'au lieu des mots "numéro supplémentaire", il y aura des chiffres.
On croit souvent à tort que var devrait être utilisé pour spécifier des variables dans des exemples de code.
31. Quelle est la différence entre les balises et ? Personne ne peut vraiment répondre à cette question ! Même la spécification HTML se contredit dans une certaine mesure.abbr était l'extension HTML de Netscape tout au long de la guerre des navigateurs. l'acronyme était une extension Microsoft. Les deux options signifient à peu près la même chose. Les deux éléments ont été inclus dans la spécification HTML avec des charges sémantiques différentes. Le problème est que personne ne peut vraiment expliquer quelle est cette sémantique.
Regardons le dictionnaire :
Une abréviation est une forme abrégée d’un mot ou d’une expression.
Un acronyme est un mot formé à partir des premières lettres ou des premières lettres de mots dans une phrase ou plusieurs mots.
La définition d'un acronyme dit qu'il s'agit d'un mot, c'est-à-dire cela peut être parlé. Ainsi, « OTAN » est un acronyme parce que... se compose des premières lettres de l’expression « Organisation du Traité de l’Atlantique Nord ». En revanche, « FBI » ne serait pas un acronyme, selon la définition, car il ne peut pas être prononcé comme un mot entier, mais sonnerait plutôt comme « ef-bi-ay ». C'est là que commence la confusion. Il est techniquement connu que « FBI » est un sigle (note du traducteur : dans le « sigle » original), dont la définition selon le dictionnaire est :
Initialisme - 1) un nom ou un terme formé à partir des premières lettres ou des premières lettres de mots prononcés comme des mots séparés ; 2) un groupe de premières lettres signifiant un nom, une organisation, etc., qui sont prononcées séparément.
La première définition s’apparente presque à un acronyme, tandis que la seconde est plus lointaine. Malgré cela, il n'y a aucun élément d'initialisme dans la spécification, et la confusion est aggravée par le fait que le mot « acronyme » est utilisé comme synonyme d'« initialisme » dans le discours américain courant.
La spécification HTML propose les définitions suivantes :
abbr - indique une forme abrégée (par exemple, WWW, HTTP, URI, Mass, etc.).
acronyme - indique un acronyme (par exemple, WAC, radar, etc.).
Il semble que la spécification fasse référence aux définitions du dictionnaire, ce qui signifie que « FBI » doit être marqué avec la balise abbr, car ne peut pas être prononcé comme un mot entier. Malgré cela, quelques paragraphes plus tard, la spécification dit :
Les langues occidentales utilisent largement des acronymes tels que "GmbH", "NATO" et "F.B.I.", ainsi que des abréviations telles que "M.", "Inc.", "et al.", "etc".Êtes-vous déjà confus ? Je fais. Il est plus sûr de toujours utiliser abbr , puisque tous les acronymes sont également des abréviations, mais pas l'inverse. Malgré cela, il y a ici un petit problème. Microsoft a été tellement contrarié par la décision du W3C d'utiliser abbr pour les abréviations et les initiales au lieu des acronymes qu'il a abandonné la prise en charge de la balise abbr ! (Mais ils ont introduit la prise en charge des abbr dans Internet Explorer 7.)
Alors, que devraient faire les pauvres développeurs Web ? Et pourquoi devrions-nous même nous en soucier ? Bien sûr, c'est bien d'avoir un élément auquel vous pouvez attacher un attribut de titre, mais nous pouvons également le faire avec un span. Le fait est que le balisage des acronymes et des abréviations est bon pour les technologies associées, en particulier pour les lecteurs d'écran. Mais la plupart des lecteurs d'écran préfèrent ignorer les balises abbr et acronyme, car personne ne sait exactement comment les utiliser correctement et Microsoft ne prend pas en charge la balise abbr. C’est une arme à double tranchant.
Je ne connais pas la réponse à cette question ! Personnellement, j'utilise abbr pour les acronymes évidents comme « Inc ». et pour les initiales telles que « FBI », et utilisez un acronyme pour les abréviations qui peuvent être lues comme un mot, telles que « GIF ». Mais selon les spécifications, je ne peux reprocher à personne d’avoir marqué « FBI » comme acronyme. Qu’en est-il de « SQL », que certaines personnes épellent et d’autres appellent « sequal ».
32. Pourquoi certaines fonctionnalités sont-elles annulées ? La fonctionnalité la plus courante qui intéresse les débutants est l’attribut cible. Cet attribut est désactivé dans HTML 4.01 Strict, mais est toujours pris en charge dans HTML 4.01 Transitional. De nombreux éléments et attributs sont autorisés en mode transitionnel mais non autorisés en mode strict.La raison pour laquelle le W3C déprécie certains éléments et attributs est qu'il souhaite séparer le contenu (HTML), l'apparence (CSS) et le comportement (JavaScript). Faire apparaître un élément au milieu est un problème de présentation ; il doit être résolu en utilisant CSS, pas la balise center. Ouvrir un lien dans une nouvelle fenêtre est une question de comportement ; il doit être résolu à l'aide de JavaScript, et non de l'attribut target.
Fondamentalement, les fonctionnalités qui ont été annulées sont celles qui sont apparues lors de la guerre des navigateurs dans les années 90. Ces fonctionnalités ont été incluses dans HTML 3.2 afin de rétablir l'ordre d'une manière ou d'une autre, mais ce n'est pas la tâche principale à laquelle HTML a été confronté. Avec la sortie de HTML 4, ses auteurs ont tenté de « recycler le Web » en supprimant les parties « préjudiciables » incluses dans HTML 3.2, du moins dans la DTD stricte.
En d’autres termes, ces choses ont été annulées pour une raison. Si possible, essayez de ne pas les utiliser.
37. Comment connecter une page HTML à l'intérieur d'une autre page ? Si vous utilisez une DTD stricte, vous n'avez qu'un seul moyen valable : utiliser l'élément object :
Contenu alternatif ici pour les navigateurs qui ne prennent pas en charge OBJECT.
Malheureusement, il n'existe pas de support pour les objets "dans Internet Explorer".
Lorsque vous utilisez la DTD transitionnelle, vous pouvez utiliser les iframe :
Contenu alternatif ici pour les navigateurs qui ne prennent pas en charge IFRAME.
HTML est le langage de balisage hypertexte qui a fait d'Internet ce que nous connaissons et aimons. C'est grâce à ce merveilleux outil que les sites sont beaux et modernes, et garantissent également une facilité d'utilisation. HTML organise simplement les éléments d'une page Web dans un format convivial. Son travail est comparable à ce que font des gens comme MS Word ou OpenOffice. Ils transforment une masse de lettres sans relief en un document contenant des paragraphes, du texte en gras, en italique, des tableaux et même des images. Le langage HTML fait à peu près la même chose, à la seule différence que ses documents sont affichés dans le navigateur, et les capacités de cet outil sont bien plus larges que celles d'un éditeur de texte. Les balises sont utilisées pour le balisage - des commandes spéciales qui décrivent la structure d'une page Web. Ils sont placés entre crochets afin que le navigateur puisse les distinguer de la majeure partie du texte. Ensuite, nous aborderons les bases du HTML pour les débutants.
Éditeurs visuelsLes débutants qui viennent de se lancer dans l'apprentissage du HTML commencent souvent leur travail avec des programmes qui vous permettent de créer des sites Web sans aucune connaissance. Dans ceux-ci, vous pouvez simplement disposer les éléments sur l'écran de la manière dont ils seront affichés dans le navigateur. Il semblerait que ce soit la source de la grâce éternelle qui permet de se débarrasser de la majorité des développeurs web. Mais tout n'est pas si simple, car les éditeurs visuels présentent de nombreux défauts qui rendent impossible leur utilisation dans des projets sérieux.
Tous ces programmes créent de nombreuses balises inutiles qui rendent la page finale lourde et sous-optimale. Bien sûr, à l'ère de l'Internet haut débit, cela est moins important qu'avant, mais il existe un certain nombre de raisons pour lesquelles un site Web concis et bien rédigé s'avère plus pratique que son homologue créé dans un éditeur visuel. Une page Web créée dans un tel programme sera mal traitée par les robots de recherche, car chaque kilo-octet de code est important pour eux, et il est peu probable qu'un code encombrant et illogique avec un tas convienne à leur goût. De plus, les éditeurs sont souvent à la traîne, deviennent inutiles, et il est peu pratique de consacrer des ressources à leur développement, car aucun professionnel n'utilise ces produits. Par conséquent, toute personne souhaitant travailler dans le secteur du développement de sites Web doit connaître les bases du HTML.
BalisesComme mentionné ci-dessus, les balises décrivent la structure d'une page Web au navigateur. La plupart d’entre eux ont une balise d’ouverture et de fermeture, mais pas tous. Par exemple, ..., où au lieu de points il y a du contenu. Le premier montre où commence la balise et le second la ferme. Il peut y avoir d’autres éléments de balisage de page à l’intérieur ; ils peuvent être imbriqués les uns dans les autres comme une poupée gigogne. Il est important de fermer les balises à temps afin que la page s'affiche correctement.
Il existe également des balises simples qui n'ont pas besoin d'être fermées. Dans ceux-ci, le contenu est situé à l'intérieur, tout comme il peut être écrit pour la plupart des balises HTML, et définit les propriétés de l'élément. Il est indiqué dans la balise d'ouverture et ressemble à ceci : attribut="...", où au lieu de points se trouve la valeur de l'attribut. Connaître les balises est la première et la plus importante étape pour maîtriser le HTML. Les bases de cet art impliquent également de comprendre la structure d’une page Web.
Structure du documentChaque document HTML a une extension correspondante, par exemple Index.html. De cette façon, le navigateur peut comprendre à quoi il a affaire et afficher correctement la page. Il est conseillé de stocker tous les fichiers utilisés pour créer un site Web dans un seul répertoire, ce qui vous facilitera grandement la vie à l'avenir. Les bases du langage de balisage hypertexte HTML nécessitent une compréhension claire de la structure du document. Il commence par une balise qui indique au navigateur la version HTML utilisée dans ce document. Pour le moment, la cinquième version du langage est pertinente, il n'est donc pas nécessaire d'inventer quoi que ce soit, vous pouvez insérer en toute sécurité la balise ci-dessus au début de n'importe quelle page.
Viennent ensuite les principales structures jumelées qui constituent le « squelette » du site. La première balise, dans laquelle toutes les autres sont imbriquées, est .... Tout ce qui se trouve en dehors n'est pas reconnu par le navigateur comme une page Web, il ouvre donc le document et le ferme. Cette balise est obligatoire pour tout document. Il contient également plusieurs autres balises obligatoires, qui seront discutées ci-dessous.
TêteA l'intérieur de la balise ... se trouvent des informations techniques qui n'apparaîtront pas sur la page, mais qui constituent néanmoins une partie importante du document HTML. Les bases du site sont posées à cet endroit ; ici l'encodage est sélectionné et le nom de la page est saisi. Il est contenu à l'intérieur d'une balise obligatoire.... Le titre est affiché en haut du navigateur, où vous pouvez également placer une petite icône qui caractérise le contenu de la page. Il est conseillé d'indiquer immédiatement l'encodage du document pour son affichage correct. Cela peut être fait en utilisant la balise. Les balises méta fournissent des informations sur la structure de la page et sont généralement situées à l’intérieur de l’en-tête.
LienConnaître les bases du HTML implique également d'utiliser le style en cascade, ou CSS. Ils définissent les propriétés des éléments qui seront affichés sur la page. Une approche moderne de cette tâche consiste à transférer des caractéristiques telles que la couleur, la hauteur et l'emplacement de l'élément vers un fichier externe pour plus de commodité. Pour inclure un fichier CSS, utilisez la balise. Dans sa forme finale, cela ressemble à ceci : où href indique l'emplacement du fichier et type indique son type.
C'est dans cette partie du document HTML qu'est créée la partie visible de la page. Tout ce qui est fait à l'intérieur du "corps" sera affiché par le navigateur. Il utilise un grand nombre de balises HTML. Les bases sont le formatage du texte, l'utilisation des liens et les outils de base pour structurer une page Web. Pour commencer à travailler en HTML, il vous suffit de connaître les balises de base et de pouvoir les utiliser. Voici les plus populaires :
- - utilisé pour mettre en évidence une sous-chaîne qui sera soumise à un style particulier décrit en css ;
- - crée un lien sur une page web ; l'adresse de transition est spécifiée par l'attribut href ;
- - l'un des tags les plus populaires de notre époque ; quiconque décide d'apprendre les bases du langage HTMLl doit y prêter une attention particulière, car il s'agit d'un élément de bloc, sur la base duquel est constituée la part du lion des sites modernes (les paramètres des blocs sont définis en CSS, et les autres blocs peut être situé à l'intérieur de cette balise);
Sélectionne un paragraphe dans le texte ; le contenu du paragraphe se situe entre les balises d'ouverture et de fermeture ;
- - une liste numérotée dont les éléments sont enfermés dans une balise appariée
- - une liste à puces, dans laquelle, tout comme dans une liste numérotée, les éléments sont désignés par une balise
- - - les titres du document (le numéro indique le niveau du titre, c'est-à-dire le titre principal, et les options suivantes sont ses sous-titres ; d'ailleurs, les titres de niveau sont presque impossibles à trouver sur Internet), il est également important de se rappeler qu'il ne peut être qu'un seul en-tête sur une page ;
- - texte en gras ;
- - italique ;
- insérer une image sur un site Web (il s'agit d'une balise unique, elle ne nécessite pas de balise de fermeture, mais elle doit inclure l'attribut alt, qui spécifie le texte de l'image) ;
- - insérer une vidéo dans une page Web ;
- - une balise qui insère un fichier audio dans le document.
Ce ne sont pas toutes les balises dont vous avez besoin pour créer votre propre page Web, mais elles suffisent à poser les bases du HTML pour les débutants.
CSSLe développement du langage HTML a conduit au fait que chaque balise a acquis de nombreux attributs et que les exigences relatives à l'apparence des pages Web ont considérablement augmenté. Le code est devenu encombrant et peu pratique, il était difficile de le lire, encore moins de l'adapter ou de le modifier. De plus, si votre site comporte dix pages avec de nombreux titres marqués en vert et que vous souhaitez soudainement les rendre rouges, vous devrez travailler dur en modifiant chacun d'eux manuellement. Avec l'avènement des feuilles de style en cascade, ce processus est devenu simple et logique, et le code HTML est devenu beaucoup plus lisible.
Application de CSS
Pour créer des pages Web, il faut connaître les bases du HTML et du CSS, puisque désormais il n'y a plus rien à faire dans ce domaine sans connaissance des feuilles de style en cascade. Ils définissent les attributs de tout élément qui s'appliquent à l'ensemble du document. De cette façon, vous pouvez définir la couleur de tous les éléments à la fois
Afin de connecter un fichier CSS à un document, il existe une balise de lien. Le principe de son utilisation a été décrit un peu plus haut, mais ce n'est pas la seule option permettant de combiner tous les styles en un seul endroit. Il existe également une balise située dans « l’en-tête » du document et qui vous permet d’écrire des styles sans utiliser de fichiers CSS. Il n’est pas nécessaire d’utiliser une méthode ou une autre. Ils peuvent être combinés avec succès pour obtenir le meilleur résultat. Pour créer un fichier avec des feuilles de style, vous devez créer un fichier avec une extension .css, par exemple Styles.css.
JavascriptSouvent, une personne qui décide de commencer à se rendre compte que les outils proposés par HTML ne suffisent pas pour ses tâches. Les bases vous permettront de créer une belle page, mais que se passe-t-il si vous avez soudainement besoin de la rendre interactive ? À ces fins, il existe une programmation unique qui interagit parfaitement avec HTML. Il s'appelle JavaScript, car il a été conçu comme le frère cadet du langage populaire Java. Aujourd'hui, ces langues ont acquis des différences significatives et l'écart entre elles ne fait que se creuser.
JavaScript peut étendre les capacités du HTML en vous permettant de créer et de modifier des balises. De plus, en utilisant ce merveilleux outil, vous pouvez travailler avec Cokie, télécharger des données depuis le serveur sans recharger la page et rendre le site plus interactif que ne le permettent les capacités HTML. Ce langage présente également des limites liées à la sécurité. Si JavaScript n’est pas utilisé côté serveur, il sera exécuté dans des conditions qui limitent ses capacités, afin que les attaquants ne puissent utiliser de code malveillant sur aucun ordinateur.
ÉditeursLes bases du HTML pour un débutant nécessitent la connaissance des programmes les plus pratiques et les plus pratiques pour créer des pages Web. Comme indiqué ci-dessus, les éditeurs visuels tels que Dreamweaver et autres ne conviennent pas à ces fins. Alors, devriez-vous écrire des balises dans un bloc-notes ordinaire ? Cette option est également discutable, puisqu'un bloc-notes standard ne dispose pas d'outils de mise en page particuliers. Notepad++ peut très bien gérer cette tâche. Le gros avantage de ce produit est qu’il est open source et distribué de manière totalement gratuite. Il propose une coloration syntaxique pratique et une fermeture automatique des balises. Notepad++ offre également un large choix de langues d'interface et ses capacités sont facilement étendues avec de nombreux modules complémentaires.
Sublime Text 3 est un programme similaire à Notepad++, mais disponible moyennant des frais. C'est elle qui a conquis le cœur de la plupart des développeurs. Sublime Text 3 est parfait pour JavaScript, CSS et HTML. Vous devrez apprendre les bases pour travailler avec vous-même, mais cela en vaut la peine. Il contient des possibilités de réglage vraiment illimitées, ce qui vous permet d'adapter autant que possible le programme à vos besoins.
Bases HTML et CSS pour les débutantsComme vous pouvez le constater, apprendre l’art de créer des pages Web n’est pas aussi difficile qu’il y paraît à première vue. Quelques mois seulement de pratique vous transformeront d’utilisateur timide en développeur novice. L'apprentissage de la mise en page est beaucoup plus facile que la maîtrise d'un langage de programmation ou de Linux. En fait, il n’existe pas tellement de balises HTML ; il est important de comprendre l’aspect pratique de leur utilisation.
La maîtrise de Adobe Photoshop ne sera pas superflue dans ce domaine. Ce programme vous permet de travailler avec des photographies, des images et d'autres éléments graphiques d'une page Web. Pour le moment, c'est Photoshop qui fait le mieux face à de telles tâches ; il a peu de concurrents. Pour ceux qui n'aiment pas ce produit Adobe, il existe Lightroom, GIMP, Illustrator et d'autres programmes dotés de fonctions similaires.
Que donne la connaissance du HTML ?Les compétences en création de pages Web sont très pertinentes aujourd’hui, alors qu’Internet se développe à pas de géant. Chaque entreprise, même le plus petit magasin, les ateliers et les clubs sportifs, souhaite avoir son propre site Internet. Et bien sûr, pour cela, ils auront besoin d’un développeur connaissant CSS et HTML. Les bases sont faciles à maîtriser, après quoi c'est une question de pratique. Étant donné que les technologies de mise en page évoluent constamment, les développeurs front-end seront toujours recherchés. Quiconque décide de se consacrer à cette industrie intéressante ne se retrouvera jamais sans travail.
HTML Basics contient les règles de base du langage HTML, une description de la structure d'une page HTML et les relations dans la structure d'un document HTML entre les éléments HTML.
Un document HTML est un document texte ordinaire qui peut être créé soit dans un éditeur de texte classique (Notepad), soit dans un éditeur spécialisé avec surbrillance de code (Notepad++, Visual Studio Code, etc.). Un document HTML a une extension .html.
Un document HTML se compose d'une arborescence d'éléments HTML et de texte. Chaque élément est identifié dans le document source par une balise de début (ouverture) et de fin (fermeture) (à de rares exceptions près).
La balise de début indique où commence l'élément, la balise de fin indique où il se termine. La balise de fermeture est formée en ajoutant une barre oblique / avant le nom de la balise : .... Entre les balises de début et de fermeture se trouve le contenu de la balise - le contenu.
Les balises simples ne peuvent pas stocker le contenu directement ; il est écrit sous forme de valeur d'attribut, par exemple, une balise créera un bouton avec le texte Button à l'intérieur.
Les balises peuvent être imbriquées les unes dans les autres, par exemple :
Texte
. Lorsque vous investissez, vous devez suivre l'ordre dans lequel ils sont fermés (principe de la « matriochka »), par exemple, la saisie suivante sera incorrecte :Texte
.Les éléments HTML peuvent avoir des attributs (globaux, appliqués à tous les éléments HTML et les leurs). Les attributs sont écrits dans la balise d'ouverture de l'élément et contiennent un nom et une valeur, spécifiés au format attribut name="value" . Les attributs vous permettent de modifier les propriétés et le comportement de l'élément pour lequel ils sont définis.
Chaque élément peut se voir attribuer plusieurs valeurs de classe et une seule valeur d'identification. Plusieurs valeurs de classe sont écrites séparées par un espace, . Les valeurs de classe et d'identifiant doivent être constituées uniquement de lettres, de chiffres, de traits d'union et de traits de soulignement, et doivent commencer uniquement par des lettres ou des chiffres.
Le navigateur visualise (interprète) le document HTML, construit sa structure (DOM) et l'affiche conformément aux instructions incluses dans ce fichier (feuilles de style, scripts). Si le balisage est correct, la fenêtre du navigateur affichera une page HTML contenant des éléments HTML - en-têtes, tableaux, images, etc.
Le processus d'interprétation (analyse) commence avant que la page Web ne soit entièrement chargée dans le navigateur. Les navigateurs traitent les documents HTML de manière séquentielle, depuis le début, tout en traitant le CSS et en associant les feuilles de style aux éléments de la page.
Un document HTML se compose de deux sections - l'en-tête - entre les balises... et la partie contenu - entre les balises....
Structure des pages Web 1. Structure du document HTMLHTML suit les règles contenues dans le fichier de déclaration de type de document (Définition du type de document, ou DTD). Une DTD est un document XML qui définit quelles balises, attributs et leurs valeurs sont valides pour un type HTML particulier. Chaque version de HTML possède sa propre DTD.
DOCTYPE est responsable du bon affichage d'une page web par le navigateur. DOCTYPE spécifie non seulement la version HTML (par exemple html) mais également le fichier DTD correspondant sur Internet.
...
Les éléments à l'intérieur de la balise forment une arborescence de documents, appelée modèle objet de document, DOM (document object model). Dans ce cas, l'élément est l'élément racine.
Riz. 1. La structure la plus simple d'une page Web Pour comprendre l’interaction des éléments d’une page Web, il est nécessaire de considérer ce que l’on appelle les « relations familiales » entre les éléments. Les relations entre plusieurs éléments imbriqués sont classées comme parent, enfant et sœur.
Un ancêtre est un élément qui contient d'autres éléments. Dans la figure 1, l'ancêtre de tous les éléments est . En même temps, l'élément est l'ancêtre de toutes les balises qu'il contient : ,
. . . etc.
Un descendant est un élément situé dans un ou plusieurs types d'éléments. Par exemple, est un descendant de , et l'élément
Est un descendant des deux et .
Un élément parent est un élément lié à d’autres éléments à un niveau inférieur et situé au-dessus d’eux dans l’arborescence. Dans les figures 1 et . Étiqueter
Est-ce parent uniquement pour .
Un élément enfant est un élément directement subordonné à un autre élément de niveau supérieur. Dans la figure 1, il n'y a que des éléments , ,
Et sont des enfants de .
Un élément sœur est un élément qui a un élément parent commun avec celui en question, ce qu'on appelle les éléments de même niveau. Sur la figure 1 et sont des éléments de même niveau, ainsi que des éléments , et
Elles sont sœurs l'une de l'autre.
1.1. Élément 1.2. ÉlémentLa section... contient des informations techniques sur la page : titre, description, mots-clés pour les moteurs de recherche, encodage, etc. Les informations que vous y saisissez ne sont pas affichées dans la fenêtre du navigateur, mais elles contiennent des informations qui indiquent au navigateur comment traiter la page.
1.2.1. ÉlémentLa balise de section requise est . Le texte placé à l'intérieur de cette balise apparaît dans la barre de titre du navigateur web. Le titre ne doit pas comporter plus de 60 caractères pour s’intégrer complètement dans le titre. Le texte du titre doit contenir la description la plus complète du contenu de la page Web.
1.2.2. ÉlémentUne balise de section facultative est une balise unique. Avec son aide, vous pouvez définir une description du contenu de la page et des mots-clés pour les moteurs de recherche, l'auteur du document HTML et d'autres propriétés de métadonnées. Un élément peut contenir plusieurs éléments car ils portent des informations différentes selon les attributs utilisés.
La description du contenu de la page et les mots-clés peuvent être spécifiés simultanément dans plusieurs langues, par exemple en russe et en anglais :
A l'aide d'une balise, vous pouvez bloquer ou autoriser l'indexation d'une page web par les moteurs de recherche :
Pour recharger automatiquement la page après une période de temps spécifiée, vous devez utiliser la valeur d'actualisation :
La page sera rechargée après 30 secondes. Pour rediriger le visiteur vers une autre page, vous devez préciser l'URL dans le paramètre url :
Tableau 2. Attributs de balise
1.2.3. ÉlémentAttribut jeu de caractères Spécifie l'encodage des caractères du document HTML actuel : contenu Contient du texte arbitraire qui spécifie la valeur associée à l'attribut http-equiv ou name, en fonction de leur valeur. http-équiv Contrôle les actions du navigateur sur une page Web donnée (équivalent aux en-têtes HTTP). Lors du rendu de la page, le navigateur suivra les instructions spécifiées dans l'attribut :
style par défaut spécifie le style préféré à utiliser sur la page. L'attribut content doit contenir l'ID de l'élément qui fait référence à la feuille de style CSS, ou l'ID de l'élément qui contient la feuille de style.
L'actualisation indique le temps en secondes avant le rechargement de la page ou le temps avant la redirection vers une autre page si l'attribut de contenu contient la ligne "url=page_address" après le temps.
Recharger automatiquement la page après une période de temps spécifiée, dans cet exemple, après 30 secondes :
Si vous devez transférer immédiatement le visiteur vers une autre page, vous pouvez spécifier l'URL dans le paramètre url :
nom Associé à la valeur contenue dans l'attribut content. Ne doit pas être utilisé si l'élément a déjà les attributs http-equiv , charset ou itemprop définis.
application-name spécifie le nom de l'application Web utilisée sur la page.
author précise le nom de l'auteur du document en format libre.
description définit une brève description du contenu de la page, par exemple :
générateur spécifie l'un des progiciels utilisés pour créer le document, par exemple :
.
mots-clés contient une liste de mots-clés séparés par des virgules qui correspondent au contenu de la page, par exemple :
.
En outre, l'attribut name peut prendre les valeurs suivantes de la spécification étendue, telles que créateur, googlebot, éditeur, robots, slurp, viewport, bien qu'aucune d'entre elles n'ait encore été officiellement adoptée.À l'intérieur de cet élément, les styles utilisés sur la page sont définis. CSS est utilisé pour définir les styles dans un document HTML. Il peut y avoir plusieurs de ces éléments sur une page.
À l'intérieur de cet élément, vous pouvez écrire du code de formatage pour les éléments de la page Web eux-mêmes et pour la page Web entière.
.paper (largeur : 200 px ; hauteur : 300 px ; couleur d'arrière-plan : #ef4444 ; couleur : #666666 ; )
Pour attacher un style donné à un élément, vous devez attribuer le nom approprié à l'élément à l'aide de l'attribut class (ou id) :
...
Le code CSS peut être intégré directement dans un élément de balisage en tant que valeur de l'attribut style, par exemple :
1.2.4. Élément
Vous pouvez également définir des styles pour un document en utilisant une autre méthode : écrivez-les dans un fichier séparé avec l'extension .css, par exemple style.css.
Il existe deux manières de connecter un fichier avec des styles à une page Web :
via la directive @import url@import url(style.css);
en utilisant l'élément. L'élément ne nécessite pas de balise de fermeture. Cet élément définit la relation entre la page actuelle et les autres documents. Il peut y avoir plusieurs de ces éléments sur une page. L'entrée ressemblera à ceci :
Tableau 4. Attributs de balise
1.2.5. ÉlémentDescription de l'attribut, valeur acceptée origine croisée Indique si CORS (une technologie de navigateur qui permet à une page Web d'accéder aux ressources d'un autre domaine) doit être utilisé lors de la récupération d'une image d'un site.
anonyme — le navigateur ajoute automatiquement un en-tête Origin à une requête inter-domaines, contenant le nom du domaine à partir duquel la requête a été effectuée. Si le serveur ne répond pas avec l'en-tête CORS Access-Control-Allow-Origin: * (ou le nom de domaine au lieu d'un astérisque), alors le chargement de l'image sera bloqué.
use-credentials - Si le serveur ne fournit pas d'informations d'identification à l'aide de Access-Control-Allow-Credentials: true , le chargement de l'image sera bloqué.href L'attribut principal de la balise, la valeur est le chemin d'accès au fichier avec les styles. hreflang Détermine la langue du texte dans le document référencé. médias Spécifie le type de périphérique auquel la ressource de lien doit être appliquée. occasionnellement Variable de chaîne générée aléatoirement sur le serveur qui définit les règles d'utilisation des styles en ligne pour protéger le contenu. La valeur de l'attribut est une chaîne de texte. rapport L'attribut définit la relation entre le document actuel et le document référencé.
alternatif - un lien vers le même document, mais dans un format différent (par exemple, pages à imprimer, traduction, miroir, flux au format RSS ou Atom),
.
archives - indique que le document lié présente un intérêt historique. Un lien peut pointer vers une collection d’enregistrements, de documents ou d’autres éléments.
lien auteur vers une page sur l’auteur du document ou vers une page avec les coordonnées de l’auteur.
ajouter dans vos favoris une référence à l'ancêtre le plus proche de l'article qui est le lien, ou à la section de l'article la plus étroitement liée à l'élément s'il n'y a pas d'ancêtre.
external est utilisé pour indiquer que la page vers laquelle le lien est lié ne fait pas partie de ce site.
first spécifie un lien pointant vers le premier document d'une séquence de documents.
help lien vers un document d'aide.
icon spécifie le chemin d'accès à l'icône qui sera utilisée pour le document actuel.
last spécifie un lien pointant vers le dernier document d'une séquence de documents.
licence Un lien vers les informations de copyright d'un document.
next indique que ce document fait partie d'une série et que le lien mène au document suivant de cette série.
nofollow indique que le lien n'est pas approuvé par l'auteur de la page ou que le lien est de nature commerciale.
noreferrer indique que l'en-tête de la requête client contenant l'url de la source de la requête ne doit pas être transmis lorsque l'on suit le lien.
pingback spécifie l'adresse du serveur pingback, qui permet au blog de notifier automatiquement les sites qui y renvoient.
prefetch spécifie que le fichier référencé doit être mis en cache à l'avance.
prev indique que ce document fait partie d'une série et que le lien renvoie vers un document précédent de cette série.
La recherche indique que le document référencé contient une interface de recherche et des ressources associées.
La barre latérale indique que le document lié sera affiché dans un contexte de navigateur supplémentaire, si possible, et certains navigateurs, lorsque vous cliquez sur un lien hypertexte, ouvrent une fenêtre pour ajouter le lien à votre barre de favoris.
la feuille de style est un lien vers un fichier externe qui sera utilisé comme feuille de style pour ce document.
La balise indique que la balise du lien hypertexte s'applique à ce document.
up indique que la page fait partie d'une structure hiérarchique et que le lien hypertexte mène à un niveau de ressource plus élevé dans la structure.tailles Spécifie la taille des icônes pour l'affichage visuel. L'attribut size est utilisé uniquement en conjonction avec rel="icon" et peut prendre les valeurs suivantes :
largeurs-hauteur - définit une liste de tailles séparées par des espaces, chaque taille doit être au format - largeurs-hauteur (les dimensions des icônes sont spécifiées en pixels), par exemple :
;
any - l'icône peut être redimensionnée à n'importe quelle taille.titre Définit le titre d'un lien ou le nom d'un ensemble de feuilles de style alternatives. La valeur de l'attribut est du texte. taper Spécifie le type MIME du document référencé. Dans ce cas il prend la valeur "text/css" . Tableau 5. Attributs de balise
1.3. ÉlémentDescription de l'attribut, valeur acceptée asynchrone L'attribut indique que le script s'exécutera de manière asynchrone avec le reste de la page (le script commencera à s'exécuter en même temps que le chargement de la page). jeu de caractères Définit le codage des caractères origine croisée Détermine si CORS sera utilisé lors du chargement de scripts externes (à l'aide de l'attribut src).
anonyme — avant de charger le script dans une requête cross-domain, le navigateur ajoute automatiquement l'en-tête Origin, sans transmettre de paramètres d'accès (cookie, certificat X.509, login/mot de passe pour l'authentification de base via HTTP). Si la réponse du serveur ne contient pas l'en-tête Access-Control-Allow-Origin: domain name, le script ne sera pas chargé.
use-credentials — avant de charger le script dans une requête inter-domaines, le navigateur ajoute automatiquement un en-tête Origin indiquant les paramètres d'accès (cookie, certificat SSL ou paires login/mot de passe). Si la réponse du serveur ne contient pas l’en-tête Access-Control-Allow-Credentials: true, le script ne sera pas chargé.reporter L'interprétation des scripts est retardée jusqu'à ce que le document soit rendu sur l'appareil de l'utilisateur. occasionnellement Assure la sécurité en protégeant contre les attaques de script intersite (XSS). Définit les règles d'utilisation des scripts intégrés à l'aide de valeurs occasionnelles et de hachages. Lors du rendu de la page, le navigateur calcule les hachages pour chaque script en ligne et les compare à ceux répertoriés dans le CSP. Les téléchargements à partir de ressources non incluses dans la « liste blanche » sont bloqués. src Indique l'emplacement du fichier avec le script ; la valeur de l'attribut est l'url du fichier contenant le programme JavaScript. taper Utilisé pour déclarer le langage de script utilisé pour composer le contenu de la balise. Cette section contient tout le contenu du document. Disponible pour l'élément.
Tableau 5. Attributs de balise
Description de l'attribut, valeur acceptée suraprèsimpression Un événement qui se déclenche après l'envoi d'une page pour impression ou après la fermeture de la fenêtre d'impression. suravantimpression Un événement qui se déclenche avant qu'une page ne soit envoyée pour impression. avant le déchargement L'événement est déclenché lorsque le visiteur initie une transition vers une autre page ou clique sur « fermer la fenêtre ». Vous permet d'afficher un message dans la boîte de dialogue de confirmation pour indiquer à l'utilisateur s'il souhaite rester ou quitter la page en cours. sur le changement de hachage L'événement est déclenché lorsque la partie de hachage de l'URL change, par exemple lorsque l'utilisateur passe de example.domain/test.aspx#page1 à example.domain/test.aspx#page2 . sur message Un événement se produit lorsqu'un message est reçu via une source d'événement. en lignehors ligne L'événement est déclenché par le navigateur lorsque celui-ci détermine que la connexion Internet a été perdue. en ligne L'événement est déclenché par le navigateur lorsque la connexion Internet a été rétablie. sur la pagemasquer L'événement se produit lorsque l'utilisateur quitte la page via la navigation, par exemple en cliquant sur un lien, en actualisant la page, en remplissant un formulaire, etc. sur la pageafficher L'événement se produit lorsque l'utilisateur accède à la page Web, après l'événement onload. au déchargement L'événement est déclenché si la page ne se charge pas pour une raison quelconque ou lorsque la fenêtre du navigateur est fermée. HTML (Hyper Text Markup Language) est un langage de balisage de documents spécial. Il est important de noter que nous parlons de documents électroniques et non imprimés.
Un document imprimé a des formats de page et des marges strictement spécifiés. Il spécifie précisément les paramètres de police. Les documents électroniques et les pages Web ne sont pas destinés à être imprimés sur une imprimante, mais à être visualisés sur un écran. On ne sait pas à l’avance sur quel ordinateur le document sera consulté. La taille de la fenêtre du navigateur est inconnue et les polices disponibles ne sont pas connues.
Le langage HTML est spécialement créé pour concevoir des documents écran qui seront reproduits par des moyens inconnus. HTML n'était à l'origine pas destiné au formatage d'un document, mais à son balisage fonctionnel. Par exemple, le « titre » est une caractéristique du contenu et non du design. Le programme de visualisation d'un document à l'écran (navigateur, navigateur, explorateur) choisit sa manière d'afficher la partie du document décrite comme l'en-tête.
La création d'un document en HTML est similaire à la programmation. L'auteur d'un document prend du texte brut et y insère des codes spéciaux (appelés balises). Lorsqu'un document est visualisé, les balises agissent comme des commandes. Par exemple, s'il y a une balise au début d'un paragraphe, alors le paragraphe entier sera aligné au centre de la fenêtre, quelle que soit la fenêtre dans laquelle le document sera affiché et la police dans laquelle le texte sera affiché.
Les balises HTML vous permettent d'aligner les lignes du document, de contrôler la couleur de l'arrière-plan et de la police, d'insérer des illustrations et d'envelopper du texte autour d'elles, d'inclure des objets multimédia dans votre document, et bien plus encore. Le résultat est des documents Web significatifs et d’une conception impressionnante.
Parmi les nombreuses balises HTML, il existe un groupe spécial de balises conçues pour créer des liens hypertextes. Un lien hypertexte est un morceau de texte ou d’illustration sélectionné lié à l’adresse d’un autre document. Les liens hypertextes sont généralement soulignés ou d’une couleur différente. Si vous passez votre souris sur un lien hypertexte, celui-ci changera de forme. Si vous cliquez avec le bouton gauche sur un lien hypertexte, cela vous mènera à une autre page Web, peut-être située sur un autre serveur, peut-être même sur un autre continent.
Les documents créés au format HTML sont enregistrés dans des fichiers avec l'extension html ou htm.
Balises HTMLLes constructions de contrôle en HTML sont appelées balises. Les balises sont des ensembles de caractères utilisés pour baliser le texte. Toutes les balises sont écrites entre crochets angulaires, qui sont formés par les symboles inférieur à (). Après la parenthèse ouvrante vient un mot-clé qui définit la balise.
La casse des lettres dans les noms de balises n'a pas d'importance. Cependant, il est courant d’écrire les balises en majuscules pour les différencier du texte principal.
Les balises peuvent être appariées ou non. Pour influencer une partie d'un document (par exemple, un paragraphe), des balises appariées sont utilisées : ouverture et fermeture. La balise d'ouverture crée l'effet et la balise de fermeture l'arrête. Les balises de fermeture commencent par une barre oblique (/).
Les balises non appariées affectent l'ensemble du document ou ont un effet ponctuel là où elles apparaissent. Dans ce cas, la balise fermante n’est pas utilisée.
Si par erreur une balise contient un mot-clé qui n'est pas dans la langue, la balise est complètement ignorée.
Lors de la visualisation d'un document dans un navigateur, les balises elles-mêmes ne sont pas affichées, mais elles affectent la façon dont le document est affiché.
L'effet créé par une balise peut être influencé par des attributs. Les attributs sont des mots de fonction séparés du mot-clé de la balise et les uns des autres par des espaces. Si vous devez spécifier la valeur de l'attribut, elle est écrite après le signe égal et placée entre guillemets. Dans les balises appariées, les attributs sont ajoutés uniquement à la balise d'ouverture. Les balises fermantes ne contiennent jamais .
Le langage HTML permet de saisir dans un document