HTML ignore simplement les espaces. Lors de l'écriture de code, appuyer sur la barre d'espace, Entrée ou Tab est ignoré. Les hits HTML sont interprétés comme des caractères d'espacement, en mots simples- les formateurs de code (caractères, mots, texte), afin qu'ils ne soient pas affichés. Par conséquent, si vous avez besoin d'afficher des espaces, vous devrez les implémenter dans le langage de code. Lisez cet article pour comprendre comment dans certaines situations.

Il existe plusieurs méthodes pour ajouter des espaces simples au texte. Ils ne sont pas compliqués du tout et obligeront l'utilisateur à n'entrer que quelques caractères dans l'espace prévu à cet effet. Voyons en détail chacune de ces méthodes.

Première méthode. Insérer le code HTML - Insérez-le à l'endroit où nous voulons obtenir un espace. "nbsp" est l'abréviation d'une certaine expression anglaise - espace insécable, ce qui signifie Espace non-cassant.

Cette méthode doit être utilisée dans les cas où il est nécessaire d'insérer un ou deux espaces entre des mots ou des caractères dans le texte pour des raisons d'esthétique et de style.

Par exemple, vous êtes confronté à la tâche de faire une pause entre les mots, disons ceci : " Bonjour. Comment allez-vous?". Vous devrez entrer un code pour chaque espace, comme ceci : " Bonjour. Comment allez-vous?"

Deuxième méthode. Insertion d'un paragraphe en HTML.

Vous devez coller l'extrait de code suivant

avant le texte qui doit être présenté sous forme de paragraphe.

Besoin de coller du code

au début de chaque paragraphe.

À la fin de chaque paragraphe, vous devez insérer une balise de fermeture qui ressemble à ceci - . Étant donné que la balise de paragraphe est une balise de paire, elle ne peut pas être fermée.

Troisième méthode. Ajout d'onglets à l'aide du module HTML.

Il est nécessaire d'utiliser 4 voire 5 espaces insécables pour ajouter une tabulation. Dans ce cas, le code sera le suivant : .

Il n'y a pas d'élément séparé pour les onglets en HTML. Si vous souhaitez utiliser la tabulation partout pour faciliter la lecture des informations, cela vaut vraiment la peine de regarder de plus près le code CSS.

Méthode 4. Ajout de sauts de ligne au HTML.

Où vous voulez créer un saut de ligne est d'insérer le code
.

Si vous mettez plusieurs de ces balises dans le texte à la fois -

Cela peut déplacer le texte d'une ligne vers le bas. Une balise dans ce scénario décale la ligne suivante et la seconde la saute.

Cinquième méthode. Affichage du texte tel qu'il est écrit à l'aide de HTML

L'insertion d'une balise devant le texte l'affichera tel qu'il est imprimé soit en format donné. Ce texte contiendra tous les espaces qui ne sont pas affichés dans le code habituel. Au format imprimé, un espace a exactement le même aspect que si vous le mettiez au format standard .

Dans cet article, nous avons analysé comment insérer un espace en HTML à l'aide d'exemples. Nous espérons que vous n'aurez pas de difficultés avec cela à l'avenir. Bonne chance!

Ajout correct d'un espace insécable en HTML. Mise en page valide.

Si vous avez essayé de composer des sites Web, vous savez probablement que lorsque vous ajoutez quelques espaces dans le texte à partir du clavier, ils ne sont pas enregistrés. Les navigateurs les traitent comme un espace unique. Parfois, cela entraîne des problèmes de mise en page. Nous allons maintenant vous montrer comment ajouter plusieurs espaces à la suite.

Utiliser des caractères spéciaux

Dans le langage de balisage hypertexte, un caractère spécial est utilisé qui est interprété par les navigateurs comme un espace. Il est la:

Vous devez le saisir exactement sous la forme dans laquelle il est présenté ci-dessus. Si vous devez insérer plusieurs espaces à la suite, insérez plusieurs de ces caractères.

À quoi ressemblerait notre morceau de code si nous voulions ajouter trois espaces à la suite.

Tester la section de code

Si nous devions ouvrir une telle page dans un navigateur, voici ce que nous obtiendrions :

Tester la section de code

pré-balise

Le texte ne peut pas toujours être formaté correctement à l'aide de balises de balisage standard. En même temps, en le tapant sur le clavier, vous pouvez obtenir le résultat souhaité. Mais à la fin, lors de la visualisation de la page dans un navigateur, tout le formatage manuel tombera et vous obtiendrez du texte brut. Le même résultat sera si vous ajoutez manuellement plusieurs espaces insécables à la suite, simplement en cliquant sur la touche du même nom.

Comment être dans une telle situation ?

Voici un exemple de texte avec un espace long. Nous l'avons obtenu en enfermant le texte dans une balise PRE.

Comme vous pouvez le constater, plusieurs sauts de ligne consécutifs sont également enregistrés. C'est à cela que sert cette balise. Il laisse le formatage manuel pour le texte qui y est inclus.

Vidéo pour l'article :

Conclusion

Utilisez ces méthodes uniquement pour insérer une mise en forme de texte spéciale. Vous ne devez pas utiliser ces méthodes pour obtenir l'emplacement des éléments sur la page. Par exemple, ajoutez plusieurs espaces insécables pour que l'élément suivant se trouve à droite de la page. Pour ce faire, utilisez des feuilles de style.

Bonjour, chers lecteurs du site blog. Un peu plus tôt, nous avons déjà réussi à parler de la façon dont nous avons également appris le design. Nous avons aujourd'hui tour à tour la notion de lacune en HTML, ainsi que la mise en forme du code qui lui est associé lors de son écriture (pour la commodité de sa lecture et de sa perception ultérieures).

Eh bien, du fait que nous aborderons le sujet de l'espace insécable et de la césure douce, nous devrons concentrer notre attention sur les soi-disant caractères spéciaux ou mnémoniques utilisés dans le langage Html, qui vous permettront d'ajouter beaucoup de caractères supplémentaires au code du document Web, comme celui déjà mentionné ci-dessus . Mais avant tout.

Espaces et caractères blancs en langage HTML

Avant de passer à la question de la mise en forme du texte à l'aide de balises spécialement conçues pour cela (paragraphe, titres, etc.), je veux m'attarder sur le moment où les espaces, les sauts de ligne (Entrée) et la tabulation sont interprétés dans le langage HTML , comment la ventilation est effectuée texte dans la fenêtre du navigateur lors du redimensionnement.

Certes, pour ce type de mise en forme visuelle (qui ne sera pas visible sur la page Web), le plus souvent, ils n'utilisent pas les espaces eux-mêmes, mais les caractères de tabulation et de saut de ligne. Il existe une telle règle - lorsque vous commencez à écrire un imbriqué balise html, Ce retrait avec une tabulation(touche Tab sur le clavier), et lorsque vous fermez cette balise, supprimez le retrait (combinaison de touches Maj + Tab sur le clavier).

Vous devez le faire de manière à ce que les balises d'ouverture et de fermeture soient au même niveau vertical (le même nombre d'onglets à partir du bord droit de la page de votre éditeur Html, par exemple, Notepad ++, que j'ai écrit à propos de). De plus, je vous conseille de faire plusieurs sauts de ligne immédiatement après avoir écrit l'élément d'ouverture et d'écrire immédiatement l'élément de fermeture au même niveau (nombre de tabulations), pour ne pas oublier de le faire plus tard.

Ceux. les éléments d'ouverture et de fermeture doivent être au même niveau verticalement, et nous décalons les balises internes d'un caractère de tabulation et plaçons à nouveau les éléments de fermeture et d'ouverture au même niveau.

Pour toile simple documents, cela peut sembler exagéré, mais lors de la création de documents plus ou moins complexes, ils le code sera beaucoup plus clair et lisible en raison de l'abondance d'espaces, et il sera également beaucoup plus facile d'y remarquer des erreurs en raison de la disposition symétrique des balises.

Caractères spéciaux ou mnémoniques dans le code HTML

