Différences entre les versions de « Programmation objet et géométrie/Rappels sur html »

m
<source> -> <syntaxhighlight> (phab:T237267)
m (<source> -> <syntaxhighlight> (phab:T237267))
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):
 
<sourcesyntaxhighlight lang="html5">
<balise>
des tas de choses
</balise>
</syntaxhighlight>
</source>
 
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é.
La première balise du document html c'est celle qui précise que c'est bien un document html:
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
</body>
</html>
</syntaxhighlight>
</source>
 
=Entête=
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:
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
</head>
</html>
</syntaxhighlight>
</source>
 
==Titre==
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:
 
<sourcesyntaxhighlight lang="javascript">
document.write("Misère, j'ai tout effacé !");
</syntaxhighlight>
</source>
 
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
 
<sourcesyntaxhighlight lang="html5">
<div id='panneau'>
Un petit texte à écraser...
</div>
</syntaxhighlight>
</source>
 
alors le script suivant ne modifiera que le contenu de la division:
 
<sourcesyntaxhighlight lang="javascript">
var ici=document.getElementById('panneau');
ici.innerHTML="Ce coup-là je n'ai quasiment rien effacé!");
</syntaxhighlight>
</source>
 
Ci-dessous ce procédé permettra d'engendrer automatiquement des listes et tableaux en JavaScript.
Pour écrire un titre, on le met dans une balise ''h1'', ''h2'' ou ''h3'' selon l'importance du titre. Un document peut ressembler à ceci:
 
<sourcesyntaxhighlight lang="html5">
<body>
<h1>I/ Première partie</h1>
<h1>II/ Deuxième partie</h1>
</body>
</syntaxhighlight>
</source>
 
 
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:
 
<sourcesyntaxhighlight lang="html5">
<body>
<h1>Un petit poème</h1>
</p>
</body>
</syntaxhighlight>
</source>
 
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''.
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:
 
<sourcesyntaxhighlight lang="html5">
<i><b>en gras et en italique</b></i>
</syntaxhighlight>
</source>
 
<sourcesyntaxhighlight lang="html5">
<b><i>en gras et en italique</i></b>
</syntaxhighlight>
</source>
 
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''!
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
 
<sourcesyntaxhighlight lang="html5">
<body>
u<sub>n</sub>=u<sub>0</sub> r<sup>n</sup>
</body>
</syntaxhighlight>
</source>
 
ce qui donne <math>u_n=u_0 r^n</math>. On peut imbriquer des indices et exposants les uns dans les autres.
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'':
 
<sourcesyntaxhighlight lang="html5">
<body>
Un texte en noir avec un mot en <span style='color:red'>rouge</span>.
</body>
</syntaxhighlight>
</source>
 
On peut aussi simuler un effet de marqueur jaune:
 
<sourcesyntaxhighlight lang="html5">
<body>
Un texte partiellement passé au <span style='background:yellow'>marker jaune</span>.
</body>
</syntaxhighlight>
</source>
 
Un caractère spécial en html, s'obtient en écrivant une [[w:Esperluette|esperluette]] suivie de la description du symbole. Par exemple:
Par exemple, pour écrire une intégrale, on peut faire
 
<sourcesyntaxhighlight lang="html5">
<body>
&int;<sub>0</sub><sup>&infin;</sup> e<sup>-t</sup>dt=1
</body>
</syntaxhighlight>
</source>
 
On peut aussi dessiner des jeux de cartes avec les caractères ''&amp;diams'', ''&amp;hearts'', ''&amp;spades'' et ''&amp;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
 
<sourcesyntaxhighlight lang="html5">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
</body>
</html>
</syntaxhighlight>
</source>
 
Ce qui permet d'écrire ''normalement'' avec des caractères accentués sans problèmes de lecture dans le navigateur.
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'':
 
<sourcesyntaxhighlight lang="html5">
<body>
<ul>
</ul>
</body>
</syntaxhighlight>
</source>
 
===Listes numérotées===
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'':
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
</body>
</html>
</syntaxhighlight>
</source>
 
===Tableaux===
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:
 
<sourcesyntaxhighlight lang="html5">
<body>
<table bgcolor="red">
</table>
</body>
</syntaxhighlight>
</source>
 
On remarque que la couleur verte est invisible, les cellules cachant la rangée.
On peut améliorer l'exemple précédent avec un tableau au lieu d'une liste:
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
</body>
</html>
</syntaxhighlight>
</source>
 
{{AutoCat}}
1 535

modifications