Michel Llibre - Mai 2025
15.1 Les balises input (text, button, checkbox, radio) et button |
4.4.2 Balise possédant un attribut de valeur contenant une partie donnée |
Site pour valider du code HTML : The W3C Markup Validation Service
Principaux systèmes permettant de créer des pages dynamiques
•ASP.net : Active Server Pages, langage de la plateforme .NET de Microsoft.
•JSP/Servlet : Java Server Pages. Moteur de pages dynamiques de Sun, en Java.
•PHP : Projet open source.
Un document HTML5 comporte normalement la première ligne suivante qui indique que le type du document est du HTML :
<!DOCTYPE html>
Les anciens documents XHTML 1.0 comportaient tout au début les lignes suivantes :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Heureusement c'est du passé!
Le langage HTML est du XML (Extensible Markup Language) avec des balises, des attributs et des propriétés (valeurs) adaptés à la description des pages internet.
Généralement les balises fonctionnent par paire : <balise>......</balise>.
Mais on utilise également des balises orphelines :<balise />, par exemple <img xxx/> ou <basefont xxx/>, où les champs xxx contiennent les attributs précisant les fonctions à réaliser. Le / final avant le dernier > n'est pas obligatoire et tend à disparaitre.
Le nom de la balise (orpheline ou non) peut être suivi d'attributs
Un attribut est un nom suivi du signe égale (=) et d'une valeur ou plusieurs. La casse du nom des attributs n'est pas significative, mais certains préconisent l'utilisation des minuscules. La valeur peut être mise telle que, ou entre guillemets, simples ou doubles (ces derniers sont préconisés).
Tout le code significatif du langage HTML est compris entre les deux balises <html> code html </html>. La casse des balises n'est pas significative, mais certains préconisent l'utilisation des minuscules.
Dans cette balise on peut mettre l'attibut <html lang="fr"> qui spécifie la langue utilisé ce qui est utile pour le référencement et les traductuers autmatiquess.
Le code html comprend deux sections qui sont :
•la section <head> Infos </head> où on stocke des informations relatives au document (titre, auteur, caractères utilisés, ...), mais qui ne seront pas affichées
•la section <body> Body </body> où on met les éléments (texte, images, etc...) qui seront affichés
Commentaire : Toute partie comprise entre <!-- et --> n'est pas interprétée. C'est un commentaire.
•<meta charset="utf-8" /> permet de déclarer le codage utilisé pour le texte. Attention à bien enregistrer le fichier avec ce codage !!.
•<meta name="author" content="Chris Mills"> permet de préciser l'auteur.
•<meta name="description" content="Cours de HTML"> permet de préciser le contenu. Cette dernière est très importante car c'est son texte qui est affiché par les moteurs de recherche.
•<meta http-equiv="refresh" content="0; url=newpage.php"> permet d'effectuer une redirection de la page vers newpage.php.
•<meta name="viewport" content="width=device-width, initial-scale=1" /> permet d'adapter le contenu au dispositif d'affichage. Est utile dans le cas où la page peut être affichée sur un smartphone.
•<titre>Titre de la page</titre> permet de donner un titre non affiché à la page qui peut apparaitre dans le titre ou l'onglet du navigateur et dans les résultats de recherche Google par ex.
•<link rel="shortcut icon" href="rose.png"/> ou
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
permet d'adjoindre une icone au titre qui apparait dans l'onglet.
•<link rel="stylesheet" type="text/css href="monstyle.css" media="all"> permet de lier un fichier feuille de style (voir paragraphe 3.
•<script language="JavaScript" src="cliqu4.js"></script> permet d'insérer un fichier javascript.
La partie comprise entre les balises <body> et </body> constitue le corps du document affiché. A l'intérieur de la balise ouvrante < body .....> on peut mettre des attributs qui vont s'appliquer à tout le document. Exemples :
text=#BA48DF fixe la couleur du texte de toute la page en violet (couleur rvb avec #000000=noir, #FF0000=rouge et #FFFFFF=blanc)
bgcolor="green" fixe la couleur du fond de toute la page en vert.
background="http://michel.llibre.pagesperso-orange.fr/img/2004-imgp1302.jpg" met une image localisée par son url en fond d'écran. Si l'image est dans le même système informatique que la page d'acceuil, elle peut être localisée relativement à celle-ci. Exemple :
background="2004_1.jpg" ou ="./2004_1.jpg" si cette image est située dans le même répertoire que la page d'acceuil.
Les 3 attributs suivants concernent les liens qui figurent entre les balise <a> </a>, cf paragraphe 9 :
link="couleur d'un lien avant clic" (bleu par défaut)
alink="couleur d'un lien pendant le clic" (rouge par défaut)
vlink="couleur d'un lien déjà exploré" (bleu par défaut). Il semble que cet attribut ne fonctionne pas.
Les propriétés faisant référence à des dimensions peuvent être spécifiées à l'aide de différentes unités de mesure absolues ou relatives.
•mm : millimètre (marges, espace entre mots et lettres, hauteur des lignes, ...)
•cm : centimètre (utilisation idem)
•in : inch = 2,54cm (utilisation idem)
•pc : pica, 6pc = 1in
•pt : point, 12pt = 1pc, 72pt = 1in
•px : pixel, unité utilisée par défaut en l'absence de précision qui dépend du mode d'affichage de l'écran (VGA=640x480, SVGA-I=800x600, SVGA-II=1024x768,...).
•ch : largeur de la fonte locale standard
•em : 1em = hauteur de la fonte locale standard.
•% : en pourcentage de la taille en cours ou par défaut de la propriété considérée.
•vw : 1% de la largeur de la zone d'affichage (viewport)
•vh : 1% de la hauteur de la zone d'affichage (viewport)
16 noms de couleurs réservés :
•blue, green, white, black, ...
•#RRVVBB avec RR, VV, BB en hexadéciaml compris entre 00 et FF
•#RVB avec R,V,B en hexa compris entre 0 et F, la couleur générée étant obtenu en répétant les valeurs R,V et B : #RVB -> #RRVVBB.
•rgb(rr, vv, bb) avec rr, vv, bb en décimal entre 0 et 255 ou en % (100%=255).
•rgba(rr,vv,bb,op) avec op réel de 0 (transparent) à 1 (opaque).
Elles définissent un élément physique de la page, généralement une certaine zone précédée et suivie par un double interligne, à l'exception d'un seul interligne pour l'élément <div>.
Les balises d'éléments de niveau bloc sont opposés aux balises de niveau ligne que l'on trouve à l'intérieur des éléments de niveau blocs.
Parmi les éléments de niveau bloc, on trouve :
Balise de paragraphe
•<p> Paragraphe ordinaire précédé et suivi d'un double interligne</p>
•<blockquote>Paragraphe décalé</blockquote>
•<pre>Paragraphe verbatim avec texte en police à largeur fixe (espaces et sauts de lignes conservés)</pre>
•<div>pour isoler quelques lignes, largeur infinie (cadre éventuel étendu jusqu'au bord du navigateur)</div>
•<fieldset> ...</fieldset> : Un cadre pour entourer toute une section avec un titre inséré dans la bordure supérieure au moyen de <legend> titre</legend>
Balises de titre :
•<h1> Titre (idem P), en très gros et gras<h1>
•<h2> Titre (idem P), en gros et gras<h2>
•<h3> Titre (idem P), en moyen et gras<h3>
•<h4> Titre (idem P), taille standard et gras<h4>
•<h5>Titre (idem P), mais en petit et gras<h5>
•<h6> Titre (idem P), mais en très petit et gras<h6>
Listes :
•<ul>...</ul> Liste un-ordonnée (à puces). Les éléments sont à enserrer dans <li>...</li> et un titre éventuel (sans puce) entre <lh>...</lh>.
◦attribut type=circle (○), disc (●), square (■)
◦attribut compact la liste est présentée de façon compacte
•<dl>...</dl> Liste de définition (à puces). Les éléments sont à enserrer entre <dt>...</dt> ou <dd>...</dd>
•<ol>...</ol> Liste ordonnée (numérotée). Les éléments sont à enserrer dans <li>...</li> et un titre éventuel (sans puce) entre <lh>...</lh>.
◦attribut type=A (A,B,C,..), a (a,b,c,..), I (I,II,III,IV,..), i (i,ii,iii,...), 1 (1,2,3,…),
◦attribut start=index de départ.
•<table>...</table> Enserre une table gérée par les balises suivantes
◦<tr>....</tr> Enserre une ligne gérée par les balises suivantes (tr pour table raw)
▪<th>...</th> Enserre un élément de colonne centré et gras (type titre colonne)
▪<td>...</td> Enserre un élément de colonne ordinaire cadré à gauche.
Attribut de la balise td :
•align=left|center|right
•bgcolor=couleur de fond de la case
•colspan=nb de cases occupées en colonne par l'élément
•rowspan=nb de lignes occupées par l'élément
Exemple :
<table>
<tr>
<th>Titre01</th> <th>Titre02</th> <th>Titre03</th> <th>Titre04</th>
</tr>
<tr>
<td>El. 11</td> <td>El. 12</td> <td>El. lin 13</td>
</tr>
<tr>
<td>El. 21</td> <td>El. 22</td>
</tr>
<tr>
<td>El. lin 31</td> <td>El. 32</td> <td>El. 33</td> <td>El. 34</td>
</tr>
</table>
Balises spéciales break et espaces particuliers
On peut spécifiers les espaces particulier suivants :
•fin par  
•insécable par
•demi-cadratin par  
•cadratin par  
•<br> ou <br/> : Balise orpheline produisant un retour ligne à l'intérieur d'un paragraphe.
•<hr> ou <hr/> : Trace un trait horizontal dans le document
On trouve ces balises à l'intérieur des d'élément de niveau blocs pour particulariser certaines parties internes.
•<span>pour isoler quelques mots</span>. Surtout utilisées pour introduire un style au moyen de l'attribut class cf. paragraphe 2) mais aussi pour définir un passage dans une autre langue avec l'attribut lang, ex : <span lang="jp">ご飯が熱い。</span>
Si on encadre, l'encadrement suit le contour du texte.
Balises modifiant localement la police du texte :
•<b>police grasse</b>
•<u>police souslignée</u>
•<i>police italique</i>
•<strike>police barrée</strike>
•<sub>position en indice</sub>
•<sup>position en exposant</sup>
•<small>petite police</small>
•<em>Attention : généralement idem italique</em>
•<strong>Important : idem police grasse</strong>
•<mark>Remarquable : généralement sousligné ou sur fond coloré en jaune</mark>
•<code>du code</code>
•<pre> : pour conserver les blancs (généralement dans les blocs de code)
•<var> : pour marquer spécifiquement les noms de variables.
•<kbd> : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.
•<samp> : pour marquer une sortie de programme.
•<basefont..../> voir ci-après...
•<font> voir ci-après...
La paire de balise <font ... >texte... </font> précise le format du texte qu'elle enserre. Ensuite le texte reprend le format qu'il avait avant.
La balise orpheline<basefont..../> précise le format du texte jusqu'à ce que ce format soit modifié par une nouvelle balise <basefont..../>.
Le format est spécifié par les attributs :
•face (times, verdana, ...) : on peut mettre plusieurs valeurs ("verdana,sans-serif,times") séparées par des virgules. La première disponible sera utilisée.
•size (1 à 7, 3 par défaut)
•color (red, yellow, pink,... #rrvvbb où rr, vv et bb est la valeur hexadécimale de 00 à ff précisant la quantité de rouge, vert et bleu).
Le fonctionnement de l'attribut size est différent dans basefont et font : Dans basefont on spécifie la taille en absolue size=2 par exemple, alors que dans font, on le spécifie en relatif à la taille par défaut size=-1 par exemple.
En HTML5 les balises <basefont..../> et <font> ne sont pas recommandées. La mise en forme devant être confiée à CSS.
L'attribut style est un attribut universel qui peut être utilisé pour n'importe quel élément. Toutes les éléments peuvent être pourvues d'un attribut de style (et un seul par élément) qui permet de préciser un ou plusieurs couples attributs de style:propriété valables dans la région. Si plusieurs couples sont précisées, on les sépare par un point virgule (;). Les valeurs (propriétés) sont précisées après un deux-points (:). Comme on le voit le vocabulaire est un peu confus. l'attibut de style est également appelé proriété et la valeur affectée est également appelée propriété. Exemples :
style = "font-family:arial ; font-size:16pt ; border-width:large ; height:100"
Les propriétés précisées au niveau de l'attribut style peuvent concerner l'encadrement de la région, ses dimensions, son fond, la police de caractère et le formatage du texte (décoration, indentation, alignement).
Remarque : En HTML5 l'utilisation de cet attribut style à l'intérieur du document html est déconseillée. On conseille de passer plutot par une feuille de style.
Cas d'utilisation classiques de flexbox - CSS : Feuilles de style en cascade | MDN (mozilla.org)
La propriété display est très importante car c'est elle qui permet de poistionner un élément à l'intérieur de son conteneur. Elle peut prendre les valeurs suivantes :
none : l'élément n'est pas affiché et sort du flux.
inline : l'élément est interprété comme étant un seule ligne, ex: span.
block : l'élément est interprété comme un bloc, ex: div.
inline-block : l'élément est interprété comme à un élément inline avec un comportement bloc, ce qui permet de le positionner à gauche (par défaut, au centre ou à droite.
list-item : l'élément est interprété comme un bloc principal avec dedans un élément inligne pour un item de liste. Ex: li.
flex : l'élément est interprété comme un élément block de type qui contient des éléments de largeurs adaptables, dont la méthode d'adaptation sera précisée par une des propriétés de flex.
grid : l'élément est interprété comme un élément block de type conteneur d'élément grille.
... et encore d'autres...
La propriété flex-direction peut être utilisée pour indiquer comment les éléments flexibles sont placés à l'intérieur du conteneur :
row : en ligne (par défaut)
row-reverse : en ligne ordre inversé
column : en colonne
column-reverse : en colonne ordre inversé
Trois propriétés : flex-grow, flex-shrink et flex-basic permettent de préciser comment les éléments flexibles s'adaptent :
•flex-grow définit le facteur d'expansion d'un élément flexible selon sa dimension principale (voir flex-direction) lorsque la taille des tous les éléments flexibles est inférieure à l'espace disponible . C'est la quantité d'espace libre que l'élément va s'attribuer (0, il ne grossit pas). Son taux d'expansion dépend de celui des autres éléments. Si tous ont la même valeur, l'espace libre sera partagé. Par défaut : 0 : il ne grossit pas.
•flex-shrink définit le facteur de compression de l'élément si la taille de tous les éléments est supérieure à l'espace disponible. 0, il ne se comprime pas, et 1, par défaut, il se comprime si nécessaire.
•flex-basis détermine la taille initiale principale de l'élément flexible qui est utilisée pour déterminer la taille du conteneur (sauf si précisée différemment). Il a dans ce cas une unité. Il peut prendre aussi la valeur auto (par défaut)
La propriété flex permet de spécifier simultanément les 3 propriétés flex-grow, flex-shrink et flex-basis.
: Elle peut être utilisée avec 1, 2 ou 3 valeurs qui sont attribuées aux propriétés flex-grow, flex-shrink et flex-basis.
- trois valeurs : flex-grow flex-shrink flex-basis
- deux valeurs : (flex-grow=flex-shrink) flex-basis
- une seule valeur : (flex-grow=flex-shrink) | flex-basis
- 1 valeur numérique réelle sans unité définit son (flex-grow=flex-shrink)
- 1 seule valeur avec unité définit son flex-basis
Valeurs littérales :
none : => 0 0 auto : ne peut pas s'étirer ou retrécir. Est tracé à sa taille nominale
auto : => 1 1 auto : tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique
initial : => 0 1 auto : ne s'étire pas et peut rétrécir à son minimum, dim auto (par défaut).
La propriété justify-content permet de gérer l'espace dans le sens de l'axe principal défini par flex-direction (axe horizontal par défaut), ce qui suppose que tous les éléments ont un flex-grow à 0 (valeur par défaut) car sinon un ou plusieurs éléments vont s'étirer pour occuper l'espace disponible. Les valeurs définies sont les suivantes :
start : les éléments sont tassés coté début
center : les éléments sont tassés au centre
space-between : les éléments sont tassés sur les bords laissant un vide entre eux
space-evently : Un espace égal sépare les éléments (simple entre 2 éléments)
space-around : Un espace égal entoure les éléments (doublé entre 2 éléments)
La propriété align-items permet de gérer l'espace dans le sens de l'axe perpendiulaire à l'axe principal défini par flex-direction (dans le sens de l'axe vertical par défaut). Elle peut prendre les valeurs suivantes :
stretch : l'objet s'étire à tout l'espace disponible
center : centre l'objet
start : se place en haut ou à droite selon flex-direction
end : se place en bas ou à gauche selon flex-direction
La propriété align-self s'applique à un item, et elle surpasse la propriété précédente align-items.
#menu {
display: flex;
justify-content: center; /* Centre horizontalement sur l'axe principal */
align-items: start; /* placé en haut sur l'axe transversal */
border: 1px solid black; /* Bordure pour visualiser le conteneur */
gap: 10px; /* Espace entre les éléments */
}
Ces lignes définissentt le style d'un contener d'id="menu".
flex-direction n'est pas utilisé, l'axe principal est l'axe horizontal par défaut.
Les éléments à l'intérieur du contener seront centrés horizontalement (justify-content: center;)
Les éléments à l'intérieur du contener seront centrés verticalement (align-items: center)
La propriété position definit la façon dont l'élément est position dans le document ou son conteneur, conjointement aux propriétés top, right, bottom et left.
•position : static | absolute | relative | fixed | sticky
◦static : (défaut) positionnement à la suite (top, bottom, ... sont sans effet)
◦relative : positionnement à la suite, puis décalé des valeurs indiquées par top, bottom,... Ne doit pas être utilisé dans une table.
◦absolute : absolu en fonction de top, bottom,.. par rapport au document ou à son conteneur si celui-ci à la propiété relative.
◦fixed : fixe dans la page (n'est pas scrollé) en fonction de top, bottom,...
◦sticky : positionnement à la suite (comme relative), puis, lors des scrolls se comporte en fixed au-dela d'un certain seuil.
•top, right, bottom et left : sont précisés avec les diverses unités de longueur.
Utilisables pour toute zone, mais surtout utilisé pour positionner des images relativement à du texte qui se positionnera dans la zone restante du conteneur.
•float : Précise si l'élément est flottant
◦none : par défaut, l'élément n'est pas flottant
◦left : L’élément va venir se positionner à l’extrémité gauche de son élément conteneur ou va être décalé sur la gauche jusqu’à toucher un autre élément avec float : left ;
◦right : L’élément va venir se positionner à l’extrémité droite de son élément conteneur ou va être décalé sur la droite jusqu’à toucher un autre élément avec float : right ;
◦inline-start : L’élément va venir se positionner au début de son élément conteneur (c’est-à-dire à gauche pour des documents dont l’écriture se fait de gauche à droite ou à droite dans le cas contraire) ou va être décalé vers le début de son conteneur jusqu’à toucher un autre élément avec float : inline-start ; [idem left pour écriture de gauche à droite]
◦ inline-end : L’élément va venir se positionner à la fin de son élément conteneur (c’est-à-dire à droite pour des documents dont l’écriture se fait de gauche à droite ou à gauche dans le cas contraire) ou va être décalé vers la fin de son conteneur jusqu’à toucher un autre élément avec float : inline-end. [idem right pour écriture de gauche à droite]
•clear : Pour supprimer le positionnement à coté initié par un float :
◦none : Valeur par défaut. Laisse les éléments se positionner à côté d’éléments flottants ;
◦left : Empêche un élément de se positionner à côté d’éléments possédant un float : left ;
◦right : Empêche un élément de se positionner à côté d’éléments possédant un float : right ;
◦both : Empêche un élément de se positionner à côté d’éléments possédant un float : left ou un float : right ;
◦inline-start : Empêche un élément de se positionner à côté d’éléments possédant un float : inline-start ;
◦inline-end : Empêche un élément de se positionner à côté d’éléments possédant un float : inline-end.
Généralement on applique float:left ou float:droit à un cadre que l'on veut placer à gauche ou à droite avec du texte à coté, puis on appliquera clear:both au paragraphe à partir duquel on veut faire cesser la réservation précédente.
La propriété z-index permet de spécifier quels éléments sont dessus ou dessous quand il occupent la même position à l'intérieur de leur parent. Elle peut prendre des valeurs entières à partir de 0 (tout derrière) ou la valeur auto qui place le dernier élément défini au-dessus du précédent.
Propriétés pour la police des caractères de la section :
•font-familly ; Pour toutes pages WEB : Arial, Helvetica, "Times New Roman", Times, "Courier New", Courier. Sur PC et Mac : Verdana, sans-serif, Gergia, serif, "Comic Sans MS", "Trebuchet MS", "Arial Black", "Impact"
On peut en préciser plusieurs, la 1ère trouvée sera utilisée. Les polices serif et sans_serif sont les polices par défaut. Mettre entre guillemets si présence d'un espace ex :"Arial Black"
•font-style avec pour valeurs : italic, oblique, normal,
•font-weight (épaisseur) avec pour valeurs : bold ou normal,
•font-size : taille des caractères, absolue en unité définies en unités (voir 4), ou en relatif :
◦xx-small : minuscule; x-small : très petit ; small : petit ;medium : moyen (=1em) ;large : grand ;x-large : très grand ;xx-large : gigantesque.
◦large, smaller
◦12px, 0.8em, 80%
◦inherit, initial, unset
•color : couleur des caractères
•text-decoration : underline : souligné, line-through : barré, overline : surligné, blink : clignotant (ne fonctionne pas sur tous les navigateurs : Internet Explorer et Google Chrome, notamment), none : normal (par défaut).
•text-shadow : (CSS3) prend valeurs dans l'ordre suivant : decalX decalY dégradé couleur. Avec 0px pour le dégradé l'ombre est nette, et elle est très floue si elle est égale à decalX ou decalY.
Le modèle de Boîte - Apprendre le développement web | MDN (mozilla.org)
Propriétés du cadre autour de la section :
•width:100px ... largeur imposée au cadre enserrant la section
•height:100pt ... hauteur imposée au cadre enserrant la section. Si le texte ne contient pas, il va déborder en dessous en surimpression sur le texte suivant.
Si la propriété display:inline est présent, et pour tous les éléments en-ligne par défaut, width et height sont ignorés.
•border-style: solid ou none : encadré plein ou invisible autour de la section
•border-width: thin ou thick : encadré étroit ou large
•border-color: blue ou ... #FFCC00, .. : couleur du cadre
•background-color: blue ou ... #FFCC00, .. : couleur du fond
•padding:10pt ... espace vide à l'intérieur du cadre et son contenu, tout autour. Une valeur pour les 4 paddings, 2 valeurs pour haut&bas et gauche&droite, 3 valeurs pour haut, gauche&droite et bas, 4 valeurs pout haut, droite, bas, gauche. Il est plus facile d'utiliseur les raccourcis padding-right: padding-left: padding-top: et padding-bottom.
•margin : taille des marges (partie laissée vide à l'extérieur du cadre).
◦2 valeurs : haut-bas , gauche-droite,
◦3 valeurs : haut-gauche, droite, bas,
◦4 valeurs haut, droite, bas, gauche.
Il est plus facile d'utiliseur les raccourcis margin-right: margin-left: margin-top: et margin-bottom.
On spécifie la référence du dimensionnement par :
•border-width :
◦content-box : (défaut) s'adapte à taille du contenu ou à la valeur indiquée par la propriété width. Les bordures et padding seront ajoutés à ses dimensions
◦border-box : Les bordures et padding seront retranchées des dimensions pour respecter la propriété width ou autre.
•On peut spécifier la largeur des bordures, la couleur et le type des bordures séparément avec
•border-width : valeur
•border-color : couleur
•border-type : none | solid | dotted | dashed | double | groove (en relief) | ridge (autre relief) | inset (3D enfoncé), outset (3D surélevé)
ou globalement avec la super-propriété
•border. ex : border: 3px blue dashed.
On peut appliquer ces propriété qu'à un des cotés avec les 4 super-propriétés
•border-top,
•border-bottom,
•border-left,
•border-right.
et les propriété simples existent aussi, comme par exemple :
•border-top-widht, border-top-color, border-top-type.
•...
A partir de CSS3 on peut spécifier le rayon de l'arrondi des angles avec la propriété :
•border-radius :
◦un seul rayon pour les 4 angles
◦4 rayons, un pour chaque angle dans l'ordre haut-gauche, haut-droit, bas-droit, bas-gauche.
On peut donner une forme elliptique avec 2 rayons comme ceci r1/r2 à la place du rayon unique r.
A partir de CSS3 on peut spécifier l'ombre d'une région au moyen du super-attribut de style :
•box-shadow : avec 4 valeurs dans l'ordre suivant : decalX decalY degradé couleur.
avec 0px pour le degradé l'ombre est nette, et très floue si elle est égale à decalX ou decalY.
Dans la section le texte peut être formaté au moyen des propriétés suivantes :
•text-align : left, right, center, justify
•text-indent : 24pt, -24pt, etc...
On utilise le codage des couleurs déja vu en 5 pour les deux propriétés de couleur :
•color : couleur des caractères, propriété déja rencontrée
•opacity : niveau d'opacité de 0 (transparent) à 1 (opaque)
•backgroung-color : couleur du fond
•background-image:url("nom_image.png") : permet de mettre une image en fond de la zone,
•background-attachment:fixed | scroll (par défaut) suivant que l'on veut que le fond soit scrollé en même temps que le texte (scroll) ou que le fond soit fixé (fixed) et que le texte défile devant ce fond.
•background-repeat: repeat-x| repeat-y | repeat | no-repeat (par défaut) suivant que l'on veut que le fond soit répété seulement en X, en Y, les deux ou pas du tout.
•background-position:posX posY (par défaut) positionne l'image à cet endroit, intéressant dans le cas no-repeat. On peut utiliser top, bottom, left, right, center et les combiner séparés par un espace.
Super-propriété
•background : regroupe toutes les propriétés background-xyz. On met toutes les valeurs à la suite, séparées par des espaces : Exemple :
background:url("soleil.png") fixed no-repeat top right, url("neige.png") fixed;
De plus sur cet exemple 2 configurations sont considérées, séparées par une virgule. La dernière image est placée en premier, et les autres par dessus, la première image de la liste étant au-dessus de toutes les autres.
On peut modifier la forme du curseur au passage dessus d'une zone avec la propriété cursor qui peut prendre de nombreuses valeurs :
/* Valeurs avec un mot-clé */
cursor: pointer;
cursor: auto;
/* Une valeur d'URL avec un mot-clé par défaut */
cursor: url(hand.cur), pointer;
/* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* Valeurs globales */
cursor: inherit;
cursor: initial;
cursor: unset;
Les mots clés suivants sont habituels :
|
auto | default |
none |
context-menu |
help |
pointer |
progress |
wait |
cell |
crosshair |
|
variable |
 |
|
 |
 |
 |
 |
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
|
text |
vertical-text |
alias |
copy |
move |
no-drop |
grab |
not-allowed |
all-scroll |
col-resize |
 |
 |
 |
 |
 |
 |
 |
 |
|
 |
|
|
|
|
|
|
|
|
|
|
|
row-resize |
e-resize |
s-resize |
w-resize |
ne-resize |
nw-resize |
se-resize |
sw-resize |
ew-resize |
ns-resize |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
|
nesw-resize |
nwse-resize |
zoo-in |
zoom-out |
|
|
|
|
|
|
 |
 |
 |
 |
|
|
|
|
|
|
Une ancre est définie dans une section quelconque du document à l'aide de l'attribut id, par exemple comme ceci : <p id="hautPage">Début du document</p>
Les balises <a href="url"> ..</a> définissent un lien hypertexte vers une autre url. Lorsque l'utilisateur clique sur l'élément situé entre les deux balises <a> </a>, le navigateur ouvre la page spécifiée par l'attribut href de cette balise (ce qui suppose que cet attribut soit bien renseigné). Exemple :
<a href="http://www.llibre.fr">Cliquer ici pour aller sur mon site</a>
D'une autre page, on peut se diriger directement vers une section spécifiée par une ancre en faisant suivre l'url la page du nom de l'ancre : http:\\www.mapage.html#hautPage
Entre les balises <a ..> et </a> on peut mettre :
•un texte qui apparait sous une forme particulière qui est généralement du bleu sousligné. On peut modifier la couleur de ce lien avec les attributs link, alink et vlink de la balise <body> paragraphe 3.
•une image (par exemple une miniature si le lien pointe une grande image),
•mais aussi un bloc quelconque créé entre 2 balises bloc.
Attributs :
•href : cet attribut défini la cible du lien. Il peut être :
◦l'url vers une autre page internet externe ex : "http://www.llibre.fr"
◦le nom d'un fichier local html, image (jpg, ...), ...
◦un lien courriel : href="mailto:toto@wanadoo.fr" provoquera l'appel de l'application de messagerie avec l'adresse mail indiquée, ou sans adresse pour href="mailto:"tout court.
◦une ancre intérieure d'une page. Dans ce cas son nom sera précédé du caractère #, ex: <a href="#dansPage">Va à la balise dansPage</a>
<a href="#">Ne bouge pas</a>
<a href="">Rafraichit la page</a>
◦une fonction javascript qui s'exécutera lors du clic.
◦Remarque : Dans le cas d'une url, elle ne doit comporter que des caractères ascii simples. Il faut remplacer les autres caractères, et en particulier le "&" par son équivalent html qui est "&".
•titre : pour générer une info-bulle donnant un petit descriptif sur le contenu de la page cible. Le pb est qu'elle met du temps à apparaitre.
•target : si l'attribut est absent l'affichage de la cible du lien se fera dans l'onglet courant, sinon avec target="_blank" il se fera dans un nouvel onglet.
•download : l'attribut download="nomfich.xyz" permet de télécharger la cible (au lieu de l'afficher) et en plus, si celui-ci est indiqué (le ="nomfich.xyz" est facultatif) de fournir un nom au fichier d'enregistrement (que l'utilisateur pourra modifier) qui se fera dans le répertoire download.
Complément dans les adresses url ou mail : On peut utiliser le ? puis les & pour spécifier des compléments cc (carbon copy), bcc (blid cc), subject et body (attention les espaces, guillemets, etc doivent être codés en html bas niveau). Exemples :
mailto:nullepart@mozilla.org,personne@mozilla.org
mailto:nullepart@mozilla.org?cc=personne@mozilla.org
mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20l%27objet
mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel
Exemple d'utilisation pour télécharger un fichier :
function txtdownload(strin, fichdest) {
var el_a = document.createElement('A');
el_a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(strin);
el_a.download = fichdest;
el_a.click();
}
txtdownload('Bonjour tout le monde\nBonjour, au revoir.', 'essai.txt');
On peut également insérer dans le html un pseudo-lien vers du code javascript qui affiche une fenêtre popup comme suit :
<a href="javascript:alert('Coucou !!')">Mon Lien</a>
L'insertion d'image gif, jpg, png, bmp se fait à l'aide de la balise orpheline <IMG.../>. Les principaux attributs sont :
•src="URL de l'image à afficher"
•alt="Texte à afficher si image introuvable", utile pour les moteurs de recherche
•title="Texte qui apparait dans une info-bulle"
•width=largeur et height=hauteur en pixels. Si les deux sont absent les dimensions d'origines sont conservées. Si l'un est absent, l'autre est calculé en conservant le ratio initial.
•usemap : Une image peut être découpée en zones et ces zones peuvent être utilisées pour activer des hyperliens. Pour cela, il faut definir un nom de découpage à l'aide de l'attribut usemap. Le nom doit être précédé du caractère #. ex: usemap="#monDecoupage".
•align="left" ou "right" pour placer l'image dans le paragraphe, soit calée à gauche, soit calée à droite, le texte remplissant la place restante de l'autre coté. Cet attribut est obsolète en HTML5, on privilégiera les propriétés CSS float et/ou vertical-align voire la propriété object-position qui permet de positionner l'image au sein de la boîte de l'élément.
En l'absence de l'attribut align, l'image est enserrée à la suite du texte, le bas de l'image posé sur la ligne de texte qui prend comme hauteur celle de l'image (généralement plus haute que le texte). est placé à la suite d'une ligne virtuelle de texte au bas de l'image.
Pour centrer une image on pourra utiliser les propriétés CSS suivantes :
style="display: block; margin-left: auto; margin-right: auto;"
•display: block; pour indiquer que l'image n'est pas mise en ligne à la suite du texte,
•margin-left: auto; margin-right: auto; pour que les marges des deux cotés soient égales.
On peut utiliser l'attribut titre pour faire apparaitre une info-bulle, mais celle-ci met du temps à apparaitre. On peut obtenir des info-bulles plus réactives à utilisant la détection du passage de la souris (hover) sur un élément du DOM et en réagissant à ce passage en affichant un élément caché qui contient le texte. Exemple :
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style>
/* Classe bulle utilisable dans un span
Le texte de l'info bulle doit être mis dans un span à l'intérieur du span qui active cette classe. Exemple.
<p>Si votre <span class="bulle">ramage<span>Chant des oiseaux</span></span>est aussi beau que votre plumage</p>
*/
span.bulle {
position: relative;
border-bottom: 1px dotted; /* On souligne le texte à renseigner. */
}
span.bulle span {
display: none; /* On masque l'infobulle. */
}
span.bulle:hover {
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
cursor: auto; /* On change le curseur par défaut par un curseur d'aide. */
}
span.bulle:hover span {
display: inline; /* On affiche l'infobulle. */
position: absolute;
white-space: nowrap; /* Pour éviter des retours lignes non désirés. */
top: 30px; /* On positionne notre infobulle. */
left: 20px;
background: white; /* Pour cacher le fond */
padding: 5px;
border: 1px solid;
border-left: 2px solid;
}
</style>
</head>
<body>
<p>Si votre <span class="bulle">ramage <span>Chant des oiseaux</span></span>est aussi beau que votre plumage</p>
</body>
</html>
Des découpages avec des hyperliens sont spécifiés à l'intérieur d'un champ <map ...>...</map>. L'attribut name de la balise map permet de donner un nom à ce découpage qui pourra être utilisé par les images le référençant au moyen de l'attribut usemap (en faisant précder le nom du name d'un #). Exemple :
<img src="testimg.jpg" usemap="#rose" width="277" height="149"/>
<map name="rose">
<area shape="rect" coords="0,0,95,75" alt="llibre" href="http://www.libre.fr">
<area shape="rect" coords="190,75,277,149" alt="cofinet" href="http://carnet.cofinet.fr">
</map>
La balise area permet de définir une zone affectée à l'hyperlien. La forme de la zone est spécifiée à l'aide de l'attribut shape : les valeurs possibles sont :
•shape="rect" coords="x1,y1,x2,y2"
•shape="circ" coords="x,y,R"
•shape="poly" coords="x1,y1,x2,y2,x3,y3,..,xn,yn"
•border : spécifie une bordure autour de l'image. Mettre border="0" permet de supprimer le cadre bleu mis autour de l'image quand elle est insérée entre les balises de redirection <a>..</a>
La région enserrée dans les balises <figure>...</figure> peut enserrer divers éléments dont une ou des images et la balise <figcaption>...</figcaption> qui va permettre de donner une légende à la zone. L'intérêt supplémentaire apporté par cette région est de permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple.
Exemple :
<figure>
<img src="images/internetexplorer.png" alt="Logo Internet Explorer" />
<img src="images/firefox.png" alt="Logo Mozilla Firefox" />
<img src="images/chrome.png" alt="Logo Google Chrome" />
<figcaption>Logos des différents navigateurs</figcaption>
</figure>
On peut insérer un fichier texte comme ceci :
<p><object data="verse2.txt" scrolling="auto"/></p>
L'usager peut entrer des informations ou déclencher des actions à l'aide de divers éléments définis par les balises <bouton...>, <input...> ... Les balises <input...> sont souvent enserrées dans une région délimitée par les balises <form...> ... </form>. Dans le cas où les balises input sont dansune région form, les informations (ou questions) peuvent être envoyées au serveur dans des variables (des tableaux) nommés POST ou GET selon la méthode choisie.
La balise input est une balise orpheline qui permet de définir un champ de saisie, un checkbox, bouton radio et zone de saisie, bouton à cliquer..., à l'aide des attributs suivants :
•type : Cest l'attribut type de la balise input qui permet de spécifier le type de contrôle : Il peut prendre les valeurs :
◦number : zone de saisie d'un nombre avec des flêche haut-bas pour incrémenter ou décrémenter. L'attribut value permet d'initialiser sa valeur.
◦range : un curseur pour définir une valeur numérique (0 à 100 par défaut). L'attribut value permet d'initialiser sa valeur.
◦text : la zone est une zone de saisie de texte d'une seule ligne. Utiliser la balise textarea à la place de la balise input pour du texte multiligne.
◦password : idem text mais ne le texte ne s'affiche pas
◦button : c'est un bouton permettant de lancer une action,
◦checkbox : c'est une case à cocher. L'attibut checked= "checked" permet de le préc-cocher (décochée si absent). Si l'attribut est utilisé, par ex value= "bidon", la variable POST[name] ou GET[name] contiendra "bidon" si la case est cochée, sinon il contiendra "on" quand la cas est cochée. Voir R. Nixon page 273-274.
◦radio : c'est une case à cocher. S'il y en a plusieurs à l'intérieur d'une zone form, elles seront mutuellement exclusives. Voir R. Nixon page 274.
◦file : Ouvre un navigateur de fichier pour la sélection d'un fichier (plusieurs lorsque l'argument multiple est présent avant l'argument file)
◦accept : permet de préciser le type de fichiers acceptés, par exemple ="video/*" ou ="image/png, image/jpeg" ou "audio/*" ou ="image/*, .pdf, .doc"... Si plusieurs filtres sont spécifiés, on les sépare par des virgules.
◦image : Cas particulier, voir paragraphe précédent. Ajouter width="50px" pour réduire sa taille.
◦time : une heure style 09:55. on peut ajouer les attributs mi='05:00" max='11:00'.
◦color : une couleur
◦submit :Offre un bouton pour soumettre les autres réponses d'une form au serveur par envoi d'un tableau POST ou GET.
•multiple : (avant type="file") pour sélectionner plusieurs fichiers.
•name : L'attribut name permet d'attribuer un nom au contrôle, nom qui permet éventuellement d'accéder à l'entrée de l'usager. Par exemple si un texte est entré par l'usager dans le contrôle suivant : <input type="text" name="mytxt"> le texte tapé par l'usager dans ce contrôle peut être accédé :
◦en JavaScript par le champ value de l'attribut name : mytxt.value
◦en PHP dans la variable $_POST["mytxt"] ou $_GET["mytxt"] suivant que l'input était dans une zone form avec l'attribut method="post" ou method="get" (voir plus loin la decription des formulaires form).
•id : L'attribut id permet d'attribuer un identificateur au contrôle.
•tabindex : L'attribut tabindex permet d'attribuer un ordre de saisie au contrôle.
•size : L'attribut size permet de dimensionner le contrôle (nombre de caractères pour text).
•maxlength : nb maximal de caractères saisis
•value : Contient le texte pré-rempli ou écrit par l'usager si type = text et la légende à donner au bouton si type=button.
•placeholder : Un texte initial explicatif qui disparait au premier clic dans le champ.
•onclick / onchange : Les attributs onclick et/ou onchange sont utilisés dans des input autonomes (non inclus dans un formulaire). Ils permettent de programmer une action, d'affecter une valeur à une variable...
•disabled="disabled" ou "enabled. balise facultative permettant de gérer l'accès à l'input. On peut remplacer disabled="disabled" par disabled tout court.
•form="nomForm". Depuis HTML 5 un input qui apparait en dehors d'une forme ou autre formulaire peut être associé à une form dont l'id est "nomForm".
•autocomplete='on' ou off pour autoriser le navigateur à mettre les réponses qu'il a mémorisées.
•required='required' pour rendre le remplissage de cet input obligatoire avant l'envoi de la form.
•formaction="autre action" (à tester).
Pour associer une action à un bouton, il est plus simple d'utiliser la balise <button>...</button> avec l'attribut onclick, comme ceci :
<button onclick="login()">Cliquer ici</button>
Le bouton aura pour label Cliqer ici, et un clic provoquera l'appel de la fonction javascript login(). C'est léquivalent de :
<input type="button" value="Cliquer ici" onclick="login()">
L'action qui figure après le onclick est est instruction javascript exécutable, préférablement écrite entre guillemets simples ou doubles (conseillé mais non obligatoire), et nom pas le simple nom d'une fonction, c'est pourquoi, lorsque c'est une fonction elle est suivie des (..) avec ses éventuels arguments à jour.
Remarque : On accède normalement au texte enserré entre les balises qui vont par paire par texteContent, mais comme input est orpheline et ne présente pas de texte insérré, on accède à son texte par l'attribut value.
Voir les autres possibilités page 272 et suivantes de Robin Nixon.
Exemple simple :
<!DOCTYPE html><meta charset="utf-8"><head></head><body>
<input value="Cliquez moi" type="button" onclick="btnClick()">
<p id="idp">Vous avez cliqué 0 fois</p>
<script>
var nfois = 0;
function btnClick()
{ document.getElementById("idp").innerHTML="Vous avez cliqué " + (++nfois) + " fois";}
</script></body></html>
La balise label est surtout intéressante pour modifier le texte associé à un champ input qui autrement est imposé par le contexte (par exemple "Select. fichiers" dans le cas d'un input de type file). Si on veut choisir ce qui est affiché par l'input, on le cache en lui mettant style="display:none" et on l'enserre dans une balise label, comme suit :
<label style="cursor:pointer; border: solid;">
<input type="file" onchange="selFichier(this.files)" style="display:none">
Choisir une image
</label>
A la place du bouton traditionnel avec le texte "Select. fichiers", on aura le texte "Choisir une image", et pour que le curseur change en pointeur au-dessus du texte et que le texte ait l'apparence d'un bouton nous avons donné au label le style="cursor:pointer; border: solid;".
Il n'y a pas de saut de ligne après le champ de la balise label ce qui permet de l'utiliser pour donner un nom à un champ input du type=text comme celui-ci : <input type="text" name="pseudo" id="idzone"/>. ou bien à une liste à choix multiple select (voir paragraphe suivant).
Il n'est pas nécessaire que l' input soit enserré dans le label. Il peut être ailleurs, mais dans ce cas il faut donner une id à l' input et mettre dans le label l'attribut for avec la valeur de l'id .
Quand on clique sur la zone enserrée par le label le curseur est automatiquement déplacé dans la zone dont la valeur de l'id est celle spécifié par la valeur de l'attribut for.
Ci-après un exemple avec un input de type "radio" et d'id="toto", le fait de cliquer sur un label ayant un for="toto" va cocher le radio d'id "toto".
La balise form possède les attributs :
•action= action immédiate codée en HTML ou adresse de la future page web à afficher ou d'un programme javaScript qui va être lancé (généralement pour traiter les informations envoyées) : Exemple "mailto:moimeme@orange.fr" qui permet d'envoyer les infos par mail
•method : 2 valeurs
◦get : réponse limitée à 255 car renvoyée dans l'en-tête (adresse) de la requête adressée au serveur HTTP.
◦post : réponse renvoyée dans le corps de la requête adressée au serveur HTTP.
•autocomplete='on' pour autoriser le navigateur à mettre les réponses qu'il a mémorisées.
La balise method peut être absente si pas d'infos à renvoyer au serveur. Si elle est présente une requête de type XMLHttpRequest est envoyée au serveur. On peut voir la modification de l'url de la page dans la zone d'adresse du navigateur.
Exemple de forme envoyée par la page forme.php en méthode GET. Au début la barre d'adresse ne contient que l'url forme.php :
<form name="inscription" method="GET" action="forme.php">
Entrez votre pseudo : <input type="text" name="pseudo"/><br>
Garçon ou fille ?<input type="radio" name="sexe" value="M"/>Garçon<input type="radio" name="sexe" value="F"/>Fille<br>
Entrez votre age : <input type="text" name="age"/><br/>
<input type="submit" name="valider" value="OK"/>
</form>
Après l'envoi par appui sur le bouton "OK", l'url se modifie dans la barre d'adresse car les variables du tableau GET sont transmises à la suite de l'url qui devient :
forme.php?pseudo=Armelle&sexe=F&age=15&valider=OK
L'url de la page (forme.php) est suivie du caractère ?, puis de chaque champ name suivi du caractère = séparé du champ suivant par le caractère &.
Dans le cas d'un envoi en méthode POST, comme suit :
<form name="inscription" method="POST" action="forme.php">
Entrez votre pseudo : <input type="text" name="pseudo"/><br>
Garçon ou fille ?<input type="radio" name="sexe" value="M"/>Garçon<input type="radio" name="sexe" value="F"/>Fille<br>
Entrez votre age : <input type="text" name="age"/><br/>
<input type="submit" name="valider" value="OK"/>
</form>
l'url de la barre d'adresse n'est pas modifiée, car les variables du tableau POST sont envoyés dans le corps du message sous la forme du string "pseudo=Armelle&sexe=F&age=15&valider=OK".
Les envois par GET sont moins sécurisés car les données apparaissent en clair et non cryptées dans l'url qui transite, alors qu'en POST ils sont dans le corps du message et cryptées (en hhtps).
La balise form définit une région qui peut être configuré au moyen de toutes les balises utilisables pour les régions définies au chapitre 5.
Dans la région form les informations peuvent être saisies au moyen des zones du genre :
•<input type="text" name="pseudo" value="Mickey" />
•<textarea rows="6" name="comment"></textarea>
La balise <textarea ..></textarea> permet d'acquérir du texte multiligne. Le nombre de lignes peut être précisée par rows. On peut préciser le nombre de colonnes par cols et comment gérer les retours avec l'attribut wrap :
•off : pas de retour automatique
•soft : (défaut) retour automatique à la ligne, mais la chaine transmise ne les comporte pas,
•hard : les retours à la lignes sont transmis au serveur..
La balise input de type="text"offre une zone d'entrée de texte sur une seule ligne. Le champ value est facultatif. Il propose une réponse préliminaire dans la zone d'entrée de l'input. Si on veut mettre un texte explicatif au champ , on le met généralement avant la balise <input..>
Pour déclencher l'envoi, ou remettre à zéros le formulaire on utilise :
•une zone input possédant l'attribut type="submit" (pour envoyer) ou type="reset" (pour remettre à zéro), un name="pseudo" est la clé qui permet d'identifier cet élément et un value="Envoyer" spécifie le texte à attribuer au bouton, qui en son absence aura un texte par défaut dépendant de la méthode (get ou post).
•une zone input possédant l'attribut name ="submit" (à la place de type="submit"). Cela permet d'utiliser une autre valeur pour type et ainsi de remplacer le bouton par autre chose, par exemple type="image". Exemple : <input type="image" name="submit" width="50px" src="image.jpg">
Exemple :
<form name="inscription" method="post" action="annoncerando.php" id="forme1">
<input type="text" name="date"/><br>
<input type="text" name="nom" value="Michel"/>
<textarea rows="6" name="comment"></textarea>
<?php echo "<input hidden type='password' name='passe' value=".$pass.">"; ?>
<input type="submit" name="okpass" class="bouton" value="Enregistrer">
<input type="submit" name="okpass" class="bouton" value="Transfert">
</form>
Anticipation sur le PHP :
Dans cet example il y aura 2 boutons. L'un nommé Enregistrer et l'autre nommé Transfert. L'appui sur l'un quelconque de ces 2 boutons enverra une requête XMLHttpRequest que l'on traitera dans une section php du fichier à l'aide du tableau de variables $_POST. Ici les deux boutons ayant le même name="okpass" un test de isset($_POST['okpass'])) donnant true indiquera une requête de leur provenance.
Supposons que la page web a été activée par la livraison d'un bon mot de passe, mémorisée dans le PHP par la variable $pass. La ligne ci-après, écrite dans une portion en PHP :
<?php echo "<input hidden type='password' name='passe' value=".$pass.">"; ?> permet de renvoyer le string $pass dans le $_POST['passe'], sans faire apparaitre son contenu ce qui permettra à la réception de la requête de ne la traiter que si le mot de passe est bon.
Les éléments $_POST['date'], $_POST['nom'], $_POST['comment'] contiennent les chaines entrées par l'usager. $_POST['nom'] est pré-rempli avec "Michel". L'élément $_POST['comment'] contient éventuellemnt plusieurs lignes avec les retours à la ligne conservés.
Pour savoir si l'input de type="text" name="date" a été rempli, il faut tester isset($_POST['name']) qui est false si le champ n'a pas été rempli.
On peut utiliser une ou plusieurs lignes du type :
<input type="hidden" name="truc" value="chose">
pour envoyer lors du clic sur un bouton de type="submit" situé dans la forme des informations supplémentaires quelconques. Elles seront accessibles dans $_POST['truc'] (=> "chose").
Forme avec plusieurs boutons submit :
Dans la forme précédente, il y a deux boutons type="submit" avec le même name="okpass". Pour savoir lequel des deux boutons a été cliqué, on testera leur value récupérée dans $_POST['okpass'] qui contiendra soit Enregistrer, soit Transfert.
Différentes formes avec des boutons identiques :
Lorsqu'une forme contient un bouton de type="submit" avec le même name et la même value qu'une autre forme, on peut savoir dans quelle forme le bouton submit a été cliqué en ajoutant aux formes une ligne input cachée avec une chaine "idN" différente pour chaque forme.
<input type="hidden" name="idform" value="idN">
En testant la value renvoyée par $_POST["idform"] on saura quelle est la forme qui a envoyé le POST.
La balise <select...>...</select> et les sous-balises <option> permettent d'afficher une liste à choix multiples.
Attributs :
•size permet de préciser le nombre e lignes affichées
•multiple="multiple" : si on offre la possibilité de choix multiples.
La balise select utilise également les attributs id, name, tabindex et onclick et/ou onchange qui permettent de spécifier l'action javascript à exécuter lors d'un click ou d'un changement de sélection.
Remarque : onchange n'appelle pas la fonction à nouveau si le même item est choisi 2 fois de suite. Si on veut contourner cela, il faut, après le traitement nominal effectué dans la fonction, modifier la valeur du selectedIndex en la mettant par exemple à -1, pour qu'à la sélection suivante le système constate un changement.
Les balises <option>Texte de l'option</option> contiennent les textes des options qui apparaissent dans une liste déroulante. On clique sur l'une d'elle pour la sélectionner. L'attribut selected="selected" permet de présélectionner cette option.
La balise <option> existait en version orpheline <option .... />utilisant l'attribut value="valeur" pour mettre un texte dans son champ. Cela pouvait entrainer une confusion car le texte de l'option sélectionnée est récupéré en javascript par l'attribut value du select et non pas de l'option.
Dans javascript, le numéro de la ligne sélectionnées est accéssible via l'attribut selectedIndex et le texte de l'option par l'attribut value.
Exemple :
<select id="seldir" onchange="changeFunc()">
<option hidden>Developpez la sélection></option>
<option>1er choix</option>
<option>2me choix</option>
</select>
<p id="res1"></p>
<p id="res2"></p>
<script>
function changeFunc() {
var zs = document.getElementById("seldir");
var idx = zs.selectedIndex;
var str = zs.value;
document.getElementById("res1").textContent="Choix item numéro : "+ idx;
document.getElementById("res2").textContent="Texte : "+str;
zs.selectedIndex = 0.; // AJOUT MLL, Voir REMARQUE
}
</script>
Le premier item indice 0 affublé de l'attribut hidden ne sera pas sélectionnable.
REMARQUE :
Si l'item choisi est le même, la callback n'est pas appelée. Pour forcer son appel, on peut à la fin de la callback modifier la valeur de l'index sélectionné, en faisant par exemple :
zs.selectedIndex = 0.;
La balise <output> est utilisée pour afficher une valeur relative à un champ <form>. Elle est souvent utilisée en collaboration avec l'événement onInput activé lorsque l'usager entre des données dans un champ <input>
Exemple 1
<form oninput="x.value=a.value;">
<input type="range" id="a" value="50"><output name="x"></output>
</form>
Ici la forme est munie de l'écouteur oninput qui appelle l'exécution de sa fonction lorsque la valeur de l'input est modifiée. La valeur de a.value (qui initialement vaut 50) est affectée à l'élement de nom x (l'output) ce qui fait que le slider (type="range") sera positionné à 50% dès le départ.
Exemple 2
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">+<input type="number" id="b" value="50">=
<output name="x"></output>
</form>
Ici les valeurs lues dans les 2 champs imput, slider (a) et texte (b) sont ajoutées et affectées à la value du champ output (x).
Un champ output de name="y" peut être est situé à l'extérieur d'un formulaire qui génère y.value, en faisant référence au formulaire par l'attribut form="id_du_form". Exemple :
<form oninput="y.value=a.value;" id="form1">
<input type="range" id="a" value = "10">
</form>
<output form="form1" name="y"></output>
Ils commencent par on (onClick, onLoad, onMouseout, onMouseover ). En fait ce sont des attributs qui indiqueront la fonction callback à appeler lorsque l'évènement survient. Les objets événements qui leur sont associés dans javascript ne comportent pas le préfixe on (événements click, load, mouseout, mouseover...).
Attention, dans le code HTML le nom de ces événement n'est pas sensible à la casse, mais les noms utilisés dans javascript doivent être écrits tout en minuscule !
Voici une liste plus fournie d'attributs qui peuvent être insérés dans les balises HTML du document associés à divers événements.
|
Événement |
Survient |
Commentaires |
|
onLoad |
après le chargement de la page |
Permet de mettre du code qui doit attendre que la page soit bien organisée pour être excécutée. |
|
onUnload |
lors de la fermeture de la page |
|
|
onBeforeunload |
juste avant la fermeture de la fenêtre |
|
|
onClick |
lors d'un clic |
l'événement survient lors d'un clic sur le bouton gauche |
|
onDblclick |
lors d'un double-clic |
double-clic sur le bouton gauche |
|
onMousedown |
quand on enfonce le bouton de la souris |
cet événement survient sur un clic gauche ou un clic droit |
|
onMouseup |
quand on relâche le bouton de la souris |
cet événement survient sur un clic gauche ou un clic droit |
|
onMousemove |
lorsque la souris se déplace dans un objet du document |
|
|
onKeydown |
quand on enfonce une touche du clavier |
|
|
onKeyup |
quand on relâche la touche |
|
|
onKeypressed |
quand on enfonce une touche du clavier |
Firefox et IE5 sous Windows : équivalent à onkeydown() |
|
onBlur |
quand l'élément perd le focus |
IE5 sous Windows : l'événement survient lorsque l'élément perd le focus. |
|
onFocus |
quand l'élément a le focus |
Cas de l'input de type file <input type=« file » />. |
|
onChange |
quand l'élément perd le focus et que son contenu a changé |
|
|
oninput |
dès que le contenu de l'élément est modifié |
Pour les sliders par exemple : <input type="range" ...> oninput est placé dans la balise <form ..> |
|
onSubmit |
juste avant l'envoi d'un formulaire |
|
|
onReset |
lors de la réinitialisation du formulaire |
|
|
onSelect |
quand le contenu d'un élément est sélectionné |
Firefox sous Windows : onselect n'est valide que pour les inputs de type texte (text, password, file et textarea). |
|
onScroll |
lors de l'utilisation de la barre de défilement |
Firefox sous Windows : l'événement onscroll ne fonctionne pas sur les balises textarea. |
|
onBeforeprint |
avant l'impression (après le clic sur le bouton OK de la fenêtre d'impression) |
Cet événement ne fonctionne que sous Internet Explorer. |
|
onAfterprint |
après l'impression |
Cet événement ne fonctionne que sous Internet Explorer. |
|
onCopy |
lors du copier vers le presse-papier |
Cet événement survient lors d'un « CTRL+C » ou d'un copier via le menu contextuel. |
|
onPaste |
lors du coller depuis le presse-papier |
Cet événement survient lors d'un « CTRL+V » ou d'un coller via le menu contextuel. |
Doc CSS : https://www.w3.org/Style/CSS/learning
Les attributs de style peuvent être définis de 3 manières
1.Localement dans une section au moyen de l'attribut style, comme déjà vu en 8 :
<p style = "font-size:16pt">Gros coucou</p>
Cette méthode n'est pas recommandée en HTML5.
2.Dans le head à l'intérieur d'une section <style>...</style> comme décrit ci'après en 1
3.Dans un fichier.css comme décrit ci après en section 3 et dans ce cas on ajoute la ligne suivante dans le head : <link rel="stylesheet" type="text/css" href="fichier.css" media="all">
Dans un bloc CSS, on utilise /* pour les commentaires */ qui peuvent porter sur plusieurs lignes.
En début de fichier, dans la section <head>, on peut à l'aide de balises <style>...</style> (ici ce n'est pas l'attribut style) définir au moyen d'un langage appelé CSS des styles pour certains types de région que l'on veut particulariser (p, div, h2, table,...) : Pour cela on met, après le nom du type de cette région (div par exemple), entre accolades des propriétés qu'on veut lui attribuer.
Exemple :
<head>
<style>
div {font-size:12pt}
p {text-indent:12pt}
/* Ceci est un commentaire dans le CSS */
h1
{
background-color:yellow;
text-align:center;
font-style:italic
}
/* Plusieurs balises peuvent avoir le même lot de propriétés */
h2, em, strong {color: blue}
.monsty1 {font-style:italic ; color:red}
.monsty2 {font-weight:bold ; color:green}
</style>
</head>
Particulièrement utilisé pour que la page utilise toute la largeur de l'écran, quelle que soit sa taille, mettre :
body{width:100%;}
ou bien, pour une page de largeur 90%, centrée (margin:auto), une largeur minimale de 600 pixels, et une largeur maximale de 2000 pixels, on mettra :
body{width:90%;margin:auto;min-width:600px;max-width:2000px}
L'inconvénient de cette approche est que toutes les régions <p> vont avoir le même style. Si on veut en particulariser certaines, on peut utiliser l'attribut style, ce qui n'est pas recommandé. On utilisera plutot des styles complémentaires associés à un groupe d'élément de même argument class ou de même argument id.
Pour définir un style complémentaire associé à groupe d'élément de même argument class on définit le nom de cette class en faisant précéder son nom d'un point (.) comme ceci .mysty1, comme dans les exemples suivants :
.souligne{text-decoration:underline;}
.barre{text-decoration:line-through;}
.ligne_dessus{text-decoration:overline;}
Les éléments qui ont ce nom comme attribut class, seront affectés de ce style. Exemple : <div class="monsty1" ...> ... </div>, ou <p class="monsty2"...> ...</p>. On remarquera que le point initial utilisé pour le définir le nom de la class est absent.
La balise <span class="souligne">Texte souligné</span> est particulièrement utile pour appliquer une style désiré à un texte limité.
L'attibut class="class1 class2 class3" peut être utilisée pour référencer plusieurs styles qui, a priori, portent sur des propriétés différentes. Si une même propriété apparait dans 2 ou plusieurs styles avec des valeurs différentes, la dernière rencontrée est utilisée.
On peut également définir un style complémentaire associé à un élément d'argument id dans le rubrique style de l'head, comme pour l'attribut class, mais on fait précéder son nom d'un "#" à la place du "." Ensuite, dans l'élement où l'attribut id=.... est utilisé (il n'y en a qu'un dans la page car chaque id doit être unique) le style associé sera utilisé. Exemple :
<head>
<style>
#toto {color:blue;}
...
</style>
</head>
...
<p id="toto">HAUT : Ligne écrite en bleu</p>
...
<a href="#toto">Aller en haut</a>
Le "." et le "#" font partie des sélecteurs de style décrits en section 4.
Si dans une balise il y a un id et une classe qui définissent la même proriété à 2 valeurs différentes, celle de l'id est proritaire.
Le contenu situé entre les balises <style>...</style> (le contenu seulement, sans ces deux balises), peut être isolé dans un fichier monstyle.css appelé feuille de style.
Un fichier feuille de style (*.css) ne doit pas contenir les balises <style>...</style>.
Un fichier CSS peut-être inclus dans une section <head> au moyen de la balise html link, selon la syntaxe suivante :
<link rel="stylesheet" type="text/css" href="monstyle.css" media="all">
L'attribut media (facultatif) permet de préciser à quel périphérique le style est approprié. Voir paragraphe 7.4.
Par exemple on personnalise le style en fonction du média client, à l'aide des instructions suivantes :
<link rel="stylesheet" type="text/css href="general.css" media="all">
<link rel="stylesheet" type="text/css href="ecrancss" media="screen">
<link rel="stylesheet" type="text/css href="impression.css" media="print">
On verra plus loin (chapitre 7.2)qu'on peut importer le contenu d'une feuille de style d'une autre manière, à l'intérieur d'un champ <style> du head par l'instruction @import url(styles.css) all;
Exemple :
<style type="text/css">@import url(styles.css) all;</style>
Finalement le code CSS peut s'écrire à trois endroits différents :
•dans un fichier .css (méthode la plus recommandée) ;
•dans l'en-tête <head> du fichier HTML à l'aide de la balise <style> comme décrit paragraphe 1.
•directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée, mais la plus souple).
Le langage CSS ayant beaucoup évolué, les vieux navigateurs coincent parfois. Les sites www.caniuse.com et normansblog.de proposent des tables de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs (et sur leurs différentes versions).
L'indication qui précède la liste des propriétés entre accolades est appelé le sélecteur :
div {font-size:12pt}
p {text-indent:12pt}
Ci-dessus p et div sont les sélecteurs.
Tous les noms de zone sont des sélecteurs simples.
Quel que soit le sélecteur, le même élément peut être appelé plusieurs fois. Les propriétés seront ajoutées :
h1 { background-color:yellow;}
h1 { text-align:center; }
h1 { font-style:italic }
S'il y a conflit, la dernière l'emporte.
un point précède le nom de la classe définie par l'attribut class="nomclass" : .nomclass
une # précède le nom de l'identifiant défini par l'attribut id="idtruc" : #idtruc
Permet de sélectionner toutes les régions
* {font-style:italic}
a[title] {...}
Ci-dessus la balise <a ... title=".."..> qui possède un attribut title utilisera ce style.
[type="submit"] {width=100px}
Ci-dessus tous les éléments qui ont l'attribut type="submit" auront une largeur de 100px.
form input [type="submit"] {width=100px}
et ci-dessus, seul les éléments de type submit des input dans une zone form auront une largeur de 100px.
a[title*="ic"] {...}
Ci-dessus la balise <a ... title="clic"..> qui possède un attribut title avec "ic" à l'intérieur utilisera ce style.
Si les balises sont séparées par un +, les propriétés sont appliquées dans les zones qui se succèdent dans cet ordre :
h1 + p {color: yellow}
Ci dessus, la première zone <p> située après une zone <h1> sera en jaune.
p ~ span permettra de cibler les éléments <span> qui suivent (immédiatement ou non) un élément <p> et qui ont le même élément parent.
ul > li permettra de cibler tous les éléments <li> qui sont directement situés sous un élément <ul>.
Si les balises sont séparées par des espaces, les propriétés sont appliquées dans les zones qui présentent la deuxième caractéristique dans le contexte de la première.
h3 em {color: red}
Ci dessus, les zones <em> situées à l'intérieur des zones <h3> seront en rouge.
En l'utilisant le sélecteur universel et le sélecteur contextuel ˽ on peut faire des sélections subtiles :
#verdir * p {border:2px solid solid green}
Ici l'étoile sélectionne les enfants des zones de classes verdir et les paragraphes enfants de ces enfants, donc au final tous les paragraphes de 2ème génération et plus seront encadrés de vert.
col || td permettra de cibler n'importe quel élément <td> sous la portée d'une colonne <col>.
Quand un sélecteur est suivi de :hover ou :active ou :focus ... le style s'applique en fonction de l'action de l'usager :
a:link lien qui n'a pas encore été visité
a:visited lien qui a déjà été visité
p:hover lorsque le pointeur est au-dessus de l'élément. Approximatement équivalent d'un écouteur de l'évènement onHover
p:active lorsque l'élément est activé (souris enfoncée ou relachée).
p:focus lorsque l'élément à le focus
p:focus:over lorsque l'élément à le focus et que le pointeur est au-dessus de l'élément
Il y a également external, target, lang, enabled, disabled, checked, indeterminate, root, nth-child(x), etc.
Si plusieurs sélecteurs sont séparées par des virgules, les propriétés sont associées à chacune d'elles :
h2, em {color: blue}
Ci dessus les zones h2 et em seront en caractères bleus.
Considérons les deux règles suivantes :
#heading #main #menu .text .quote p span { règle 1 }
#heading #main .text .quote .news p span { règle 2 }
et supposons qu'on soit dans un cas qui satisfait ces 2 conditions. Pour savoir quelle règle appliquer il faut caluler le nombre spécificité de la règle [i c b] ou i est le nombre de règles qui se rapportent à des identifiants (ici #heading, #main et #menu), c le nombre de règles qui se rapportent à des classes (ici .text, .quote et .news) et b le nombre de règles qui ce rapportent à des balises (ici p et span). La spécificité de la règle 1 est [3 2 2] et la spécificité de la règle 2 est [2 3 2]. C'est la spécificité la plus grande qui l'emporte, ici la règle 1.
A préséance égale, la dernière règle trouvé l'emporte. On peut aussi utiliser l'attribut !important qui permet de prendre le dessus en cas d'égalité.
Liste complète des sélecteurs ici : CSS3 module: W3C Selectors
Par sémantique on entend une balises qui donnent un certain sens au bloc comme article, section, paragraphe, note de bas de page, etc... Si elle n'est pas particularisée au niveau du CSS, elle n'apporte rien de plus qu'un simple bloc </p>. C'est au niveau du CSS qu'on donne du sens.
<main> est relatif au contenu unique de la page. N'utilisez <main> que une seule fois par page et placez-le directement à l'intérieur de l'élement <body>. Il peut y en avoir plusieurs à conditions qu'ils soient "hidden" sauf un. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.
<article> entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)
<section> ressemble à <article>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un heading ; notez également que vous pouvez fractionner un <article> en plusieurs <section> ou bien des <section> en divers <article>, selon le contexte.
<aside> contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).
<header> représente un groupe de contenus introductoires. Enfant de <body>, il définit l'en-tête général de la page web, mais enfant de <article> ou <section> il définit un en‑tête propre à cette section (ne confondez pas titles et headings).
<nav> contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.
<footer> représente un groupe de contenu de fin pour une page.
body {
margin: 0;
}
div {
box-sizing: border-box;
width: 100px;
height: 100px;
background-image: url(bgtile.png);
border: 10px solid red;
}
li {
margin-bottom: 10px;
}
li button {
font-size: 8px;
margin-left: 20px;
color: #666;
}
Remarquer l'appel de la fonction url() avec le nom du fichier image.
Une règle @ a pour forme générique :
@IDENTIFIANT (RÈGLE);
Le @ doit être le 1er caractère de la ligne
Les principaux identifiants sont :
•@charset : pour définir le jeu de caractères utilisé par la feuille de style.
•@import : pour indiquer au moteur de rendu d'inclure une feuille de style externe.
•@namespace pour indiquer au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
Et pour les règles @ imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles :
•@media : règle de groupe conditionnelle appliquée si l'appareil utilisé respecte les critères définis dans la media query.
•@supports : une règle de groupe conditionnelle appliquée si le navigateur respecte une condition donnée.
•@document : une règle de groupe conditionnelle appliquée si le document respecte une condition donnée.
•@page : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
•@font-face : une règle qui définit une police externe à télécharger.
•@keyframes : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
•@viewport : une règle de groupe conditionnelle appliquée selon des critères relatifs à la zone d'affichage (viewport).
Exemples :
@charset "utf-8";
Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne pourra pas être utilisée au sein d'un attribut style d'un élément HTML ou avec l'élément <style> car c'est l'encodage du document HTML qui est alors pris en compte.
A placer avant toutes les autres règles sauf @charset.
Syntaxe :
@import url;
@import url liste-requetes-media;
où url est l'emplacement de la ressource qu'on souhaite importer et liste-requetes-media est une liste de requêtes média séparées par des virgules qui conditionnent l'application des règles CSS pour l' url associée.
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
ATTENTION : Les feuilles de style importées ne dovent pas contenir de balises <style>...</style>.
Exemple :
* On utilise la division en grille si elle est supportée */
@supports (display: grid) {
div {
display: grid;
}
}
/* sinon on utilisation standard cadré à droite) */
@supports not (display: grid) {
div {
float: right;
}
}
Cette règle peut être utilisée au plus haut niveau de la feuille de style ou à l'intérieur d'un groupe conditionnel.
La requête média s'applique uniquement si elle est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté. Elle peut être imbriquée dans une autre règle conditionnelle.
Les types de médias sont :
•all : tous les appareils.
•print : matériaux paginés et aux documents consultés en aperçu avant impression.
•screen : appareils dotés d'un écran.
•speech : outils de synthèse vocale.
La condition porte sur des caractériques entourées de parenthèses, qu'on peut combiner avec une virgule (ou vrai dès qu'une caractéristique est vrai), not, and ou only :
•(aspec-ratio:50/50) approprié pour cet aspec-ratio du viewport (difficile à réaliser)
•(min-aspect-ratio:16/9) approprié si w/h >16/9
•(max-aspect-ratio:4/3) approprié si w/h < 4/3
•(height:600px) approprié pour cette hauteur viewport (difficile à réaliser)
•(min-height:601px) approprié si h >= 601
•(max-height:599px) approprié si h <= 599
•(width:600px) approprié pour cette largeur viewport (difficile à réaliser)
•(min-width:601px) approprié si w>= 601
•(max-width:599px) approprié si w <= 599
•(orientation:portrait|landscape)
•resolution, min-resolution, max-resolution / à valeur en dpi...
Les dimension sont à spécifier en px ou em.
Remarque : min-x : v <==> x > v et max-x : v <==> x < v à partir de CSS 4 seulement. Utiliser min et max de préférence, et se reporter à cette remarque uniquement pour mémoriser le sens de la comparaison.
Exemples :
/* Au niveau le plus haut du code */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { line-height: 1.4 }
}
/* Pour viser les mobiles utiliser cette règle */
@media all and (max-device-width: 600px)
{
/* car leur largeur est rarement > à 600 px */
}
/* Imbriquée dans une autre règle-@ conditionnelle */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
Cette règle peut être utilisée au plus haut niveau de la feuille de style ou à l'intérieur d'un groupe conditionnel.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
On peut utiliser toutes sortes de fonctions dans les feuilles de style : Fonctions mathématiques, de transformation, de filtrage (invert...), définissant des couleurs (rgb...), des images, des compteurs (counter...), des formes (circle...)...
Parmi les fonctions mathématiques, en plus de traditionnelles min, max, round, sin, cos... :
•calc() : pour effectuer des calculs numériques
•calc-size() : idem calc mais accepte des paramètres css spécifiques tels que auto, fit-content, max-content non reconnus par calc.
MathJax est un environnement javascript qui permet d’inclure des formules mathématiques avec la syntaxe Latex. Pour cela il faut inclure dans le head la ligne suivante :
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Quasiment toutes les formules Latex sont comprises, mais les formules en ligne doivent être enserrées entre \( et \) et non pas entre $ et $.
Exemple :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<p>Voici une formule inline : \( E = mc^2 \).</p>
<p>Voici une formule en bloc :</p>
\[
\int_a^b f(x)\,dx = F(b) - F(a)
\]
</body>
</html>
Pour pouvoir bénéficier de ces deux possibilités { entre \( et \) et entre $ et $ }, il faut ajouter avant la ligne d’importation de la bibli, les lignes suivantes :
<script>
// Version du script qui accepte les formules entre $ $
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
Exemple :
<!DOCTYPE html>
<html>
<head>
<script>
// Version du script qui accepte les formules entre $ $
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
<p>Voici une formule inline : \( E = mc^2 \).</p>
<p>Voici une autre formule inline : $ E = mc^2 $.</p>
<p>Voici une formule en bloc :</p>
\[
\int_a^b f(x)\,dx = F(b) - F(a)
\]
</body>
</html>
Dans le premier cas on importe le fichier tex-mml-chtml.js et dans le deuxième c’est le fichier tex-chtml.js.
Utilisation dépot local :
On peut importer la bibliothèque depuis le dépot GitHub https://github.com/mathjax/MathJax et copier le répertoire es5 et son contenu à la racine de son hébergement Web, et à ce moment là on y accèdera par
<script src="/es5/tex-mml-chtml.js"></script>
ou par :
<script src="es5/tex-chtml.js"></script>
On peut également utiliser le script suivant qui va chercher la bibli à son dépôt et s’il ne la trouve pas, va utiliser celle qu’on a copiée localement sur notre serveur :
<script>
(function() {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
script.onerror = function() {
console.warn("MathJax CDN unavailable, loading local version.");
const localScript = document.createElement('script');
localScript.src = "src_mathjax/tex-mml-chtml.js";
document.head.appendChild(localScript);
};
document.head.appendChild(script);
})();
</script>