<тег style \u003d "Texte-Décoration: Soulignant"\u003e ... - Souligne le texte.

<тег style \u003d "Texte-décoration: surligne"\u003e ... - saute le texte.

<тег style \u003d. "Texte-décoration: ligne à travers">... - Stroule du texte.

Un exemple de changement de styles de police

Caractère gras. Italique.

Gras italique.

H. ₂DONC. ₄ - Formule d'acide sulfurique écrit en italique.

Paragraphe de texte souligné.

Texte ordinaire graisse stressée.

Le résultat dans le navigateur

Maintenant, je voudrais faire une explication sur l'attribut de style. Le style est un attribut de balises absolument ordinaire, mais il fait référence aux tables de style en cascade (CSS). Dans le passé lointain, toutes les fonctions de structuration de la page HTML dans son ensemble et sur la représentation externe de chaque élément séparément (couleur, forme, position sur la page, etc.) ont pris langue HTML. Mais ensuite, les développeurs de la langue ont décidé de distinguer ces fonctions et ont créé CSS. En conséquence, de nombreux tags ou attributs de balises sont devenus obsolètes. Par conséquent, de manière à ne pas marquer votre tête avec des informations inutiles, je les ai également remplacées avec des styles, c'est-à-dire l'attribut de style. Sa syntaxe commune est la suivante:

<тег style \u003d. "Propriété CSS: valeur">...

Utilisation du style, vous ne perdrez rien du tout, mais vous apprendrez à écrire un HTML compétent et en bonus, CSS est un peu lumineux.

Étiqueter ou que faire quand il n'y a pas de balises nécessaires

Eh bien, alors que tout est clair? Eh bien, alors la question. Et que ferez-vous si vous, par exemple, vous devez franchir le paragraphe entier, mais seulement la moitié du texte, et ne pas le faire en gras ou en italique? Eh bien, ne vous inquiétez pas, une balise très confortable et nécessaire aidera ici.

Alors, rencontre - .... Cette étiquette est aussi intégré (en ligne, niveau de chaîne) et peut contenir des balises intégrées, mais l'essentiel n'est pas cela. Par lui-même Sans attributs n'ajoute aucune modification du texte ni des tagites à l'intérieur. Et il a été créé spécifiquement pour les styles, c'est-à-dire pour l'attribut de style. C'est grâce à cet attribut, ou plutôt son valeurs différentes, U. Ces propriétés apparaissent. Alors, et maintenant nous étudions un exemple.

Exemple d'utilisation de la balise de l'espace

Texte normal inchangé.

Un autre texte normal. Souligné. Stressé.

Le résultat dans le navigateur

Texte normal inchangé.

Un autre texte normal. Souligné. Stressé.

Changer le nom (casque) Police

Je ne sais pas quel type de police est? Certainement beaucoup d'entre vous au moins une fois de texte bourré de Microsoft Word. ou alors OpenOffice Writer. et vu un tel menu:

Ce sont les noms des polices disponibles sur votre ordinateur et utilisent non seulement un mot ou un écrivain, mais également de nombreuses autres applications, y compris les navigateurs. Le nom (casque) de la police définit son dessin lui-même distinguant une police de l'autre.

Je recommande vivement d'appliquer des polices exotiques, car elles ne sont peut-être pas sur l'ordinateur d'une personne qui ira sur le site, puis au lieu des lettres, il verra différents caractères incompréhensibles ou carrés. Voici une liste des polices les plus courantes qui ont pratiquement probablement sur un ordinateur de chaque utilisateur:

Par défaut, presque tous les navigateurs utilisent la police "Times New Roman" et pour le changer, il est utilisé tout le même attribut de style qui peut être appliqué à l'intérieur de n'importe quelle tag. L'indication générale de la syntaxe est la suivante:

<тег style \u003d. "Font-famille: nom de police, famille">...

Si le nom de police se compose de plusieurs mots, il doit être fermé dans des guillemets simples. Il est permis de spécifier non un, mais plusieurs noms de polices à travers la virgule, puis s'il n'y a pas de première police sur l'ordinateur - le deuxième, troisième, etc. sera utilisé. Mais à la fin, veillez à mettre le nom de toute la famille de polices, dans ce cas, si le navigateur ne détecte pas une police unique, la police s'applique la plus appropriée pour cette famille.

Pour changer la police sur la page entière - Spécifiez simplement l'attribut Style dans la balise . Et si vous devez modifier la police d'une partie distincte du texte, entrez-la dans la balise Et appliquez l'attribut à cela.

Un exemple de changement du nom des polices

Ceci est une police arial, sinon, alors Verdana, et s'il n'y a pas d'autre de Sans Serif.

