0% found this document useful (0 votes)

47 views

How The Web Works Part I Introduction To

This document provides an introduction to creating basic HTML pages. It outlines retrieving necessary files like a Word document and HTML template from online sources. The tutorial then guides copying text from the Word file into the template, marking up block and inline elements, and validating the HTML. It also discusses using other tools like Netscape Composer or Word's "Save as HTML" feature to produce HTML files and uploading them to a web server.

Uploaded by

Vj Aleser

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

47 views

How The Web Works Part I Introduction To

Uploaded by

Vj Aleser

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 24

How the W eb W orks, Part I: Introduction to HTML

H TML Tu to rial
( ve rs io n 5. 0 )
Th is tutorial is design ed to teach you som e th e basics of H yperText Markup Lan guage (H TML),
with an em phasis on tran sform in g a word -processin g docum en t in to a sim ple Web page.
You can get th e m ost recen t version of th is tutorial from th e CAT website:
ht t p: / / c a t . xul a . e du/ t ut or i a l s /

Co n t e n t s
Th is tutorial will guide you th rough th e followin g steps:
1. Retrievin g the n ecessary m aterials from the Web
2. Copyin g text from a word-processing docum ent and pasting it into an HTML tem plate
3. Markin g block elem en ts an d validatin g your work
4. Markin g in lin e elem en ts an d validatin g your work
5. Using Netscape Com poser
6. Using Word's "Save as HTML" feature.
7. Uploading your files to the Web server

Pr e r e q u is it e s
Th is tutorial assum es a level of com peten cy with basic com putin g tasks an d con cepts. You sh ould
un derstan d the followin g term s:
v Files
v Folder s
v File hierarchy
v The desktop
v The Finder (Mac only)

Co n v e n t io n s
Action s th at you n eed to perform are bulleted, like th is:
• Open the file.
Men u com m an ds look like th is: File > Open. Th is m ean s ch oose th e Open option from th e File
m en u. Som etim es, for th e sake of brevity, com m on m en u item s m ay be referred to sim ply as
Save or Open. Th e sam e style is used for oth er user in terface elem en ts, such as key you're
supposed to press an d button s you're supposed to click, i.e. "Click the OK bu tton ."
H TML code an d URLs look like th is:
<BODY BGCOLOR=" wh i t e " >
Nam es of files an d folders, as well as text th at you are supposed to type, are ren dered in italics.

1
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

Be fo r e Y o u Be g in
• Look over th e "H ypertext Markup Procedure" an d "30 -Odd Safe H TML Elem en ts" quick
referen ce sheets. Re -exam in e th e h an douts on "An atom y of a Web Page" an d th e
"Con tain er Model."
• Read the followin g in form ation about filen am e exten sion s.

Ab o u t File n a m e Ex te n s io n s
Som e operatin g system s use filen am e exten sion s to iden tify differen t types of files. For exam ple,
a file n am ed docum en t.htm o r docum ent.htm l is m ar ked as a Web page. A file n am ed
docum en t.gif is m arked as a particular type of im age file, wh ile docum en t.jpg in dicates an im age
file of an oth er form at. A Microsoft Word docum en t m igh t be n am ed docum en t.doc, wh er eas a
plain text file would m ost likely be n am ed som ethin g like docum en t.txt.
Web servers, wh ich m ay run on a n um ber of differen t operatin g system s, u se filen am e exten sion s
to iden tify file types.
The Microsoft Disk Operatin g System (MS-DOS) uses filen am e exten sion s. Win dows uses th em
too, sin ce it is built "on top of" MS- DOS. Win dows is often con figured to hide filen am e
exten sion s, so that you m ay n o t be aware of th em . (But see below for th e rem edy.)
Th e Mac OS doesn 't use filen am e exten sion s. A very differen t system is em ployed to iden tify
differen t file types, so that a file n am ed docum ent could be alm ost an ythin g -- text, graph ics,
audio, video, wh atever. Mac users wh o wan t to publish on th e Web or sh are files with Win dows
users n eed to be aware of filen am e exten sion s an d start usin g th em correctly.

Exa m p le s o f Co m m o n File n a m e Ext e n s io n Pr o b le m s

v You fin d a file n am ed docum ent.htm l.txt . Wh ich is it — plain text or h ypertext?
v You create a web page th at is supposed to display an im age. Th e im age file is n am ed
picture.jpg but you m istaken ly set th e SRC attribute of th e IMG tag to poin t to picture.gif.
Th e im age does n ot appear.
v You're a Win dows use r. A Mac user sen ds you e -m ail with a Word docum en t attach ed. I t
is n am ed Final Report . You can 't open it. Because Fin al R eport has n o filen am e
exten sion , th e Win dows operatin g system can 't iden tify it as a Word file. If th e Mac user
h ad n am ed th e file Final Report.doc, th is would n ot h ave occurred. Also n ote th at it's
good practice to avoid spaces an d case variation s in filen am es if you plan to sh are th em
over th e Web, so an even better n am e would be final_ report.doc, final-report.doc o r
finalreport. doc.

W in d o w s On ly : Co n fig u r e Y o u r Sy s t e m
Follow these in struction s to m ake Win dows display filen am e exten sion s at all tim es. This is
highly recom m en ded for aspirin g Web authors, because it reduces opportun ities for con fusion .
• W inX P: Fr om th e Start m en u, ch oose Control Panel, th en double -click on Folder
Options. (In old er ver sion s of Win d ows, Open an y folder or drive. Fr om t h e View m en u,
ch oose Options o r Folder Options.)
• A dialog box should appear. Click th e View tab.
• Look for an option th at says "H ide file exten sion s for kn own file types" or "H ide MS- DOS
file exten sion s for file types that are registered." M ak e sure this item is n o t checked.
• Click th e button m ar ked OK.

2
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

1. R e t r ie v e M a t e r ia ls
First you m ust create a folder to h old your files.
• Cr eate a n ew folder on th e desktop an d n am e it tutorial.
Windows users: You can do this quite simply by clicking on the desktop with your right
mouse button and choosing New > Folder from the pop-up menu. Then, without
pausing to draw breath, type the word tutorial. Press the Enter key and you're done.
Mac users: You can do this quite simply by clicking on the desktop while pressing the
Control key; choose New Folder from the pop-up menu. Then, without pausing to
think, type the word tutorial. Press the Return key and you're done.

