Langage de balisage - Production de pages List_HTML/Xhtml_Web

Solutions de conception standardisées - Langages de balisage et manuels de style

Solutions de normes Web Le manuel de balisage et de style
Partie 1 : Abandonnez le balisage Commençons par la syntaxe de balisage
Liste de contrôle du chapitre 1
Les listes de contrôle peuvent être trouvées sur presque toutes les pages du Web. Une liste d'hyperliens ; une liste d'articles de panier d'achat ; une liste de vos films préférés... et même une liste de navigation pour l'ensemble du site Web. Il peut sembler à certaines personnes que la création d'une liste est arbitraire, mais c'est ce que nous allons explorer. C'est exactement ainsi. Plusieurs méthodes courantes de création de listes et de collections présentent des avantages et des inconvénients. Plus tard, nous énumérerons quelques exemples de la façon d'embellir une liste commune avec leurs avantages et leurs inconvénients.
Allons faire du shopping
Au départ, j'avais prévu d'utiliser une liste de lessive comme exemple pour ce chapitre, mais j'ai vite réalisé que je n'avais aucune idée des éléments qui devaient être inclus dans une telle liste, alors... pour. à titre d'exemple, prenons la nourriture comme exemple !
Imaginons que vous ayez besoin de mettre une liste d'aliments sur votre propre site Web. Vous ne savez peut-être pas pourquoi vous devriez mettre une liste d'aliments sur votre site Web. Eh bien, cela est peut-être hors sujet. raison de commencer à penser aux listes...
Sur la page, disons que nous voulons que la liste ressemble... enfin, à une liste, c'est-à-dire une longue liste verticale avec chaque élément sur sa propre ligne :
Pommes
Spaghetti
Haricots verts
Lait
Cela semble très simple, n'est-ce pas ? Semblable à de nombreux aspects de la conception et du développement de pages, nous pouvons obtenir le même effet (ou similaire) grâce à de nombreuses méthodes différentes. Comme pour tous les exemples ci-dessous. dans ce livre, j'utiliserai eXtensilble Montrez tous les exemples du point de vue du langage XHTML (HyperText Markup Language) et assurez-vous que les méthodes choisies utilisent la syntaxe de balisage correcte, conformément à World Wild. Divers standards développés par le Web Consortium (W3C)
On peut facilement ajouter un
Les balises sont terminées, ou vous pouvez utiliser diverses balises d'éléments de liste pour terminer le travail. Examinons maintenant 3 méthodes complètement différentes et les caractéristiques de chaque méthode

---

.

Heure des questions
Laquelle des méthodes suivantes est la meilleure pour créer une liste de courses
Méthode A : Utilisez
Saut de ligne
Pommes

Spaghetti

Haricots verts

Lait

