Structure du document HTML: balises principales, exemple
HTML est un langage de balisage de site. Beaucoup le considèrent comme une programmation, mais ce n'est pas le cas. En HTML, il n'y a pas de variables, calculs, tableaux et autres éléments présents dans les langages de programmation.
En utilisant HTML, un développeur ne peut créer queapparence du site. Il est important de comprendre qu'aucun site n'existe sans balisage. HTML est la base pour la création de pages Web. Le reste de la fonctionnalité est ajouté par divers langages de programmation.
Créer un document HTML
Vous pouvez créer une simple page Web dans n’importe quell'éditeur. Même un bloc-notes fera l'affaire. Pour un développeur novice, il est recommandé d'utiliser d'autres éditeurs dotés de fonctionnalités de substitution automatique et d'autres astuces. Grâce à cela, vous pouvez créer des tableaux, des liens, des images et d’autres éléments prêts à l’emploi. Et dans le Bloc-notes, vous devez écrire chaque lettre à la main.
En règle générale, le Bloc-notes est utilisé uniquement dans cesQuand il n'y a pas d'autres outils à portée de main. Tout d'abord, un document texte est créé, puis il est enregistré au format HTML. Toutes les pages doivent être avec l'extension html.
Le langage html est hiérarchique. C'est-à-dire qu'il existe une structure spéciale du document HTML. Qu'est ce que c'est Considérez ci-dessous pour plus de clarté.
La structure du document HTML. Exemple
La structure est toujours la même. Si vous voulez changer quelque chose, le navigateur ne pourra pas le gérer. En conséquence, vous n'obtenez pas ce que vous voulez.
La figure ci-dessus montre la structure de toutfichier html. Le premier élément indique le type de fichier. Cette balise est indiquée une fois. Si vous utilisez des éditeurs spéciaux, la structure entière sera créée automatiquement. Vous devrez modifier les valeurs par défaut.
La structure du document HTML - les balises principales:
- <html>
- <tête>
- <body>
De ces trois balises est le cadre de tout le site. Faites attention à l'image. Toutes ces balises ont une balise de fermeture avec un signe "/". Si vous écrivez à la main, commencez à mettre les deux balises en même temps - ouverture et fermeture.
Il a été dit plus haut que les pages du site ontextension .html. En d’autres termes, si vous créez un document texte tout en écrivant le code correct, le navigateur ne vous affichera que le texte. Il n'y aura pas de conversion de code.
Section de tête
Le chiffre sous le point 3 indique la section de tête. Cette section contient des informations sur le service. Par exemple, vous pouvez spécifier l'encodage (élément 4) et le titre de la page (élément 5).
Le titre devrait toujours être. Sans cela, aucun moteur de recherche ne peut déterminer le nom du contenu (texte) de la page Web. Et c'est mauvais pour la promotion de site Web. De plus, dans le navigateur au-dessus du titre de la page ne sera pas indiqué. Ceci est un inconvénient pour l'utilisateur.
La structure du document HTML est telle que le titre <titre> est indiqué uniquement dans la section head. Si la balise <title> est spécifiée dans la section body ou après celle-ci, le gestionnaire n'y fera pas attention.
De plus, la section de tête indiquedes informations pour la connexion de scripts, de fichiers de style, d'instructions pour les moteurs de recherche ou pour toute autre donnée que l'utilisateur ne devrait pas voir, mais qui sont importantes pour le navigateur ou les programmeurs.
Styles de connexion
La structure du document html vous permet de vous connecterstyles de différentes façons. De plus, ils peuvent être écrits individuellement dans chaque élément. Mais cette méthode n'est pas recommandée car le code devient trop volumineux et peu pratique.
Les moteurs de recherche recommandent de placer tous les styles dans un fichier séparé et, dans les éléments, d’utiliser des classes différentes.
Le fichier est connecté comme suit.
<link rel = “stylesheet” href = “style.css” type = “text / css”>
L'attribut href spécifie le chemin d'accès au fichier. S'il y a une erreur sur le chemin, les styles ne seront pas chargés. L'attribut type est également requis, ce qui indique qu'il s'agit d'un fichier css.
Une autre option consiste à définir des styles directement dans la section head.
Mais cette option n'est également pas très recommandée. Ces méthodes sont très différentes en ce sens que le fichier css peut en être un pour l’ensemble du site et que tous les changements qu’il apportera seront instantanément appliqués à toutes les pages. Et si vous utilisez la méthode présentée dans la figure ci-dessus, vous devrez alors modifier toutes les pages existantes du site.
Si la classe créée ne sera utilisée que sur une seule page, cette option vous convient.
Connecter des scripts
Les scripts sont connectés comme suit.
<type de script = “text / javascript” src = “main.js”> </ script>
Deux attributs sont requis ici: type et src. Dans le premier, nous indiquons qu’il s’agit d’un fichier Javascript, et dans le second, où se trouve le fichier. Si vous faites une faute de frappe, alors rien ne fonctionnera.
Section du corps
La structure du document HTML est telle qu'il est seulement nécessaire de placer le contenu qui sera visible pour l'utilisateur dans la section body Le nom de la balise parle de lui-même.
Vous pouvez voir ici tout le code de la page principale, pouvant inclure un nombre illimité d’éléments Mais plus le code est long, plus il sera traité longtemps.
Examinez les balises les plus élémentaires pouvant être utilisées dans la zone du corps. Il n'y en a pas beaucoup de base. Vous apprendrez tout le reste à mesure que vos connaissances et votre pratique augmentent.
Balises de base
La structure du document HTML nécessite obligatoirementl'ordre d'écriture des éléments. Les étiquettes doivent toujours être encadrées sur les bords avec des crochets <>. Sans cela, le navigateur ne comprendra pas qu'il s'agit d'une balise. Après le crochet d’ouverture suit toujours le nom de l’élément (balise). Si vous laissez un espace entre <et le nom, le navigateur considérera ce texte.
Prenons l'exemple d'une balise d'image. Veuillez noter que cette balise n'est pas fermée, contrairement aux liens, paragraphes et beaucoup d'autres.
L'ordre des attributs n'a pas d'importance. Mais leur écriture (design) est très importante. Vient toujours d'abord le nom de l'attribut, puis un signe égal, puis la valeur de l'attribut est écrite entre guillemets. La valeur peut être différente - numérique ou texte.
L'attribut src dans toutes les balises indique le chemin du fichierqui doit être chargé. L'attribut alt dans tous les éléments indique une courte description. Dans ce cas, une photo bird.jpg est chargée avec une description - une photo d'oiseau.
En outre, dans la balise img, vous pouvez spécifier les dimensions, uniquement la largeur ou la hauteur, le titre, l'alignement, la classe de style ou le cadre.
Examinez les autres balises principales répertoriées dans la section body.
Tag | Rendez-vous |
<a> ... </a> | Liens |
<img> | Images |
<p> ... </ p> | Paragraphe |
<br> | Transfert du texte sur une nouvelle ligne |
<strong> ... </ strong> | Texte en gras |
<I> ... </ i> | italique |
<s> ... </ s> | Texte barré |
<u> ... </ u> | Texte souligné |
<ol> </ ol>, <ul> </ ul> | Des listes |
<table> </ table> | Tableaux |
Comment tout cela peut-il être présenté dans la tête?
Les développeurs débutants ne peuvent pas toujours imaginer immédiatement tout cela en spéculant. Regardez quelques exemples de la structure des pages Web et vous comprendrez certainement.
C'est l'endroit à être:
Et ceci:
Utiliser des styles
Comme mentionné au début, les styles peuvent être connectés en tant que fichier et spécifiés dans la section head. Dans tous les cas, la description des classes est exactement la même.
Par exemple, vous pouvez spécifier un style pour le titre. Ensuite, vous devez écrire h1 (puisque le style sera pour le titre du deuxième niveau), ouvrez les crochets et écrivez les propriétés qui figureront dans cet élément. Si vous connaissez l'anglais de base, alors il ne devrait y avoir aucun problème. Toutes les propriétés sont appelées langage humain.
Si vous souhaitez spécifier ce style pour plusieurs éléments à la fois, écrivez-les en les séparant par une virgule.
Le résultat sera une légende rouge.
Les méthodes ci-dessus conviennent à la conception d'éléments standard. Mais vous pouvez aussi créer vos propres classes. Leur nom doit commencer par un point, puis tout nom arbitraire est écrit.
Vous devez les utiliser comme ça.
S'il vous plaît noter: Si vous avez spécifié les paramètres de style pour l'élément standard, vous n'avez pas besoin d'écrire la classe de mots à l'avenir. Le style sera appliqué par défaut. Dans l'attribut de classe, vous pouvez spécifier uniquement les styles pour lesquels vous commencez par un point.
