Grande police html. Mise en forme du texte d'une page html (partie 2). avec les noms des différents modèles

Police sur la page

La balise de taille de police en html est peut-être sub, sup et strong, ce qui redimensionne en quelque sorte les lettres. Mais html offre très peu de possibilités à cet égard. Il y avait bien sûr la balise font, mais aujourd'hui elle est obsolète depuis longtemps. Si vous êtes vraiment curieux de savoir comment modifier la taille de la police de manière plus flexible, vous devez vous tourner vers les possibilités du CSS.

Propriété CSS font-size

En CSS, vous pouvez définir n'importe quelle quantité de texte et cela peut être fait non seulement en pixels, mais également dans d'autres unités de mesure. Le plus souvent, il est défini en pixels, mais cela peut être fait différemment. Par exemple, en pourcentage. La police de l'élément parent est considérée comme 100 %.

Par exemple, si nous définissons la quantité de texte en pourcentage dans un paragraphe et qu'elle se trouve dans la balise body, alors 100% sera égal à la taille spécifiée pour le corps. Par conséquent, si la balise a une police de 12 pixels, alors pour définir la taille du paragraphe à 24 pixels, vous devez écrire comme ceci :

p (taille de la police : 200 %)

C'est si vous utilisez l'intérêt. Une autre valeur relative populaire est em, ou la hauteur de police de l'élément parent. Il est préférable de prescrire des valeurs relatives car lorsque vous modifiez la taille du texte, tout changera proportionnellement et s'affichera bien.

Vous pouvez également ajuster la taille à l'aide des mots-clés plus grands et plus petits, qui définissent la taille du texte pour qu'elle soit respectivement plus grande ou plus petite que celle de l'élément parent.

sélecteur (taille de la police : plus grande)

Le texte dans l'élément avec le sélecteur souhaité deviendra plus grand que celui du parent. Balises HTML les tailles existent, mais elles ne sont pas recommandées. Ce sont des balises grandes et petites. Envelopper le texte dedans vous permet d'augmenter ou de diminuer légèrement la taille des lettres par rapport à l'élément parent. Mais aujourd'hui, il est préférable d'utiliser CSS si vous devez définir une valeur.

La taille des principaux éléments de la page Web

En ce qui concerne le dimensionnement du reste des éléments, tout est identique : il faut pour cela utiliser du css, pas du html. En général, vous pouvez définir des attributs tels que la largeur et la hauteur dans la balise, mais cela n'est pas pratique. Et surtout, il ne répond pas aux normes qui déterminent que apparence et la structure doit être séparée les unes des autres en les plaçant dans des fichiers séparés.

Pour cette raison, il est courant d'utiliser les propriétés css width et height pour déterminer la largeur et la hauteur d'un élément.

img (largeur : 50px ; hauteur : 50px)

Tout d'abord, je veux m'éloigner un peu du sujet et parler de mes exemples de code, par exemple, dans le chapitre précédent, je n'ai représenté le code complet de la page nulle part, mais je l'ai seulement montré comme ceci :

• HTML
• CSS
  • introduction
  • types de documents
  • types de styles
• PHP

Et maintenant revenons à notre chapitre, pour effectuer toutes ces fonctions listées dans le titre, il existe un tag-conteneur.

Revenons maintenant à notre sujet.

Afin de modifier la taille, la police ou la couleur du texte d'une section distincte en HTML, il existe une balise conteneur morceau de texte séparé

Commençons dans l'ordre, et apprenons à changer la couleur du texte d'une section distincte, à cet effet dans la balise POLICE DE CARACTÈRE faut mettre un attribut COULEUR comme ça:

