Click the print icon to print this handout

Creating Your Own Web Pages from Scratch: A Beginner's Guide

Despite the availability of Web publishing software such as FrontPage and PageMill, it's useful to know how HTML coding works because such knowledge gives you greater control of your page. That's why this handout teaches you to use HTML (hypertext markup language; the language used to format Web pages) to create Web pages from scratch.

Of course, there's a lot you could know about Web page design, but fortunately there's only a little bit that you must know in order to create basic, functional pages. This handout gives you enough information to create a Web page that's viewable through Web browsers such as Netscape or Internet Explorer. It does this by

explaining the basics of HTML
describing seven initial steps in Web page design
offering a list of basic codes to help you format your first Web page
listing a few additional resources on Web design

Before getting started, though, keep several things in mind about this handout. First, this handout only gives you enough to get started. You can create functional pages with the code presented here. If, however, you want to learn more, take a look at some of the resources listed in "Additional Resources." Second, all references to coding are presented in Courier font so you can easily identify what you need to type.

Here's the one thing you need to know about HTML code

A Web page has essentially two types of information:

(1) information that you want viewers to see, and (2) code that tells the Web browser how to format that information.

Viewers generally do not see the code, unless they click on the View menu at the top of the screen in Netscape and choose Document Source. (The process may differ with other Web browsers.) This will show the code used to create a page.

HTML code appears in brackets < > to distinguish it from the information you want to display for viewers. Most codes appear in pairs, one part showing where the coding starts <code> and one showing where it ends </code>. For example, if I were to write

I like Absolam, Absolam! more than most any other book

the book title would appear in italics when viewed through Netscape:

Absolam, Absolam!

That's really the main thing to remember: Codes appear in brackets and generally surround the text you want to format. The key, then, is to remember some basic codes (and learn where to find other codes) so you can format your own page.

Start designing your own page

The best way to learn HTML is to start creating a page and to learn the necessary code as you go along. Don't bother trying to learn a lot of code ahead of time. Just jump right in. You can use a basic word processing program such as Notepad to enter code and text. Follow these instructions, and you'll be on your way to Web authorship:

1. Open the Notepad program available on Windows 3.1 or Windows 95. You'll most likely find the application in the Accessories window.

2. For the first line of the page, type <html> and hit the Enter key to move the cursor to a new line

3. Type <title> and then type in the title you want for your page. Then type </title> and hit the Enter key.

4. Type <h1> and then type in the first heading you want for your page. Then type </h1> and hit the Enter key.

5. Type <p> to insert a blank line; his the Enter key; and type <hr> to insert a solid horizontal line.

Your file should now look something like this:

<html>

<title>My First Home Page</title>

<h1>Welcome to my home page</h1>

<p>

<hr>

6. Save the file to your a: drive. Give the file an appropriate name and add .htm as the final extension. So, a homepage might be named home.htm.

7. Open Netscape. Open the File menu, and choose Open File. Then select the a: drive and click on your file (e.g., home.htm).

If all has worked correctly, you should see your first heading plus the line that you inserted. After that you can return to your Notepad program and begin to add other elements to your page. Take a look at the Basic Commands section for guidance on other types of coding for your page.

Hint

Also remember to look at the source code of other pages that you like. Once you've learned some of the code yourself, you can see how others have used it to create their page. You can view source code by opening the View menu and choosing Document Source. You'll then see a text-only window that includes the information and code for that page.

Basic Commands

The table below lists the commands that you need in order to create a basic, functional Web page. Any time you see a blank space between two quotation marks (" "), that means you need to insert the name of a file. For example, if you want to place an image on a page, you'd use <img src=" ">, and you'd need include the name of the image. If the name of the image were laser.jpg, then your code should read <img src="laser.jpg">.

Category	Code	Description
Page-Level Format	<html></html>	Confirms for the Web browser that the page uses HTML code. The first part of the pair <html> appears at the beginning of the page, and the second part </html> appears at the end.
	<title> </title>	Gives your page a title, which then appears at the very top bar of your Web browser screen. The title also appears in a viewer's Go menu and in one's Bookmarks, so it's important to give a descriptive title.
	<body background=" ">	Lays a "wallpaper" background on your Web page. Text and images are laid over that background. See a Web authoring site such as The Web Developer's Virtual Library for links to background samples. (Note: Another way to affect background color is <body bgcolor=" ">
Paragraphs & Lines	<p> </p>	Inserts a blank line into a page. Use this code to create block paragraphs. (Note: You don't really need the end code </p> all the time.)
	<br>	Inserts a line break. Use this code when you want to start a new line of text but don't want to insert a blank line.
	<ul> </ul>	Indents the left margin of a paragraph.
	<li>	Inserts a bullet and creates a hanging indent. Use this code with <ul> </ul> to create bulleted, indented lists.
	<hr>	Inserts a gray line. This code is useful if you want to use lines to separate parts of a text.
Links	<a href=" "> </a>	Creates a link to another Web page. If you wanted to link from your page to IPFW's page, you'd type: <a href="http://www.ipfw.edu"> Indiana University, Purdue University Fort Wayne</a>. The name of the university (i.e., the three words appearing before </a>) would be the link that viewers click on to get to the WKU site.
	<mailto:>	Inserts a link that allows people to compose and send email. Instead of typing a href="http: . . ." you type a href="mailto:" and the email address
Images	<img src=" ">	Inserts a graphic image into a page. If the name of your graphic were laser.jpg, then your code should read <img src="laser.jpg">.
Color	<font color="# "> </font>	Sets the color of your text. Color codes are six digits long--two digits each for red, green, and blue. To set a gray font, for example, you'd type <font color="#808080">.
	<body bgcolor="# ">	Sets the background color of your page. If you wanted your text and graphics to appear on a white background, you'd type <body bgcolor="#ffffff">
Fonts	<h1> </h1>	Sets heading sizes. <h1> </h1> sets the biggest headings. <h2> </h2> sets subheadings, etc.
	<font size= > </font>	Sets font sizes. Text appearing between <font size=+1> </font> would be bigger than text appearing between <font size=1> </font>. If you don't include this code, the browser uses a default size.
	<font face= > </font>	Lets you choose font styles, such as Helvetica, Times Roman, etc.
	<b> </b>	Sets boldface.
	<I> </I>	Sets italics.

Additional Resources

There are a number of terrific resources available online for Web authors. As with learning only as much code as you need, you only need to find a few sources that offer you enough help to design the type of pages you'd like. Here are three sources that have proven especially useful for me:

The Web Developer's Virtual Library http://www.stars.com/

This site offers an impressive collection of advice, downloadable images, links to tutorials, etc. Perhaps their most useful feature is their alphabetical index. Use this to search for advice on topics ranging from the creation of tables and frames to the use of Java script.

Yale C/AIM Style Guide http://info.med.yale.edu/caim/manual/index.html

how

what

why

Questions? Comments? Email me at blythes@ipfw.edu

last updated: 10.6.99