Build a Web Page with HTML

1 Examine source media for use in your web pages.
Prepare a collection of text and pictures that you want to publish on the web.
Think about how these items might be assembled into an interesting and informative Internet site.

2 Plan the design of your web site.
Plan at least three different "pages" for your site p; one that is the startup (home) page or main menu, and two others that you can jump to from the home page.

Decide which kinds of information to put on which page. For this activity use text and graphics from the Renaissance Studies Materials folder.

Use the diagram below to organize the lay out your pages, their design, and a list of the elements for each one.

Draw arrows to show the links between pages and determine methods of navigation.

3 Open SimpleText.
You will use SimpleText to prepare HTML documents. An HTML document is a simple ASCII text file, with certain codes embedded in it. These codes are called tags. We will use SimpleText to type in the content of our document, and to add the HTML tags.

4 Type in the content of your page.
Enter the text that you want to appear on the page. You can type it from the keyboard, copy and paste it from the Scrapbook, or from another document. Leave it in plain text; neither font style nor size is relevant here.

5 Add required HTML tags.
The page should open with the tag <html>. It should end with the tag </html>. This tells the computer that indeed, this is an html file. So insert <html> onto the first line of your document. Insert </html> onto the last line.
Note: The < and > characters indicate the beginning and end of an html tag.
Within an html document, there are two parts: the head and the body. Indicate the beginning of the head by typing in the tag <head>, right after <html>. Sow the end of the head with the tag, </head>.

6 Give the page a title.
The title will show up in the Title bar of Netscape when it is browsing this page. The title is part of the head. Your title should be tagged like this:
<title>The Best Page Ever</title>
You see that there is a starting tag (<title>) and and ending tag (</title>). This indicates that everything within the two tags will be treated as a title.
That's all we'll put in the head, so now type </head> right after <title>. Your page should look like this:
<html>
<head>
<title>The Best Page Ever</title>
</head>
All the text you entered is right here.
</html>

7 Show the body.
The rest of your page will be the body. So right after </head>, type <body>. And right after the text, type </body>.

8 Make a heading.
To show that some text should be larger and bolder than the rest, you should make it into a heading. Do this by using the header tags <h1> and </h1>. A heading might look like this:
<h1>Welcome to the Best Page Ever!!!</h1>
<h1> makes it a big heading. <h2> would make it a smaller heading, and <h3> even smaller. Take some of your text and make it into a heading.

9 Add a picture.
To make a picture appear in the page, you must establish a link to the file that contains the image. You use html tags to indicate this link. Follow these steps:
· make sure your image file is in GIF format. (If it is not, open the file with GraphicConverter, and save it as a GIF file, and add the extension .gif.
· put the image file into the same folder as your html document.
· in your html document, between the heading and the rest of the text, compose a link in the following form:
<img src=filename.gif>
This will place the picture right after the heading.
Note: You won't see the picture in SimpleText. You will need to save your html file on the disk, and then open it with Netscape to see what it looks like.

10 Test your page with Netscape.
Your page should look something like this:
<html>
<head>
<title>The Best Page Ever</title>
</head>
<body>
<h1>Welcome to the Best Page Ever!!!</h1>
<img src=filename.gif>
All the text you entered is right here.
</body>
</html>
· Save the page you have been working on in SimpleText. Make sure you save it in the same folder as the image file.
· Open Netscape. Use Open File from the File menu to open the html file you just saved.
· View your page in Netscape. If you did it right, you will see your page's title in the title bar, the text and headings in the Netscape window, and the picture just on top of the text.
· If you page needs fixing, go back to SimpleText, open the file, and fix the html tags so it looks right. If necessary, consult the document An HTML Primer.

11 Make a second page.
Follow the instructions 1 through 6 above to create a second page with different text. There's no need to put a picture on this page. Save it as Secondpage.html when you are done, into the same folder as your first page.

12 Create a hypertext link from one page to the other.
Open the first page with SimpleText. Insert a word or phrase in the text that will become a hypertext link. Around that word or phrase put the html <A> (anchor) tags and the hyperlink reference that establish the link to the second page. Here is the format:
<A HREF="Secondpage.html">Click here to see the second page.</A>
Save the first page.

13 Test the hyperlink.
Open the first page with Netscape. You should notice that the phrase Click here to see the second page is highlighted in blue. Click on the blue words. This should cause Netscape to load and display the second page.

14 Make paragraphs in the text.
While viewing your page in Netscape, you will notice that there are no separations between the paragraphs in the text. To add paragraph separations, follow these steps:
· Open the page with SimpleText.
· Insert the tag <P> to show the beginning of a paragraph, and </P> to show the end.
· Save your html page, then open it with Netscape and see the paragraphs separate.

15 Align the text.
The default alignment of text in HTML is flush left. To change this alignment, you need to insert tags in the text. Insert tags as follows to align text in the center of the page:
<align=middle>
These words will be centered on the page.
</align>