Aventures en sciences et technologie -- Projet: HTML

[L'informatique]

Cette idée de projet te parvient de Virtual Ventures à Ottawa, en Ontario.

Apprendre à créer ta propre page web de façon organisée.

Le HTML (HyperText Markup Language) permet aux utilisateurs du World Wide Web d'obtenir de l'information de façon plus interactive avec la simple pression d'un bouton de souris. Les idées d'un auteur ne sont pas les seules choses à être communiquées à travers le HTML; sa personnalité peut aussi être révélée grâce aux images, aux sons, et aux animations choisies.

Le HTML fonctionne avec un système de marqueurs. Le HTML a été inventé par un anglophone, et donc tous les marqueurs sont en anglais, et la pluprt sont des abbréviations. Il y a un marqueur initial <MARQUEUR> et un marqueur final </MARQUEUR>. Remarque qu'il y a une barre avant le marqueur final. (Il n'y a pas de marqueur qui s'appelle "marqueur" - c'est simplement un exemple.) Tu dois encercler tout ce que tu veux éditer (par exemple des mots, des images, etc.) avec des marqueurs. Il y a quelques exceptions à cette règle, pourtant.

Quelques mots que tu devrais connaître:

Navigateur web

Ce programme est utilisé pour chercher et voir des pages sur le World Wide Web. Il transforme les fichiers HTML en un format beaucoup plus facile à lire. Plusieurs personnes utilisent le Netscape Navigator ou le Microsoft Internet Explorer comme navigateur primaire.

Editeur de texte

Un programme qui fait du traitement de texte de base et qui sauvegarde les fichiers en format de texte (.txt).

WWW ou World Wide Web

Selon le World Wide Web Consortium, "le World Wide Web (connu sous les noms 'WWW', 'Web' ou 'W3') est l'univers de l'information accessible sur réseau, l'incarnation du savoir humain". Tu peux en apprendre plus à propos du web à http://www.w3.org/WWW/.

Pages web

Les pages web, souvent appelées simplement "pages", sont des fichiers écrits en HTML.

Un URL

"URL" est un acronyme qui remplace le terme "Uniform Resource Locator". C'est une façon acceptée d'indiquer la location et le genre d'une ressource (comme une connection telnet, une page web, un site ftp, etc.). Tu peux en apprendre plus sur les URL à http://www.ncsa.uiuc.edu/demoweb/url-primer.html.

un éditeur de texte (comme Notepad ou SimpleText)
un navigateur web (comme Netscape ou Internet Explorer)

Pour commencer, ouvre ton éditeur de texte et crée un nouveau fichier. Le nom du fichier devrait se terminer avec .html ou .htm pour montrer que c'est un fichier HTML. Pour commencer, le nom index.html est bien choisi.

Pour créer une page, tu devrais avoir les marqueurs suivants dans l'ordre prescrit.

<HTML> 

<HEAD>
<TITLE>Cette information est affichée en
haut de ton écran, pas sur la page
elle-même.</TITLE> 
</HEAD>
<BODY> 

<P>Tout ce que tu veux avoir sur ta page web
va ici.</P> 

</BODY> </HTML>

[Création d'une page web.] Copie ces marqueurs dans ta nouvelle fiche .html. Sauvegarde ta fiche, puis ouvre le navigateur web (Netscape, Internet Explorer, Lynx, Mosaic, etc.) et ouvre ta fiche dans le navigateur. (D'habitute il y a un titre "open page" ou "open file" sous le menu "file".) Tu verras le titre (les mots que tu as écrits entre <TITLE> et </TITLE>) en haut de l'écran, et le corps (les mots que tu as écrits entre <BODY> et </BODY>) de ta fiche sera sur la page elle-même. Essaie de changer le titre ou le corps de ta page web en retournant dans l'éditeur de texte. Sauvegarde ta page, et puis choisis "reload" dans le navigateur pour voir les changements. Essaie des choses différentes pour voir ce qui arrive.

Au fur et à mesure que tu apprends des nouveaux marqueurs, essaie-les dans ton document d'exemple. Assure-toi de sauvegarder et de choisir "reload" à chaque changement!

Note: Si tu as sauvegardé et choisi "reload", mais la page n'a pas changé, il se peut que le navigateur web est en train de recharger à partir de mémoire-cache. Cela veut dire que l'ordinateur a pris une copie de la page la première fois que tu l'as chargée, et ensuite il en présente une copie de cette première page au lieu de chercher une nouvelle version. Pour recharger la page de façon à voir les changements, appuyez sur la touche majuscule pendant que tu choisis reload, ou bien ferme la mémoire-cache, qui se situe sous le menu "options" ou "préférences" du navigateur.

Il est important de ne rien mettre entre les marqueurs </HEAD> et <BODY>, puisque ceci cause des problèmes avec certaines vieilles versions de Netscape et de Mosaic. On ne met pas de marqueurs d'édition (en gras, en italique, etc.) entre les marqueurs <HEAD> et </HEAD>, ce qui cause des problèmes semblambles.