Next, you m ust retrieve the n ecessary m aterials from the Web.
• Start Netscape, an d poin t the browser to this URL:
h t t p : / / c a t . x u l a . e d u / t u t o r i a l s / h t ml /
• Fin d th e section of th e page un der th e h eadin g Tutorial M aterials.
• Follow th e lin k to A ll_ About_ M ustard.doc which is a Microsoft Word Docum en t.
• Save th is file in th e tutorial folder you created earlier. (You'll be prom pted by Netscape.)
• Follow th e lin k to tem plate.txt which is a plain text file.
Th e con ten ts of th e file will be displayed in th e browser win dow. It sh ould look like th is:

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr a ns i t i ona l / / EN"
" ht t p: / / www. w3. or g/ TR/ 1999/ REC- ht ml 401 - 19991224/ l oos e . dt d" >
<HTML>
<HEAD>
<TI TLE>Unt i t l e d</ TI TLE>
</ HEAD>
<BODY>

</ BODY>
</ HTML>

Th is sh ould look fam iliar to you. You'll use th is r aw code as a tem plate for your fir st Web page.
Th e best way to save th is file to disk is sim ply to copy an d paste:
• Ch oose Edit > Select All to select all th e text.
• Ch oose Edit > Copy to copy th e selecte d text.
• Laun ch a text editor .
Windows users: Use Notepad. From the Windows Start menu, choose Run… and
enter notepad.
Mac users: Use SimpleText. This application can usually be found on the hard drive, in
the Applications folder.

• In your text editor , select Edit > Paste. Th e text you copied fr om you r br owser sh ou ld
appear in th e win dow of th e text editor .
• Save th is file. Nam e it tem plate.txt an d m ake sur e th at you ar e savin g it in your tutorial
fold er .
• Close your text editor an d return to Netscape.
You sh ould n ow h ave a Word docum en t an d a plain text file in your tutorial folder — all th e
m aterials you n eed to com plete th is tutorial.

3
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

2 . Fr o m W o r d Pr o ces s o r t o W eb Pa g e
Often your Web pages will begin their digital life as word processin g docum en ts. In or d er to
"m ark up" such a docum en t with H TML, you m ust first get it in to a plain text form at.
On e way to do th is is by savin g th e docum en t as a "text on ly" file. A sim pler way is to copy th e
text from th e word processin g program an d paste it in to a text editor , m u ch as you d id with th e
tem plate.txt file. H ere's how:
• Open th e file n am ed All_ About_ M ustard.doc wh ich you saved to you r tutorial folder.
(Dou ble-clickin g th e file's icon sh ould laun ch Microsoft Word. If n ot, you will h ave to
star t Wor d your self an d open th e file from Word.)
• Take a m om en t to look over th e docum en t an d fam iliarize yourself with its con ten ts an d
gen eral structure. A copy of th is docum en t is attach ed to th e en d of th is tutorial; you m ay
fin d it m ore con ven ien t to refer to th e prin ted copy as you pr oceed .
• Ch oose Edit > Select All to select all th e text.
• Ch oose Edit > Copy to copy th e selected text.
• Open th e tem plate.txt file wh ich you saved in you r tutorial folder. (Double -clickin g th e
file's icon should laun ch your text editor. If n ot, you will h ave to start your text editor
yourself an d open th e file with in th at application .)
• Click between th e open in g an d closin g BODY tags.
• Ch oose Edit > Paste. Th e text you copied fr om Wor d sh ou ld appear in th e win dow of th e
text editor. Note th at all th e special form attin g h as been stripped away. All th at rem ain s
is plain text an d lin e breaks (carriage return s).
o W in dow s users: You m ay n eed to ch oose Edit > Word Wrap to see all th e text.

4
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

Your docum en t sh ould n ow look som eth in g like th is:

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr a ns i t i ona l / / EN"
" ht t p: / / www. w3. or g/ TR/ 1999/ REC- ht ml 401- 19991224/ l oos e . dt d" >
<HTML>
<HEAD>
<TI TLE>Unt i t l e d</ TI TLE>
</ HEAD>
<BODY>

Al l About Mus t a r d
An Abbr e vi a t e d Hi s t or y of Mus t a r d
The Gr e e ks us e d mus t a r d a s a c ondi me nt a nd a dr ug but i t wa s t he Roma ns who f i r s t
ma de r e a l c ul i na r y us e of i t by gr i ndi ng t he s e e ds a nd mi xi ng t he f l our wi t h
wi ne , vi ne ga r , oi l a nd hone y. Whe n t he y move d i nt o Ga ul t he y t ook mus t a r d pl a nt s
wi t h t he m a nd i t wa s i n t he r i c h wi ne gr owi ng r e gi on of Bur gundy t ha t mus t a r d
f l our i s he d.
I t i s r e put e d t ha t a t a f e s t i va l i n 1336 a t t e nde d by t he Duke of Bur gundy a nd hi s
c ous i n Ki ng Phi l i p t he Fa i r , no l e s s t ha n 70 ga l l ons of mus t a r d we r e e a t e n.
Re por t s do not s a y how pi c kl e d t he gue s t s we r e .
Pope J ohn XX11 of Avi gnon l ove d mus t a r d s o muc h t ha t he c r e a t e d t he pos t of
" Mus t a r d Ma ke r t o t he Pope , " a j ob he ga ve t o a n i dl e ne phe w who l i ve d ne a r
Di j on. Di j on s oon be c a me t he mus t a r d c e nt r e of t he wor l d a nd i n f a c t s o
i mpor t a nt wa s i t t ha t i n 163 4 a l a w wa s pa s s e d t o gr a nt t he me n of t he t own t he
e xc l us i ve r i ght t o ma ke mus t a r d.
1777 s a w t he s t a r t of mus t a r d ma ki ng a s we know i t t oda y a s i t wa s i n t hi s ye a r
t ha t Me s s i e ur s Gr e y a nd Poupon f ounde d t he i r c ompa ny. The y us e d Gr e y' s r e c i pe
a nd Poupon' s mone y! We s t i l l owe a l ot t o t hi s r e doubt a bl e duo a s i n 1850 t he i r
c ompa ny i nve nt e d a s t e a m ope r a t e d gr i ndi ng ma c hi ne s o e ndi ng t he e r a of l a bor i ous
a n d b a c k- br e a ki ng ha nd gr i ndi ng.
And a s J e s us s a i d i n t he Gos pe l of Thoma s :
[ The Ki ngdom of He a ve n] i s l i ke a mus t a r d s e e d. I t i s t he s ma l l e s t of a l l s e e ds ;
but whe n i t f a l l s on t i l l e d s oi l , i t pr oduc e s a gr e a t pl a nt a nd be c ome s a s he l t e r
f or bi r ds of t he a i r .
A Mus t a r d Re c i pe
I ngr e di e nt s
4 Ta bl e s poons Dr y mus t a r d powde r
1 Ta bl e s poon Whi t e Wi ne Vi ne ga r
2 Ta bl e s poons Fl a t be e r
1 Cl ove Ga r l i c
1 Te a s poon Suga r
1/ 2 Te a s poon Sa l t
1/ 4 Te a s poon Tur me r i c
1 Ta bl e s poon Ol i ve oi l - - opt i ona l
Pr e pa r a t i on
1. Whi s k t oge t he r dr y mus t a r d, vi ne ga r a nd be e r .
2. Us e a ga r l i c pr e s s or l a r ge pa i r pl i e r s t o s que e z e t he j u i c e f r om t he
c l ove of ga r l i c i nt o t he mi xt ur e .
3. St i r i n s uga r , s a l t a nd t ur me r i c .
4. To ma ke mus t a r d s moot he r a nd l e s s hot , a dd ol i ve oi l t o t a s t e .

Mus t a r d Li nks
§ Eur opé e nne de Condi me nt s
ht t p: / / www. mout a r de . c om/
A mus t a r d c ompa ny' s we bs i t e
§ Mu s t a r d Ga s
ht t p: / / www. s pa r t a c us . s c hool ne t . c o. uk/ FWWmus t a r d. ht m
A de s c r i pt i on of mus t a r d ga s
§ Mount Hor e b Mus t a r d Mus e um
ht t p: / / www. mus t a r dwe b. c om/
The wor l d' s l a r ge s t c ol l e c t i on of pr e pa r e d mus t a r ds

</ BODY>
</ HTML>

5
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

Now you n eed to save a copy of th is file, w ith out overwritin g our origin al tem plate. You also n eed
to design ate th e n ew copy as a h ypertext file, rath er th an a plain text file.
• Ch oose File > Save As…
• Nam e th e file m ustard.htm l an d click th e Save button , m akin g sure to save th e file in
you r tutorial folder.
Con gratulation s! You've just created a Web page. It's in com plete, to be sure, but take a m om en t
to see h ow it looks in your Web br owser :
• Return to Netscape.
• Ch oose File > Open Page. (Mac users sh ould ch oose File > Open > Page in Navigator.)
• A dialog box sh ould appear. Navigate to your tutorial folder. (Win dows users will n eed
to click th e Choose File button .)
• Ch oose th e m ustard.htm l file, an d click th e Open button.
Your Web page sh ould n ow be displayed in th e browser. Note h ow all th e text is r un togeth er . All
the extra whitespace an d lin e breaks are ign ored by the browser.
H ere's wh at you've accom plish ed so far: by usin g th e tem plate file, you saved yourself th e ch ore of
typin g out the basic "shell" of the Web page. The tem plate establishe s th e global structure of th e
docum en t, in cludin g version in form ation an d th e HEAD an d BODY.
You've pasted raw text in to th e BODY of th e docum en t. H owever , you h ave n ot yet m ar ked up an y
of th e text, an d so th e text h as n o logical structure.

2 .1 Titlin g Yo u r D o c u m e n t
Befor e m ar kin g up your text, you n eed to give th e H TML docum en t a title.
• Retur n to your text editor . Th e m ustard.htm l file sh ould still be open . (If n ot, you will
n eed to open it with in your text editor.)
• Fin d th e TI TLE t ags, in t h e HEAD of th e docum en t.
• Delete th e word Untitled fr om between th e TI TLE tags.
• Type a n ew title, such as Sam ple W eb Page About M ustard .
The title elem en t should n ow look som ethin g like this:

<TI TLE>Your Ti t l e He r e </ TI TLE>

• Save you r file.

6
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

3 . M a r k in g Blo ck Ele m e n t s
Now you will design ate th e basic structure of th e text. Each ch un k of text m ust be design ated as
belon gin g to a block elem en t such as a h eadin g or a paragraph .
In or der to design ate an elem en t, you m ust sur r oun d th e ch un k of text with th e appr opr iate tags.
An op en in g tag, such as <P>, m arks th e begin n in g of th e elem en t. A closin g tag, such as </ P>
(n ote the forward slash) m arks the en d of the elem en t.
• Mark the first headin g. That's the lin e which reads "All About Mustard." Sin ce it's the
h eadin g for th e wh ole page, m ark it as a first-level headin g, like so:

<H1>Al l About Mus t a r d</ H1>

Note: That's a number one (1) after the H, not a lowercase letter L !

• Ch oose File > Save to save you r wor k.

That's all there is to it. This is what's m ean t by m arkin g an elem en t.
Now ch eck you r wor k:
• Return to Netscape.
• Th e m ustard.htm l page should still be displayed, but the browser is showin g the old
version . To display th e ch an ges you just m ade, click th e Reload button .
Th e browser sh ould reload th e page. It is, in essen ce, re-readin g th e file from th e disk an d gettin g
th e n ew ver sion you just saved. You sh ould obser ve a ver y n oticeable ch an ge in th e page's
appearan ce.
Now you m ust con tin ue to m ar k up th e r est of th e text. Th is pr ocedur e r equir es you to exer cise
som e judgm en t. The followin g in struction s do n ot tell you exactly what to type. Rather, you will
be in structed to "m ark all th e paragraph s," for exam ple. It is up to you to decide wh at con stitutes
a paragraph , an d to figure out wh ich tag to use. Refer to th e prin ted Word docum en t an d oth er
m ater ials as you n eed th em . You sh ould save your wor k often , an d ch eck your wor k in th e
br owser often .
Hint: For cleaner, easier-to-read markup, insert carriage returns liberally, whenever you
need them. Remember that they will not be visible in the browser.

• Retur n to your text editor . Th e m ustard.htm l file sh ould still be open . (If n ot, you will
n eed to open it with in your text editor.)
• Mark all th e h eadin gs. Rem em ber th at h eadin gs ran ge from H1 (m ost im portan t) to H6
(least im portan t). You've already m arked a first-level headin g, so m ark up som e secon d -
an d th ir d-level on es.
Hint: There are three second-level headings and two third-level headings in the
document.

For exam ple, the secon d headin g should be m arked to look like th is:

<H2>An Abbr e vi a t e d Hi s t or y of Mus t a r d</ H2>

7
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

• Mark all the paragraphs with P tags.

Hint: There are six paragraphs total, and they're all in the first section of the document.
The extended quotation is a paragraph.

For exam ple, a m arked paragraph sh ould look like th is:

<P>
I t i s r e put e d t ha t a t a f e s t i va l i n 1336 a t t e nde d by t he Duke of Bur gundy
a nd hi s c ous i n Ki ng Phi l i p t he Fa i r , no l e s s t ha n 70 ga l l ons of mus t a r d we r e
e a t e n. Re por t s do not s a y how pi c kl e d t he gue s t s we r e .
</ P>

• Mar k th e exten ded quo tation with BLOCKQUOTE tags.

Hint: The BLOCKQUOTE tags should surround the P tags.

<BLOCKQUOTE>
<P>
[ The Ki ngdom of He a ve n] i s l i ke a mus t a r d s e e d. I t i s t he s ma l l e s t of a l l
s e e ds ; but whe n i t f a l l s on t i l l e d s oi l , i t pr oduc e s a gr e a t pl a nt a nd
be c ome s a s he l t e r f or bi r ds of t he a i r .
</ P>
</ BLOCKQUOTE>

• Mark th e ordered list (th e on e th at is n um bered) with OL tags.

Hint: You are marking the whole list here, not the individual items in the list.

• Mark th e un ordered list (th e bulleted list of lin ks) with UL tags.

<UL>
* Eur opé e nne de Condi me nt s
ht t p: / / www. mout a r de . c om/
A mus t a r d c ompa ny' s we bs i t e
* Mus t a r d Ga s
ht t p: / / www. s pa r t a c us . s c hool ne t . c o. uk/ FWWmus t a r d. ht m
A de s c r i pt i on of mus t a r d ga s
* Mount Hor e b Mus t a r d Mus e um
ht t p: / / www. mus t a r dwe b. com/
The wor l d' s l a r ge s t c ol l e c t i on of pr e pa r e d mus t a r ds
</ UL>

• Mark th e in dividual list item s in both lists with LI tags. Don 't forget to m ark up both the
Prep aration list an d th e M ustard Lin k s list.
Hint: There are only three items (not nine) in the list of links.

<LI >
Eur opé e nne de Condi me nt s
http://www.moutarde.com/
A mus t a r d c ompa ny' s we bs i t e
</ LI >

• Add a h orizon tal rule at th e en d of th e page with th e HR tag.

Hint: The tag still needs to be in the BODY of the document. Also, remember that this is
an empty content tag, so there is no closing tag.

8
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

• Add som e in form ation about h ow to con tact th e auth or of th e page after th e HR tag. Type
som eth in g like: This page is m ain tain ed by Bart Ev erson [bpev [email protected]].
Substitute your own n am e an d e -m ail address for m ine.
• Mark th e lin e you just typed with ADDRESS t ags.
Every ch un k of text sh ould n ow be en closed in on e H TML tag or an oth er.
• Ch oose File > Save to save you r wor k.
• Retu r n to Netscape an d r eload th e page to ch eck you r wor k.
You should n otice som e proble m s. Th e ordered list m ay h ave duplicate n um bers, an d th e list of
lin ks m ay h ave a § or * sym bol after each bullet. Th ese are artifacts of th e con version from Word
to H TML. Also, the list of in gredien ts is still a jum bled m ess. The list of lin ks is also m essy.
Fix th ese problem s as follows:
• Return to your text editor.
• Delete th e n um bers in th e ordered list. Th ey don 't n eed to be explicitly stated.
• Delete th e § or * sym bols fr om th e list of lin ks. Th ey ar e also r edun dan t.
What about the list of in gredie n ts? You could m ark it as an un ordered list, but th en it would be
bulleted. Besides, you already h ave on e un ordered list on th e page. Th erefore you will m ark th is
as preform atted text.
• Mark th e list of in gredien ts with th e PRE tag.
• Ch oose File > Save t o save your wor k.
• Retu r n to Netscape an d r eload th e page to ch eck you r wor k.
Th e problem s sh ould be fixed, except for th e list of lin ks. You will fix th at problem in section 4
b elow.

3 .1 S e ttin g th e B a c kgro u n d Co lo r
It would be n ice to m ake th e backgroun d of th e page yellow — sor t of a visu al joke. You will d o
th is by custom izin g th e BODY tag with an attribute.
• Retur n to your text editor . Th e m ustard.htm l file sh ould still be open .
• Expan d th e open in g BODY tag to in clude th e BGCOLOR (backgroun d color) attribute, an d
set th e valu e to y ellow .
Hint: This would be a good time to review attribute syntax.

Th e open in g BODY tag sh ould look exactly like th is:

<BODY BGCOLOR=" ye l l ow" >

• Ch oose File > Save to save you r wor k.

• Return to Netscape an d r eload th e page to ch eck you r wor k.
If you fin d th e results too garish for your tastes, you can ch an ge th e BGCOLOR value to lighty ellow
in stead.

3 .2 Va lid a tin g Yo u r W o rk
Befor e you pr oceed, it's a good idea to validate your H TML an d m ake sur e you'r e on track so far.
• Poin t your browser to th is URL:

9
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

h t t p : / / v a l i d a t o r . w3 . o r g /
Th is is th e W3C's H TML validation service. It allows you to en ter a URL for an y page th at's on th e
Web an d check the validity of its H TML.
• Sin ce your Web page is n ot on th e Web (yet), follow the "upload files" lin k toward the
bottom of th e p age.
Th is will take you to a page wh ich allows you to ch eck th e validity of files from your h ard drive.
• Click th e Browse button .
• Navigate to you r tutorial folder, select the m ustard.htm l file, and c lick the Op e n button .
• Click th e Validate this document bu t t on .
If you're lucky, you'll get a "No errors foun d!" m essage. If n ot, exam in e th e results to see if you
can pin poin t your m istake. On ce you've cor r ected your er r or s, tr y to validate your docum en t
again . Don 't m ove on to th e n ext section un til you succeed.

10
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

4 . M a r k in g In lin e Ele m e n t s
Now you will con tin ue to design ate th e structure of th e text, but at th e in lin e - or t ext-level, rather
th an th e block-level.
• Retur n to your text editor . Th e m ustard.htm l file sh ould still be open .
• Mar k th e ph r ase 70 gallon s as em phasized with the EM o r STRONG tags.
• Mar k th e ph r ase Gospel of Thom as as a citation with th e CI TE t ags.
• Put lin e breaks in th e list of lin ks usin g th e BR tag.
Hint: The tag should go between the name of the site and its URL. Put another one
between the URL and the brief description. Also, remember that this is an empty
content tag, so there is no closing tag.

• Ch oose File > Save to save you r wor k.

• Return to Netscape an d reload th e page to ch eck y ou r wor k.
Obser ve th e r esults of th e ch an ges you just m ade. Your Web page sh ould n ow r esem ble th e Wor d
docu m en t with wh ich you began .

4 .1 D e s ign a tin g Lin ks

It would be n ice if th e listed websites were clickable lin ks. In th is section , you will m ake th em in to
lin ks by m arkin g th em as an ch ors. Th en you'll poin t th e an ch ors to th e appropriate URLs.
• Retur n to your text editor . Th e m ustard.htm l file sh ould still be open .
• Mark th e n am e of each site as an an ch or with th e A elem ent.
Exam p le:
<A>Mo u n t Ho r e b Mu s t a r d Mu s e u m</ A>
• Each an ch or tag m ust be expan ded to in clude th e HREF (h yper -referen ce) attribute.
<A HREF=" " >Mo u n t Ho r e b Mu s t a r d Mu s e u m</ A>
• Each hyper -referen ce m ust be set to a URL. In oth er words, th e URL is wh at goes
between the quotation m arks.
Hint: Rather than type each URL by hand, simply cut and paste.

<A HREF=" h t t p : / / www. mu s t a r d we b . c o m" >Mt Ho r e b Mu s e u m</ A>

• Ch oose File > Save to save you r wor k.
• Retu r n to Netscape an d r eload th e page to ch eck you r wor k.
• It's good practice to follow your lin ks an d m ake sure they work.
You sh ould observe som e peculiar spacin g in your list of lin ks. Th at's because your n ow h ave two
BR (lin e br eak) tags between each site n am e an d its description . You can fix th is quickly:
• Return to your text editor, an d delete th e extra BR tags from the list of lin ks.
• Ch oose File > Save , then return to Netscape an d reload the page.

4 .2 Va lid a te Yo u r W o rk
Validate th e ch an ges you m ade followin g th e sam e in struction s as in section 3.2 above.

11
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

5. U s in g N e t s ca p e Co m p o s e r
If you did th e browser tutorial for "In troduction to th e Web," you sh ould recall th at Netscape is
actually a suite of program s. It's n ot just a Web clien t (or browser), it's also an e -m ail clien t an d a
n ews clien t.
In addition , the Netscape suite in cludes an H TML auth orin g tool, called Com poser. In th is
section , you'll use Com poser to accom plish som e of th e sam e tasks th at you did with a text editor.
H opefully you'll fin d th at your n ew kn owledge of H TML h elps you to un derstan d th e process.

5 .1 S o m e Th o u gh ts Ab o u t Co m p o s e r
Netscape Com poser is just on e of m an y software tools th at will write H TML for you. Th ese tools
take som e of th e drudgery out of th e process of creatin g Web pages. H owever, th ey are n ot all
created equal.
Com poser h as a few advan tages: It's free, an d you probably already h ave it. It is also fairly easy to
use.
Com poser also h as n um erous lim its. Alth ough you can use Com poser to do just about everyth in g
we've discussed in this sem in ar, it's in capable of alm ost everythin g discussed in the "Advan ced
H TML" sem in ar. For exam ple, Com poser can n ot h an dle form s or fram es. If you ever wish to use
style sheets, you will also fin d Com poser in adequate.
In th e fin al an alysis, I can 't recom m en d Com poser. Th ere are sim ply too m an y oth er, better tools
o ut th ere, such as Allaire's H om eSite an d BBEdit by BareBon es Software. We h ope to offer
worksh ops on th ese tools soon .
But th e ch oice of tool is up to you. If Com poser m eets your n eeds, use it. An d h opefully th e
followin g tutorial will give you a sen se of wh at such a tool can do for you.
On e oth er n ote: Man y of th e features of Com poser are n ot H TML 4.0 com plian t. Th is tutorial
ign ores those features, an d con cen trates on the thin gs Com poser does best.

5 .2 Ge ttin g S ta rte d
First you n eed to start Com poser.
• I n Netscape, ch oose Communicator > Composer.
A blan k page should appear. At first you m ight thin k it looks a lot like Netscape Navigator, but
take a closer look. Th e illustration s below sh ow th e toolbars for both Navigator an d Com poser, as
th ey appear in Win d ows 9 5:

Rem em ber, Navigator is a browser, with wh ich you view Web pages. Com poser is an auth orin g
application , with wh ich you create Web pages.

12
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

Next, you m ust recopy th e raw text of th e Word docum en t.

• Return to Microsoft Word.
• Open th e file n am ed A ll_ About_ M ustard.doc, if it is n ot already open .
Fun n y th in g about Com poser — if you just paste th e text in as you did before, it would in terpret
each carriage return as a sin gle lin e break. But Com poser in terprets double carriage return s as
in d icative of paragraph s. So…
• Before each full paragraph , in sert an extra carriage return with th e Enter key (Win dows)
or t h e Return key (Mac).
• Ch oose Edit > Select All to select all th e text.
• Ch oose Edit > Copy to copy th e selected text.
• Return to Com poser.
• Ch oose Edit > Paste to paste th e copied text.
• Ch oose File > Save an d save you r file as m ustard_ com poser.htm l. Make sure to save it
in you r tutorial folder.
As you save th e page, Com poser will prom pt you for a page title. It's askin g wh at you wan t to put
between t he TI TLE tags.
Mac users: If Composer does not prompt you, choose Format > Page Title .

• En ter an appropriate title, such as " Sam ple Web Page Usin g Com poser," th en click OK.

5 .3 D e s ign a tin g Ele m e n ts

Now you will design ate the elem en ts of the docum en t, m uch as you did with your text editor. Th e
differen ce is that you will use Com poser's graphical user in terface in stead of typin g H TML
m an ually. You tell Com poser wh at to do, an d Com poser writes th e H TML for you.
• Click in the first headin g. That's the lin e whic h reads "All About Mustard."
• Sin ce this is the headin g for the whole page, m ark it as a first -level headin g, by choosin g
Format > Heading > 1. Or you can u se th e pop -up m en u on the toolbar.
Th at's all th ere is to it. Th at's h ow you design ate an elem en t in Com poser.
• Design ate all th e h eadin gs in th e sam e fash ion . Rem em ber th at th ere are six levels of
h eadin gs, with 1 bein g m ost im portan t an d 6 bein g least im portan t.
• Design ate th e exten ded quotation by ch oosin g Format > Paragraph > Block Quote.
This optio n does n ot appear in th e pop-up m en u on th e toolbar. It also does n ot appear
in th e Mac version of th is program ! Mac users sh ould follow th e followin g circuitous
r ou te:
o Ch oose Format > Character Info.
o A dialog box sh ould appear. Click th e tab m arked Paragraph.
o Usin g th e "Addition al Style" pop-u p m en u , ch oose Block Quote.
o Click th e button m ar ked OK.
• Design ate th e un ordered lists (lists th at are n ot n um bered) by ch oosin g Format > List >
Bulletted [sic for Win dows version !]. Or you can just click th e bulle ted list button on th e
toolbar.
o You m ay wish to delete an y extra ch aracters th at appear in th e list of lin ks, just as
you did in the previous section .

13
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

o By default, Com poser m akes each lin e in th e list a bulleted item . But you don 't
wan t th e URLs an d description s to be separate item s.
§ To cor r ect th is, click at th e begin n in g of each URL.
§ Press your backspace (Win dows) or delete (Mac) button un til th e URL
appear s on th e sam e lin e as th e site n am e.
§ In sert a lin e break by ch oosin g Insert > New Line Break or by pressin g
Shift + Enter (Win d ows) or Shift + Return (Mac).
• Design ate th e ordered list (th e on e th at is n um bered) by ch oosin g Format > List >
Numbered. Or you can just click th e n um ber ed list button on th e toolbar . You will n otice
n um ber sign s appear before each list item .
• Add a horizon tal rule at the en d of the page.
o Th is is a little tricky. Click at th e en d of th e page an d your blin kin g text-in sertion
cursor sh ould appear at th e en d of th e last lin e of text, wh ich you m arked as a list
item .
o Pr ess Enter o r Return to start a n ew lin e. H owever, sin ce you're in a list, th e
n ext lin e will be design ated as a list also. You n eed to "escape" the list.
o Click th e bulleted list button in th e toolbar to escape from th e list.
o Click th e H. Line button in the toolb ar to in sert a h orizon tal rule. Or ch oose
Insert > Horizontal Line.
• Pr ess Enter o r Return to star t a n ew lin e.
• Add som e in form ation about h ow to con tact th e auth or of th e page after th e h orizon tal
rule. J ust type som eth in g like: This page is m ain tain ed by Bart Ev erson
[bpev [email protected]]. Substitute your own n am e an d e -m ail address for m in e.
• Design ate th e lin e you just typed as an addr ess by ch oosin g Format > Paragraph >
Address. Or you can u se th e pop-u p m en u on th e toolbar .
• Select th e e -m ail address you just typed.
• Design ate th is selection as a lin k by ch oosin g Insert > Link… or by clickin g th e Link
button in th e toolbar.
o A dialog box sh ould appear. In th e field, en ter m ailto:bpev [email protected].
Substitute your own e -m ail address for m in e.
o Click OK.
• Make th e URLs in th e list of lin ks in to actual lin ks:
o Select th e URL.
o Ch oose Edit > Copy.
o Design ate th is selection as a lin k by ch oosin g Insert > Link… or by clickin g th e
Link button in the toolbar.
o A dialog box should appear. Paste the URL you just copie d in to the field. Sin ce
you can 't access th e Edit m en u, you will h ave to use th e keyboard sh ortcut, wh ich
is Ctrl+V for Win d ows an d Command+V for Macin tosh . (Th e com m an d key is
som etim es called th e Apple key an d is n ext to th e spacebar .)
o Click OK.
• Select the phrase 70 gallon s in the secon d paragraph.

14
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

o Design ate th is selection as a bold or italic by ch oosin g Format > Style > Bold or
Format > Style > Italic. You m ay also click th e appropriate button in th e toolbar.
Notice th e lack of an em ph asis or stron g em ph asis option .
• Ch oose Format > Page Colors and Properties (Win d ows) or Format > Page
Properties (Ma c).
o A dialog box should appear. Click the option m arked Use Custom Colors.
o Fr om th e pop-up m en u (m arked Color schemes in Win d ows) ch oose Black on
Lt. Yellow.
• Ch oose File > Save to save you r wor k.

5 .4 Ch e c kin g Yo u r W o rk
Now it's tim e to ch eck th is page an d see wh at it actually looks like in a browser like Netscape
Navigator. Rem em ber, you're usin g Com poser, wh ich is n ot a browser! Th in gs will look a little
bit differen t in "authorin g" m ode.
• To load th e page in to Navigator, ch oose File > Browse Page or click th e preview button
in th e toolbar.
Th in gs sh ould look a little differen t n ow. You m ay also n otice som e problem s. Th e ordered list
m ay have duplicate n um bers, for exam ple. Note that the H TML-gen er ated n u m ber s on ly sh owed
up as n um ber sign s (# ) in Com poser.
You m ay fix th is problem s as follows:
• Retu r n to Com poser . An easy way to d o th is is to ch oose File > Edit Page.
• Delete the n um bers in the ordered list. Th ey don 't n eed to be explicitly stated.
• Delete the § sym bols from the list of lin ks. They are also redun dan t.
• Ch oose File > Save to save you r wor k.
• Load th e page in to Navigator by ch oosin g File > Browse Page or clickin g th e p r eview
button in the toolbar .
Th e pr oblem sh ould be fixed.
Take a m om en t to exam in e th e source code an d see wh at Com poser h as don e on your beh alf:
• Ch oose View > Page Source.
• Exam in e the H TML code.
• Wh en you're don e, close th is win dow.

5 .5 Va lid a tin g Yo u r W o rk
Tr y to valid ate m ustard_ com po ser.htm l as described in section 3.2 above. Th e results sh ould tell
you som eth in g very im portan t about usin g Com poser.

15
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

6 . U s in g M icr o s o ft W o r d 's "Sa v e a s W e b Pa g e " Fe a t u r e

As you saw above, Com poser can m ake th in gs easier, but th ere is a price th at you m ust pay for
this con ven ien ce. Now you'll look at an even easier feature available directly in Microsoft Word.
• Return to Microsoft Word.
• Open th e file n am ed All_ About_ M ustard.doc , if it is n ot already open .
• Ch oose File > Save as Web Page .
Note: This feature is only available in some versions of Word. In previous versions it
was labeled Save as HTML. In even older versions, it simply does not exist.

• Nam e th is file m ustard_ w ord.htm l.

• Click th e button m ar ked OK.
Now take a look at the Web page you just created in Netscape Navigator.
• Return to Netscape.
• Ch oose File > Open Page. (Mac users sh ould ch oose File > Open > Page in Navigator.)
• A dialog box sh ould appear. Navigate to your tutorial folder. (Win dows users will n eed
to click th e Choose File button .)
• Ch oose th e m ustard_ w ord.htm l file, an d click th e Open button .
Th e Wor d -gen erated Web page sh ould n ow be displayed in th e browser. Wow! Th at was quick
an d easy. Bu t if you take som e tim e to look over th e page, you m ay d iscover th at it's n ot all that
gr eat.
Take a m om en t to exam in e th e source code an d see wh at Word h ath wrough t:
• Ch oose View > Page Source.
• Exam in e the H TML code.
• Wh en you're don e, close th is win dow.
It m ay am use you to kn ow th at som e Web auth orin g packages actually offe r a feature called Clean
Up Microsoft Word HTML.
It's also in structive to com pare th e sizes of th e files you've created so far.
• Open you r tutorial folder.
o W in dow s users: Choose View > Details.
o M ac users: Choose View > as List.
• You m ay n eed to expan d th e win dow to see everyth in g.
• Click on th e tab m arked Size to sort th e files by size.
• Com pare th e file sizes. Rem em ber th at wh en it com es to Web pages, sm all is beautiful!
You can tr y to valid ate m ustard_ w ord.htm l if you wish, but the results will be the sam e a s with
th e page gen erated th rough Com poser.

16
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

7. U p lo a d in g Y o u r File s
Th e n ext step is to put th ese files on th e Web. To do th is, th ey m ust be uploaded from your
desktop com puter to on e of th e Xavier Web servers.
The server design ated for person al pages is n am ed xav ier.xula.edu . You r h om e dir ector y is on
th is server. It was created with your Xavier e -m ail accoun t.
Rem em ber that "directory" is just an other term for "folder."
In order to access your h om e directory, you will n eed to kn ow your usern am e an d passwo rd. (If
you've n ever don e this before, your password is probably still the default password that was
issued wh en your accoun t was first created: xavier1. You sh ould ch an ge it as soon as possible.)
In th is section , you will learn h ow to use an oth er piece of software to upload files to th e Xavier
server through a procedure kn own as File Tran sfer Protocol or FTP. This piece of software is an
FTP clien t.
To use an y FTP clien t, you m ust h ave an active con n ection to th e In tern et.
• W in dow s users should use WS_ FTP (see section 7.1 below)
• M ac u sers should use Fetch (see section 7.2 below)

17
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

7. 1 U s in g W S _ FTP ( W in d o w s On ly)
Note: If you don ’t h ave WS_ FTP LE, down load it for free from FTPplan et.com .

Co n n e ct in g t o t h e X a v ie r W e b S e r v e r
• Star t WS_ FTP on your com puter . A dialogue box sim ilar to th e on e below sh ould appear
(if n ot, click Con n ect in th e lower left h an d corn er).

• Fill in th e in form ation as sh own , substitutin g your own usern am e in th e User ID field.
Th e proper h ost n am e is w ebusers .xula.edu. Type in your regular Xavier e -m ail
password (wh ich will appear as ******) in th e Password field.
• If you ar e wor kin g on your own per son al com puter , you m ay also assign a Profile Name
an d ch eck th e Save Password b ox, th en click Save. Th is will allow you to m ake a
sh or tcut to your accoun t in th e futur e an d n ot h ave to en ter your passwor d ever y tim e you
con n ect. D o n 't d o t h i s i f y o u a r e a t a s h a r e d c o m p u t e r !
• Wh en you 'r e d on e, click OK.
After you com plete th e above step, th e program sh ould con n ect to th e Xavier Web server, an d if
you h ave th e 'bells an d wh istles', you'll h ear a soun d effect of a train com in g th rough . Th is is n ot
m ean t to frigh ten you. It's supposed to be a good th in g.

18
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

You sh ould n ow see som eth in g like this:

Take a m om en t to con tem plate th is m arvel of th e m odern age. Notice th at th ere are two win dows.
Th e win dow on th e left sh ows th e local system ; th e win dow on th e righ t sh ows th e rem ote system .
Th e local system is th e m ach in e on your desktop, r igh t in fron t of you. Th e rem ote system is
som ewh ere else — probably in a buildin g som ewhere else on cam pus, though theoretically it could
be an ywh er e fr om a cou ple yar d s to h alf a wor ld away. In th is case, th e r em ote system is th e
Xavier Web server.
You will use WS_ FTP to tran sfer files from your local system to the rem ote system .
Notice th e two arrow button s between th e two win dows. Th ey m ay look in n ocuous, but th ey're
th e h eart of th is program . Th e arrow wh ich poin ts from left to righ t is used to copy local files to
th e rem ote system . Th is is called as uploadin g. Th e arrow wh ich poin ts from righ t to left is used
to copy rem ote files to th e local system . Th is is called as down loadin g.

Cr e a t in g a N e w D ir e ct o r y
• Click th e MkDir (pron oun ced 'm ake deer' a n d m ean in g 'm ake dir ector y') button to th e
righ t of th e Rem ote System win dow.
• A dialog box sh ould appear askin g you to "En ter n ew rem ote folder n am e." Fill in th e
field with m y htm ltutorial.
• Click OK.
• In th e Rem ote System win dow, you sh ould n ow see a folde r n am ed m y htm ltutorial.
Dou ble-click on m y htm ltutorial to open it.

19
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

U p lo a d in g Y o u r File s
Fir st you will select your files on th e local system , th en you will upload th em to th e r em ote
system .
• In the Local System win dow (left -han d side), n avigate to the place wh er e your files ar e
located. Navigation can be a little tricky in this program ! H ere are som e tips:
o Dou ble-click to open a folder .
o Dou ble-click the green arrow to m ove up a level in the file hierarchy.
o To get to th e desktop, n avigate to th e W IN DOW S fo ld er an d op en th e DESKTOP
fold er .
o Rem em ber th at your files are in th e tutorial folder on th e desktop. Wh en you fin
t h e tutorial folder, double-click to open it.
Wh en at last you fin d your files, you m ust select th em .
• H old down th e sh ift key wh ile you th e files you wish to upload. Select all th e H TML files
you created. Don 't forget to select m ustard.jpg as well.
Wh en all your files are selected, you m ay upload th em to th e server.
• Click th e righ t arrow button in th e cen ter of th e win dow.
• If a d ialog box ap pears askin g if you wish to upload the files, click Yes.
WS_ FTP will begin uploadin g. Wh en don e, th e m y htm ltutorial folder in the Rem ote System
win dow should con tain the files you selected for tran sfer.
• Ch eck to m ake sure th is is th e case.
• Proceed to section 7.3 below.

20
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

7. 2 U s in g Fe tc h ( Ma c On ly)

Co n n e ct in g t o t h e X a v ie r W e b S e r v e r
• Star t Fetch on you r Mac.
• A dialog box sim ilar to th e on e below sh ould appear (if n ot, ch oose File > New
Connection fr om th e m en u bar ).

• Fill in th e in form ation as sh own , substitutin g your own usern am e in th e User ID field.
Th e proper h ost n am e is w ebusers .xula.edu. Type in your regular Xavier e -m ail
password (wh ich will appear as ******) in th e Password field.
• Wh en you 'r e d on e, click OK.
You sh ould n ow be seein g a listin g of you r h om e d ir ector y on xavier.xula.edu .
Tim e for a little term in ology. Let's talk about the local system an d the rem ote system .
Th e local system is th e m ach in e on your desktop, righ t in fron t of you. Th e rem ote system is th e
m ach in e you just con n ected to, an d it's som ewhere else — pr obably in an oth er bu ildin g on
cam pus, th ough th eoretically it could be an ywh ere from a couple yards to h alf a world away.

Cr e a t in g a N e w D ir e ct o r y
• In th e m en u bar , ch oose Directories > Create New Directory.
• Fill in the field with m y htm ltutorial.
• Click OK.
You sh ould n ow see a directory n am ed m y htm ltutorial. You m ay n eed to scroll down to see it.
• Dou ble-click on m y htm ltutorial to open it.

U p lo a d in g Y o u r File s
First you will select your files on th e local system , th en you will u pload th em to th e r em ote
system .
• In th e m en u bar , ch oose Remote > Put Folders and Files.
• In th e dialog box th at follows, n avigate to th e con ten ts of your tutorial folder.

21
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

• Select an d Add each file you wish to upload. Select all th e H T ML files you created. Don 't
forget to select m ustard.jpg as well.
• Wh en you are fin ish ed, click Done.
• Make sure th e n ext dialog box h as th e followin g settin gs:
Text Files: Text
Other Files: Raw Data
• Click OK.
Fetch will upload the files. When the up load is com plete, th e con ten ts of m y htm ltutorial in t h e
Fetch win dow should con tain the files you selected for tran sfer.
• When you are satisfied that all your m aterials have been tran sferred, proceed to section
7.3 b elow.

7. 3 Th e Mo m e n t o f Tru th
Now com es th e m om en t of tr u th ! Poin t you r br owser to:
h t t p : / / x a v i e r . x u l a . e d u / y o u r _ u s e r n a me _ h e r e / my h t ml t u t o r i a l / mu s t a r d . h t ml
Con gratulation s -- you're a webm aster!

22
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

8 . Cle a n in g U p
You probably don 't wan t to leave th ese tutorial files on th e server, so you m ay delete th em .
• Retu r n to you r FTP clien t.
• Select th e files you wish to delete from th e rem ote system . H old down th e sh ift key to
select m ultiple files.
o W in dow s users: Click th e button to th e righ t of th e Rem ote System Win dow th at
is m ar ked Delete.
o M ac users: Choose Remote > Delete Directory or File…
• Click Delete in th e dialog box th at appears.
You m ay n ow close all run n in g application s.
If you are doin g th is tutorial in a lab, you sh ould also take a m om en t to clean up th e desktop as a
courtesy to th e n ext user . Sim ply dr ag your tutorial folder to the Recycle Bin (Win dows) or the
Trash (Mac). Don 't forget to sh ut down your com puter an d turn off th e m on itor.

23
How the W eb W orks, Part I: Introduction to HTML
H TML Tu to rial

All About M ust a rd

An Abbre via t e d H ist ory of M ust a rd
Th e Greeks used m ustard as a con dim ent an d a drug but it was th e Rom an s wh o first m ade
real culin ary use of it by grin din g th e seeds an d m ixin g th e flour with win e, vin egar, oil an d h on ey.
Wh en th ey m oved in to Gaul th ey took m ustard plan ts with th em an d it was in th e rich win e
gr owin g r egion of Burgun dy that m ustard flourished.
It is reputed th at at a festival in 1336 atten ded by th e Duke of Burgun dy an d h is cousin Kin g
Ph ilip th e Fair, n o less th an 70 gallon s of m ustard were eaten . Reports do n ot say h ow pickled
th e guests were.
Pope J oh n XX11 of Avign on loved m u star d so m u ch th at h e cr eated th e post of "Mu star d
Maker to th e Pope," a job h e gave to an idle n eph ew wh o lived n ear Dijon . Dijon soon becam e th e
m ustard cen tre of th e world an d in fact so im portan t was it th at in 1634 a law was pa ssed to gran t
th e m en of th e town th e exclusive righ t to m ake m ustard.
1777 saw th e start of m ustard m akin g as we kn ow it today as it was in th is year th at Messieurs
Grey an d Poupon foun ded th eir com pan y. Th ey used Grey's recipe an d Poupon 's m on ey! We still
owe a lot to th is redoubtable duo as in 18 50 th eir com pan y in ven ted a steam operated grin din g
m ach in e so en din g th e er a of labor iou s an d back-breakin g han d grin din g.
An d as J esus said in th e Gosp el of Thom as:
[Th e Kin gdom of H eaven ] is like a m ustard seed. It is th e sm allest of all seeds; but wh en it falls
on tilled soil, it produces a great plan t an d becom es a shelter for birds of the air.

A M ust a rd Re c ipe

I ngre die nt s
4 Tablespoons Dry mustard powder
1 Tablespoon White Wine Vinegar
2 Tablespoons Flat beer
1 Clove Garlic
1 Teaspoon Sugar
1/2 Teaspoon Salt
1/4 Teaspoon Turmeric
1 Tablespoon Olive oil -- optional

Pre pa ra t ion
1. Wh isk togeth er dry m ustard, vin egar an d beer.
2 . Use a garlic press or large pair pliers to squeeze th e juice from th e clove o f garlic in to the
m ixture.
3 . Stir in sugar, salt an d turm eric.
4 . To m ake m ustard sm oother an d less hot, add olive oil to taste.

M ust a rd Link s
• Européenne de Condiments
h t t p : / / www. mo u t a r d e . c o m/
A mustard company's website
• Mustard Gas
h t t p : / / www. s p a r t a c u s . s c h o ol n e t . c o . u k / FWWmu s t a r d . h t m
A description of mustard gas
• Mount Horeb Mustard Museum
h t t p : / / www. mu s t a r d we b . c o m/
The world's largest collection of prepared mustards