Fonctionnement du HTML : LE PRINCIPE DES BOÎTES
Des boites rectangulaires
Pour s'adapter aux formats rectangulaires des écrans, les pages Web sont constituées de boites rectangulaires empilées les unes sur les
autres, les unes à côté des autres ou les unes dans les autres dans la fenêtre du navigateur. Tous les éléments arrondis sont de
artifices obtenus par des assemblages d'images elles mêmes incluses dans des boites rectangulaires.
Dans le code source HTML interprété par les navigateurs, ces boites sont délimitées par des balises traduction de
l'anglais tags. Par exemple la très fréquente balise <p> pour paragraphe.
Tous les éléments HTML commencent et se terminent par une balise. La balise de fermeture se distingue de la balise d'ouverture par une
barre oblique.
Consultez la liste
des balises HTML.
La fameuse boite, brique élémentaire du HTML est également appelée élément HTML. Un élément se compose de 3 parties :
- La balise d'ouverture entre les signes < et > : <p>
- Le contenu : Ce texte est un paragraphe
- La balise de fermeture entre les signes < et > : </p>
À quelque exceptions près, par exemple les balises <br/> qui introduit un saut de ligne ou <img/> qui permet d'inclure une image et la différence des portes dans le theâtre de vaudeville, toute balise ouverte doit être fermée. à défaut le contenu à l'aval sera perturbé.
Les dimensions des boites
Rappelons tout d'abord qu'une boîte CSS est constituée :
- d'un contenu (le texte d'un paragraphe par exemple) ;
- d'un remplissage (padding) : l'espace entourant le paragraphe) ;
- d'une bordure (border) : encadrement du paragraphe ;
- d'une marge (margin) : espace entourant le tout.
Les propriétés CSS permettent de déterminer :
- les dimensions de la zone de contenu, largeur( width), hauteur (height) et son arrière-plan (image, couleur) ;
- les largeurs (pixel, %), la couleur et le style des bordures ;
- les largeurs (pixel, %) du remplissage ;
- les largeurs (pixel, %) de la marge.
Dans chaque cas, il est possible de spécifier des dimensions gauche, droite, haut et bas différentes les unes des autres
Interprétation des dimensions
D'après le modèle standard (celui du W3C), la largeur et la hauteur apparente d'une boîte sont égales à la somme de :
- La largeur (width) et la hauteur (height) spécifiées pour son contenu.
- La largeur totale des remplissages (padding) gauche/droite et haut/bas.
- La largeur totale de ses bordures (border) gauche/droite et haut/bas.
Une boîte ayant une largeur de 250 pixels et une hauteur de 150 pixels, avec des padding latéraux de 20 pixels chacun et des bordures
latérales de 5 pixels chacune occupera donc à l'écran une largeur totale de : 250 + 20 + 20 + 5 + 5 = 300 pixels et une hauteur
totale de :150 + 20 + 20 + 5 + 5 = 200 pixels.
Ainsi quand on modife les dimensions des bordures ou des paddings d'une boite, faut-il penser à modifier d'autant en plus ou en
moins ses dimensions intérieures, si l'on souhaite conserver sa dimension apparente à l'écran
La hiérarchie
Chaque boite ou élément HTML peut en contenir d'autres. Un paragraphe peut ainsi renfermer des boites définies par des éléments
<span> ou <strong> et se trouver lui même inclus dans un élément <div>
.
Toutes ces imbrications forment une hiérarchie arborescente entièrement comprise dans la boite de l'élément racine (<body>
). Il est essentiel de bien comprendre le fonctionnement de cette arborescence pour bien utiliser les positionnements
des éléments.
Tout document HTML est composé de conteneurs (boites en renfermant d'autres,), sur lesquels la hiérarchie du document induit une
généalogie :
- Un élément Ancêtre est un élément qui contient un élément ou une hierarchie d'éléments
- Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un <div> contenant un paragraphe <P>. Attention : si ce paragraphe contient lui-même des éléments (ex: < strong>),<div> ne sera pas Parent de l'élément <strong> mais uniquement son Ancêtre. Le Parent est donc l'Ancêtre immédiat.
- Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément. Par exemple, dans cette liste les éléments <li> sont enfants de leur conteneur <ul>.
- Les éléments ayant le même élément Parent sont appelés Frères.
On en déduit une hiérarchie simple :
- Le bloc <div> est parent des titres <h1> et <h2> et des deux paragraphes <p>. C'est aussi un ancêtre de l'élément <em>.
- Le second bloc <p> est parent de l'élément <em>.
- Les titres <h1> et <h2> et les deux paragraphes <p> sont frères.
Cette hiérarchie structurante permet une mise page plus fine. On écrira de même les feuilles de style de manière hiérarchique. Elle
présente de même un autre avantage,: un document bien hiérarchisé doit s'afficher de manière très lisible et fonctionnelle, même en
l'absence de styles CSS, par exemple s'ils sont désactivés.
On remarquera que l'imbrication des éléments HTML implique le respect d'une règle importante : le premier élément ouvert est
également le dernier fermé.
Ci-dessous les boites développées
La notion d'héritage
La hiérarchie des éléments HTML, implique l'héritage par les éléments "enfants" , si il ne leur est pas attribué de propriétés distinctes, des propriétés des éléments "parents" ou "ancêtres".
Ainsi dans l'exemple ci-dessus, les deux paragraphes inclus entre les balises <p> héritent de la couleur de fond verte (background:#6C3) et de la couleur de police noire (color: #000) attribuées à la balise <div>, par contre pour les deux mots mis en valeur par la balise <em>, il a été spécifié une couleur de fond blanche (background:#FFF) et une couleur de police rouge (color: #F00). L'ensemble des éléments hérite du style gras (font-weight:bold) et de la taille (font-size:20px) de la police de la balise <div>.
Comprendre le rendu CSS des éléments Bloc et En-ligne
Bien souvent sont évoqués des éléments de type Bloc et des éléments de type En-ligne. Il est plus correct de parler
d'éléments de rendu Bloc et d'éléments de rendu En-ligne.
Chaque élément (balise HTML) se caractérise par une double identité :
- Une structure HTML qui n'a intrinsèquement aucun rapport avec l'affichage de l'élément.
- Son rendu sur les navigateurs (affichage, positionnement, comportement). Il est défini par défaut selon le bon vouloir de chaque navigateur, et peut être modifiable à l'aide des styles CSS (en utilisant la propriété CSS "display"). Suivant la valeur de cette propriété (les plus fréquentes sont Bloc et En-ligne), l'élément s'affiche différemment sur le navigateur.
Les balises HTML ont toutes par défaut une valeur de rendu CSS particulière. En fait, il existe deux grands groupes principaux de balises : les balises
de rendu CSS Bloc (ou block)et les balises de rendu CSS En-ligne (ou inline).
Ces valeurs de rendu visuel coïncident généralement par défaut avec le groupe d'appartenance HTML.
Il est particulièrement important de comprendre que :
- de leur structure HTML vont dépendre les imbrications et emboîtements autorisés;
- et de leur rendu CSS vont dépendre leurs comportements, positionnements, affichages, etc.
La différence fondamentale entre ces deux structures d'éléments est aisément compréhensible :
- les éléments de rendu Bloc servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc;
- les éléments En-ligne sont prévus pour rester dans le texte pour l'enrichir (lien hypertexte, emphase, renforcement, etc.).
Les éléments Bloc
Les balises du groupe HTML Bloc possèdent par défaut un rendu CSS de type display: block.
Ce rendu leur permet de bénéficier de dimensions (hauteur, largeur, profondeur), de contenir d'autres éléments dimensionnés, de posséder des marges
internes (padding) et externes (margin) mais également, et surtout, d'être positionnés, c'est à dire de contribuer à la mise en page du document.
La plupart de ces propriétés sont réservées aux éléments de rendu Bloc.
En règle générale, un élément de groupe Bloc peut contenir du texte normal et une (ou plusieurs) balise Bloc
et/ou En-ligne, sauf exceptions. Consultez la page d'
Alsacréations
consacrée à ce sujet.
Les éléments Bloc sont aussi larges que possible
Les éléments Bloc sont similaires au formatage des paragraphes dans Word :
- La boite d'un élément Bloc est automatiquement aussi large que possible.
- Les éléments suivants sont placés en dessous de la boite à la ligne suivante.
Exemples d'éléments de rendu Bloc : div, p, h1...h6, ul,
ol, tabl, pre, etc...
Consultez la liste des liste des éléments de type
block
.
Les éléments En-ligne
Les balises de structure HTML En-ligne sont également appelées balises internes car leur but est de donner plus
de sens à certains éléments contenus dans du texte ou dans des blocs, tout en restant dans ce texte.
C'est le cas par exemple des éléments de renforcement <strong> (gras pour les navigateurs graphiques) et les éléments
d'emphase <em> (ou italique).
Les balises En-ligne sont faites pour rester au sein du texte pour l'enrichir et lui apporter du sens.
Par défaut, les balises du groupe HTML En-ligne possèdent un rendu CSS de type display: inline. Il n'est pas
prévu qu'elles puissent se positionner sur la page (même si cela est possible), ni recevoir des dimensions (hauteur, largeur, profondeur),
leur taille va être déterminée par le texte ou l'élément qu'elles contiennent, ces éléments ne possèderont pas non plus de marges :
ni internes, ni externes (valeur nulle), contrairement aux balises de rendu Bloc.
Les éléments En ligne sont subordonnés aux éléments Bloc. Une balise du groupe En-ligne ne
crée pas de nouvelle ligne et ne peut contenir QUE du texte normal et une ou plusieurs autres balise En-ligne, mais pas d'élément
Bloc.
Les éléments En-ligne se distinguent eux-même en deux parties : les éléments remplacés et les éléments
non-remplacés :
- Les éléments remplacés sont les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments <img>, <input>, <textarea>, < select> et <object>.
- Tous les autres éléments En-ligne non-remplacés n'ont pas de dimension à proprement parler par défaut (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <strong>, <em>, <span>, etc. Mais tout ceci est laissé au bon vouloir des navigateurs.
La largeur des éléments En-ligne se limite à leur contenu
Les éléments En ligne sont similaires au formatage des caractères dans Word :
- La largeurs de la boite d'un élément En-ligne se limite à celle de son contenu
- Le texte qui suit continue directement après l'élément.
Exemples d'éléments de rendu En-ligne : span, em, strong, img, br, input, etc... Consultez la liste des liste des éléments de type inline .
Le positionnement par défaut des éléments
Du rendu CSS (display: block et display: inline) d'un élément découlent ses spécificités d'affichage :
- les éléments de rendu Bloc se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>) ou les éléments d'une liste (balise <li>). Par ailleurs, un élément Bloc occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
- les éléments de rendu En-ligne se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <strong>.
Par exemple :
Ces deux paragraphes vont s'afficher sur deux lignes, car la balise <p> est par défaut un élément de rendu Bloc : chaque paragraphe va occuper une ligne.
Paragraphe 1
Paragraphe 2
Autre exemple :
Ce texte va s'afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu CSS En-ligne.
CSS : OÙ incorporer la feuille de style?
Il existe trois possibilités d'incorporer les styles au sein d'une page HTML
- Le style En ligne
- La feuille de style interne
- La feuille de style externe
Le style En ligne
Le style En ligne consiste à incorporer les couples propriété : valeur dans l'attribut style des balises html du corps de la page (entre <body> et </body>) . Cette dernière option mélange style et contenu, et on perd de ce fait les avantages d’une feuille de style CSS, elle est donc déconseillée dans tous les bons manuels. Elle est pourtant bien pratique dans deux cas :
- Quand vous mettez en forme une nouvelle page, il est bien plus facile de tester le code CSS directement sur les balises plutôt que de faire des allers et retours entre votre page de travail et une feuille de style externe. Une fois que cette mise en forme est terminée, vous pouvez, pour respecter l'orthodoxie, exporter votre code CSS en interne ou en externe, comme bon vous semble.
- Quand vous avez besoin d'adapter aux particularités d'une feuille une règle de style générale. Ainsi cette option est utilisée ici pour adapter à la taille du texte cité en exemple, la largeur et la hauteur de la balise textarea dont par ailleurs les autres propriétés sont définies par le sélecteur .Zonetexte dans la feuille de style externe du site.
La feuille de style Interne ou méthode imbriquée
Une feuille de style interne peut être utilisée quand un seul document doit adopter un style unique. Dans le cas de la méthode
imbriquée, les styles sont tous définis dans l’en-tête du document HTML : il suffit d’en faire la déclaration entre les balises
<head> et </head> de la page en utilisant la balise
<style>, voir ci-contre :
La feuille de style Externe
La feuille de style externe est idéale lorsque les styles que vous avez définis doivent s’appliquer à plusieurs pages de votre site, voire à son ensemble. Avec une feuille de style externe, vous pouvez changer le style de l'intégralité votre site uniquement en changeant le code d’un fichier (celui de la feuille de style). Chaque page de votre site doit alors faire référence à la feuille de style. Cela se fait en utilisant la balise <link> à insérer dans l’entête de votre page, c'est à dire entre les balises <head> et </head>. Ainsi pour cette page, le lien vers la feuille de style externe du site est le suivant :
La feuille de style peut être également extérieure au site et jointe par un lien hypertexte. Ainsi, si vous ouvrez le code de la page d'accueil de Yahoo, vous trouverez dans head la ligne ci-dessous qui ouvre le lien vers la feuille de style de cet opérateur :
Notons entre parenthèses, que vous pouvez entièrement reconstituer une page Yahoo en recopiant son code dans un fichier html vierge, car même les images sont accessibles par des adresses url non verrouillées.Le Style importé
Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @import url immédiatement après la balise style. Le lien vers la feuille de style de Yahoo aurait ainsi pu s'écrire :
La syntaxe des blocs de règles
Si dans le style en ligne les couples Propriétés/Valeurs sont attachés directement à l'élément HTML, dans les feuilles de style internes ou externes. Les propriétés sont regroupées par blocs de règles, délimités par les accolades { }. Chaque bloc est identifié par un Sélecteur qui permet de le lier aux éléments structurels de la page HTML auxquels les propriétés concernées doivent être appliquées. La syntaxe d'écriture des blocs de règles peut donc se schématiser comme suit :
Sélecteur { propriété : valeur ; propriété : valeur ; propriété : valeur ; }
Comme dans la syntaxe du HTML, le respect des signes de ponctuation est impératif :
- Les blocs de règles doivent être encadrés par des accolades.
- Les propriétés sont liés aux valeurs par deux points.
- Les couples propriétés/valeurs sont séparés par des points-virgules.
- Les espaces entre caractères n'ont aucune importance
- les blocs de règles peuvent indiféremment être écrits en ligne ou en colonnes
Possibilités d'écriture abrégée
Ces possibilités sont adaptées aux propriétés padding, margin, border,
background ou font .
Pour padding et margin, l'ordre top, right, bottom,
left doit être respecté.
Pour border, on peut regrouper les propriétés épaisseur, style et couleur en une seule commande en respectant l'ordre précité.
Pour font, les propriétés peuvent être regroupées en respectant l'ordre style de police, taille et éventuellement interligne enfin, famille de police.
Les commentaires
Dans une feuille de style qui peut être longue, il est judicieux d'ajouter des éléments d'information, de division ou de repérage.
Comme dans le code HTML, ces éléments doivent insérés entre des balises de commentaires, celles-ci sont pour l'ouverture :
/* et pour la fermeture :
*/. Voici un exemple de division de la feuille de style de ce site:
/*== MENU ==*/
Notons que les balises de commentaires peuvent également être utilisées pour désactiver momentanément des lignes du code CSS durant les essais de mise en page.
Les bordures
Article emprunté à Team-Masters.comEn CSS, on utilise principalement trois propriétés des bordures :
- Le style
- L'épaisseur
- La couleur
Le style
Pour le style, c’est à dire la façon dont la bordure est dessinée, on utilise la propriété "border-style". Cette propriété peut prendre plusieurs valeurs dont celles ci-dessous :
border : none
none: Aucune bordureborder : thick dashed #F00
dashed: En tiretsborder : thick dotted #F00
dotted: En pointillésborder : thick solid #F00
solid: Un seul trait pleinborder : thick double #F00
double: Deux traits pleinsborder : thick groove #F00
groove: Relief, lumière à gaucheborder : thick ridge #F00
ridge: Relief, lumière à droiteborder : thick inset #F00
inset: Creux, lumière à gaucheborder : thick outset #F00
outset: Creux, lumière à droiteL’épaisseur
Pour l'épaisseur, on utilise la propriété border-width qui peut prendre des valeurs en pixels, mais que l’on peut aussi définir à l’aide de mots-clés comme :
- thin : bordure mince
- medium: bordure moyenne
- thick: bordure épaisse
La couleur
La couleur des bordures est définie par la propriété border-color. Celle-ci peut prendre des valeurs de mots-clés (red, blue, black, orange...) ou des valeurs de couleurs hexadécimales #FF3300, #000000, etc....
- table {border-color: red }
- ou encore border-color: #FF0000
Le regroupement des propriétés
Les propriétés épaisseur, style, et couleur des bordures peuvent être définies pour chaque côté de la boite qu'elles enveloppent :
border-top, border-right, border-bottom, border-left, ou pour les 4 côtés :
border.
Ces propriétés peuvent être exprimées individuellement , par exemple :
div {border-bottom-width:thick;border-bottom-style:double;border-bottom-color:#F00;
border-right-width:7px;border-right-style:double; border-right-color:#808080;}
Elles peuvent également être regroupées une seule commande. Dans ce cas elles doivent impérativement êtres définies dans l’ordre épaisseur, style, couleur. Ainsi les propriétés de l'exemple précédent peuvent elles se condenser de la façon suivante:
div {border-bottom:thick double #F00;border-right:7px double #808080;}
On appréciera facilement l'avantage de cette écriture condensée.
| Propriété | Valeur | Description |
|---|---|---|
|
border |
En points (pt), pouces (in), en cm, en pixels (px), ou en % |
Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite] |
|
border |
border-left-color: #RRGGBB; |
Couleur de la bordure [supérieure, de gauche, inférieure ou de droite] |
border |
solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie) ou ridge (en 3D) |
Style de la bordure [supérieure, de gauche, inférieure ou de droite] |
|
border-collapse |
collapse |
Effet » 3D » ou non |
|
border |
border: 1px 0 0 2px dotted green; |
Raccourci global les propriétés de bordure |