Mise en Page d'un texte html

Leçon n°1 : Mise en Page d'un texte html.

La réalisation d'une mise en page se fait grâce aux balises HTML en anglais tags (ex. : pour gras).
Le logiciel de consultation de page web (Netscape ou Explorer) nommé browser va lire et interpréter ces balises.
Elles jouent pour lui le rôle de "panneaux indicateurs", elles lui permettent d'afficher à l'écran un document parfaitement mis en page.

Balises permettant une mise en page simple d'un texte (cette liste n'est pas exhaustive) :

La plupart des balises sont doubles, la première est située au début et la seconde à la fin de la chaîne de caractères (mot(s) ou phrase(s)) concernée. ex. : Phrase en italique .
Les balises peuvent êtres écrites indifféremment en majuscules ou minuscules.

Comme vous le constatez, le principe est très simple. Il suffit d'apprendre un peu de vocabulaire et vous serez en mesure de rédiger vos pages web !

<html> </html>	Se place au début du document. Indique au browser qu'il est dans un environnement html.
<body> </body>	Encadre le corps du texte (des informations complémentaires non visibles sur la page pourront être mise dans une partie cachée nommée head (tête) <head> </head>).
<b> </b>	Gras
<i> </i>	Italique
<u> </u>	Souligné
<h1> </h1> (<h2> <h3> <h4> <h5>)	Permet de créer des titres selon différentes tailles.
<center> </center>	Alignement au centre.
<right> </right>	Alignement à droite.
<div align = right> <div>	Permet un alignement d'une seule partie de la ligne.
<br>	Retour à la ligne.
<p>	Nouveau paragraphe (saut de ligne).
<blockquote> </blockquote>	Paragraphe en retrait.
<hr> (<hr size=8 width="25%" align="center">)	Insertion d'une ligne (trait).
<font> </font> <font size="5" face="arial"> </font>	Caractère est associé à certains attributs : face : police size : taille de 1 à 5. color : couleur

Remarque : la création d'un script HTML n'a rien à voir avec la programmation informatique.

Exemple de texte :
explication en italique

<html> début d'un document html
<body> début du texte
<center><h1>Texte rédigé en HTML</h1></center> titre
Voici mon premier texte rédigé directement en html. nouveau paragraphe
  nouvelle ligne
<blockquote> nouveau paragraphe en retrait
Je vais tester différentes fonctions de mon browser,
  nouvelle ligne
quelques mots en gras texte en gras
  nouvelle ligne
quelques mots en italiques texte en italique
 quelques mots soulignés texte souligné
<hr size=1 width="25%" align="left"> trait de séparation
quelques mots en gras, italiques et soulignés
</blockquote> fin du paragraphe en retrait
 police de caratère spécifié
Ecriture en arial rouge taille 5.

Fin du document.
</body> fin du texte
</html> fin du document html

Cliquez ici pour voir le résultat

Désignation des fichiers : texte.html Très important !!!

Il est strictement interdit d'utiliser des accents ou des espaces pour nommer votre fichier (environnement UNIX).
Une minuscule n'équivaut pas à une majuscule, nous vous conseillons de tout écrire en minuscule.
Deux extensions sont possibles html ou htm, mais elles ne sont pas interchangeables, faites un choix pour votre site, cela évitera les confusions.

"Première page.html" est mauvais
"premiere_page.html" est bon.

Attention aux pièges : Cela pourrait fonctionner sur votre ordinateur et non plus sur Internet, car UNIX contrairement à Windows ne tolère pas les espaces et les accents.
(UNIX est une famille de systèmes semblable à MSDOS ou Windows, qui a servi de plate-forme au développement d'Internet. LINUX est un UNIX)

Remarque :
Le langage HTML a la particularité d'être non propriétaire (et Dieu merci). Il ne fait pas (trop*) l'objet de batailles économiques.
Pour relire un document MSWord ou WordPerfect il vous faut être en possession du même logiciel.
Ceci n'est pas le cas pour un document html. Ils sont lus sans conversion par de nombreux logiciels sur Mac, Window ou UNIX.

* Microsoft et Netscape ont chacun développé quelques balises spécifiques à leur browser. Ces balises ne sont pas reconnues par les browser concurrents, mais elles sont peu nombreuses. FrontPage de Microsoft en particulier insère des balises propres à Microsoft. Il est conseillé, si vous élaborez des pages complexes de les tester avec différents browser. Il est préférable d'utiliser des logiciels de marques "neutre" qui ne font pas appel à ces balises spécifiques. Netscape Composer (que nous utilisons ici) bien que lié au browser Netscape Navigator ne pose aucun problème majeur. Il a l'avantage d'être simple et gratuit. Pour réaliser des pages plus élaborées, nous vous recommandons Dreamweaver de Macromedia, logiciel très complet qui nécessite un temps de formation.

Exercice :
Réaliser un document HTML, avec Blocs-notes (Accessoires sous Windows).
Attention ! enregistrez le document avec l'extension ".html", il sera alors automatiquement reconnu par votre browser.
Nous vous encourageons vivement, à faire des essais, en faisant des aller-retours du script au résultat.
N'oublier pas de sauvegarder, puis de recharger le browser avec la nouvelle version.

Ayez une approche ludique et faites des expériences, c'est la meilleure manière d'apprendre !

Leçon n°2 - Sommaire