À l'intérieur de ta page - c'est-à-dire, après le marqueur <BODY>, chaque paragraphe doit commencer par le marqueur <P> et se terminer par le marqueur </P>. (La plupart des navigateurs fonctionnent parfaitement bien sans le marqueur final </P>, mais on l'utilise quand-même pour rendre le code HTML plus facile à lire.) Le HTML ne reconnaît pas quand on appuie sur la touche "enter", alors si tu oublies les marqueurs de paragraphe, la page entière deviendra un seul paragraphe. Ceci est, bien sûr, très difficile à lire!

Pour terminer une ligne de texte avant la fin, tu peux choisir un des marqueurs suivants:

Nouveau paragraphe: <P></P>

Retour au début de la prochaine ligne: <BR>

Ligne horizontale: <HR> (Ceci dessine une ligne horizontale dans le document.)

Si tu veux que le texte apparaisse exactement de la façon que tu l'as tapé, avec tous les espaces ou "enter" telles quelles, tu peux entourer le texte des marqueurs <PRE> et </PRE>. PRE veut dire préformaté, qui indique à l'ordinateur que tu as déjà décidé de la disposition des mots.

Le text original, comme tu l'as tapé:
------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques.
Le text, comme il apparaîterait dans le navigateur. ------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques.
Le texte original, avec le marqueur <PRE>
<PRE> ------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques. </PRE>
Le texte, comme il apparaît dans le navigateur si tu as utilisé le marqueur <PRE>.
------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques.

À l'intérieur des paragraphes, les marqueurs suivants t'aideront à éditer le texte:

en gras: <B>en gras</B>

en italique: <I>en italique</I>

centré: <CENTER>centré</CENTER> (On peut centrer des images aussi.)

On peut changer la taille des paragraphes avec le marqueur <FONT SIZE="#"></FONT>. Il faut remplacer le symbole "#" par un numéro, selon la grandeur désirée du texte. Par exemple, <FONT SIZE="-1"></FONT> rapetisserait le texte d'un peu, et <FONT SIZE="+5"></FONT> agrandirait le texte considérablement.

Une taille plus petite.
Deux fois plus grand.
Cinq fois plus grand.

<FONT SIZE="-1">Salut!</FONT>
<FONT SIZE="+2">Salut!</FONT>
<FONT SIZE="+5">Salut!</FONT>

Salut!
Salut!
Salut!

On peut changer le style des sous-titres en utilisant <H#> et </H#>. Remplaces le "#" avec un numéro, d'après l'importance du sous-titre. (En langage HTML, header désigne un titre de taille plus petite à l'intérieur de la page, et title désigne le titre de la page entière. C'est pour ça qu'on doit utiliser le marqueur H au lieu de T). Les marqueurs <H#> diffèrent légèrement de la plupart des marqueurs en ce qu'ils sont toujours en gras et ne permettent pas d'autre texte sur la même ligne.

<H1>Sous-titre 1</H1>
<H2>Sous-titre 2</H2>
<H3>Sous-titre 3</H3>

Sous-titre 1

Sous-titre 2

Sous-titre 3

<H4>Sous-titre 4</H4>
<H5>Sous-titre 5</H5>
<H6>Sous-titre 6</H6>

Sous-titre 4

Sous-titre 5

Sous-titre 6

Procède à d'autres exemples du HTML.

Produit par Galactics.
Commentaires: galactics@spacesim.org.
Révisé la dernière fois le 14 août 1998.

Nouveau paragraphe:	<P></P>
Retour au début de la prochaine ligne:	<BR>
Ligne horizontale:	<HR> (Ceci dessine une ligne horizontale dans le document.)

Le text original, comme tu l'as tapé:	------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques.
Le text, comme il apparaîterait dans le navigateur.	------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques.
Le texte original, avec le marqueur <PRE>	<PRE> ------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques. </PRE>
Le texte, comme il apparaît dans le navigateur si tu as utilisé le marqueur <PRE>.	------- - Mon poème - ------- Le texte HTML N'est pas difficile à maîtriser, Si tu t'y appliques.

en gras:	<B>en gras</B>
en italique:	<I>en italique</I>
centré:	<CENTER>centré</CENTER> (On peut centrer des images aussi.)

Une taille plus petite.	Deux fois plus grand.	Cinq fois plus grand.
<FONT SIZE="-1">Salut!</FONT>	<FONT SIZE="+2">Salut!</FONT>	<FONT SIZE="+5">Salut!</FONT>
Salut!	Salut!	Salut!

<H1>Sous-titre 1</H1>	<H2>Sous-titre 2</H2>	<H3>Sous-titre 3</H3>
Sous-titre 1	Sous-titre 2	Sous-titre 3
<H4>Sous-titre 4</H4>	<H5>Sous-titre 5</H5>	<H6>Sous-titre 6</H6>
Sous-titre 4	Sous-titre 5	Sous-titre 6