La méthode A est en effet une méthode largement utilisée, et peut être utilisée par des millions de pages. En fait, j'en suis sûr. d'entre nous sont coupables d'utiliser cette méthode de temps en temps, n'est-ce pas ? Nous voulons que chaque élément de la liste soit sur sa propre ligne et inclue une balise de nouvelle ligne (dans ce cas, en utilisant une balise à fermeture automatique standard conforme à xhtml). />) générera un saut de ligne après chaque élément. C'est tous ses effets. Cela semble être très utile.
Mais que se passe-t-il si nous voulons ajouter à cette liste d'aliments un style différent de celui des autres éléments de la page ? Par exemple : si nous voulons que la couleur de tous les liens de la liste soit rouge au lieu de la couleur bleue par défaut, ou si nous voulons la changer ? la taille de la police ? Vraiment on ne peut rien faire, on est limité par le style de police défini pour l'ensemble du document html (s'il y en a une), en même temps, si sans aucune balise entourant la liste, on ne peut pas créer. une règle CSS unique pour la liste.
Wrap
Si nous ajoutons une ligne comme "Five Foot Loaf of Anthony's Italian" à la liste "Pain". Selon la position de cette liste sur la page, si l'espace horizontal est insuffisant ou si la fenêtre du navigateur du spectateur est étroite, les éléments trop longs risquent d'être repliés sur la ligne suivante.
Dans le même temps, nous devons également considérer que les utilisateurs malvoyants peuvent modifier la taille de police par défaut pour améliorer la lisibilité. Nous pensons que les éléments peuvent être facilement disposés en colonnes étroites, comme le montre la figure 1-1, mais très probablement. ce sera comme Figure 1 - 2 De cette façon, des sauts de ligne se produisent à des endroits inattendus. Lorsque les lecteurs augmentent la taille de la police, le style de conception change complètement.

Hmm... Maintenant, je pense que je devrais acheter du pain, mais sur les images 1 et 2, les deux lignes de mots sur le pain prêtent vraiment à confusion.

Lorsque vous utilisez un appareil à petit écran tel qu'un téléphone mobile ou un PDA pour lire de longues lignes, des problèmes similaires de retour à la ligne montreront leur visage laid. Les passionnés de technologie hardcore peuvent transporter un Palm pour enregistrer des listes de courses. Pilot (plutôt que du papier et un stylo au sens traditionnel du terme) se promenait dans le supermarché lorsqu'il a fini par chercher quelque chose appelé « l'Italien d'Anthony » sur les étagères. Ici, je veux faire valoir un point essentiel : l'utilisation de la méthode A ne prend pas en compte les variables que les concepteurs ne peuvent pas contrôler lors de la lecture des pages Web

.

---

Méthode B : Points mordants

Pommes

Spaghetti

Haricots verts

Milk

La plupart des navigateurs matures ajouteront un symbole de point à gauche de l'élément de liste lors de l'analyse de la balise

Pour obtenir cet effet, ajoutez la balise

lorsqu'un symbole de point est requis. Cependant, si la balise

n'est pas incluse dans une balise parent appropriée, certains navigateurs n'afficheront pas le symbole de point. puissant

et l'autre balise parent de
• est la
  (liste ordonnée), qui sera discutée plus tard.
  L'apparition du symbole de point peut en effet aider à résoudre le problème de retour à la ligne dans une certaine mesure. Chaque aliment aura un petit symbole de point sur la gauche. Si un article est trop long à emballer, il ne devrait pas y avoir de petit point. symbole à côté. Il est évident qu'il ne s'agit pas d'un nouveau projet, mais la méthode B présente toujours le problème des résultats inattendus : elle ne répond pas aux normes.
  Veuillez vérifier
  Selon la spécification XHTML 1.0 du W3C, toutes les balises doivent être fermées à la fin — Ce serait dommage si nous continuions à utiliser l'exemple ci-dessus et laissions tous les
  1. ouverts
     Utilisez
     pour simuler l'effet d'affichage correct d'une liste non ordonnée avec retour à la ligne, mais en fait nous avons une meilleure façon.
     Il a toujours été très important de développer l'habitude d'écrire une syntaxe de balise correcte. En écrivant correctement la syntaxe des balises, nous n'aurons pas à nous soucier des problèmes causés par l'absence de balises de fermeture ou d'éléments imbriqués incorrects à l'avenir. les codes sources peuvent également leur permettre d’avoir une compréhension plus approfondie des effets que le code source souhaite obtenir.
     N'oubliez pas de faire bon usage des outils de détection en ligne pour vérifier l'URI que vous soumettez ou le document que vous téléchargez. Au final, vous sentirez que cela en vaut la peine
     .

     ---

     Méthode C : Fermer
     

  2. Pommes
  
  
  3. Spaghetti
  
  
  4. Vert Beans
  
  
  5. Milk
  
  La méthode C est plus proche de la solution parfaite, mais elle échoue toujours lamentablement, et la raison est toujours très évidente : elle ne répond toujours pas à la norme. grammaire de balisage.
  Nous avons fermé la balise
  6. car
  7. est un élément de niveau bloc, il peut donc être retiré de l'utilisation
     , de sorte que chaque élément occupe sa propre ligne, mais nous avons manqué sa structure externe et il manquait un élément qui signifie "ce groupe d'éléments est une liste
     D'un point de vue sémantique, ce problème est également très problématique ! important — Une liste est un groupe d'éléments qui vont ensemble, nous devons donc leur ajouter de telles balises. De plus, l'utilisation de la balise de liste correcte peut indiquer clairement au navigateur, au logiciel ou au périphérique d'affichage « Ce groupe d'éléments est une liste ! » est une balise sémantique qui a pour but de structurer les contenus en fonction des catégories auxquelles ils appartiennent.
     Au niveau bloc et en ligne : Les éléments HTML peuvent être divisés en deux types : les éléments de niveau bloc et les éléments en ligne commenceront sur une nouvelle ligne et se termineront par un saut de ligne, tandis que les éléments en ligne seront affichés sur la même ligne que les autres éléments en ligne. les éléments peuvent inclure d'autres éléments de niveau bloc et des éléments en ligne, et les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc.
     Les éléments de niveau bloc incluent :
     ,

     -

     ,

     , etc. Les éléments en ligne incluent :,,, < ;q>Attendez.
     Si nous regardons notre liste d'épicerie d'un point de vue purement XML, peut-être pourrions-nous l'annoter de cette façon :
     
     Pommes
     
     Vert Haricots
     Lait
     
     La liste entière comporte un élément conteneur , et tous les produits alimentaires y sont inclus. Cette méthode de catégorisation des projets permet aux applications basées sur XML d'extraire facilement tous les projets de la liste.
     Par exemple, un développeur doit écrire une feuille de style XSLT et convertir la liste en xhtml, en texte brut ou même en fichier pdf. La structure des éléments de la liste étant très claire, le programme peut facilement obtenir les informations. et effectuez un traitement utile.
     Bien que je ne traite pas directement de XML dans ce livre, ces principes s'appliquent également au monde XHTML. Si le document utilise une structure de balises très sémantique, cela améliorera la flexibilité du document dans le futur, que ce soit pour. une structure claire. Vaut-il mieux ajouter une feuille de style CSS au document ou la modifier pour le rendre plus facile à comprendre ? — Tant que la structure correcte est fournie, beaucoup de temps qui pourrait être perdu lors de la maintenance future peut être économisé
     Ensuite, examinons de plus près la méthode D pour voir comment celles-ci sont combinées —. Un document qui peut être reconnu et affiché par la plupart des navigateurs et lecteurs d'écran, tout en nous permettant de styliser le document de différentes manières

     ---

     Méthode D : Emballage agréable. Beans

     Milk

     
     
     Qu'est-ce qui rend la méthode D si spéciale Tout d'abord, sa syntaxe est complètement correcte et correctement désordonnée La liste a l'élément conteneur

     , et chaque élément a été fermé par l'élément
     • À ce stade, vous voudrez peut-être demander si nous avons déployé autant d'efforts simplement pour démontrer qu'il est correct pour le plaisir d'être correct. ? Jetons un coup d'œil à ces avantages :
       Puisque nous avons correctement marqué notre liste d'épicerie, chaque article sera sur sa propre ligne (en raison de l'élément
     • au niveau du bloc), et la plupart des navigateurs ajouteront un petit point à gauche du symbole de chaque article, et effectuez une indentation en ligne et des sauts de ligne corrects (voir la figure). 1 - 3)
       
       
       
       Figure 1 - 3
       Les utilisateurs de PDA, de téléphones mobiles ou d'autres appareils à petit écran peuvent également voir une organisation claire et clairement liée, car nous indiquons à ces appareils le type de données (dans cet exemple, une liste), afin que ces appareils puissent décider comment afficher selon ses propres capacités pour obtenir le meilleur effet.
       Si un saut de ligne se produit en raison de l'agrandissement de la taille de la police ou de la réduction de la largeur de la fenêtre du navigateur, le texte enveloppé sera mis en retrait pour s'aligner sur la première ligne de texte, de sorte que chaque ligne puisse être facilement identifiée quel que soit le environnement du navigateur. lister les éléments

       ---

       Résumé
       Maintenant que nous avons discuté de toutes les approches possibles, passons rapidement en revue ce dont nous venons de discuter : Méthode A :
       Impossible d'ajouter des styles uniques à la liste
       Dans les colonnes étroites ou sur les appareils à petit écran, le contenu plus long peut être mal compris en raison du retour à la ligne
       Manque de sémantique Méthode B :
       Ajoutez un petit symbole de point pour aider à identifier chaque élément, mais certains navigateurs peuvent ne pas afficher le petit symbole de point lorsque la balise parent

       
       n'est pas placé dans
       , l'absence de balise de fermeture
     rend difficile l'ajout de styles
     n'est pas standard Méthode C :
     Après avoir ajouté la balise de fermeture , la balise
     n'est plus nécessaire.
     L'omission de l'élément
     rend difficile l'ajout de styles spécifiques à cette liste
     Méthode non standard D :
     Conforme à la norme !
     Rendre le document sémantique et structurel
     La plupart des navigateurs afficheront un petit point à gauche de chaque élément
     Sur la plupart des navigateurs, la ligne sera en retrait après un saut de ligne
     Il est facile de définir des styles CSS spécifiques
     Comme vous pouvez le constater, vous pouvez acquérir beaucoup de connaissances à partir d'un problème apparemment simple. Même si vous avez utilisé la méthode D sur toutes vos pages, il est quand même préférable de demander pourquoi vous faites cela, nous continuerons à explorer. la question "pourquoi" dans ce livre, vous permettant de choisir la méthode la plus appropriée dans diverses situations

     ---

     Extension de compétences
     Utilisons la liste d'aliments que nous avons. construit pour essayer quelques façons de définir les styles CSS. Nous abandonnerons les styles par défaut, ajouterons des symboles de points personnalisés, puis le convertirons en orientation paysage pour le transformer en barre de navigation.
     Jetez les pois
     "Je n'aime vraiment pas ces petits pois dans la liste d'épicerie, je pense que je vais juste retourner à
     ."
     Pas besoin de retomber dans de vieilles habitudes — Nous pouvons toujours utiliser notre liste structurée non ordonnée, puis utiliser CSS pour désactiver les symboles de points et l'indentation en ligne. La clé est de conserver la structure de la liste et de la présenter ensuite spécifiquement en CSS.
     Tout d'abord, ajoutez une règle CSS pour supprimer le symbole de point :
     ul{
     list-style:none;
     }
     Les résultats affichés sont présentés dans la figure 1 à 4
     

     Figure 1 - 4 Supprimez le petit symbole de point
     Ensuite, supprimons l'indentation. Selon la valeur par défaut, toutes les listes non ordonnées auront un peu de remplissage sur le côté gauche, mais ne vous inquiétez pas, nous pouvons le couper à notre guise :
     ul{
     list-style:none;
     padding-left:0;
     }
     Le résultat de l'affichage est visible dans la figure 1 - 5
     

     Figures 1 à 5
     Bien que les figures 1 à 5 ressemblent et utilisent plusieurs
     est presque le même, mais il s'agit toujours d'une liste non ordonnée standard et structurée : Quel que soit le navigateur, l'appareil peut s'afficher normalement. Si nécessaire, il vous suffit de mettre à jour quelques règles CSS pour passer à un style différent

     ---

     Utilisez des symboles de points personnalisés pour compléter le vôtre. imagination
     Peut-être souhaitez-vous conserver les symboles de points dans la liste, mais vous ne voulez pas utiliser les paramètres par défaut ennuyeux du navigateur, mais plutôt utiliser votre propre motif de points. Il existe deux façons d'obtenir ce que vous voulez. . Vouloir- Et je préfère la deuxième méthode car elle peut être mieux compatible entre les différents navigateurs
     La première méthode consiste à utiliser l'attribut list-style-image pour spécifier l'image utilisée pour remplacer le nom par défaut en petits points.
     ul{
     list-style-image:url(i_hot.gif)
     }
     C'est la méthode la plus simple, mais elle aura des différences dans l'alignement vertical des images entre les différents navigateurs. La différence est que certains navigateurs aligneront l'image avec la ligne centrale du texte de l'élément et que d'autres placeront l'image légèrement plus haut. Il y a une petite incohérence entre eux.
     Afin d'éviter les problèmes d'alignement causés par list-style-image sur plusieurs navigateurs populaires, je préfère utiliser une méthode alternative : utiliser une image comme arrière-plan de chaque élément

     • 
       Tout d'abord, nous devons supprimer les points par défaut, puis ajouter notre propre image d'arrière-plan :
       ul{
       list-style:none;
       }
       li{
       background -image :url(i_hot.gif) pas de répétition 0 50%;
       padding-left:25px;
       }
       pas de répétition dira au navigateur de ne pas mosaïquer l'image d'arrière-plan (elle sera carrelée par défaut), et 0 50% dira au navigateur de placer l'image d'arrière-plan à 0 pixel de la gauche et à 50% du haut, afin que l'image d'arrière-plan i_hot.gif est aligné selon la ligne centrale. On peut également spécifier la position avec des pixels précis. Par exemple, 0 6px placera l'image à 0 pixel de la gauche et à 6 pixels du haut.
       Nous devons également ajouter un remplissage de 17 pixels sur le côté gauche de l'élément de liste afin de pouvoir afficher entièrement l'image de 20 pixels de large et 11 pixels de haut, tout en laissant un peu d'espace vide sans interférer avec le texte. . Il y a un chevauchement. Ces données doivent être ajustées en fonction de la taille de l'image que vous utilisez .

       ---

       Liste de navigation
       Sur mon site Web personnel, je partage plusieurs façons de convertir une liste non ordonnée en barre de navigation horizontale, en utilisant du XHTML ordinaire et structuré comme Créer un effet de type onglet comme notre exemple de liste d'épicerie.
       Nous avons converti la liste des aliments en barre de navigation pour un supermarché en ligne (ce supermarché ne vend que peu de choses...).
       Nous souhaitons que cette barre de navigation soit présentée de manière horizontale, et qu'elle ait une certaine emphase lorsque la souris la survole et qu'elle soit sélectionnée, afin que nous puissions simuler l'effet des onglets de pagination.
       Tout d'abord, nous ajoutons un identifiant à la liste afin de pouvoir définir des styles CSS pour celui-ci individuellement, et nous convertirons également chaque aliment en lien
       

       .
     • Pommes
     
     
     • Spaghetti
     
     
     • Haricots verts
     
     
     • Milk
     
     
     
     Maintenant, commencez à ajouter du CSS auxiliaire :
     #minitabs{
     margin :0 ;
     remplissage:0 0 20px 10px;
     border-bottom:1px solid #696;
     }
     #minitabs li{
     margin:0;
     padding:0;
     display:inline;
     list-style:none;
     }
     Ici, nous avons terminé de supprimer le symbole de point par défaut et en ligne travail d'indentation, nous mettons également L'affichage est défini sur en ligne, ce qui constitue la première étape vers la conversion de la liste verticale en liste horizontale. En même temps, nous ajoutons également une bordure inférieure pour distinguer l'ensemble du groupe de liens.
     La deuxième étape pour convertir la liste en barre de navigation horizontale consiste à faire flotter tous nos liens vers la gauche. Nous ajoutons également des styles simples à tous les hyperliens : définissez la taille des marges et des patchs intérieurs :
     #minitabs {.
     marge : 0;
     remplissage : 0 0 20px 10px;
     border-bottom : 1px solid #696;
     }
     #minitabs li {
     marge : 0;
     padding : 0;
     affichage : en ligne;
     list-style-type : none;
     }
     #minitabs a {
     float : gauche ;
     line-height : 14px;
     font-weight: bold;
     margin: 0 10px 4px 10px;
     text-decoration: none;
     color: #9c9;
     }
     Ici, nous définissons float:left pour tous les éléments de la liste afin qu'ils puissent être affichés horizontalement sur une seule ligne, et nous ajoutons également Ajout de quelques couleurs, rendu le liens en gras et suppression du soulignement au bas des liens.
     Ensuite, créez une marge qui simule une étiquette de pagination pour le lien survolé ou sélectionné :
     #minitabs {
     marge : 0;
     padding : 0 0 20px 10px;
     border-bottom : 1px solid #696;
     }
     #minitabs li {
     marge : 0;
     padding : 0;
     affichage : inline;
     list-style-type : aucun;
     }
     #minitabs un {
     float : gauche;
     hauteur de la ligne : 14px;
     poids de la police : gras;
     marge : 0 10px 4px 10px;
     text-decoration: none;
     color: #9c9;
     }
     #minitabs a.active, #minitabs a:hover {
     border-bottom : 4px solid #696;
     padding-bottom : 2px;
     color: #363;
     }
     #minitabs a:hover {
     color: #696;
     }
     Afin de souligner le lien, on passe la souris sur ou sélectionnez-le. En ajoutant une bordure inférieure de 4 pixels de haut, nous pouvons également garder la balise sélectionnée en surbrillance en ajoutant class="active":
     
     • spaghetti
     
     Cette catégorie active est liée à a:hover partage le même style CSS (Figure 1 - 7)
     

     Figure 1 à 7
     J'ai utilisé cette technique sur mon propre site Web et lors de ma refactorisation de juillet 2003. Si vous avez besoin de plus d'exemples de code, n'hésitez pas à visiter les deux sites Web et à consulter leur code source.
     Il vous suffit d'ajouter quelques patchs et bordures internes pour obtenir divers effets similaires aux balises de pagination. Jusqu'à présent, nous n'avons même pas utilisé d'image ou de phrase javascript, mais seule la structure xhtml de base constitue notre liste d'épicerie, qui. c'est génial !
     Apparition des mini balises de pagination
     Si vous souhaitez un effet différent de la bordure CSS carrée habituelle, il vous suffit de faire quelques petites modifications et nous pouvons utiliser des images pour créer une navigation intéressante.
     Nous utilisons exactement la même liste non ordonnée qu'avant, et des CSS très similaires :
     #minitabs {
     margin : 0;
     padding : 0 0 20px 10px;
     border-bottom : 1px solid #9FB1BC;
     }
     #minitabs li {
     marge : 0;
     padding : 0;
     affichage : inline;
     list-style-type : aucun;
     }
     #minitabs un {
     float : gauche;
     hauteur de la ligne : 14px;
     poids de la police : gras;
     padding : 0 12px 6px 12px;
     text-decoration: none;
     color: #708491;
     }
     #minitabs a.active, #minitabs a:hover {
     couleur : #000;
     arrière-plan : url(tab_pyra.gif) no-repeat bottom center;
     }
     Ce CSS ressemble probablement presque à celui de l'exemple précédent. La principale différence est que nous utilisons. background-image définit l'image qui est affichée en bas au milieu du lien lorsque la souris est déplacée ou sélectionnée, remplaçant la bordure inférieure d'origine de 4 pixels de haut (Figure 1 - 8)
     

     Figure 1 - 8 : Navigation par mini-onglets utilisant des images d'arrière-plan

     L'astuce ici est de choisir une image suffisamment étroite pour tenir sous l'élément le plus court de la barre de navigation, de sorte que nous n'ayons besoin que d'une seule image pour mettre en valeur le lien de navigation sans avoir à préparer différentes images pour différentes largeurs. pouvez choisir une variété d'images à utiliser dans vos propres projets (image 1 - 9) :
     
     

     Figure 1 - 9 : Exemples d'utilisation d'autres images