Langage de balisage - Production de pages Web Element_HTML/Xhtml_Web

Dans l'introduction et les chapitres précédents, le concept de balises sémantiques a été légèrement évoqué. Utiliser des balises pour identifier la signification des fichiers ne consiste pas seulement à définir l'effet d'affichage avec des balises. C'est une bonne idée de concevoir une page Web qui. utilise complètement des balises sémantiques..Cependant, je pense que cet objectif est trop idéaliste. Bien sûr, ne pas atteindre complètement l'objectif ne signifie pas que le travail acharné ne vaut rien.
Dans des situations réelles, il est souvent nécessaire d'ajouter des balises non sémantiques afin d'atteindre des objectifs de conception spécifiques, principalement parce que les navigateurs actuellement connus ne peuvent pas prendre en charge à 100 % la norme. Certaines règles CSS ne peuvent pas être affichées correctement dans certains navigateurs. , ce qui nécessite malheureusement l'utilisation de balises supplémentaires afin d'atteindre certains objectifs de conception.
Il y a un concept important qui doit être gardé à l'esprit : c'est-à-dire qu'essayer d'écrire autant que possible des structures sémantiques apportera des avantages pratiques. En même temps, même si le soutien à la norme n'est pas à 100 %, il en a. Passé le point critique, soyons maintenant capables d'écrire des pages Web en utilisant des méthodes conformes aux normes du Web. Parfois, vous devez faire des sacrifices, mais plus vous insistez pour écrire des balises conformes aux normes, plus votre travail futur sera facile. Effet d'affichage VS étiquette de structure
Ce chapitre abordera les différences entre les effets d'affichage et les balises structurelles, plus spécifiquement, les différences entre l'utilisation de pour remplacer et l'utilisation de pour remplacer . Plus tard, nous discuterons également de plusieurs autres éléments de phrase et de leur importance dans la syntaxe de balise structurée et conforme aux normes.
Vous avez peut-être entendu certaines personnes recommander de remplacer par lorsqu'un texte en gras est nécessaire, mais elles ne vous ont pas expliqué davantage pourquoi un tel remplacement est nécessaire sans savoir "pourquoi". Il est difficile de s'attendre à ce que d'autres concepteurs de sites Web modifient leur utilisation des balises simplement parce qu'ils ont entendu dire qu'ils devaient le faire. Pourquoi et sont-ils meilleurs que
Quels sont les avantages de supprimer les balises et et de les remplacer par et ? effets. , tous les exemples de ce livre s'efforcent également de suivre ce concept. Voyez ce que disent les experts
Tout d'abord, examinons comment le W3C décrit les éléments de phrase et
dans la spécification des éléments de phrase HTML4.01. Les éléments de phrase courants peuvent ajouter des informations structurelles dans des fragments de texte. La signification est la suivante :

