« Programmation objet et géométrie/Rappels sur html » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
m <source> -> <syntaxhighlight> (phab:T237267) |
||
Ligne 1 :
Le graphisme se faisant directement dans le fichier html, il peut être nécessaire de (re)voir la structure de celui-ci, et notamment ce qui existait avant html5. [[w:html|Html]] utilise des balises, qui sont comme des parenthèses. Aussi chaque fois qu'une balise est ouverte, il doit lui correspondre une balise fermante (la même, mais avec un ''slash'' devant):
<
<balise>
des tas de choses
</balise>
</syntaxhighlight>
Connaître html, c'est essentiellement connaître la signification des balises usuelles, et repérer leur fermeture. Pour cela un éditeur de texte avec coloration syntaxique est vivement recommandé.
Ligne 13 :
La première balise du document html c'est celle qui précise que c'est bien un document html:
<
<html>
<head>
Ligne 22 :
</body>
</html>
</syntaxhighlight>
=Entête=
Ligne 28 :
L'entête d'un document html contient des choses qui sont examinées dès l'ouverture du document, essentiellement le titre qui apparaît dans l'onglet du navigateur, et le javascript:
<
<html>
<head>
Ligne 39 :
</head>
</html>
</syntaxhighlight>
==Titre==
Ligne 55 :
Les balises ''frame'' et ''iframe'' permettent de mettre une page html à l'intérieur d'une autre page html. Cependant elles présentent l'inconvénient de rallonger l'accès à leur contenu (il faut leur donner un identifiant puis écrire ''document.getElementById()'' pour accéder à leurs méthodes). La balise ''div'' qui crée une simple ''division'' du document (une sorte de région) est par contre indispensable parce qu'elle permet de modifier le contenu de la division par JavaScript, sans modifier le reste de la page. Ainsi, si on met dans le script de l'entête, ceci:
<
document.write("Misère, j'ai tout effacé !");
</syntaxhighlight>
on se retrouve avec une page presque blanche, le texte ayant effacé le reste. Si par contre, on a préalablement créé dans le corps une division appelée ''panneau'' avec
<
<div id='panneau'>
Un petit texte à écraser...
</div>
</syntaxhighlight>
alors le script suivant ne modifiera que le contenu de la division:
<
var ici=document.getElementById('panneau');
ici.innerHTML="Ce coup-là je n'ai quasiment rien effacé!");
</syntaxhighlight>
Ci-dessous ce procédé permettra d'engendrer automatiquement des listes et tableaux en JavaScript.
Ligne 82 :
Pour écrire un titre, on le met dans une balise ''h1'', ''h2'' ou ''h3'' selon l'importance du titre. Un document peut ressembler à ceci:
<
<body>
<h1>I/ Première partie</h1>
Ligne 89 :
<h1>II/ Deuxième partie</h1>
</body>
</syntaxhighlight>
Ligne 96 :
La balise ''p'' encercle un paragraphe, avec retour à la ligne automatique. La balise autofermante ''br'' va à la ligne. Elle permet donc d'éviter la balise ''p'' mais celle-ci permet d'écrire un texte plus structuré. Un poème peut s'écrire en combinant les deux balises:
<
<body>
<h1>Un petit poème</h1>
Ligne 113 :
</p>
</body>
</syntaxhighlight>
On remarquera que pour aller à la ligne entre les deux strophes, on a préféré un paragraphe vide plutôt qu'une balise autofermante ''br''.
Ligne 123 :
La balise ''b'' (comme ''boldface'') permet d'écrire en gras, et la balise ''i'' permet d'écrire en italique. On peut les combiner, ainsi les deux fichiers suivants ont le même effet:
<
<i><b>en gras et en italique</b></i>
</syntaxhighlight>
<
<b><i>en gras et en italique</i></b>
</syntaxhighlight>
Pour souligner un texte on peut le placer dans une balise ''u'' (comme ''underline''). On peut même barrer du texte avec la balise ''s''!
Ligne 137 :
Pour écrire quelque chose plus bas que la ligne (écriture en indice) on utilise la balise ''sub'', alors que pour écrire au-dessus (en exposant) c'est la balise ''sup''. Par exemple, le terme général d'une suite géométrique s'écrit
<
<body>
u<sub>n</sub>=u<sub>0</sub> r<sup>n</sup>
</body>
</syntaxhighlight>
ce qui donne <math>u_n=u_0 r^n</math>. On peut imbriquer des indices et exposants les uns dans les autres.
Ligne 149 :
Le moyen recommandé pour écrire en couleurs est d'utiliser la balise ''span'' qui permet de modifier l'effet du [[w:Feuilles de style en cascade|css]]. Par exemple, pour écrire en rouge, on donne à l'attribut ''style'' du ''span'' la valeur ''red'':
<
<body>
Un texte en noir avec un mot en <span style='color:red'>rouge</span>.
</body>
</syntaxhighlight>
On peut aussi simuler un effet de marqueur jaune:
<
<body>
Un texte partiellement passé au <span style='background:yellow'>marker jaune</span>.
</body>
</syntaxhighlight>
Un caractère spécial en html, s'obtient en écrivant une [[w:Esperluette|esperluette]] suivie de la description du symbole. Par exemple:
Ligne 179 :
Par exemple, pour écrire une intégrale, on peut faire
<
<body>
∫<sub>0</sub><sup>∞</sup> e<sup>-t</sup>dt=1
</body>
</syntaxhighlight>
On peut aussi dessiner des jeux de cartes avec les caractères ''&diams'', ''&hearts'', ''&spades'' et ''&clubs''. Les accents sont également gérés avec ces caractères spéciaux mais il est plus simple de précéder la balise html d'un appel à l'encodage ''unicode'' avec
<
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
Ligne 195 :
</body>
</html>
</syntaxhighlight>
Ce qui permet d'écrire ''normalement'' avec des caractères accentués sans problèmes de lecture dans le navigateur.
Ligne 205 :
Une liste à puces est ''unordered'' puisque si l'ordre comptait, il faudrait numéroter les entrées de la liste. La liste est délimitée par la balise ''ul'' (comme ''unordered list'') et chacun de ses éléments est délimité par la balise ''li'':
<
<body>
<ul>
Ligne 212 :
</ul>
</body>
</syntaxhighlight>
===Listes numérotées===
Ligne 218 :
Une liste numérotée est ''ordered'' puisque les numéros se suivent; la balise qui la délimite est donc ''ol'' au lieu de ''ul''. On peut donc en fabriquer avec JavaScript, sous forme d'une chaîne de caractères comprenant les balises ''ol'' et ''li'' (ne pas oublier de les refermer après usage!). Par exemple, pour calculer 10 termes successifs de la [[w:Nombre de Fibonacci|suite de Fibonacci]], on peut les placer dans une liste ordonnée, les éléments ''li'' étant ajoutés par JavaScript dans une boucle sur ''n'':
<
<html>
<head>
Ligne 241 :
</body>
</html>
</syntaxhighlight>
===Tableaux===
Ligne 257 :
Enfin chaque rangée contient des cellules délimitées par la balise ''td'' (''table data'') qui elle aussi peut être munie de son propre style. Par exemple pour écrire dans des cellules bleues placées dans des lignes vertes d'un tableau rouge, on peut faire ceci:
<
<body>
<table bgcolor="red">
Ligne 266 :
</table>
</body>
</syntaxhighlight>
On remarque que la couleur verte est invisible, les cellules cachant la rangée.
Ligne 280 :
On peut améliorer l'exemple précédent avec un tableau au lieu d'une liste:
<
<html>
<head>
Ligne 305 :
</body>
</html>
</syntaxhighlight>
{{AutoCat}}
| |||