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

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
Ligne 50 : Ligne 50 :


=Corps=
=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:

<source lang="javascript">
document.write("Misère, j'ai tout effacé !");
</source>

on se retrouve avec une page presque blanche, le texte ayant effacé le reste. Si par contre, on a prélablement créé dans le corps une division appelée ''panneau'' avec

<source lang="html5">
<div id='ici'>
Un petit texte à écraser...
</div>
</source>

alors le script suivant ne modifiera que le contenu de la division:

<source lang="javascript">
var la_bas=document.getElementById('ici');
la_bas.innerHTML="Ce coup-là je n'ai quasiment rien effacé!");
</source>


==Texte structuré==

==Listes et tableaux==

Version du 10 janvier 2012 à 11:09

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élablement créé dans le corps une division appelée panneau avec

<div id='ici'>
Un petit texte à écraser...
</div>

alors le script suivant ne modifiera que le contenu de la division:

var la_bas=document.getElementById('ici');
la_bas.innerHTML="Ce coup-là je n'ai quasiment rien effacé!");


Texte structuré

Listes et tableaux