« Programmation objet et géométrie/Rappels sur html » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 138 : Ligne 138 :


<source lang="html5">
<source lang="html5">
<body>
u<sub>n</sub>=u<sub>0</sub> r<sup>n</sup>
u<sub>n</sub>=u<sub>0</sub> r<sup>n</sup>
</body>
</source>
</source>


ce qui donne <math>u_n=u_0 r^n</math>
ce qui donne <math>u_n=u_0 r^n</math>. On peut imbriquer des indices et exposants les uns dans les autres.

====Couleurs====

Le moyen recommandé pour écrire en couleurs est d'utiliser la balise ''span'' qui permet de modifier l'effet du [[w:CSS|css]]. Par exemple, pour écrire en rouge, on donne à l'attribut ''style'' du ''span'' la valeur ''red'':

<source lang="html5">
<body>
Un texte en noir avec un mot en <span style='color:red'>rouge</span>.
</body>
</source>


==Listes et tableaux==
==Listes et tableaux==

Version du 10 janvier 2012 à 11:44

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. 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>

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é.

Une balise peut ne pas avoir de fermeture (par exemple le saut à la ligne). Dans ce cas elle est autofermante et le slash se met à la fin de sa déclaration.

La première balise du document html c'est celle qui précise que c'est bien un document html:

<html>
<head>
Ici se trouve l'entête...
</head>
<body>
Ici se trouve le corps du document.
</body>
</html>

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:

<html>
<head>
<title>
Ceci n'est pas un titre
</title>
<script>
//ici on met le JavaScript
</script>
</head>
</html>

Titre

La balise title crée un titre qui apparaît dans l'onglet du navigateur, et qui servira de nom automatique au fichier enregistré par le navigateur. Elle ne doit pas être confondue avec les titres en caractères gras qui apparaissent dans le texte, et qui sont dans le corps du document; ces balises s'appellent h1, h2 et h3 dans l'ordre décroissant de taille.

JavaScript

la balise script permet de placer du JavaScript dans le document. C'est donc à la fois la plus discrète et la plus utile du document (en tout cas, pour la géométrie).

Corps

Sous-pages

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é !");

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>

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é!");

Ci-dessous ce procédé permettra d'engendrer automatiquement des listes et tableaux en JavaScript.

Texte structuré

Titres

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>
<h2>1) Introduction</h2>
<h2>2) Pour aller plus loin</h2>
<h1>II/ Deuxième partie</h1>
</body>


Paragraphes

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>
<p>
Ce langage hachtéèmeèlle<br/>
Tend à me donner des ailes<br/>
Avec toutes ses balises<br/>
Je ne suis plus dans la mouise!<br/>
</p>
<p></p>
<p>
Quant au fameux JavaScript<br/>
Ouh là là qu'est-ce qu'il est strict!<br/>
Mais en mille comme en cent<br/>
Ouh là là qu'il est puissant!<br/>
</p>
</body>

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.

Effets de texte

Changement de casse

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>
<b><i>en gras et en italique</i></b>

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!

Indices et exposants

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>

ce qui donne . On peut imbriquer des indices et exposants les uns dans les autres.

Couleurs

Le moyen recommandé pour écrire en couleurs est d'utiliser la balise span qui permet de modifier l'effet du 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>

Listes et tableaux