C'est la bande dessinée Sans MS ou tout cursive.

C'est à nouveau Arial, Verdana ou tout Sans Serif. Et c'est un courrier ou une monospace.

Le résultat dans le navigateur

Bien, figurait dans l'exemple? Je ferai une explication, dont la compréhension facilitera sérieusement la vie à l'avenir, bien que je pense que beaucoup ont déjà deviné. Donc, si les balises sont investies les unes dans les autres et plusieurs d'entre eux effectuer des modifications dans un type (Par exemple, changez le nom de la police), puis les étiquettes-descendants remplacent les propriétés des balises d'ancêtres. Si des étiquettes imbriquées sont effectuées changements différents, puis ils se complètent, c'est tout.

Nous changeons la taille de la police

Le langage HTML est limité à la totalité des sept tailles de police, qui, vous voyez, très peu pour un bon site. Par conséquent, pour redimensionner les tailles, tout le monde a utilisé depuis longtemps CSS et vous l'apprendrez également.

CSS compte environ dix unités de mesure, mais nous ne considérerons que les trois les plus populaires - ce sont des points (PT), des pixels (px) et des intérêts (%). Donc:

• pt. - Points. Un élément est de 1/72 pouces et un pouce - 2,54cm. Par conséquent, 1pt \u003d 0,03527778cm. Ceci est une valeur absolue, car la taille spécifiée dans les points ne dépend de rien.
• px. - pixels. Mesuré dans les pixels du moniteur d'ordinateur. Le pixel est le point le plus petit sur le moniteur et il s'agit d'une valeur relative, car sa taille dépend de la résolution de l'écran actuelle et de la taille du moniteur lui-même.
• % - Intérêt. Le pourcentage est calculé lorsque la valeur de la balise parlée est prise pour 100% et s'il n'est pas spécifié, la valeur dans le navigateur par défaut. Il s'agit également d'une valeur relative, car la taille de la police mère peut être absolument différente et la taille de la police dans les utilisateurs du navigateur peut changer librement.

Pour spécifier la taille de la police, l'attribut Style est utilisé et vous pouvez le spécifier. à l'intérieur de n'importe quelle tag. La syntaxe générale est:

<тег style \u003d "Taille de la police: Taille">...

Comme dans le cas des noms de polices pour modifier la taille de la police sur la page entière - il suffit de spécifier l'attribut de style dans la balise . Et si vous devez modifier la police du fragment de texte, entrez-le dans la balise Et appliquez l'attribut à cela.

Exemple de changements de la taille de la police

Cette taille de police est de 90% du navigateur par défaut.

Cette taille est de 90% déjà de taille dans l'étiquette du corps.

La taille de la police de titre est de 120% de la taille du corps.

C'est à nouveau 90% de la taille dans le navigateur par défaut. La taille de cette police est de 15 points.

Le résultat dans le navigateur

Cette taille de police est de 90% du navigateur par défaut.

Cette taille est de 90% déjà en taille dans le corps.

La taille de la police de titre est de 120% de la taille du corps.

C'est à nouveau 90% de la taille dans le navigateur par défaut. La taille de cette police est de 15 points.

La taille de la police dépend non seulement de ses directives explicites, mais également de son nom (casque) - différentes polices peuvent avoir une hauteur et une largeur différentes des lettres, ainsi qu'une distance interbouquct.

Un peu plus sur l'attribut de style

Il est temps de vous révéler un autre secret de cet attribut merveilleux, mais encore une fois d'abord vous poser une question. Comment feriez-vous si vous aviez besoin d'installer le nom de la police Arial pour l'ensemble du paragraphe d'une taille de 80%? Et je vais vous dire, vous auriez écrit quelque chose comme ça:

Texte du paragraphe.

Texte du paragraphe.

Ou en général comme ça.

Texte du paragraphe.

J'ai raison? Eh bien, si les deux premières options sont en principe correctes, ce dernier est généralement avec une erreur, car si vous vous en souvenez, il ne peut y avoir deux attributs identiques dans une balise. Et maintenant il est temps de se rappeler que ce style n'est pas simplement un attribut, et l'attribut se réfère à CSS. Chercher:

Texte du paragraphe.

Beaucoup plus facile, oui? Plus important encore, n'oubliez pas de mettre un point avec une virgule entre les styles voisins (;) et prendre toute cette "économie" dans des devis doubles (""), sinon le premier style s'appliquera, et le reste du navigateur ignore. Eh bien, nous mettons toujours des citations doubles avec vous, non?

Donc, cette leçon est sortie très riche, alors faites des devoirs et détendez-vous un peu.

Devoirs.

