Creating Your First Web Page

One way to write a web page is to create a document in HyperTextMarkup Language (HTML). You'll write a regular text file, addspecial formatting tags (that's the HTML), and save your new file.Thena browser can read your document and interpret it. Your page willbe displayed using the default settings and preferences for thatcopy of the browser.

It's true that HTML tags will specify the placement and formattingof items on the page to the browser. However, you have limitedcontrol over how your document will look, for a number of reasons.First, different browsers interpret HTML in slightly differentways. There are some browsers, like Netscape, which are very "robust"-- they can accept a large browsers are less flexible and onlyaccept and interpret a subset of the tags available to you. Anotherfactor that influences how your pages will look is the set ofrules that a browser must follow for placing text and images ona page.

The Tags in HTML

Almost every set of tags in HTML has an "open" and a"close" tag.There are a few exceptions, but for themost part, tags are opened before the item to be formatted, andclosed after it. Tags are enclosed in pointed brackets, < and>. To open a tag, simply type the name of the tag in the brackets,<HTML>. To close a tag, use a slash inside the bracket beforethe name of the tag, </HTML>.

Creating Your First Document

We'll progress step-by-step to create a document from scratch.First we'll write the document as text, and then we'll use HTMLtags to apply the proper formatting. You should use the simplesttext editor you have. If you use something like Microsoft Wordor WordPerfect, you must be sure to save your document as TextOnly or web browsers will not be able to read it.

1. Write some text for your page.

Launch your text editor. HTML editing can be done in any wordprocessor,the simpler the better. If you are using Microsoft Word or WordPerfect,there will be formatting codes in the document which are invisibleto you, but which will confuse the browser. If you must use ahigh-end word processor, save as Text Only when you save yourdocument.

Type some text for your page. For example, type a shortcourse description including a course title, your name, a descriptionof the course, and a list of required readings. Feel free to beinventive.

Sample

Shepherding 101: Intro to Shepherding

Instructor: Lassie

Email: lassie@comehome.com

This course will cover the basic skills every sheepdog shouldhave, including Turning, Starting and Stopping the herd. As abonus we'll talk about how to alert the parents of small childrenin your charge when the children have fallen down wells.

Required Readings:

Talking to Modern Sheep (1963, Lassie)

When Humans go Berserk (1972, Bonnie Belle)

101 Barks, Howls and Growls (1988, Old Yeller)

Save your file in a folder on the computer's hard drive, or betteryet, on your own floppy disk. Name the folder with your name,and name the file your name.html.

2. View your page in Netscape.

Launch Netscape. Select Open File... from the File Menu. Findindex.html in the dialog box and click Open.

Your file will appear in Netscape, but it will not be formatted.

3. Make your title into a header.

Insert the tags for a level one header around the text of your

course title as shown:

<H1>Shepherding 101: Intro to Shepherding</H1>

There are six preset headers that you may use. Level one is thelargest, and level six is the smallest. You may substitute anynumber from 2-6 in place of the 1 if you wish.

Save the file index.html. In Netscape, click on the "Reload"button to see the change you have made.

4. Make some text in your paragraph bold.

Insert the tags for the strong attribute around some of the textas shown:

<STRONG>Instructor: Lassie</STRONG>

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

5. Correct the line spacing of the file.

Add tags for double spacing and for forcing a new line where appropriate.Use the Paragraph tag <P> for double spacing, and the LineBreak tag <BR> for single spacing. These tags have no "closetag" counterparts.

Sample

<H1>Shepherding 101: Intro to Shepherding</H1>

<STRONG>Instructor: Lassie</STRONG><BR>

Email: lassie@comehome.com

<P>

This course will cover the basic skills every sheepdog

should have, including Turning, Starting and Stopping

the herd. As a bonus we'll talk about how to alert the

parents of small children in your charge when the

children have fallen down wells.

<P>

Required Readings:<BR>

Talking to Modern Sheep (1963, Lassie)

When Humans go Berserk (1972, Bonnie Belle)

101 Barks, Howls and Growls (1988, Old Yeller)

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

6. Create a bullet list in your document.

Create the list itself by inserting the list tags, <UL>and </UL> around the text that will be your list.
Define each bullet with the List Item tag, <LI>. This taghas no"close tag" counterpart.

Sample

Required Readings:<BR>

<UL>

<LI>Talking to Modern Sheep (1963, Lassie)

<LI>When Humans go Berserk (1972, Bonnie Belle)

<LI>101 Barks, Howls and Growls (1988, Old Yeller)

</UL>

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

7. Add a Horizontal Rule to separate the parts of your page.

Insert the Horizontal Rule line tag <HR> to set off thebulleted list. This tag has no "close tag" counterpart.

Sample

<H1>Shepherding 101: Intro to Shepherding</H1>

<STRONG>Instructor: Lassie</STRONG><BR>

Email: lassie@comehome.com

<P>

This course will cover the basic skills every sheepdog

should have, including Turning, Starting and Stopping

the herd. As a bonus we'll talk about how to alert the

parents of small children in your charge when the

children have fallen down wells.

<P>

<HR>

Required Readings:<BR>

<UL>

<LI>Talking to Modern Sheep (1963, Lassie)

<LI>When Humans go Berserk (1972, Bonnie Belle)

<LI>101 Barks, Howls and Growls (1988, Old Yeller)

</UL>

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

8. Center the title on the page.

Insert the center tags around the text you wish to center, asshown:

<CENTER><H1>Shepherding 101: Intro to

Shepherding</H1></CENTER>

Note that when tags are nested, they open and close in reverseorder.

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

9. Add anchor tags that will allow you to link to other documents.

When the other document is in the same folder, you can use a"relative"tag which just lists the file name, like this: <AHREF="resume.html">

When the link is to another web site or remote place, use a "fullyqualified"URL in your tag, like this: <AHREF="http://www.sonoma.edu/">

Sample

Required Readings:<BR>

<UL>

<LI><A HREF = "http://www.shepherds.com/">Talking to

Modern Sheep </A>(1963, Lassie)

<LI>When Humans go Berserk (1972, Bonnie Belle)

<LI><A HREF= "yeller.html">101 Barks, Howlsand

Growls</A> (1988, Old Yeller)

</UL>

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

10. Add an email link so viewers can send you email.

The email anchor tag is similar to a regular anchor tag. Simplyreplace http: with mailto: and add your email address, as shown:

Email: <A HREF ="mailto:lassie@comehome.com">lassie@comehome.com</A>

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

11. Add the final tags required for a proper HTML document.

Open and close your document with the <HTML> and </HTML>tags.

Define the Head and Body sections with the appropriate tags.

Use the Title tags to give a page title to your document.

Sample

<HTML>

<HEAD>

<TITLE>Lassie on the Web</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Shepherding 101: Intro to

Shepherding</H1></CENTER>

<STRONG>Instructor: Lassie</STRONG><BR>

Email: <A HREF = "mailto:lassie@comehome.com">

lassie@comehome.com</A>

<P>

This course will cover the basic skills every sheepdog

should have, including Turning, Starting and Stopping

the herd. As a bonus we'll talk about how to alert the

parents of small children in your charge when the

children have fallen down wells.

<P>

<HR>

Required Readings:<BR>

<UL>

<LI><A HREF = "http://www.shepherds.com/">Talking to

Modern Sheep </A>(1963, Lassie)

<LI>When Humans go Berserk (1972, Bonnie Belle)

<LI><A HREF= "yeller.html">101 Barks, Howlsand

Growls</A> (1988, Old Yeller)

</UL>

</BODY>

</HTML>

Save the file. In Netscape, click on the "Reload" buttonto see

the change you have made.

12. Add a graphic to your document.

Use the Image tag to specify which graphic to use. The graphicmust be in the GIF or JPEG format. The image should be in thesame folder as your file.

<CENTER><IMG SRC = "book.gif"><H1>Shepherding101: Intro

to Shepherding</H1></CENTER>

Save the file. In Netscape, click on the "Reload" buttonto see the change you have made.

13. The Final File

<HTML>

<HEAD>

<TITLE>Lassie on the Web</TITLE>

</HEAD>

<BODY>

<CENTER><IMG SRC = "book.gif"><H1>Shepherding101: Intro

to Shepherding</H1></CENTER>

<STRONG>Instructor: Lassie</STRONG><BR>

Email: <A HREF = "mailto:lassie@comehome.com">

lassie@comehome.com</A>

<P>

This course will cover the basic skills every sheepdog

should have, including Turning, Starting and Stopping

the herd. As a bonus we'll talk about how to alert the

parents of small children in your charge when the

children have fallen down wells.

<P>

<HR>

Required Readings:<BR>

<UL>

<LI><A HREF = "http://www.shepherds.com/">Talking to

Modern Sheep </A>(1963, Lassie)

<LI>When Humans go Berserk (1972, Bonnie Belle)

<LI><A HREF= "yeller.html">101 Barks, Howlsand

Growls</A> (1988, Old Yeller)

</UL>

</BODY>

</HTML>