OverviewIn this exercise, we will create an HTML template file using a text editor such as Windows Notepad. We will then take the template and make it the home page of a course Web site.
Start a Text EditorThe text editor will show you a blank page. Nothing much there except Potential. The potential of the Web is in your hands now!
Save the file as template.htm It's a good idea to save a file when you first create it. Use either menu item File > Save or File > SaveAs. The first time you save a file, these do the same thing: they as for the location, type, and name of the file.
- Location should be your diskette or Zip Disk. If you don't have either, here are some possibilities:
- Borrow a disk from a classmate or the instructor
- Save the file on the computer's desktop. Before you leave, email it to yourself. You can either attach the text file, or copy the text itself, and paste it into the message.
- Type must be text.
- The name of the file should be template.htm. Some of the Windows text editors append .txt to all file names, but you can prevent that by putting the name in quotes: "template.htm".
The purpose of a template file is to simplify your life. Whenever you want to make an HTML file, there are some standard things you always have to put in. Why not do it once, save the file, and never have to type it again? Just don't forget what should be there!
Type
in the HTML tags that are always neededThese are the tags that are always needed; check your reference book to make sure you get them right:
- HTML tags to mark the beginning and end of the document.
Tip: Always type the closing tag immediately after you've typed the opening tag. Then go back and put the other stuff inside. That way, you won't forget to put in the closing tag. Think of it this way: if you're making a sandwich, you get out both pieces of bread at the same time, don't you?- Tags to mark the Head area
- Tags to mark the Body area
- In the Head area: the Title tags. Put in a reminder that this is where the Title goes.
- In the Body area, type in a reminder that this is where the main part of the page goes.
Save the file againYou're done with the template for now, so save it. Of course, you can go back on make it fancier when you've learned more HTML tricks.
Start your INP 150 home page Now we'll work on the home page for your INP 150 class. Since you have the template already done, you can just start putting in some simple text:
- In the Title, put in your name and INP 150, like this:
Sarah Strong, INP 150 Home Page for Basic HTML- In the body, put your name and a brief welcome message.
Use SaveAs to change the name of the file to index.htmlIt's easy to make a mistake and save over the template file! It's not a disaster - just an inconvenience. To keep your template file clean and simple, change the name of the file using File > SaveAs. Put it on your disk and call it "index.html". That's a special name for Web files that serve as a home page within a directory of files.
View and print the page in a browserThe purpose of a Web page is to be shown in a browser, right? So take a look! You don't need to exit from the text editor; just run a browser and use File > Open to find where you saved your index.html file. How does it look? Certainly nothing fancy, but it's all yours. :-) If anything in the file doesn't look right, you need to:
- Go back to the text editor
- Change the HTML code and text
- Save the file (File > Save or <Ctrl>+S)
- Go back to your browser
- Click the Refresh or Reload button in the browser's toolbar.
When you get more complex HTML, you may have to go through this process several times.
After corrections, submit the code to your instructorFor this assignment, the deliverable is a page of HTML code representing your home page's source. Check to make sure your name appears in the title!
- On-campus sections: print the source code (from your text editor) and the Web view (from a browser).
- Distance Learning sections: attach the file to an email, and send to your instructor.
Audience: This
is for people who understand basic HTML concepts and want to create a minimal
HTML page.
Objectives: When you successfully complete this lesson,
you will be able to...
About this document...
Module W22h: This document is part
of a modular instruction series in computer technology. For more information,
see the overview
or the list of modules in this series, W: World Wide Web.
This document has been used in the following classes: INP 150 Basic HTML.