Simplified HTML For The Mildly Curious

SEATTLE SENIORS INTERNET GROUP

SIMPLIFIED HTML FOR THE MILDLY CURIOUS

Our West Seattle section of the SSIG decided to have a little fun and learn something about creating Web pages. HTML scripts are what we use to define a Web page. These scripts are simply some special descriptions we insert into a text document to describe how a browser should display the content of the document. HTML is an acronym for "HyperText Markup Language" and now you can forget what HTML stands for.

For our first project, we will create a page of our favorite links and make that the "home" page for our browser (That's either Internet Explorer if you are a Microsoft fan or Navigator if you are a Netscape fan). That way you can avoid all of those ads you get with either of the browsers default "home" or "start" page.

We will go through the steps of creating a real simple home page and then installing it as your home page in your browser.

If you are looking for a hotshot, quick course in HTML, this is not it! This is going to be a very simple tutorial that, hopefully, will be understandable to the technology challenged.

The Framework

An HTML page will always start with an opening tag <html> and end with a closing tag </html>. Tags are the instructions that tell the browser how to display the information that is contained between tags. Tags are always contained within the "<" and ">" characters.

Between these two tags will be the description of the page in two sections, the "head" and the "body." Each of these sections is set off by tags. The "head" is set off by an opening tag <head> and a closing tag </head>. In a like manner, the "body" is contained within its opening tag <body> and its closing tag </body>.

So the framework of an HTML document is going to look like this:


<html>

  <head>
  
  The content of the head section goes here.
  
  </head>
	
    <body>
  
    The content of the body section goes here.
  
    </body>
  
</html>

Anchor Tags

Well, as you can see, this is not very useful yet. We will create an "anchor" tag which will tell the browser to display a "link" that, when clicked, will take us to another page--perhaps one of our favorite "search engines". An anchor tag is contained within the <a> and </a> tags.

Now the opening anchor tag needs to give the browser the address of the page we want to link to. You'll remember that the address of a page is called the URL or Uniform Resource Locater and it has the form http://www.google.com. This is the formal, or "fully qualified" address of the google search engine. Note that all Web addresses must start with the http:// .

We insert the URL in the opening anchor tag like so:

We insert the href= into the opening tag and follow it with the full URL contained within double quotes. Now we need to include the descriptive text that identifies the link as we see it in our browser. We insert whatever text we want to show up in blue in the browser between the opening and closing anchor tags like so:

<a href="http://www.google.com">GOOGLE</a>

In our browser that will show up as:

GOOGLE

Go ahead, click on the link--but remember to click on your BACK button to come back here!

In a like manner, anchors for yahoo and the Senior Center's start page would look like this:

<a href="http://www.yahoo.com">YAHOO</a>
<a href="http://www.scn.org/scws">SENIOR CENTER</a>

Line Breaks

Now, one of the characteristics of HTML is that "white space" doesn't count. In other words, all of the things we normally do to arrange text on a page won't show at all when your browser displays the HTML document. Everything we would normally do to arrange text: tabs, carriage returns (the ENTER key), and spaces must be replaced by specific tags. Since we want each of our links to appear on separate lines we will have to use the tag that gives us "line breaks." That is the <br> tag.

The Document

Now to put this all together, we put the three anchors inside the body section of our document and end each anchor with the line break tag. The complete document now looks like this:


<html>

  <head>
  
  
  
  </head>
	
  <body>    

    <a href="http://www.google.com">GOOGLE</a><br>

    <a href="http://www.yahoo.com">YAHOO</a><br>

    <a href="http://www.scn.org/scws">SENIOR CENTER</a><br>
  
  </body>
  
</html>

Saving the Exercise to Your Hard Disk

Ok, let's see how it works in your browser. Highlight the text in the preceding window so that everything including the opening and closing HTML tags is selected. Now look on the menubar at the top of your browser and select the Edit menu. Look down the list and select Copy by clicking on it. That little action just copied all that you had highlighted to your clipboard.

Now open Notepad ( Start | Programs | Accessories | Notepad ). Select Notepad's Edit menu from the menubar. Look down the list and select Paste by clicking on it. There, you should now have your HTML document staring you in the face. Note: Please take a look at "Why Notepad?" near the bottom of this page.

We now need to save our document in order to use it. Select File from the menubar and then select Save As from the dropdown list. Decide where you want to put the file (the Save in: box) and give the document a name (in the File name: box)--the name must end in ".htm" (that's dot htm).

Now go to wherever you put the document and double click on the icon for the document. Your browser will now open displaying the information created by your document. It should look something like this:

GOOGLE
YAHOO
SENIOR CENTER

Go ahead, click on the each of the links that you see and be sure that they take you to the appropriate site. Do that in the version that you opened in your browser--not the example just above. Well, the latter will work also but that would be checking on my work--not on your work.

Now, to make this a practical tool try replacing the anchors for Google, Yahoo, and the Senior Center with your own favorites. And then add anchors for some more of the sites that you go to most often. Do this by opening the document in Notepad and making the changes--then saving the altered file. Just remember that the document name must end in ".htm". That is so your operating system will recognize that the document is to be opened in a browser.

Changing Your Browser's "Home" Page.

The first step is to open your new page in your browser. You've already checked that the links work haven't you? Now with your page in view, do the following:

For Intenet Explorer:

Select Tools from the menubar; then Internet Options. Find the Home Page section on the General tab and click on the Use Current button. Click on the Apply button then click on the OK button.

For Netscape Navigator:

Select Edit from the menubar; then Preferences. Select Navigator from the tree down the left side of the window; then be sure that the Home page radio button is selected for Navigator starts with:. In the Home page section click the Use current page button. Then click on the OK button.

That's it; from now on your browser will automatically open to your personal home page with all of your most commonly used links. And, you will return to your page any time you click the Home button on the browser's toolbar.

Why Notepad?

Notepad is a "text editor"; it never inserts any extra, special characters into your document. On the other hand, word processors always insert lots of special, hidden characters into your document so that they can understand how to do the special formatting that they are capable of. These special characters will give your browser quite a surprise and lead to unexpected--and, generally, undesired results.

However, if you really insist on using Wordpad or Word, be sure to select Text Document or Text Only for Save as type; when you save your document. This prevents the word processor from inserting any special characters.

SEATTLE SENIORS INTERNET GROUP