Marquez le nouveau paragraphe. Balise de paragraphe. Leçon quatre. Affichage du navigateur
– lors du processus de création d’un site Web, nous devons beaucoup travailler avec des blocs de texte ou des phrases de texte. Un jour, j'ai eu besoin d'ajouter une phrase de texte de telle sorte qu'avant cette phrase de texte, il y ait du indenter le texte du bord HTML bloc dans lequel ce texte a été ajouté.
La première méthode est donc la plus naturelle et la plus simple. Pour mettre le texte en retrait, ajoutez un code d'espace HTML avant le texte - Vous pouvez ajouter un code d'espace HTML dans n'importe quel éditeur HTML.
Voici un exemple de code fonctionnel pour définir l'indentation du texte à l'aide du code espace :
HTML retrait du texte à gauche, utiliser le code espace
Dans cet exemple, avant le texte que nous avons sélectionné, le code espace est ajouté quatre fois, nous obtenons ainsi le retrait dont nous avons besoin.
Nous savons que le code spatial est traité par n'importe quel navigateur. Par conséquent, en ajoutant le nombre requis d'espaces avant le texte, vous pouvez obtenir l'indentation requise pour le texte.
Cette méthode est bonne car elle est garantie d'être traitée par n'importe quel navigateur.
Mais cette méthode présente un inconvénient majeur. Afin d'indenter le texte suffisamment longtemps dans le code HTML, vous devrez ajouter un grand nombre de caractères d'espacement avant le texte, ce qui peut ne pas être beau, encombrant et peu professionnel.
Une solution à ce problème consiste à utiliser la méthode suivante pour définir l'indentation.
Indentation du texte HTML, deuxième méthode - cette méthode est basée sur les propriétés de la balise blockquote. Cette balise définit un retrait d'environ 40 pixels à gauche et à droite pour le texte qui y est placé. De plus, l'indentation est spécifiée en haut et en bas. Un exemple de code HTML pour utiliser cette méthode est donné ci-dessous :
à gauche, utilisez le tag citation de bloc
Comme vous pouvez le constater, cette méthode de définition de l'indentation du texte est très simple à utiliser, mais cette méthode présente également un inconvénient important. L'indentation définie par la balise citation de bloc est fixe et est toujours égal à la même valeur – 40px.
Pour corriger la situation, et lors de l'ajout indentation HTML et pour texte pour pouvoir définir n'importe quelle valeur, nous utiliserons la troisième méthode.
Indentation du texte HTML, troisième méthode.
Ici, nous utiliserons la propriété text-indent des feuilles de style en cascade CSS.
Si nous ouvrons le livre de référence CSS, sur la page avec une description des propriétés de text-indent, nous verrons qu'en utilisant text-indent, nous pouvons définir la valeur d'indentation de la première ligne ou du premier paragraphe, ou de n'importe quel bloc de texte. .
Nous regardons un exemple avec un court bloc de texte, donc les propriétés text-indent sont tout à fait adaptées à notre cas.
Vous trouverez ci-dessous le code HTML qui indente le texte à l'aide de text-indent. L'exemple montre qu'en définissant text-indent sur différentes valeurs d'argument, nous pouvons modifier la quantité d'indentation du texte :
HTMLéchancruretexte, le style CSS fonctionne - retrait de texte
À mon avis, cette méthode de définition d'un retrait pour le texte est la plus optimale, mais considérons néanmoins une autre façon de définir un retrait, en utilisant des images.
Indentation du texte HTML, quatrième méthode - ici, nous utiliserons une image pour définir l'indentation.
À titre d'exemple concret, regardons immédiatement le code HTML qui montre comment fonctionne cette méthode :
à gauche, utilisez l'image
L'exemple ci-dessus montre clairement qu'en modifiant la largeur de l'image, nous pouvons modifier la position du texte, c'est-à-dire définir le retrait souhaité pour le texte.
Comme image, vous pouvez utiliser une image dont la largeur et la hauteur sont égales à un pixel. Pour éviter que l'image que nous utilisons ne soit visible sur la page, nous définirons sa couleur exactement de la même manière que l'arrière-plan de la page du site.
À mon avis, les méthodes ci-dessus pour définir les retraits du texte sont tout à fait suffisantes pour organiser l'indentation dont vous avez besoin dans n'importe quelle situation lors de l'ajout de contenu à la page de vos sites.
Bonjour! Continuons à examiner les bases de la programmation de sites Web. Il est difficile d'imaginer au moins l'un d'entre eux qui ne contienne pas de balise de paragraphe dans son code. Aujourd'hui, nous allons voir comment l'écrire correctement et décrire plusieurs actions supplémentaires avec du texte.
Exemple
Regardons un exemple de la façon de créer un paragraphe en code HTML.
Une ou plusieurs phrases.
Une condition préalable est la présence d'une balise d'ouverture et de fermeture. À propos, vous pouvez tout faire directement dans le Bloc-notes, il vous suffit ensuite d'enregistrer le fichier au format approprié.
Formatage
Très souvent, je remarque que les gens s'intéressent à la manière de tracer une ligne rouge. Pour un paragraphe spécifique, c'est très simple.
L'activation de ces options indentera la première ligne de 15 pixels à partir du bord gauche. Si de telles modifications doivent être appliquées à toutes les balises P, alors dans le fichier CSS connecté aux pages du site, vous pouvez écrire le code ci-dessous.
Personnellement, je ne fais généralement pas de lignes rouges lors de l'édition de code dans le Bloc-notes ou un autre éditeur.
J'inclus simplement un remplissage entre les blocs de texte. Pour ce faire, vous devez spécifier des paramètres spéciaux en CSS.
p(marge-bas:25px;)
Si vous utilisez cette conception, après chaque paragraphe, un retrait de 25 pixels apparaîtra.
En fait, il existe de nombreuses options pour travailler avec HTML et différents styles. Je n'en ai décrit que quelques-uns ; il est très difficile de tout couvrir dans un seul article.
Vous voulez en savoir plus ? Vous trouverez peut-être utiles mes publications passées sur les sujets suivants :
C'est ici que je conclurai l'article et, je pense, il ne sera désormais plus difficile de créer des paragraphes en HTML et de les formater magnifiquement à l'aide de balises spéciales.
Je vous souhaite une grande réussite dans la maîtrise de la programmation. Au fait, avez-vous pensé à gagner de l’argent sur des sites d’information à but non lucratif ? Il a fourni des informations tout simplement étonnantes spécialement pour ses lecteurs.
Le travail normal en ligne et les finances sont les sujets clés de ce blog. Vous pouvez dès maintenant vous familiariser avec des prospects individuels en ligne à partir de documents publiés. Je continue de préparer et de publier du contenu nouveau et surtout vraiment utile. Abonnez-vous aux mises à jour de Workip sur votre e-mail. À plus tard.
Tout texte a sa propre structure unique : les livres sont divisés en parties, sections et chapitres, les journaux et les magazines ont des titres et des sous-titres distincts, qui, à leur tour, incluent des fragments de texte qui ont également leur propre structure : paragraphes, retraits, etc.
Le texte publié sur les pages Web ne fait pas exception ; il doit également avoir une structure logique compréhensible par chaque utilisateur. Après tout, beaucoup dépend de la commodité et de la simplicité du texte sur la page : tout d'abord, quelle impression le visiteur aura sur votre site.
Pour créer des unités structurelles de texte telles que des paragraphes, les documents HTML utilisent la balise
, qui sépare les fragments de texte par un retrait vertical (une ligne vide est ajoutée avant et après le paragraphe).
Remarque : par défaut, la distance entre les paragraphes est de 1em (em est une unité de mesure égale à la hauteur de la police), c'est-à-dire que la distance entre les paragraphes dépend directement de la taille de la police.
Pour modifier les marges entre les paragraphes sans modifier la taille de la police, vous pouvez utiliser la propriété CSS margin.
N'oubliez pas la balise de fermeture
La plupart des navigateurs afficheront correctement le document HTML même si vous oubliez la balise de fermeture.
Paragraphe
Un autre paragraphe
Ce code fonctionnera dans la plupart des navigateurs, mais ne vous y fiez pas. Une balise de fermeture oubliée peut entraîner des résultats ou des erreurs inattendus.
Ligne rouge
Qu'est-ce qu'une ligne rouge ? Par définition, il s'agit de la ligne de départ d'un paragraphe, qui était autrefois surlignée en rouge (d'où son nom). Avant l'invention de l'imprimerie, les livres étaient écrits à la main - un chapitre ou une partie du texte, le premier mot ou la première lettre était écrit à la peinture rouge. C'est ainsi qu'est apparu le concept « d'écrire à partir de la ligne rouge » - cela signifie le début d'une nouvelle pensée, d'un chapitre ou d'une nouvelle partie.
Cependant, lors de la création de pages Web, le dessin de la ligne rouge est assez rarement utilisé, malgré le fait qu'il facilite grandement la perception visuelle du texte, ce qui est très important pour le lecteur traditionnel - tout le monde n'est pas à l'aise pour lire le texte électronique. version du texte.
Pour ajouter une ligne rouge à vos paragraphes, vous devez utiliser la propriété CSS text-indent, qui permet de mettre en retrait la première phrase :
Essayer "
Dans l'exemple ci-dessus, la première ligne de chaque paragraphe de la page commencera par un retrait de 25 pixels. L'exemple ci-dessous montre comment définir une ligne rouge uniquement pour un paragraphe spécifique d'une page.
Comme dans tout véritable art, il n'y a pas de bagatelles dans les bons textes, auxquels certains incluent la ligne rouge, estimant que son utilisation n'est pas si importante.
Essayer "Cependant, nous devons comprendre que toute virgule porte à la fois une charge esthétique et sémantique et n'est pas seulement un hommage aux règles de grammaire - cela s'applique également au formatage.
Remarque : il n'est pas nécessaire de définir le retrait sur 25 px, vous pouvez choisir vous-même la taille de retrait optimale, et en utilisant la propriété text-indent, il est possible de faire dépasser une ligne au-dessus du reste du texte pour cela, vous devez définir ; une valeur négative pour la propriété (par exemple : -30px). Bonjour, chers lecteurs du blog ! Cet article parlera de balises de formatage du texte
Les balises sont divisées en 2 types : en bloc et en ligne. Lorsque vous utilisez le premier, vous pouvez modifier le contenu d'une partie du texte (lignes, fragments individuels ou mots), tandis que les seconds le sont. Les balises de formatage que nous examinerons dans cet article sont principalement en minuscules.
Règles et ordre d'écriture des balises
Vous savez déjà ce que sont les balises d'ouverture et de fermeture. Sinon, lisez l'article donné au tout début de ce document. En bref, il existe deux types de balises : simples (par exemple, newline) et conteneur (par paires). Ainsi, toutes les balises de formatage du texte sont jumelé. Cela signifie que tout élément a une balise d'ouverture et de fermeture, et la surbrillance doit être placée entre elles. Par exemple, la sélection correcte d'une phrase ressemblerait à ceci : Fragment sélectionné
Lorsque le navigateur traite ce fragment, vous verrez le texte suivant : Fragment sélectionné. D'ailleurs, toutes les balises ne sont pas affichées dans le flux RSS ().
L'essentiel lors de l'écriture des balises est de ne pas oublier de les fermer. Sinon, tout le texte de la page sera surligné en gras (dans l'exemple avec la balise ). Mais il existe des cas où vous devez mettre en évidence un certain fragment à la fois en gras et en italique. Mais aucune balise n’effectue cette action. Il n'y a qu'un seul moyen de sortir de cette situation : utiliser deux balises en même temps. Peu importe dans quel ordre vous les utilisez. Par conséquent, écrire du texte avec des balises comme celle-ci :
Fragment sélectionné
ou comme ça :
Fragment sélectionné
Vous recevrez toujours Fragment sélectionné italique et gras à la fois. Cependant, il est préférable d’utiliser la première option, car au départ c’était la seule et la bonne. N'oubliez pas non plus que chaque navigateur peut traiter les balises différemment (), en fonction des paramètres. Passons maintenant aux balises de formatage elles-mêmes.
Texte en gras et en italique - balises , , Et
Les balises de formatage de texte les plus populaires - en les mettant en évidence audacieux Et italique. Ils sont généralement utilisés pour donner de l'importance à un fragment. Le premier cas sert à mettre en évidence un fragment contenant des informations utiles ou des mots-clés. L'italique a le même objectif que le texte en gras, mais l'information est moins importante car l'italique est moins visible à l'arrière-plan du corps du texte que le texte en gras.Considérons d'abord mettre le texte en gras. Il y a deux balises utilisées pour cette action - Et . Il n'y a aucune différence d'apparence. Cependant, étant donné que chaque navigateur peut interpréter chaque élément différemment, vous pourrez peut-être constater des différences. Voici à quoi ressemble le texte dans les balises Et sous une forme déjà traitée par le navigateur :
Texte dans les balises fortes
Texte dans les balises b
Et voici à quoi ressemblent ces deux lignes dans le code source de la page :
Texte dans les balises fortes Texte dans les balises b
On peut observer la même situation dans le cas de balises italiques Et . Essayez de trouver les différences entre les deux exemples :
Texte dans les balises em
Texte dans les balises I
Et voici le code source :
Texte dans les balises em Texte dans les balises I
Ainsi, les balises gras et italiques considérées ne sont en fait pas différentes, mais alors pourquoi avons-nous besoin, par exemple, de la balise s'il y a ? Après tout, ce dernier ne contient qu’un seul caractère (sans compter les parenthèses) et est donc plus facile à écrire. Et le fait est que les balises Et influence . Si vous entourez les mots-clés de ces balises, cela aura un effet bénéfique sur la promotion du site Web. L'essentiel est de ne pas en faire trop - le texte doit contenir au maximum 5 % de texte en gras dans la balise. , et la même quantité d'italique dans la balise .
Si vous souhaitez simplement mettre en évidence un point du texte, utilisez la balise ou . En général, je pense que les moteurs de recherche considèrent également le texte de ces balises comme plus important, mais optimisation interne ils ont encore moins d'influence que Et .
Balises pour surligner du texte avec une ligne - , Et
Examinons maintenant quelques balises qui utilisent un tiret dans la conception du texte. L'éditeur de texte le plus célèbre que vous connaissez est étiqueter
ou souligner. Cette balise n'a pas d'impact sur le classement (pour autant que je sache), mais mettre en évidence du texte et attirer l'attention dessus sera utile. J'ai donné un exemple d'utilisation de cette balise juste au dessus. Deux autres balises similaires dans leur objectif - Et . Les deux remplissent la fonction de supprimer du texte. Vous pouvez utiliser cette balise dans n'importe quelle situation : si vous mettez à jour un document (ou plutôt une partie de celui-ci), vous pouvez rayer l'ancien et en ajouter un nouveau ; si vous allez écrire quelque chose qui s'écarte du sujet du matériel ; quelque chose qui ne correspond pas aux normes morales et éthiques.
Les différences entre ces deux balises résident uniquement dans leur en écrivant, de sorte qu'il est préférable d'utiliser le premier, car premièrement, c'est plus pratique à écrire, et deuxièmement, votre page contiendra moins de code HTML, et les moteurs de recherche adorent cela.
Étiqueter et attributs - paramètres de police du texte
Considérons maintenant une balise qui n'est pas utilisée sans attributs. En l'utilisant, vous pouvez définir les paramètres d'un morceau de texte spécifique. De manière générale, il est désormais préférable d'utiliser des (feuilles de style en cascade), car... en les utilisant, vous pouvez réduire considérablement tout le code HTML de la page. Alors, regardons cette même balise . Tout existe pour lui trois attributs :
- affronter- la police elle-même. Par exemple, Arial, Courier ou Verdana. Vous pouvez en citer plusieurs, car tous les utilisateurs ne disposent pas d'un ensemble complet de polices, et en en écrivant plusieurs dans l'attribut face, le navigateur pourra choisir laquelle utiliser, ou plutôt laquelle est présente dans le système ;
- taille— un attribut indiquant la taille du texte. Peut être exprimé aussi bien en unités conventionnelles qu'en pixels ;
- couleur— couleur du texte. Cet attribut peut être utilisé aussi bien dans les codes de couleurs HTML que dans ceux de mots. Les premiers ont la forme #FFFFFF (où F est n'importe quel chiffre ou lettre de A à F), et les seconds sont écrits avec des mots simples (par exemple, rouge).
Voici à quoi ressemble le texte dans la balise en utilisant chaque attribut :
Ce texte fait 6px
Ce texte est rouge Ce texte est en police Arial Ce texte est rouge et taille 5pxEt voici ce que vous verrez après avoir traité le code écrit : 
Bloquer les éléments de conception de texte - titres -, paragraphe
, paragraphe
Enfin, nous examinerons les éléments de bloc, qui sont utilisés dans presque tous les documents. Ce sont des balises de titre et de paragraphe. Considérons le premier. Il existe 6 types de titres et chacun a sa propre balise. Chaque type n'a que son propre numéro de série et est enregistré à l'aide de balises
, ,..., . Voici à quoi ressemblent tous les en-têtes une fois traités :
. Voici à quoi ressemblent tous les en-têtes une fois traités :
Le numéro après le titre du mot correspond au numéro dans la balise
Parlons maintenant de la balise de surbrillance du paragraphe
La fonction de cette balise est de séparer le texte entre un autre texte identique et une ligne vide. Si vous regardez le code source d'un document, vous pouvez voir ce qui suit :
Les rectangles verts contiennent un paragraphe, les rectangles rouges en contiennent un autre. Et voici à quoi ressemble ce code après traitement par le navigateur (la flèche pointe vers une ligne vide) :
En conséquence, nous obtenons une séparation assez notable d'un paragraphe d'un autre, ce qui est bénéfique - la lecture devient plus pratique.
C'est la fin de l'article sur balises de formatage de document. Il y en a beaucoup plus que ce que j'ai décrit dans ce document. C'est juste qu'il y a beaucoup à dire sur certains d'entre eux, c'est pourquoi des articles séparés avec une revue complète leur seront consacrés !
Tâche
Ajoutez un retrait à la première ligne de chaque paragraphe.
Solution
Lorsque vous devez définir l'indentation d'un paragraphe, également appelée indentation, il est préférable d'utiliser la propriété de style text-indent. Sa valeur détermine de combien décaler le texte de la première ligne vers la droite par rapport à sa position d'origine. La largeur du bloc de texte ne change pas et reste définie initialement. Le degré d'indentation peut être spécifié en pixels, en pourcentages ou en d'autres unités disponibles (exemple 1).
Exemple 1 : indentation de première ligne
HTML5 CSS 2.1 IE Cr Op Sa Fx
Le pandémonium babylonien, selon la légende biblique, est la tentative ratée du roi Nimrod de construire à Babylone un pilier aussi haut que le ciel. Dieu, en colère contre le peuple pour son désir irréfléchi, a décidé de punir les constructeurs : il a confondu leur langage au point qu'ils ont cessé de se comprendre, ont été contraints d'arrêter la construction et se sont peu à peu dispersés à travers le monde. De là, comme l’expliquaient les anciens, est née la différence des langues.
Dans le concept habituel, le pandémonium babylonien signifie désordre, confusion avec une grande foule de personnes.
Le résultat de cet exemple est présenté sur la Fig. 1.