Ce qu'il faut savoir sur les balises et les attributs.

Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.

Ce qu'il faut savoir sur les balises et les attributs.

Les bases.

Une page XHTML peut très bien s'afficher sans CSS puisque les navigateurs ont leurs propres paramètres de mise en page par défaut.

Le CSS quant à lui, peut s'exprimer pour modifier ses attributs par défaut des différents navigateurs en modifiant le rendu de deux types de balises. Les balises de type « bloc » (block ang.) et les balises de type « ligne » (in line ang).

Les éléments de type « bloc » servent à séparer les conteneurs, les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc.

Les éléments « ligne » sont prévus pour rester dans le texte et pour en mettre une partie en évidence comme les liens, les caractères gras, italique, etc.

Dans les faits, nous utilisons id pour les conteneurs principals comme "banner", "nav", "menu", "content", "footer" etc. Une classe est surtout attribuer à un élément de mise en page comme par exemple <span class="rouge">Texte en rouge</span>, <span class="gras">Texte gras</span> et même pour une division qui doit ce répéter sur la même page comme <div class="clear"></div>.

1) Les balises de type « bloc » comme <div>, <p>, <ul>, <li>, <h1> à <h6> etc.

1. Se placent en haut et à gauche de son conteneur.
2. Se placent toujours l'une en dessous des autres (comme les paragraphes).
3. Peuvent contenir d'autre balise de type bloc et en ligne et peuvent être dimensionnées.

2) Les balises de type « en ligne » comme <a>, <strong>, <em>, <span>, <img> etc.

1. Se placent toujours l'une à coté de l'autre dans la même phrase ou le même paragraphe.
2. Ne peuvent contenir que des balises de type en ligne et ne sont que peu redimensionnables.

La balise <div> est la plus appropriée pour diviser une page web. Exemple ici.

• div id est une division avec un identifiant unique qui ne peut être répété sur la même page.
• div class est une division avec une classe qui peut être répétée.

Ancêtres, Parents, Enfants, Frères

Comprendre l'imbrication des éléments (boites) les uns dans les autres est essentiel.

Chaque document HTML est toujours composé de blocs conteneurs. Ces blocs peuvent être ancêtres, parents, enfants ou frères. Ces différents éléments composent une hiérarchie d'imbrications. Ceci à son importance puisque les conteneurs enfants héritent des attributs CSS du conteneur parent dont il fait partie, comme les enfants héritent du code génétique de leurs parents et ancêtres.

Prenons l'exemple de notre modèle qui à 800 pixels de largeur. Si je veux insérer une bannière, elle ne devra pas dépasser 800 pixels de largeur. La bannière hérite de l'attribut CSS de body{width:800px}. Cela peut paraître assez simple à première vue, mais il faudra tenir compte de cette hiérarchie si vous insérez une image dans un paragraphe ou lors de la création d'un menu par exemple.

1. Un ancêtre est un conteneur qui contient un élément parent ou une hiérarchie d'éléments parents.
2. Un bloc parent est un élément contenant directement un bloc conteneur « enfant ».
3. Un bloc conteneur à l'intérieur d'un bloc parent est dit « enfant » de cet élément.
4. Les éléments ayant la même propriété dans un bloc parent sont appelés « frères ».

Une seule page Css pour tout le site.

L'avantage d'avoir une feuille de style unique est l'uniformité de la mise en forme du site. Sans compter que si vous voulez changer et ça viendra, une texture, une police de caractères ou sa couleur, vous n'aurez pas à modifier le CSS sur chaque page de votre site, ce qui peut être très fastidieux. Avec une seule page CSS, vous changez un paramètre et tout votre site est mise à jour sur-le-champ. Le CSS n'est chargé qu'une seule fois, ce qui fait gagner un temps appréciable lors du déplacement des internautes sur votre site.

Pratique à éviter pour le CSS.

Beaucoup de "développeurs" insère le CSS dans le 'head' de chaque page HTML qu'ils conçoivent. L'inconvénient de cette méthode est qu’elle alourdit le poids de votre page et le poids global du site. En plus d'être plus long à charger, votre site utilise inutilement de l'espace serveur. De plus, le CSS doit être retranscrit sur chaque page augmentant ainsi la charge de travail et les risques d'erreurs. D’autre encore incorpore directement le CSS sur un paragraphe dans la page HTML pour modifier l’alignement ou la couleur d’une partie du texte par exemple. Rejetez d’amblé cette pratique. La validation W3C est impossible avec cette méthode.

Optimiser votre CSS

Optimiser son CSS veut simplement dire, réduire sa taille. Par exemple si on applique une optimisation au CSS de notre modèle, cela donnera deux lignes au lieu de dix. Si votre CSS comporte plus de 500 lignes, ce qui n'est pas rare, vous utiliserez moins d'espace serveur et vous gagnez en rapidité.

1
2

html{font-size:100%;margin:0;padding:0}
body{color:#000;font-size:100%;font-family:Arial, Helvetica, sans-serif;background-color:#ffffff;margin:0}

Autres exemples

Les marges qu'elle soit intérieure (padding) ou extérieure (margin) peuvent être optimisé ainsi :

• margin:0 (sans spécifier si la valeur est en px ou %).

Au lieu de :

• margin-top:0;
• margin-right:0;
• margin-bottom:0;
• margin-left:0

Ou

• padding:5px 0 5px (pour une marge intérieure de 5 pixels au dessus et à gauche du conteneur).

Au lieu de :

• padding-top:5px;
• padding-right:0;
• padding-buttom:0;
• padding-left:5px

Ou

• margin:5px 25px 5px 10px

Au lieu de :

• margin-top:5px;
• margin-right:25px;
• margin-buttom:5px;
• margin-left:10px

Vous n'avez qu'à suivre le fuseau horaire (haut, droit, bas et gauche) lorsque vous voulez appliquer une valeur à margin et padding.

Il y a bien d'autres optimisations possibles. Nous emploierons cette méthode à chaque nouveau paramètre CSS que nous rajouterons lors des cours. Prenez l'habitude de travailler de cette façon.

Internet Explorer

Un commentaire conditionnel peut faire appel à un autre CSS et ne sera lu que par Internet Explorer 7. Ce CSS a pour but de corriger certain « bugs » du navigateur le plus répandu imposé par Microsoft avec son système d'exploitation Windows. Ce CSS ne comportera que les correctifs. Il n'est donc pas nécessaire de retranscrire le CSS original dans son intégralité.

Je préfère cette méthode aux « hacks » que l'on rajoute dans le code XHTML. Puisque certains « bugs » présent dans Explorer 6 ont été corrigés dans Explorer 7 puis dans Explorer 8, vous devez spécifier à quelle de ces versions le "hack" est destiné. En ce qui me concerne, je ne tiens plus compte d'Explorer 6 depuis un bon bout de temps. C'est un navigateur obsolète et très éloigné des nouveaux standards.

Un petit CSS pour Internet Explorer 7.

Entre <head> et </head> insérer la ligne suivante.

1

<!--[if gte IE 7]><style type="text/css" media="screen">@import url(css/ie7.css);</style><![endif]-->

Si vous ouvrez Internet Explorer et que vous constatez que les marges ou autres paramètres ne sont pas affichés de la même façon, ou à peut prês, corriger le tout dans un nouveau doccument avec Notepad++ et enregistrer le nouveau fichier en lui donnant le mon ie7.css comme dans notre exemple.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca