Building Web Pages From Ground Zero

By Professor Nibble ã Nibble University 2000-2007

HyperJump to Basic Structure Tags, Text Editors, Assignments

INTRODUCTION - Lesson 1

HTML, or HyperText Markup Language, is a computer language used to make World Wide Web pages. When the Internet was first created, text only screens were the norm. Someone came along and thought - "How boring" (not one of my 9th graders, though this is their favorite slogan). The WWW was created to allow things like graphics and audio to be added to Internet pages. There are still text only screens out there on the Internet, but almost everyone these days "surfs the net" on the World Wide Web exclusively. Many people have never experienced anything on the Internet other than the WWW. To make a WWW page, we use the HTML language.

 

HTML is called a MARKUP LANGUAGE. It is not a true programming language like BASIC or C++. HTML is made up of a bunch of simple codes that are used to manipulate everything placed on a web page, including things you may hear but not see. Learning HTML is not difficult, but it does require you to learn "THE RULES" for placing the HTML codes on your web page.

 

If you make a mistake in typing in your codes, or you don't follow the rules of how the codes should be placed on the page, nothing happens. Seriously, nothing happens! In fact, that becomes the problem. What you want to happen, doesn't. The FUN part is to figure out why your page doesn't do what you want it too, and make the adjustments so it will.

Note: I will use RED text for headings, vocabulary, emphasis and HTML tags. I think it improves the readability of the material. Any text shown with a BLUE background is an attempt to show you what you would see using a browser - the results of your HTML coding.

 

HYPERTEXT

Web pages are primarily made up of text, graphics or a combination of the two. By placing a link on some text, you allow the viewer of a web page to jump to another location on the page, to another page on the computer, or to another web page on a computer anywhere in the world. The link is called a hyperlink. Placing a hyperlink on text turns it into hypertext. You can even place a hyperlink on a graphic. Since you can use HTML to place many different kinds of media on your web page, and you can jump from one page of media to another, we use the term hypermedia to describe the whole process. My students get hyper when they have trouble getting their web page to work right. I've tried clicking on them, but they never seem to go away! I guess we have some inconsistencies in our WWW terminology.

 

When we look at a page of HTML code, all we see is a lot of letters, words and symbols. We must use a browser to see the really cool stuff. These lessons are designed primarily for those who will be using a Netscape or Microsoft browser. Since my current school is using Microsoft's Internet Explorer 5, the lessons will be slanted in that direction. If you don't know what I mean by that statement, you will later.

 

Enough background. Let's light this candle!

 

HTML BASIC STRUCTURE TAGS

HTML codes, more commonly called TAGS, are commands that are placed between < and > brackets. Anything written between the brackets is invisible to a browser. HTML tags are not case sensitive.

<CENTER> is the same as <center> is the same as <Center>

Even though tags are not case sensitive, graphic files are. When you load a graphic to your page, the filename should be identical to the filename on your hard drive. More about that later.

 

TAGS ARE USUALLY OPENED AND THEN CLOSED

Most HTML tags must be closed after they are opened. To close a tag instruction, simply add a / mark like this:

<CENTER> This text will be centered on the page. </CENTER>

If I forget to close the <CENTER> tag, the rest of the text on the page will be centered even if I want it aligned left.

 

<HTML> </HTML>

A browser must recognize where your web page begins and where it ends. All tags must be placed between these two tags:

<HTML>
</HTML>

This is really easy! Let's look at the rest of the BASIC STRUCTURE TAGS that must be present in every web page.

 

<HEAD> </HEAD> and <BODY> </BODY> and <TITLE> </TITLE>

Between the two <HTML> tags you have heading and body tags. Remember they must have a beginning and an end. Here's what they look like added to our formula:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

As you can see, an HTML page has two main parts - a head and a body. Within the <HEAD> tags you must have a <TITLE>. Anything written between the title tags should describe what the page is about. Browser bookmarks grab your title for a page description, so your title should be less than 64 characters and specific enough to be a clear descriptor of your web page contents. Now our BASIC STRUCTURE looks like this:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

When you start a web page, the most common template I've seen is like this:

<HTML>
<HEAD>
<TITLE> Your title goes here. </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Most of the code will be placed between the body tags. The tags placed within the body of your HTML document define what the browser will show. Right now, the code above, is a blank page waiting for some wizard to place some tags between <BODY> and </BODY>.

top

TEXT EDITORS

You are now armed and dangerous! But I'm not really worried yet, because I haven't told you where to type your HTML tags. Here's the info you need:

  • You may type your tags in any text editor you like. Your computer operating system probably comes with a simple text editor like WordPad or NotePad (Windows environment). These simple editors work just fine.

 

  • Many HTML aficionados like to use HTML editors. They come in all shapes and sizes and prices, with minimal to "everything but the kitchen sink" features. I purchased a Shareware editor out of Australia called FlexEd years ago. I will use a Freeware editor during this class. Basically, you want your HTML editor to make entering tags easier than typing them from scratch.

 

  • Once you decide which editor you will use to type your code into, you just begin to type away. You will save your file with any name you like, but it MUST have a .htm or .html extension. Since I use Windows, I use a .htm extension. A legal filename would look like - homepage.htm

 

  • To run your saved file, you just double-click on it. Your browser should be set to automatically read all .htm and .html files.

 

  • Smart people create a template with the BASIC STRUCTURE TAGS already typed in. This way, they do not have to type these tags in every time they start a new web page. My HTML editor automatically places the BASIC STRUCTURE TAGS in a new document I create.

 

  • Try looking at your web page in both Netscape and Microsoft browsers. A majority uses one of these two browsers, and the results could be a bit different. If your results are satisfactory in both browsers, you've done a pretty good job at creating a web page that will reach as many people as possible.

 

  • Spacing - Your browser pays no attention to line breaks or paragraphs that you type into your text. You have to use HTML tags to format how your text will look on your page. It's time to look at a couple of examples:

 

<HTML>
<HEAD>
<TITLE> My web page practice </TITLE>
</HEAD>
<BODY>
This is the first line of text on my awesome web page.
This is the second line of text on my awesome web page.
This is the third line of text on my awesome web page.
</BODY>
</HTML>

You would think the simple web page above would give you this:

 

This is the first line of text on my awesome web page.
This is the second line of text on my awesome web page.
This is the third line of text on my awesome web page.

 

NOT

 

You would actually get a web page that looked like this:

 

This is the first line of text on my awesome web page. This is the second line of text on my awesome web page. This is the third line of text on my awesome web page.

 

In this case, your entire reputation would be ruined, because your HTML career would start out with a lie. Remember what I said a few lines back? Your browser pays no attention to line breaks or paragraphs that you type into your text. You have to use HTML tags to format how your text will look on your page.

 

Assignment 1 - Lesson 1

  1. Open NotePad, or whatever is the simplest text editor that came with your operating system.
  2. Type in the eight BASIC STRUCTURE TAGS
  3. Between the title tags put Practice Page For FirstName LastName.
  4. Take any handy book or magazine and type in one paragraph between the body tags.
  5. Save your file as lesson1.htm
  6. Go to the location of the file and double-click on it so it is loaded into your browser. Is the result what you expected? Why or why not?

 

Assignment 2 - Lesson 1

  1. Open NotePad, or whatever is the simplest text editor that came with your operating system.
  2. Type in the eight BASIC STRUCTURE TAGS in this format all on ONE LINE (I have more than one line here because of my margin limitations, but NotePad will let you type the whole thing on one line. Be sure to go to the menu in NotePad and turn off Wordwrap - go to Edit and then make sure no check mark is next to Wordwrap.):

    <HTML> <HEAD> <TITLE>Practice Page For FirstName LastName</TITLE> </HEAD> <BODY>Type or copy and paste the paragraph from lesson 1 and put it here</BODY> </HTML>
  3. Save your file as lesson1b.htm
  4. Go to the location of the file and double-click on it so it is loaded into your browser. Is the result what you expected? Why or why not?

top

Table of Contents

Lesson 2