Nous allons décrire dans cette leçon un certain nombre de balises de présentation, en rappelant qu'il appartient à l'auteur d'une page de s'assurer ques ses Internautes auront le browser "convenable" pour visiter ces pages.
Intranet ou Internet ?
Dans le cas de l'édition de pages pour un intranet de société, la tâche de l'auteur est simplifié : si l'ensemble des postes de consultation utilisent le même browser au même niveau, il peut alors créer ces pages, en utilisant toutes les fonctionnalités reconnues par celui-ci.
Dans le cas de création de pages pour l'Internet, il faut plus de prudence, et indiquer sur la première page pour quel browser sont conçues les pages ... Ou accepter que certains lecteurs perdent une partie de l'information !
<FONT> :
Cette balise permet d'agir sur des blocs distincts de caractères pouvant se situer sur une même ligne. Elle permet de régler la taille, la couleur, le type (ou la police) des caractères d'un texte. L'ensemble du texte situé avant la balise de fin </font> est affecté par les attributs de la balise. A l'intérieur de ces balises, on peut imbriquer d'autres balises de style (<B>), <I>, etc.) ou d'autres balises de début <font>.
Cet attribut permet de régler la hauteur des caractères à l'aide d'une échelle comprise entre 1 et 7. Si la valeur de l'attribut est précédée du signe +, la valeur indique l'augmentation de taille par rapport aux caractères courants (taille relative). Cette taille par défaut étant de 3, en mesure relative, il ne sert à rien d'incrémenter au-delà du maximum (7, c'est-à-dire +4).
Sans aucun signe, la valeur indiquée est la taille exacte des caractères (valeur absolue).
L'attribut COLOR :
Cet attribut spécifie la couleur des caractères dans le modèle RGB : "rr", "gg", "bb" sont des valeurs hexadécimales comprises entre 00 et FF qui spécifient le degré de saturation des couleurs rouge, vert et bleu dont le mélange produit la couleur souhaitée.
00 représente le minimum et FF le maximum pour une des composantes. Ainsi, la valeur FF0000 donne un rouge avec une intensité maximale, FFFFFF du blanc, 000000 du noir, etc.
L'attribut FACE :
L'auteur d'un document HTML peut choisir la police de caractères utilisée pour le texte à l'aide de cet attribut. Pour que cela fonctionne, il est évident que la police doit résider sur l'ordinateur du poste client. Comme ce n'est pas du tout certain, il est possible de préciser trois choix. Si aucune des polices n'est présente, l'attribut est sans effet, et le texte est affiché avec la police par défaut du browser.
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Taille et fontes du texte </TITLE>
</HEAD>
<BODY BGCOLOR="#D8D8D8">
Taille courante, <font size="1"> la plus petite taille </font>
et <font size="7"> la plus grande taille </font> <br>
Taille courante, <font size="4"> et taille 4 </font> <br>
Taille courante, <font size="+2"> et taille +2 </font> <br>
Cette balise permet la mise en forme d'un document en colonnes multiples, comme dans un journal : le teste se déroule jusqu'en bas d'une colonne pour continuer dans la colonne suivante. L'ensemble du texte inscrit dans les balises <MULTICOL> et </MULTICOL> est soumis à cet agencement. Cette balise génère un espacement vertical de type paragraphe.
<MULTICOL COLS=n GUTTER=x WIDTH=m>
L'attribut COLS :
C'est attribut spécifie, grâce à sa valeur, le nombre de colonnes de largeur égale sur lesquelles va se distribuer le texte. L'ensemble des colonnes va se répartir en occupant toute la largeur de la page, saut si l'attribut WIDTH vient contrarier cette organisation.
L'attribut WIDTH :
Par la valeur qui lui est affectée, cet attribut optionnel offre la faculté de déterminer la largeur en pixels des colonnes (cette valeur est valable pour l'ensemble des colonnes). Si cet attribut est omis, l'ensemble des colonnes se répartit sur toute la largeur de la page.
L'attribut GUTTER :
La largeur de la gouttière, c'est-à-dire l'espace entre deux colonnes, est caractérisée par la valeur en pixels indiquée à l'aide de cet attribut.
Les balises de début <MULTICOL> et de fin </MULTICOL> fonctionnent plus ou moins bien sur certains navigateurs, c'est pourquoi que nous utiliserons un style prévu à cet effet. Nous devons dire que je ne m'amuserai pas à donner des leçons d'électroniques dans ces conditions, pour s'embêter énormément ...
Exemple d'utilisation, en Style :
<HTML>
<TITLE> Colonnes de texte </TITLE>
<BR>
<BODY BGCOLOR="#FFFFFF"> <font size="+2"> Leçons Électroniques de Base </font>
<BR><BR>
<HEAD>
<STYLE>
#trois_colonnes {
width: 960px;
-webkit-columns: 3 auto;
-moz-columns: 3 auto;
columns: 3 auto;
}
#trois_colonnes p {
margin: 0;
background-color: #E9E9E9;
}
</STYLE>
</HEAD>
<BODY>
<div id="trois_colonnes">
<p> <font size="6">N</font><font face="Arial" size="3" color="#000000">ous mettons volontairement notre texte de nos leçons Électroniques afin que l'exemple puisse fonctionner correctement dans les colonnes correspondantes prévues à cet effet : </p> <BR>
<p> Le courant I fourni par la pile doit traverser successivement R1 puis R2 pour pouvoir revenir à la borne "-" de la pile.
Quand deux ou plusieurs éléments d'un circuit (dans ce cas deux résistances) sont traversés successivement par le même courant, on dit qu'ils sont reliés en série, ou plus simplement qu'ils sont en série.
Le fait que le courant circulant dans ces éléments soit le même pour tous est une caractéristique spécifique des liaisons en série, donc plusieurs résistances en série sont toutes traversées par le même courant. (Ceci est évident et facile à comprendre).
L'adjonction de la résistance R2 rend la valeur résistive totale du circuit plus grande que s'il n'y avait que la résistance R1, car le courant, outre l'obstacle causé par R1 à son passage, doit également traverser R2. Nous pouvons dire que la résistance totale du circuit de la figure 1 ci-dessus qui s'oppose au passage du courant est donnée par la somme des valeurs résistives de chaque résistance. Rappelez-vous que :
La résistance équivalente présentée par plusieurs résistances reliées en série s'obtient en additionnant la valeur résistive de chacune des résistances.
Regardons maintenant ce qu'il advient de la tension délivrée par la pile. Aux bornes de chaque résistance, il apparaît une tension et ceci conformément à la loi d'Ohm.
Pour la figure 1, La tension V de la pile se partage entre les deux résistances R1 et R2 présentes dans le circuit. Aux bornes de R1 apparaît une tension V1 (déterminée par les valeurs de I et de R1) et aux bornes de R2 apparaît une tension V2 (déterminée par les valeurs de I et de R2). La somme de ces deux tensions est égale à la tension totale de la pile : V1 + V2 = V.
Illustrons par un exemple ce qui vient d'être affirmé.
Figure 2 est reporté le même circuit mais certaines grandeurs électriques sont agrémentées d'une valeur. </p> </font>
Cette balise permet de centrer, dans le sens horizontal de la page, un bloc de texte mais aussi des images ou les éléments d'un formulaire. Elle affecte tous les objets jusqu'à ce qu'apparaisse la balise de fin </CENTER>.
<SPACER> :
La balise <SPACER> permet un contrôle vertical et horizontal du blanc entre des éléments d'une page HTML. On peut ainsi régler de façon précise l'espace entre deux lignes, entre deux mots ou avec d'autres objets comme les images ou les éléments d'un formulaire. Cela permet des réglages plus fins que ceux que l'on pouvait tenter en utilisant la balise <PRE> assortie d'espaces et de retours à la ligne.
<SPACER TYPE=mot_clef SIZE=n> ou <SPACER TYPE="BLOCK" WIDTH=x HEIGHT=y ALIGN=mot_clef>
L'attribut TYPE :
Cet attribut définit, par les valeurs qu'il peut prendre (HORIZONTAL, VERTCAL ou BLOCK), l'espacement entre les objets.
L'attribut SIZE :
Cet attribut à une valeur, en pixels de l'espacement est indiquée par la valeur donnée à cet attribut.
LUNDI<SPACER TYPE=HORIZONTAL SIZE="100">MARDI.
Entraîne l'écriture des mots LUNDI et MARDI avec un blanc inter-mot de 100 pixels tandis que :
LUNDI<SPACER TYPE=VERTICAL SIZE="100">MARDI.
Provoque l'écriture des deux mots sur deux lignes différentes espacées de 100 pixels.
Les attributs WIDTH, HEIGHT et ALIGN :
Si la valeur BLOCK est donnée à l'attribut SIZE, on peut préciser alors ces trois autres attributs. Pour les attributs WIDTH (largeur) et HEIGHT (hauteur), on indique une valeur en pixels ; l'attribut ALIGN ne pourra prendre que la valeur TOP (alignement du sommet du bloc avec les objets qui l'encadrent), BOTTOM (alignement de la base du bloc avec les objets qui l'encadrent également) et CENTER ou MIDDLE (alignement du centre du bloc avec les objets qui l'encadrent).
Le mode BLOCK fonctionne exactement comme l'insertion d'une image, mais à la place de l'image, il n'y a que du blanc ! Nous avouons que nous n'avons pas vraiment trouvé d'utilisation pour ce mode bloc ...
<BR> et l'attribut CLEAR :
L'utilisation de l'attribut CLEAR sur la balise <BR> permet de laisser un blanc d'espace entre une image et le reste de la page. En effet, en l'absence de cette balise, le texte coule naturellement entre l'image et le bord de la page.
Si l'image est positionnée à droite (align=right) pour laisser un blanc d'espace entre elle et le bord gauche de la page, on donnera à l'attribut CLEAR la valeur RIGHT :
<BR CLEAR=RIGHT>
A l'inverse, si l'image est positionnée à gauche :
<BR CLEAR=LEFT>
Ces deux possibilités sont intéressantes dans le cas de texte en colonnes. En effet, si l'on veut glisser une illustration dont la largeur est légèrement inférieure à celle de la colonne, on risque de créer une colonne de texte très étroite dans l'espace restant. L'utilisation de cette balise permet de supprimer cet effet inesthétique.
Si les deux images sont positionnées sur les bords gauche et droit de la page, pour laisser l'espace vide entre elles, on utilisera :
<BR CLEAR=ALL>
Exemple d'utilisation, en Style :
<HTML>
<TITLE> Taille et fontes de texte </TITLE>
<BR>
<BODY BGCOLOR="#FFFFFF"> <font size="+2"> Leçons Électroniques de Base </font>
<BR><BR>
<HEAD>
<STYLE>
#deux_colonnes {
width: 960px;
-webkit-columns: 2 auto;
-moz-columns: 2 auto;
columns: 2 auto;
}
#deux_colonnes p {
margin: 0;
background-color: #E9E9E9;
}
</STYLE>
</HEAD>
<BODY>
<div id="deux_colonnes">
<p> <font size="6">N</font><font face="Arial" size="3" color="#000000">ous mettons volontairement notre texte de nos leçons Électroniques afin que l'exemple puisse fonctionner correctement dans les colonnes correspondantes prévues à cet effet : </p> <BR>
<img src="images/Enfant_4.jpg" border="0" width="100" height="100" style="float:left; margin-right:10px;"> <p clear="left"> Le courant I fourni par la pile doit traverser successivement R1 puis R2 pour pouvoir revenir à la borne "-" de la pile.
Quand deux ou plusieurs éléments d'un circuit (dans ce cas deux résistances) sont traversés successivement par le même courant, on dit qu'ils sont reliés en série, ou plus simplement qu'ils sont en série.
Le fait que le courant circulant dans ces éléments soit le même pour tous est une caractéristique spécifique des liaisons en série, donc plusieurs résistances en série sont toutes traversées par le même courant. (Ceci est évident et facile à comprendre).
L'adjonction de la résistance R2 rend la valeur résistive totale du circuit plus grande que s'il n'y avait que la résistance R1, car le courant, outre l'obstacle <img src="images/Ma_Louloute.jpg" border="0" width="220" height="360" style="float:left; margin-right:15px;"><p clear="left"> causé par R1 à son passage, doit également traverser R2. Nous pouvons dire que la résistance totale du circuit de la figure 1 ci-dessus qui s'oppose au passage du courant est donnée par la somme des valeurs résistives de chaque résistance. Rappelez-vous que :
La résistance équivalente présentée par plusieurs résistances reliées en série s'obtient en additionnant la valeur résistive de chacune des résistances.
Regardons maintenant ce qu'il advient de la tension délivrée par la pile. Aux bornes de chaque résistance, il apparaît une tension et ceci conformément à la loi d'Ohm.
Pour la figure 1, La tension V de la pile se partage entre les deux résistances R1 et R2 présentes dans le circuit. Aux bornes de R1 apparaît une tension V1 (déterminée par les valeurs de I et de R1) et aux bornes de R2 apparaît une tension V2 (déterminée par les valeurs de I et de R2). La somme de ces deux tensions est égale à la tension totale de la pile : V1 + V2 = V.
Illustrons par un exemple ce qui vient d'être affirmé.
Figure 2 est reporté le même circuit mais certaines grandeurs électriques sont agrémentées d'une valeur. </p> </font>
Il y a un certain nombre d'attributs de la balise <BODY> permettent de contrôler la couleur de fond de la fenêtre du browser, des caractères du texte et enfin des liens.
L'utilisation de la balise reste inchangée dans la structuration du document HTML :
Cet attribut permet de choisir une couleur pour le fond de n'importe quelle page HTML. Il peut être utilisé sans restriction, car à l'inverse de l'attribut BACKGROUND, il ne consomme pas de bande passante sur le réseau.
Attention à l'abus de ce genre d'artifices, qui peut nuire à la lisibilité de la page et donner un aspect trop clinquant au document.
<BODY BGCOLOR="#rrggbb">
<BODY BGCOLOR="#FFFFFF">
On obtient ainsi une page HTML sur fond blanc, alors que par défaut le fond de la page est gris sur certains browsers.
L'attribut BACKGROUND :
Cet attribut permet de spécifier non plus une couleur mais une image ; celle-ci résidant sur le serveur, on augmente le temps de chargement de la page vers le browser
Le choix de l'image est très important : la texture de l'image devrait être simple et relativement monochrome pour préserver la ligibilité de la page ; en outre, plus sa taille (en octets) sera faible, plus rapide sera son chargement des pages HTML.
<BODY BACKGROUND="fichier_graphique.gif">
fichier_graphique.gif représente l'URL de l'image qui se trouve sur le serveur
Exemple :<BODY BACKGROUND="Decore.gif">
La couleur du texte ci-après :
L'attribut TEXT :
Cet attribut permet de contrôler la couleur du texte standard, c'est-à-dire tout texte ne spécifiant pas un lien. Cet attribut permet d'agir sur l'ensemble du document contrairement à ce qui peut être fait sélectivement par la balise <FONT> et son attribut COLOR. Le codage de la couleur se fait de la même façon que pour l'attribut BGCOLOR.
Exemple :<BODY TEXT="#rrggbb">
Les attributs LINK, VLINK et ALINK :
Ces trois attributs permettent de contrôler la couleur des liens (soit du texte, soit du cadre autour d'une image utilisée en guise de lien).
LINK est la couleur d'un lien qui n'a pas encore été visité (bleu par défaut).
ALINK est la couleur très fugitive qui apparaît au moment où l'on clique sur un lien (rouge par défaut).
VLINK est la couleur d'un lien qui a déjà été visité (voilet-pourpre par défaut).
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Réglage des couleurs de la page </TITLE>
Dans cet exemple, le texte de visualisation pour la couleur standard apparaîtra en bleu, les liens non visités en rouge, le lien au moment du clic en jaune, et le lien déjé visité en vert, le tout sur fond noir.
Nous résumons cette leçon ci-après :
Réglage des caractères <FONT> </FONT>
Avec l'attribut SIZE=n, on définit une taille entre 1 et 7.
Avec l'attribut SIZE=+n, on définit la taille par rapport à la taille courante, à savoir 3.
Avec l'attribut COLOR="#rrggbb" pour donner une couleur.
Avec l'attribut FACE=Police 1, Police 2, Police 3, on permet de choisir la police du texte, pour peu qu'au moins une des trois polices spécifiées réside sur l'ordinateur.
Colonnage du texte : <MULTICOL> </MULTICOL> (sur certains navigateurs)
L'attribut COLS=n donne le nombre (n) de colonnes du texte.
L'attribut WIDTH=x permet de forcer la taille des colonnes en pixels.
L'attribut GUTTER=x permet de donner la taille de la gouttière en pixels (espace intercolonne).
L'attribut TYPE permet de préciser si l'on agit horizontalement (horizontal), verticalement (vertical) ou dans les deux sens (BLOCK).
L'attribut SIZE permet de spécifier la quantité de blanc (l'espacement) en pixels pour TYPE=HORIZONTAL ou pour TYPE=VERTICAL.
Les attributs WIDTH=x et HEIGHT=y permettent de spécifier la taille xy en pixels d'un bloc (TYPE=BLOCK).
L'attribut ALIGN prenant une des valeurs TOP, BOTTOM ou CENTER, on peut aligner le bloc (TYPE=BLOCK) par rapport aux objets qui l'entourent.
La balise <BR CLEAR=>
CLEAR=RIGHT pour empêcher le texte de couler sur la gauche d'une image située à droite.
CLEAR=LEFT pour empêcher le texte de couler sur la droite d'une image située à gauche.
CLEAR=ALL pour empécher le texte de couler entre deux images, l'une située à droite et l'autre à gauche de la page.
Le font de la page :
Avec une couleur de fond : <BODY BGCOLOR="#rrggbb">
Avec une couleur de fond : <BODY BACKGROUND="url_image">
La couleur du texte et la couleur des liens.
Couleur de texte : <BODY TEXT="#rrggbb">
Couleur des liens non visités : <BODY LINK="#rrggbb">
Couleur des liens visités : <BODY VLINK="#rrggbb">
Couleur du lien au moment du clic : <BODY ALINK="rrggbb">
Les couleurs sont définies dans le système RGB, chaque composante étant définie sur deux octets dont chacun peut prendre une valeur comprise entre 0 et F (exprimée en hexadécimal).
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page