Traduction
Tutoriel HTML - sommaire
Tutoriel HTML5 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans la page ci-dessous j'ai essayé d'utiliser les principales balises HTML4 à l'exception de celles relatives aux formulaires.
La feuille de style est minimaliste !
Il y a une seule règle de style pour mettre en forme les boites DIV car sachez qu'il n'y a aucune mise en forme par défaut pour cette balise.
Concernant le code de la partie BODY notez les commentaires à la suite de chaque balise fermante DIV. En effet on ne disposait que de la balise DIV pour structurer la page : créer de grandes divisions. Mais si on avait le malheur de ne pas indenter le code HTML on se trouvait vite perdu dans les balises fermantes DIV ... D'où l'intérêt de les commenter pour savoir si le compte y est.
Le rendu du code dans un cadre :
Le rendu de ce code avec le navigateur
Grâce au rendu de cette page la notion de balise "inline" et balise "block" doit sauter aux yeux ;
Vous constatez que les textes balisés par b,strong,i,em,u,sub, sup,s, del,q sont côte à côte. Ce sont donc des balise "inline".
Par contre les textes balises par h1,h2,p,ul,ol,li,table,tr sont les uns en dessous des autres. Il s'agit donc de balise "block" (ou boites).
Les images et les liens sont aussi de front ; img, a sont des donc des éléments en ligne. De même que th,td.
Sachez que même en l'absence de CSS le navigateur va afficher la page en appliquant une mise en forme par défaut pour chaque type
de balise.
Examinons la mise en forme par défaut pour chaque type de balise !
Par défaut la page a la largeur de l'écran (width : 100%) avec alignement gauche.
Le texte utilise une police de type serif (Times New Roman si installée sur le PC du visiteur).
Les titres (balises H1 à H6) apparaissent en gras avec un alignement gauche et avec des marges externes haute et basse.
La taille et les marges sont décroissantes : le titre balise par H1 a une taille plus grande que H2 et H2 une taille plus grande que H3, etc.
Le texte balisé par P est aligné à gauche.
Le passage à la ligne dans un paragraphe est automatique ; un mot n'est jamais coupé.
Pour forcer le passage à la ligne utilisez BR !
La balise fermante P est facultative mais conseillée.
Différence entre B et STRONG : dans les deux cas le texte est en gras. Mais STRONG a aussi une signification sémantique : texte d'une grande importance.
Dans le cadre du référencement naturel de votre site il faut baliser avec STRONG les notions clefs.
B c'est simplement un effet de style.
Par défaut le texte à l'intérieur de STRONG apparait en gras mais rien ne vous interdit de changer cette mise en forme via le CSS ...
Différence entre I et EM : dans les deux cas le texte est en italique.
Mais EM signifie aussi : texte important ! Donc à utiliser également pour le référencement du site.
I c'est simplement un effet de style.
Comme pour STRONG rien ne vous interdit de changer la mise en forme par défaut de la balise EM via la feuille de style.
Par défaut les items de liste (balise LI : List Item) apparaissent précédés d'une puce (un rond plein) si ils sont compris dans UL (Unordered List)
et d'un numéro arabe s'ils sont compris dans OL (Ordored List).
La balise fermante LI est facultative mais conseillée.
Les tableaux sont alignés à gauche sans bordurage ; largeur adaptée au contenu.
Notez bien la hiérarchie des conteneurs : TABLE contient des TR (Table Row) ; chaque TR contient des TH (Table Head) ou des TD (Table Data).
Différence entre TH et TD : ces deux conteneurs délimitent la cellule d'un tableau. Mais la mise en forme par défaut est différente : graisse et
centrage horizontal pour TH, alignement gauche pour TD.
En effet la balise double TH est réservée aux en-tête de colonne.
IMG est une balise "inline" d'où les deux images de front.
L'attribut alt est utile : si l'image n'apparait pas (valeur de l'attribut SRC incorrect) c'est le texte alternatif qui apparait.
ALT est aussi utile pour le référencement du site via ses images.
N'oubliez pas de préciser une hauteur ou une largeur pour les images sinon elles sont affichées avec leur taille
d'origine.
Si vous précisez la largeur le navigateur va calculer la hauteur pour respecter les proportions et vice-versa.
La balise A de type "inline".
Par défaut la légende d'un lien apparait en bleu et souligné !
L'attribut target avec la valeur "_blank" permet d'afficher la cible du lien dans une nouvelle fenêtre.
Dès qu'un lien dans votre page cible un autre site il est préférable d'utiliser cet attribut afin que le visiteur puisse revenir sur votre page.
Le code de la partie BODY est inchangé.
Mais la page s'enrichit d'une feuille de style très complète.
Dans le cadre d'un site de N pages cette feuille de style ne serait pas interne mais externe et dans chaque page il n'y aurait qu'un lien vers le fichier .css correspondant à cette feuille de style externe.
Le rendu du code dans un cadre :
Le HTML c'est la sémantique et le CSS c'est la mise en forme, le style.
Donc en principe il ne faudrait plus utiliser les balises b,i,u,s, sub, sup car elles ne précisent qu'une mise en forme.
Il faudrait utiliser la balise générique span associée à une classe..
La première règle de style de la feuille est fondamentale car elle supprime toutes les marges externes et internes par défaut dont vous ignorez les valeurs ...
Le texte aura une taille de 12 pixels ; la page aura une largeur de 900 pixels et sera centrée dans l'écran.
Attention en CSS il faut toujours préciser l'unité de mesure alors qu'en HTML par défaut il s'agit de pixels.
Les traits horizontaux (balise HR) sont désormais masqués (hr {display : none ;) Donc pas besoin de toucher au code HTML ...
Ne confondez pas le centrage du texte dans sa boite (text-align : center) et le centrage horizontal d'une boite dans sa boite parente (avec la propriété margin).
Attention margin : auto ne peut s'appliquer qu'aux éléments block.
Quant au centrage vertical, le texte est toujours centré verticalement dans sa ligne.
Toujours pour les titres la taille des caractères est augmentée par rapport à celle définie dans BODY. Pour exprimer de façon relative une taille
de caractères on peut utiliser aussi % plutôt que l'unité de mesure em.
Par défaut les puces et numéros des items sont externes et peuvent se retrouver dans la marge gauche ce qui est très laid. Donc prévoyez une marge externe gauche ou encore réglez à "inside" (list-style : inside)
Les tableaux sont centrés horizontalement, une largeur de 50% et bordurés.
Les cellules de tableau sont aussi bordurées. Dans les cellules de type "data" le texte aligné à droite mais sans coller à la bordure droite grâce
à une marge interne.
Les images et les liens sont transformés en boites :img,a {display : block;}
Ainsi les images peuvent être centrées horizontalement dans leur conteneur.
Les liens perdent le trait de soulignement par défaut (text-decoration : none).
Si survol d'un lien sa taille augmente de 50% et le texte devient rouge.
Et pour terminer la règle de style qui formate les éléments DIV (éléments de type block mais sans mise en forme par défaut).