Alors, parlons maintenant du soi-disant caractères spéciaux, dont j'ai annoncé la convivialité au début de cet article. Les caractères spéciaux sont aussi parfois appelés mnémoniques ou substitutions. Ils sont destinés à résoudre un problème posé depuis longtemps dans le langage de balisage hypertexte, lié aux encodages utilisés.

Lorsque vous tapez du texte à partir du clavier, les caractères de votre langue sont encodés selon un algorithme prédéterminé, puis ils s'affichent sur le site en utilisant les polices que vous utilisez (où les trouver et comment les installer pour le site) grâce au décodage.

Il existe de nombreux encodages, mais pour le langage Html, une version étendue des encodages a été adoptée par défaut.

Dans cet encodage de texte, il n'a été possible d'écrire que 256 caractères - 128 en ASCII et 128 autres pour les lettres de la langue russe. En conséquence, il y avait un problème avec l'utilisation sur les sites de caractères qui ne sont pas inclus dans l'ASCII et qui ne sont pas des caractères russes faisant partie de l'encodage Windows 1251 (CP1251). Eh bien, il vous est venu à l'esprit d'utiliser un tilde ou une apostrophe, et les possibilités d'une telle utilisation initiale Langage HTML l'encodage n'est pas inclus.

C'est pour de tels cas que des substitutions, ou, en d'autres termes, des mnémoniques, ont été inventées. Initialement les caractères spéciaux avaient vue numérique enregistrements, mais pour les plus courants d'entre eux, leurs homologues alphabétiques ont été ajoutés pour faciliter leur mémorisation.

De manière générale, un mnémonique est un caractère qui commence par une esperluette "&" et se termine par un point-virgule ";". C'est pour cette raison que le navigateur, lors de l'analyse du code Html, en extrait des caractères spéciaux. L'esperluette dans le code de substitution numérique doit être immédiatement suivie du signe dièse "#", qui est parfois appelé un dièse. Et seulement ensuite suit le code numérique du caractère souhaité dans le codage Unicode.

Plus de 60 000 caractères peuvent être écrits en Unicode - l'essentiel est que le symbole mnémonique dont vous avez besoin soit pris en charge par la police utilisée sur votre site. Certaines polices prennent en charge presque tous les caractères Unicode, et il existe des options avec seulement un certain jeu de caractères.

La liste complète des caractères spéciaux sera tout simplement énorme, mais mnémoniques les plus utilisés vous pouvez emprunter, par exemple, à ce tableau :

Il y a un sujet assez intéressant façon d'obtenir Code HTML mnémonique pour le personnage dont vous avez besoin. Pour cela, il suffira d'ouvrir l'éditeur Microsoft Word, créez un nouveau document et sélectionnez "Insérer" - "Symbole" dans le menu du haut (j'utilise la version 2003, donc je ne sais pas comment faire une opération similaire dans les versions ultérieures).

Dans la fenêtre qui s'ouvre, vous devez sélectionner une police, par exemple Times New Roman (ou toute autre qui sera certainement présente sur la plupart des ordinateurs des visiteurs de votre site - Courier ou Arial, par exemple).

Ajouter à partir de la liste qui s'ouvre à votre document Word tous les caractères spéciaux dont vous avez besoin et enregistrez ce document Word en tant que page Web (sélectionné dans la liste déroulante ".html" lors de l'enregistrement). Eh bien, il vous suffit d'ouvrir cette page Web dans n'importe quel éditeur Html (le même Bloc-notes ++ convient) et vous verrez tous les codes numériques des mnémoniques dont vous avez besoin :

La méthode est un peu compliquée, mais si vous avez envie d'utiliser un symbole spécial rare sur la page de votre site, ce sera plus facile que de chercher des tableaux sur Internet comme celui ci-dessus. Vous devrez insérer le code de caractère spécial résultant au bon endroit et au lieu de cela sur la page Web, le navigateur affichera le caractère dont vous avez besoin (par exemple, un espace insécable).

Espace insécable et césure douce dans les exemples