1. Créez un titre de l'article et des deux partitions, mais les en-têtes de partition soulignent également.
2. Faites de sorte que lorsque vous survolez le curseur de la souris, une inscription appropriée est apparue sur l'en-tête.
3. Écrivez un paragraphe au début de l'article et deux dans chaque section.
4. Installez la police Arial pour la page entière avec une taille de 90% du navigateur par défaut.
5. Définissez la police Times pour toutes les titres et laissez le titre de l'article avec une taille de police de 150% et les sous-titres sont de 120%.
6. Mettez en surbrillance dans le premier paragraphe deux mots avec des polices audacieuses et une italique. Dans la deuxième phrase de plusieurs mots en italique audacieux. Dans la troisième, mettez l'accent sur la phrase allouée en italique. Dans la quatrième - traverser la moitié de la phrase a mis en évidence la graisse.
7. Écrivez dans la formule de l'alcool en dernier paragraphe: C 2 H 5 OH.

Il semblerait pourquoi connaître les balises HTML pour le texte, si maintenant presque dans n'importe quel paquet d'administrateur, il est pratique qui leur expose automatiquement?

Le fait est que la mise en forme du contenu sur le site est très différente de son travail dans des applications de bureau. Il ne suffit pas de simplement donner le texte un look attrayant, car non seulement l'affichage de la page Web dépend de la conception appropriée, mais également de sa promotion dans les moteurs de recherche.

Tags et attributs HTML: bases de la syntaxe

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

En substance, les balises HTML pour le texte sont des commandes qui ajoutent certains blocs à la page ou les modifient. apparence. Le format d'enregistrement correct ressemble à ceci:

Veuillez noter que tous les tags ne sont pas paires. Par example,
(ligne de saut) ou

Pourquoi il est impossible de copier des articles de Word et d'autres programmes à l'éditeur de site

Bien que moderne programmes de bureau Utilisez les mêmes balises HTML pour le texte, dans 99% des cas, le code natif ne convient pas aux pages Web. Même si le document est affiché dans l'application elle-même normalement, lors de l'insertion du formatage peut être estampillé. En outre, en raison du grand nombre de balises et d'attributs inutiles, les moteurs de recherche ne peuvent analyser de manière adéquate le contenu de la page. Ce qui, à son tour, il est difficile de promouvoir votre ressource.

Pour obtenir un code propre et pertinent, vous devez d'abord effacer le texte des balises HTML créées par l'éditeur habituel. Il y a plusieurs façons de le faire:

1. "Exécutez" un article via "Notepad" et seulement ensuite insérer sur le site. L'application efface tout HTML, de sorte qu'après qu'il soit nécessaire de formater le texte à nouveau (à l'aide de l'éditeur ou des outils manuellement).
2. Écrivez et publiez des articles via Lrifwriter. L'éditeur de blog populaire génère immédiatement le code correct. Et dans un onglet séparé, vous pouvez voir comment le texte sur le site sera examiné.
3. Utilisez HTML Cleaner. Ce service en ligne détruit tout le code total, mais seuls fragments supplémentaires. Avec des filtres, vous choisissez les balises doivent être enregistrées. Il existe également un puissant éditeur visuel pour le formatage, ce qui ajoute des commandes optimisées au code.

Paragraphes

Cet élément est présent dans presque tous les articles. Chaque paragraphe devrait être situé à l'intérieur d'un tel conteneur - il simplifie la mise en forme et vous permet de sauvegarder un style unique sur toutes les pages du site. Pour une étiquette de commodité

Toujours écrire s nouvelle chaîne.

Alignement

Séparer HTML-TAG "Alignement du texte" n'a pas été utilisé pendant une longue période. Au lieu de cela, un attribut d'alignement universel a été créé. Pour modifier la position du bloc de texte sur la page, vous devez sélectionner l'une des 3ème valeurs - Centre, à droite ou à gauche. De la même manière, vous pouvez définir l'alignement des autres éléments - par exemple, les titres.

Dans certaines situations, d'autres balises sont utilisées pour l'alignement, par exemple, vous pouvez organiser l'utilisation d'un élément.

Titres et sous-titres

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

HTML utilise six niveaux de sous-titres - de

avant que

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

• ...

  . Article principal, produit dans la boutique en ligne, etc.). Dans le texte, il peut y avoir un seul

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

• ...

  . Les sous-titres du deuxième niveau divisent le texte en blocs sémantiques. Par exemple, si vous faites une note d'ordinateurs portables, vous pouvez faire plusieurs

  Avec les noms de différents modèles.

• ...

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

  Également divisé en petits blocs. Dans notre exemple, cela peut être les critères d'évaluation - "performance", "mémoire", "carte vidéo", etc. Pour chaque modèle.

