Atelier Web

Création de votre propre page Web

Il est extrêmement facile de créer une page Web. Si votre école ou université possède un serveur ou un site Web, vous pouvez y ajouter votre propre page ou créer des pages pour ou avec vos classes. Vous devez consulter le responsable en informatique à votre école pour obtenir des informations plus précises concernant l'affichage de votre page, mais sa création est facile. Le langage HTML n'est pas compliqué, et vous pouvez créer des fichiers par moyen d'un logiciel de traitement de texte ou d'un logiciel destiné à la création de pages Web tel Hot Dog or FrontPage. Netscape Communicator aussi a son propre éditeur. Des versions récentes de Word ou de WordPerfect vous permettent de sauvegarder un fichier avec le format HTML. Pour plus de renseignements sur les éditeurs, consultez ce site.

Créer une page avec Netscape Communicator.

Explication des codes HTML les plus utiles.

Explication des codes HTML les plus utiles

Vous n'avez nullement besoin de connaître les codes HTML pour créer une page Web. Cette section est pour les gens qui aimeraient en savoir davantage. Le conseil le plus important à rappeler est que chaque fois (avec quelques rares exceptions) que vous indiquez une commande en HTML, il faut aussi l'arrêter en insérant un / devant la commande. Les commandes de base, qui sont toujours entourées de < et >, incluent:

Entourez le document en entier avec <HTML> au début et </HTML> à la fin. Cela indique que c'est un document écrit en langage HTML.
Ensuite mettez <HEAD> TITRE </HEAD>. TITRE représente le texte qui apparaîtra dans la barre en haut de l'écran. C'est aussi le texte qui se trouvera dans les signets.
Le corps du document se mettra entre <BODY> et </BODY>.
Il existe six niveaux de titres que vous pouvez utiliser pour organiser votre document, représentés par <H1>TITRE</H1>, <H2>Sous-titre</H2>, et ainsi de suite. L'apparence définitive du texte dépendra de la configuration du navigateur utilisé par la personne qui accède à la page.
Pour mettre en relief différentes parties du texte, vous pouvez utiliser <STRONG>GRAS</STRONG> ou <I>ITALIQUE</I>.
<P> indique le début d'un nouveau paragraphe.
<BR> fait avancer le texte d'une ligne.
<HR> dessine une ligne horizontale.
Pour créer des liens, il faut utiliser des ancres qui commencent par <A HREF="URL"> et qui se terminent par </A>. Un lien à la page Web de l'AATF s'écrirait de cette façon:

<A HREF="http://aatf.utsa.edu/"> AATF </A>

<A HREF= introduit l'URL qui est toujours entre guillemets suivi du >. Le texte qui se trouve entre cela et </A> est celui qui apparaîtra en couleur, souligné ou en caractères gras pour former le lien sur lequel on clique. L'apparence même du lien dépend de la configuration du navigateur utilisé par celui qui accède à la page.

On indique des liens à l'intérieur d'un document de la même façon: <A HREF="#NOMDELIEN"> TEXTE A APPARAITRE POUR LE LIEN </A>. Le texte qui constitue le lien doit être entouré de <A NAME="NOMDELIEN"> et </A>.
Pour utiliser des images, on met <IMG SRC= suivi de l'URL de l'image entre guillemets et fermé par un >. Les images peuvent avoir plusieurs formats; les plus communs utilisent l'extension .gif ou .jpg. Par exemple, <IMG SRC="./retour.gif"> donnera un petit globe. Le ./ indique que le fichier est dans le même répertoire où on se trouve actuellement. Dans notre exemple, les liens à tous les autres fichiers du site sont indiqués par ./FICHIER.
Vous pouvez créer des listes numérotées ou non. Une liste numérotée commence par <OL> et se termine par </OL>. Autrement la liste commence par <UL> et se termine par </UL>. Chaque élément de la liste doit commencer par <LI>.
En français on ne peut pas simplement taper les lettres accentuées. Il faut utiliser des codes spéciaux:

& lettre + accent ;

à = à; â = â
é = é; è = è; ê = ê; ë = ë
î = î; ï = ï
ô = ô
û = û ù = ù
ç = ç; Ç = Ç

Pour permettre aux utilisateurs de vous contacter, vous pouvez mettre

<A HREF="mailto:VOTRE E-MAIL"> Votre E-mail </A>. Par exemple, pour me contacter, je mettrais
<A HREF="mailto:abrate@siu.edu"> abrate@siu.edu </A>.

Il existe bien d'autres possibilités pour rendre des pages Web plus intéressantes. Vous pouvez créer des graphiques, dessiner un fond, numériser des photos, créer des formulaires, mettre un compteur, mettre des fichiers sonores. Si vous voulez continuer votre apprentissage du Web, vous pouvez consulter de bons livres sur le langage HTML ou des sites dédiés au langage HTML.
Finalement en cliquant sur VIEW et puis SOURCE, vous pouvez voir le texte HTML de tous les documents que vous consultez sur le Web. Cela vous permet de copier et de coller des URLs ou des séries de codes HTML pour recréer et adapter ce que vous trouvez ailleurs.
Il est important également de mettre la date sur tous les documents que vous créez. Cela permet à l'utilisateur de voir si les informations contenues dans votre page sont à jour ou si vous l'avez modifié depuis leur dernière visite. Pour les pages que vous consultez, cliquez sur FILE et puis DOCUMENT INFO pour trouver ce genre de renseignement.

