Comment aligner le texte dans HTML

«Langue de balisage hypertexte» est le langage de base de la conception d'un site Web. HTML est connu pour être une langue frontale pour concevoir l'interface d'un site Web. Il existe de nombreuses fonctions concernant cette langue. Les commandes utilisées pour la conception sont appelées balises. Ces balises se combinent pour développer un site Web. Un seul fichier de code HTML est responsable d'un site Web statique qui ne s'exécute pas. Le contenu HTML est le texte, l'image, les formes, la couleur, l'alignement, etc. L'alignement est un ingrédient important dans la conception car il détermine le contenu respectif à gérer à un endroit spécifique. Nous discuterons de quelques exemples de base dans ce guide.

Outils nécessaires

Pour développer le concept d'alignement dans HTML, nous devons mentionner certains outils nécessaires nécessaires pour exécuter le code HTML. L'un est un éditeur de texte, et le second est un navigateur. Un éditeur de texte peut-être un bloc-notes, sublime, note-notes ++, ou tout autre qui pourrait aider. Dans ce guide, nous avons utilisé le bloc-notes, une application par défaut dans Windows et Google Chrome comme navigateur.

Format HTML

Pour comprendre l'alignement, nous devons d'abord avoir un savoir-faire des bases HTML. Nous avons présenté la capture d'écran d'un exemple de code.

…
… .

HTML a deux pièces principales. L'un est la tête, et l'autre est le corps. Toutes les balises sont écrites entre parenthèses angulaires. La partie principale traite de la dénomination de la page HTML en utilisant la balise de «titre». Et aussi, utilisez la déclaration de style à l'intérieur de la tête. D'un autre côté, le corps traite de toutes les autres balises de texte, d'images ou de vidéos, etc. En d'autres termes, tout ce que vous voulez ajouter à votre page HTML est écrit dans la partie du corps de HTML.

Une chose que je dois souligner ici est l'ouverture et la fermeture de la balise. Chaque balise écrite doit être fermée. Par exemple, HTML a un étiquette de départ et la balise de fin est . Il est donc observé que la fin de fin a une barre oblique suivie du nom de la balise. De même, toutes les autres balises suivent également la même approche. Chaque éditeur de texte est ensuite enregistré avec l'extension de HTML. Par exemple, nous avons utilisé un fichier avec l'exemple de nom.html. Ensuite, vous verrez que l'icône du bloc-notes s'est transformée en icône du navigateur.

Comme l'alignement est le contenu du style. Le style en HTML est de trois types. Un style en ligne, un style interne et externe. En ligne implique dans la balise. Interne est écrit à l'intérieur de la tête. En même temps, le style externe est écrit dans un fichier CSS séparé.

Style en ligne du texte

Exemple 1

Maintenant, il est temps de discuter d'un exemple ici. Considérez l'image affichée ci-dessus. Dans ce fichier du bloc-notes, nous avons écrit un texte simple. Lorsque nous l'exécutons en tant que navigateur, il affichera la sortie donnée ci-dessous dans le navigateur.

Si nous voulons que ce texte soit affiché au centre, nous modifierons la balise.

Cette balise est une balise en ligne. Nous écrire cette balise lorsque nous présenterons la balise de paragraphe dans le corps HTML. Après le texte, puis fermez la balise de paragraphe. Enregistrer puis ouvrir le fichier dans le navigateur.

Le paragraphe est aligné au centre, car il est affiché dans le navigateur. La balise utilisée dans cet exemple est utilisée pour tout alignement, i.e., pour la gauche, la droite et le centre. Mais si vous souhaitez aligner le texte au centre uniquement, une balise spécifique est utilisée à cet effet.

…

La balise centrale est utilisée avant et après le texte. Cela montrera également le même résultat que l'exemple précédent.

Exemple 2

Ceci est un exemple d'alignement de la rubrique au lieu d'un paragraphe dans le texte HTML. La syntaxe de cet alignement de la tête est la même. Cela peut être fait à la fois via la balise ou par style en ligne ou en ajoutant la balise d'alignement à l'intérieur de la balise d'en-tête.

La sortie est indiquée dans le navigateur. L'étiquette de cap a converti le texte brut en une rubrique, et la balise l'a alignée au centre.

Exemple 3

Alignez le texte au centre

Considérez un exemple dans lequel il y a un paragraphe affiché dans le navigateur. Nous devons aligner cela au centre.

Nous ouvrirons ce fichier dans le bloc-notes, puis l'alignerons en position centrale en utilisant la balise.

Après avoir ajouté cette balise dans la balise de paragraphe, veuillez enregistrer le fichier et l'exécuter sur le navigateur. Vous verrez que le paragraphe est maintenant centré aligné. Voir l'image ci-dessous.

Alignez le texte à droite

Pour pencher le texte à droite, il est similaire de le positionner au centre de la page. Le mot «centre» est remplacé par «droite» dans la balise de paragraphe.

…

Les modifications peuvent être vues via l'image annexée ci-dessous.

Enregistrer et actualiser la page Web dans le navigateur. Le texte est maintenant déplacé vers le côté droit de la page.

Style interne du texte

Exemple 1

Comme décrit ci-dessus, le CSS interne (feuille de style en cascade) ou le style interne est un type de CSS qui est défini dans la partie principale du HTML de la page. Il fonctionne de manière similaire aux étiquettes internes.

Considérez la page indiquée ci-dessus; il contient les titres et le paragraphe. Nous avons besoin de voir le texte au centre. L'alignement en ligne nécessite la rédaction manuelle des étiquettes à l'intérieur de chaque paragraphe. Mais le style interne peut être automatiquement appliqué à chaque paragraphe du texte en mentionnant P dans l'instruction Style. Il n'est alors pas nécessaire d'écrire une balise à l'intérieur de la balise de paragraphe. Maintenant observer le code, et ça marche.

Cette balise est écrite dans la balise de style dans la partie de tête. Maintenant, exécutez le code dans le navigateur.

Lorsque vous exécutez la page dans le navigateur, vous verrez que tous les paragraphes sont alignés au centre de la page. Cette balise est appliquée à chaque paragraphe présent dans le texte.

Exemple 2

Dans cet exemple, tout comme un paragraphe, nous alignerons tous les titres du texte sur le côté droit. À cette fin, nous mentionnerons les titres dans la déclaration de style à l'intérieur de la tête.

H2, H3

Texte-aligne: Droite

Maintenant, après avoir enregistré le fichier, exécutez le fichier de blocs-notes dans le navigateur. Vous verrez que les titres sont alignés sur le côté droit de la page HTML.

Exemple 3

Dans le style interne, il pourrait y avoir une situation où vous devez aligner le texte de quelques paragraphes dans le texte tandis que d'autres restent les mêmes. Par conséquent, nous utilisons le concept de classe. Nous présentons la classe avec une méthode DOT à l'intérieur de la balise de style. Il est nécessaire d'ajouter le nom de la classe à l'intérieur de la balise de paragraphe que vous souhaitez aligner.

< p class = “center”>…

Nous avons ajouté la classe dans les trois premiers paragraphes. Maintenant, exécutez le code. Vous pouvez voir dans la sortie que les trois premiers paragraphes sont alignés au centre, alors que d'autres ne sont pas.

Conclusion

Cet article a expliqué que l'alignement pourrait être effectué de différentes manières par le biais de balises en ligne et internes.