représente une emphase plus forte
Nous discutons donc ici de deux niveaux d'accentuation différents. Par exemple, un mot ou une phrase doit être prononcé plus fort, avec un ton plus aigu, plus rapidement, ou... eh bien, c'est tout. Plus d'accent que le contenu d'un texte ordinaire.
Le W3C a ensuite décrit ce qui suit :
L'effet d'affichage des éléments de phrase varie selon les navigateurs. De manière générale, les navigateurs visuels doivent afficher le contenu du texte en italique et le contenu du texte comme le volume, la hauteur, la vitesse, etc. pour correspondre au contenu.
Aha ! Cette dernière phrase est particulièrement intéressante. Les logiciels de synthèse vocale (ce que nous appelions autrefois les lecteurs d'écran) géreront correctement le texte qui doit être souligné, ce qui est effectivement une bonne chose.
En revanche, ou ne sont que des balises d'effet d'affichage. Si notre objectif est de séparer la structure de l'effet d'affichage, il est correct d'utiliser Si vous souhaitez simplement afficher du texte en gras ou en italique, utilisez simplement CSS. D'autres exemples seront abordés plus loin dans ce chapitre.
Regardons deux exemples de logos pour nous aider à comprendre leurs différences Méthode A
votre numéro de commande pour référence future est : 6474-82071. Méthode B
votre numéro de commande pour référence future. est : 6474-82071 Épais et beau.
Cette situation est un parfait exemple d'utilisation de au lieu de car nous avons l'intention de rendre le texte spécifique dans la phrase plus important. En plus de mettre le numéro de commande en gras, nous souhaitons également que les lecteurs d'écran le fassent également. Changez la façon dont ils expriment le contenu : augmentez le volume, changez la hauteur ou la vitesse. La méthode B atteint les deux objectifs en même temps. Et alors ?
De même, remplacer par peut exprimer l'importance en même temps, plutôt que d'afficher simplement le contenu du texte en italique. Jetons un coup d'œil à ces deux exemples : Méthode A
It. il ne m'a fallu rien, maistrois matin. Méthode B
Il ne m'a fallu pas une, maistrois mon allée ce matin, c'est l'accent.
Dans l'exemple précédent (ce qui était vrai au moment de la rédaction), mon intention était de faire apparaître le mot « trois » avec emphase, comme si je prononçais le mot à voix haute. Visuellement, la méthode B fonctionne mieux dans la plupart des navigateurs. Il sera affiché en italique dans le navigateur et le lecteur d'écran ajustera le timbre, la vitesse ou le volume en conséquence. Juste du gras ou de l'italique conviendra
Il convient de noter que dans de nombreux cas, seuls les effets de texte en gras et en italique doivent être affichés visuellement. En d'autres termes, supposons que vous ayez une liste de liens dans votre barre latérale et que vous souhaitiez que tous les liens soient affichés avec le même effet : C'est gras (Figure 6-1)

Nous n'avons pas l'intention de mettre l'accent sur le contenu des liens au-delà des fonctionnalités visuelles. C'est un bon endroit pour utiliser CSS pour modifier l'apparence des liens afin qu'ils ne soient pas mis en évidence par les lecteurs d'écran et autres navigateurs non visuels.
Par exemple, voulez-vous vraiment que les liens en gras soient lus plus rapidement, plus fort et avec un ton plus élevé. Probablement pas, le gras ici est juste pour l'effet d'affichage, le poids de la police est équivalent au gras ?
Afin d'obtenir l'effet d'affichage de la figure 6-1, supposons que la barre de liens est placée dans le

dont l'identifiant est défini sur sidebar, afin que nous puissions utiliser CSS pour spécifier que les liens à l'intérieur la #sidebar doit être affichée en gras :
#sidebar a{
font-weight:bold
}
C'est si simple que je me sens un peu ridicule rien que d'y penser, mais c'est un excellent moyen de séparer la structure de la présentation. C'est audacieux !
De même, des idées similaires peuvent être appliquées lorsque vous pensez au texte en italique. Lorsque vous ne souhaitez pas mettre l'accent sur le contenu et souhaitez simplement mettre le texte en italique, vous pouvez à nouveau utiliser l'attribut font-style pour gérer ces situations via CSS.
Utilisons la même #sidebar comme exemple. Par exemple, si vous souhaitez que tous les liens de la #sidebar soient en italique, vous pouvez écrire :
#sidebar a{.
style de police:italique
}
Un autre concept extrêmement simple, mais dans le domaine de la syntaxe de balisage structuré, je pense qu'il est très important de discuter de ces situations - utiliser CSS pour gérer la vidéosurveillance au lieu d'afficher des balises d'effet. Parfois, la solution la plus simple est aussi la plus facilement ignorée. . Partager les caractères gras et italiques
Lorsque je prévois d'afficher du contenu textuel en gras et en italique en même temps, je pense que je dois d'abord réfléchir à une question : quel degré d'accent avez-vous l'intention de transmettre ? En fonction de la réponse à cette question, je choisirai ? la balise appropriée : (accentuation) ou (accentuation plus forte), puis marquez le texte avec l'étiquette choisie.
Par exemple, dans l'exemple suivant, j'avais initialement prévu de faire apparaître « fun » en gras et en italique en même temps, mais j'ai finalement choisi d'utiliser pour souligner le mot
Building. les sites avec des standards Web peuvent être fun !
La plupart des navigateurs n'afficheront ce mot qu'en italique. Pour utiliser à la fois le gras et l'italique, nous avons quelques options. Oh, j'espère vraiment que vous êtes d'accord avec la phrase ci-dessus.
Une solution consiste à envelopper un ordinaire en dehors de "fun" et à spécifier une règle CSS pour afficher tous les dans
Créer des sites avec des standards Web peut être fun
Et le CSS ressemble à ceci :
em span{
font-weight:bold;
}
La partie sémantique évidente n'est pas bonne car nous avons ajouté des balises supplémentaires, mais cette méthode est toujours utile pour tout le monde.
Une autre méthode consiste à spécifier une classe pour la balise et à ajouter un effet gras avec CSS. La syntaxe de balisage ressemble à ceci :
Construire des sites. avec les standards du Web peut être fun !
Le CSS ressemble à ceci :
em.bold{
font-weight:bold
}
L'utilisation de peut obtenir un effet italique (tout en mettant l'accent sur le contenu du texte de manière sémantique), et l'ajout d'une classe gras entraînera l'affichage du texte dans
Une méthode similaire peut également être utilisée pour modifier . À ce stade, nous pouvons mettre en italique lorsque nous mettons l'accent sur un certain paragraphe de texte. classe plus effet italique, associé à l'effet gras original de
Le langage de balisage ressemble à ceci :
Construire des sites avec. les standards du Web peuvent être fun !
Le CSS est comme ceci :
strong.italic{
font-style:italic
}
#p# Présentation
Je pense qu'il est nécessaire de discuter de ce sujet, c'est donc un bon exemple de l'un des thèmes centraux de ce livre : il est important et bénéfique de séparer le contenu de la présentation : et d'échanger tags Former des balises en balises structurellement équivalentes (lorsque l'on met l'accent sur le contenu) est un moyen simple d'aider à atteindre ce type d'objectif de séparation.
Donc, la prochaine fois que vous entendrez quelqu'un dire « Oui, vous devriez toujours utiliser au lieu de », vous avez une bonne raison de sauvegarder cet argument.
Dans la plupart des cas, il convient d'utiliser ou lorsque vous souhaitez simplement obtenir un effet visuel gras ou italique, utilisez l'extension CSS Skill.
Jusqu'à présent dans ce chapitre, nous nous sommes concentrés sur et , qui ne sont qu'une partie de ce que le W3C appelle les « éléments de phrase ». Dans cette partie, examinons d'autres éléments de phrase et leur relation. aux normes. Élément de phrase
En plus de et , la liste complète des éléments d'expression dans la spécification HTML 4.01 du W3C comprend :  : contient d'autres citations et informations sur la source de référence.  : représente l'exemple de définition d'un nom.  : représente un morceau de code <samp> : Représente un programme, exemple de sortie de script <kbd> : Représente le texte à saisir par l'utilisateur <var> : Représente les variables du programme <abbr> : représente des noms abrégés (comme WWW, HTML, URL, Mass., etc.) <acronyme> : représente des noms abrégés (comme WAC, radar, etc.) <br>Examinons quelques balises en profondeur, en commençant par le design de <cite> <br><cite> est un élément intéressant qui mérite d'être discuté, particulièrement important lors du remplacement de la balise <i> qui spécifie simplement l'effet d'affichage. Le but de <cite> l'auteur ou la publication. Par exemple, un concepteur peut utiliser <i> pour mettre en italique les titres de livres, mais plus tôt dans ce chapitre, nous avons appris que CSS est le meilleur outil pour spécifier les effets d'affichage. <br>Vous pouvez suggérer d'utiliser <em> pour indiquer le titre d'une publication, mais lorsque nous citons des livres ou d'autres publications, nous n'avons pas l'intention de le souligner, c'est-à-dire d'afficher le titre du livre en italique (également courant dans l'imprimerie). industrie Utilisez des traits de soulignement, mais cela peut évidemment être confondu avec des liens). <br>Ensuite, la balise <cite> conçue sur mesure pour ce travail est apparue. La plupart des navigateurs afficheront même le contenu de la balise <cite> en italique par défaut. Spécification <br>La spécification de la balise <cite> du W3C est un peu brève. Elle n'est que brièvement mentionnée dans la spécification HTML 4.01 <br><cite> : contient d'autres citations et informations sur la source de référence. <br>C'est presque ce que nous pouvons comprendre, mais nous ne savons pas exactement quel type d'informations peut être placé dans <cite>, mais du point de vue de la « source », nous pouvons au moins mettre l'auteur et la publication dans il. <br>Voyons comment <cite> est utilisé : <br>Le roman, <cite>The Scarlet Letter</cite> se déroule dans le Boston puritain et, comme ce livre, a été écrit en Salem, Massachusetts <br>Après avoir utilisé la balise <cite> Il est affiché en italique dans la plupart des navigateurs. Nous ajouterons la règle CSS très simple suivante afin que le navigateur affiche le bon effet même s'il n'y a pas de <br>cite par défaut. {<br>style de police : italique ;<br>} <br>Pour rappel, nous avons remplacé les balises <i> dans les titres de livres et autres publications par <cite>. Dans la plupart des navigateurs, nous pouvons toujours obtenir l'effet d'affichage en italique, et encore une fois rendre le contenu de la page plus structuré. . Bien sûr, cette structure peut également utiliser CSS, jetons un coup d'œil. Changer le style de <cite> <br>Alors que nous discutons de la création de contenu de page avec la structure et la sémantique, nous facilitons également la spécification des styles (et la modification des styles) avec CSS. Prenez la balise <cite> , nous avons un contrôle total sur le style actuel et pouvons facilement le modifier chaque fois que nécessaire. <br> Supposons que l'ensemble du site Web soit créé à l'aide de la balise <cite> pour marquer les références de livres et les titres de publications. Nous ajoutons des règles CSS globales pour mettre en italique tous les éléments <cite> affichez la publication du livre sans titre non seulement en italique, mais également en texte gras rouge sur fond gris. <br>Bien sûr, cela peut être fait rapidement avec quelques règles CSS, qui changent instantanément les titres de toutes les références précédemment marquées par <cite>, car il n'y a aucun moyen de spécifier explicitement l'objet si vous utilisez <i> ou <em> <br>cite {<br>font-style : italique ;<br>font-weight : gras;<br>couleur : rouge;<br>couleur de fond : #ddd;<br>} <br>La figure 6-2 est l'effet d'affichage de la plupart des navigateurs, et c'est un autre bon exemple d'écriture d'un balisage structuré en premier, afin que vous puissiez facilement modifier le style de conception de l'ensemble du site plus tard <br> <br>Figure 6. -2. Utilisez la balise <cite> et utilisez les effets de style CSS pour libérer le potentiel de la structure. <br>En plus d'être des styles faciles à utiliser, le balisage structuré est également facile à traiter par un logiciel côté serveur, apportant des applications intéressantes <br>Par exemple, Mark, défenseur de la convivialité. pèlerin sur son site personnel "Plongez dans mark" utilise beaucoup de balises <cite>. Puisque la balise <cite> est utilisée pour marquer toute publication citée dans le blog, Mark peut écrire un programme qui analyse tous les articles pour créer une base de données et ensuite se baser sur les citations référencées. Classification des sources (http://www.peintomark.com/archives/citations/) <br>La figure 6-3 ci-dessous est le résultat de ma propre recherche. Je peux trouver deux articles connexes dans le blog de Mark, qui sont tous réalisés en marquant « Dan Cederholm » avec <cite>.</p> <p>Figure 6-3 "posts by" produit par Mark Pilgrim dans "Dive into mark" résultats de citation" (http://www.peintomark.org/archives/citations/dan_cederholm/) <br>#p# <abbr> et <acronyme> <br>Je voudrais également proposer deux éléments de phrase, à savoir <abbr> (nom abrégé) et <acronym> L'utilisation de ces balises peut fournir des définitions pour les noms abrégés, permettant à tous les utilisateurs de comprendre le contenu et. améliorer la facilité d'utilisation de la page Web. <br>Jetons un nouveau regard sur les utilisations de <abbr> et <acronyme> définies par le W3C dans la spécification HTML4.01 : <abbr> Représente des noms abrégés (comme WWW, HTTP, URL, Mass., etc.) <acronyme> Représente des noms abrégés (comme WAC, radar, etc.) <br>Avec l'attribut title approprié, ces éléments peuvent aider les utilisateurs qui ne comprennent pas des noms spécifiques. Par exemple, lors du marquage de l'abréviation de "XHTML", nous pouvons utiliser la balise <abbr> <br><abbr title="Langage de balisage hypertexte extensible">XHTML</abbr> <br>L'utilisation de <abbr> ici amènera le lecteur d'écran à épeler l'abréviation (X-H-T-M-L) au lieu de prononcer le texte intégral. En revanche, l'utilisation de <acronyme> le fera épeler l'abréviation à la place. <br>Un exemple d'utilisation de la balise <acronym> est le suivant : <br><acronym title="Traité de l'Atlantique Nord Organisation">OTAN</acronyme> <br>Nous pouvons également utiliser deux règles CSS auditives, soulignant encore une fois ces différences : <br>abbr {<br>parler: épeler;<br>}<br><br>acronyme {<br>parler:normal;<br>} <br> Les styles auditifs permettent aux auteurs de spécifier une méthode de lecture spécifiquement pour les lecteurs d'écran. Cela peut modifier l'expression auditive de la page, guider la structure du balisage, changer le ton, le timbre, etc., afin que l'effet de lecture de la page soit plus important. cohérent avec l’effet visuel. Définir une fois. <br>Beaucoup de gens suggèrent de définir une seule fois les abréviations et les abréviations qui apparaissent à plusieurs reprises dans la page. Ils pensent que répéter les définitions à chaque fois qu'un nom apparaît est une perte d'espace, et il est préférable d'ajouter l'attribut titre uniquement lorsqu'il apparaît. pour la première fois. Je pense que cela a du sens, même si lorsqu'un utilisateur est dirigé vers un paragraphe spécifique de la page, il risque de ne pas pouvoir bénéficier de la définition car il ne peut pas voir l'abréviation développée en haut de la page. <br>Utilisez votre jugement quand (et à quelle fréquence) vous définissez des noms entre <abbr> et <acronyme>. <br>Pour attirer visuellement les lecteurs, certains navigateurs ajoutent par défaut une bordure inférieure en pointillés de 1 pixel sous <abbr> et <acronyme> pour inciter les utilisateurs à déplacer leur souris sur les noms abrégés. Le navigateur affichera le contenu de la définition fourni par l'attribut title sous la forme d'une "info-bulle". <br>Pour les navigateurs qui n'affichent pas les bordures inférieures en pointillés par défaut, le même effet peut être obtenu en définissant CSS <br>abbr, acronyme {<br>border-bottom : 1px en pointillé ;<br>curseur : aide ;<br>} <br>Nous avons également ajouté une règle supplémentaire pour transformer le curseur en « Aide » (pris en charge par la plupart des navigateurs) pour aider les utilisateurs à voir qu'il ne s'agit pas d'un lien sur lequel on peut cliquer, mais d'une définition affichée sous forme d'info-bulle. Newhouse, "Style du monde réel : aide CSS"). <br>La figure 6-4 est l'effet d'affichage du navigateur. "XHTML" est développé en texte de définition et en bord inférieur en pointillés : <br> <br>Affichage général du navigateur <abbr&gt. ;Exemples de problèmes de compatibilité<br>Il convient de mentionner qu'au moment de la rédaction de ce livre, la version Windows d'Internet L'Explorateur ne prend pas encore en charge la spécification de styles pour la balise <abbr> et l'affichage des info-bulles. IE/Win prend en charge la balise <acronym> afin d'encourager certains concepteurs à utiliser uniquement <acronym> <br>Cela peut être tentant de faire cela, mais utiliser les mauvais éléments pour résoudre un problème du monde réel n'est pas une bonne chose. Pour ce problème particulier, je préfère représenter le nom selon la spécification et laisser les navigateurs correctement pris en charge. gérer<abbr&gt ;Styles pour les balises. Jetons un coup d'œil rapide à quelques éléments de phrase que nous n'avons pas encore mentionnés. <br>#p# <code> L'élément <br><code> est conçu pour afficher des exemples de code dans des pages XHTML. Par exemple, lorsque vous souhaitez partager un morceau de CSS, vous pouvez écrire comme ceci : <br><code><br>#content {<br>largeur : 80 %;<br>remplissage : 20px;<br>background: blue;<br>}<br>
De manière générale, les navigateurs visuels afficheront le contenu de la balise dans une police serif à largeur fixe. , nous pouvons également ajouter des règles CSS pour spécifier la méthode d'affichage que nous aimons.
code {
font-family : Courier, serif;
couleur : rouge;
}
De cette façon, le contenu de deviendra une police Courier rouge. L'élément
est utilisé pour identifier des exemples de sorties de programmes et de scripts. Par exemple, si je souhaite discuter du Perl que j'écris. Lorsque le script génère le résultat, je peux le marquer comme ceci :


Une fois le script exécuté, à la commande ligne, vous verrez le message script was réussi !.

Ici, j'entoure l'exemple de sortie de script avec . En même temps, nous pouvons également utiliser des règles CSS pour définir un style unique pour l'exemple de sortie de programme, tout comme nous venons de le faire pour .
En ce qui concerne , est utilisé pour marquer les variables et les références dans le programme. Par exemple, si nous discutons des feuilles de style XSLT, alors je peux écrire :

Je vais passer le paramètre lastUpdated à mon fichier main.xsl.

De nombreux navigateurs afficheront le contenu de la balise en italique, mais vous pouvez écrire une règle simple pour supprimer la valeur par défaut si vous n'aimez pas l'italique. Nous pouvons utiliser l'attribut CSS font-style pour la modifier. l'effet d'affichage:
var {
font-style : normal;
font-family : Courier, serif;
color: purple;
}
Enfin, regardons l'élément , qui complète l'élément phrase. L'élément
peut être utilisé pour marquer le texte que l'utilisateur souhaite saisir. Par exemple, si j'explique comment utiliser la touche d'accès que je viens de spécifier pour déplacer le curseur vers le champ de recherche, je pourrais écrire comme. ce:

Pour changer rapidement le focus sur le champ de saisie de recherche, les utilisateurs Mac tapent Commande 9.

Vous pouvez probablement deviner ce que je vais dire ensuite. Oui, en utilisant des règles CSS simples, vous pouvez styliser tous les éléments comme n'importe quel autre élément de phrase.
En regardant ce que nous avons vu dans ce chapitre, nous discutons d'abord des raisons pour lesquelles et sont meilleurs que comment concevoir simplement Pour définir l'effet d'affichage en gras ou en italique, CSS est la bonne méthode.
aborde également d'autres éléments de phrase, commençant par pour marquer les personnes et les publications, et démontre les avantages de la syntaxe de balisage structurée pour les effets d'affichage et l'analyse des données.
Il montre également comment marquer les noms abrégés et les abréviations avec des composants appropriés pour améliorer la convivialité des pages Web, tout en utilisant un affichage CSS et des règles phonétiques supplémentaires pour renforcer le contenu de la définition. Enfin, vous pouvez voir les éléments de phrase restants, chaque élément. Ils ont tous des styles prédéfinis différents pour le texte général, mais nous pouvons également concevoir rapidement et facilement des règles CSS simples pour une seule page ou l'ensemble du site Web afin de spécifier le style d'affichage souhaité pour ces éléments.
Certains labels sont assez peu familiers à beaucoup de gens dans ce chapitre. Après le lancement de la normalisation en Chine, ils ont malheureusement été interprétés à tort comme étant des p. css, je ne sais vraiment pas comment le décrire. J'espère que les gens qui peuvent le voir pourront comprendre correctement les panneaux routiers sur la route vers les documents sémantiques de normalisation