Comme je l'ai mentionné plus haut et comme vous pouvez le voir dans le tableau des caractères spéciaux donné juste au-dessus, certains mnémoniques en Html ont reçu, en plus du numérique, également une désignation symbolique pour leur mémorisation plus facile. Ceux. au lieu du signe dièse "#" (dièse) dans les variantes de caractères, des mots sont utilisés. Par exemple, le même espace insécable peut être écrit comme (mnémonique numérique) ou comme (caractère).

Lorsque vous écrivez des articles, si vous devez insérer une esperluette (&) ou un crochet ouvert (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Autrement dit, si vous écrivez un article dans lequel vous devrez insérer dans le texte, par exemple, la balise d'affichage< body>ou bien vous avez juste besoin d'insérer un signe moins que (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Par conséquent, vous devrez insérer la construction suivante pour résoudre un tel problème :

Il en va de même pour l'affichage du code des mnémoniques eux-mêmes, car ils commencent par une esperluette. Vous devrez insérer un code dans le texte en remplaçant le signe esperluette par sa substitution (caractère spécial):

Cela devra être fait pour arriver sur la page<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

En outre, vous utiliserez très probablement un espace insécable, qui ressemblera à un espace normal sur une page Web, mais le navigateur ne le traitera pas du tout comme un caractère d'espace et ne sera pas transféré dessus(par exemple, cela serait approprié pour des phrases telles que 1400 Go, etc., pour lesquelles il ne serait pas souhaitable de porter un trait d'union sur différentes lignes) :

1400 Go.

Parfois, la situation inverse peut se produire, lorsqu'il y a des mots très longs dans le texte et que vous voulez vous assurer que, si nécessaire, le navigateur pourrait casser ces mots avec un transfert. À ces fins, un symbole spécial "transfert en douceur" est fourni -

Long, long mot;

Lorsqu'il devient nécessaire de passer à une autre ligne, le navigateur mettra un trait d'union à la place du mnémonique d'habillage souple et enverra le reste du mot à la ligne suivante. S'il y a suffisamment d'espace pour contenir tout ce mot sur une seule ligne, le navigateur ne tracera aucune nouvelle ligne. Voilà, c'est simple.

Bonne chance à toi! A bientôt sur le site des pages du blog

Vous pouvez regarder plus de vidéos en allant sur

Vous pourriez être intéressé

MailTo - qu'est-ce que c'est et comment créer un lien e-mail en HTML
Balises et attributs des titres H1-H6, ligne horizontale Hr, saut de ligne Br et paragraphe P selon la norme Html 4.01
Comment insérer un lien et une image (photo) dans les balises HTML - IMG et A

Ce que c'est?

En html, il existe de nombreuses balises, attributs, valeurs différents qui sont utilisés dans diverses situations. Certains ne sont utilisés que pour l'usage auquel ils sont destinés, d'autres ont des paramètres flexibles qui leur permettent d'être utilisés dans une variété de variantes. En plus des balises régulières, html a des caractères mnémoniques spéciaux. Avec leur aide, vous pouvez afficher diverses icônes, icônes, etc. sur l'écran des utilisateurs. L'un des caractères spéciaux les plus utiles est l'espace insécable. Cet élément sera abordé dans cet article.

But

En html, un espace insécable peut être utilisé dans une grande variété de situations. L'utilisation la plus courante de cet élément est d'augmenter naturellement l'espacement entre les caractères ou les mots. Certains peuvent déjà être indignés et poser une question logique : "Pourquoi ne pas simplement utiliser un espace régulier avec la touche espace du clavier ?". Le fait est que le navigateur ignorera tous les espaces supplémentaires entre les mots ou les caractères, à l'exception du premier attribué. Quel que soit leur nombre dans le code source de la page, un seul sera toujours affiché. Ainsi, si vous souhaitez mettre deux ou plusieurs espaces à la suite, vous devrez utiliser un caractère spécial. De plus, il existe d'autres cas où cet élément est utilisé, par exemple :

• Ligne rouge. Bien que cette façon d'afficher un nouveau paragraphe soit rarement utilisée sur Internet, il est tout de même utile de savoir que si vous mettez plusieurs de ces espaces au début, vous obtenez un effet d'indentation.
• Tableau. Parfois, lors de la construction d'un tableau, des cellules vides apparaissent et doivent être remplies avec quelque chose, sinon toute la structure est déformée à cause de cela. Alternativement, vous pouvez mettre un espace insécable. Ensuite, les utilisateurs verront une cellule vide et le tableau restera tel qu'il était.
• Dessins pour attirer l'attention. À l'aide de cet élément, vous pouvez créer une image à partir de symboles. Ou parfois, un tel espace est utilisé pour concentrer l'attention des utilisateurs.

Application

Un espace html insécable est attribué en écrivant des caractères spéciaux, à savoir "". Autrement dit, en insérant cette entrée dans le code source, vous obtiendrez un intervalle supplémentaire. Sa longueur sera égale à l'espace habituel. L'entrée "" signifie "NO-BREAK SPACE", qui se traduit par "espace insécable". Vous pouvez utiliser la notation alternative " ", qui donnera le même effet.

Particularités

Les caractéristiques distinctives de cet élément incluent le fait que si vous mettez un tel espace entre deux mots (caractères), ils resteront dans tous les cas sur la même ligne. Dans certains cas, une barre de défilement horizontale apparaît (lorsque les éléments sortent de l'écran). Parfois, les développeurs utilisent cet élément uniquement à cause de cette fonctionnalité. Par exemple, lorsqu'il est vraiment important que le texte soit sur une seule ligne.

Conclusion

Dans la plupart des cas, un espace insécable sera inutile. Puisqu'il est rarement nécessaire de définir un intervalle long. Mais, d'une manière ou d'une autre, il est nécessaire de connaître cet élément. Après tout, un jour, cela sera utile à tout développeur de fichiers html.

Tous ceux qui ont essayé créer des sites Web en HTML confronté à un tel problème. Presque toutes Balises HTML découpez des espaces supplémentaires. Et cette fois, je vais vous donner un exemple de ce "coupure", et vous dire également comment vous assurer que les espaces ne sont pas coupés.

Commençons par écrire un simple Code HTML:

Quelques textes Suite...

Si vous regardez le résultat, vous verrez que tous nos espaces ont été découpés et qu'il n'en reste qu'un. Et il en va de même pour presque toutes les balises.

Il y a trois options afficher des espaces supplémentaires en HTML. La première façon est d'utiliser la balise<pré>:

Quelques textes Suite...

Du coup, vous verrez que des lacunes subsistent, et c'est exactement ce que nous voulions.

Mais il existe un autre moyen que j'utilise régulièrement - l'entité "". Cette entité remplace simplement le caractère espace :

Quelques textes Suite...

En conséquence, vous verrez également toute une série d'espaces. Pour moi, cette méthode est meilleure car vous n'avez pas besoin d'utiliser des balises supplémentaires. Mais c'est une question de goût. Au besoin espace supplémentaire en html, insérez simplement "" et profitez du résultat.

Et enfin, la dernière façon est Utilisation des CSS. Pour ce faire, il vous suffit d'ajouter ce style :

P(
espace blanc : pré ;
}

Cette méthode est la plus rapide et la plus simple, cependant, je ne l'utilise pas, car dans ma pratique, il y a peu de cas dans lesquels je dois ajouter de nombreux espaces consécutifs. Et s'ils se produisent, j'utilise l'entité " " plusieurs fois. En outre, propriété d'espace blanc pas pris en charge par tous les navigateurs (en particulier, IE6 Et IE7 ne prennent pas en charge), ce qui limite déjà la portée de cette méthode.

En général, je résume :

1) Si une partie du texte contient beaucoup d'espaces à différents endroits, utilisez la balise<pré>.

2) Si vous avez un seul moment quelque part où vous avez besoin de plusieurs espaces à la suite, utilisez l'entité "  ";

3) Si votre page entière est tissée à partir d'un tas d'espaces consécutifs (bien que cela soit extrêmement rare), utilisez la propriété espace blanc avec un sens pré.

Si vous souhaitez en savoir plus sur HTML, puis consultez mon cours gratuit avec un exemple de création de site Web sur HTML: