Outils nécessaires
Pour développer le concept d'alignement en HTML, nous devons mentionner certains outils nécessaires à l'exécution du 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, bloc-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 une certaine connaissance des bases du HTML. Nous avons présenté la capture d'écran d'un exemple de code.
< html >
< diriger >...</ diriger >
< corps >….</ corps >
</ html >
HTML a deux parties 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 du nommage 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'autre part, le corps traite toutes les autres balises de texte, d'images ou de vidéos, etc. En d'autres termes, tout ce que vous souhaitez ajouter à votre page html est écrit dans la partie 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 la balise de début et la balise de fin est . On observe donc que la balise 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 alors enregistré avec l'extension html. Par exemple, nous avons utilisé un fichier nommé example.html. Ensuite, vous verrez que l'icône du bloc-notes est devenue l'icône du navigateur.
Comme l'alignement est contenu de style. Le style en html est de trois types. Un style en ligne, un style interne et externe. Inline 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 de texte en ligne
Exemple 1
Il est maintenant temps de discuter d'un exemple ici. Considérez l'image affichée ci-dessus. Dans ce fichier de 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 écrirons cette balise lorsque nous introduirons la balise de paragraphe dans le corps html. Après le texte, fermez la balise de paragraphe. Enregistrez puis ouvrez le fichier dans le navigateur.
Le paragraphe est aligné au centre, tel qu'il est affiché dans le navigateur. La balise utilisée dans cet exemple est utilisée pour tout alignement, c'est-à-dire 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 à cette fin.
< centre > …… ..</ centre >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 du titre au lieu d'un paragraphe dans le texte html. La syntaxe pour cet alignement d'en-tête est la même. Cela peut être fait à la fois par la balise ou par un style en ligne ou en ajoutant la balise align à l'intérieur de la balise de titre.
La sortie est affichée dans le navigateur. La balise de titre a converti le texte brut en titre et la balise l'a aligné au centre.
Exemple 3
Aligner le texte au centre
Prenons un exemple dans lequel un paragraphe est affiché dans le navigateur. Nous devons aligner cela au centre.
Nous allons ouvrir ce fichier dans le bloc-notes puis l'aligner en position centrale en utilisant la balise.
< p style =texte-aligner: centre ;>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é et aligné. Voir l'image ci-dessous.
Aligner le texte à droite
Pencher le texte vers la droite revient à le positionner au centre de la page. Seul le mot central est remplacé par droit dans la balise de paragraphe.
< p style =texte-aligner: à droite ;>………..</ p >Les changements peuvent être vus à travers l'image jointe ci-dessous.
Enregistrez et actualisez 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 défini dans la partie principale du html de la page. Cela fonctionne de la même manière que les balises internes.
Considérez la page ci-dessus ; il contient les titres et le paragraphe en elle. Nous avons l'obligation de voir le texte au centre. L'alignement en ligne nécessite l'écriture manuelle de balises à l'intérieur de chaque paragraphe. Mais le style interne peut être appliqué automatiquement à chaque paragraphe du texte en mentionnant p dans la déclaration de style. Il n'est alors pas nécessaire d'écrire une balise à l'intérieur de la balise de paragraphe. Maintenant, observez le code et il fonctionne.
< style >P{Texte-aligner: centre}
</ style >
Cette balise est écrite dans la balise de style dans la partie head. Exécutez maintenant 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-aligner: droit
}
Maintenant, après avoir enregistré le fichier, exécutez le fichier du bloc-notes dans le navigateur. Vous verrez que les en-têtes sont alignés sur le côté droit de la page HTML.
Exemple 3
Dans le style interne, il peut arriver que vous deviez aligner le texte de certains paragraphes du texte alors que d'autres restent les mêmes. Par conséquent, nous utilisons le concept de classe. Nous introduisons la classe avec une méthode point à l'intérieur de la balise style. Il est nécessaire d'ajouter le nom de la classe à l'intérieur de la balise de paragraphe que vous souhaitez aligner.
< style >.centre{
Texte-aligner: centre}
</ style >
classer =centre>……</ p >
Nous avons ajouté la classe dans les trois premiers paragraphes. Exécutez maintenant le code. Vous pouvez voir dans la sortie que les trois premiers paragraphes sont alignés au centre, alors que d'autres ne le sont pas.
Conclusion
Cet article expliquait que l'alignement pouvait être effectué de différentes manières via des balises en ligne et internes.