Atelier Web

On-Line Web Workshop

Creating Your Own Web Page

Il est extremely easy to create a Web page. If your school or university has a Web server, you can add your own page or create pages with or for your classes. You should consult the Webmaster at your school for more detailed information concerning how to post your page, but its creation is easy. The HTML language is not complicated, et you can create files using word processing software or software specially designed for Web page construction such as Hot Dog or FrontPage. Netscape Communicator also has its own editor. Newer versions of Word and Word Perfect will allow you to save a regular word-processed file in HTML format. For more information about Web editors, consult this site.

Creating a page with Netscape Communicator.

Explanation of the most useful HTML codes.

Explanation of the Most Useful HTML Codes

You do not need to know any of the HTML codes to create a Web page. This section if for those who would like to know more about them. The most important thing to remember is that each time (with a few exceptions) you indicate an HTML command, you msut also shut it off by inserting a / in front of the command. The basic commands, which are always surrounded by < and >, include:

Surround the entire document with <HTML> at the beginning and </HTML> at the end. This indicates that the document is written in HTML language.
Then put <HEAD> TITLE </HEAD>. TITLE represents the text which will appear in the bar at the top of the screen. It's also the text that will appear in bookmarks for that page.
The body oif the document should be between <BODY> et </BODY>.
There are six levels of titles that you can use to organize your ocument, represented by <H1>TITLE</H1>, <H2>Sub-title</H2>, and so forth. The definitive appearance of the text depends somewhat on the configuration of the browser used by the person consulting the page.
To highligh different parts of the text, you can use <STRONG>BOLD</STRONG> ou <I>ITALICS</I>.
<P> indicates the beginning of a new paragraph.
<BR> skips a line.
<HR> draws a horizontal bar.
To create links, you must use anchors which begin with <A HREF="URL"> and which end with </A>. A link to the AATF Web page would be written as follows:

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

<A HREF= introduces a URL which is always in quotation marks followed by >. The text which is between that and </A> is what will appear in color, underlined, or in bold to form the link on which one can click. The actual appearance depends somewhat on the configuration of the browser used by the person consulting the page.

Interior links are indicated in a document in the same way: <A HREF="#NAMEOFLINK"> TEXT TO APPEAR FOR THE LINK </A>. The text which forms the link must be between <A NAME="NAMEOFLINK"> and </A>.
To use images, you put <IMG SRC= followed by the URL of the image in quotation marks and closed by a >. Images can have several formats; the most common use the file extension .gif ou .jpg. For example, <IMG SRC="./retour.gif"> will display a little globe.. The ./ indicates that the file is in the same folder/directory where the current file is. In our example, links to all the other files are indicated by ./FILE.
You can create numbered or bulleted lists. A numbered or ordered list begins with <OL> and ends with </OL>. Otherwise the unordered list begins with <UL> and ends with </UL>. Each element in the list must being with <LI>.
In French, you cannot simply type accented letters. Special codes are used:

& letter + accent ;

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

Note: You can download a French keyboard.

To permit users to contact you, you can put <A HREF="mailto:YOUR E-MAIL"> Your E-mail </A>. For example, to contact me, I would put

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

There are many other possibilities to make Web pages interesting. You can create graphics, design wallpaper, digitize photographs, create forms, put a counter, add sound files. If you want to continue learning about the Web, you can consult many good books on HTML or sites dedicated to the HTML language.
Finally, by clicking on VIEW and then SOURCE, you can see the HTML text of all the documents you consult on the Web. This permits you to copy and paste URLs or series of HTML code to recreate and adapt what you find elsewhere.
It is also important to put a date on all documents you create. This permits the user to see if information contained on your page is current or if you have modified it since their last visit. For pages the you consult, click on FILE and then DOCUMENT INFO to find this information.

Sample HTML Source Page

Here is the text of a sample page just as it would be posted to the Web. If you click here , you will see the active version of this file.

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

Finding Documents on the Web

Since the number of Web sites is growing at an exponential rate, it is not an organized system. To find documents on a specific topic, you can use a search engine. There are different search engines that function in several different ways and are not all equally as effective, especially when trying to find sites in another language. Some advice:

Always use the same keywords in several search engines. Once you have done it once, you will realize that the results cna be very different, even with 4 or 5 search engines. You can use the list below and click on NET SEARCH which will give lead you to 5 English serach engines.
Examine the results you obtain. You can click on the sties in the list to have immediate access. You can also save these result files on diskette or print them.

Certains search engines let you do Boolean searches.
Certains search engines offer links to the results of other engines.
To serach for an exact phrase, put the keywords in quotation marks (for example, "la chanson française").

If you want to practice searching for sites on a specific topic, try the

Web Scavenger Hunt

English Search Engines

French Search Engines

*** My favorites

Created: January 3, 1997

Last update: May 25, 2000

Dr. Jayne Abrate, Southern Illinois University