HTML Intermediate

HTML Lesson 1 January 2004 Information Processing

Introduction

This lesson is going to show you how to write your own HTML using only windows notepad. It's just as easy as learning to use a "publisher", and you will have far more control over your pages and how they look.

Step 1: Create a place on your hard drive to save your work

Your web page will consist of text documents created and saved in notepad with the extension .html, and graphic images (clip art and photos) with the extensions of .jpg or .gif. All of these items need to live in the same folder on your hard drive, so let's make that home for them first:

On your desktop, double-click and open "My Computer"

Double-click and open drive C (or whatever your hard drive is named)

Right-click somewhere in the box in an open space to bring up a pop-up menu. Choose: New --> Folder.

Type a name for the new folder, something like "webpage".

Step 2. Put a few graphics in this folder

Any graphic images that you have and want on your web page need to be moved to this new folder. Move the sample picture there now and write down its name for later easy reference:

Example names: myphoto.jpg quackers.gif

Step 3. Begin your first page

Open notepad. (Start --> Programs --> Accessories --> Notepad ) (not Wordpad!) Type only the red items, including the angle brackets, exactly as shown:

Type: <html> Hit enter and skip down a line or two.

Type: <head> Hit enter.

Type: <title>My First Webpage</title> Hit enter.

Type: </head> Hit enter and skip down a line or two.

Type: <body> Hit enter and skip down a line or two.

Type a sentence or two of your choice, something like: Welcome to my first web page. I am thrilled to be learning html.

Skip several lines and then type: </body>

Hit enter and type: </html>

A NOTE on what you are doing:

The left and right angle brackets < > create a TAG.

A tag is simply an instruction to your browser that tells the browser how you want the text or image between the tags to appear on the page.

The angle-brackets themselves, and the instruction between them, will not be visible on the actual web page.

Most tags are used in pairs: an opening tag < > and a closing tag < / >.

You will place opening tags and closing tags in your document to tell the browser where you want a certain effect such as bold, underline, and colors, to begin and end.

Although most of the time you will select the tags you want to create the effects you want, the tags shown in Step 3 (html, head, title, and body) are required tags in every html document, as they instruct the browser that this is an html page.

If you've been following the instructions exactly, you should now be looking at an untitled notepad document that looks something like this

untitled - Notepad

________________________________________________________

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

Welcome to my first web page.

I am thrilled to be learning html.

</body>

</html>

Step 4: Save this document to your webpage folder

In the notepad window, click: File --> Save as The "save as" window will open.

Find your webpage folder: In the "save in" field, click the down arrow and locate drive C, (or whatever drive you made your webpage folder in). The contents of drive C will appear in the big box below the "save in" field. Locate your webpage folder and double-click it. It should now appear in the "save-in" field.

In the "filename" field, type: index.html (note: you MUST name the first page "index.html")

In the "save as type" field, select: "All files(*.*)"

Hit enter or click save.

Obviously, notepad is not a WizzyWig editor, but that is not a problem. Next we will learn how to view and edit your actual page.

Step 5: View your actual web page

If you have saved your document as index.html (confirm that by checking the title bar of the document - it should now say "index.html - Notepad". If it doesn't, redo step 4) then:

Go ahead and close notepad. (File-->Exit)

Open your webpage folder. (My computer --> C: --> webpage)

Find "index.html" and double-click it. Assuming you have Microsoft Internet Explorer (MIE), it will open and display your page. Of course, there's not much to see there yet.

It will look something like this:

My First Web Page - Microsoft Internet Explorer

___________________________________

Welcome to my first web page. I am thrilled to be learning html.

Step 6: View the source and edit your page:

Somewhere in the empty space of the browser window, right click, and then select "view source" from the pop-up menu.

"Index.html - notepad" re-opens!

Now you have both windows open (notepad and MIE). In notepad, you edit the page, and in MIE, you get to see your work. You'll create your entire page this way, offline. To make things easy, move and position these two windows so you can see a portion of both (don't have their size maximized) because we're going to be doing a lot of clicking back and forth between them.

Step 6: View the source and edit your page (continued)

4. Let's learn 2 new tags and see the results: In notepad, we're going to instruct the browser to separate and center your sentences on the page. Add the tags shown in red below to your sentences in notepad. <center> Welcome to my first web page. I am thrilled to be learning html. </center>

Step 6: View the source and edit your page (continued)

5. We must save these changes. You must re-save the document every time you make any kind of change. In the upper-left corner of notepad, click: File -->Save.

6. Every time you save a change, you must refresh your browser window to see the change. Somewhere in the empty space of the browser window page, right click, and then select "refresh" from the pop-up menu.

Your revised web page should now look like this:

My First Web Page - Microsoft Internet Explorer

_____________________________________ Welcome to my first web page. I am thrilled to be learning html.

Note on the 2 new tags:

The center tag is self-explanatory, but you must remember to use both the open-center and the close-center tags, as any information between these two tags will be affected.

The break tag is one of a few stand-alone tags (i.e., it doesn't need closing), and it forces a line break.

You can hit "enter" or "space bar" all you want - it won't change the page's appearance. Browsers don't recognize blank lines or spaces. The only way to format the appearance of your page is to type in the tag that will give your browser the appropriate instruction.

Step 7: Add a graphic image

We're going to add to the page, one of the graphic images you moved to the webpage folder in step 2. I'll use the example names. You'll use your actual graphic image names. We're going to skip a line, and center the image right under your text.

In notepad, place your cursor after the </center> tag and hit "enter". Type:

<center><img src=“quackers.gif”><center>

Step 7: Add a graphic image (continued)

3. Replace your own image name for quackers.gif and make sure you include the quotation marks. You must type the name of the image exactly as it appears in your webpage folder. Tags are not case-sensitive, but image and file names are. You might want to use all lower-case in your file names, just to avoid conflict problems.

Your notepad document should now look like this:

index.html - Notepad ___________________________________________________________________________<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<center>Welcome to my first web page. I am thrilled to be learning html.

<center>

<center><img src=“quackers.gif”></center>

</body>

</html>

You've learned another tag: image source < img src= > , used to specify the image you want to place on your page. This one also doesn't need a closing tag.

4. Save notepad, then switch to your browser window and refresh. The graphic image will appear, and it should be centered, as in the example below:

My First Web Page - Microsoft Internet Explorer _____________________________________ Welcome to my first web page. I am thrilled to be learning html.

If your graphic image doesn't appear, don't panic, you've probably made one of the errors below:

You have named a graphic that is not in the same folder (webpage) as where you saved the index.html page. Move the graphic into the same folder.

You've got the wrong extension name - you typed .jpg, but the image is a .gif (or vice versa). Correct the extension name in the image source tag.

You've got a possible lower case/upper case conflict. As explained above, file names are case-sensitive.

You've made a typo. Maybe you've made a spelling error, included a space where there shouldn't be one, or omitted an angle bracket or a quotation mark. Go back and proof your document carefully.

You forgot to "save" in notepad or "refresh" MIE.

Today’s Classwork Grade

Leave your page open in the browser so that I can come around and grade it.

I will grade:

Title of your page (25 points)

Centered text (25 points)

Line break (25 points)

Picture (25 points)

Step 8: Upload your page to the web:

Sign on to AOL

Go to keyword: my ftp space. The My FTP Space window opens.

Click: See My FTP Space (If you get a Hometown AOL pop-up, close it. You're an html-writer now, you don't need that wussy thing.) A window named "members.aol.com:/(Your screen name)" will appear. In the window, it will say Connected to members.aol.com Bookmark this if you want, this is your ftp place. You will upload your files onto the internet from here.

Notice the row of buttons in the bottom of the window. Click on "upload". A new window appears.

In AOL, you must upload each text file and graphic individually. Notice the "transfer mode" radio buttons. We're going to upload your index.html file first. Select ASCII. All your html text documents are ASCII.

Step 8: Upload your page to the web (continued)

6 . In the "Remote filename" field, type: index.html Double-check you have ASCII selected, then click continue.

A new window named "upload file" appears. Click "select file".

The "Attach File" window opens. You can now use the down arrow of the "look in" field to browse your hard drive and find your index.html file. (C: --> webpage --> index.html) Double-click the file name (index.html) You're back to the "upload file" window, and the name and location of your index.html file should be shown in the "file" field . Click "Send"! The upload should happen fairly instantly, since this is such a small file. When it's done, click "ok“

We're now going to upload your graphic image: In the "Remote filename" field, type: quackers.gif (But you will use the name of your image, of course.) Select the "Binary" radio button. All graphic images are Binary. Click "continue", and then follow steps 8.7 and 8.8 above, to locate and send your graphic image. Click ok when done.

Close all those ftp windows. We're going to go look at your webpage now!

STEP 9: Find your page online

Your URL is: http://members.aol.com/yourscreenname

Type your URL in the keyword field, and hit enter. (Of course, you'll put your screen name (no spaces) in place of yourscreenname. You knew that, didn't you?) Also, you don't need the "http://" in the keyword field. It's assumed.

STEP 9: Find your page online (continued)

2. Your page should open. If it doesn't, if you get the message "not found" or "directory of index.html", you will need to repeat the upload steps. If re-uploading becomes necessary: You just need to reload what's not showing. If you get one of the messages above, or a page of "hieroglyphics" you need to reload your index.html. If your page opens, but you don't see the graphic, you need to reload the graphic.

STEP 9: Find your page online (continued)

Again, the ftp place is super case-sensitive, so pay attention. If in your webpage folder, your graphic is named myphoto.jpg , and in your index.html document you type myphoto.JPG and in the ftp remote filename field you type Myphoto.jpg , it ain't gonna happen. All you'll get is a picture of a nice X !

Other than that, it's probably not your fault. Uploads in AOL often fail - I don't know where the document or image goes (it must be floating around in cyberspace somewhere) but occasional upload "redo's" is just something in AOL you have to deal with.

IMPORTANT REMINDER:

Your browser stores a copy of recent pages you have visited, for the purpose of being able to load them faster if you should visit them again. Therefore, as you begin to build and upload your actual web page, after any edit, revision or upload, don't forget to right-click and refresh your actual online page, or you may be viewing the old page as stored in your cache, instead of the revised page with all your changes!

Now you’re ready for lesson 2!

We have learned the very basics of how to create a web page and upload it to the internet, using notepad, AOL and MIE. Granted, the page we made is pretty boring, and I know you'll want to learn the tags that will add color, backgrounds, different fonts, hyperlinks, etc. etc.

Now that you know the basics, you will have no trouble learning more html tags to dress up your page. When you're ready, Part 2 will walk you through a number of additional tags and techniques.