Traduction
Tutoriel HTML - sommaire
Tutoriel HTML - 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
HTML est antérieur à CSS. Avant l'apparition de CSS la mise en forme des documents HTML était réalisée via des
attributs de style.
Tous ces attributs étaient obsolètes avec la norme HTML4. Il ne faut plus les utiliser car ils risquent de ne plus être compris des navigateurs dans un futur proche.
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.
Grâce au rendu de cette page la notion de balise "inline" et balise "block" doit sauter aux yeux ;
Vous constatez en effet 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 balisés 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 ; les éléments img & a sont des donc des éléments en ligne.
De même que th,td.
Avec un élément "block" ou "boite" il y a un saut de ligne avant et après.
Un élément "block" peut contenir des éléments "inline" ou d'autres boites. Par contre un élément "inline" ne peut
contenir d'élément "block".
Malgré l'absence de CSS le navigateur est capable d'afficher le document car il applique une mise en forme par défaut.
Examinons maintenant le style par défaut pour chaque type d'élément HTML.
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 !
L'élément P est une balise double mais la balise fermante 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.
Élement 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 précise qu'il s'agit d'une information importante ! 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 l'élément 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).
L'élément LI est une balise double mais la balise fermante 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 le style par défaut est different :
graisse et centrage horizontal pour TH, alignement gauche pour TD et pas de graisse pour le texte.
L'élément TH est réservé 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 et si celle-ci fait 1200px de large ...
Si vous précisez la largeur le navigateur va calculer la hauteur pour respecter les proportions et vice-versa.
Si vous précisez une largeur et une hauteur l'image risque d'être déformée sauf si les dimensions fixées respectent
le ratio largeur/hauteur d'origine.
L'élément 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 à la page web d'origine.
Le code de la partie BODY est strictement identique à l'exemple précédant.
Par contre il y a désormais une véritable feuille de style en CSS.
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 un fichier d'extension .css.
Le HTML gère la sémantique (contenu et hiérarchie du texte) et le CSS s'occupe du style : mise en page et mise en forme du texte.
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 : auto).
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).