Make a Story Page

2001 September 24

Make a story webpage

First, open the Notepad program, and do the following:
1. Write a few paragraphs about ANYTHING>
  (About yourself, your favorite thing, a story, how you want your website to look, etc. -- anything at all.)
2. At the top, put today's date on the right, and a title, centered, on the next line.
3. At the bottom of the page, draw a line.
  Write your name on the next line,
  and a copyright notice on the following line.
Save to a file named "story1.html" (not "story1.txt") on your floppy disk.
Now, start up the browser (Netscape), then open the file you saved.
(Click on "File", "Open Page...", "Choose File...",
then find the A: drive, click on your file "story.html", click on "Open",
and click again on "Open" in the "Open Page" popup.)
How does it look? What happened to your spacing? (The answer is "word-wrap".)
Also notice that letters have a nicer appearance -- "proportional spacing".
Adjust the window size, and see how the word-wrap changes with the width.
Also try changing the Netscape font size (View/Increase-Width)
Go back to Notepad window; add the following line and re-save the file. at the top of your file:
```
			<PRE>	
```
Now go to the Netscape window and see what has changed.
(Nothing changed? Oh, you must click on "Restore", to read the changed webpage from your floppy.)
You will see a page that looks like what you had in Notepad.
All the spacing is preserved. Also, all of the letters are the same width (monospaced).
How can we keep our paragraphs and spacing,
but also make the text look more colorful and nicer,
with special effects like boldface, italics, underline,
big, and small, as well as headings and ruler lines
(and maybe some pictures)?
The answer is "markup tags"

Following are some HTML tags you can add:
In your HTML source page (in Notepad), remove the <PRE> tag, and replace it with the following tags:
```
		<HTML>
		<HEAD>
			<TITLE>
				This is my title
			</TITLE>
		</HEAD>
		<BODY>	
```
In front of the date, put a tag that says:

Surround your heading with the tags like this:


		<CENTER>
			<U> This is my heading </U>
		</CENTER>

Put a tag at the start of each paragraph.
Find some words or phrases that you would like to put in italics or boldface, and surround them with markup tags, like this:
```
		The quick brown fox
		jumped over the lazy dog.
```
Instead of a line at the bottom, try using a "horizontal rule" tag: <HR>

At the bottom, add another line to that says:


		 <A HREF="next.html"> Click here for the next page. </A>

Save your page frequently, from Notepad,
and check it with Netscape each time (by clicking the "Reload" button).

For examples of increaingly nicer versions of a simple web page,
look at the following files both in the browser and with "View Source" (Ctrl-U).

Suggestion: user the RIGHT mouse button, to bring each one up in a separate browser window. Then use Ctrl-U to see source code in separate windows.
(Don't worry; Netscape can handle many, many pages with its multithreading -- at least until the operating system crashes runs out of memory.)