couleur = "rouge"> un morceau de texte séparé Valeurs d'attribut Couleur les mêmes que pour les attributs de texte bgcolor de la balise body, c'est-à-dire que nous pouvons les définir en mots en anglais (Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple , Teal , Fuchsia, Aqua) ou numéros de couleurs RVB (# 000000- #FFFFFF)

visage = "Tahoma"> un morceau de texte séparé Les polices servent à rendre le texte plus extraordinaire, mais il y a un problème, les polices que vous avez (vous pouvez les voir dans C: WINDOWS Fonts) peuvent ne pas apparaître sur vos visiteurs, le deuxième problème avec les polices est que certaines polices ne peuvent être utilisé en cyrillique (en lettres russes) ou vice versa uniquement avec l'alphabet latin (lettres anglaises), il existe bien sûr un troisième type qui s'adapte à la fois à l'alphabet latin et cyrillique. Dans la liste ci-dessous, je vais montrer quelles polices sont standard et sont sur tous les ordinateurs et conviennent également à toutes les lettres :

• Arial
• Sans cosmique
• Courrier
• Garamond
• Helvetica
• Verdana
• Tahoma
• Fois
• Times New Roman

Passons maintenant aux dimensions, vous pouvez modifier la taille du texte en HTML à l'aide de deux balises Police de caractère et/ou BASEFONT.
Commençons avec BASEFONT, cette balise est utilisée pour modifier la couleur de base, la police et la taille du texte, par exemple :
....texte....
Cette balise n'est pas un conteneur, c'est-à-dire n'a pas de backtag. La couleur et la police du texte sont définies comme dans la balise POLICE DE CARACTÈRE, mais pour changer la taille du texte, utilisez l'attribut TAILLE avec une valeur de 1 à 7. Cette balise peut être utilisée plusieurs fois dans le texte : taille = "4"> .... texte ....
taille = "6"> .... texte ....
taille = "3"> .... texte ....
La taille du texte par défaut = "3", cette taille peut être omise. Dans le premier exemple, nous avons augmenté le texte entier d'une unité, dans la deuxième ligne, nous l'avons augmenté à "6" et dans le troisième, nous l'avons ramené au texte par défaut.
Maintenant, je veux vous attrister, cette balise a été introduite dans la version HTML-4.01, et par conséquent, seul Internet Explorer est pris en charge dans le navigateur, les autres navigateurs l'ignorent tout simplement, il est donc préférable de ne pas utiliser cette balise du tout !!!
Et n'utilisez que la balise FONT avec l'attribut SIZE il est pris en charge par presque tous les navigateurs. Attribut TAILLE, prend également des valeurs de 1 à 7, mais ces tailles peuvent être réglées de "-2" à "+4"
texte
texte
texte
texte
texte
texte
texte
La balise FONT, comme BASEFONT, peut contenir plusieurs attributs :
taille = "5" couleur = "rouge" fase = "Tahoma, Times, Verdana"> .... texte ....

Il semblerait, pourquoi connaître les balises HTML pour le texte, si maintenant presque tous les panneaux d'administration en ont un pratique qui les définit automatiquement ?

Le fait est que le formatage du contenu d'un site Web est fondamentalement différent du travail dans des applications bureautiques. Il ne suffit pas de donner au texte un aspect attrayant, car non seulement l'affichage d'une page Web, mais aussi sa promotion dans les moteurs de recherche dépendent d'une conception correcte.

Balises et attributs HTML : principes de base de la syntaxe

Tout texte a un code caché qui "explique" à l'ordinateur quoi et comment afficher à l'écran. Toutes les informations sont enregistrées à l'aide d'un ensemble d'éléments universels.

Fondamentalement, les balises HTML pour le texte sont des commandes qui ajoutent des blocs spécifiques à une page ou modifient leur apparence. Le format d'enregistrement correct ressemble à ceci :

Veuillez noter que toutes les balises ne sont pas appariées. Par exemple,
(saut de ligne) ou

Pourquoi vous ne pouvez pas copier des articles de Word et d'autres programmes dans l'éditeur de site

Bien que les programmes bureautiques modernes utilisent les mêmes balises HTML pour le texte, 99% du temps, le code natif est inutilisable pour les pages Web. Même si le document s'affiche normalement dans l'application elle-même, la mise en forme peut être perdue lorsqu'elle est collée dans le site. De plus, en raison du grand nombre de balises et d'attributs inutiles, les moteurs de recherche ne peuvent pas analyser correctement le contenu de la page. Ce qui, à son tour, rend difficile la promotion de votre ressource.

Pour obtenir un code propre et pertinent, vous devez d'abord effacer le texte des balises HTML générées par un éditeur classique. Il y a plusieurs moyens de le faire:

1. "Exécutez" l'article via "Bloc-notes" et insérez-le ensuite dans le site. L'application efface tout le code HTML, vous devez donc reformater à nouveau le texte (à l'aide des outils de l'éditeur ou manuellement).
2. Rédigez et publiez des articles via LiveWriter. L'éditeur de blog populaire génère immédiatement le code correct. Et dans un onglet séparé, vous pouvez voir à quoi ressemblera le texte sur le site.
3. Utilisez le nettoyeur HTML. Ce service en ligne ne détruit pas l'intégralité du code, mais uniquement des fragments supplémentaires. Les filtres vous permettent de choisir les balises à conserver. Il existe également un puissant éditeur de formatage visuel qui ajoute des commandes déjà optimisées au code.

Paragraphes

Cet élément est présent dans presque tous les articles. Chaque paragraphe doit être situé à l'intérieur d'un tel conteneur - cela simplifie la mise en forme et vous permet de conserver un style cohérent sur toutes les pages du site. Pour plus de commodité, la balise

Ils écrivent toujours sur une nouvelle ligne.

Alignement

La balise HTML distincte « Alignement du texte » est hors d'usage depuis longtemps. Au lieu de cela, l'attribut générique ALIGN a été créé. Pour modifier la position du bloc de texte sur la page, vous devez sélectionner l'une des 3 valeurs - CENTRE, DROITE ou GAUCHE. De même, vous pouvez définir l'alignement d'autres éléments, par exemple les en-têtes.

Dans certaines situations, d'autres balises sont utilisées pour l'alignement, par exemple, vous pouvez positionner à l'aide de l'élément

Titres et sous-titres

Le système de sous-titres vous permet de créer une structure logique pour votre contenu. Lorsque le texte est divisé en blocs sémantiques, il est beaucoup plus facile pour le lecteur de se concentrer et d'assimiler de nouvelles informations. Les moteurs de recherche analysent également les titres pour comprendre sur quelles demandes promouvoir la page. C'est pourquoi les experts SEO recommandent d'y utiliser des clés thématiques.

Il existe six niveaux de sous-titres utilisés en HTML - de

avant

... Il y a une hiérarchie claire dans ce système :

• ...

  ... L'article principal, produit dans la boutique en ligne, etc.). Il ne peut y en avoir qu'un dans le texte

  ... En règle générale, il contient le mot-clé principal.

• ...

  ... Les sous-titres de deuxième niveau divisent le texte en blocs sémantiques. Par exemple, si vous évaluez des ordinateurs portables, vous pouvez effectuer plusieurs

  avec les noms des différents modèles.

• ...

  ... Le troisième niveau est nécessaire si le texte entre deux

  se décompose également en petits blocs. Dans notre exemple, il peut s'agir de critères d'évaluation - "Performance", "Mémoire", "Carte vidéo", etc. pour chaque modèle.

• ,

  ,

  ... En pratique, ils sont extrêmement rares. Mais le principe général est le même : ils doivent être « imbriqués » dans un bloc de sous-titres de niveau supérieur.

Assurez-vous de maintenir la bonne hiérarchie. En revenant à notre exemple, cela signifie que vous ne pouvez pas saisir immédiatement les noms des modèles comme

ou

... Et plus encore, utilisez des sous-titres de différents niveaux pour des blocs homogènes (par exemple, mettez en évidence l'ordinateur portable qui a pris la dernière place dans la notation en utilisant

).

Et voici un diagramme qui vous aidera à comprendre et à mémoriser instantanément la structure de titre correcte en HTML.

Listes

Toutes les énumérations et instructions sont mieux faites sous la forme de listes, en utilisant des balises HTML spéciales pour le texte (une erreur typique est juste quelques paragraphes

qui commencent par un trait d'union ou un chiffre).

La structure de ces blocs est très simple. Tout d'abord, nous définissons le type de la liste - à puces ou numérotée.

Tous les éléments se trouvent entre les balises d'ouverture et de fermeture. Chaque élément de la liste commence sur une nouvelle ligne et a un format. Le nombre d'éléments n'est pas limité.

Le choix et ses attributs

Que peut-on changer en utilisant cette police et sa couleur - et sans ajouter de nouvelles classes au CSS. C'est très pratique lorsque vous n'avez besoin de sélectionner qu'une phrase ou un fragment.

a plusieurs attributs :

• Affronter... Permet de changer la police du texte. Vous pouvez lister plusieurs options séparées par des virgules (Tahoma, Verdana). Si l'utilisateur n'a pas installé la première police, le système utilise simplement l'alternative.
• Taille... Pour augmenter ou diminuer le texte, utilisez les guillemets entre 1 et 7.
• Couleur... Selon le design, vous pouvez choisir l'une des nuances standard (rouge, vert, bleu) ou entrer un code pour la couleur de votre choix.

N'utilisez pas de paragraphes formatés avec , au lieu de sous-titres. Mieux vaut définir les mêmes paramètres de style avec la bonne balise.

Façons de sélectionner du texte

Un texte monotone est fastidieux, même avec des paragraphes. Il est recommandé de mettre en évidence graphiquement les points clés pour attirer l'attention et aiguiser l'intérêt du lecteur. Voici quelques commandes pour vous aider dans cette tâche.

... ... Une balise HTML extrêmement populaire. Le texte en gras attire immédiatement l'attention et il est donc pratique de l'utiliser pour mettre en évidence des thèses et des faits importants.

Beaucoup de balises confuses et ... Il n'y a pas de différence visuelle, mais ils fonctionnent de différentes manières. Le premier modifie simplement l'apparence du texte, tandis que le second fait office d'"index" et met en évidence les fragments les plus importants (thématiques mots clés et phrases pour le référencement).

... ... Les italiques élégantes et strictes sont idéales pour la mise en forme de termes scientifiques, de mots étrangers et d'une variété de citations. Dans les publications sérieuses, les titres des œuvres d'art sont également marqués d'un texte oblique.

... ... Peut-être qu'aucune balise HTML n'a causé autant de controverse. Le texte souligné est rarement utilisé car Par ici la mise en évidence a toujours été associée aux hyperliens. Si tu utilises dans les articles, veuillez noter que cela ne convient que pour les fragments courts - pas plus d'une ligne.

... ... Une balise intéressante qui permet de rendre une partie très pertinente dans une publicité - par exemple, pour souligner le contraste entre les anciens et les nouveaux prix.

... ... Le moyen le plus simple d'augmenter la taille de la police sans aucun paramètre supplémentaire.

... ... Fonctionne de la même manière que la balise précédente. Le texte situé à l'intérieur est réduit par rapport au texte principal.

^... ... Le nom correct pour ce format est exposant. Fondamentalement, cette balise est destinée aux degrés de mathématiques et aux notes de bas de page. Il diminue la taille de la police et déplace le texte sélectionné vers le haut.

_... ... L'indice se trouve souvent dans diverses formules. La sélection est positionnée sous le texte principal.

Conteneurs de sens

Comme certains blocs ont été trouvés dans de nombreux textes, ils ont commencé à créer des balises spéciales pour eux. Cela simplifie la mise en forme, car si chaque type de contenu a son propre jeu de styles, il suffit de sélectionner un morceau de texte et d'indiquer les informations qu'il contient.

... ... Balise pour l'ajout de codes informatiques. Indispensable dans la programmation d'articles avec des exemples - les commandes ne sont pas exécutées, mais affichées en texte brut.

... ... Conçu pour les citations - par exemple, des extraits clés d'entretiens.

... Fait ressortir une partie du texte dans un bloc séparé. Par défaut, la sélection a une marge plus grande sur la gauche, mais en CSS, vous pouvez également modifier la taille, le style et la couleur du texte.