Les balises sont nécessaires pour créer du HTML. Balises HTML de base. Blocs vides et conteneurs en ligne

Créer un site Internet de nos jours ne posera pas de difficultés particulières, puisqu'il existe suffisamment de portails sur Internet qui proposent leurs services pour créer un site Internet. Mais un site Web créé pour un tel service n'est pas sa propre création, mais un semblant de clone cultivé dans un tube à essai.

Un site Web créé de manière indépendante sera toujours un enfant bien-aimé, enduré par la joyeuse agonie de la créativité. Vous pouvez créer un site Web en utilisant le langage de programmation HTML, appelé site statique.

Un éditeur HTML est utilisé pour créer un site Web. Pour créer indépendamment un site Web basé sur HTML, vous avez besoin de connaissances du langage de programmation HTML, de certains concepts de Photoshop, de quelques compétences en rédaction d'articles, d'un peu d'imagination et d'art du design.

Un site Web créé à l’aide du langage de programmation PHP est un site Web dynamique. La plupart des sites Web existants sur Internet sont créés sur la base de PHP, sur des moteurs CMS (système de gestion de contenu). Sur ce site, vous pouvez apprendre à créer un site Web et obtenir une aide qualifiée pour créer vous-même un site Web à l'aide de moteurs CMS :
- création de site internet sur Joomla ;

Commencer à faire quelque chose est toujours difficile. L'essentiel ici est de se fixer un objectif précis. Pour commencer, choisissez le thème et l'échantillon du site Web que vous souhaitez réaliser, et élaborez un plan pour sa mise en œuvre. Et avancez sur le chemin de la réalisation de l’objectif principal.

Comme le langage de balisage hypertexte. HTML n'est pas un langage de programmation, c'est un langage de balisage de site Web.

Tous les navigateurs peuvent convertir ce balisage dans un format convivial.

Ce langage utilise des commandes spéciales appelées balises. Chaque balise a sa propre fonction. Il existe un grand nombre de balises. Idéalement, vous devez tout apprendre. Mais pour un développeur novice, des connaissances de base suffisent amplement.

La liste des commandes HTML est très longue. Mais il n’y en a pas beaucoup de principaux. Pour commencer à écrire du code, vous avez besoin d'un éditeur. Vous pouvez utiliser le Bloc-notes. Il est recommandé d'utiliser Notepad++. Il ressemble à ça.

L'avantage est que dans les éditeurs spéciaux, les balises sont mises en évidence dans une certaine couleur, selon la catégorie. Les commandes pour créer un site Web HTML dans le Bloc-notes ou tout autre programme sont les mêmes. Le langage utilisé est le même partout. L'environnement de développement n'est qu'un outil.

HTML a des balises fermantes et non fermantes. Dans cette langue également, il y a le concept d'imbrication. Chaque objet du code est un élément. Un élément a une balise d'ouverture, une balise de fermeture et un contenu. De plus, la balise possède ses propres attributs supplémentaires avec leurs propres valeurs.

Sur la figure, vous pouvez voir deux balises et . N'oubliez pas que l'ouverture et la fermeture s'écrivent de la même manière, mais seul le « / » diffère. Si la balise n'est pas fermée, le gestionnaire considérera tout le reste comme une continuation de cet élément particulier. C'est très important. Surtout dans les liens. Nous les examinerons un peu plus loin.

La balise est obligatoire. Il faut toujours qu’il soit écrit. Mais il n'est pas nécessaire de le fermer. Selon les normes, c'est nécessaire, mais si vous ne le fermez pas, cela fonctionnera toujours.

Ces commandes HTML constituent le cadre de la page. Ils sont obligatoires. Ils ferment également.

Le nom des balises correspond à la signification. Tête - tête. Cette section indique le service et les informations importantes qui ne sont pas visibles. La section corps est le corps du document. Voici le contenu qui est affiché à l'utilisateur. Essayez de fermer les balises immédiatement pour éviter toute confusion plus tard.

La section service indique :

• titre du document ;
• fichiers de styles ;
• fichiers de scripts ;
• balises méta ;
• lignes directrices pour les moteurs de recherche ;
• instructions pour robots;
• toute autre information pouvant être utilisée par les programmeurs mais pas par les utilisateurs.

Le fichier de style est connecté comme ceci :

Le fichier script est le suivant :

Le texte doit avoir un titre. Nous l'indiquons ainsi :

Titre de la page

Ce texte apparaîtra dans le titre de l'onglet du navigateur. Ce titre est également affiché dans les résultats des moteurs de recherche.

Le texte doit être placé dans la balise paragraphe. Il est noté . Vous pouvez également utiliser String pour le texte.

Vous pouvez formater le texte comme dans Word :

• italique
• texte en gras
• texte barré
• texte souligné

Le texte peut être stylisé. Nous les examinerons à la fin, après avoir passé en revue d’autres éléments.

Il existe d'autres commandes HTML importantes. Pour créer des sites Web, des en-têtes sont requis. Ils sont indiqués à l’aide de la balise First Level Heading. Il existe des niveaux de 1 à 6. Il est important de comprendre que les titres doivent être imbriqués.

Un exemple dans la figure.

Gardez à l’esprit qu’il est recommandé de n’utiliser qu’un seul en-tête h1. Dans ce cas, il doit correspondre à la balise. Bien sûr, vous pouvez spécifier 200 rubriques h1, mais vous serez alors pénalisé par les moteurs de recherche.

Les images font partie intégrante des pages Web. L'exemple montre comment insérer une photo.

Comme vous pouvez le voir, l'exemple montre en détail ce qu'on appelle et comment.

Si vous apprenez les commandes HTML, vous devez simplement connaître la balise de lien. C'est l'un des éléments les plus importants qui composent

Dans l’exemple ci-dessus, vous pouvez voir qu’à la place du texte du lien, il y a une image. Autrement dit, vous pouvez mettre à la fois du texte et une image.

Les tableaux sont également très souvent utilisés. Initialement, ils étaient destinés à présenter les informations sous une forme pratique. Mais ensuite, les concepteurs de mise en page les ont utilisés pour placer divers éléments de page.

Le tableau est créé comme suit :

L'attribut width spécifie la largeur du tableau. Cela peut être en pourcentage ou en pixels. Bordure spécifie l'épaisseur de la bordure.

La structure est spécifiée comme suit. La balise tr est une chaîne. Étiquetez la cellule td. Et tous ensemble, c'est une table.

La table peut être alignée. Pour cela, utilisez l'attribut align, qui peut prendre trois valeurs : Left, Center, Right. Un exemple d'utilisation est donné ci-dessous.

Ces commandes HTML (largeur et alignement) fonctionnent également pour d'autres éléments. L'épaisseur du cadre est également indiquée pour les images.

À l'aide de commandes HTML, vous pouvez créer différents types de listes. Presque exactement la même chose que dans l'éditeur Word.

Dans le langage HTML, il existe des listes ordonnées et non ordonnées.

• D'abord
• Deuxième
• Troisième

Le résultat sera comme ceci :

• D'abord
• Deuxième
• Troisième

Les listes ordonnées sont créées exactement de la même manière, mais au lieu de

, utilisez la balise.

Ici, vous pouvez également définir le type d'affichage de la liste :

• "1" - Chiffres arabes 1, 2, 3...
• "UN"- les lettres majuscules A, B, C...
• "un"- les lettres minuscules a, b, c...
• "JE"- grands chiffres romains I, II, III...
• "je"- les petits chiffres romains i, ii, iii...

Les chiffres arabes sont affichés en standard.

Comme il s'agit de listes numérotées, elles possèdent un attribut start qui spécifie la valeur de départ de la liste. Par exemple, vous pouvez afficher une liste commençant à partir du 10 ou du 20.

Utiliser des styles

Les commandes HTML pour un site sont assez variées, mais elles suivent toutes des styles. Les styles peuvent être spécifiés sous forme de fichier dans la section head:, ou vous pouvez écrire immédiatement un style prêt à l'emploi.

Notez qu'il existe une différence entre ces définitions de style. Le fichier de style peut être spécifié sur toutes les pages du site. Dès que vous y apporterez des modifications, cette mise à jour affectera l’ensemble du site dans son ensemble. Si vous spécifiez des styles sur une page spécifique, les modifications et l'utilisation de ces classes se feront uniquement dans ce fichier. Vos réglages n’iront pas au-delà.

Imaginez que vous ayez 20 pages HTML et que vous décidiez d’agrandir l’en-tête de 2 pixels. Si vous avez tout dans le fichier de styles, il vous suffit d'y apporter des modifications. Si tout est individuel, alors les 20 pages devront être mises à jour.

Vous ne pouvez spécifier que pour une seule page comme suit.



Quelques mots maintenant sur les balises que nous avons utilisées pour créer cette page.

Description des balises html de l'exemple

1. - ces balises doivent être présentes sur chaque page web. Ils indiquent aux navigateurs et aux moteurs de recherche qu'il s'agit d'une page HTML.

Toute page HTML a la structure suivante :

... Balises de titre ... ... Corps de la page ...