Sample HTML Source Page

Voilà le texte d'une page-source telle qu'elle se trouverait sur le Web. Si vous cliquez ici, vous verrez une version active de ce fichier.

<HTML>
<HEAD>
<TITLE>Sample Web Page</TITLE>
</HEAD>
<BODY>

<H1 ALIGN=CENTER><BLINK><FONT COLOR="#800000">Sample Web Page </FONT></BLINK></H1>

<P>This paragraph represents a description of the contents of the page. The opening screen of a homepage should not contain too many graphics. A user who does not have high-speed access to the Web will be frustrated when trying to visit your page, even if only to see what is there. The rest of the text will be in French with accent codes. </P>

<P>If I want to write the same thing in French, it would appear as follows: Ce paragraphe représente une description du contenu de la page. La page d'accueil ne devrait pas contenir trop de graphiques. Un utilisateur
qui n'a pas un accès rapide au Web deviendra frustré en essayant d'accéder à votre page, si ce n'est rien que pour voir ce qu'il y a. </P>

<H2>Sample page sub-title</H2>

<P>Here is a list of my favorite links.</P>

<UL>
<LI><A HREF="http://aatf.utsa.edu/">AATF Homepage</A> </LI>

<LI><A HREF="http://www.urec.fr/">List of Web Servers in France</A> </LI>

<LI><A HREF="#internal">Here I will put an internal link to another section
of this same page.</A> </LI>
</UL>

<P>I can also make a list of things you can find on the Web.</P>

<OL>
<LI>French media--newspapers, radio broadcasts, TV programs, movie
listings, video excerpts</LI>

<LI>maps and illustrations</LI>

<LI>works of art with the <B>Mona Lisa</B> in bold</LI>

<LI>literary texts</LI>
</OL>

<P>If I want to include an image, I can put it here.<A HREF="begin.html"><IMG SRC="retour.gif" BORDER=0 HEIGHT=28 WIDTH=28></A></P>

<P>If I want to include a sound file, I can put it here. <A HREF="welcome.wav">Welcome</A>

<DD><U>U</U>niform <U>R</U>esource <U>L</U>ocator</DD>

<DD><U>H</U>ypertext <U>M</U>ark-<U>U</U>p <U>L</U>anguage</DD>

<H3><A NAME="internal"></A>Sub-title Internal Link</H3>

<P>This paragraph represents an internal link which was indicated in the first list above and allows me to move through a long page more easily.</P>

<CENTER><TABLE BORDER=1 >
<TR>
<TD><A HREF="http://www.france.diplomatie.fr/">France</A></TD>

<TD>Belgium</TD>

<TD>Switzerland</TD>

<TD>Quebec</TD>
</TR>

<TR>
<TD>Senegal</TD>

<TD>Morocco</TD>

<TD>Tahiti</TD>
</TR>

<CAPTION ALIGN=BOTTOM>
<P>French-Speaking Countries</P>
</CAPTION>
</TABLE></CENTER>

<P>Now, of course, I will put the necessary information to contact me as well as the dates of creation and last update. </P>

<P><A HREF="mailto:abrate@siu.edu">Jayne Abrate</A> </P>

<P>Created: January 3, 1997</P>

<P>Last update: November 10, 1998</P>

</BODY>
</HTML>

Trouver des documents sur le Web

Puisque le nombre de sites sur le Web augmente à une vitesse exponentielle, ce n'est pas un système organisé. Pour chercher des documents sur un sujet précis, on peut utiliser un moteur de recherche, un logiciel qui répertorie des sites Web. Il existe différents moteurs de recherche qui ne fonctionnent pas tous de la même façon et qui ne sont pas de la même valeur, surtout quand il s'agit de trouver des sites en français. Quelques conseils:

Cherchez toujours avec les mêmes mots clé en utilisant plusieurs moteurs de recherche. Quand vous l'aurez fait une fois, vous vous rendrez compte que les résultats ne se ressemblent guère, même avec 4 ou 5 moteurs différents. Vous pouvez utiliser la liste ci-dessous ou cliquez sur NET SEARCH qui vous donnera accès à 5 moteurs en anglais.
Regardez bien les résultats que vous obtenez. Vous pouvez cliquez sur les sites dans la liste des résultats pour y avoir immédiatement accès. Vous pouvez aussi sauvegarder ces fichiers de résultats sur diskette ou les imprimer.

Certains moteurs de recherche vous permettent de faire des recherches booléennes.
Certains moteurs offrent des liens aux résultats d'autres moteurs.
Pour chercher une phrase exacte, entourez les mots clé de guillemets (par exemple, "la chanson française").
La plupart des moteurs présente les résultats dans l'ordre de leur importance au(x) mot(s) clé, généralement exprimée par un pourcentage. Vous trouverez parfois aussi le nombre de mots qui séparent les mots clé. Ces indications peuvent être utiles, mais parfois on se demande bien d'où sont sorties ces correpondances.

Si vous voulez vous exercer à chercher des sites sur un sujet précis, essayez le

Atelier Web

Création de votre propre page Web

Explication des codes HTML les plus utiles

Sample HTML Source Page

Trouver des documents sur le Web

Rallye sur le Web

Moteurs de recherche en anglais

Moteurs de recherche en français

Les Métachercheurs

*** Mes préférés