• ,

  ,

  . En pratique, il est extrêmement rare. Mais le principe général est le même - ils doivent être "imbriqués" dans le bloc avec un sous-titre du plus haut niveau.

Suivez la préservation de la bonne hiérarchie. Retour à notre exemple, cela signifie qu'il est impossible d'entrer immédiatement les noms des modèles comme

ou alors

. Et le plus utilisé pour homogènes sur la signification des blocs des sous-titres de différents niveaux (par exemple, de mettre en évidence l'ordinateur portable qui a pris la dernière place dans le classement en utilisant

).

Mais le schéma qui aidera à comprendre instantanément et à rappeler la structure correcte des titres en HTML.

Listes

Toute énumérations et instructions sont mieux formulées sous la forme de listes à l'aide d'étiquettes HTML spéciales pour le texte ( erreur typique - juste quelques paragraphes

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

La structure de tels blocs est très simple. Tout d'abord, définissez le type de liste - marqué ou numéroté.

Tous les articles sont entre les étiquettes d'ouverture et de fermeture. Chaque élément de liste commence par une nouvelle ligne et a un format. Le nombre d'éléments n'est pas limité.

Choisir et ses attributs

Ce qui peut être changé en utilisant cette police et cette couleur - et sans ajouter de nouvelles classes dans CSS. C'est très pratique lorsque vous devez mettre en évidence une phrase ou un fragment.

Il a plusieurs attributs:

• Visage.. Vous permet de modifier la police du texte. Vous pouvez énumérer plusieurs options via la virgule (Tahoma, Verdana). Si l'utilisateur n'a pas la première police, le système utilise simplement une alternative.
• Taille. Pour augmenter ou diminuer le texte, spécifiez une valeur de 1 à 7 de citations.
• Couleur. Selon la conception, vous pouvez choisir l'une des nuances standard (rouge, vert, bleu) ou entrer le code de n'importe quelle couleur au choix.

N'utilisez pas de paragraphes formatés par , au lieu de sous-titres. Il est préférable de définir les mêmes paramètres de conception sur la bonne balise.

Méthodes de sélection du texte

Le même texte fatigué, même avec une ventilation des paragraphes. Attirer l'attention et réchauffer l'intérêt du lecteur, points clés Il est recommandé de mettre en évidence graphiquement. Voici quelques équipes qui aideront à faire face à cette tâche.

... . Tag HTML extrêmement populaire. Le texte audacieux est immédiatement frappant, et il est donc pratique d'allouer des thèses et des faits importants avec elle.

Beaucoup de tags confus et . Il n'y a pas de différence visuelle, mais ils travaillent de différentes manières. Le premier modifie simplement l'apparence du texte et la seconde fonctionne la fonction "Pointeur" et met en évidence les fragments les plus importants (mots-clés thématiques et expressions de référencement).

... . Les ITALs élégants et stricts sont parfaits pour l'enregistrement des termes scientifiques, des mots étrangers et une variété de citations. Dans des publications sérieuses, le texte incliné attribue également les noms des œuvres d'art.

... . Peut-être que de nombreux différends n'ont causé aucune étiquette HTML. L'accent est rarement utilisé parce que cette méthode Les allocations ont toujours corrigé les hyperliens. Si tu utilises Dans les articles, notez que cela convient aux fragments courts - pas plus de 1 lignes.

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

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

... . Fonctionne sur le même principe que la balise précédente. Le texte, situé à l'intérieur, diminue relativement principal.

^... . Le nom correct de ce format est l'indice supérieur. Surtout, cette balise est destinée aux degrés mathématiques et aux notes de bas de page. Il réduit la taille de la police et affiche le texte sélectionné.

_... . L'indice inférieur se trouve souvent dans diverses formules. Le fragment sélectionné est situé sous le texte principal.

Conteneurs sémantiques

Comme certains blocs se sont rencontrés dans de nombreux textes, ils ont commencé à créer des balises spéciales pour eux. Ceci simplifie la mise en forme, car si chaque type de contenu a son propre ensemble de styles, il suffit de mettre en surbrillance le fragment de texte et de spécifier les informations qu'il contient.

... . Tag pour ajouter des codes informatiques. Indispensable dans les articles de programmation avec des exemples - Les commandes ne sont pas exécutées, mais sont affichées en tant que texte ordinaire.

... . Conçu pour les guillemets de conception - par exemple, des extraits de clé de l'entretien.

. Fait une partie du texte dans un bloc séparé. Par défaut, le fragment sélectionné a une plus grande retraite à gauche, mais dans CSS, vous pouvez également redimensionner, conception de style et couleur de texte.