2. - entre ces balises se trouve tout le contenu visible de la page.

4. - entre ces balises est écrit le titre de la page, qui est affiché tout en haut du navigateur. D’ailleurs, lorsque vous recherchez quelque chose dans les moteurs de recherche, la première chose qui s’affiche est le nom de la page. Une balise est souvent abrégée en « titre ». Je vous conseille de lire l'article : comment créer un tag

Passons maintenant aux balises qui se trouvent dans le corps de la page html (à l'intérieur de et ).

5. - ces balises centrent tout ce qu'elles contiennent. Dans ce cas, le centre sera le centre de l'écran. Il est recommandé de cesser d'utiliser ces balises à l'avenir.

6. fait partie de la classe des balises de titre..., entourant généralement le titre de la page. Par exemple, cette page a la balise titre « Exemple de création d’une page html ».

Note

Ces balises ont beaucoup de poids dans le classement des sites Web, elles doivent donc être utilisées avec prudence et sagesse.

Lors de la composition du code HTML, vous devez respecter une règle simple : la balise de titre doit venir en premier, puis elles peuvent venir, etc. L'essentiel est qu'il n'y ait pas d'abord, puis, ensuite, etc. Il doit y avoir une hiérarchie stricte. Titres, etc. peut-être beaucoup.

7.
est une balise unique qui ne nécessite pas de balise de fermeture. Il passe à la ligne suivante. Dans mon exemple, j'ai écrit deux balises simples d'affilée pour passer deux fois à la ligne suivante.

8. est une balise unique qui affiche une image.

• src est un paramètre obligatoire, qui spécifie l'adresse de l'image (au lieu de URL_IMAGE, vous devez saisir l'adresse où votre image est stockée).
  Note:
  • Si l'image se trouve dans le même dossier que votre page html, alors il suffit d'écrire le nom de l'image, sinon vous devez saisir une URL absolue ou relative ;
  • N'oubliez pas de préciser l'extension de l'image. Par exemple, .jpg, .gif, .jpeg.
• alt ou title - vous pouvez écrire une description de votre image dans ces paramètres. Lorsque vous passez votre souris sur l'image, cette description apparaîtra. Ces paramètres sont importants pour la promotion d’un site Web, notamment dans la recherche d’images. Si l'image ne parvient pas à se charger, ce texte s'affichera, ce qui est également un plus.

9. - ces balises sont créées pour modifier la police, l'arrière-plan, la taille, etc. Bref, tout ce qui concerne le formatage du texte peut être configuré dans une seule balise. Cette balise possède de nombreux attributs, dont je parlerai dans une leçon séparée.

Remarque : - balise similaire.

Il existe également une propriété de police CSS dans laquelle vous pouvez définir toutes ces options.

10. - surligner en gras. Tout ce qui se situe entre et sera mis en évidence en gras. Par exemple, si vous l'écrivez au tout début du contenu et le fermez à la toute fin, alors tout le texte de la page sera surligné en gras. Il s'agit d'une balise assez courante, dont l'équivalent est .

Les moteurs de recherche prêtent attention à cette balise en termes d’augmentation de l’influence des mots-clés. Mais il faut être prudent, car surligner à chaque fois des mots-clés en gras sera perçu comme du spam.

Vous vous demandez comment créer une page HTML ? Pour ce faire, vous devez passer plusieurs heures, et vous saurez Et vous pourrez créer votre première page en 5 minutes.

HTML signifie HyperText Markup Language. Traduit, cela signifie « langage de balisage hypertexte ». Il est important de comprendre que HTML n’est pas un langage de programmation, mais un langage de balisage de site.

Tous les navigateurs modernes peuvent le reconnaître. Ils affichent ensuite les informations de manière conviviale, comme prévu par l'auteur au préalable.

Ce langage utilise des balises spéciales. Chaque balise remplit sa propre fonction. Il y en a beaucoup. Idéalement, vous devez tout apprendre. Mais pour un débutant, des connaissances de base suffisent amplement.

Bases HTML

Avant de créer une page HTML, vous devez savoir en quoi elle consiste. Il existe deux concepts dans ce langage : élément et balise.

Une balise d'ouverture et de fermeture est utilisée pour indiquer où commence et se termine cet élément. Cela ressemble à ceci.

contenu

Comme vous pouvez le voir, la seule différence entre les balises d'ouverture et de fermeture est "/".

L'ensemble du document HTML est une collection de ces éléments. Il existe certaines exigences concernant la structure du document. Tout le contenu de la page doit être compris entre les deux balises et. Lorsque vous écrivez du code, prenez l’habitude d’inclure immédiatement une balise d’ouverture et de fermeture.

N'oubliez pas non plus que la structure du langage HTML possède sa propre hiérarchie. Sinon, cela s'appelle la nidification. est le plus important, puisque tous les autres sont en lui.

HTML a deux éléments enfants :

• ... ;
• .. .

Le bloc HEAD indique diverses informations de service. Ces informations ne sont pas affichées dans le navigateur. Par exemple, des instructions pour les développeurs, pour tous les programmes, pour les robots et bien plus encore.

Le plus important est qu’il n’y a pas de contenu ici.

La section BODY spécifie le contenu du document qui sera affiché à l'utilisateur.

Apprenez à créer immédiatement des balises ouvertes et fermées, puisqu'il peut y avoir 10 éléments imbriqués. De plus, pour plus de commodité, il est recommandé de mettre en retrait les balises imbriquées. Par exemple, comme ça.

Ceci est fait pour que les balises d'égale importance soient au même niveau et que les balises enfants soient « à l'intérieur ». Cela facilite beaucoup la compréhension et la recherche du bon morceau de code. Sinon, vous pourriez être confus. Mais pour gagner de la place, le corps lui-même peut être réalisé sans empreintes. Ceci est fait pour que tout le monde n'ait pas d'indentation supplémentaire. Il est conseillé de séparer tout le reste.

Comment créer une page HTML simple

Pour écrire du code, vous avez besoin d'une sorte d'éditeur. Il y en a beaucoup. Les plus populaires sont Notepad++ et Adobe Dreamweaver. Vous pouvez également utiliser un bloc-notes.

Voici à quoi ressemble l'éditeur Notepad++.

C'est un éditeur très pratique et en même temps gratuit. Adobe Dreamweaver ci-dessus est une version payante. La différence entre les éditeurs conçus pour l'écriture et un bloc-notes est que des balises spéciales sont mises en évidence. S'il n'est pas mis en surbrillance, c'est que vous l'avez mal écrit.



Pour que le rétroéclairage corresponde à la langue, il faut le préciser dans les paramètres.



Voyons comment créer une page HTML dans le Bloc-notes. Autrement dit, terminons la partie technique et passons ensuite directement à l'étude des balises.

Comment créer une page Web dans le Bloc-notes HTML

Pour commencer, ouvrez le Bloc-notes.



Tapez ensuite ce qui est indiqué dans la capture d'écran suivante.



Habituez-vous à écrire avec vos mains au lieu de simplement copier. Lorsque vous écrivez avec vos mains, vous ferez mieux de vous souvenir de l'intégralité de la base de balises.



Après cela, vous pouvez ouvrir le fichier dans un navigateur et admirer le résultat. Vous devez maintenant comprendre comment créer une page Web dans un bloc-notes HTML.

Consortium mondial W3C

Il existe une organisation appelée W3C, qui développe et met en œuvre toutes les normes pour Internet. Tous les navigateurs adhèrent à ces normes et traitent le balisage des pages (code) conformément à ces règles.

Sur le site officiel des développeurs du langage HTML vous pouvez trouver un tableau avec toutes les balises et les règles de leur utilisation. Dans cet article, nous considérons les plus élémentaires.

Vous vous demandez peut-être quelles pourraient être les règles ? Toutes les balises décrites ont leur propre recommandation. Il y en a plusieurs :

• Balise facultative.
• Interdit.
• Balise vide.
• Dépassé
• Perdu.
Balises en HTML

Avant de créer une page HTML, vous devez comprendre ce qui doit contenir la partie service HEAD.

La zone HEAD contient des balises obligatoires et facultatives. La balise obligatoire est le titre. Il est désigné Titre. Il est attribué à l'ensemble du document. Et ce que vous voyez dans les résultats du moteur de recherche Google, c'est la balise de titre.

Passons à la section CORPS. Il y a des éléments qui sont affichés dans le navigateur, et il y en a aussi qui ne le sont pas. Par exemple, les commentaires ne sont pas affichés à l'utilisateur. Ils peuvent être utilisés pour des notes ou pour donner des indices aux autres employés si vous travaillez en équipe.

Ils sont désignés comme

Tout ce qui se trouve entre les deux est considéré par le programme comme tel. Veuillez noter que vous ne pouvez pas imbriquer une balise de commentaire dans une autre balise de commentaire. Parce que dès que vous ouvrez.

Un exemple d'une telle imbrication :

suite du premier commentaire -->

Le résultat dans le navigateur sera le suivant

suite du premier commentaire -->

Voici un morceau ne sera pas visible. Deuxième balise d'ouverture Un peu plus de texte