Solutions de conception standardisées - Manuel de langage et de style de balisage
Solutions de normes Web Le manuel de balisage et de style
Partie 1 : Commencez avec le balisage à partir de la syntaxe de balisage
Titres du chapitre 2
Aperçu :
Non seulement toutes les pages Web ont besoin de titres, mais si elles sont correctement balisées, elles peuvent ajouter à la conception et à la convivialité d'un site Web tout un quelques-uns.
En termes d'apparence, le titre d'une page Web utilise généralement une taille de police plus grande et peut utiliser une couleur ou une police différente de celle du texte principal. La fonction du titre est de « décrire brièvement le sujet abordé ». les chapitres suivants", le W3C le décrit ainsi - Afficher un résumé de chaque paragraphe dans une page Web.
Comment créer un titre de page pour utiliser au mieux les informations que nous souhaitons afficher ? Dans ce chapitre, nous étudiera plusieurs méthodes couramment utilisées pour traiter les titres, essaiera de trouver celle qui nous est la plus utile, puis nous utiliserons quelques trucs et astuces CSS pour décorer la meilleure méthode
La meilleure façon. pour créer un titre de document Quelle est une bonne façon ?
Avant de répondre à cette question, supposons que nous plaçons maintenant le titre en haut du document et examinons trois façons d'obtenir un effet similaire.
Méthode A : Est-ce que cela a du sens ?
Super Cool Page Title
Bien que < La balise ;span> est utilisée dans certains cas. L'occasion est une balise pratique, mais pour le titre de la page, cela ne veut pas dire grand-chose. Le seul avantage de l'utilisation de cette méthode est que nous pouvons spécifier un style CSS pour la classe de titre afin de créer le titre. le texte ressemble à un titre.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
Désormais, tous les titres marqués avec la classe de titre Tout deviendront plus gros, plus épais et bleus, ce qui est génial, non ? Mais que se passe-t-il si quelqu'un accède à cette page en utilisant un navigateur qui ne prend pas en charge CSS
Par exemple, si nous ? mettre le style CSS à l'ancienne dans un fichier de feuille de style externe que le navigateur ne prend pas en charge - ou que se passe-t-il lorsqu'un lecteur d'écran lit la page pour les utilisateurs handicapés. Les utilisateurs accédant à la page par ces moyens ne pourront pas voir (entendre ? ) le titre et le corps du texte. La différence. Les méthodes d'annotation telles que
class="heading" décrivent légèrement la signification du contenu de la balise, mais modifier le style d'affichage par défaut.
Lorsque le moteur de recherche explorera cette page, il ignorera la balise comme si elle n'y était pas, et n'augmentera pas le poids des mots-clés qui peuvent y être inclus. Ceci sera abordé plus loin dans ce chapitre. Mentionnez davantage sur la relation entre les moteurs de recherche et les titres de page
Enfin, puisque la balise conteneur au niveau du bloc, par exemple ou afin de lui faire occuper une ligne propre. Même si vous ajoutez les conteneurs nécessaires, les navigateurs ne prennent pas en charge. CSS affichera toujours le texte dans sa manière originale pour que les utilisateurs puissent le voir. Il n'y a aucune différence entre le titre et le texte.
.
#p#
Méthode B : Combinaison de P et B
Super Cool Page Title
La méthode B utilise la balise paragraphe, qui nous donnera l'affichage des éléments au niveau du bloc souhaité, et la balise mettra le texte en gras (sur la plupart des navigateurs) - mais lorsque nous marquons les titres importants de cette manière , nous devons toujours faire face au même manque de résultats sémantiques.
Contrairement à la méthode A, l'existence de la balise même si elle manque de définition de style CSS, dans la plupart des navigateurs, le texte sera toujours présenté en gras. Cependant, comme pour la balise , les moteurs de recherche n'augmenteront pas le poids des mots clés pour le texte en gras dans le paragraphe
Il est difficile d'ajouter des styles
En utilisant une simple combinaison de styles. Les balises p et b nous empêchent d'ajouter un style différent à ce titre par rapport aux autres paragraphes. Peut-être souhaitons-nous mettre l'accent sur le titre d'une manière unique et ajouter une définition et une structure au contenu de la page - mais utiliser After utilise cette méthode pour le faire apparaître en gras. , nous n'avons aucun moyen de faire ces choses.
Méthode C : Style et substance
Super Cool Page Title
Haha , voici notre bon ami, la balise de titre. Les balises de titre existent depuis le début, mais de nombreux concepteurs de sites Web ne parviennent toujours pas à les utiliser de manière cohérente. Si elles sont utilisées correctement, les balises de titre peuvent fournir un point d'ancrage pour le contenu de la page. structure flexible, indexable et modifiable en termes de style.
Du point de vue des balises elles-mêmes, vous adorerez sa simplicité. Elles ne nécessitent pas de balises de conteneur supplémentaires. On peut même dire que cette méthode peut économiser quelques octets par rapport à. les deux premières méthodes, qui peuvent être ignorées, mais chaque octet de moins est un changement.
à représentent respectivement six couches de titres, du plus important au moins important . Ils sont eux-mêmes des éléments de niveau bloc et peuvent être autonomes sans conteneur supplémentaire. . Une seule ligne, simple et efficace - le meilleur outil pour le travail.
Styles faciles à définir
Parce que la balise La balise
sera utilisée plusieurs fois dans le texte, nous pouvons donc utiliser CSS pour y ajouter différents styles (nous en discuterons en profondeur dans "Plus de techniques" dans ce chapitre).
Plus important encore, même sans en ajoutant des définitions de style, la balise de titre ressemble clairement à un titre ! Le navigateur utilisera des polices de grande taille et des polices grasses pour afficher le contenu de
, même si toutes les définitions de style sont supprimées de la page. Vous pouvez toujours voir la structure. du document, car la balise de titre correcte décrit la signification du contenu, pas la méthode de présentation (Figure 2-1)
Figure 2-1 : Utilisation des balises de titre après s'être détachée des styles Page. content
Les lecteurs d'écran, les PDA, les téléphones mobiles et autres navigateurs visuels et non visuels peuvent également reconnaître et traiter correctement le contenu de la balise de titre, soulignant son importance par rapport aux autres contenus de la page. Utilisez la balise < ;span> qui ne prennent pas en charge (ou ne peuvent pas prendre en charge) CSS ne penseront pas que c'est quelque chose de spécial.
Styles par défaut ennuyeux
Dans l'histoire de la conception Web, les concepteurs évitent simplement d'utiliser les balises de titre car sans style, les balises de titre ressemblent à des monstres. Choisissez l'une des deux, et certaines d'entre elles évitent d'utiliser car la taille de police par défaut est trop grande ou balise de titre.
Cependant, il y a un point important qui mérite d'être souligné. Nous pouvons facilement modifier le style de ces balises de titre selon nos propres préférences en définissant du CSS - par exemple, chose qui occupe la moitié de l'écran. Plus tard, je montrerai comment utiliser simplement les styles CSS pour définir des balises de titre afin de vous aider à surmonter votre peur de .
Convivial pour les moteurs de recherche
C'est le plus grand avantage. Les moteurs de recherche aiment beaucoup les polices en gras dans les balises ou les paragraphes ~ beaucoup de temps, mais cela peut aider les moteurs de recherche à indexer votre page et à permettre aux utilisateurs de trouver plus facilement votre page.
Les robots des moteurs de recherche attachent une grande importance au contenu de la balise de titre, vous voudrez peut-être empiler quelques mots-clés Après avoir traité les balises et <meta>, ils traiteront ensuite la balise de titre dans le contenu de la page. Si vous n'utilisez pas de balises de titre sur votre page, ces mots-clés dans votre titre ne le seront pas. attirer leur attention et sera ignoré par eux.<br>Donc, cela ne prend que peu de temps pour faciliter la tâche des autres. Trouver votre page par contenu semble bien, n'est-ce pas ? 🎜><br>Dans l'exemple ci-dessus, la chose la plus importante sur la page est le titre, car il s'agit du titre de l'ensemble du document. Par conséquent, nous utiliserons la balise de titre la plus importante <h1>. certaines personnes pensent que sauter le calque de titre n'est pas une bonne pratique. Par exemple, supposons que nous ayons la page Web suivante : <strong></strong><h1>Super Cool Page Title</h1>
<br><br>Alors le titre suivant (s'il ne s'agit pas d'un autre <h1>) doit être <h2>, puis utilisez <h3> et ainsi de suite, vous ne pouvez pas ignorer un certain niveau de titres, par exemple, utilisez <h3> directement après <h1>. Je suis d'accord et je pense que la structure et le plan sont les mêmes et que chacun doit être utilisé dans l'ordre, cela vous permet d'ajouter facilement des titres et des styles aux pages existantes. il est moins susceptible d'utiliser tous les niveaux de titre. <span class="code"> Comme mentionné précédemment, les concepteurs peuvent utiliser <h4> qui représente le titre le plus important de la page, simplement parce que sa taille de police par défaut n'est pas aussi effrayante que <h1> .Mais rappelez-vous, écrivez d'abord la structure, puis ajustez le style. Nous pouvons l'ajuster à tout moment selon nos propres préférences. Nous préférons changer la taille de la police de la balise de titre via CSS.</h1>
</h4></span>
#p#<br><br>Résumé<br><br>Voyons brièvement pourquoi il est préférable d'utiliser des balises de titre (<h1> à <h6>) pour marquer les titres dans la page.<strong></strong>Méthode A :<br><br>Les navigateurs visuels afficheront le titre dans le même style que le texte normal lorsque la fonction CSS est désactivée ou ne la prend pas en charge. Les navigateurs non visuels n'ont aucune idée de la relation entre le titre et. le texte. La différence. <strong>Les moteurs de recherche n'accorderont pas une attention particulière aux titres marqués <span></span></strong>Nous pouvons développer des styles uniques, mais lorsque nous ajouterons des titres, nous serons piégés par la classe de titre.
<br><br>Méthode B :<br><br>Le navigateur visuel affichera uniquement le contenu en gras et continuera à utiliser la taille de police par défaut <br>Nous ne pouvons pas ajouter un style unique au titre différent du corps du texte<br>Les moteurs de recherche n'accordent pas non plus une attention particulière à <. ;p> <b>Le contenu du titre créé.
<br><strong>Méthode C : </strong><br> transmet la signification exacte du texte dans la balise de titre <br>Qu'il s'agisse d'un navigateur visuel ou non visuel, il traitera correctement le contenu du titre, peu importe. quel format il lit<br>Les moteurs de recherche feront attention aux mots-clés dans la balise titre.<br><strong>Extension des techniques</strong><br>Ici, nous adopterons la méthode C et l'utiliserons pour expérimenter quelques CSS simples styles. Nous utiliserons pleinement le caractère unique de la balise de titre. Avantages du sexe Nous pouvons utiliser la balise de titre en toute tranquillité d'esprit, car le contenu du titre peut être traité correctement, quels que soient le navigateur et l'appareil sur lesquels il se trouve. et emmenez-le dans la rue (si vous pouvez l'apporter Si vous sortez dans la rue avec une balise html...)<br><strong>Style simple</strong><br>Utilisation du CSS, le plus simple et le plus facile L'effet est de définir différentes polices pour le titre. Nous pouvons écrire des règles CSS, puis les appliquer à toutes les balises <h1> de la page (si vous utilisez une feuille de style externe, vous pouvez appliquer le style à l'ensemble du site Web). . Si vous souhaitez modifier l'ensemble du site Web ultérieurement. Pour chaque couleur, taille ou police, il vous suffit de modifier quelques règles CSS, et les effets des modifications sont visibles immédiatement, n'est-ce pas ? <br> Faisons un titre super Cool pour nous dire :<br><span class="code"><h1>Super Cool Titre de la page</h1></span><br>Utilisons CSS pour changer sa couleur, sa police et sa taille :<br> <span class="code">h1 {<br> font-family : Arial, sans-serif;<br> font-size : 24px;<br> color: #369;<br> }</span><br>Comme nous venons de le faire Ce que j'ai dit est très simple. Tous les <h1> sur la page entière sont définis sur une taille de 24 pixels et une police bleue Arial (ou la police sans empattement par défaut), comme le montre la figure 2-2 : <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif">. <br>Figure 2-2 : Exemple de style de titre<br>Ensuite, nous continuons à ajouter une bordure grise de 1 pixel de large sous le texte du titre (Figure 2-3) :<br><span class="code">h1 {<br> font- family : Arial, sans-serif;<br> taille de la police : 24px;<br> couleur : #369;<br> padding-bottom : 4px;<br> bordure-bottom : 1px solid #999;<br> } </span><br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif"><br>Figure 2-3 : Exemple de style de titre avec bordure inférieure grise <br> Nous avons laissé quelques taches intérieures supplémentaires au bas du texte afin que la bordure inférieure n'ait pas de difficulté à respirer. En raison du titre, les étiquettes sont des éléments de niveau bloc, donc la bordure remplira non seulement le bas du texte, mais continuera à s'étendre vers la droite jusqu'à remplir toute la largeur de la page <br> Il convient également de mentionner que nous. utilisez l'abréviation de border - c'est-à-dire dans une ligne. La déclaration définit également la largeur, le style et la couleur. Vous pouvez essayer d'autres paramètres pour voir quels autres effets existent.<br>
#p#<br><strong>Ajout d'un arrière-plan</strong><br>L'arrière-plan peut ajouter un effet subtil au titre Tant que nous ajoutons la couleur d'arrière-plan et un peu d'espace blanc, nous pouvons en créer un nouveau et frais. sans utiliser d'images. Style de titre. Par exemple : <br><span class="code">h1 {<br> font-family : Arial, sans-serif ;<br> font-size : 24px;<br> color : #fff; padding: 4px;<br> background-color: #696;<br> }<br></span>Nous changeons le texte du titre en blanc, laissons un espace de patch intérieur de 4 pixels autour et modifions l'arrière-plan au vert. Par exemple, comme le montre la figure 2-4, il y aura une large bande verte avec la couleur d'une table de billard qui parcourra toute la page, divisant les deux paragraphes <br><br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif">Figure 2-. 4 : Définition du patch intérieur et de la couleur d'arrière-plan Exemple de titre <br><br>Arrière-plan et bordure<strong></strong> Ajoutez simplement une fine bordure sous le titre et un arrière-plan clair, et vous pouvez créer un effet tridimensionnel sans utiliser une image.<br>Ce CSS est très similaire à celui ci-dessus, en changeant seulement quelques couleurs et en ajoutant une bordure de 2 pixels en bas<br><br>h1 {<span class="code"> font-family : Arial, sans -serif ; <br> taille de la police : 24px;<br> couleur : #666;<br> rembourrage : 4px;<br> couleur de l'arrière-plan : #ddd;<br> bordure inférieure : 2px solid #ccc;<br> } <br></span>En utilisant la même couleur avec une luminosité différente, vous pouvez créer un effet tridimensionnel réaliste comme le montre la figure 2-5 : <br><br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif">Figure 2-5 : Réglage l'arrière-plan et le bord inférieur Le titre <br><br>Fond de tuile<strong></strong>Si vous utilisez des images, vous pouvez être plus créatif. Utilisons Photoshop pour créer une petite image 10X10 avec une bordure noire en haut. Ensuite, voici le dégradé de gris de haut en bas (comme le montre la figure 2-6) : <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"><br>Figure 2-6 Petite image créée avec Photoshop<br>Nous pouvons utiliser CSS pour mettre cette petite image en bas de notre police <h1>:<br><span class="code">h1 {<br> - famille : Arial, sans-serif ;<br> taille de police : 24px ;<br> couleur : #369 ;<br> padding-bottom : 14px ;<br> arrière-plan : url(10x10.gif) répéter-x bottom ; <br> ></span><br>Définissez répéter-x pour que le navigateur dispose uniquement l'image d'arrière-plan dans la direction horizontale (la répétition opposée consiste à l'organiser dans la direction verticale), et nous définissons Afin de placer l'image au bas du titre, et ajoutez quelques patchs intérieurs inférieurs pour ajuster la distance entre l'image et le texte (Figure 2-7) <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"><br>Figure 2-7 : Définir un exemple de titre avec un fond carrelé<br><strong>Icône pour un remplacement facile</strong><br>On peut également utiliser l'attribut cssdebackground pour définir une petite icône placée à gauche du texte pour remplacer la méthode de codage en dur de la balise d'image . Ajoutez une petite icône décorative au titre. Cette méthode permettra de modifier très facilement l'effet d'affichage du site Web à l'avenir - il vous suffit de remplacer une règle CSS pour modifier l'effet d'affichage de l'ensemble du site Web en même temps. .<br>Le code est à peu près le même que l'arrière-plan carrelé ci-dessus : <br><span class="code">h1 {<br> font-family : Arial, sans-serif ;<br> font-size : 24px;<br> color : #369;<br> padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>On laisse un espace supplémentaire sur le côté gauche du texte pour nous empêcher de penser à l'icône souhaitée, puis définissez no-repeat pour spécifier que l'image d'arrière-plan ne sera pas carrelée (comme le montre la figure 2-8). En même temps, nous voulons que l'icône soit positionnée. à 0 pixel à gauche et à l'opposé de la ligne centrale verticale <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"><br>Figure 2-8 : Exemple de titre avec jeu d'icônes<br>
#p#<br><strong>Facile à mettre à jour</strong><br>Imaginons un scénario : dans un site Web contenant 100 pages, nous n'utilisons pas la méthode ci-dessus, mais utilisons la balise <img alt="Langage de balisage - production de pages title_HTML/Xhtml_web" > les icônes à côté de chaque titre sont intégrées au style du site Web. Après quelques semaines, le propriétaire du site Web prévoit de modifier le style du site Web, et la nouvelle taille de l'icône est différente de l'ancienne. Oups ! devoir revenir en arrière et modifier les balises <img alt="Langage de balisage - production de pages title_HTML/Xhtml_web" > sur 100 pages pour mettre à jour le chemin de la nouvelle icône ! Pensez à l'impact que ces événements auront sur le budget du projet et à la pression sur le délai de réalisation ? <br>Si vous intégrez ces icônes décoratives peu importantes dans un fichier CSS, cela ne prend que quelques minutes pour remplacer toutes les icônes de l'ensemble du site en même temps, vous donnant ainsi un tout nouveau look. capable de comprendre progressivement les avantages de séparer le balisage structurel et les effets d'affichage <br><strong>Effet caméléon</strong><br> La technique ci-dessous est quelque peu contradictoire avec ce que je viens de dire, mais je pense que cette technique est utile dans un certain sens. C'est très utile dans certains cas. C'est une technique que j'ai largement utilisée lors de la refactorisation standard du site Web du magazine Fast Company (www.fastcompany.com) en avril 2003. <br> À cette époque, nous avions < dans le site Web. De nombreuses petites icônes 13X13 sont utilisées à côté de la balise ;h3>, comme ceci : <br><span class="code"><h3>
<img src="http://images.fastcompany.com/icon/first_imp.gif" style="max-width:90%" style="max-width:90%" alt="Langage de balisage - production de pages title_HTML/Xhtml_web"> PREMIÈRE IMPRESSION</h3></span><br>Il y a deux raisons pour lesquelles nous avons décidé d'écrire l'icône dans la page Web comme celle-ci. au type de titre Différentes icônes sont utilisées (le club de lecture est un livre, les citations quotidiennes sont des citations, etc.). La deuxième raison est que nous changeons la couleur de l'ensemble du site chaque mois pour correspondre au thème de la couverture du magazine actuel. bien sûr, ce travail de remplacement est très simple grâce à l'utilisation de CSS <br> Afin de faire changer de couleur l'icône avec d'autres éléments de la page (afin que nous n'ayons pas à recréer l'icône pour de nouvelles couleurs à chaque fois. temps), nous n'en utilisons que deux. Un ensemble d'icônes est réalisé en deux couleurs : blanc et transparent (la couleur de fond sera affichée sauf à chaque changement). La figure 2-9 est l'icône placée avant l'introduction sur la page d'accueil : <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg">Figure 2-9 : Icône transparente 13X13 (agrandie) <br> Afin de remplir la partie transparente avec de la couleur, nous avons utilisé un simple attribut d'arrière-plan CSS pour définir la couleur. Nous voulons uniquement que cette couleur. apparaissent derrière le graphique et non derrière le texte du titre. , nous avons utilisé le sélecteur CSS pour utiliser cette règle uniquement pour les images dans la balise <h3>, afin d'obtenir l'effet souhaité : <br><br>h3 img { <span class="code">fond : #696;<br>><br></span>這段css程式碼表示<h3>標籤內的所有<img alt="Langage de balisage - production de pages title_HTML/Xhtml_web" >標籤都把背景設為綠色,背景色會透過透明像素顯示出來,但是白色部分仍然還是白色,如此一來,每個月只需要修改這條css規則,換上不同的顏色,就能瞬間改變網站上每個圖標的色彩了,就像變魔術一樣.<br><strong>對齊<img alt="Langage de balisage - production de pages title_HTML/Xhtml_web" >標籤</strong><br>為了使圖標和文字正確的對齊(我們希望垂直居中),因此我們加上了這條css規則:<br><span class="code">h3 img {<br> background: #696;<br> vertical-align: middle;<br> }</span><br>這條規則會使圖示和<h3>文字內容垂直居中,圖2-20就是設定玩的標題:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"><br>圖2-10:以css為圖示加上背景色的範例<br>這個範例還能說明另一個重要的概念—以css指定背景色彩會出現在任何頁面內指定的圖示或是css圖示後面.<br>舉例來說,我們回頭看看"方便更新的圖示"這個範例,為它加上背景色看看:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px ;<br> color: #fff;<br> padding-left: 30px;<br> background: #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span>gif) no-repeat 0 50%;<br> }<br>gif<img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg">如此以來<br><br>圖2-11 設定了背景圖,背景色的標題範例<strong>當你為了考慮色彩為主的頁面上加小圓角,裝飾圖示時,這個小技巧就十分好用了.這些不重的圖片可以完全放進css檔案裡面,未來打算更新的時候也就可以輕鬆替換.現在多用點心思.就能節省未來許多的工作.</strong><br>總結</h3>
</h3>
</h3>
</h1>
</h1>
</h1></b>
</h6>
</h1>
</h1>
</h3>
</h3>
</h2>
</h1>
</h1>
我希望透過比較集中常用的方法後,你能發覺正確使用標題標籤的好處.不管是視覺,非視覺瀏覽器或者其他設備,都能正確的歷屆標題的含義,並且以適當的方法展現它們,搜索引擎也會為他們建立索引,你也可以輕鬆的以css應用和修改需要顯示的效果.
